├── app ├── page.module.css ├── providers.tsx ├── (home) │ ├── layout.tsx │ ├── page.tsx │ ├── projects │ │ └── page.tsx │ └── uses │ │ └── page.tsx ├── guestbook │ └── page.tsx ├── layout.tsx ├── posts │ └── [slug] │ │ └── page.tsx ├── blog │ ├── page.tsx │ └── weeklies │ │ └── page.tsx └── globals.css ├── README.md ├── lexicons.d.ts ├── .yarnrc.yml ├── public ├── favicon.ico ├── og-bg.png ├── tinies.webp ├── natb_cv_fv2.pdf ├── natb_cv_fv6.pdf ├── natb_cv_fv7.pdf ├── on p=np (3).pdf ├── on p=np-prev.pdf └── vercel.svg ├── postcss.config.js ├── siteconfig.json ├── types ├── glsl.d.ts └── mdx.d.ts ├── components ├── shader │ ├── gradient-importer.tsx │ ├── conditional.tsx │ ├── vert.glsl │ ├── noise.glsl │ ├── fragment.glsl │ ├── gradient.tsx │ ├── blend.glsl │ └── wave.js ├── timeago.tsx ├── ui │ ├── card.tsx │ └── iconButton.tsx ├── icons.tsx ├── footer.tsx ├── notPublicHover.tsx ├── ambilight.tsx ├── colortoggle.tsx ├── header.tsx ├── headerLink.tsx ├── time │ ├── currentTime.tsx │ └── ticker.tsx ├── comments │ ├── Comments.tsx │ ├── BlueskyEmbed.tsx │ └── BlueskyReply.tsx ├── mdx.tsx ├── profileCard.tsx ├── scrollingText.tsx ├── disclosure.tsx └── lastfm.tsx ├── mdx-components.tsx ├── .gitignore ├── next.config.js ├── tsconfig.json ├── helpers └── helpers.ts ├── tailwind.config.cjs ├── package.json ├── contentlayer.config.ts └── posts ├── weekly-2025-02-09.mdx ├── weekly-2025-03-25.mdx ├── blog.mdx ├── godot-vsc.mdx ├── deploying-nextjs.mdx ├── game-design.mdx └── weekly-2025-02-02.mdx /app/page.module.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## (dog with a) blog 2 | 3 | simple natalie blog -------------------------------------------------------------------------------- /lexicons.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | enableImmutableInstalls: false 2 | 3 | nodeLinker: node-modules 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/og-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/og-bg.png -------------------------------------------------------------------------------- /public/tinies.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/tinies.webp -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | -------------------------------------------------------------------------------- /public/natb_cv_fv2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/natb_cv_fv2.pdf -------------------------------------------------------------------------------- /public/natb_cv_fv6.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/natb_cv_fv6.pdf -------------------------------------------------------------------------------- /public/natb_cv_fv7.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/natb_cv_fv7.pdf -------------------------------------------------------------------------------- /public/on p=np (3).pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/on p=np (3).pdf -------------------------------------------------------------------------------- /public/on p=np-prev.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/espeon/blog/HEAD/public/on p=np-prev.pdf -------------------------------------------------------------------------------- /siteconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "site": "blog.natalie.sh", 3 | "name": "Natalie Bridgers" 4 | } -------------------------------------------------------------------------------- /types/glsl.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.glsl" { 2 | const value: string; 3 | export default value; 4 | } 5 | -------------------------------------------------------------------------------- /types/mdx.d.ts: -------------------------------------------------------------------------------- 1 | import type { JSX } from "react"; 2 | // types/mdx.d.ts 3 | declare module '*.mdx' { 4 | let MDXComponent: (props) => JSX.Element 5 | export default MDXComponent 6 | } 7 | -------------------------------------------------------------------------------- /app/providers.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ThemeProvider } from "next-themes"; 4 | 5 | export function Providers({ children }) { 6 | return {children}; 7 | } 8 | -------------------------------------------------------------------------------- /components/shader/gradient-importer.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import dynamic from "next/dynamic"; 3 | 4 | // do not ssr gradientreact 5 | const GradientReact = dynamic(() => import("./gradient"), { 6 | ssr: false, 7 | }); 8 | 9 | export default function Gradient() { 10 | return ; 11 | } 12 | -------------------------------------------------------------------------------- /app/(home)/layout.tsx: -------------------------------------------------------------------------------- 1 | import ProfileCard from "@/components/profileCard"; 2 | 3 | export default function Page({ children }) { 4 | return ( 5 |

6 | 7 | {children} 8 |

9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /mdx-components.tsx: -------------------------------------------------------------------------------- 1 | import type { MDXComponents } from 'mdx/types' 2 | 3 | // This file is required to use MDX in `app` directory. 4 | export function useMDXComponents(components: MDXComponents): MDXComponents { 5 | return { 6 | // Allows customizing built-in components, e.g. to add styling. 7 | // h1: ({ children }) =>

{children}

, 8 | ...components, 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /components/timeago.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { timeAgo } from "helpers/helpers"; 4 | 5 | export default function TimeAgo(props: { 6 | date: string; 7 | parentheses?: boolean; 8 | }) { 9 | return ( 10 | 11 | {props.parentheses === true || props.parentheses === undefined ? "(" : ""} 12 | {timeAgo(props.date)} 13 | {props.parentheses === true || props.parentheses === undefined ? ")" : ""} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /components/ui/card.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import React from "react"; 3 | 4 | const Card = ({ children, className = "", ...props }) => { 5 | return ( 6 |

14 | {children} 15 |

16 | ); 17 | }; 18 | 19 | export default Card; 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | # contentlayer 39 | .contentlayer -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/icons.tsx: -------------------------------------------------------------------------------- 1 | import { IoLogoTwitch } from "react-icons/io"; 2 | import { FaGithub, FaTwitch, FaTwitter, FaDiscord } from "react-icons/fa"; 3 | 4 | const IconRow = () => { 5 | let icons = [ 6 | { i: , url: "https://github.com/espeon" }, 7 | { i: , url: "https://twitter.com/ameiwi" }, 8 | { i: , url: "https://twitch.tv/ameiwi" }, 9 | { i: , url: "https://nat.vg/discord" }, 10 | ]; 11 | return ( 12 |

13 | {icons.map((e) => { 14 | return ( 15 |

16 | {e.i} 17 |

18 | ); 19 | })} 20 |

21 | ); 22 | }; 23 | 24 | export default IconRow; -------------------------------------------------------------------------------- /components/footer.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { ColorToggle } from "./colortoggle"; 3 | import { PiMusicNoteSimpleFill } from "react-icons/pi"; 4 | import LastFm from "./lastfm"; 5 | 6 | export default function Footer(props) { 7 | 8 | return ( 9 |

15 | 19 |

20 | 21 |

22 |

23 | 24 |

25 | 26 | 27 | 28 |

29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | import { withContentlayer } from "next-contentlayer2"; 2 | 3 | /** @type {import('next').NextConfig} */ 4 | const nextConfig = { 5 | output: "export", 6 | pageExtensions: ["js", "jsx", "ts", "tsx", "mdx"], 7 | swcMinify: true, 8 | webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { 9 | config.module.rules.push({ 10 | test: /\.glsl$/, 11 | exclude: /node_modules/, 12 | use: ["raw-loader", "glslify-loader"], 13 | }); 14 | 15 | return { 16 | ...config, 17 | optimization: { 18 | // weird error with cssnanosimple 19 | minimize: false, 20 | }, 21 | }; 22 | }, 23 | experimental: { 24 | turbo: { 25 | rules: { 26 | "*.glsl": { 27 | loaders: ["raw-loader"], 28 | as: "*.js", 29 | }, 30 | }, 31 | }, 32 | }, 33 | }; 34 | 35 | export default withContentlayer(nextConfig); 36 | -------------------------------------------------------------------------------- /app/guestbook/page.tsx: -------------------------------------------------------------------------------- 1 | import Comments from "@/components/comments/Comments"; 2 | import Card from "@/components/ui/card"; 3 | 4 | export default function CommentsTest() { 5 | return ( 6 |

7 | 8 |

Guestbook

9 |

10 | Join in{" "} 11 | 15 | on Bluesky 16 | 17 | . 18 |

19 |

20 | 25 |

26 | 27 |

28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /components/ui/iconButton.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { IconType } from "react-icons/lib"; 3 | interface IconButtonProps extends React.HTMLAttributes { 4 | className?: string; 5 | Icon: IconType; 6 | onClick?: () => void; 7 | ariaLabel?: string; 8 | disabled?: boolean; 9 | } 10 | 11 | export const IconButton = (props: IconButtonProps) => { 12 | return ( 13 | // tailwindcss button 14 | 26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | //"strict": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "Bundler", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve", 20 | "incremental": true, 21 | "baseUrl": ".", 22 | "paths": { 23 | "contentlayer/generated": [ 24 | "./.contentlayer/generated" 25 | ], 26 | "@/*": [ 27 | "./*" 28 | ] 29 | }, 30 | "plugins": [ 31 | { 32 | "name": "next" 33 | } 34 | ], 35 | "strict": false 36 | }, 37 | "include": [ 38 | "next-env.d.ts", 39 | "**/*.ts", 40 | "**/*.tsx", 41 | ".next/types/**/*.ts", 42 | ".contentlayer/generated" 43 | ], 44 | "exclude": [ 45 | "node_modules" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /helpers/helpers.ts: -------------------------------------------------------------------------------- 1 | /// gives us a string like "2 days ago" or "a year ago" 2 | 3 | export const timeAgo = (date: string) => { 4 | const time = new Date(date).getTime(); 5 | const now = new Date().getTime(); 6 | const diff = now - time > 0 ? now - time : time - now; 7 | const seconds = diff / 1000; 8 | const minutes = seconds / 60; 9 | const hours = minutes / 60; 10 | let ret = ""; 11 | if (hours < 24) { 12 | ret = `${Math.floor(hours)} hours ago`; 13 | } else if (hours < 48) { 14 | ret = `a day ago`; 15 | } else if (hours < 24 * 30) { 16 | ret = `${Math.floor(hours / 24)} days ago`; 17 | } else if (hours < 24 * 60) { 18 | ret = `a month ago`; 19 | } else if (hours < 24 * 365) { 20 | ret = `${Math.floor(hours / 24 / 30)} months ago`; 21 | } else if (hours < 24 * 365 * 2) { 22 | ret = `a year ago`; 23 | } else { 24 | ret = `${Math.floor(hours / 24 / 365)} years ago`; 25 | } 26 | // handle if the date is in the future 27 | if (now - time < 0) { 28 | ret = "in " + ret.substring(ret.startsWith("-") ? 1 : 0, ret.length - 4); 29 | } 30 | return ret; 31 | }; 32 | -------------------------------------------------------------------------------- /components/shader/conditional.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { usePathname } from "next/navigation"; 4 | import { ReactNode } from "react"; 5 | 6 | interface ConditionalProps { 7 | paths: string[]; 8 | children: ReactNode; 9 | defaultComponent: ReactNode; 10 | } 11 | 12 | export function Conditional({ 13 | paths, 14 | children, 15 | defaultComponent, 16 | }: ConditionalProps) { 17 | const pathname = usePathname(); 18 | 19 | const isPathMatch = paths.some((path) => { 20 | // Convert both strings to lowercase for case-insensitive comparison 21 | const normalizedPath = path.toLowerCase(); 22 | const normalizedPathname = pathname.toLowerCase(); 23 | 24 | // Check if the pathname starts with the given path 25 | // This allows for matching nested routes as well 26 | const match = (normalizedPathname: string, normalizedPath: string) => { 27 | if (normalizedPath == "/") { 28 | return normalizedPathname === normalizedPath; 29 | } else { 30 | return normalizedPathname.startsWith(normalizedPath); 31 | } 32 | }; 33 | return match(normalizedPathname, normalizedPath); 34 | }); 35 | 36 | return isPathMatch ? <>{children} : <>{defaultComponent}; 37 | } 38 | -------------------------------------------------------------------------------- /components/notPublicHover.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useRef, useState } from "react"; 3 | import { PiEyeClosed, PiEye, PiWarning } from "react-icons/pi"; 4 | 5 | export const NotPublicHover = () => { 6 | const [isHovered, setIsHovered] = useState(false); 7 | const hoverRef = useRef(null); 8 | 9 | const handleMouseEnter = () => { 10 | setIsHovered(true); 11 | }; 12 | 13 | const handleMouseLeave = () => { 14 | // 2.5 seconds after mouse leave 15 | setTimeout(() => { 16 | setIsHovered(false); 17 | }, 1500); 18 | }; 19 | 20 | return ( 21 |

27 |

28 | 29 | This post is not public. Be careful who you share this with. 30 |

31 | {isHovered?: 32 | } 33 |

34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /components/ambilight.tsx: -------------------------------------------------------------------------------- 1 | export default function Ambilight() { 2 | return ( 3 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: "class", 4 | content: [ 5 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 8 | 9 | // Or if using `src` directory: 10 | "./src/**/*.{js,ts,jsx,tsx,mdx}", 11 | ], 12 | theme: { 13 | extend: { 14 | colors: { 15 | wisteria: { 16 | 50: "oklch(0.955 0.012 314.384)", 17 | 100: "oklch(0.910 0.55 314.384)", 18 | 200: "oklch(0.820 0.100 314.384)", 19 | 300: "oklch(0.730 0.105 314.384)", 20 | 400: "oklch(0.640 0.120 314.384)", 21 | 500: "oklch(0.550 0.100 314.384)", 22 | 600: "oklch(0.445 0.084 314.384)", 23 | 700: "oklch(0.334 0.081 314.384)", 24 | 800: "oklch(0.223 0.078 314.384)", 25 | 900: "oklch(0.111 0.076 314.384)", 26 | 950: "oklch(0.056 0.074 314.384)", 27 | }, 28 | }, 29 | fontFamily: { 30 | sans: ["var(--font-figtree)"], 31 | mono: ["var(--font-ibm-plex-mono)"], 32 | }, 33 | typography: { 34 | DEFAULT: { 35 | css: { 36 | "blockquote p:first-of-type::before": { content: "none" }, 37 | "blockquote p:first-of-type::after": { content: "none" }, 38 | }, 39 | }, 40 | }, 41 | }, 42 | }, 43 | plugins: [require("@tailwindcss/typography")], 44 | }; 45 | -------------------------------------------------------------------------------- /components/colortoggle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useTheme } from "next-themes"; 3 | import { useEffect, useState } from "react"; 4 | import { IoMdMoon, IoMdRefreshCircle, IoMdSunny } from "react-icons/io"; 5 | import { LuMoon, LuSun, LuSunMoon } from "react-icons/lu"; 6 | import { IconButton } from "./ui/iconButton"; 7 | 8 | const other = (theme: string) => { 9 | if (theme === "dark") { 10 | return "light"; 11 | } else { 12 | if (theme === "system") { 13 | const systemTheme = window.matchMedia("(prefers-color-scheme: dark)"); 14 | return systemTheme.matches ? "light" : "dark"; 15 | } else { 16 | return "dark"; 17 | } 18 | } 19 | }; 20 | 21 | export const ColorToggle = () => { 22 | const { theme, setTheme } = useTheme(); 23 | const [mounted, setMounted] = useState(false); 24 | useEffect(() => { 25 | setMounted(true); 26 | }, []); 27 | let isDark: boolean; 28 | if (theme === "system") { 29 | const systemTheme = window.matchMedia("(prefers-color-scheme: dark)"); 30 | isDark = systemTheme.matches; 31 | } else { 32 | isDark = theme === "dark"; 33 | } 34 | const DarkLightIcon = mounted ? (isDark ? LuMoon : LuSun) : LuSunMoon; 35 | return ( 36 | // tailwindcss button 37 | { 42 | setTheme(other(theme)); 43 | }} 44 | /> 45 | ); 46 | }; 47 | -------------------------------------------------------------------------------- /components/header.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { ColorToggle } from "./colortoggle"; 3 | import clsx from "clsx"; 4 | import { HTMLAttributes } from "react"; 5 | import HeaderLink from "./headerLink"; 6 | import { IconButton } from "./ui/iconButton"; 7 | import { LuCommand } from "react-icons/lu"; 8 | 9 | const links = [ 10 | { href: "/", label: "Home" }, 11 | { href: "/blog", label: "Blog", alsoMatch: ["/posts"] }, 12 | { 13 | href: "/projects", 14 | label: ( 15 | <> 16 |

Projects

17 |

🏗

18 | 19 | ), 20 | }, 21 | { 22 | href: "/guestbook", 23 | label: ( 24 | <> 25 |

Guestbook

26 |

🪶

27 | 28 | ), 29 | }, 30 | { 31 | href: "/uses", 32 | label: ( 33 | <> 34 |

/uses

35 |

💻

36 | 37 | ), 38 | }, 39 | ]; 40 | 41 | export default function Header(props: HTMLAttributes) { 42 | return ( 43 |

50 |

51 |

52 | {links.map((link) => ( 53 | 54 | ))} 55 |

56 |

57 | 62 | 63 |

64 |

65 |

66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /components/headerLink.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import clsx from "clsx"; 3 | import Link from "next/link"; 4 | import { usePathname } from "next/navigation"; 5 | import type { JSX } from "react"; 6 | export default function HeaderLink(props: { 7 | href: string; 8 | label: string | JSX.Element; 9 | alsoMatch?: string[]; 10 | }) { 11 | const pathname = usePathname(); 12 | const match = () => { 13 | if (props.href == "/") { 14 | return props.href === pathname; 15 | } 16 | if (props.alsoMatch) { 17 | let res = props.alsoMatch.some((alsoMatch) => 18 | pathname.startsWith(alsoMatch), 19 | ); 20 | if (res) return true; 21 | } 22 | return pathname.startsWith(props.href) || props.href === pathname; 23 | }; 24 | const isActive = match(); 25 | return ( 26 | 36 | 42 |

43 | {props.label} 44 |

45 | 46 | 47 | {props.label} 48 | 49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "NODE_OPTIONS='--inspect' next dev --turbo", 6 | "build": "next build", 7 | "start": "next start", 8 | "build-docs": "contentlayer2 build" 9 | }, 10 | "dependencies": { 11 | "@atcute/bluesky": "^1.0.12", 12 | "@atcute/client": "^2.0.7", 13 | "@atcute/lex-cli": "^1.0.4", 14 | "@catppuccin/vscode": "^3.16.0", 15 | "@headlessui/react": "^2.2.0", 16 | "@react-three/drei": "^9.121.4", 17 | "@react-three/fiber": "^8.17.14", 18 | "@tailwindcss/postcss": "^4.0.5", 19 | "clsx": "^2.1.1", 20 | "contentlayer2": "0.5.3", 21 | "date-fns": "^4.1.0", 22 | "glsl-dither": "^1.0.1", 23 | "glsl-luma": "^1.0.1", 24 | "glsl-noise": "^0.0.0", 25 | "glslify": "^7.1.1", 26 | "glslify-loader": "^2.0.0", 27 | "mdx-bundler": "^10.1.0", 28 | "next": "15.1.6", 29 | "next-contentlayer2": "0.5.3", 30 | "next-themes": "^0.4.4", 31 | "raw-loader": "^4.0.2", 32 | "react": "19.0.0", 33 | "react-crossfade-simple": "^1.0.7", 34 | "react-dom": "19.0.0", 35 | "react-icons": "^5.4.0", 36 | "reading-time": "^1.5.0", 37 | "rehype-autolink-headings": "^7.1.0", 38 | "rehype-pretty-code": "^0.14.0", 39 | "rehype-slug": "^6.0.0", 40 | "remark-gfm": "4.0.0", 41 | "shiki": "1.9.1", 42 | "swr": "^2.3.2", 43 | "three": "^0.173.0" 44 | }, 45 | "devDependencies": { 46 | "@tailwindcss/typography": "latest", 47 | "@types/mdx": "2.0.13", 48 | "@types/node": "22.13.1", 49 | "@types/react": "19.0.8", 50 | "@types/react-dom": "19.0.3", 51 | "autoprefixer": "^10.4.20", 52 | "postcss": "^8.5.1", 53 | "tailwindcss": "^4.0.5", 54 | "typescript": "5.7.3" 55 | }, 56 | "pnpm": { 57 | "overrides": { 58 | "@types/react": "19.0.8", 59 | "@types/react-dom": "19.0.3" 60 | }, 61 | "ignoredBuiltDependencies": [ 62 | "contentlayer2" 63 | ] 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /app/(home)/page.tsx: -------------------------------------------------------------------------------- 1 | import Header from "@/components/header"; 2 | 3 | // app/page.tsx 4 | import Link from "next/link"; 5 | import { PrettyImage } from "@/components/mdx"; 6 | import LastFm from "@/components/lastfm"; 7 | import Card from "@/components/ui/card"; 8 | import { FaDiscord, FaGithub, FaLastfm, FaLinkedin } from "react-icons/fa"; 9 | import CurrentTime from "@/components/time/currentTime"; 10 | import ProfileCard from "@/components/profileCard"; 11 | 12 | export default function Page() { 13 | return ( 14 |

15 | 16 |

17 | Who am I? 18 |

19 |

20 | I'm a recent college grad, with a major in Computer Science. In my 21 | free time, I like to make fast things to solve cool problems. 22 |

23 |

24 | Outside of coding, I spend my time creating and listening to music, 25 | going to concerts, reading, or experimenting in the kitchen. You’ll 26 | often find me working on my homelab, listening to music, or hanging 27 | out with friends. 28 |

29 | 30 | 31 | 32 | 33 | 34 |

35 | 40 | 41 | in Nashville, TN 42 |

43 | 44 |

45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /components/time/currentTime.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useEffect, useState } from "react"; 3 | import { useRouter } from "next/navigation"; 4 | import clsx from "clsx"; 5 | import AnimatedCounter from "./ticker"; 6 | 7 | interface CurrentTimeProps { 8 | className?: string; 9 | displayMs?: boolean; 10 | msPrecision?: number; 11 | } 12 | 13 | const defaultProps: CurrentTimeProps = { 14 | className: "", 15 | displayMs: false, 16 | msPrecision: 0, 17 | }; 18 | 19 | function getDate(timeZone: string) { 20 | return new Date( 21 | new Date().toLocaleString("en-US", { 22 | timeZone, 23 | }), 24 | ); 25 | } 26 | 27 | export default function CurrentTime({ ...props }: CurrentTimeProps) { 28 | const [time, setTime] = useState(getDate("America/Chicago")); 29 | const router = useRouter(); 30 | 31 | useEffect(() => { 32 | const interval = setInterval(() => { 33 | // get date in CST 34 | setTime(getDate("America/Chicago")); 35 | }, 1000); 36 | 37 | return () => clearInterval(interval); 38 | }, []); 39 | 40 | return ( 41 |

47 | 54 | : 55 | 62 | : 63 | 70 | {props.displayMs ? ( 71 | <> 72 | . 73 | 80 | 81 | ) : null} 82 |

83 | ); 84 | } 85 | -------------------------------------------------------------------------------- /components/shader/vert.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 v_color; 2 | 3 | void main() { 4 | float time = u_time * u_global.noiseSpeed; 5 | 6 | vec2 noiseCoord = resolution * uvNorm * u_global.noiseFreq; 7 | 8 | vec2 st = 1. - uvNorm.xy; 9 | 10 | // 11 | // Tilting the plane 12 | // 13 | 14 | // Front-to-back tilt 15 | float tilt = resolution.y / 2.0 * uvNorm.y; 16 | 17 | // Left-to-right angle 18 | float incline = resolution.x * uvNorm.x / 2.0 * u_vertDeform.incline; 19 | 20 | // Up-down shift to offset incline 21 | float offset = resolution.x / 2.0 * u_vertDeform.incline * mix(u_vertDeform.offsetBottom, u_vertDeform.offsetTop, uv.y); 22 | 23 | // 24 | // Vertex noise 25 | // 26 | 27 | float noise = snoise(vec3( 28 | noiseCoord.x * u_vertDeform.noiseFreq.x + time * u_vertDeform.noiseFlow, 29 | noiseCoord.y * u_vertDeform.noiseFreq.y, 30 | time * u_vertDeform.noiseSpeed + u_vertDeform.noiseSeed 31 | )) * u_vertDeform.noiseAmp; 32 | 33 | // Fade noise to zero at edges 34 | noise *= 1.0 - pow(abs(uvNorm.y), 2.0); 35 | 36 | // Clamp to 0 37 | noise = max(0.0, noise); 38 | 39 | vec3 pos = vec3( 40 | position.x, 41 | position.y + tilt + incline + noise - offset, 42 | position.z 43 | ); 44 | 45 | // 46 | // Vertex color, to be passed to fragment shader 47 | // 48 | 49 | if (u_active_colors[0] == 1.) { 50 | v_color = u_baseColor; 51 | } 52 | 53 | for (int i = 0; i < u_waveLayers_length; i++) { 54 | if (u_active_colors[i + 1] == 1.) { 55 | WaveLayers layer = u_waveLayers[i]; 56 | 57 | float noise = smoothstep( 58 | layer.noiseFloor, 59 | layer.noiseCeil, 60 | snoise(vec3( 61 | noiseCoord.x * layer.noiseFreq.x + time * layer.noiseFlow, 62 | noiseCoord.y * layer.noiseFreq.y, 63 | time * layer.noiseSpeed + layer.noiseSeed 64 | )) / 2.0 + 0.5 65 | ); 66 | 67 | v_color = blendNormal(v_color, layer.color, pow(noise, 4.)); 68 | } 69 | } 70 | 71 | // 72 | // Finish 73 | // 74 | 75 | gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0); 76 | } 77 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | import { IBM_Plex_Mono, Figtree } from "next/font/google"; 3 | import { Providers } from "./providers"; 4 | import Footer from "@/components/footer"; 5 | import Header from "@/components/header"; 6 | import { Conditional } from "@/components/shader/conditional"; 7 | import { Suspense } from "react"; 8 | import Gradient from "@/components/shader/gradient-importer"; 9 | 10 | const mono = IBM_Plex_Mono({ 11 | weight: "400", 12 | style: ["normal", "italic"], 13 | subsets: ["latin"], 14 | variable: "--font-ibm-plex-mono", 15 | }); 16 | const poly = Figtree({ 17 | weight: "variable", 18 | subsets: ["latin"], 19 | variable: "--font-figtree", 20 | }); 21 | 22 | export default function RootLayout({ 23 | children, 24 | }: { 25 | children: React.ReactNode; 26 | }) { 27 | return ( 28 | 33 | 34 | 35 |

36 |

39 | } 42 | > 43 | 44 | 45 | 46 | 47 |

48 |

52 | } 53 | > 54 |

55 | 56 |

57 | {children} 58 |

59 |

60 | 61 | 62 | 63 | ); 64 | } 65 | 66 | export const metadata = { 67 | title: "natalie's website", 68 | // good description for seo 69 | description: " ", 70 | }; 71 | -------------------------------------------------------------------------------- /contentlayer.config.ts: -------------------------------------------------------------------------------- 1 | import { defineDocumentType, makeSource } from "contentlayer2/source-files"; 2 | 3 | import latte from "@catppuccin/vscode/themes/latte.json" with { type: "json" }; 4 | import mocha from "@catppuccin/vscode/themes/mocha.json" with { type: "json" }; 5 | 6 | import remarkGfm from "remark-gfm"; 7 | import rehypePrettyCode from "rehype-pretty-code"; 8 | import rehypeSlug from "rehype-slug"; 9 | import rehypeAutolinkHeadings from "rehype-autolink-headings"; 10 | import { readFileSync } from "fs"; 11 | 12 | export const Post = defineDocumentType(() => ({ 13 | name: "Post", 14 | filePathPattern: `**/*.mdx`, 15 | contentType: "mdx", 16 | fields: { 17 | title: { type: "string", required: true }, 18 | datePublished: { type: "date", required: true }, 19 | lastUpdated: { type: "date", required: false }, 20 | summary: { type: "string", required: true }, 21 | public: { type: "boolean", required: false, default: true }, 22 | coAuthors: { type: "list", of: { type: "string" }, required: false }, 23 | coAuthorPFPs: { type: "list", of: { type: "string" }, required: false }, 24 | isWeekly: { type: "boolean", required: false }, 25 | }, 26 | computedFields: { 27 | url: { 28 | type: "string", 29 | resolve: (post) => `/posts/${post._raw.flattenedPath}`, 30 | }, 31 | }, 32 | })); 33 | 34 | export default makeSource({ 35 | contentDirPath: "posts", 36 | documentTypes: [Post], 37 | mdx: { 38 | remarkPlugins: [remarkGfm], 39 | rehypePlugins: [ 40 | rehypeSlug, 41 | [ 42 | rehypePrettyCode, 43 | { 44 | theme: { 45 | dark: mocha, 46 | light: latte, 47 | }, 48 | onVisitLine(node) { 49 | // Prevent lines from collapsing in `display: grid` mode, and allow empty 50 | // lines to be copy/pasted 51 | if (node.children.length === 0) { 52 | node.children = [{ type: "text", value: " " }]; 53 | } 54 | }, 55 | onVisitHighlightedLine(node) { 56 | node.properties.className.push("line--highlighted"); 57 | }, 58 | onVisitHighlightedWord(node) { 59 | node.properties.className = ["word--highlighted"]; 60 | }, 61 | }, 62 | ], 63 | [ 64 | rehypeAutolinkHeadings, 65 | { 66 | properties: { 67 | className: ["anchor"], 68 | }, 69 | }, 70 | ], 71 | ], 72 | }, 73 | }); 74 | -------------------------------------------------------------------------------- /components/comments/Comments.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useEffect, useState } from "react"; 3 | import { 4 | AppBskyFeedGetPostThread, 5 | AppBskyFeedDefs, 6 | Brand, 7 | } from "@atcute/client/lexicons"; 8 | import BlueskyReply from "./BlueskyReply"; 9 | 10 | export interface CommentsProps { 11 | // The DID of the OP 12 | did: string; 13 | // The CID of the app.bsky.feed.post 14 | postCid: string; 15 | skipFirst: boolean; 16 | } 17 | 18 | type ThreadView = Brand.Union; 19 | 20 | function isThreadView(thread: unknown): thread is ThreadView { 21 | return (thread as ThreadView)?.$type === "app.bsky.feed.defs#threadViewPost"; 22 | } 23 | 24 | export default function Comments({ did, postCid, skipFirst }: CommentsProps) { 25 | const [comments, setComments] = 26 | useState(null); 27 | 28 | useEffect(() => { 29 | const params: AppBskyFeedGetPostThread.Params = { 30 | uri: `at://${did}/app.bsky.feed.post/${postCid}`, // Replace with actual AT-URI 31 | depth: 6, // Optional: how deep to fetch replies (default is 6) 32 | }; 33 | const searchParams = new URLSearchParams(); 34 | searchParams.append("uri", params.uri); 35 | if (params.depth !== undefined) { 36 | searchParams.append("depth", params.depth.toString()); 37 | } 38 | if (params.parentHeight !== undefined) { 39 | searchParams.append("parentHeight", params.parentHeight.toString()); 40 | } 41 | fetch( 42 | "https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?" + 43 | searchParams, 44 | ) 45 | .then((res) => res.json()) 46 | .then((data) => { 47 | console.log(data); 48 | setComments(data); 49 | }); 50 | }, []); 51 | 52 | // if we are loading 53 | if (!comments) { 54 | return ( 55 |

56 | Loading... 57 | 60 |

61 | ); 62 | } 63 | 64 | // if we have error prop? 65 | if (!isThreadView(comments?.thread)) { 66 | return

Error: {(comments as any).error}

; 67 | } 68 | 69 | if (isThreadView(comments.thread)) { 70 | return ( 71 |

72 | {" "} 73 |

74 | ); 75 | } 76 | 77 | return

Comment count:

; 78 | } 79 | -------------------------------------------------------------------------------- /posts/weekly-2025-02-09.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Weekly #2: Week of 2025-02-09" 3 | datePublished: "2025-02-17" 4 | summary: "Slow week, but not a bad week." 5 | isWeekly: true 6 | --- 7 | 8 | ## Hello! 9 | 10 | Welcome to my second 'weekly' post! If you don't already know, this is my series of posts on what I did over the past week. 11 | Most of the 'work' I did was on my project [atp.tools](https://atp.tools), which is a collection of tools for reading and doing ATProto things. 12 | 13 | It was a slower week than usual, so I hope you forgive the shorter post. 14 | 15 | ## Code 16 | 17 | Most of my code was focused on adding new features (including a minigame!) to make [atp.tools](https://atp.tools) that much more fun and engaging. 18 | I don't want to talk about the minigame too much, but I'm really excited for people to find it, try it out, 19 | and hopefully post about it on Bluesky! I'm planning on creating an AppView, and leaderboards, and some social features, such as posting your scores directly to Bluesky. 20 | 21 | I've also started working on integrating the [Constellation](https://github.com/atcosm/links/tree/main/constellation) API into atp.tools. 22 | Right now it's pretty basic, but I have plenty of ideas on how to integrate it more fully into the site. 23 | 24 | A few days ago, there was a post on Bluesky going over CORS and why they don't particularly like it. I saw that, said "glad all of my services have cors enabled" 25 | and immediately checked [Geranium](https://github.com/espeon/geranium). oops. I'm not sure what I was thinking, but I'm glad I checked it out. 26 | Ended up setting up and permanently enabling CORS immediately after. 27 | 28 | ## Music 29 | 30 | Been listening to a lot of [Enter Shikari](https://tidal.com/browse/artist/3581716?u) recently. They're a great band but not known nearly so much as they should be in the US. 31 | Like a Robbie Williams. 32 | 33 | Also, [Atlas Genius](https://tidal.com/browse/artist/4603417?u)! I haven't listened to them since high school before this week or so, but it's nice to hear them again. 34 | 35 | Spiritbox also released a new single, "[No Loss, No Love](https://tidal.com/browse/album/415780330?u)". Sounds like a return to their roots, focusing less on melodic elements and more on raw intensity and Courtney's screams. 36 | She does a lot of screaming here, definitely more like [their self titled](https://tidal.com/browse/album/168954033?u) versus [The Fear of Fear](https://tidal.com/browse/album/323766599?u). 37 | 38 | Kyle Gordon also released a new track, "[We Will Never Die](https://tidal.com/browse/track/416327772?u)"! It's legitimately a good song (if you consider it's a parody) in the vein of early Vance Joy, Fun, The Lumineers and other millennial pop-folk stuff. 39 | 40 | ## Yeah. 41 | 42 | That should be it. Glad I released this post in time. I definitely enjoyed writing this, and I'm looking forward to the next one. See you all in a week! 43 | 44 | ## Comments 45 | 46 | Thoughts? Questions? Feedback? Let me know [on Bluesky](https://bsky.app/profile/natalie.sh/post/3liebm4lgoc2g)! 47 | 48 | -------------------------------------------------------------------------------- /components/mdx.tsx: -------------------------------------------------------------------------------- 1 | import { useMDXComponent } from "next-contentlayer2/hooks"; 2 | import Link from "next/link"; 3 | import Comments from "./comments/Comments"; 4 | 5 | /// pretty img wrapper with rounded edges and an optional caption 6 | export function PrettyImage({ 7 | src, 8 | alt, 9 | caption, 10 | round, 11 | height, 12 | width, 13 | className, 14 | noShadow, 15 | }: { 16 | src: string; 17 | alt: string; 18 | caption?: string; 19 | round?: boolean; 20 | noShadow?: boolean; 21 | height?: string; 22 | width?: string; 23 | className?: string; 24 | }) { 25 | return ( 26 |

50 | ); 51 | } 52 | 53 | // an embed card, similar to discord's oembed cards 54 | export function EmbedCard({ 55 | url, 56 | title, 57 | description, 58 | thumbnail, 59 | noShadow, 60 | }: { 61 | url: string; 62 | title: string; 63 | description: string; 64 | thumbnail?: string; 65 | noShadow?: boolean; 66 | }) { 67 | return ( 68 |

69 |

70 | {thumbnail != undefined ? ( 71 |

72 | 78 |

79 | ) : ( 80 | "" 81 | )} 82 | 83 |

84 | {title} 85 |

86 | 87 |

{description}

88 |

89 |

90 | ); 91 | } 92 | 93 | const components = { 94 | Image: PrettyImage, 95 | Card: EmbedCard, 96 | Comments, 97 | }; 98 | 99 | export default function MDX({ code }: { code: string }) { 100 | const MDXContent = useMDXComponent(code); 101 | return ( 102 |

103 | 104 |

105 | ); 106 | } 107 | -------------------------------------------------------------------------------- /app/posts/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import { use } from "react"; 2 | // app/posts/[slug]/page.tsx 3 | import Header from "@/components/header"; 4 | import { allPosts } from "contentlayer/generated"; 5 | import { format, parseISO } from "date-fns"; 6 | import { useMDXComponent } from "next-contentlayer2/hooks"; 7 | import { notFound } from "next/navigation"; 8 | import MDX from "@/components/mdx"; 9 | import TimeAgo from "@/components/timeago"; 10 | import { PiEyeClosed, PiWarning } from "react-icons/pi"; 11 | import { NotPublicHover } from "@/components/notPublicHover"; 12 | 13 | import "../../page.module.css"; 14 | 15 | export async function generateStaticParams() { 16 | return allPosts.map((post) => ({ slug: post._raw.flattenedPath })); 17 | } 18 | 19 | export async function generateMetadata({ params }) { 20 | const p = await params; 21 | const post = allPosts.find((post) => { 22 | return post._raw.flattenedPath === p.slug; 23 | }); 24 | if (!post) { 25 | return; 26 | } 27 | 28 | const { title, datePublished, summary: description } = post; 29 | return { 30 | title, 31 | description, 32 | openGraph: { 33 | title, 34 | description, 35 | type: "article", 36 | publishedTime: datePublished, 37 | url: `blog.natalie.sh/posts/${post._raw.flattenedPath}`, 38 | images: [ 39 | { 40 | url: `https://ogimage-workers.kanbaru.workers.dev/?title=${encodeURIComponent(title)}&liner=${encodeURIComponent(description)}&date=${format(parseISO(post.datePublished), "MMM. dd, yyyy")}`, 41 | width: 1200, 42 | height: 630, 43 | }, 44 | ], 45 | }, 46 | }; 47 | } 48 | 49 | export default function Page(props: { params: Promise<{ slug: string }> }) { 50 | const params = use(props.params); 51 | // Find the post for the current page. 52 | const post = allPosts.find((post) => { 53 | console.log(post._raw.flattenedPath); 54 | return post._raw.flattenedPath === params.slug; 55 | }); 56 | 57 | // 404 if the post does not exist. 58 | if (!post) notFound(); 59 | 60 | // Parse the MDX file via the useMDXComponent hook. 61 | const MDXContent = useMDXComponent(post.body.code); 62 | return ( 63 |

64 |

65 | {post.public ? "" : } 66 | {post.title} 67 |

68 | {post.coAuthors && ( 69 |

70 | With {post.coAuthors.join(", ")} 71 |

72 | )} 73 |

74 | {format(parseISO(post.datePublished), "MMM. dd, yyyy")} 75 | 76 | {" "} 77 | - 78 | 79 |

80 | {post.lastUpdated && ( 81 | <> 82 | {" "} 83 | Last updated {format( 84 | parseISO(post.lastUpdated), 85 | "MMM. dd, yyyy", 86 | )}{" "} 87 | - . 88 | 89 | )} 90 |

91 |

92 | 93 |

94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /components/profileCard.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { PrettyImage } from "./mdx"; 3 | import Card from "./ui/card"; 4 | import { FaGithub, FaLinkedin, FaLastfm, FaDiscord } from "react-icons/fa"; 5 | 6 | export default function ProfileCard() { 7 | return ( 8 | 9 |

10 |

11 | 18 |

19 |

20 | Hey, I'm Natalie. 21 |

22 |

23 | Software engineer. Designer. Amateur chef. 24 |
{" "} 25 | 26 | you can write anything here! 27 | 28 |

29 |

30 | inquiries? shoot me an email at nat @ natalie dot sh 31 |

32 |

33 | 34 | 35 | 36 | 40 | 41 | 42 | 43 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |

63 |

64 | 65 | ); 66 | } 67 | -------------------------------------------------------------------------------- /components/shader/noise.glsl: -------------------------------------------------------------------------------- 1 | // 2 | // Description : Array and textureless GLSL 2D/3D/4D simplex 3 | // noise functions. 4 | // Author : Ian McEwan, Ashima Arts. 5 | // Maintainer : stegu 6 | // Lastmod : 20110822 (ijm) 7 | // License : Copyright (C) 2011 Ashima Arts. All rights reserved. 8 | // Distributed under the MIT License. See LICENSE file. 9 | // https://github.com/ashima/webgl-noise 10 | // https://github.com/stegu/webgl-noise 11 | // 12 | vec3 mod289(vec3 x) { 13 | return x - floor(x * (1.0 / 289.0)) * 289.0; 14 | } 15 | 16 | vec4 mod289(vec4 x) { 17 | return x - floor(x * (1.0 / 289.0)) * 289.0; 18 | } 19 | 20 | vec4 permute(vec4 x) { 21 | return mod289(((x * 34.0) + 1.0) * x); 22 | } 23 | 24 | vec4 taylorInvSqrt(vec4 r) 25 | { 26 | return 1.79284291400159 - 0.85373472095314 * r; 27 | } 28 | 29 | float snoise(vec3 v) 30 | { 31 | const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0); 32 | const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); 33 | 34 | // First corner 35 | vec3 i = floor(v + dot(v, C.yyy)); 36 | vec3 x0 = v - i + dot(i, C.xxx); 37 | 38 | // Other corners 39 | vec3 g = step(x0.yzx, x0.xyz); 40 | vec3 l = 1.0 - g; 41 | vec3 i1 = min(g.xyz, l.zxy); 42 | vec3 i2 = max(g.xyz, l.zxy); 43 | 44 | // x0 = x0 - 0.0 + 0.0 * C.xxx; 45 | // x1 = x0 - i1 + 1.0 * C.xxx; 46 | // x2 = x0 - i2 + 2.0 * C.xxx; 47 | // x3 = x0 - 1.0 + 3.0 * C.xxx; 48 | vec3 x1 = x0 - i1 + C.xxx; 49 | vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y 50 | vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y 51 | 52 | // Permutations 53 | i = mod289(i); 54 | vec4 p = permute(permute(permute( 55 | i.z + vec4(0.0, i1.z, i2.z, 1.0)) 56 | + i.y + vec4(0.0, i1.y, i2.y, 1.0)) 57 | + i.x + vec4(0.0, i1.x, i2.x, 1.0)); 58 | 59 | // Gradients: 7x7 points over a square, mapped onto an octahedron. 60 | // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) 61 | float n_ = 0.142857142857; // 1.0/7.0 62 | vec3 ns = n_ * D.wyz - D.xzx; 63 | 64 | vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) 65 | 66 | vec4 x_ = floor(j * ns.z); 67 | vec4 y_ = floor(j - 7.0 * x_); // mod(j,N) 68 | 69 | vec4 x = x_ * ns.x + ns.yyyy; 70 | vec4 y = y_ * ns.x + ns.yyyy; 71 | vec4 h = 1.0 - abs(x) - abs(y); 72 | 73 | vec4 b0 = vec4(x.xy, y.xy); 74 | vec4 b1 = vec4(x.zw, y.zw); 75 | 76 | //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0; 77 | //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0; 78 | vec4 s0 = floor(b0) * 2.0 + 1.0; 79 | vec4 s1 = floor(b1) * 2.0 + 1.0; 80 | vec4 sh = -step(h, vec4(0.0)); 81 | 82 | vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy; 83 | vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww; 84 | 85 | vec3 p0 = vec3(a0.xy, h.x); 86 | vec3 p1 = vec3(a0.zw, h.y); 87 | vec3 p2 = vec3(a1.xy, h.z); 88 | vec3 p3 = vec3(a1.zw, h.w); 89 | 90 | //Normalise gradients 91 | vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3))); 92 | p0 *= norm.x; 93 | p1 *= norm.y; 94 | p2 *= norm.z; 95 | p3 *= norm.w; 96 | 97 | // Mix final noise value 98 | vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0); 99 | m = m * m; 100 | return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), 101 | dot(p2, x2), dot(p3, x3))); 102 | } 103 | -------------------------------------------------------------------------------- /posts/weekly-2025-03-25.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Weekly #2: Week of 2025-03-25" 3 | datePublished: "2025-03-25" 4 | summary: "ATMosphere Conf and more!" 5 | isWeekly: true 6 | --- 7 | 8 | ## Hello! 9 | 10 | I haven't done one of these for a bit (oops). Lots of stuff happening in life and also in my head (bad). Have made some good progress on a lot of stuff though, and had some fun with friends and builders from around the US. 11 | 12 | ## ATMosphere Conf 13 | 14 | As you may know, I went to Seattle this last weekend for the ATmosphere Conf, put on by the unofficial [ATProtocol Community](https://atprotocol.dev/). I had a very fun time meeting online friends IRL, making new friends and learning about the latest developments in the ATProtocol ecosystem. 15 | 16 | One thing really stuck with me from [Rudy's](https://bsky.app/profile/rudyfraser.com), and that was the idea of building for your community and not the wider world. It's easy to get caught up in the hype, excitement, and pressure of making something big, but it's important to remember who you're building for. For example, I'm building teal.fm for the community of music lovers on Bluesky. I'd need to keep focused on features they like and UX that they understand, instead of just putting in random features that won't help or be used at all. 17 | 18 | Sort of related: I fall into the pit sometimes of overdesigning and overengineering things without prior experience or consulting with others, and, at least for me, that ends up being a waste of time and resources. You don't need to design for hyperscale if the only people who will use it are your close friends, and you can't make a slow, huge monolithic postgres-based app if you're doing hyperscale development. 19 | 20 | [Paul's](https://bsky.app/profile/pfrazee.com) talk was really interesting as well. It was about why and how Bluesky was made, and what they thought about when making it. He talked about enshittification and how Bluesky has taken steps to mitigate it, such as viewing themselves as a future adversary and building with that in mind. Plus, prioritizing UX and UI is crucial if you want to build something even people without development experience can use and enjoy. 21 | 22 | ## Teal.fm 23 | 24 | I've done a bit of work on teal.fm over the past few weeks. I've rewrote the jetstream listener in Rust for better performance, scalability, and usability, and released the library it's built on on crates.io. It's called [rocketman](https://crates.io/crates/rocketman) and I hope it will be useful to others. 25 | 26 | I've also been working on the profiles system. It's designed to be separate from Bluesky, including, in the future, the whole social graph. Right now, I have a basic profile page with a 'change user info' modal, API routes to get other profiles, and currently I'm working on profile search. 27 | 28 | Profile search, right now, is built on Trigram similarity in postgresql. Eventually I'll migrate it to a more scalable solution, such as a graph database or using software like meilisearch. 29 | 30 | ## Music 31 | 32 | Right now, I've fallen back into the sad indie folk trap! Have re-found [Medium Build](https://tidal.com/browse/artist/7190362?u) and [Tiny Habits](https://tidal.com/browse/artist/34295024?u). Super comfy music, and I'd recommend both to anyone looking for indie pop/folk music. 33 | 34 | ## Anyways, 35 | 36 | That's all for now! I'll hopefully be back next week with more things to share and talk about. 37 | 38 | ## Comments 39 | 40 | Thoughts? Questions? Feedback? Let me know [on Bluesky](https://bsky.app/profile/natalie.sh/post/3liebm4lgoc2g)! 41 | 42 | -------------------------------------------------------------------------------- /posts/blog.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Making my new Next.js MDX blog" 3 | datePublished: "2023-10-25" 4 | summary: "An overview of how I made my blog in Next.js and MDX" 5 | --- 6 | 7 | I recently decided to make a new blog, after having a dead link on my website for multiple years on end. 8 | 9 | I wanted it to be: 10 | 11 | 1. Fast 12 | 13 | 2. Simple and minimally designed 14 | 15 | 3. Easy to manage, via CMS or other. 16 | 17 | ## 1. Fast 18 | 19 | ### The stack 20 | - NextJS 21 | - MDX 22 | - TailwindCSS 23 | - Contentlayer 24 | 25 | I decided to use Next.js, partially because I'm already familiar with it (due to that, I know it's fast in most situations), and partially because I've heard about MDX in Next.js, which I was curious about. 26 | 27 | I quite like Next.js, as you can tell. 28 | 29 | I also decided to use MDX over a traditional CMS like WordPress or Ghost because 30 | 1. It's self contained, which is a pro versus something hosted elsewhere that can intermittently go down. 31 | 2. I'm fairly comfortable with both Markdown (I use it for all my notes) and JSX (which is used in React). 32 | 33 | ## 2. Simple 34 | 35 | TailwindCSS is the obvious choice here, due to it being a utility-first CSS framework, which means it's easy to make a simple design without having to write a lot of raw CSS. 36 | 37 | CSS is hard and I don't like dealing with it. 38 | 39 | Luckily, to get me writing even fewer styles, Tailwind also has a [typography plugin](https://tailwindcss.com/docs/typography-plugin) which has great looking defaults. All you need to do to use it is to 40 | 41 | ```bash 42 | npm install @tailwindcss/typography 43 | ``` 44 | 45 | and 46 | 47 | ```js title="tailwind.config.js" 48 | module.exports = { 49 | //... 50 | plugins: [ 51 | require('@tailwindcss/typography'), 52 | ], 53 | } 54 | ``` 55 | 56 | and \*tada*: I don't have to write styles for the main body of these blog posts. 57 | 58 | I kept everything else fairly simple and clean, with the other main point of interest being the font, which is [Figtree](https://github.com/erikdkennedy/figtree) by Erik Kennedy. I find it fairly clean and readable - as much as something like Helvetica or Inter. I think it's a good all rounder - works well as a header, title, and body font. 59 | 60 | ## 3. Easy 61 | 62 | I ended up picking MDX for this, as I mentioned earlier, due to its familiarity to me despite me never using it. File routings are also a plus, as I can just make and edit a new file in the 'posts' folder and it'll be a new post. 63 | 64 | Instead of using a posts.json file with all my post metadata in that, I decided to pivot to a frontmatter-based system. I already have it included for SEO reasons, so I might as well use it for other metadata. 65 | Here's the one for this page, actually: 66 | ```md 67 | --- 68 | title: "Making my new Next.js MDX blog" 69 | datePublished: "2024-10-25" 70 | summary: "An overview of how I made my blog in Next.js and MDX" 71 | --- 72 | ``` 73 | 74 | I then use Contentlayer to scan the directory, fetch the data, and return it as a json object. I then render the raw markdown using a helper tool in the Contentlayer library, and pass it to the MDX component to render 75 | like this: 76 | 77 | ```jsx 78 | export default function Page({ params }: { params: { slug: string } }) { 79 | // Find the post for the current page. 80 | const post = allPosts.find((post) => { 81 | console.log(post._raw.flattenedPath); 82 | return post._raw.flattenedPath === params.slug; 83 | }); 84 | // ... 85 | return ( 86 |

87 | {/*...*/} 88 | 89 |

90 | ); 91 | } 92 | ``` 93 | I've got a few components as well that I use when rendering to make things like photos look nice. 94 | 95 | ## Conclusion 96 | It was quite fun making this, and it only took me like two days! Most of the issues was working out MDX issues and certain packages (like `remark-gfm`) having compat issues with Contentlayer. 97 | -------------------------------------------------------------------------------- /app/blog/page.tsx: -------------------------------------------------------------------------------- 1 | // app/page.tsx 2 | import Link from "next/link"; 3 | import { compareDesc, format, parseISO } from "date-fns"; 4 | import { allPosts, Post } from "contentlayer/generated"; 5 | import TimeAgo from "@/components/timeago"; 6 | 7 | const REASONABLE_LENGTH = 160; 8 | 9 | function PostCard(post: Post) { 10 | // get first paragraph of post from MDX 11 | // we use raw, which is separated by \n 12 | let split = post.body.raw.split("\n"); 13 | 14 | // go through each line <= reasonable length and add it to firstParagraph 15 | let firstParagraph = ""; 16 | for (let i = 0; i < split.length; i++) { 17 | firstParagraph += " " + split[i]; 18 | if (split[i].length > REASONABLE_LENGTH) break; 19 | } 20 | // strip all html tags from first paragraph 21 | firstParagraph = firstParagraph.replace(/<[^>]*>?/gm, ""); 22 | 23 | // strip all markdown formatting from string including links 24 | firstParagraph = firstParagraph.replace(/[#/\[\]*>]/g, ""); 25 | firstParagraph = firstParagraph.replace(/$.*?$/g, ""); 26 | // if longer than reasonable length, then truncate and add ellipsis 27 | if (firstParagraph.length > REASONABLE_LENGTH) { 28 | firstParagraph = firstParagraph.substring(0, REASONABLE_LENGTH) + "..."; 29 | // if ends with a space or comma or other punctuation, remove it 30 | if ( 31 | firstParagraph.endsWith(" ...") || 32 | firstParagraph.endsWith(",...") || 33 | firstParagraph.endsWith("....") 34 | ) { 35 | firstParagraph = 36 | firstParagraph.substring(0, firstParagraph.length - 4) + "..."; 37 | } 38 | } 39 | 40 | return ( 41 |

42 |

43 | 47 | {post.title} 48 | 49 |

50 |

51 | {format(parseISO(post.datePublished), "MMM. dd, yyyy")}{" "} 52 | 53 | 54 | 55 | 56 | {post.lastUpdated && ( 57 | <> 58 | {" • "} 59 | Last updated {format( 60 | parseISO(post.lastUpdated), 61 | "MMM. dd, yyyy", 62 | )}{" "} 63 | - . 64 | 65 | )} 66 | 67 |

68 |

{post.summary}

69 |

70 | {firstParagraph} 71 |

72 |

73 | ); 74 | } 75 | 76 | export default function Home() { 77 | // filter out weeklies and non-public posts 78 | const posts = allPosts 79 | .filter((post) => post.public) 80 | .filter((p) => !p.isWeekly) 81 | .sort((a, b) => 82 | compareDesc(new Date(a.datePublished), new Date(b.datePublished)), 83 | ); 84 | 85 | return ( 86 |

87 |

88 | 92 | Main 93 | 94 | 98 | Weeklies 99 | 100 |

101 |

102 | {posts.map((post, idx) => ( 103 | 104 | ))} 105 |

106 |

107 | ); 108 | } 109 | -------------------------------------------------------------------------------- /components/shader/fragment.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 v_color; 2 | 3 | vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } 4 | 5 | float snoise2(vec2 v){ 6 | const vec4 C = vec4(0.211324865405187, 0.366025403784439, 7 | -0.577350269189626, 0.024390243902439); 8 | vec2 i = floor(v + dot(v, C.yy) ); 9 | vec2 x0 = v - i + dot(i, C.xx); 10 | vec2 i1; 11 | i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); 12 | vec4 x12 = x0.xyxy + C.xxzz; 13 | x12.xy -= i1; 14 | i = mod(i, 289.0); 15 | vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) 16 | + i.x + vec3(0.0, i1.x, 1.0 )); 17 | vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), 18 | dot(x12.zw,x12.zw)), 0.0); 19 | m = m*m ; 20 | m = m*m ; 21 | vec3 x = 2.0 * fract(p * C.www) - 1.0; 22 | vec3 h = abs(x) - 0.5; 23 | vec3 ox = floor(x + 0.5); 24 | vec3 a0 = x - ox; 25 | m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); 26 | vec3 g; 27 | g.x = a0.x * x0.x + h.x * x0.y; 28 | g.yz = a0.yz * x12.xz + h.yz * x12.yw; 29 | return 130.0 * dot(m, g); 30 | } 31 | 32 | float luma(vec3 color) { 33 | return dot(color, vec3(0.299, 0.587, 0.114)); 34 | } 35 | 36 | float luma(vec4 color) { 37 | return dot(color.rgb, vec3(0.299, 0.587, 0.114)); 38 | } 39 | 40 | 41 | float dither2x2(vec2 position, float brightness) { 42 | int x = int(mod(position.x, 2.0)); 43 | int y = int(mod(position.y, 2.0)); 44 | int index = x + y * 2; 45 | float limit = 0.0; 46 | 47 | if (x < 8) { 48 | if (index == 0) limit = 0.25; 49 | if (index == 1) limit = 0.75; 50 | if (index == 2) limit = 1.00; 51 | if (index == 3) limit = 0.50; 52 | } 53 | 54 | return brightness < limit ? 0.0 : 1.0; 55 | } 56 | 57 | vec3 dither2x2(vec2 position, vec3 color) { 58 | return color * dither2x2(position, luma(color)); 59 | } 60 | 61 | vec4 dither2x2(vec2 position, vec4 color) { 62 | return vec4(color.rgb * dither2x2(position, luma(color)), 1.0); 63 | } 64 | 65 | float perlinNoise(vec2 st) { 66 | return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123); 67 | } 68 | 69 | float fBm(vec2 st) { 70 | float value = 0.0; 71 | float amplitude = 0.5; 72 | for (int i = 0; i < 2; i++) { // Adjust the number of octaves as needed 73 | value += amplitude * perlinNoise(st); 74 | st *= 2.0; 75 | amplitude *= 0.5; 76 | } 77 | return value; 78 | } 79 | 80 | // clampOpp 81 | // Clamps a value if it is outside the specified range. 82 | // If the value is within the range, it returns a specified value. 83 | float clampOpp(float value, float min, float max, float val) { 84 | // If the float is in bounds, inBounds will be 0 85 | float inBounds = step(min, value) - step(value, max); 86 | return mix(val, value, inBounds); 87 | } 88 | 89 | void main() { 90 | vec3 color = v_color; 91 | vec2 st = gl_FragCoord.xy / resolution.xy; 92 | 93 | float lightness = color.r + color.g + color.b / 3.; 94 | 95 | // Darken effect 96 | if (u_darken_top == 1.0) { 97 | color.g -= pow(st.y + sin(-12.0) * st.x, u_shadow_power) * 0.4; 98 | } 99 | 100 | // Apply simplex noise overlay 101 | // Only changes the noise seed if lightness has changed 102 | 103 | float noise2 = fBm(st * 10.0 + clampOpp(lightness, 0.15, 1.7, 0.0)); 104 | color *= (max(0.9, 1.0 - lightness) + noise2 * max(0.1, 1.0 - lightness)); 105 | 106 | // // Apply simplex noise overlay to a separate color 107 | // float noise = fBm(st * 100.0 + max(0.9, 1. - lightness)); 108 | // vec3 nc = color * (1.0 + noise * 0.3); // Combine noise with color 109 | 110 | // // Apply dithering to the modified color 111 | // vec3 dc = (dither(gl_FragCoord.xy, nc)); 112 | 113 | // float threshold = .2; // Adjust this value to reduce darkness 114 | // dc = mix(dc, vec3(1.0), step(threshold, dc.r + dc.g + dc.b / 3.)); 115 | 116 | // // Blend the dithered color with the original color 117 | // float di = 0.075; // Adjust this value for how much darker the dithered areas should be 118 | // color = mix(color, dc, 0.1); 119 | 120 | gl_FragColor = vec4(color, 1.0); 121 | } 122 | -------------------------------------------------------------------------------- /components/scrollingText.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import clsx from "clsx"; 3 | import React, { CSSProperties, useEffect, useRef, useState } from "react"; 4 | 5 | interface ScrollingTextProps { 6 | /// Any other class names you need to put inside this component 7 | className?: string; 8 | /// The text (or component) to put inside. It should be inline. 9 | text?: React.ReactNode; 10 | /// Width on either side to fade in px, if the text wraps around 11 | fadeWidth?: number; 12 | } 13 | 14 | export function ScrollingText({ 15 | text, 16 | className = "", 17 | fadeWidth = 8, 18 | ...props 19 | }: ScrollingTextProps) { 20 | const containerRef = useRef(null); 21 | const textRef = useRef(null); 22 | const dupeTextRef = useRef(null); 23 | const dividerRef = useRef(null); 24 | const [isOverflowing, setIsOverflowing] = useState(false); 25 | const [animationDuration, setAnimationDuration] = useState(0); 26 | const [textWidth, setTextWidth] = useState(0); 27 | const [dividerWidth, setDividerWidth] = useState(0); 28 | const [containerWidth, setContainerWidth] = useState(0); 29 | 30 | const calculateOverflow = () => { 31 | const container = containerRef.current; 32 | const textElement = textRef.current; 33 | const dupe = dupeTextRef.current; 34 | 35 | if (container && textElement) { 36 | let isTextOverflowing: boolean | ((prevState: boolean) => boolean); 37 | let len: React.SetStateAction; 38 | 39 | if (dupe !== null) { 40 | isTextOverflowing = textElement.scrollWidth / 2 > container.offsetWidth; 41 | len = textElement.scrollWidth / 2; 42 | } else { 43 | isTextOverflowing = textElement.scrollWidth > container.offsetWidth; 44 | len = textElement.scrollWidth; 45 | } 46 | 47 | setIsOverflowing(isTextOverflowing); 48 | 49 | if (isTextOverflowing) { 50 | setContainerWidth(container.offsetWidth); 51 | setDividerWidth(dividerRef.current?.offsetWidth ?? 0); 52 | const duration = len / 60; // Adjust speed here 53 | setAnimationDuration(duration); 54 | setTextWidth(len); 55 | } 56 | } 57 | }; 58 | 59 | useEffect(() => { 60 | calculateOverflow(); 61 | }, [text]); 62 | 63 | useEffect(() => { 64 | window.addEventListener("resize", calculateOverflow); 65 | return () => window.removeEventListener("resize", calculateOverflow); 66 | }, []); 67 | 68 | return ( 69 |

85 |

101 | {text} 102 | {isOverflowing && ( 103 | <> 104 |

105 | ・ 106 |

107 | {text} 108 | 109 | )} 110 |

111 |

112 | ); 113 | } 114 | -------------------------------------------------------------------------------- /app/blog/weeklies/page.tsx: -------------------------------------------------------------------------------- 1 | // app/page.tsx 2 | import Link from "next/link"; 3 | import { compareDesc, format, parseISO } from "date-fns"; 4 | import { allPosts, Post } from "contentlayer/generated"; 5 | import TimeAgo from "@/components/timeago"; 6 | 7 | const REASONABLE_LENGTH = 160; 8 | 9 | function PostCard(post: Post) { 10 | // get first paragraph of post from MDX 11 | // we use raw, which is separated by \n 12 | let split = post.body.raw.split("\n"); 13 | 14 | // go through each line <= reasonable length and add it to firstParagraph 15 | let firstParagraph = ""; 16 | for (let i = 0; i < split.length; i++) { 17 | firstParagraph += " " + split[i]; 18 | if (split[i].length > REASONABLE_LENGTH) break; 19 | } 20 | // strip all html tags from first paragraph 21 | firstParagraph = firstParagraph.replace(/<[^>]*>?/gm, ""); 22 | 23 | // strip all markdown formatting from string including links 24 | firstParagraph = firstParagraph.replace(/[#/\[\]*>]/g, ""); 25 | firstParagraph = firstParagraph.replace(/$.*?$/g, ""); 26 | // if longer than reasonable length, then truncate and add ellipsis 27 | if (firstParagraph.length > REASONABLE_LENGTH) { 28 | firstParagraph = firstParagraph.substring(0, REASONABLE_LENGTH) + "..."; 29 | // if ends with a space or comma or other punctuation, remove it 30 | if ( 31 | firstParagraph.endsWith(" ...") || 32 | firstParagraph.endsWith(",...") || 33 | firstParagraph.endsWith("....") 34 | ) { 35 | firstParagraph = 36 | firstParagraph.substring(0, firstParagraph.length - 4) + "..."; 37 | } 38 | } 39 | 40 | return ( 41 |

42 |

43 | 47 | {post.title} 48 | 49 |

50 |

51 | {format(parseISO(post.datePublished), "MMM. dd, yyyy")}{" "} 52 | 53 | 54 | 55 | 56 | {post.lastUpdated && post.isWeekly && ( 57 | <> 58 | {" • "} 59 | Last updated {format( 60 | parseISO(post.lastUpdated), 61 | "MMM. dd, yyyy", 62 | )}{" "} 63 | - . 64 | 65 | )} 66 | 67 |

68 |

{post.summary}

69 |

70 | {firstParagraph} 71 |

72 |

73 | ); 74 | } 75 | 76 | export default function Home() { 77 | // filter out non-public posts and non-weeklies 78 | const posts = allPosts 79 | .filter((post) => post.public) 80 | .filter((p) => p.isWeekly) 81 | .sort((a, b) => 82 | compareDesc(new Date(a.datePublished), new Date(b.datePublished)), 83 | ); 84 | 85 | return ( 86 |

87 |

88 |

89 | 93 | Main 94 | 95 | 99 | Weeklies 100 | 101 |

102 |

Weeklies

103 |

104 | 105 | Weeknote 106 | 107 | -style posts, every week-ish. 108 |
109 | An effort to cultivate a habit of regular writing and reflection via 110 | journaling. 111 |
112 | Nothing too serious. 113 |

114 |

115 |

116 | {posts.map((post, idx) => ( 117 | 118 | ))} 119 |

120 |

121 | ); 122 | } 123 | -------------------------------------------------------------------------------- /posts/godot-vsc.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Godot and VSCode: How to integrate them together" 3 | datePublished: "2024-03-12" 4 | lastUpdated: "2024-08-13" 5 | summary: "Supercharge your game dev workflow by using VSCode instead of Godot's text editor." 6 | --- 7 | 8 | When I was beginning with Godot, it was fairly daunting. Especially the text editor. 9 | It didn't come with a lot of specific features I expect on modern text editors (pseudo IDEs at this point, let's be serious lol). 10 | After some time struggling with its internal editor, I finally decided to research ways to use VSCode instead. 11 | 12 | Mainly because I love Intellisense. It's the best. 13 | 14 | Anyways. 15 | 16 | This is the result of my research. 17 | 18 | ### What? 19 | There are a few steps. 20 | 1. Install Godot, and have it in your path 21 | 2. Install VSCode and the godot-tools plugin 22 | 3. Configure the plugin 23 | 24 | Easy, right? Let’s dive deeper into it, just in case. 25 | 26 | ### Installing Godot 27 | This step is really important. You need to install Godot to use it, and you want to have it **in your path** to be able to use godot-tools easily. 28 | 29 | On MacOS: 30 | 31 | ```sh 32 | brew install godot # or godot-mono 33 | ``` 34 | 35 | On Windows, if you have Scoop 36 | 37 | ```sh 38 | # if you don't have git installed 39 | scoop install git 40 | # add the extras bucket, where godot is 41 | scoop bucket add extras 42 | # finally, install godot 43 | scoop install godot # or godot-mono 44 | ``` 45 | 46 | Either way, if you can run `godot --help` afterwards, you're good to go. 47 | 48 | You’ll want to set these options in your Editor settings at 49 | Text Editor > External 50 | 51 | Exec Path: Your VSCode executable - on MacOS it’s probably `/Applications/Visual Studio Code.app/Contents/MacOS/Electron` 52 | 53 | Exec Flags: `{project} --goto {file}:{line}:{col}` 54 | 55 | 56 | ### Installing VSCode 57 | You probably have it, but if you don’t this should help: https://code.visualstudio.com 58 | 59 | The plugin you’ll need is godot-tools, found here: https://marketplace.visualstudio.com/items?itemName=geequlim.godot-tools 60 | 61 | It should auto-detect your Godot install given you have it in your path, and when you click on an item in Godot, it should automatically open your project and file in VSCode. 62 | 63 | ### Configuring godot-tools 64 | You probably don’t need to. Though, if you didn’t follow step 1, you will need to change your editor path - it will prompt you in the bottom right corner. 65 | 66 | ### Configuring VSCode 67 | This is optional, but I find having a launch.json in your game dir to be useful, in case you need to launch your game from VSCode. 68 | 69 | In your `.vscode/launch.json` (make it if it's not there) add: 70 | 71 | ```json title=".vscode/launch.json" 72 | { 73 | "version": "2.0.0", 74 | "configurations": [ 75 | { 76 | "name": "Launch", 77 | "type": "godot", 78 | "request": "launch", 79 | "project": "${workspaceRoot}", 80 | "scene": "main", 81 | }, 82 | { 83 | "name": "Launch Current Scene", 84 | "type": "godot", 85 | "request": "launch", 86 | "scene": "current" 87 | } 88 | ] 89 | } 90 | ``` 91 | 92 | Note that the Launch Current Scene will launch the current scene *based on what file you're currently in*. So, if you have a `text.gd` file or whatever and it's connected to a `text.tscn` scene, it will launch the scene. 93 | 94 | ## After 95 | You’ll have intellisense, syntax highlighting, and more in VSCode. You can optionally use AI based tools like GitHub Copilot, and other VSCode extensions with your code without weird workarounds. 96 | 97 | #### Sources 98 | I got a large portion of this from [this reddit post by u/Elohssa](https://www.reddit.com/r/godot/comments/16ve6y3/how_to_get_vscode_working_nicely_with_godot_and/) and [this blog post by Morris Morrison](https://morrismorrison.blog/enhancing-your-workflow-setting-up-visual-studio-code-with-godot-and-net). 99 | Also, the [godot-tools github repo](https://github.com/godotengine/godot-vscode-plugin#godot-tools) helped a lot. 100 | 101 | 102 | ## Errata 103 | 104 | - **2024-08-13**: Verified and edited Windows instructions to install the 'extras' bucket, and added a note about git. 105 | 106 | - If you have any questions or concerns, please feel free to [open an issue](https://github.com/espeon/blog/issues/new/). If you just want to say hi, you can find me on my [Discord server](https://nat.vg/discord). 107 | -------------------------------------------------------------------------------- /components/comments/BlueskyEmbed.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { 3 | AppBskyEmbedRecord, 4 | AppBskyFeedPost, 5 | AppBskyEmbedExternal, 6 | Brand, 7 | AppBskyEmbedImages, 8 | } from "@atcute/client/lexicons"; 9 | import { LuX } from "react-icons/lu"; 10 | 11 | type BlueskyPost = AppBskyFeedPost.Record; 12 | type BlueskyExternalEmbed = Brand.Union; 13 | 14 | // type that has a $type field 15 | type Records = { $type: string }; 16 | 17 | const BlueskyEmbed = ({ 18 | embed, 19 | did, 20 | }: { 21 | embed: BlueskyPost["embed"]; 22 | did: string; 23 | }) => { 24 | return ( 25 |

26 | {embed.$type === "app.bsky.embed.external" ? ( 27 |

28 | {embed.external.thumb && ( 29 |

38 | )} 39 |

{embed.external.title}

40 |

{embed.external.description}

41 |

42 | ) : embed.$type === "app.bsky.embed.images" ? ( 43 |

44 | 45 |

46 | ) : ( 47 |

48 | This embed type ({embed.$type}) is not yet implemented. 49 |

50 | )} 51 |

52 | ); 53 | }; 54 | 55 | export default BlueskyEmbed; 56 | 57 | const getBlueskyCdnLink = (did: string, cid: string, ext: string) => { 58 | return `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${cid}@${ext}`; 59 | }; 60 | 61 | const MultiImageLayout = ({ 62 | did, 63 | images, 64 | }: { 65 | did: string; 66 | images: AppBskyEmbedImages.Image[]; 67 | }) => { 68 | const [selectedImage, setSelectedImage] = useState(null); 69 | const imageCount = images.length; 70 | 71 | // Different grid layouts based on number of images 72 | const gridClassName = 73 | { 74 | 1: "grid-cols-1", 75 | 2: "grid-cols-2", 76 | 3: "grid-cols-2", 77 | 4: "grid-cols-2", 78 | }[Math.min(imageCount, 4)] || "grid-cols-2"; 79 | 80 | return ( 81 | <> 82 |

83 | {images.map((image, i) => ( 84 |

setSelectedImage(i)} 90 | > 91 |

100 |

101 | ))} 102 |

103 | 104 | {selectedImage !== null && ( 105 | <> 106 | {/* Image Preview */} 107 |

setSelectedImage(null)} 110 | > 111 |

119 | {images[selectedImage].alt && ( 120 |

121 | Alt text: {images[selectedImage].alt} 122 |

123 | )} 124 |

125 |

126 | 132 |

133 | 134 | )} 135 | 136 | ); 137 | }; 138 | -------------------------------------------------------------------------------- /components/shader/gradient.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useRef, useEffect, useState, useMemo, Suspense } from "react"; 3 | import { useTheme } from "next-themes"; // or whatever theme solution you're using 4 | import { Gradient } from "./wave"; 5 | 6 | const COLORS = { 7 | light: [0xf0abfc, 0xc084fc, 0xa5b4fc, 0x22d3ee], 8 | dark: [0x4a044e, 0x3b0764, 0x1e1b4b, 0x020617], 9 | }; 10 | 11 | const COLORS_HEX = { 12 | light: ["#f0abfc", "#c084fc", "#a5b4fc", "#22d3ee"], 13 | dark: ["#4a044e", "#3b0764", "#1e1b4b", "#020617"], 14 | }; 15 | 16 | type ColorScheme = { 17 | light: T; 18 | dark: T; 19 | }; 20 | 21 | export function triggerOnIdle(callback: any) { 22 | if (window && "requestIdleCallback" in window) { 23 | return requestIdleCallback(callback); 24 | } 25 | return setTimeout(() => callback(), 1); 26 | } 27 | 28 | const GradientReact = () => { 29 | const canvasRef = useRef(null); 30 | const overlayRef = useRef(null); 31 | const gradientRef = useRef(null); 32 | const { theme } = useTheme(); // Get the current theme 33 | 34 | const colors = useMemo(() => COLORS, []); 35 | 36 | const getColors = ( 37 | theme: "light" | "dark" | "system" | string = "system", 38 | col: ColorScheme = COLORS as ColorScheme, 39 | ): T => { 40 | let targetColors: T; 41 | 42 | if (theme === "system") { 43 | //console.log("Theme is system!"); 44 | const systemTheme = window.matchMedia("(prefers-color-scheme: dark)"); 45 | targetColors = systemTheme.matches ? col.dark : col.light; 46 | } else { 47 | targetColors = theme === "dark" ? col.dark : col.light; 48 | //console.log("Setting colors to", theme === "dark" ? "dark" : "light"); 49 | } 50 | 51 | return targetColors; 52 | }; 53 | 54 | const [isInitialized, setIsInitialized] = useState(false); 55 | const initColors = getColors(theme, COLORS_HEX); 56 | 57 | useEffect(() => { 58 | if (canvasRef.current && overlayRef.current && !isInitialized) { 59 | const initGradient = async () => { 60 | // initialise the gradient 61 | const gradient: any = new Gradient(); 62 | await gradient.initGradient("#gradient-canvas"); 63 | gradient.amp = 360; 64 | 65 | gradientRef.current = gradient; 66 | // we are done! 67 | setIsInitialized(true); 68 | 69 | // Fade out the black overlay 70 | if (overlayRef.current) { 71 | overlayRef.current.style.opacity = "0"; 72 | setTimeout(() => { 73 | if (overlayRef.current) { 74 | overlayRef.current.style.display = "none"; 75 | } 76 | }, 1000); 77 | } 78 | }; 79 | 80 | triggerOnIdle(initGradient); 81 | } 82 | }, [isInitialized]); 83 | 84 | useEffect(() => { 85 | if (isInitialized && gradientRef.current) { 86 | const gradient = gradientRef.current; 87 | // check if theme is system, if so, use system theme 88 | let targetColors: number[] = getColors(theme); 89 | // if we have colors then set them 90 | if (gradient?.sectionColors?.length > 0) { 91 | targetColors.forEach((targetColor, index) => { 92 | const [r, g, b] = [ 93 | ((targetColor >> 16) & 255) / 255, 94 | ((targetColor >> 8) & 255) / 255, 95 | (targetColor & 255) / 255, 96 | ]; 97 | gradient.sectionColors[index] = [r, g, b]; 98 | }); 99 | // set the base color 100 | gradient.uniforms.u_baseColor.value = gradient.sectionColors[0]; 101 | // set the wave colors (offset by 1 to skip the base color) 102 | gradient.uniforms.u_waveLayers.value.forEach((layer, index) => { 103 | layer.value.color.value = 104 | gradient.sectionColors[index + 1] || gradient.sectionColors[index]; 105 | }); 106 | } 107 | } 108 | }, [theme, isInitialized, colors]); 109 | 110 | return ( 111 | <> 112 |

116 |

{children}

Guestbook

65 | {post.public ? "" : } 66 | {post.title} 67 |

43 | 47 | {post.title} 48 | 49 |

43 | 47 | {post.title} 48 | 49 |

Weeklies

{embed.external.title}

/uses

Editor + Terminal

Desktop Apps

Desk Setup

Computer

Linux

Audio