complete posts list page

X7md · May 26, 2024 · b649d35 · b649d35
1 parent 03de819
commit b649d35
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from '@/layouts/Layout.astro';
-import Card from '@/components/Card.astro';
 import { profilePage } from '@/schema.blog';
 ---
 

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from '@/layouts/Layout.astro';
-import Card from '@/components/Card.astro';
 import { blog } from '@/schema.blog';
 import { getCollection } from 'astro:content';
 
@@ -33,7 +32,15 @@ const posts = await getCollection('posts', ({ data }) => {
 							<a href={"/posts/" + post.slug}>
 							<article>
 								<h3>{post.data.title}</h3>
-								<time><small>{post.data.pubDate}</small></time>
+								<time><small>
+								{
+									new Date(post.data.pubDate).toLocaleString('ar-SA', {
+										weekday: 'long',
+										year: 'numeric',
+										month: 'long',
+										day: 'numeric',
+									})
+								}</small></time>
 							</article>
 							</a>
 						</li>

diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from '@/layouts/Layout.astro';
-import Card from '@/components/Card.astro';
 import { blog } from '@/schema.blog';
 import { getCollection } from 'astro:content';
 
@@ -12,8 +11,55 @@ const posts = await getCollection('posts', ({ data }) => {
 <Layout title="مدونة x7md">
 	<main>
         <section class="container">
-			<h2>التدوينات</h2>
+			<div class="text-center">
+				<h2>التدوينات</h2>
+			</div>
+			<div class="d-flex flex-column justify-content-center">
+				<ol role="list" class="d-flex flex-column align-items-center justify-content-center">
+					{
+						posts.sort(
+							(a, b) => Date.parse(a.data.pubDate.valueOf()) - Date.parse(b.data.pubDate.valueOf())
+						).reverse().map((post) => {
+							return (
+							<li>
+								<a href={"/posts/" + post.slug}>
+								<article>
+									<h3>{post.data.title}</h3>
+									<time><small>
+									{
+										new Date(post.data.pubDate).toLocaleString('ar-SA', {
+											weekday: 'long',
+											year: 'numeric',
+											month: 'long',
+											day: 'numeric',
+										})
+									}</small></time>
+								</article>
+								</a>
+							</li>
+							);
+						})
+					}
+				</ol>
+			</div>
 		</section>
     </main>
 </Layout>
+<style>
+	ol {
+		list-style-type: none;
+		margin-block-start: 0;
+    	margin-block-end: 0;
+		padding-inline-start: 0;
+	}
+	ol a {
+		text-decoration: none;
+	}
+	li h3:hover {
+		text-decoration: underline;
+	}
+	li {
+		width: min(100%, 600px)
+	}
+</style>