Optimize funny

.claude/settings.json

@@ -0,0 +1,3 @@
+{
+  "enabledPlugins": {}
+}

frontend/src/lib/components/Home.svelte

@@ -2,11 +2,10 @@
   import Stories from "$lib/components/Stories.svelte";
   import FilterBar from "$lib/components/FilterBar.svelte";
   import { ChevronDown } from "@lucide/svelte";
-  import { getStories } from '$lib/story.remote';
 
   const initMax = 12;
 
-  const stories = $derived(await getStories());
+  let { stories } = $props();
 
   let maxStories = $state(initMax);
   let activeFilter = $state(undefined);

frontend/src/lib/components/Stories.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import Story from "$lib/components/Story.svelte";
-  import type { Story as StoryType } from '$lib/story.remote';
+  import type { Story as StoryType } from '$lib/data/stories';
 
   let { stories }: { stories: StoryType[] } = $props();
 </script>

frontend/src/lib/components/Story.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { base } from "$app/paths";
   import { ExternalLink } from "@lucide/svelte";
-  import type { Story } from '$lib/story.remote';
+  import type { Story } from '$lib/data/stories';
 
   let { story }: { story: Story } = $props();
 

frontend/src/lib/blog.remote.ts → frontend/src/lib/data/blogs.ts

@@ -1,7 +1,4 @@
-import * as v from 'valibot';
-import { query } from '$app/server';
 import blogsData from '$data/blog.csv';
-import { error } from '@sveltejs/kit';
 
 export interface Blog {
   id: number;
@@ -37,7 +34,7 @@ function parseTags(tags: string): string[] {
   return tags.split(',').map((t) => t.trim()).filter(Boolean);
 }
 
-const blogs: Blog[] = (blogsData as any[])
+export const blogs: Blog[] = (blogsData as any[])
   .filter((d) => !d.hide && d.slug)
   .map((d, i) => ({
     id: i + 1,
@@ -52,27 +49,6 @@ const blogs: Blog[] = (blogsData as any[])
     hasMarkdown: d.content_type === 'markdown'
   }));
 
-export const getBlogs = query(async () => {
-  return blogs.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-});
-
-export const getBlog = query(v.string(), async (slug) => {
-  const blog = blogs.find((d) => d.slug === slug);
-
-  if (!blog) {
-    error(404, 'Blog post not found');
-  }
-
-  let content = '';
-
-  if (blog.hasMarkdown) {
-    try {
-      const markdownModule = await import(`$lib/blog/${slug}.md?raw`);
-      content = markdownModule.default;
-    } catch (e) {
-      console.warn(`No markdown file found for ${slug}`);
-    }
-  }
-
-  return { blog, content };
-});
+export function getSortedBlogs(): Blog[] {
+  return [...blogs].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}

frontend/src/lib/research.remote.ts → frontend/src/lib/data/research.ts

@@ -1,4 +1,3 @@
-import { query } from '$app/server';
 import researchData from '$data/research-group.csv';
 
 export interface ResearchGroup {
@@ -38,7 +37,7 @@ function parseTags(college: string): string[] {
   return college.split(',').map((t) => t.trim()).filter(Boolean);
 }
 
-const researchGroups: ResearchGroup[] = (researchData as any[])
+export const researchGroups: ResearchGroup[] = (researchData as any[])
   .filter((d) => !d.hide && d.slug && +d.has_research_group === 1)
   .map((d, i) => ({
     id: i + 1,
@@ -56,6 +55,6 @@ const researchGroups: ResearchGroup[] = (researchData as any[])
     hasMarkdown: d.content_type === 'markdown'
   }));
 
-export const getResearchGroups = query(async () => {
-  return researchGroups.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-});
+export function getSortedResearchGroups(): ResearchGroup[] {
+  return [...researchGroups].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}

frontend/src/lib/data/stories.ts

@@ -0,0 +1,39 @@
+import storiesData from '$data/stories.csv';
+
+export interface Story {
+  slug: string;
+  title: string;
+  description: string;
+  author: string;
+  date: string;
+  month: string;
+  externalUrl: string;
+  tags: string[];
+}
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function formatMonth(dateStr: string): string {
+  const [month, , year] = dateStr.split('/').map(Number);
+  return `${MONTHS[month - 1]} ${year}`;
+}
+
+function parseTags(tags: string): string[] {
+  if (!tags) return [];
+  return tags.split(',').map((t) => t.trim()).filter(Boolean);
+}
+
+export const stories: Story[] = (storiesData as any[]).map((d) => ({
+  ...d,
+  month: formatMonth(d.date),
+  tags: parseTags(d.tags)
+}));
+
+// Stories not yet ready for the homepage listing
+export const HIDDEN_STORIES = ['dark-data-survey'];
+
+export function getVisibleStories(): Story[] {
+  return stories
+    .filter((d) => !HIDDEN_STORIES.includes(d.slug))
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+}

frontend/src/lib/stories/friends-funnier-than-you-are/components/BranchingNetwork.svelte

@@ -280,30 +280,28 @@
 
   // Set up intersection observer
   onMount(() => {
+    generateForest();
+
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(entry => {
         if (entry.isIntersecting && !isVisible) {
-          console.log('BranchingNetwork is now visible! Starting animation...');
           isVisible = true;
           animateTreesIn();
         }
       });
-    }, { 
+    }, {
       threshold: 0.3,
       rootMargin: '50px'
     });
-    
+
     if (container) {
       observer.observe(container);
     }
-    
+
     return () => {
       if (container) observer.unobserve(container);
     };
   });
-
-  // Generate forest data once on component initialization
-  generateForest();
 </script>
 
 <div

frontend/src/lib/stories/friends-funnier-than-you-are/components/Index.svelte

@@ -14,10 +14,17 @@ let { story, data } = $props();
 </script>
 
 
+<svelte:head>
+    <style>
+        body { background-color: #f8f5e6; overflow-x: hidden; }
+        .dark body { background-color: var(--color-bg); color: var(--color-fg); }
+    </style>
+</svelte:head>
+
 <article id="cascade-story">
 
     <div class="logo-container">
-        <a href="{base}/" class="logo-link">
+        <a href="{base}/" class="logo-link" data-sveltekit-reload>
             <img src="{base}/octopus-swim-right.png" alt="Home" class="logo" width="200" />
         </a>
     </div>
@@ -60,7 +67,7 @@ let { story, data } = $props();
                     </div>
                 {/if}
             {:else}
-                <p>{@render renderTextContent(item)}</p>
+                {@render renderTextContent(item)}
             {/if}
         {/each}
     {/snippet}

frontend/src/lib/stories/friends-funnier-than-you-are/components/LogLogPlot.svelte

@@ -1,6 +1,6 @@
 <script>
     import { Plot, Dot, Line, RuleY, RuleX, Text } from 'svelteplot';
-    import cascadeData from '../data/cascades.json';
+    import cascadeData from '../data/cascades.trimmed.json';
     import InsetPlot from './LogLogPlot.Inset.svelte'
 
     // Group datasets by their pc (critical point) and model
@@ -83,26 +83,11 @@
     let tau1 = $derived(getTauFromP(p1));
     let tau2 = $derived(getTauFromP(p2));
 
-    // Data processing with subsampling
+    // Data arrives pre-filtered and pre-subsampled from the precompute step.
+    // We just zip the parallel i/v arrays back into {value, index} objects.
     function getData(dataset) {
         if (!dataset) return [];
-        const fullData = dataset.data
-            .slice(0, 10000)
-            .map((value, index) => ({ value, index }))
-            .filter(d => d.value > 1e-10 && d.value < 1e5);
-
-        const sampledData = [];
-        for (let i = 0; i < fullData.length; i++) {
-            const s = i + 1;
-            if (s < 50) {
-                sampledData.push(fullData[i]);
-            } else if (s < 500) {
-                if (i % 3 === 0) sampledData.push(fullData[i]);
-            } else {
-                if (i % 5 === 0) sampledData.push(fullData[i]);
-            }
-        }
-        return sampledData;
+        return dataset.i.map((index, k) => ({ value: dataset.v[k], index }));
     }
 
     let data1 = $derived(getData(dataset1));

frontend/src/lib/stories/friends-funnier-than-you-are/components/SelfReinforcingNetwork.svelte

@@ -1,6 +1,7 @@
 <script>
   import * as d3 from 'd3';
   import { Plot, Dot, Line } from 'svelteplot';
+  import { onMount } from 'svelte';
 
   let width = $state(400);
   const height = 350;
@@ -190,8 +191,7 @@
     cascadeSizes = [];
   });
 
-  // Generate initial tree
-  generateTree();
+  onMount(() => generateTree());
 </script>
 
 <div class="container">