feat: text version for posts

src/components/Search.astro

@@ -19,8 +19,13 @@
 
   let fuse;
   let posts = [];
+  let searchInitialized = false;
 
   async function initializeSearch() {
+    // Prevent multiple initializations
+    if (searchInitialized) return;
+    try {
+      // Fetch the search index
       const response = await fetch('/search-index.json');
       posts = await response.json();
 
@@ -29,6 +34,11 @@
         threshold: 0.3,
         includeMatches: true
       });
+      searchInitialized = true;
+      document.getElementById('search-results').innerHTML = '';
+    } catch (error) {
+        console.error('Error fetching search index:', error);
+    }
   }
 
   function performSearch(query) {
@@ -37,6 +47,8 @@
       return;
     }
 
+    if (!searchInitialized) return;
+
     const results = fuse.search(query);
     const resultsElement = document.getElementById('search-results');
     
@@ -58,15 +70,28 @@
 
     resultsElement.innerHTML = html;
   }
-
-  // Initialize search when the component mounts
-  initializeSearch();
-
   // Add event listener for search input
   const searchInput = document.getElementById('search-input');
+
+  // Initialize search only when the input is focused or clicked
+  searchInput.addEventListener('focus', initializeSearch);
+  searchInput.addEventListener('click', initializeSearch);
+
   searchInput.addEventListener('input', (e) => {
+    if (!searchInitialized) {
+        initializeSearch().then(() => {
             performSearch(e.target.value);
         });
+    } else {
+        performSearch(e.target.value);
+    }
+  });
+
+  searchInput.addEventListener('focus', () => {
+    if (!searchInitialized) {
+      document.getElementById('search-results').innerHTML = '<p>Loading search index...</p>';
+    }
+  });
 </script>
 
 <style>

src/content/config.ts

@@ -1,11 +1,17 @@
 import { defineCollection } from 'astro:content';
-import { blogs } from './blog/_schemas';
+import { posts } from './posts/_schemas';
+import { pages } from "./pages/_schemas";
 
 const blogCollection = defineCollection({
   type: 'content',
-  schema: blogs,
+  schema: posts,
+});
+const pageCollection = defineCollection({
+    type: 'content',
+    schema: pages,
 });
 
 export const collections = {
-  'blog': blogCollection,
+  'posts': blogCollection,
+  'pages': pageCollection,
 };

src/content/pages/_schemas.ts

@@ -0,0 +1,7 @@
+import { z } from 'astro:content';
+
+export const pages = z.object({
+  title: z.string(),
+  description: z.string(),
+  heroImage: z.string().optional()
+});

src/content/pages/test.md

@@ -0,0 +1,5 @@
+---
+title: 'Test Page'
+description: 'This is a test page'
+---
+testestestest

src/content/posts/_schemas.ts

@@ -1,6 +1,6 @@
 import { z } from 'astro:content';
 
-export const blogs = z.object({
+export const posts = z.object({
   title: z.string(),
   description: z.string(),
   pubDate: z.coerce.date(),

src/pages/[...slug].astro

@@ -0,0 +1,21 @@
+---
+import Layout from '../layouts/Layout.astro';
+import { getCollection } from "astro:content";
+
+export async function getStaticPaths() {
+    const pageEntries = await getCollection('pages');
+    return pageEntries.map(entry => ({
+        params: { slug: entry.slug }, props: { entry },
+    }));
+}
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+---
+
+<Layout title={`${entry.data.title} | Terminal Blog`} path={`/var/log/${entry.slug}`}>
+    <h1 class="post-title">{entry.data.title}</h1>
+    <div class="post-content">
+        <Content/>
+    </div>
+</Layout>

src/pages/blog.astro

@@ -2,7 +2,7 @@
 import Layout from '../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
 
-const posts = await getCollection('blog');
+const posts = await getCollection('posts');
 posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());
 ---
 
@@ -18,7 +18,7 @@ posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDat
         {posts.map((post) => (
           <p>
             <span style="color: var(--terminal-yellow);">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span> 
-            <a href={`/blog/${post.slug}`}>{post.data.title}</a>
+            <a href={`/post/${post.slug}`}>{post.data.title}</a>
           </p>
         ))}
         

src/pages/post/[...slug].astro

@@ -3,7 +3,7 @@ import Layout from '../../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection('blog');
+  const blogEntries = await getCollection('posts');
   return blogEntries.map(entry => ({
     params: { slug: entry.slug }, props: { entry },
   }));

src/pages/post/[...slug].txt.js

@@ -0,0 +1,25 @@
+import { getCollection } from 'astro:content';
+
+export const prerender = true;
+export async function getStaticPaths() {
+    const blogEntries = await getCollection('posts');
+    return blogEntries.map(entry => ({
+        params: { slug: entry.slug }, props: { entry },
+    }));
+}
+export async function GET({ props }) {
+    const { entry } = props;
+    // Format the content as plain text
+    const title = entry.data.title;
+    const date = entry.data.pubDate.toISOString().split('T')[0];
+    const content = entry.body;
+
+    // Combine the post info and body into a single text file
+    const textContent = `Title: ${title}\nPublished at: ${date}\n\n${content}`;
+
+    return new Response(textContent, {
+        headers: {
+            'Content-Type': 'text/plain',
+        },
+    });
+}

src/pages/rss.xml.js

@@ -21,7 +21,7 @@ export async function GET(context) {
   const container = await AstroContainer.create({ renderers });
 
   // Load the content collection entries to add to our RSS feed.
-  const posts = (await getCollection("blog")).sort((a, b) =>
+  const posts = (await getCollection("posts")).sort((a, b) =>
       // Sort by publication date descending.
       a.data.pubDate > b.data.pubDate ? -1 : 1
   );

src/pages/search-index.json.js

@@ -1,7 +1,7 @@
 import { getCollection } from 'astro:content';
 
 export async function GET() {
-  const posts = await getCollection('blog');
+  const posts = await getCollection('posts');
   const searchIndex = posts.map(post => ({
     title: post.data.title,
     description: post.data.description,

src/styles/global.css

@@ -13,7 +13,7 @@
 }
 /* Light theme */
 @media (prefers-color-scheme: light) {
-  :root {
+  :root:not([data-theme="dark"]) {
     --bg-color: #f3f4f6;
     --text-color: #374151;
     --accent-color: #3b82f6;
@@ -23,16 +23,6 @@
     --terminal-yellow: #d97706;
     --terminal-red: #dc2626;
   }
-  :root:not([data-theme="light"]) {
-    --bg-color: #1f2937;
-    --text-color: #a5b4cf;
-    --accent-color: #64a0ff;
-    --border-color: #3b4351;
-    --header-color: #83a2ce;
-    --terminal-green: #4ade80;
-    --terminal-yellow: #fbbf24;
-    --terminal-red: #ef4444;
-  }
 }
 /* Light theme override (for switch) */
 :root[data-theme="light"] {
@@ -46,6 +36,7 @@
   --terminal-red: #dc2626;
 }
 
+
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;