Add some shitt

README.md

@@ -99,6 +99,8 @@ AUTH_SECRET=
 SENDGRID_KEY=
 LANGFUSE_SECRET_KEY=
 LANGFUSE_PUBLIC_KEY=
+# required for builder.io for some reason
+NODE_OPTIONS=--no-node-snapshot
 ```
 
 ## Generate a random secret key with the following command:

eslint.config.js

@@ -25,7 +25,7 @@ export default [
         }
     },
     {
-        ignores: ["build/", ".svelte-kit/", "dist/", "src/lib/queries/surreal_queries.ts"]
+        ignores: ["build/", ".svelte-kit/", "dist/", "src/lib/queries/surreal_queries.ts", "css/"]
     },
     {
         rules: {

package.json

@@ -20,7 +20,7 @@
     "eslint": "^9.0.0",
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",
-    "svelte": "5.0.0-next.178",
+    "svelte": "5.0.0-next.199",
     "svelte-check": "^3.6.0",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
@@ -35,11 +35,21 @@
     "@resvg/resvg-js": "^2.6.2",
     "@sendgrid/mail": "^8.1.3",
     "@sveltejs/adapter-vercel": "^5.4.1",
+    "@types/mdast": "^4.0.4",
     "@types/mixpanel-browser": "^2.49.1",
     "@types/node": "^20.14.10",
     "@types/three": "^0.166.0",
     "dedent": "^1.5.3",
+    "highlight.js": "^11.10.0",
     "jose": "^5.6.3",
+    "mdast": "^3.0.0",
+    "mdast-util-directive": "^3.0.0",
+    "mdast-util-from-markdown": "^2.0.1",
+    "mdast-util-gfm-strikethrough": "^2.0.0",
+    "mdast-util-gfm-table": "^2.0.0",
+    "micromark-extension-directive": "^3.0.1",
+    "micromark-extension-gfm-strikethrough": "^2.1.0",
+    "micromark-extension-gfm-table": "^2.1.0",
     "mixpanel-browser": "^2.53.0",
     "runed": "^0.15.0",
     "satori": "^0.10.14",

src/lib/blocks/Icon/IconComponent.ts

@@ -12,4 +12,7 @@ export default {
             defaultValue: "Shape",
         },
     ],
+    defaultStyles: {
+        display: "inline-flex",
+    }
 } satisfies RegisteredComponent

src/lib/blocks/Markdown/MarkdownComponent.ts

@@ -0,0 +1,13 @@
+import MarkdownRenderer from "$lib/display/MarkdownRenderer.svelte"
+
+export default {
+    component: MarkdownRenderer,
+    name: "Markdown",
+    inputs: [
+        {
+            name: "markdown",
+            type: "longText",
+            defaultValue: "This is a **markdown** block",
+        },
+    ],
+}

src/lib/controls/RatingBar.svelte

@@ -14,7 +14,7 @@ let {
     show_rating_ui: boolean
 } = $props()
 
-let show_rating = $derived(vote_data && vote_data.total_votes > 5)
+let show_rating = $derived(vote_data && vote_data.total_votes > 1)
 // let show_rating = $derived(true)
 let width = $derived(((vote_data?.rating_avg || 0) / 4) * 100)
 

src/lib/display/Author.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+
+let {
+    src,
+    name,
+}: {
+    src?: string,
+    name: string,
+} = $props()
+
+</script>
+<div class="author">
+    {#if src}
+        <img
+            class="author_img"
+            alt="{name} profile picture"
+            src={src}>
+    {/if}
+    <div class="author_name">
+        { name }
+    </div>
+</div>
+<style>
+.author {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    font-size: 14px;
+    color: var(--foreground);
+}
+
+.author_img {
+    width: 24px;
+    height: 24px;
+    border-radius: 100px;
+}
+
+.author_name {
+    font-weight: 600;
+}
+</style>

src/lib/display/Date.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+import Calendar from "svelte-material-icons/Calendar.svelte"
+import { onMount, onDestroy } from "svelte"
+
+// if the date difference is less than 3 days, we want to show something like:
+// "3 hours ago", "2 days ago", "10 minutes ago", etc.
+
+export let date: Date
+
+function get_day_suffix(day: number) {
+    switch (day % 10) {
+        case 1: return "st"
+        case 2: return "nd"
+        case 3: return "rd"
+        default: return "th"
+    }
+}
+
+let now = new Date()
+
+let interval: ReturnType<typeof setInterval> | null = null
+onMount(() => {
+    interval = setInterval(() => {
+        now = new Date()
+    }, 5000)
+})
+
+onDestroy(() => {
+    if (interval) clearInterval(interval)
+})
+
+$: diff = now.getTime() - date.getTime()
+$: diff_in_seconds = diff / 1000
+$: diff_in_minutes = diff_in_seconds / 60
+$: diff_in_hours = diff_in_minutes / 60
+$: diff_in_days = diff_in_hours / 24
+$: diff_in_months = diff_in_days / 30
+
+$: use_ago = diff_in_months <= 2
+$: units_ago = diff_in_hours <= 1 ? "minute" : diff_in_days <= 1 ? "hour" : diff_in_months <= 1 ? "day" : "month"
+$: units = diff_in_hours <= 1 ? diff_in_minutes : diff_in_days <= 1 ? diff_in_hours : diff_in_months <= 1 ? diff_in_days : diff_in_months
+$: ago = `${Math.ceil(units)} ${units_ago}${units > 1 ? "s" : ""} ago`
+
+$: day_with_suffix = date.getDate() + get_day_suffix(date.getDate())
+$: month = date.toLocaleString("en-us", { month: "short" })
+$: year = date.getFullYear()
+
+</script>
+<div class="date">
+    <Calendar size={18}/>
+    <span>
+        {#if use_ago}
+            <span>{ ago } - </span>
+            <!-- {:else} -->
+        {/if}
+        <span>{ day_with_suffix } { month } { year }</span>
+    </span>
+</div>
+<style>
+
+.date {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-size: 14px;
+    opacity: 0.5;
+    font-weight: 600;
+}
+
+</style>

src/lib/display/MarkdownRenderer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+import BlocksArray from "$lib/display/markdown-blocks/BlocksArray.svelte"
+import { generate_ast } from "$lib/utils/ast"
+
+export let markdown: string = ""
+
+$: ast = generate_ast(markdown)
+</script>
+
+<BlocksArray blocks={ast.children}/>

src/lib/display/markdown-blocks/BlockQuoteBlock.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { Blockquote } from "mdast"
+import BlocksArray from "./BlocksArray.svelte"
+
+export let block: Blockquote
+
+</script>
+<blockquote>
+    <BlocksArray blocks={block.children}/>
+</blockquote>
+<style>
+blockquote {
+    margin: 0;
+    border-left: 4px solid rgba(var(--foreground-rgb), 0.15);
+    background: rgba(var(--foreground-rgb), 0.05);
+    padding: 12px;
+}
+</style>

src/lib/display/markdown-blocks/BlocksArray.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import GenericBlock from "./GenericBlock.svelte"
+import type { RootContent } from "mdast"
+
+export let blocks: RootContent[]
+</script>
+
+<div class="blocks-array">
+    {#each blocks as block}
+        <GenericBlock {block}/>
+    {/each}
+</div>
+
+<style>
+.blocks-array {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    line-height: 1.25;
+    width: 100%;
+    align-items: flex-start;
+    text-align: inherit;
+}
+</style>