diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2022-08-13 00:09:40 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-08-13 00:09:40 -0700 |
| commit | d54588c7a4adfa05969713111d36673f3a9b988e (patch) | |
| tree | 3f41bf5171a9121517ced0f0e49160b3d86e932e /examples/blog/src/pages/blog.astro | |
| parent | d4b06f9d8e5d62893743b191c6bd108fc33b7805 (diff) | |
| download | astro-d54588c7a4adfa05969713111d36673f3a9b988e.tar.gz astro-d54588c7a4adfa05969713111d36673f3a9b988e.tar.zst astro-d54588c7a4adfa05969713111d36673f3a9b988e.zip | |
Update: blog template (#4283)
* add new blog template
* update placeholder images
* use svg favicon
* Update examples/blog/src/pages/blog/using-mdx.mdx
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
* fred pass
* more fred pass
Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Diffstat (limited to 'examples/blog/src/pages/blog.astro')
| -rw-r--r-- | examples/blog/src/pages/blog.astro | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/examples/blog/src/pages/blog.astro b/examples/blog/src/pages/blog.astro new file mode 100644 index 000000000..ffc339e67 --- /dev/null +++ b/examples/blog/src/pages/blog.astro @@ -0,0 +1,57 @@ +--- +import BaseHead from '../components/BaseHead.astro'; +import Header from '../components/Header.astro'; +import Footer from '../components/Footer.astro'; +import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; + +// Use Astro.glob() to fetch all posts, and then sort them by date. +const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort( + (a, b) => + new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf() +); +--- +<!DOCTYPE html> +<html lang="en-us"> + <head> + <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} /> + <style> + ul { + list-style-type: none; + padding: unset; + } + ul li { + display: flex; + } + ul li time { + flex: 0 0 130px; + font-style: italic; + color: #888; + } + ul li a:visited { + color: #8e32dc; + } + </style> + </head> + <body> + <Header /> + <main> + <content> + <ul> + {posts.map((post) => ( + <li> + <time datetime={post.frontmatter.publishDate}> + {new Date(post.frontmatter.publishDate).toLocaleDateString('en-us', { + year: 'numeric', + month: 'short', + day: 'numeric', + })} + </time> + <a href={post.url}>{post.frontmatter.title}</a> + </li> + ))} + </ul> + </content> + <Footer /> + </main> + </body> +</html> |