diff options
author | 2022-07-12 12:17:36 -0400 | |
---|---|---|
committer | 2022-07-12 12:17:36 -0400 | |
commit | ab232dd10f8d8ae5a3654293a1f1429343990039 (patch) | |
tree | 1cb3f510b6e1fa12e5503fdcb8c4ef73fd7ffa95 /examples/blog/src/components/BlogPost.astro | |
parent | 4bf47367687b67170e6c3c722f514b5c2e67519d (diff) | |
download | astro-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.astro | 97 |
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> |