[ { "path": ".cursor/mcp.json", "content": "{\n \"mcpServers\": {\n \"Astro docs\": {\n \"type\": \"http\",\n \"url\": \"https://mcp.docs.astro.build/mcp\"\n }\n }\n}\n" }, { "path": ".gitignore", "content": "# build output\ndist/\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\n\n\n# environment variables\n.env\n.env.production\n.dev.vars\n\n# macOS-specific files\n.DS_Store\n\n# jetbrains setting folder\n.idea/\n\n.mastra\n.vercel\n\n# temporary exclude for wrangler \nworker/\n.wrangler/" }, { "path": ".gitmodules", "content": "[submodule \"worker-og\"]\n\tpath = worker-og\n\turl = https://github.com/iammatthias/og.git\n" }, { "path": ".vscode/extensions.json", "content": "{\n \"recommendations\": [\"astro-build.astro-vscode\"],\n \"unwantedRecommendations\": []\n}\n" }, { "path": ".vscode/launch.json", "content": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"command\": \"./node_modules/.bin/astro dev\",\n \"name\": \"Development server\",\n \"request\": \"launch\",\n \"type\": \"node-terminal\"\n }\n ]\n}\n" }, { "path": "README.md", "content": "```\n\n`7MMF'\n MM\n MM ,6\"Yb. `7MMpMMMb.pMMMb.\n MM 8) MM MM MM MM\n MM ,pm9MM MM MM MM\n MM 8M MM MM MM MM\n.JMML. `Moo9^Yo..JMML JMML JMML.\n\n\n\n ,, ,,\n`7MMM. ,MMF' mm mm `7MM db\n MMMb dPMM MM MM MM\n M YM ,M MM ,6\"Yb.mmMMmm mmMMmm MMpMMMb. `7MM ,6\"Yb. ,pP\"Ybd\n M Mb M' MM 8) MM MM MM MM MM MM 8) MM 8I `\"\n M YM.P' MM ,pm9MM MM MM MM MM MM ,pm9MM `YMMMa.\n M `YM' MM 8M MM MM MM MM MM MM 8M MM L. I8\n.JML. `' .JMML.`Moo9^Yo.`Mbmo `Mbmo.JMML JMML..JMML.`Moo9^Yo.M9mmmP'\n\n```\n\n### hi\n\nThis is the latest version of my site. It is built with [Astro](https://astro.build/), and the content is authored in [Obsidian](https://obsidian.md/) and stored in a private repo.\n\nImages hosted on Pinata IPFS.\n\nThe site is hosted on [Vercel](https://vercel.com/), and I'm using [PostHog](https://posthog.com/) for some basic analytics.\n\n> The code is provided as-is, and I'm not planning to provide support for this setup. Feel free to use it as inspiration for your own projects.\n\n### built with\n\n- [Astro](https://astro.build/)\n- [Obsidian](https://obsidian.md/)\n- [Pinata](https://www.pinata.cloud/)\n- [Cloudflare](https://www.cloudflare.com/)\n" }, { "path": "astro.config.mjs", "content": "// @ts-check\nimport { defineConfig } from \"astro/config\";\nimport fs from 'node:fs';\nimport path from 'node:path';\n\nimport react from \"@astrojs/react\";\nimport rehypeUnwrapImages from \"rehype-unwrap-images\";\n\nimport sitemap from \"@astrojs/sitemap\";\n\nimport cloudflare from \"@astrojs/cloudflare\";\n\n/**\n * @param {string[]} extensions\n * @returns {import('vite').Plugin}\n */\nfunction rawFonts(extensions) {\n return {\n name: 'vite-plugin-raw-fonts',\n enforce: /** @type {const} */ ('pre'),\n resolveId(id, importer) {\n if (extensions.some(ext => id.includes(ext))) {\n if (id.startsWith('.')) {\n const resolvedPath = path.resolve(path.dirname(importer || ''), id);\n return resolvedPath;\n }\n return id;\n }\n },\n load(id) {\n if (extensions.some(ext => id.includes(ext))) {\n try {\n const buffer = fs.readFileSync(id);\n return `export default new Uint8Array([${Array.from(buffer).join(',')}]);`;\n } catch (error) {\n const err = /** @type {Error} */ (error);\n console.error('Error loading font:', err.message);\n throw error;\n }\n }\n }\n };\n}\n\n// https://astro.build/config\nexport default defineConfig({\n site: \"https://iammatthias.com\",\n integrations: [react(), sitemap()],\n\n markdown: {\n rehypePlugins: [rehypeUnwrapImages],\n },\n\n redirects: {\n \"/art\": {\n status: 302,\n destination: \"/content/art\",\n },\n \"/open-source\": {\n status: 302,\n destination: \"/content/open-source\",\n },\n \"/posts\": {\n status: 302,\n destination: \"/content/posts\",\n },\n \"/recipes\": {\n status: 302,\n destination: \"/content/recipes\",\n },\n \"/post/1563778800000\": {\n status: 302,\n destination: \"/content/notes/1563778800000-flatframe\",\n },\n \"/post/1587970800000\": {\n status: 302,\n destination: \"/content/notes/1587970800000-sourdough\",\n },\n \"/post/1687071600000\": {\n status: 302,\n destination: \"/content/notes/1687071600000-feels-like-summer\",\n },\n \"/post/1681369200000\": {\n status: 302,\n destination: \"/content/posts/1681369200000-ai-legion-on-bluesky\",\n },\n \"/post/1670659200001\": {\n status: 302,\n destination: \"/content/posts/1670659200001-obsidian-as-a-cms\",\n },\n \"/post/1691436904927\": {\n status: 302,\n destination: \"/content/posts/1691436904927-deploy-html-on-replit\",\n },\n \"/post/1699332127006\": {\n status: 302,\n destination: \"/content/posts/1699332127006-revisiting-obsidian-as-a-cms\",\n },\n },\n\n adapter: cloudflare({\n prerenderEnvironment: 'node',\n }),\n\n vite: {\n plugins: [rawFonts(['.ttf'])],\n assetsInclude: ['**/*.wasm'],\n resolve: {\n alias: {\n '@src': path.resolve('./src'),\n '@styles': path.resolve('./src/styles'),\n '@components': path.resolve('./src/components'),\n '@layouts': path.resolve('./src/layouts'),\n '@pages': path.resolve('./src/pages'),\n '@mastra': path.resolve('./src/mastra'),\n '@actions': path.resolve('./src/actions'),\n '@lib': path.resolve('./src/lib'),\n },\n },\n ssr: {\n external: [\"buffer\", \"path\", \"fs\"].map((i) => `node:${i}`),\n noExternal: ['@cf-wasm/resvg'],\n },\n },\n});" }, { "path": "package.json", "content": "{\n \"name\": \"com\",\n \"type\": \"module\",\n \"version\": \"0.0.1\",\n \"scripts\": {\n \"dev\": \"astro dev\",\n \"build\": \"astro build\",\n \"preview\": \"astro preview\",\n \"astro\": \"astro\"\n },\n \"dependencies\": {\n \"@astrojs/cloudflare\": \"^13.1.10\",\n \"@astrojs/react\": \"^5.0.3\",\n \"@astrojs/rss\": \"^4.0.18\",\n \"@astrojs/sitemap\": \"^3.7.2\",\n \"@cf-wasm/resvg\": \"^0.3.3\",\n \"@cloudflare/agents\": \"^0.0.16\",\n \"@modelcontextprotocol/sdk\": \"^1.29.0\",\n \"@noble/hashes\": \"^2.2.0\",\n \"@react-three/drei\": \"^10.7.7\",\n \"@react-three/fiber\": \"^9.6.0\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"astro\": \"^6.1.8\",\n \"pinata\": \"^2.5.5\",\n \"react\": \"^19.2.5\",\n \"react-dom\": \"^19.2.5\",\n \"react-plock\": \"^3.6.1\",\n \"rehype-unwrap-images\": \"^1.0.0\",\n \"satori\": \"^0.26.0\",\n \"satori-html\": \"^0.3.2\",\n \"three\": \"^0.184.0\",\n \"viem\": \"^2.48.1\",\n \"zod\": \"^4\"\n },\n \"devDependencies\": {\n \"wrangler\": \"^4.84.0\"\n }\n}\n" }, { "path": "public/.well-known/atproto-did", "content": "did:plc:p5xem22ammiafn5kxonaksfa\n" }, { "path": "public/rss.xml.xsl", "content": "\n\n \n \n \n \n \n <xsl:value-of select=\"title\"/> - RSS Feed\n \n\n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n
\n
\n

\n
\n

\n View Site →\n
\n
\n\n
\n \n
\n\n
\n

Last Updated:

\n

Subscribe by copying the URL into your RSS reader

\n
\n
\n \n \n \n \n \n
\n

\n \n \n \n

\n
\n \n
\n
\n \n
\n
\n \n \n" }, { "path": "src/components/BlackHole/index.tsx", "content": "import { useRef, useMemo, useEffect } from \"react\";\nimport { Canvas, useFrame, useThree } from \"@react-three/fiber\";\nimport * as THREE from \"three\";\nimport { vertexShader, fragmentShader } from \"./shaders\";\n\n// Seeded random number generator\nclass SeededRNG {\n seed: number;\n\n constructor(seed: number) {\n this.seed = seed % 2147483647;\n if (this.seed <= 0) this.seed += 2147483646;\n }\n\n next() {\n this.seed = (this.seed * 16807) % 2147483647;\n return (this.seed - 1) / 2147483646;\n }\n}\n\n// Generate procedural starfield texture\nfunction generateStarTexture(seed: number, size: number = 1024): THREE.DataTexture {\n const data = new Uint8Array(size * size * 4);\n const rng = new SeededRNG(seed);\n\n // Fill with dark background\n for (let i = 0; i < size * size * 4; i += 4) {\n data[i] = 2;\n data[i + 1] = 2;\n data[i + 2] = 5;\n data[i + 3] = 255;\n }\n\n // Add stars - scale count based on texture size\n const starCount = Math.floor((size / 1024) * (size / 1024) * 4000);\n for (let i = 0; i < starCount; i++) {\n const x = Math.floor(rng.next() * size);\n const y = Math.floor(rng.next() * size);\n const idx = (y * size + x) * 4;\n\n const bright = 200 + Math.floor(rng.next() * 55);\n const tint = rng.next();\n\n if (tint > 0.95) {\n // Blue stars\n data[idx] = bright * 0.8;\n data[idx + 1] = bright * 0.9;\n data[idx + 2] = bright;\n } else if (tint > 0.9) {\n // Orange stars\n data[idx] = bright;\n data[idx + 1] = bright * 0.8;\n data[idx + 2] = bright * 0.6;\n } else {\n // White stars\n data[idx] = bright;\n data[idx + 1] = bright;\n data[idx + 2] = bright;\n }\n data[idx + 3] = 255;\n }\n\n const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat);\n texture.needsUpdate = true;\n texture.wrapS = THREE.RepeatWrapping;\n texture.wrapT = THREE.RepeatWrapping;\n\n return texture;\n}\n\nfunction BlackHoleShader({ seed, iterations }: { seed: number; iterations: number }) {\n const meshRef = useRef(null);\n const { viewport, size } = useThree();\n\n // Reuse geometry across renders\n const geometry = useMemo(() => {\n return new THREE.PlaneGeometry(1, 1);\n }, []);\n\n const material = useMemo(() => {\n // Scale texture size based on iterations for memory optimization\n const textureSize = Math.min(1024, Math.max(256, Math.floor(iterations * 4)));\n const texture = generateStarTexture(seed, textureSize);\n\n // Enable mipmaps for better memory usage\n texture.generateMipmaps = true;\n texture.minFilter = THREE.LinearMipmapLinearFilter;\n\n return new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n uniforms: {\n uSpaceTexture: { value: texture },\n uResolution: { value: new THREE.Vector2(size.width, size.height) },\n uTime: { value: 0 },\n uMaxIterations: { value: iterations },\n },\n });\n }, [seed, iterations]);\n\n useEffect(() => {\n const handleResize = () => {\n if (material.uniforms.uResolution) {\n material.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, [material]);\n\n useEffect(() => {\n return () => {\n material.uniforms.uSpaceTexture.value?.dispose();\n material.dispose();\n geometry.dispose();\n };\n }, [material, geometry]);\n\n useFrame((state) => {\n if (material.uniforms.uTime) {\n material.uniforms.uTime.value = state.clock.elapsedTime;\n }\n });\n\n return (\n \n \n \n \n );\n}\n\nexport default function BlackHole({ seed = 404 }: { seed?: number }) {\n // Derive iterations from seed (50-250 range)\n const iterations = useMemo(() => {\n const normalized = (seed % 200) + 50; // Maps to 50-250 range\n return normalized;\n }, [seed]);\n\n // Scale down DPR for high iteration counts to save memory/performance\n const dpr = useMemo((): [number, number] => {\n if (iterations > 200) return [0.5, 0.75];\n if (iterations > 150) return [0.75, 1];\n return [1, 1.25];\n }, [iterations]);\n\n return (\n \n \n \n \n \n );\n}\n" }, { "path": "src/components/BlackHole/shaders.ts", "content": "export const vertexShader = `\n varying vec2 vUv;\n\n void main() {\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n vUv = uv;\n }\n`;\n\nexport const fragmentShader = `\n varying vec2 vUv;\n uniform sampler2D uSpaceTexture;\n uniform vec2 uResolution;\n uniform float uTime;\n uniform int uMaxIterations;\n\n #define STEP_SIZE 0.1\n #define PI 3.1415926535897932384626433832795\n #define TAU 6.283185307179586476925286766559\n\n vec3 camPos = vec3(0, 1, -7);\n vec3 blackholePos = vec3(0, 0, 0);\n float innerDiskRadius = 2.0;\n float outerDiskRadius = 5.0;\n float diskTwist = 10.0;\n float flowRate = 0.6;\n\n // Noise functions for disk texture\n float hash(float n) {\n return fract(sin(n) * 753.5453123);\n }\n\n float noise(vec3 x) {\n vec3 p = floor(x);\n vec3 f = fract(x);\n f = f * f * (3.0 - 2.0 * f);\n float n = p.x + p.y * 157.0 + 113.0 * p.z;\n\n return mix(mix(mix(hash(n + 0.0), hash(n + 1.0), f.x),\n mix(hash(n + 157.0), hash(n + 158.0), f.x), f.y),\n mix(mix(hash(n + 113.0), hash(n + 114.0), f.x),\n mix(hash(n + 270.0), hash(n + 271.0), f.x), f.y), f.z);\n }\n\n float fbm(vec3 pos, const int numOctaves, const float iterScale, const float detail, const float weight) {\n float mul = weight;\n float add = 1.0 - 0.5 * mul;\n float t = noise(pos) * mul + add;\n\n for (int i = 1; i < numOctaves; ++i) {\n pos *= iterScale;\n mul = exp2(log2(weight) - float(i) / detail);\n add = 1.0 - 0.5 * mul;\n t *= noise(pos) * mul + add;\n }\n\n return t;\n }\n\n vec4 raytrace(vec3 rayDir, vec3 rayPos) {\n vec4 color = vec4(0, 0, 0, 1);\n float h2 = pow(length(cross(rayPos, rayDir)), 2.0);\n\n for (int i = 0; i < uMaxIterations; i++) {\n float dist = length(rayPos - blackholePos);\n\n // Event horizon check\n if (dist < 1.0) {\n return vec4(0, 0, 0, 1);\n }\n\n // Schwarzschild metric\n rayDir += -1.5 * h2 * rayPos / pow(pow(dist, 2.0), 2.5) * STEP_SIZE;\n\n vec3 steppedRayPos = rayPos + rayDir * STEP_SIZE;\n\n // Varying depth for accretion disk\n float depth = pow(STEP_SIZE, 3.0) + fbm(rayPos, 5, 10.0, 1.8, 10.5) * 0.05;\n\n // Accretion disk check\n if (dist > innerDiskRadius && dist < outerDiskRadius && rayPos.y * steppedRayPos.y < depth) {\n // Disk UV calculation\n float deltaDiskRadius = outerDiskRadius - innerDiskRadius;\n float diskDist = dist - innerDiskRadius;\n\n vec3 uvw = vec3(\n (atan(steppedRayPos.z, abs(steppedRayPos.x)) / TAU) - (diskTwist / sqrt(dist)),\n pow(diskDist / deltaDiskRadius, 2.0) + ((flowRate / TAU) / deltaDiskRadius),\n steppedRayPos.y * 0.5 + 0.5\n ) / 2.0;\n\n // Disk density with texture\n float diskDensity = 1.0 - length(steppedRayPos / vec3(outerDiskRadius, 1.0, outerDiskRadius));\n diskDensity *= smoothstep(innerDiskRadius, innerDiskRadius + 1.0, dist);\n\n float densityVariation = fbm(2.0 * uvw, 5, 2.0, 1.0, 1.0);\n diskDensity *= inversesqrt(dist) * densityVariation;\n\n float opticalDepth = STEP_SIZE * 50.0 * diskDensity;\n\n // Doppler shift\n vec3 shiftVector = 0.6 * cross(normalize(steppedRayPos), vec3(0.0, 1.0, 0.0));\n float velocity = dot(rayDir, shiftVector);\n float dopplerShift = sqrt((1.0 - velocity) / (1.0 + velocity));\n\n // Gravitational shift\n float gravitationalShift = sqrt((1.0 - 2.0 / dist) / (1.0 - 2.0 / length(camPos)));\n\n return vec4(vec3(1) * dopplerShift * gravitationalShift * opticalDepth, 1.0);\n }\n\n rayPos = steppedRayPos;\n }\n\n // Sample background texture\n // Convert ray direction to spherical coordinates for texture sampling\n float theta = atan(rayDir.z, rayDir.x);\n float phi = asin(rayDir.y);\n vec2 texCoord = vec2(\n theta / TAU + 0.5,\n phi / PI + 0.5\n );\n\n color = texture2D(uSpaceTexture, texCoord);\n\n return color;\n }\n\n void main() {\n vec2 uv = (vUv - 0.5) * 2.0 * vec2(uResolution.x / uResolution.y, 1);\n\n vec3 rayDir = normalize(vec3(uv, 1));\n vec3 rayPos = camPos;\n\n gl_FragColor = raytrace(rayDir, rayPos);\n }\n`;\n" }, { "path": "src/components/Bluesky/Bluesky.css", "content": ".bsky-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.bsky-feed {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.bsky-post {\n border: 1px solid var(--color-border);\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.bsky-post-link {\n text-decoration: none;\n color: inherit;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.bsky-post-header {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.bsky-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.bsky-author {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n.bsky-display-name {\n font-weight: 600;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.bsky-handle {\n color: var(--color-muted);\n font-size: 0.875rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.bsky-time {\n color: var(--color-muted);\n font-size: 0.875rem;\n white-space: nowrap;\n}\n\n.bsky-text {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n line-height: 1.5;\n}\n\n/* Image grid layouts */\n.bsky-images {\n display: grid;\n gap: 0.25rem;\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n.bsky-images-1 {\n grid-template-columns: 1fr;\n}\n\n.bsky-images-2 {\n grid-template-columns: 1fr 1fr;\n}\n\n.bsky-images-3 {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n}\n\n.bsky-images-3 .bsky-image:first-child {\n grid-row: span 2;\n}\n\n.bsky-images-4 {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n}\n\n.bsky-image {\n display: block;\n overflow: hidden;\n}\n\n.bsky-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity 0.2s ease;\n}\n\n.bsky-image:hover img {\n opacity: 0.9;\n}\n\n/* Video embed */\n.bsky-video {\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n.bsky-video video {\n width: 100%;\n display: block;\n}\n\n.bsky-video-alt {\n display: block;\n padding: 0.5rem;\n font-size: 0.875rem;\n color: var(--color-muted);\n background: var(--color-background);\n}\n\n/* External link embed */\n.bsky-external {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--color-border);\n border-radius: 0.5rem;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n transition: border-color 0.2s ease;\n}\n\n.bsky-external:hover {\n border-color: var(--color-muted);\n}\n\n.bsky-external-thumb {\n width: 100%;\n height: auto;\n max-height: 200px;\n object-fit: cover;\n}\n\n.bsky-external-content {\n padding: 0.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.bsky-external-title {\n font-weight: 600;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.bsky-external-description {\n font-size: 0.875rem;\n color: var(--color-muted);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.bsky-external-uri {\n font-size: 0.75rem;\n color: var(--color-muted);\n}\n\n/* Quote embed */\n.bsky-quote {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.75rem;\n border: 1px solid var(--color-border);\n border-radius: 0.5rem;\n text-decoration: none;\n color: inherit;\n transition: border-color 0.2s ease;\n}\n\n.bsky-quote:hover {\n border-color: var(--color-muted);\n}\n\n.bsky-quote-header {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.bsky-quote-avatar {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.bsky-quote-author {\n display: flex;\n gap: 0.25rem;\n font-size: 0.875rem;\n overflow: hidden;\n}\n\n.bsky-quote-handle {\n color: var(--color-muted);\n}\n\n.bsky-quote-text {\n margin: 0;\n font-size: 0.875rem;\n color: var(--color-muted);\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Quote label */\n.bsky-quote-label {\n font-size: 0.875rem;\n color: var(--color-muted);\n}\n\n/* Loading/error/empty states */\n.bsky-loading,\n.bsky-error,\n.bsky-empty {\n text-align: center;\n padding: 2rem;\n color: var(--color-muted);\n}\n\n.bsky-error {\n color: var(--color-error, #e74c3c);\n}\n\n/* View all link */\n.bsky-view-all {\n text-align: center;\n margin-top: 0.5rem;\n}\n\n.bsky-view-all a {\n text-decoration: none;\n color: inherit;\n font-weight: 500;\n}\n\n.bsky-view-all a:hover {\n text-decoration: underline;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .bsky-post {\n padding: 0.75rem;\n }\n\n .bsky-avatar {\n width: 32px;\n height: 32px;\n }\n\n .bsky-images-3 .bsky-image:first-child {\n grid-row: span 1;\n }\n\n .bsky-images-3 {\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n}\n" }, { "path": "src/components/Bluesky/index.tsx", "content": "import { useEffect, useState } from \"react\";\nimport \"./Bluesky.css\";\n\n// Types matching the API response\ninterface NormalizedImage {\n type: \"image\";\n thumb: string;\n fullsize: string;\n alt: string;\n aspectRatio?: { width: number; height: number };\n mimeType: string;\n}\n\ninterface NormalizedVideo {\n type: \"video\";\n url: string;\n alt?: string;\n aspectRatio?: { width: number; height: number };\n mimeType: string;\n}\n\ninterface NormalizedExternal {\n type: \"external\";\n uri: string;\n title: string;\n description: string;\n thumb?: string;\n}\n\ninterface NormalizedQuote {\n type: \"quote\";\n uri: string;\n cid: string;\n}\n\ntype NormalizedEmbed =\n | NormalizedImage\n | NormalizedVideo\n | NormalizedExternal\n | NormalizedQuote;\n\ninterface BlueskyPost {\n uri: string;\n cid: string;\n text: string;\n createdAt: string;\n embeds: NormalizedEmbed[];\n postUrl: string;\n}\n\nfunction formatDate(dateString: string): string {\n const date = new Date(dateString);\n const now = new Date();\n const diffMs = now.getTime() - date.getTime();\n const diffMins = Math.floor(diffMs / 60000);\n const diffHours = Math.floor(diffMs / 3600000);\n const diffDays = Math.floor(diffMs / 86400000);\n\n if (diffMins < 1) return \"just now\";\n if (diffMins < 60) return `${diffMins}m`;\n if (diffHours < 24) return `${diffHours}h`;\n if (diffDays < 7) return `${diffDays}d`;\n\n return date.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: date.getFullYear() !== now.getFullYear() ? \"numeric\" : undefined,\n });\n}\n\nfunction ImageEmbed({ embed }: { embed: NormalizedImage }) {\n return (\n \n {embed.alt}\n \n );\n}\n\nfunction VideoEmbed({ embed }: { embed: NormalizedVideo }) {\n return (\n
\n \n {embed.alt && {embed.alt}}\n
\n );\n}\n\nfunction ExternalEmbed({ embed }: { embed: NormalizedExternal }) {\n return (\n \n {embed.thumb && (\n \n )}\n
\n {embed.title}\n {embed.description}\n {new URL(embed.uri).hostname}\n
\n \n );\n}\n\nfunction QuoteEmbed({ embed }: { embed: NormalizedQuote }) {\n // Extract handle/postId from URI: at://did:plc:xxx/app.bsky.feed.post/postid\n const uriParts = embed.uri.split(\"/\");\n const postId = uriParts[uriParts.length - 1];\n const did = uriParts[2];\n\n return (\n \n Quoted post\n \n );\n}\n\nfunction EmbedRenderer({ embed }: { embed: NormalizedEmbed }) {\n switch (embed.type) {\n case \"image\":\n return ;\n case \"video\":\n return ;\n case \"external\":\n return ;\n case \"quote\":\n return ;\n default:\n return null;\n }\n}\n\nfunction PostCard({ post }: { post: BlueskyPost }) {\n // Group images together for grid layout\n const images = post.embeds.filter(\n (e): e is NormalizedImage => e.type === \"image\",\n );\n const otherEmbeds = post.embeds.filter((e) => e.type !== \"image\");\n\n return (\n
\n \n \n {post.text &&

{post.text}

}\n \n\n {images.length > 0 && (\n \n {images.map((img, i) => (\n \n ))}\n \n )}\n\n {otherEmbeds.map((embed, i) => (\n \n ))}\n
\n );\n}\n\ninterface BlueskyFeedProps {\n limit?: number;\n}\n\nexport default function BlueskyFeed({ limit = 10 }: BlueskyFeedProps) {\n const [posts, setPosts] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [errorMsg, setErrorMsg] = useState(null);\n\n useEffect(() => {\n async function fetchPosts() {\n setIsLoading(true);\n setErrorMsg(null);\n try {\n const response = await fetch(\n `/api/bluesky.json?limit=${limit}&_=${Date.now()}`,\n );\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data: BlueskyPost[] = await response.json();\n console.log(\n \"Bluesky posts received:\",\n data.map((p) => ({\n text: p.text.slice(0, 30),\n createdAt: p.createdAt,\n })),\n );\n setPosts(data);\n } catch (error) {\n const msg =\n \"Error fetching Bluesky posts: \" +\n (error instanceof Error ? error.message : String(error));\n setErrorMsg(msg);\n console.error(msg);\n } finally {\n setIsLoading(false);\n }\n }\n\n fetchPosts();\n }, [limit]);\n\n if (isLoading) {\n return (\n
\n
Loading posts from Bluesky...
\n
\n );\n }\n\n if (errorMsg) {\n return (\n
\n
{errorMsg}
\n
\n );\n }\n\n if (posts.length === 0) {\n return (\n
\n
No posts found.
\n
\n );\n }\n\n return (\n
\n
\n {posts.map((post) => (\n \n ))}\n
\n
\n \n View more on Bluesky →\n \n
\n
\n );\n}\n" }, { "path": "src/components/Farcaster/Farcaster.css", "content": ".fc-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.fc-feed {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.fc-post {\n border: 1px solid var(--color-border);\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.fc-post-link {\n text-decoration: none;\n color: inherit;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.fc-time {\n color: var(--color-muted);\n font-size: 0.875rem;\n}\n\n.fc-text {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n line-height: 1.5;\n}\n\n/* Image grid layouts */\n.fc-images {\n display: grid;\n gap: 0.25rem;\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n.fc-images-1 {\n grid-template-columns: 1fr;\n}\n\n.fc-images-2 {\n grid-template-columns: 1fr 1fr;\n}\n\n.fc-images-3 {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n}\n\n.fc-images-3 .fc-image:first-child {\n grid-row: span 2;\n}\n\n.fc-images-4 {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n}\n\n.fc-image {\n display: block;\n overflow: hidden;\n}\n\n.fc-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity 0.2s ease;\n}\n\n.fc-image:hover img {\n opacity: 0.9;\n}\n\n/* Link embed */\n.fc-link {\n display: inline-block;\n padding: 0.5rem 0.75rem;\n border: 1px solid var(--color-border);\n border-radius: 0.25rem;\n text-decoration: none;\n color: var(--color-muted);\n font-size: 0.875rem;\n transition: border-color 0.2s ease;\n}\n\n.fc-link:hover {\n border-color: var(--color-foreground);\n}\n\n/* Quote embed */\n.fc-quote {\n display: flex;\n padding: 0.75rem;\n border: 1px solid var(--color-border);\n border-radius: 0.5rem;\n text-decoration: none;\n color: inherit;\n transition: border-color 0.2s ease;\n}\n\n.fc-quote:hover {\n border-color: var(--color-muted);\n}\n\n.fc-quote-label {\n font-size: 0.875rem;\n color: var(--color-muted);\n}\n\n/* Loading/error states */\n.fc-loading,\n.fc-error {\n text-align: center;\n padding: 2rem;\n color: var(--color-muted);\n}\n\n.fc-error {\n color: var(--color-error, #e74c3c);\n}\n\n/* View all link */\n.fc-view-all {\n text-align: center;\n margin-top: 0.5rem;\n}\n\n.fc-view-all a {\n text-decoration: none;\n color: inherit;\n font-weight: 500;\n}\n\n.fc-view-all a:hover {\n text-decoration: underline;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .fc-post {\n padding: 0.75rem;\n }\n\n .fc-images-3 .fc-image:first-child {\n grid-row: span 1;\n }\n\n .fc-images-3 {\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n}\n" }, { "path": "src/components/Farcaster/index.tsx", "content": "import { useEffect, useState } from \"react\";\nimport \"./Farcaster.css\";\n\ninterface NormalizedEmbed {\n type: \"url\" | \"cast\";\n url?: string;\n castFid?: number;\n castHash?: string;\n}\n\ninterface FarcasterPost {\n hash: string;\n text: string;\n createdAt: string;\n embeds: NormalizedEmbed[];\n postUrl: string;\n}\n\nfunction formatDate(dateString: string): string {\n const date = new Date(dateString);\n const now = new Date();\n const diffMs = now.getTime() - date.getTime();\n const diffMins = Math.floor(diffMs / 60000);\n const diffHours = Math.floor(diffMs / 3600000);\n const diffDays = Math.floor(diffMs / 86400000);\n\n if (diffMins < 1) return \"just now\";\n if (diffMins < 60) return `${diffMins}m`;\n if (diffHours < 24) return `${diffHours}h`;\n if (diffDays < 7) return `${diffDays}d`;\n\n return date.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: date.getFullYear() !== now.getFullYear() ? \"numeric\" : undefined,\n });\n}\n\nfunction isImageUrl(url: string): boolean {\n return /\\.(jpg|jpeg|png|gif|webp)$/i.test(url);\n}\n\nfunction UrlEmbed({ url }: { url: string }) {\n if (isImageUrl(url)) {\n return (\n \n \"\"\n \n );\n }\n\n return (\n \n {new URL(url).hostname}\n \n );\n}\n\nfunction PostCard({ post }: { post: FarcasterPost }) {\n const imageEmbeds = post.embeds.filter((e) => e.type === \"url\" && e.url && isImageUrl(e.url));\n const otherEmbeds = post.embeds.filter((e) => !(e.type === \"url\" && e.url && isImageUrl(e.url)));\n\n return (\n
\n \n \n {post.text &&

{post.text}

}\n \n\n {imageEmbeds.length > 0 && (\n
\n {imageEmbeds.map((embed, i) => (\n \n ))}\n
\n )}\n\n {otherEmbeds.map((embed, i) => {\n if (embed.type === \"url\" && embed.url) {\n return ;\n }\n if (embed.type === \"cast\" && embed.castHash) {\n const hashHex = embed.castHash.startsWith(\"0x\") ? embed.castHash.slice(2) : embed.castHash;\n return (\n \n Quoted cast\n \n );\n }\n return null;\n })}\n
\n );\n}\n\ninterface FarcasterFeedProps {\n limit?: number;\n onDataLoaded?: (posts: FarcasterPost[]) => void;\n}\n\nexport default function FarcasterFeed({ limit = 10, onDataLoaded }: FarcasterFeedProps) {\n const [posts, setPosts] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [errorMsg, setErrorMsg] = useState(null);\n\n useEffect(() => {\n async function fetchPosts() {\n setIsLoading(true);\n setErrorMsg(null);\n try {\n const response = await fetch(`/api/farcaster.json?limit=${limit}&_=${Date.now()}`);\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data: FarcasterPost[] = await response.json();\n setPosts(data);\n onDataLoaded?.(data);\n } catch (error) {\n const msg = \"Error fetching Farcaster posts: \" + (error instanceof Error ? error.message : String(error));\n setErrorMsg(msg);\n console.error(msg);\n onDataLoaded?.([]);\n } finally {\n setIsLoading(false);\n }\n }\n\n fetchPosts();\n }, [limit]);\n\n if (isLoading) {\n return (\n
\n
Loading casts from Farcaster...
\n
\n );\n }\n\n if (errorMsg) {\n return (\n
\n
{errorMsg}
\n
\n );\n }\n\n if (posts.length === 0) {\n return null; // Return nothing if no posts (ephemeral behavior)\n }\n\n return (\n
\n
\n {posts.map((post) => (\n \n ))}\n
\n \n
\n );\n}\n" }, { "path": "src/components/OnchainAnalytics/OnchainAnalytics.css", "content": ".onchain-analytics-container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.onchain-analytics-container > *:not(.onchain-analytics-session-hashes) {\n max-width: 600px;\n}\n\n.onchain-analytics-loading {\n text-align: center;\n color: #888;\n font-size: 1.1rem;\n}\n\n.onchain-analytics-error {\n color: #c00;\n background: #fee;\n padding: 1rem;\n border-radius: 0.5rem;\n margin-bottom: 1rem;\n text-align: center;\n}\n\n.onchain-analytics-break {\n word-break: break-all;\n}\n\n.onchain-analytics-session-hashes {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.onchain-analytics-session-hash {\n font-family: monospace;\n font-size: 0.75rem;\n transition: background 0.2s;\n}\n\n.onchain-analytics-session-hash:hover {\n background: #e0e0e0;\n}\n" }, { "path": "src/components/OnchainAnalytics/index.tsx", "content": "import { useEffect, useState } from \"react\";\nimport { baseSepoliaClient } from \"@lib/viemProvider\";\nimport \"./OnchainAnalytics.css\";\n\n// ABI fragments for the analytics contract\nconst analyticsABI = [\n {\n inputs: [],\n name: \"getAllSessionIds\",\n outputs: [{ internalType: \"bytes32[]\", name: \"\", type: \"bytes32[]\" }],\n stateMutability: \"view\",\n type: \"function\",\n },\n {\n inputs: [],\n name: \"getSessionCount\",\n outputs: [{ internalType: \"uint256\", name: \"\", type: \"uint256\" }],\n stateMutability: \"view\",\n type: \"function\",\n },\n {\n inputs: [],\n name: \"getAllPageViews\",\n outputs: [\n { internalType: \"string[]\", name: \"\", type: \"string[]\" },\n { internalType: \"uint256[]\", name: \"\", type: \"uint256[]\" },\n { internalType: \"uint64[]\", name: \"\", type: \"uint64[]\" },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n {\n inputs: [],\n name: \"getAllEvents\",\n outputs: [\n { internalType: \"string[]\", name: \"\", type: \"string[]\" },\n { internalType: \"uint256[]\", name: \"\", type: \"uint256[]\" },\n { internalType: \"uint64[]\", name: \"\", type: \"uint64[]\" },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const;\n\ninterface PageView {\n page: string;\n views: number;\n}\n\ninterface Event {\n event: string;\n count: number;\n}\n\ninterface OnchainAnalyticsProps {\n contractAddress: `0x${string}`;\n}\n\nexport default function OnchainAnalytics({ contractAddress }: OnchainAnalyticsProps) {\n const [pageViews, setPageViews] = useState([]);\n const [events, setEvents] = useState([]);\n const [sessionCount, setSessionCount] = useState(0n);\n const [sessionIds, setSessionIds] = useState<`0x${string}`[]>([]);\n const [isLoading, setIsLoading] = useState(true);\n const [errorMsg, setErrorMsg] = useState(null);\n\n useEffect(() => {\n async function fetchAnalytics() {\n setIsLoading(true);\n setErrorMsg(null);\n try {\n const [count, views, eventsData, ids] = await Promise.all([\n baseSepoliaClient.readContract({\n address: contractAddress,\n abi: analyticsABI,\n functionName: \"getSessionCount\",\n }),\n baseSepoliaClient.readContract({\n address: contractAddress,\n abi: analyticsABI,\n functionName: \"getAllPageViews\",\n }),\n baseSepoliaClient.readContract({\n address: contractAddress,\n abi: analyticsABI,\n functionName: \"getAllEvents\",\n }),\n baseSepoliaClient.readContract({\n address: contractAddress,\n abi: analyticsABI,\n functionName: \"getAllSessionIds\",\n }),\n ]);\n\n setSessionCount(count as bigint);\n\n // Process page views\n if (Array.isArray(views) && views.length === 3) {\n const [pagePathsRaw, pageOccurrencesRaw] = views as readonly [readonly string[], readonly bigint[], unknown];\n const pagePaths = [...pagePathsRaw];\n const pageOccurrences = [...(pageOccurrencesRaw as readonly bigint[])].map(Number);\n if (Array.isArray(pagePaths) && Array.isArray(pageOccurrences)) {\n setPageViews(\n pagePaths\n .map((page, i) => ({\n page,\n views: pageOccurrences[i],\n }))\n .filter(({ page }) => page !== \"/test\" && page !== \"/posts/1546329600000-markdown-test\")\n .sort((a, b) => b.views - a.views)\n .slice(0, 5)\n );\n }\n }\n\n // Process events\n if (Array.isArray(eventsData) && eventsData.length === 3) {\n const [eventNamesRaw, eventOccurrencesRaw] = eventsData as readonly [\n readonly string[],\n readonly bigint[],\n unknown,\n ];\n const eventNames = [...eventNamesRaw];\n const eventOccurrences = [...(eventOccurrencesRaw as readonly bigint[])].map(Number);\n if (Array.isArray(eventNames) && Array.isArray(eventOccurrences)) {\n setEvents(\n eventNames\n .map((event, i) => ({\n event,\n count: eventOccurrences[i],\n }))\n .sort((a, b) => b.count - a.count)\n .slice(0, 3)\n );\n }\n }\n\n setSessionIds(ids as `0x${string}`[]);\n } catch (error) {\n setErrorMsg(\"Error fetching analytics data: \" + (error instanceof Error ? error.message : String(error)));\n console.error(errorMsg);\n } finally {\n setIsLoading(false);\n }\n }\n\n fetchAnalytics();\n }, [contractAddress]);\n\n if (isLoading) {\n return (\n
\n
Loading analytics data...
\n
\n );\n }\n\n if (errorMsg) {\n return (\n
\n
{errorMsg}
\n
\n );\n }\n\n return (\n
\n

\n {sessionCount.toString()} unique sessions have been recorded.\n

\n\n \n \n \n \n \n \n \n \n {pageViews.map((view, index) => (\n \n \n \n \n ))}\n \n
Top 5 pagesViews
{view.page}{view.views}
\n\n \n \n \n \n \n \n \n \n {events.map((event, index) => (\n \n \n \n \n ))}\n \n
Top eventsCount
{event.event}{event.count}
\n\n

Session Hashes

\n

\n The keccack256 hashes generated are technically valid private keys. These private keys are effectively burned,\n since they are public. As such, they should never be used for anything.\n

\n

Click on a hash to view its corresponding portrait:

\n
\n {sessionIds.map((sessionId, index) => (\n \n {sessionId}\n \n ))}\n
\n
\n );\n}\n" }, { "path": "src/components/RecentGlass/RecentGlass.css", "content": ".recent-glass-container {\n margin-top: auto;\n min-height: calc(50vh - 2rem);\n border-top: 1px solid var(--color-border);\n padding: 2rem;\n @media (max-width: 768px) {\n padding: 1rem;\n }\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.recent-glass-container h2 {\n margin: 0 0 1rem 0;\n font-size: 1.5rem;\n}\n\n.glass-photo {\n position: relative;\n display: block;\n overflow: hidden;\n border: 1px solid var(--color-border);\n text-decoration: none;\n}\n\n.glass-photo img {\n width: 100%;\n height: auto;\n display: block;\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.75);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.glass-photo:hover .overlay {\n opacity: 1;\n}\n\n.exif-info {\n color: white;\n text-align: center;\n font-size: 0.85rem;\n line-height: 1.5;\n}\n\n.exif-line {\n margin-bottom: 0.25rem;\n}\n\n.caption-text {\n margin-top: 0.75rem;\n font-style: italic;\n opacity: 0.9;\n}\n\n.recent-glass-loading,\n.recent-glass-error,\n.recent-glass-empty {\n text-align: center;\n padding: 2rem;\n @media (max-width: 768px) {\n padding: 1rem;\n }\n color: var(--color-muted);\n}\n\n.recent-glass-error {\n color: var(--color-error, #e74c3c);\n}\n\n.view-all {\n text-align: center;\n margin-top: 1rem;\n}\n\n.view-all a {\n text-decoration: none;\n color: inherit;\n font-weight: 500;\n}\n\n.view-all a:hover {\n text-decoration: underline;\n}\n" }, { "path": "src/components/RecentGlass/index.tsx", "content": "import { useEffect, useState } from \"react\";\nimport { Masonry } from \"react-plock\";\nimport \"./RecentGlass.css\";\n\ninterface GlassExif {\n camera?: string;\n lens?: string;\n aperture?: string;\n focal_length?: string;\n iso?: string;\n exposure_time?: string;\n}\n\ninterface GlassPhoto {\n id: string;\n width: number;\n height: number;\n image640x640: string;\n share_url: string;\n created_at: string;\n caption?: string;\n exif?: GlassExif;\n}\n\nexport default function RecentGlass() {\n const [photos, setPhotos] = useState([]);\n const [isLoading, setIsLoading] = useState(true);\n const [errorMsg, setErrorMsg] = useState(null);\n\n useEffect(() => {\n async function fetchGlassPhotos() {\n setIsLoading(true);\n setErrorMsg(null);\n try {\n const response = await fetch(\"/api/glass.json?limit=6\");\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n const data: GlassPhoto[] = await response.json();\n setPhotos(data);\n } catch (error) {\n const msg = \"Error fetching Glass photos: \" + (error instanceof Error ? error.message : String(error));\n setErrorMsg(msg);\n console.error(msg);\n } finally {\n setIsLoading(false);\n }\n }\n\n fetchGlassPhotos();\n }, []);\n\n if (isLoading) {\n return (\n
\n

Recent from Glass

\n
Loading photos from Glass...
\n
\n );\n }\n\n return (\n \n );\n}\n" }, { "path": "src/components/SocialFeeds/SocialFeeds.css", "content": ".social-feeds {\n display: grid;\n gap: 2rem;\n width: 100%;\n}\n\n.social-feeds-three {\n grid-template-columns: 1fr 1fr 1fr;\n}\n\n.social-feeds-two {\n grid-template-columns: 1fr 1fr;\n}\n\n.social-feeds-one {\n grid-template-columns: 1fr;\n max-width: 64ch;\n}\n\n@media (max-width: 1024px) {\n .social-feeds-three {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n@media (max-width: 768px) {\n .social-feeds-three,\n .social-feeds-two {\n grid-template-columns: 1fr;\n }\n}\n\n.social-column {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.social-column summary {\n cursor: pointer;\n font-weight: 600;\n padding: 0.5rem 0;\n list-style: none;\n}\n\n.social-column summary::-webkit-details-marker {\n display: none;\n}\n\n.social-column summary::marker {\n display: none;\n}\n\n.social-feed {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.social-post {\n border: 1px solid var(--color-border);\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.social-post-link {\n text-decoration: none;\n color: inherit;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.social-time {\n color: var(--color-muted);\n font-size: 0.875rem;\n}\n\n.social-text {\n margin: 0;\n white-space: pre-wrap;\n word-wrap: break-word;\n line-height: 1.5;\n}\n\n/* Image grid layouts */\n.social-images {\n display: grid;\n gap: 0.25rem;\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n.social-images-1 {\n grid-template-columns: 1fr;\n}\n\n.social-images-2 {\n grid-template-columns: 1fr 1fr;\n}\n\n.social-images-3 {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n}\n\n.social-images-3 .social-image:first-child {\n grid-row: span 2;\n}\n\n.social-images-4 {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n}\n\n.social-image {\n display: block;\n overflow: hidden;\n}\n\n.social-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: opacity 0.2s ease;\n}\n\n.social-image:hover img {\n opacity: 0.9;\n}\n\n/* Video embed */\n.social-video {\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n.social-video video {\n width: 100%;\n display: block;\n}\n\n/* External link embed */\n.social-external {\n display: flex;\n flex-direction: column;\n border: 1px solid var(--color-border);\n border-radius: 0.5rem;\n overflow: hidden;\n text-decoration: none;\n color: inherit;\n transition: border-color 0.2s ease;\n}\n\n.social-external:hover {\n border-color: var(--color-muted);\n}\n\n.social-external-thumb {\n width: 100%;\n height: auto;\n max-height: 150px;\n object-fit: cover;\n}\n\n.social-external-content {\n padding: 0.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n\n.social-external-title {\n font-weight: 600;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.social-external-uri {\n font-size: 0.75rem;\n color: var(--color-muted);\n}\n\n/* Link embed */\n.social-link {\n display: inline-block;\n padding: 0.5rem 0.75rem;\n border: 1px solid var(--color-border);\n border-radius: 0.25rem;\n text-decoration: none;\n color: var(--color-muted);\n font-size: 0.875rem;\n transition: border-color 0.2s ease;\n}\n\n.social-link:hover {\n border-color: var(--color-foreground);\n}\n\n/* Quote embed */\n.social-quote {\n display: flex;\n padding: 0.75rem;\n border: 1px solid var(--color-border);\n border-radius: 0.5rem;\n text-decoration: none;\n color: var(--color-muted);\n font-size: 0.875rem;\n transition: border-color 0.2s ease;\n}\n\n.social-quote:hover {\n border-color: var(--color-foreground);\n}\n\n/* Glass exif */\n.social-exif {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n font-size: 0.75rem;\n color: var(--color-muted);\n}\n\n.social-post-glass .social-image {\n border-radius: 0.5rem;\n}\n\n.social-post-glass .social-image img {\n height: auto;\n object-fit: contain;\n}\n\n/* Loading state */\n.social-loading {\n text-align: center;\n padding: 2rem;\n color: var(--color-muted);\n}\n\n/* View all link */\n.social-view-all {\n text-align: center;\n margin-top: 0.5rem;\n}\n\n.social-view-all a {\n text-decoration: none;\n color: inherit;\n font-weight: 500;\n}\n\n.social-view-all a:hover {\n text-decoration: underline;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .social-post {\n padding: 0.75rem;\n }\n\n .social-images-3 .social-image:first-child {\n grid-row: span 1;\n }\n\n .social-images-3 {\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n}\n" }, { "path": "src/components/SocialFeeds/index.tsx", "content": "import { useEffect, useState } from \"react\";\nimport \"./SocialFeeds.css\";\n\n// Shared types\ninterface BasePost {\n createdAt: string;\n postUrl: string;\n}\n\ninterface TextPost extends BasePost {\n text: string;\n}\n\n// Bluesky types\ninterface BlueskyImage {\n type: \"image\";\n thumb: string;\n fullsize: string;\n alt: string;\n mimeType: string;\n}\n\ninterface BlueskyVideo {\n type: \"video\";\n url: string;\n mimeType: string;\n}\n\ninterface BlueskyExternal {\n type: \"external\";\n uri: string;\n title: string;\n description: string;\n thumb?: string;\n}\n\ninterface BlueskyQuote {\n type: \"quote\";\n uri: string;\n cid: string;\n}\n\ntype BlueskyEmbed =\n | BlueskyImage\n | BlueskyVideo\n | BlueskyExternal\n | BlueskyQuote;\n\ninterface BlueskyPost extends TextPost {\n uri: string;\n cid: string;\n embeds: BlueskyEmbed[];\n}\n\n// Farcaster types\ninterface FarcasterEmbed {\n type: \"url\" | \"cast\";\n url?: string;\n castFid?: number;\n castHash?: string;\n}\n\ninterface FarcasterPost extends TextPost {\n hash: string;\n embeds: FarcasterEmbed[];\n}\n\n// Glass types\ninterface GlassExif {\n camera?: string;\n lens?: string;\n aperture?: string;\n focal_length?: string;\n iso?: string;\n exposure_time?: string;\n}\n\ninterface GlassPost extends BasePost {\n id: string;\n width: number;\n height: number;\n image640x640: string;\n share_url: string;\n caption: string;\n exif?: GlassExif;\n}\n\n// 5 days in milliseconds\nconst STALE_THRESHOLD_MS = 5 * 24 * 60 * 60 * 1000;\n\nfunction isPostStale(post: BasePost): boolean {\n const postTime = new Date(post.createdAt).getTime();\n return Date.now() - postTime > STALE_THRESHOLD_MS;\n}\n\nfunction filterFreshPosts(posts: T[]): T[] {\n return posts.filter((post) => !isPostStale(post));\n}\n\nfunction formatDate(dateString: string): string {\n const date = new Date(dateString);\n const now = new Date();\n const diffMs = now.getTime() - date.getTime();\n const diffMins = Math.floor(diffMs / 60000);\n const diffHours = Math.floor(diffMs / 3600000);\n const diffDays = Math.floor(diffMs / 86400000);\n\n if (diffMins < 1) return \"just now\";\n if (diffMins < 60) return `${diffMins}m`;\n if (diffHours < 24) return `${diffHours}h`;\n if (diffDays < 7) return `${diffDays}d`;\n\n return date.toLocaleDateString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: date.getFullYear() !== now.getFullYear() ? \"numeric\" : undefined,\n });\n}\n\nfunction isImageUrl(url: string): boolean {\n // Check for common image extensions\n if (/\\.(jpg|jpeg|png|gif|webp)$/i.test(url)) return true;\n // Check for known image CDNs\n if (url.includes(\"imagedelivery.net\")) return true;\n if (url.includes(\"i.imgur.com\")) return true;\n if (url.includes(\"pbs.twimg.com\")) return true;\n return false;\n}\n\n// Bluesky post card\nfunction BlueskyPostCard({ post }: { post: BlueskyPost }) {\n const images = post.embeds.filter(\n (e): e is BlueskyImage => e.type === \"image\",\n );\n const otherEmbeds = post.embeds.filter((e) => e.type !== \"image\");\n\n return (\n
\n \n \n {post.text &&

{post.text}

}\n \n\n {images.length > 0 && (\n \n {images.map((img, i) => (\n \n {img.alt}\n \n ))}\n \n )}\n\n {otherEmbeds.map((embed, i) => {\n if (embed.type === \"video\") {\n return (\n
\n \n
\n );\n }\n if (embed.type === \"external\") {\n return (\n \n {embed.thumb && (\n \n )}\n
\n {embed.title}\n \n {new URL(embed.uri).hostname}\n \n
\n \n );\n }\n if (embed.type === \"quote\") {\n const uriParts = embed.uri.split(\"/\");\n const postId = uriParts[uriParts.length - 1];\n const did = uriParts[2];\n return (\n \n Quoted post\n \n );\n }\n return null;\n })}\n
\n );\n}\n\n// Farcaster post card\nfunction FarcasterPostCard({ post }: { post: FarcasterPost }) {\n const imageEmbeds = post.embeds.filter(\n (e) => e.type === \"url\" && e.url && isImageUrl(e.url),\n );\n const otherEmbeds = post.embeds.filter(\n (e) => !(e.type === \"url\" && e.url && isImageUrl(e.url)),\n );\n\n return (\n
\n \n \n {post.text &&

{post.text}

}\n \n\n {imageEmbeds.length > 0 && (\n \n {imageEmbeds.map((embed, i) => (\n \n \"\"\n \n ))}\n \n )}\n\n {otherEmbeds.map((embed, i) => {\n if (embed.type === \"url\" && embed.url) {\n return (\n \n {new URL(embed.url).hostname}\n \n );\n }\n if (embed.type === \"cast\" && embed.castHash) {\n const hashHex = embed.castHash.startsWith(\"0x\")\n ? embed.castHash.slice(2)\n : embed.castHash;\n return (\n \n Quoted cast\n \n );\n }\n return null;\n })}\n
\n );\n}\n\n// Glass post card\nfunction GlassPostCard({ post }: { post: GlassPost }) {\n return (\n
\n \n \n \n \n \n \n {post.caption &&

{post.caption}

}\n {post.exif && (\n
\n {post.exif.camera && {post.exif.camera}}\n {post.exif.lens && {post.exif.lens}}\n {(post.exif.aperture ||\n post.exif.focal_length ||\n post.exif.iso ||\n post.exif.exposure_time) && (\n \n {[\n post.exif.aperture,\n post.exif.focal_length,\n post.exif.iso,\n post.exif.exposure_time,\n ]\n .filter(Boolean)\n .join(\" · \")}\n \n )}\n
\n )}\n
\n );\n}\n\ninterface SocialFeedsProps {\n limit?: number;\n}\n\nexport default function SocialFeeds({ limit = 10 }: SocialFeedsProps) {\n const [blueskyPosts, setBlueskyPosts] = useState([]);\n const [farcasterPosts, setFarcasterPosts] = useState([]);\n const [glassPosts, setGlassPosts] = useState([]);\n const [blueskyLoading, setBlueskyLoading] = useState(true);\n const [farcasterLoading, setFarcasterLoading] = useState(true);\n const [glassLoading, setGlassLoading] = useState(true);\n\n useEffect(() => {\n // Fetch Bluesky\n fetch(`/api/bluesky.json?limit=${limit}&_=${Date.now()}`)\n .then((res) => res.json())\n .then((data) => setBlueskyPosts(data))\n .catch((err) => console.error(\"Bluesky error:\", err))\n .finally(() => setBlueskyLoading(false));\n\n // Fetch Farcaster\n fetch(`/api/farcaster.json?limit=${limit}&_=${Date.now()}`)\n .then((res) => res.json())\n .then((data) => setFarcasterPosts(data))\n .catch((err) => console.error(\"Farcaster error:\", err))\n .finally(() => setFarcasterLoading(false));\n\n // Fetch Glass\n fetch(`/api/glass.json?limit=${limit}&_=${Date.now()}`)\n .then((res) => res.json())\n .then((data: any[]) => {\n // Transform Glass API response to match our types\n const posts: GlassPost[] = data.map((photo) => ({\n id: photo.id,\n width: photo.width,\n height: photo.height,\n image640x640: photo.image640x640,\n share_url: photo.share_url,\n createdAt: photo.created_at,\n postUrl: photo.share_url,\n caption: photo.caption || \"\",\n exif: photo.exif,\n }));\n setGlassPosts(posts);\n })\n .catch((err) => console.error(\"Glass error:\", err))\n .finally(() => setGlassLoading(false));\n }, [limit]);\n\n const isLoading = blueskyLoading || farcasterLoading || glassLoading;\n\n // Filter to only fresh posts (within last 5 days)\n const freshBlueskyPosts = filterFreshPosts(blueskyPosts);\n const freshFarcasterPosts = filterFreshPosts(farcasterPosts);\n const freshGlassPosts = filterFreshPosts(glassPosts);\n\n const blueskyActive = !blueskyLoading && freshBlueskyPosts.length > 0;\n const farcasterActive = !farcasterLoading && freshFarcasterPosts.length > 0;\n const glassActive = !glassLoading && freshGlassPosts.length > 0;\n\n // Build feeds array with most recent post time for sorting\n type FeedConfig = {\n name: string;\n active: boolean;\n mostRecent: number;\n render: () => JSX.Element;\n };\n\n const feeds: FeedConfig[] = [\n {\n name: \"bluesky\",\n active: blueskyActive,\n mostRecent: freshBlueskyPosts[0]\n ? new Date(freshBlueskyPosts[0].createdAt).getTime()\n : 0,\n render: () => (\n
\n Bluesky\n
\n {freshBlueskyPosts.map((post) => (\n \n ))}\n
\n
\n \n View more on Bluesky →\n \n
\n
\n ),\n },\n {\n name: \"farcaster\",\n active: farcasterActive,\n mostRecent: freshFarcasterPosts[0]\n ? new Date(freshFarcasterPosts[0].createdAt).getTime()\n : 0,\n render: () => (\n
\n Farcaster\n
\n {freshFarcasterPosts.map((post) => (\n \n ))}\n
\n
\n \n View more on Warpcast →\n \n
\n
\n ),\n },\n {\n name: \"glass\",\n active: glassActive,\n mostRecent: freshGlassPosts[0]\n ? new Date(freshGlassPosts[0].createdAt).getTime()\n : 0,\n render: () => (\n
\n Glass\n
\n {freshGlassPosts.map((post) => (\n \n ))}\n
\n
\n \n View more on Glass →\n \n
\n
\n ),\n },\n ];\n\n // Filter active feeds and sort by most recent post\n const activeFeeds = feeds\n .filter((feed) => feed.active)\n .sort((a, b) => b.mostRecent - a.mostRecent);\n\n if (isLoading) {\n return
Loading social feeds...
;\n }\n\n if (activeFeeds.length === 0) {\n return null; // No active feeds\n }\n\n const gridClass =\n activeFeeds.length === 3\n ? \"social-feeds-three\"\n : activeFeeds.length === 2\n ? \"social-feeds-two\"\n : \"social-feeds-one\";\n\n return (\n
\n {activeFeeds.map((feed) => feed.render())}\n
\n );\n}\n" }, { "path": "src/components/footer.astro", "content": "---\n\n---\n\n\n\n\n" }, { "path": "src/components/homepage/heroSection.astro", "content": "---\n\n---\n\n
\n

Hi, I am Matthias

\n

\n I run DevRel at Pinata and have a small growth consustancy called\n day---break on the side.\n

\n

Over the years I've worked as a photographer, and have built growth teams in travel, fintech, and ecommerce.

\n

\n This site is a collection notes, recipews, and thoughts. You'll find projects, ongoing and final, and recomendations\n for all sorts of things.\n

\n

\n You can find me on various social platforms, subscribe to my rss feed,\n or find me on the small-web via Gemini: gemini://gem.iammatthias.com\n

\n
\n\n\n" }, { "path": "src/components/homepage/recentContent.astro", "content": "---\nimport { getCollection } from \"astro:content\";\nimport { getGitHubCollections, type GitHubContentData } from \"@lib/github-loader\";\n\ntype Entry = {\n id: string;\n data: GitHubContentData;\n};\n\n// Get all collection names\nconst GITHUB_OWNER = \"iammatthias\";\nconst GITHUB_REPO = \"obsidian_cms\";\nconst GITHUB_TOKEN = import.meta.env.GITHUB;\n\nconst collectionNames = await getGitHubCollections(GITHUB_OWNER, GITHUB_REPO, GITHUB_TOKEN, \"main\", \"content\");\n\n// Get recent entries from each collection. The loader sorts at insertion\n// time, but Astro's content store doesn't guarantee insertion order on\n// read, so re-sort here.\nconst recentByCollection = await Promise.all(\n collectionNames.map(async (name) => {\n try {\n const entries = ((await getCollection(name as any)) as Entry[]).sort(\n (a, b) =>\n new Date(b.data.created || 0).getTime() -\n new Date(a.data.created || 0).getTime(),\n );\n return {\n name,\n recent: entries.slice(0, 3),\n };\n } catch (error) {\n console.error(`Error loading collection ${name}:`, error);\n return {\n name,\n recent: [] as Entry[],\n };\n }\n })\n);\n\n// Filter out collections with no recent content\nconst collectionsWithContent = recentByCollection\n .filter((c) => c.recent.length > 0)\n .sort((a, b) => {\n const dateA = new Date(a.recent[0].data.created).getTime();\n const dateB = new Date(b.recent[0].data.created).getTime();\n return dateB - dateA; // Most recent first\n });\n---\n\n
\n
\n {\n collectionsWithContent.map((collection) => (\n
\n

\n {collection.name}\n

\n
    \n {collection.recent.map((entry) => (\n
  • \n {entry.data.title}\n
    \n {new Date(entry.data.created).toLocaleDateString()}\n
    • \n ))}\n
  • \n View all →\n
    • \n
\n
\n ))\n }\n
\n {\n collectionsWithContent.length > 0 && (\n
\n View all content →\n
\n )\n }\n
\n\n\n" }, { "path": "src/components/homepage/recentFeeds.astro", "content": "---\n\n---\n\n
\n

feeds

\n

blogs I like that have rss

\n
\n
  • item 1
  • item 2
  • item 3
\n
\n
\n\n\n" }, { "path": "src/components/nav.astro", "content": "---\n\n---\n\n\n\n\n\n\n" }, { "path": "src/components/sidebar/index.astro", "content": "---\n\n---\n\n\n\n\n\n\n\n\n" }, { "path": "src/content.config.ts", "content": "import { defineCollection } from 'astro:content';\nimport { githubLoader, getGitHubCollections } from './lib/github-loader';\nimport { tagsLoader } from './lib/tags-loader';\n\n// GitHub configuration\nconst GITHUB_OWNER = 'iammatthias';\nconst GITHUB_REPO = 'obsidian_cms';\nconst GITHUB_BRANCH = 'main';\nconst GITHUB_TOKEN = import.meta.env.GITHUB;\n\n// Dynamically fetch collections from GitHub\nconst collectionNames = await getGitHubCollections(\n GITHUB_OWNER,\n GITHUB_REPO,\n GITHUB_TOKEN,\n GITHUB_BRANCH,\n 'content'\n);\n\n// Create a collection definition for each folder\nconst collections = Object.fromEntries(\n collectionNames.map((collectionName) => [\n collectionName,\n defineCollection({\n loader: githubLoader({\n owner: GITHUB_OWNER,\n repo: GITHUB_REPO,\n branch: GITHUB_BRANCH,\n contentPath: 'content',\n token: GITHUB_TOKEN,\n }),\n }),\n ])\n);\n\n// Add tags collection\ncollections.tags = defineCollection({\n loader: tagsLoader({\n owner: GITHUB_OWNER,\n repo: GITHUB_REPO,\n token: GITHUB_TOKEN,\n branch: GITHUB_BRANCH,\n contentPath: 'content',\n }),\n});\n\nexport { collections };\n" }, { "path": "src/layouts/defaultLayouts.astro", "content": "---\nimport \"@src/styles/reset.css\";\nimport \"@src/styles/globals.css\";\nimport Nav from \"@components/nav.astro\";\nimport Footer from \"@components/footer.astro\";\n\ninterface Props {\n title?: string;\n description?: string;\n ogImage?: string;\n}\n\nconst { title = \"@iammatthias\", description = \"Personal site of Matthias Jordan\", ogImage = \"/\" } = Astro.props;\nconst canonicalURL = new URL(Astro.url.pathname, Astro.site);\n// Use OG subdomain for production, localhost for development\nconst ogImageURL = import.meta.env.DEV\n ? new URL(ogImage, \"http://localhost:8787\")\n : new URL(ogImage, \"https://og.iammatthias.com\");\n---\n\n\n \n \n \n\n \n \n\n {title}\n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n\n