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/pages/index.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/pages/index.astro')
| -rw-r--r-- | examples/blog/src/pages/index.astro | 91 |
1 files changed, 36 insertions, 55 deletions
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index b278c5510..22c095c74 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -1,81 +1,62 @@ --- -// Component Imports import BaseHead from "../components/BaseHead.astro"; -import BlogHeader from "../components/BlogHeader.astro"; +import Header from "../components/Header.astro"; import BlogPostPreview from "../components/BlogPostPreview.astro"; -// Component Script: -// You can write any JavaScript/TypeScript that you'd like here. -// It will run during the build, but never in the browser. -// All variables are available to use in the HTML template below. let title = "Example Blog"; let description = "The perfect starter for your perfect blog."; -let permalink = "https://example.com/"; -// Data Fetching: List all Markdown posts in the repo. - -let allPosts = await Astro.glob("./posts/*.md"); -allPosts = allPosts.sort( - (a, b) => +// Use Astro.glob to fetch all post with associated frontmatter +const unsortedPosts = await Astro.glob("./posts/*.md"); +const posts = unsortedPosts.sort(function (a, b) { + return ( new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf() -); - -// Full Astro Component Syntax: -// https://docs.astro.build/core-concepts/astro-components/ + ); +}); --- <html lang="en"> <head> - <BaseHead {title} {description} {permalink} /> - - <style> - header { - width: 100%; - height: 100%; - background-color: var(--theme-bg-offset); - display: flex; - align-items: center; - justify-content: center; - } - - .content { - margin-top: 4rem; - margin-bottom: 8rem; - } - - .content :global(main > * + *) { - margin-top: 1rem; - } - - .intro { - padding-bottom: 4rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); - } - - .intro > * { - margin: 0; - } - - .latest { - font-size: 2.5rem; - font-weight: 700; - } - </style> + <BaseHead title={title} description={description} /> </head> <body> - <BlogHeader /> + <Header /> <div class="wrapper"> <main class="content"> <section class="intro"> - <h1 class="latest">{title}</h1> + <h1>{title}</h1> <p>{description}</p> </section> <section aria-label="Blog post list"> - {allPosts.map((p) => <BlogPostPreview post={p} />)} + {posts.map(({ url, frontmatter }) => ( + <BlogPostPreview + title={frontmatter.title} + description={frontmatter.description} + publishDate={frontmatter.publishDate} + url={url} + /> + ))} </section> </main> </div> </body> </html> + +<style> + .content { + margin-top: 4rem; + margin-bottom: 8rem; + } + + .intro { + padding-bottom: 4rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } + + h1 { + font-size: 2.5rem; + font-weight: 700; + } +</style> |