chore: add insights page

surveilr · Oct 24, 2024 · 9d8395c · 9d8395c
1 parent 784bf60
commit 9d8395c
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 44 deletions.
diff --git a/src/images/blog/advanced-polyglot-orchestration.avif b/src/images/blog/advanced-polyglot-orchestration.avif
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -92,7 +92,7 @@ const webPageSchema = {
   </section>
   <!--Insights section-->
 
-  <section
+  <!-- <section
     class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
   >
     <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
@@ -112,6 +112,6 @@ const webPageSchema = {
         ))
       }
     </div>
-  </section>
+  </section> -->
 
 </MainLayout>
diff --git a/src/pages/insights/[...slug].astro b/src/pages/insights/[...slug].astro
@@ -30,9 +30,26 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
 <MainLayout title={pageTitle}>
   <section class="py-6 sm:py-8 lg:py-12">
     <div class="mx-auto max-w-screen-xl px-4 md:px-8">
-      <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
-        <div>
-          <div class="h-64 overflow-hidden rounded-lg shadow-lg md:h-auto">
+      <div class="grid gap-8 md:grid-cols-12 lg:gap-12">
+        <!-- Table of Contents -->
+        <div class="md:col-span-3">
+          <div id="pin" class="space-y-4 hidden md:block">
+            <div class="h-px w-full overflow-hidden bg-neutral-300 dark:bg-neutral-700">
+              <div id="progress" class="h-px w-full bg-gradient-to-r from-orange-400/30 to-orange-400"></div>
+            </div>
+            <p class="text-pretty text-sm font-light text-neutral-500 mt-0">Table of Contents:</p>
+            <div id="toc">
+              <ul class="space-y-2 text-pretty text-base text-neutral-700 transition duration-300 dark:text-neutral-400">
+                <!-- Your dynamically generated ToC will go here -->
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="md:col-span-9">
+          <!-- Adjust the height of the image -->
+          <div class="h-48 overflow-hidden rounded-lg shadow-lg md:h-64 lg:h-72">
             <Image
               class="h-full w-full object-cover object-center"
               src={post.data.cardImage}
@@ -41,49 +58,23 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
               format={"avif"}
             />
           </div>
-          <div
-            id="progress-mobile"
-            class="fixed left-0 top-0 h-2 w-full bg-gradient-to-r from-orange-400/30 to-orange-400 md:hidden"
-          >
+
+          <div id="progress-mobile" class="fixed left-0 top-0 h-2 w-full bg-gradient-to-r from-orange-400/30 to-orange-400 md:hidden"></div>
+
+          <div class="md:pt-8">
+            <h1 class="mb-4 text-balance text-center text-2xl font-bold text-neutral-800 dark:text-neutral-200 sm:text-3xl md:mb-6 md:text-left">
+              {post.data.title}
+            </h1>
+
+            <article class="text-pretty text-lg text-neutral-700 dark:text-neutral-300">
+              <Content />
+            </article>
           </div>
-          <div id="pin" class="mt-10 hidden space-y-4 md:block">
-            <div
-              class="h-px w-full overflow-hidden bg-neutral-300 dark:bg-neutral-700"
-            >
-              <div
-                id="progress"
-                class="h-px w-full bg-gradient-to-r from-orange-400/30 to-orange-400"
-              >
-              </div>
-            </div>
-            <p class="text-pretty text-sm font-light text-neutral-500">
-              Table of Contents:
-            </p>
-            <div id="toc" class="">
-              <ul
-                class="space-y-2 text-pretty text-base text-neutral-700 transition duration-300 dark:text-neutral-400"
-              >
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <div class="md:pt-8">
-          <h1
-            class="mb-4 text-balance text-center text-2xl font-bold text-neutral-800 dark:text-neutral-200 sm:text-3xl md:mb-6 md:text-left"
-          >
-            {post.data.title}
-          </h1>
-
-          <article
-            class="text-pretty text-lg text-neutral-700 dark:text-neutral-300"
-          >
-            <Content />
-          </article>
         </div>
       </div>
     </div>
-  </section>
+  </section> 
+
 </MainLayout>
 
 <style is:global>
@@ -129,6 +120,8 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
     align-items: center;
     opacity: 0.8;
     transition: all 300ms var(--transition-cubic);
+    border-bottom: 1px solid #d1c8c8;
+    padding-bottom: 3px;
   }
 
   #toc li.selected {

diff --git a/src/pages/insights/index.astro b/src/pages/insights/index.astro
@@ -0,0 +1,66 @@
+---
+// Import necessary components, modules and types
+import MainLayout from "@/layouts/MainLayout.astro";
+import CardInsight from "@components/ui/cards/CardInsight.astro";
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import { SITE } from "@data/constants";
+
+// Get all blogs post in English and sort them based on publish date
+
+const englishInsightsEntries = await getCollection("insights", ({ id }) => {
+  return id.startsWith("en/");
+});
+
+// Get all insights posts
+const insightPosts: CollectionEntry<"insights">[] = englishInsightsEntries;
+
+// Define variables for page content
+const secondTitle: string = "Insights";
+const secondSubTitle: string =
+  "Stay up-to-date with the latest trends and developments in the compliance industry with insights from our team of industry experts. ";
+
+const pageTitle: string = `Insights | ${SITE.title}`;
+
+const webPageSchema = {
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  name: pageTitle,
+  url: Astro.url.href,
+  description: SITE.description,
+  publisher: {
+    "@type": "Organization",
+    name: "Surveilr",
+    logo: {
+      "@type": "ImageObject",
+      url: "https://www.surveilr.com/assets/brand/surveilr-logo-without-tagline.png",
+    },
+  },
+};
+---
+
+<MainLayout title={pageTitle} structuredData={webPageSchema}>
+
+  <section
+    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
+  >
+    <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
+      <h2
+        class="text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
+      >
+        {secondTitle}
+      </h2>
+      <p class="mt-1 text-pretty text-neutral-600 dark:text-neutral-400">
+        {secondSubTitle}
+      </p>
+    </div>
+    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        insightPosts.map((insightEntry) => (
+          <CardInsight insightEntry={insightEntry} />
+        ))
+      }
+    </div>
+  </section>
+
+</MainLayout>
diff --git a/src/utils/fr/navigation.ts b/src/utils/fr/navigation.ts
@@ -3,6 +3,7 @@ const navBarLinks = [
   { name: "Produits", url: "/fr/pattern" },
   { name: "Services", url: "/fr/services" },
   { name: "Blog", url: "/fr/blog" },
+  { name: "Insights", url: "/insights" },
   // { name: "Contact", url: "/fr/contact" },
 ];
 

diff --git a/src/utils/navigation.ts b/src/utils/navigation.ts
@@ -5,6 +5,7 @@ const navBarLinks = [
   { name: "Patterns", url: "/pattern" },
   { name: "Services", url: "/services" },
   { name: "Blog", url: "/blog" },
+  { name: "Insights", url: "/insights" },
   // { name: "Contact", url: "/contact" },
 ];
 // An array of links for footer