summaryrefslogtreecommitdiff
path: root/www/src/components/BlogPost.astro
diff options
context:
space:
mode:
Diffstat (limited to 'www/src/components/BlogPost.astro')
-rw-r--r--www/src/components/BlogPost.astro110
1 files changed, 0 insertions, 110 deletions
diff --git a/www/src/components/BlogPost.astro b/www/src/components/BlogPost.astro
deleted file mode 100644
index 580179c42..000000000
--- a/www/src/components/BlogPost.astro
+++ /dev/null
@@ -1,110 +0,0 @@
----
-import Author from './Author.astro';
-import GithubStarButton from './GithubStarButton.astro';
-import GoogleAnalytics from './GoogleAnalytics.astro';
-import BackArrow from './BackArrow.astro';
-
-export interface Props {
- title: string;
- author?: string;
- publishDate: string;
- heroImage?: string;
- heroImageAlt?: string;
-}
-
-const { title, author, publishDate, heroImage, heroImageAlt } = Astro.props;
----
-
-<div class="layout">
- <article>
- <header>
- <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage || '/social.jpg'} alt={heroImageAlt || ''} />
- <p class="publish-date">{publishDate}</p>
- <h1 class="title">{title}</h1>
- {author && <Author authorId={author} />}
- <GithubStarButton />
- </header>
- <main class="content">
- <slot />
- <BackArrow url={'/blog/'} title={'Back to all blog posts'} />
- </main>
- </article>
- <GoogleAnalytics />
-</div>
-
-<style lang="scss">
- .hero-image {
- width: 100vw;
- object-fit: cover;
- object-position: center;
- margin-top: 2rem;
- margin-bottom: 4rem;
- max-width: 1280px;
-
- @media (max-width: 50em) {
- height: 260px;
- margin-top: 0;
- margin-bottom: 2rem;
- }
- }
-
- .content {
- margin-bottom: 8rem;
-
- :global(> * + *) {
- margin-top: 1rem;
- }
-
- :global(h2) {
- margin-top: 4rem;
- }
-
- :global(img) {
- max-width: 100%;
- height: auto;
- }
-
- :global(figure) {
- background-color: var(--theme-bg-accent);
- margin: 2.5rem 0;
- padding: 1.5rem;
- }
-
- // hack until <figcaption> parsing fixed
- :global(figcaption *) {
- display: inline;
-
- & + :global(*) {
- margin-left: 0.3em;
- }
- }
- }
-
- header {
- display: flex;
- flex-direction: column;
- text-align: center;
- align-items: center;
- justify-content: center;
-
- padding-bottom: 2rem;
- margin-bottom: 2rem;
- border-bottom: 4px solid var(--theme-divider);
- }
-
- .title,
- .author,
- .publish-date {
- margin: 0;
- }
-
- .publish-date,
- .author {
- color: var(--theme-text-lighter);
- }
-
- .title {
- font-size: 2.25rem;
- font-weight: 700;
- }
-</style>