From ab232dd10f8d8ae5a3654293a1f1429343990039 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Tue, 12 Jul 2022 12:17:36 -0400 Subject: 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 * 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! --- examples/blog/src/pages/index.astro | 91 +++++++++++++++---------------------- 1 file changed, 36 insertions(+), 55 deletions(-) (limited to 'examples/blog/src/pages/index.astro') 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/ + ); +}); --- - - - + - +
-

{title}

+

{title}

{description}

- {allPosts.map((p) => )} + {posts.map(({ url, frontmatter }) => ( + + ))}
+ + -- cgit v1.2.3