diff options
| -rw-r--r-- | .vscode/launch.json | 2 | ||||
| -rw-r--r-- | astro.config.mjs | 4 | ||||
| -rw-r--r-- | src/components/PostSummary.astro | 50 |
3 files changed, 26 insertions, 30 deletions
diff --git a/.vscode/launch.json b/.vscode/launch.json index d642209..64aca51 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -2,7 +2,7 @@ "version": "0.2.0", "configurations": [ { - "command": "./node_modules/.bin/astro dev", + "command": "./node_modules/.bin/astro dev --host 0.0.0.0", "name": "Development server", "request": "launch", "type": "node-terminal" diff --git a/astro.config.mjs b/astro.config.mjs index 1f6c4c2..9317308 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,7 +6,9 @@ import sitemap from "@astrojs/sitemap"; export default defineConfig({ site: "https://popov.link", output: "hybrid", - adapter: cloudflare(), + adapter: cloudflare({ + imageService: "compile", + }), integrations: [sitemap()], markdown: { remarkPlugins: [remarkReadingTime], diff --git a/src/components/PostSummary.astro b/src/components/PostSummary.astro index 2f98130..59d7683 100644 --- a/src/components/PostSummary.astro +++ b/src/components/PostSummary.astro @@ -7,45 +7,39 @@ type Props = { }; const { post } = Astro.props; +const { remarkPluginFrontmatter } = await post.render(); +const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"); --- <style lang="scss"> @import "../scss/_variables.scss"; - /* Post */ - .post { - padding-bottom: 3rem; - } - - .link { + a { color: $colorText; + display: block; + padding-bottom: 3rem; } - /* Meta */ - .meta { - padding-bottom: 1.5rem; + h2 { + color: $colorBlossom; + font-size: 1.25em; + margin: 0.5em 0; } - .date { + div { + font-size: $fontSizeBase * 0.75; opacity: 0.5; } - - .tag { - display: none; - } </style> -<article class="post"> - <h2><a class="link" href={`/blog/${post.slug}`}>{post.data.title}</a></h2> - <div class="meta"> - <time class="date" datetime={post.data.pubDate.toISOString()}> - {dayjs(post.data.pubDate.toString()).format("YYYY-MM-DD")} - </time> - <ul class="tag"> - <li><a href="#">tag1</a></li> - <li><a href="#">tag2</a></li> - </ul> - </div> - <p>{post.data.description}</p> - <a href={`/blog/${post.slug}`}>Read More</a> -</article> +<a href={`/blog/${post.slug}`}> + <article> + <div> + <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> + <span>•</span> + <span>{remarkPluginFrontmatter.minutesRead}</span> + </div> + <h2>{post.data.title}</h2> + <p>{post.data.description}</p> + </article> +</a> |