Updates for BUILD

web/README.md

@@ -1,13 +1,23 @@
-## The Fabric Web App
+# The Fabric Web App
 [Installing](#Installing)|[Todos](#Todos)|[Collaborators](#Collaborators)
 
-This is the web app for Fabric. It is built using [Svelte](https://svelte.dev/), [SkeletonUI](https://skeleton.dev/), and [Mdsvex](https://mdsvex.pngwn.io/). 
+This is a web app for Fabric. It was built using [Svelte](https://svelte.dev/), [SkeletonUI](https://skeleton.dev/), and [Mdsvex](https://mdsvex.pngwn.io/). 
+
+The goal of this app is to not only provide a user interface for Fabric, but also a out-of-the-box website for those who want to get started with web development, blogging, or to just have a web interface for fabric. You can use this app as a GUI interface for Fabric, a ready to go blog-site, or a website template for your own projects. 
+
+![Preview](/fabric-png.png)
+
+## Installing
+
+It can be installed by navigating to the `web` directory and using `npm install`, `pnpm install`, or your preferred package manager. Then simply run `npm run dev` or your equivalent command to start the app. *You will need to run fabric in a seperate terminal with the `fabric --serve` command.*
+
+A production build is available as well. You can run it with `npm run preview` or using your preferred package manager
+
+## Tips
+
+When creating new posts make sure to include a date, description, tags, and aliases. Only a date is needed to display a note.
 
-The goal of this app is to not only provide a user interface for Fabric, but also a out-of-the-box website for those who want to get started with web development or blogging. The tech stack is minimal and (I hope) the code is easy to read and understand. One thing I kept in mind when making this app was to make it easy for beginners to get started with web development. You can use this app as a GUI interface for Fabric, a ready to go blog-site, or a website template for your own projects. I hope you find it useful!
 
-![Preview](static/image.png)
 
-### Installing
-It can be installed by navigating to the `web` directory and using `npm install`, `pnpm install`, or your favorite package manager. Then simply run `npm run dev` or your equivalent command to start the app. *You will need to run fabric in a seperate terminal with the `fabric --serve` command.*
 
 

web/src/lib/.types/.interfaces/chat-interface.ts

@@ -1,48 +0,0 @@
-export type MessageRole = 'system' | 'user' | 'assistant';
-export type ResponseFormat = 'markdown' | 'mermaid' | 'plain';
-export type ResponseType = 'content' | 'error' | 'complete';
-
-export interface ChatPrompt {
-  userInput: string;
-  systemPrompt: string;
-  model: string;
-  patternName: string;
-}
-
-export interface ChatConfig {
-  temperature: number;
-  top_p: number;
-  frequency_penalty: number;
-  presence_penalty: number;
-}
-
-export interface ChatRequest {
-  prompts: ChatPrompt[];
-  messages: Message[];
-  temperature: number;
-  top_p: number;
-  frequency_penalty: number;
-  presence_penalty: number;
-}
-
-export interface Message {
-  role: MessageRole;
-  content: string;
-}
-
-export interface ChatState {
-  messages: Message[];
-  isStreaming: boolean;
-}
-
-export interface StreamResponse {
-  type: ResponseType;
-  format: ResponseFormat;
-  content: string;
-}
-
-export interface ChatError {
-  code: string;
-  message: string;
-  details?: unknown;
-}

web/src/lib/.types/.interfaces/model-interface.ts

@@ -1,19 +0,0 @@
-export interface VendorModel {
-  name: string;
-  vendor: string;
-}
-
-export interface ModelsResponse {
-  models: string[];
-  vendors: Record<string, string[]>;
-}
-
-
-export interface ModelConfig {
-  model: string;
-  temperature: number;
-  top_p: number;
-  maxLength: number;
-  frequency: number;
-  presence: number;
-}

web/src/lib/.types/.interfaces/pattern-interface.ts

@@ -1,5 +0,0 @@
-export interface Pattern {
-  Name: string;
-  Description: string;
-  Pattern: string; // | object
-}

web/src/lib/.types/.interfaces/session-interface.ts

@@ -1,7 +0,0 @@
-import type { Message } from "./chat-interface";
-
-export interface Session {
-  Name: string;
-  Message: string | Message[];
-  Session: string | object;
-}

web/src/lib/.types/.interfaces/storage-interface.ts

@@ -1,7 +0,0 @@
-export interface StorageEntity {
-  Name: string;
-  Description?: string;
-  Pattern?: string | object;
-  Session?: string | object;
-  Context?: string | object;
-}

web/src/lib/.types/markdown.ts

@@ -1,29 +0,0 @@
-
-// Declare the interface first
-export interface Frontmatter {
-  title: string;
-  aliases?: string[];
-  description: string;
-  date: string;
-  tags: string[];
-  updated?: string;
-  author?: string;
-  layout?: string;
-  images?: string[];
-}
-
-export interface MdsvexCompileData {
-  fm: Frontmatter;
-  [key: string]: unknown;
-}
-
-// Then declare the module for .md files
-//declare module '*.md' {
-//  import type { SvelteComponent } from 'svelte';
-//  import type { PostMetadata } from '$lib/interfaces/post-interface';
-//  export const metadata: PostMetadata;
-//  export const frontmatter: Frontmatter;
-//  const component: SvelteComponent;
-//  export default class MarkdownComponent extends SvelteComponent {}
-//   export default component;
-//}

web/src/lib/.types/note.md

@@ -1 +0,0 @@
-This folder can be deleted. The interfaces are now in $lib/interfaces. The chat folder that was here is now $lib/api. The markdown.ts file is now in utils

web/src/lib/components/ui/noteDrawer/NoteDrawer.svelte

@@ -94,7 +94,7 @@
         {/if}
       </header>
       <div class="p-1">
-      <div class="flex-1 p-4 justify-center overflow-visible items-center m-4">
+      <div class="flex-1 p-4 justify-center items-center m-4">
         <textarea
           bind:this={textareaEl}
           bind:value={$noteStore.content}

web/src/routes/+layout.ts

@@ -1,3 +1,3 @@
 import '../app.postcss';
 
-export const prerender = true;
+export const prerender = false;

web/src/routes/+page.ts

@@ -1 +1 @@
-export const prerender = true;
+export const prerender = false;

web/src/routes/about/+page.ts

@@ -2,4 +2,4 @@ import { dev } from '$app/environment';
 
 export const csr = dev;
 
-export const prerender = true;
+export const prerender = false;

web/src/routes/about/README.md

@@ -462,7 +462,7 @@ The [examples](#examples) use the macOS program `pbpaste` to paste content from
 
 On Windows, you can use the PowerShell command `Get-Clipboard` from a PowerShell command prompt. If you like, you can also alias it to `pbpaste`. If you are using classic PowerShell, edit the file `~\Documents\WindowsPowerShell\.profile.ps1`, or if you are using PowerShell Core, edit `~\Documents\PowerShell\.profile.ps1` and add the alias,
 
-```powershell
+```
 Set-Alias pbpaste Get-Clipboard
 ```
 
@@ -535,10 +535,10 @@ The Streamlit UI provides a user-friendly interface for:
 
 ### Primary contributors
 
-<a href="https://github.com/danielmiessler"><img src="https://avatars.githubusercontent.com/u/50654?v=4" title="Daniel Miessler" width="50" height="50"></a>
-<a href="https://github.com/xssdoctor"><img src="https://avatars.githubusercontent.com/u/9218431?v=4" title="Jonathan Dunn" width="50" height="50"></a>
-<a href="https://github.com/sbehrens"><img src="https://avatars.githubusercontent.com/u/688589?v=4" title="Scott Behrens" width="50" height="50"></a>
-<a href="https://github.com/agu3rra"><img src="https://avatars.githubusercontent.com/u/10410523?v=4" title="Andre Guerra" width="50" height="50"></a>
+<a href="https://github.com/danielmiessler"><img src="https://avatars.githubusercontent.com/u/50654?v=4" alt="Daniel Miessler" title="Daniel Miessler" width="50" height="50"></a>
+<a href="https://github.com/xssdoctor"><img src="https://avatars.githubusercontent.com/u/9218431?v=4" alt="Jonathan Dunn" title="Jonathan Dunn" width="50" height="50"></a>
+<a href="https://github.com/sbehrens"><img src="https://avatars.githubusercontent.com/u/688589?v=4" alt="Scott Behrens" title="Scott Behrens" width="50" height="50"></a>
+<a href="https://github.com/agu3rra"><img src="https://avatars.githubusercontent.com/u/10410523?v=4" alt="Andre Guerra" title="Andre Guerra" width="50" height="50"></a>
 
 `fabric` was created by <a href="https://danielmiessler.com/subscribe" target="_blank">Daniel Miessler</a> in January of 2024.
 <br /><br />

web/src/routes/chat/+page.ts

@@ -2,4 +2,4 @@ import { dev } from '$app/environment';
 
 export const csr = dev;
 
-export const prerender = true;
+export const prerender = false;

web/src/routes/chat/+server.ts

@@ -4,31 +4,31 @@ import type { RequestHandler } from './$types';
 import { getTranscript } from '$lib/services/transcriptService';
 
 export const POST: RequestHandler = async ({ request }) => {
-    try {
-        const body = await request.json();
-        console.log('Received request body:', body);
-        
-        const { url } = body;
-        if (!url) {
-            return json({ error: 'URL is required' }, { status: 400 });
-        }
+  try {
+    const body = await request.json();
+    console.log('Received request body:', body);
 
-        console.log('Fetching transcript for URL:', url);
-        const transcriptData = await getTranscript(url);
-        
-        console.log('Successfully fetched transcript, preparing response');
-        const response = json(transcriptData);
-        
-        // Log the actual response being sent
-        const responseText = JSON.stringify(transcriptData);
-        console.log('Sending response (first 200 chars):', responseText.slice(0, 200) + '...');
-        
-        return response;
-    } catch (error) {
-        console.error('Server error:', error);
-        return json(
-            { error: error instanceof Error ? error.message : 'Failed to fetch transcript' },
-            { status: 500 }
-        );
+    const { url } = body;
+    if (!url) {
+      return json({ error: 'URL is required' }, { status: 400 });
     }
-};
+
+    console.log('Fetching transcript for URL:', url);
+    const transcriptData = await getTranscript(url);
+
+    console.log('Successfully fetched transcript, preparing response');
+    const response = json(transcriptData);
+
+    // Log the actual response being sent
+    const responseText = JSON.stringify(transcriptData);
+    console.log('Sending response (first 200 chars):', responseText.slice(0, 200) + '...');
+
+    return response;
+  } catch (error) {
+    console.error('Server error:', error);
+    return json(
+      { error: error instanceof Error ? error.message : 'Failed to fetch transcript' },
+      { status: 500 }
+    );
+  }
+};

web/src/routes/contact/+page.ts

@@ -2,4 +2,4 @@ import { dev } from '$app/environment';
 
 export const csr = dev;
 
-export const prerender = true;
+export const prerender = false;

web/src/routes/posts/+page.svelte

@@ -149,7 +149,7 @@
   </div>
   <br>
   <div class="rounded-tl-container-token m-auto grid grid-cols-1 gap-4 mt-8">
-    <div class="mx-auto max-h-52 max-w-52"><img src="/fabric-logo.png"></div>
+    <div class="mx-auto max-h-52 max-w-52"><img src="/fabric-logo.png" alt="fabric-logo"></div>
   </div>
   <br>
   <div class="container mx-auto justify-center grid grid-cols-1 gap-4 mt-8">

web/svelte.config.js

@@ -73,6 +73,17 @@ const config = {
   extensions: ['.svelte', '.md', '.svx'],
   kit: {
     adapter: adapter(),
+    prerender: {
+      handleHttpError: ({ path, referrer, message }) => {
+        // ignore 404
+        if (path === '/not-found' && referrer === '/') {
+          return warn;
+        }
+
+        // otherwise fiail
+        throw new Error(message);
+      },
+    },
   },
   preprocess: [
     vitePreprocess({