summaryrefslogtreecommitdiff
path: root/examples/blog/src/components/BlogPost.astro
diff options
context:
space:
mode:
authorGravatar Ben Holmes <hey@bholmes.dev> 2022-07-12 12:17:36 -0400
committerGravatar GitHub <noreply@github.com> 2022-07-12 12:17:36 -0400
commitab232dd10f8d8ae5a3654293a1f1429343990039 (patch)
tree1cb3f510b6e1fa12e5503fdcb8c4ef73fd7ffa95 /examples/blog/src/components/BlogPost.astro
parent4bf47367687b67170e6c3c722f514b5c2e67519d (diff)
downloadastro-ab232dd10f8d8ae5a3654293a1f1429343990039.tar.gz
astro-ab232dd10f8d8ae5a3654293a1f1429343990039.tar.zst
astro-ab232dd10f8d8ae5a3654293a1f1429343990039.zip
Example blog rework (#3896)
* refactor: restructure components, kill dead code * nit: tweak base styles * nit: remove unneeded code comments * refactor: replace unused permalink with canonicalURL * refactor: add missing prop types * feat: make markdown examples more interesting * chore: consistent semis and quotes * chore: astro check failures * fix: bad url prop * fix: bad frontmatter quote * chore: more dead styles * chore: add header gap * refactor: use tsx for likebutton * fix: restore post sorting * chore: remove unused flex-row util * fix: small md formatting on README * chore: run through astro-plugin-prettier * fix: revert to double quotes * fix: manually move style outside <body> * fix: update file tree in README * refactor: publish-date -> time * refactor: remove unused div and margin * refactor: publishDate -> time on layout * refactor: .heroImage -> img * refactor: .logo -> svg * feat: update social image, remove jpg * fix: remove prism stylesheet!
Diffstat (limited to 'examples/blog/src/components/BlogPost.astro')
-rw-r--r--examples/blog/src/components/BlogPost.astro97
1 files changed, 0 insertions, 97 deletions
diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro
deleted file mode 100644
index 55eaa66ed..000000000
--- a/examples/blog/src/components/BlogPost.astro
+++ /dev/null
@@ -1,97 +0,0 @@
----
-import Author from "./Author.astro";
-
-export interface Props {
- title: string;
- author: string;
- publishDate: string;
- heroImage: string;
- alt: string;
-}
-
-const { title, author, publishDate, heroImage, alt } = Astro.props;
----
-
-<div class="layout">
- <article class="content">
- <div>
- <header>
- {heroImage && (
- <img
- width="720"
- height="420"
- class="hero-image"
- loading="lazy"
- src={heroImage}
- alt={alt}
- />
- )}
- <p class="publish-date">{publishDate}</p>
- <h1 class="title">{title}</h1>
- <Author name="@FredKSchott" href="https://twitter.com/FredKSchott" />
- </header>
- <main>
- <slot />
- </main>
- </div>
- </article>
-</div>
-
-<style>
- .hero-image {
- width: 100vw;
- object-fit: cover;
- object-position: center;
- margin-top: 2rem;
- margin-bottom: 4rem;
- max-width: 1280px;
- }
-
- @media (max-width: 50em) {
- .hero-image {
- height: 260px;
- margin-top: 0;
- margin-bottom: 2rem;
- }
- }
-
- .content {
- margin-bottom: 8rem;
- }
-
- .content :global(main > * + *) {
- margin-top: 1rem;
- }
-
- .content :global(h2) {
- margin-top: 4rem;
- }
-
- 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>