Merge pull request #5 from simonerlic/blog-setup

Add blog

package.json

@@ -12,10 +12,11 @@
   "dependencies": {
     "@astrojs/cloudflare": "^7.5.2",
     "@astrojs/mdx": "^1.1.1",
+    "@astrojs/rss": "^4.0.7",
     "@astrojs/sitemap": "^3.0.1",
     "@astrojs/tailwind": "^5.0.0",
     "@cloudflare/pages-plugin-mailchannels": "^0.1.2",
-    "astro": "^3.2.2",
+    "astro": "^4.12.2",
     "react": "^18.2.0",
     "react-spring": "^9.7.3",
     "tailwindcss": "^3.3.3",

src/components/BaseHead.astro

@@ -41,3 +41,5 @@ const { title, description, image = "/placeholder-social.jpg" } = Astro.props;
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
+
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

src/components/BlogPost.astro

@@ -0,0 +1,5 @@
+---
+const { title, url } = Astro.props;
+---
+
+<li><a href={url}>{title}</a></li>

src/components/blog/BlogHeader.astro

@@ -0,0 +1,92 @@
+---
+import "../../styles/blog-content.css";
+---
+
+<header class="text-center pt-2 pb-2 flex flex-col items-center">
+  <a href="/blog" class="flex flex-col items-center">
+    <canvas id="lil-doodad" style="width: 75px; height: 75px;" class="pb-1"
+    ></canvas>
+    <script is:inline src="https://unpkg.com/[email protected]/build/three.min.js"
+    ></script>
+    <script>
+      // Setup scene, camera, and renderer
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(
+        40,
+        75 / 75, // Use the canvas size
+        0.1,
+        1000
+      );
+      const renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        canvas: document.getElementById("lil-doodad"),
+      });
+      renderer.setSize(75, 75);
+      renderer.setClearColor("#d9d9d9"); // Set the background color
+
+      // Setup the material and geometry for the line
+      const colors = [];
+      const geometry = new THREE.BufferGeometry();
+      const points = [];
+      const tailLength = 2000; // Length of the tail in points
+
+      // Halvorsen Attractor parameters
+      let x = 0.1,
+        y = 0,
+        z = 0;
+      const a = 1.89;
+      const dt = 0.01;
+
+      function halvorsenAttractor() {
+        const dx = -a * x - 4 * y - 4 * z - y * y;
+        const dy = -a * y - 4 * z - 4 * x - z * z;
+        const dz = -a * z - 4 * x - 4 * y - x * x;
+        x += dt * dx;
+        y += dt * dy;
+        z += dt * dz;
+        points.push(new THREE.Vector3(x, y, z));
+
+        // Manage colors for fading effect
+        const newColor = new THREE.Color("#0f0f0f"); // Change color to #0f0f0f
+        newColor.lerp(
+          new THREE.Color("#0f0f0f"),
+          1 - points.length / tailLength
+        ); // Keep the color consistent
+        colors.push(newColor);
+
+        if (points.length > tailLength) {
+          points.shift();
+          colors.shift();
+        }
+
+        geometry.setFromPoints(points);
+        geometry.setAttribute(
+          "color",
+          new THREE.BufferAttribute(
+            new Float32Array(colors.flatMap((c) => c.toArray())),
+            3
+          )
+        );
+      }
+
+      // Create the line with vertex colors enabled
+      const material = new THREE.LineBasicMaterial({ vertexColors: true });
+      const line = new THREE.Line(geometry, material);
+      scene.add(line);
+
+      // Camera position
+      camera.position.z = 50;
+
+      // Animation loop with rotation
+      function animate() {
+        requestAnimationFrame(animate);
+        halvorsenAttractor();
+        line.rotation.y += 0.001; // Slow rotation
+        renderer.render(scene, camera);
+      }
+
+      animate();
+    </script>
+    <h1 class="header-text">Simon's Ramblings</h1>
+  </a>
+</header>

src/components/blog/TopEntries.astro

@@ -0,0 +1,34 @@
+---
+import "../../styles/blog-home.css";
+const allPosts = await Astro.glob("../../pages/posts/*.mdx");
+
+const sortedPosts = allPosts.sort(
+  (a, b) =>
+    Number(new Date(b.frontmatter.pubDate)) -
+    Number(new Date(a.frontmatter.pubDate))
+);
+---
+
+<body class="relative min-h-screen">
+  <div class="recent-box">
+    <h3 class="text-lg mb-4">$ ls -a blog_entries/*.md</h3>
+    <ul class="space-y-4 sm:space-y-2">
+      {
+        sortedPosts.map((post) => (
+          <li>
+            <span class="pr-2">-rw-r--r-- 1 serlic serlic{"  "}</span>
+            <span>
+              {new Date(post.frontmatter.pubDate).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+              })}
+            </span>
+            <a href={post.url} class="underline pl-2">
+              {post.frontmatter.filetitle}.md
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</body>

src/layouts/BlogLayout.astro

@@ -0,0 +1,20 @@
+---
+import Header from "../components/blog/BlogHeader.astro";
+import "../styles/global.css";
+const { pageTitle } = Astro.props;
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{pageTitle}</title>
+  </head>
+  <body>
+    <Header />
+    <div class="blog-body">
+      <slot />
+    </div>
+  </body>
+</html>

src/layouts/MarkdownPostLayout.astro

@@ -0,0 +1,19 @@
+---
+import BlogLayout from "./BlogLayout.astro";
+import "../styles/blog-content.css";
+
+const { title, pubDate } = Astro.props;
+---
+
+<BlogLayout pageTitle={title}>
+  <div class="post-details pb-4 sm:pb-8">
+    <h1>{title}</h1>
+    <p>{pubDate.slice(0, 10)}</p>
+  </div>
+
+  <div class="flex justify-center">
+    <div class="w-full sm:w-[8.5in]">
+      <slot />
+    </div>
+  </div>
+</BlogLayout>