New Home & added section components (#15)

* rm unused components

* Added Hero Section

* Added HalfTextHalfImage sections

* Added quote section

* fixed padding

* Updated padding on other sections to be a little larger

* Added Navbar

* Made navbar links move to the right on desktop when no CTA exists

* Added Footer

* small fixups for Hero

* Added simple section section

* rm web vitals

* Added Features Section and Container

* Created a render markdown component

* Added a letter section

* Updated TS config for path aliases

* Updated Footer

* Added Sign In Page

* Updated Copy and added View on Deploy to Netlify

* Centered the Clerk Sign In button

* Updated Posts

* Replace home page with new home page and added Posts page updates

* Added FAQ

* If I'm signed in take me to dashboard

* Added optimized images

* bumped version

* rm unused file

.vscode/settings.json

@@ -9,6 +9,9 @@
   "[astro]": {
     "editor.defaultFormatter": "astro-build.astro-vscode"
   },
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
+  },
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.rulers": [120],

astro.config.mjs

@@ -5,7 +5,6 @@ import netlify from "@astrojs/netlify";
 import sentry from "@sentry/astro";
 import db from "@astrojs/db";
 import sitemap from "@astrojs/sitemap";
-import webVitals from "@astrojs/web-vitals";
 import clerk from "@clerk/astro";
 import { copyTinymceToPublic } from "./src/integrations.ts";
 
@@ -33,7 +32,6 @@ export default defineConfig({
       changefreq: "weekly",
       lastmod: new Date()
     }),
-    webVitals(),
     copyTinymceToPublic(),
     clerk()
   ],

db/seed.ts

@@ -14,6 +14,18 @@ Never gonna make you cry, never gonna say goodbye.
 Never gonna tell a lie and hurt you.
 `.trim();
 
+const shrekContent = `
+## The Tale of Shrek: A Story of Layers
+
+Just like onions, this blog post has layers. Shrek taught us that true beauty lies within,
+and that the best stories often come from the most unexpected places - like a swamp.
+
+Some people judge a book by its cover, but as our favorite ogre would say, "Better out than in!"
+This post celebrates the wisdom, humor, and heart that made Shrek a beloved character for generations.
+
+Remember: Ogres are like onions. They have layers. Onions have layers. You get it - we all have layers.
+`.trim();
+
 // https://astro.build/db/seed
 export default async function seed() {
   await db.insert(Posts).values([
@@ -28,6 +40,18 @@ export default async function seed() {
       tags: JSON.stringify(["astro", "blogging", "learning in public"]),
       slug: "my-first-blog-post",
       content
+    },
+    {
+      id: 2,
+      title: "Shrek: Lessons from an Ogre",
+      pubDate: new Date("2022-07-15"),
+      description: "Exploring the wisdom and layers of everyone's favorite ogre.",
+      author: "Astro Learner",
+      imageUrl: "https://example.com/shrek-image.jpg", // Replace with actual Shrek image URL
+      imageAlt: "Shrek standing proudly in his swamp",
+      tags: JSON.stringify(["shrek", "movies", "life lessons", "animation"]),
+      slug: "shrek-lessons-from-an-ogre",
+      content: shrekContent
     }
   ]);
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "freedom-stack",
   "type": "module",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "scripts": {
     "dev": "astro dev",
     "dev:host": "astro dev --host",
@@ -24,7 +24,6 @@
     "@astrojs/db": "^0.14.3",
     "@astrojs/netlify": "^5.5.4",
     "@astrojs/tailwind": "^5.1.2",
-    "@astrojs/web-vitals": "^3.0.0",
     "@clerk/astro": "^1.4.1",
     "@iconify-json/lucide": "^1.2.10",
     "@iconify-json/lucide-lab": "^1.2.1",

src/components/RenderMarkdown.astro

@@ -0,0 +1,20 @@
+---
+import DOMPurify from "isomorphic-dompurify";
+import { marked } from "marked";
+
+interface Props {
+  content: string;
+}
+
+const { content } = Astro.props;
+
+const html = await marked.parse(content);
+
+// Convert markdown to HTML and sanitize
+const purifiedHTML = DOMPurify.sanitize(html, {
+  FORBID_TAGS: ["script", "style", "iframe", "form"],
+  FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"]
+} as DOMPurify.Config);
+---
+
+<div set:html={purifiedHTML} class="[&>p]:m-0 [&>p]:text-xl [&>p]:leading-relaxed" />

src/components/sections/Container.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+  title?: string;
+  subtitle?: string;
+  align?: "center" | "left" | "right";
+  titleIsH1?: boolean;
+}
+
+const { title, subtitle, align = "left", titleIsH1 = false } = Astro.props;
+---
+
+<section class="h-fit container flex flex-col justify-center items-center px-6 py-16">
+  {
+    title || subtitle ? (
+      <div class={`flex flex-col items-${align} max-w-3xl mx-auto text-${align} mb-12 w-full`}>
+        {title && !titleIsH1 ? <h2 class="mb-4 text-balance">{title}</h2> : null}
+        {title && titleIsH1 ? <h1 class="mb-4 text-balance">{title}</h1> : null}
+        {subtitle && <p class="text-xl mb-0 line-clamp-4">{subtitle}</p>}
+      </div>
+    ) : null
+  }
+
+  <slot />
+</section>

src/components/sections/FAQ.astro

@@ -0,0 +1,36 @@
+---
+import Container from "@sections/Container.astro";
+import RenderMarkdown from "@/components/RenderMarkdown.astro";
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  align?: "center" | "left" | "right";
+  items: {
+    question: string;
+    answer: string;
+  }[];
+}
+
+const { title, subtitle, align = "center", items } = Astro.props as Props;
+---
+
+<Container title={title} subtitle={subtitle} align={align}>
+  {
+    items.map((item, index) => (
+      <div class="collapse">
+        <input type="radio" name={title} checked={index === 0} />
+        <h3 class="collapse-title font-medium">{item.question}</h3>
+        <div class="collapse-content">
+          <RenderMarkdown content={item.answer} />
+        </div>
+      </div>
+    ))
+  }
+</Container>
+
+<style>
+  .collapse:has(input:checked) {
+    @apply bg-white rounded-xl border-2 border-slate-200;
+  }
+</style>

src/components/sections/Features/Card.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  title: string;
+  description: string;
+}
+
+const { title, description } = Astro.props as Props;
+---
+
+<div class="card h-full bg-white border-2 border-slate-200">
+  <div class="card-body p-6 items-center text-center">
+    <h3 class="text-balance !m-0">{title}</h3>
+    <p class="m-0">{description}</p>
+  </div>
+</div>

src/components/sections/Features/index.astro

@@ -0,0 +1,19 @@
+---
+import Container from "@sections/Container.astro";
+import Card from "@sections/Features/Card.astro";
+
+interface Props {
+  features: {
+    title: string;
+    description: string;
+  }[];
+}
+
+const { features } = Astro.props as Props;
+---
+
+<Container title="Technologies Inside" subtitle="" align="center">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-center">
+    {features.map((feature) => <Card title={feature.title} description={feature.description} />)}
+  </div>
+</Container>

src/components/sections/Footer.astro

@@ -0,0 +1,63 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+  links?: {
+    title: string;
+    items: {
+      text: string;
+      href: string;
+    }[];
+  }[];
+  copyright?: string;
+}
+
+const {
+  title = "Freedom Stack",
+  description = "A full-stack Astro starter kit that feels freeing and is free.",
+  links = [
+    {
+      title: "Product",
+      items: [
+        { text: "Features", href: "#" },
+        { text: "Documentation", href: "#" }
+      ]
+    },
+    {
+      title: "Company",
+      items: [
+        { text: "About", href: "#" },
+        { text: "Blog", href: "#" }
+      ]
+    }
+  ],
+  copyright = `© ${new Date().getFullYear()} Freedom Stack. All rights reserved.`
+} = Astro.props;
+---
+
+<footer class="not-prose bg-slate-100">
+  <div class="footer py-16 px-6 container">
+    <div>
+      <h2 class="text-xl font-bold">{title}</h2>
+      <p class="text-balance max-w-xs">{description}</p>
+      <p class="text-slate-500 mt-2">{copyright}</p>
+    </div>
+
+    {
+      links.map((section) => (
+        <div>
+          <h3 class="footer-title m-0 font-normal text-slate-800 opacity-100">{section.title}</h3>
+          <ul class="space-y-2">
+            {section.items.map((link) => (
+              <li>
+                <a href={link.href} class="hover:underline hover:text-primary transition-colors">
+                  {link.text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))
+    }
+  </div>
+</footer>