Updated the main page and page structures

author: Valentin Popov <valentin@popov.link> 2024-09-12 16:11:16 +0300
committer: Valentin Popov <valentin@popov.link> 2024-09-12 16:11:16 +0300
commit: 4ba339984d239180a526a5ae8ffbb558f1b5642a (patch)
tree: 4dbc5e555c995842e6eea7348f467ef778318b9d
parent: 70fa9c2033dce305db154103bccb41d8124d42d6 (diff)
download: popov.link-4ba339984d239180a526a5ae8ffbb558f1b5642a.tar.xz
popov.link-4ba339984d239180a526a5ae8ffbb558f1b5642a.zip
9 files changed, 132 insertions, 76 deletions
diff --git a/package-lock.json b/package-lock.json
index 5cab963..e7e2583 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "astro": "^4.15.4",
         "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.6",
+        "dayjs": "^1.11.13",
         "mdast-util-to-string": "^4.0.0",
         "reading-time": "^1.5.0",
         "sass": "^1.78.0",
@@ -2894,6 +2895,12 @@
       "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
       "license": "CC0-1.0"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
diff --git a/package.json b/package.json
index c7e0958..b90156a 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "astro": "^4.15.4",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
+    "dayjs": "^1.11.13",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
     "sass": "^1.78.0",
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro
new file mode 100644
index 0000000..889cc47
--- /dev/null
+++ b/src/components/PostElement.astro
@@ -0,0 +1,46 @@
+---
+import dayjs from "dayjs";
+
+const { post } = Astro.props;
+---
+
+<style lang="scss">
+	@import "../scss/_variables.scss";
+
+	/* Post */
+	.post {
+		padding-bottom: 3rem;
+	}
+
+	.link {
+		color: $colorText;
+	}
+
+	/* Meta */
+	.meta {
+		padding-bottom: 1.5rem;
+	}
+
+	.date {
+		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>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index af0d20e..54c9128 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -11,8 +11,8 @@ const { title, description } = Astro.props;
 
 	<body>
 		<Header />
-		<article>
+		<main>
 			<slot />
-		</article>
+		</main>
 	</body>
 </html>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index f99ef21..4ecb1e1 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -23,17 +23,25 @@ const { Content, remarkPluginFrontmatter } = await post.render();
 </style>
 
 <Layout title={post.data.title} description={post.data.description}>
-	<div class="header">
-		<h1>{post.data.title}</h1>
-		<p>
-			<small>
-				Posted
-				<time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time>
-				&nbsp;by&nbsp;{post.data.author}&nbsp;‐
-				<strong>{remarkPluginFrontmatter.minutesRead}</strong>
-			</small>
-		</p>
-	</div>
-	<Content />
-	<Comments />
+	<article>
+		<section class="header">
+			<h1>{post.data.title}</h1>
+			<p>
+				<small>
+					Posted
+					<time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time>
+					&nbsp;by&nbsp;{post.data.author}&nbsp;‐
+					<strong>{remarkPluginFrontmatter.minutesRead}</strong>
+				</small>
+			</p>
+		</section>
+
+		<section>
+			<Content />
+		</section>
+
+		<section>
+			<Comments />
+		</section>
+	</article>
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c4f5577..4380bbc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,18 +1,13 @@
 ---
 import { getCollection } from "astro:content";
+import Element from "../components/PostElement.astro";
 import Layout from "../layouts/PageLayout.astro";
 
 const posts = await getCollection("blog");
 ---
 
 <Layout>
-	<ul>
-		{
-			posts.map((post) => (
-				<li>
-					<a href={`/blog/${post.slug}`}>{post.data.title}</a>
-				</li>
-			))
-		}
-	</ul>
+	<section>
+		{posts.map((post) => <Element post={post} />)}
+	</section>
 </Layout>
diff --git a/src/scss/_framework.scss b/src/scss/_framework.scss
index 0b80359..e1e0c13 100644
--- a/src/scss/_framework.scss
+++ b/src/scss/_framework.scss
@@ -6,16 +6,29 @@
 }
 
 html {
-	font-family: $font-family-base;
+	font-family:
+		"Jost",
+		-apple-system,
+		blinkmacsystemfont,
+		"Segoe UI",
+		roboto,
+		"Helvetica Neue",
+		arial,
+		"Noto Sans",
+		sans-serif,
+		"Apple Color Emoji",
+		"Segoe UI Emoji",
+		"Segoe UI Symbol",
+		"Noto Color Emoji";
 	font-size: 62.5%;
 	min-height: 100%;
 	overflow-y: scroll;
 }
 
 body {
-	background-color: $color-bg;
-	color: $color-text;
-	font-size: $font-size-base;
+	background-color: $colorBg;
+	color: $colorText;
+	font-size: $fontSizeBase;
 	font-synthesis: weight style small-caps;
 	font-weight: 400;
 	line-height: 1.5;
@@ -28,7 +41,7 @@ body {
 
 @media (width <=684px) {
 	body {
-		font-size: $font-size-base * 0.85;
+		font-size: $fontSizeBase * 0.85;
 		padding: 4em 1em 2em;
 	}
 }
@@ -84,16 +97,16 @@ sup {
 }
 
 hr {
-	border-color: $color-blossom;
+	border-color: $colorBlossom;
 }
 
 a {
-	color: $color-blossom;
+	color: $colorBlossom;
 	text-decoration: inherit;
 	transition: color 0.25s;
 
 	&:visited {
-		color: $color-blossom;
+		color: $colorBlossom;
 	}
 
 	&:active,
@@ -114,8 +127,8 @@ li {
 }
 
 blockquote {
-	background-color: $color-bg-alt;
-	border-left: 5px solid $color-blossom;
+	background-color: $colorBgAlt;
+	border-left: 5px solid $colorBlossom;
 	margin-bottom: 2.5rem;
 	margin-left: 0;
 	margin-right: 0;
@@ -136,9 +149,9 @@ video {
 }
 
 pre {
-	background-color: $color-bg-alt;
+	background-color: $colorBgAlt;
 	border-radius: 4px;
-	border: 1px solid $color-bg-alt;
+	border: 1px solid $colorBgAlt;
 	display: block;
 	font-size: 0.9em;
 	margin-bottom: 2.5rem;
@@ -150,7 +163,7 @@ pre {
 code,
 kbd,
 samp {
-	background-color: $color-bg-code;
+	background-color: $colorBgCode;
 	border-radius: 4px;
 	font-size: 0.9em;
 	padding: 0 0.2em;
@@ -172,7 +185,7 @@ table {
 
 td,
 th {
-	border-bottom: 1px dashed $color-blossom;
+	border-bottom: 1px dashed $colorBlossom;
 	padding: 0.5em;
 }
 
@@ -185,11 +198,11 @@ button,
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
-	background-color: $color-blossom;
-	border: 1px solid $color-blossom;
+	background-color: $colorBlossom;
+	border: 1px solid $colorBlossom;
 	border-radius: 1px;
 	box-sizing: border-box;
-	color: $color-bg;
+	color: $colorBg;
 	cursor: pointer;
 	display: inline-block;
 	padding: 5px 10px;
@@ -204,9 +217,9 @@ input[type="button"] {
 
 	&:focus:enabled,
 	&:hover:enabled {
-		background-color: $color-fade;
-		border-color: $color-fade;
-		color: $color-bg;
+		background-color: $colorFade;
+		border-color: $colorFade;
+		color: $colorBg;
 		outline: 0;
 	}
 }
@@ -214,23 +227,23 @@ input[type="button"] {
 textarea,
 select,
 input {
-	background-color: $color-bg-alt;
-	border: 1px solid $color-bg-alt;
+	background-color: $colorBgAlt;
+	border: 1px solid $colorBgAlt;
 	border-radius: 4px;
 	box-shadow: none;
 	box-sizing: border-box;
-	color: $color-text;
+	color: $colorText;
 	margin-bottom: 10px;
 	padding: 6px 10px;
 
 	&:focus {
-		border: 1px solid $color-blossom;
+		border: 1px solid $colorBlossom;
 		outline: 0;
 	}
 }
 
 input[type="checkbox"]:focus {
-	outline: 1px dotted $color-blossom;
+	outline: 1px dotted $colorBlossom;
 }
 
 label,
diff --git a/src/scss/_navbar.scss b/src/scss/_navbar.scss
index ee07ae4..9dea596 100644
--- a/src/scss/_navbar.scss
+++ b/src/scss/_navbar.scss
@@ -1,7 +1,7 @@
 header {
-	background-color: $color-bg;
-	border-bottom: 1px solid $color-header;
-	box-shadow: 0 5px 5px $color-bg;
+	background-color: $colorBg;
+	border-bottom: 1px solid $colorHeader;
+	box-shadow: 0 5px 5px $colorBg;
 	left: 0;
 	line-height: 3.5em;
 	opacity: 0.975;
@@ -17,11 +17,11 @@ nav {
 	text-align: right;
 
 	a {
-		color: $color-text;
+		color: $colorText;
 		padding: 0 1em;
 
 		&:visited {
-			color: $color-text;
+			color: $colorText;
 		}
 	}
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 9c69c8f..5b65f2a 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,22 +1,8 @@
-$color-bg: #212529;
-$color-bg-alt: hwb(0deg 0% 100% / 20%);
-$color-bg-code: #3b3d42;
-$color-blossom: #6da13f;
-$color-fade: #598332;
-$color-header: #1b1f22;
-$color-text: #dee2e6;
-$font-family-base:
-	"Jost",
-	-apple-system,
-	blinkmacsystemfont,
-	"Segoe UI",
-	roboto,
-	"Helvetica Neue",
-	arial,
-	"Noto Sans",
-	sans-serif,
-	"Apple Color Emoji",
-	"Segoe UI Emoji",
-	"Segoe UI Symbol",
-	"Noto Color Emoji";
-$font-size-base: 1.8rem;
+$colorBg: #212529;
+$colorBgAlt: hwb(0deg 0% 100% / 20%);
+$colorBgCode: #3b3d42;
+$colorBlossom: #6da13f;
+$colorFade: #598332;
+$colorHeader: #1b1f22;
+$colorText: #dee2e6;
+$fontSizeBase: 1.8rem;
author	Valentin Popov <valentin@popov.link>	2024-09-12 16:11:16 +0300
committer	Valentin Popov <valentin@popov.link>	2024-09-12 16:11:16 +0300
commit	4ba339984d239180a526a5ae8ffbb558f1b5642a (patch)
tree	4dbc5e555c995842e6eea7348f467ef778318b9d
parent	70fa9c2033dce305db154103bccb41d8124d42d6 (diff)
download	popov.link-4ba339984d239180a526a5ae8ffbb558f1b5642a.tar.xz popov.link-4ba339984d239180a526a5ae8ffbb558f1b5642a.zip