Semi-working posts list page structure; sync

src/pages/[lang]/blog/index.astro

@@ -1,8 +1,9 @@
 ---
 import MainLayout from "../../../layouts/MainLayout.astro";
-
+import { getBlogPosts } from "../../../content/config";
 //@ts-ignore
 import { dictionary } from "../../../i18n/dictionary";
+import SinglePage from "../../../layouts/SinglePage.astro";
 const { title, description } = dictionary[Astro.currentLocale];
 
 export async function getStaticPaths() {
@@ -10,7 +11,24 @@ export async function getStaticPaths() {
     return { params: { lang } };
   });
 }
+var posts = await getBlogPosts();
+var filtered_posts = posts.filter(
+  (post) => post.data.language == Astro.currentLocale
+);
 ---
-<MainLayout title={title} description={description} lang={Astro.currentLocale}>
 
-</MainLayout>
+<MainLayout title={title} description={description} lang={Astro.currentLocale}>
+  <SinglePage>
+    <ul>
+      {
+        filtered_posts.map((post) => (
+          <li>
+            <a href={post.blog_slug}>
+              <h1>{post.data.title}</h1>
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </SinglePage>
+</MainLayout>

src/style/index.css

@@ -25,8 +25,8 @@ Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
         --light-input: 214.3 31.8% 91.4%;
         --light-muted: 210 40% 96.1%;
         --light-muted-foreground: 215 17% 34%;
-        --light-popover: 0 0% 100%;
-        --light-popover-foreground: 222.2 47.4% 11.2%;
+        --light-popover: 0 0% 100%; /* merge to bkgNavbar */
+        --light-popover-foreground: 222.2 47.4% 11.2%; /* merge to bkg */
         --light-border: 214.3 31.8% 91.4%;
         --light-card: 0 0% 100%;
         --light-card-foreground: 222.2 47.4% 11.2%;