diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-07-12 12:17:36 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-12 12:17:36 -0400 |
| commit | ab232dd10f8d8ae5a3654293a1f1429343990039 (patch) | |
| tree | 1cb3f510b6e1fa12e5503fdcb8c4ef73fd7ffa95 /examples/blog/src/components/BlogPostPreview.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/BlogPostPreview.astro')
| -rw-r--r-- | examples/blog/src/components/BlogPostPreview.astro | 34 |
1 files changed, 11 insertions, 23 deletions
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro index f935ff8b2..865eeeb7f 100644 --- a/examples/blog/src/components/BlogPostPreview.astro +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -1,48 +1,36 @@ --- export interface Props { - post: any; + title: string; + description: string; + publishDate: string; + url: string; } -const { post } = Astro.props; +const { title, description, publishDate, url } = Astro.props as Props; --- <article class="post-preview"> <header> - <p class="publish-date">{post.frontmatter.publishDate}</p> - <a href={post.url}><h1 class="title">{post.frontmatter.title}</h1></a> + <time>{publishDate}</time> + <a href={url}><h1 class="title">{title}</h1></a> </header> - <p>{post.frontmatter.description}</p> - <a href={post.url}>Read more</a> + <p>{description}</p> + <a href={url}>Read more</a> </article> <style> - .content :global(main > * + *) { - margin-top: 1rem; - } - .post-preview { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 4px solid var(--theme-divider); } - header { - align-items: flex-start; - display: flex; - flex-direction: column; - justify-content: center; - padding-bottom: 2rem; - text-align: left; - } - .title, - .author, - .publish-date { + time { margin: 0; } - .publish-date, - .author { + time { font-size: 1.25rem; color: var(--theme-text-lighter); } |