valentineus/popov.link
valentineus/popov.link
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Update launch configuration and enhance PostSummary component layout

Browse Source
This commit is contained in:
Valentin Popov 2024-09-17 22:27:55 +00:00
parent 43f80a7b6e
commit cf85f10724
Signed by: Valentin Popov
GPG Key ID: AE3CE523DAAA8401
3 changed files with 26 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/launch.json vendored
View File

@ -2,7 +2,7 @@
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"command": "./node_modules/.bin/astro dev", "command": "./node_modules/.bin/astro dev --host 0.0.0.0",
"name": "Development server", "name": "Development server",
"request": "launch", "request": "launch",
"type": "node-terminal" "type": "node-terminal"

4
astro.config.mjs
View File

@ -6,7 +6,9 @@ import sitemap from "@astrojs/sitemap";
export default defineConfig({ export default defineConfig({
site: "https://popov.link", site: "https://popov.link",
output: "hybrid", output: "hybrid",
adapter: cloudflare(), adapter: cloudflare({
imageService: "compile",
}),
integrations: [sitemap()], integrations: [sitemap()],
markdown: { markdown: {
remarkPlugins: [remarkReadingTime], remarkPlugins: [remarkReadingTime],

50
src/components/PostSummary.astro
View File

@ -7,45 +7,39 @@ type Props = {
}; };
const { post } = Astro.props; const { post } = Astro.props;
const { remarkPluginFrontmatter } = await post.render();
const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
--- ---
<style lang="scss"> <style lang="scss">
@import "../scss/_variables.scss"; @import "../scss/_variables.scss";
/* Post */ a {
.post { color: $colorText;
display: block;
padding-bottom: 3rem; padding-bottom: 3rem;
} }
.link { h2 {
color: $colorText; color: $colorBlossom;
font-size: 1.25em;
margin: 0.5em 0;
} }
/* Meta */ div {
.meta { font-size: $fontSizeBase * 0.75;
padding-bottom: 1.5rem;
}
.date {
opacity: 0.5; opacity: 0.5;
} }
.tag {
display: none;
}
</style> </style>
<article class="post"> <a href={`/blog/${post.slug}`}>
<h2><a class="link" href={`/blog/${post.slug}`}>{post.data.title}</a></h2> <article>
<div class="meta"> <div>
<time class="date" datetime={post.data.pubDate.toISOString()}> <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
{dayjs(post.data.pubDate.toString()).format("YYYY-MM-DD")} <span>•</span>
</time> <span>{remarkPluginFrontmatter.minutesRead}</span>
<ul class="tag"> </div>
<li><a href="#">tag1</a></li> <h2>{post.data.title}</h2>
<li><a href="#">tag2</a></li> <p>{post.data.description}</p>
</ul> </article>
</div> </a>
<p>{post.data.description}</p>
<a href={`/blog/${post.slug}`}>Read More</a>
</article>