personal website

add astro-og

+5 -2
astro.config.mjs
··· 7 7 8 8 import netlify from "@astrojs/netlify"; 9 9 10 + import og from "astro-og"; 11 + 10 12 // https://astro.build/config 11 13 export default defineConfig({ 12 - integrations: [svelte(), mdx(), icon()], 14 + integrations: [svelte(), mdx(), icon(), og()], 13 15 output: "static", 14 16 adapter: netlify(), 15 17 vite: { 16 18 plugins: [tailwindcss()], 17 - } 19 + }, 20 + site: "https://zeu.dev" 18 21 });
bun.lockb

This is a binary file and will not be displayed.

+1
package.json
··· 19 19 "@tailwindcss/vite": "^4.1.17", 20 20 "astro": "5.16.4", 21 21 "astro-icon": "^1.1.5", 22 + "astro-og": "^0.3.1", 22 23 "bits-ui": "^2.14.4", 23 24 "svelte": "^5.45.5", 24 25 "tailwindcss": "^4.1.17",
+16 -16
src/components/NavigationDialog.svelte
··· 12 12 class="bg-neutral-800 fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none sm:max-w-[490px] md:w-full" 13 13 > 14 14 <nav id="navigation" class="flex flex-col gap-4 w-full md:col-span-1"> 15 - 16 15 <section class="flex flex-col gap-2 text-white"> 17 - <h3 class="text-yellow-500">socials</h3> 18 - <a href="https://bsky.app/profile/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🦋_']">bluesky</a> 19 - <a href="https://github.com/zeucapua" target="_blank" class="after:content-['_↗'] before:content-['💻_']">github</a> 20 - <a href="https://tangled.sh/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🧶_']">tangled</a> 21 - <a href="https://twitch.tv/zeu_dev" target="_blank" class="after:content-['_↗'] before:content-['👾_']">twitch</a> 22 - <a href="https://stream.place/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🟪_']">streamplace</a> 16 + <h3 class="text-yellow-500"> 17 + <a href="/blog" class="after:content-['_->'] before:content-['📑_']">blog</a> 18 + </h3> 23 19 </section> 24 20 25 21 <hr class="border-yellow-500 " /> 26 22 27 23 <section class="flex flex-col gap-2 text-white"> 28 24 <h3 class="text-yellow-500"> 29 - <a href="/blog" class="after:content-['_->']">blog</a> 25 + <a href="/resume" class="after:content-['_->'] before:content-['💼_']">resume</a> 26 + </h3> 27 + <h3 class="text-yellow-500"> 28 + <a href="/open-source" class="after:content-['_->'] before:content-['🧮_']">open source</a> 29 + </h3> 30 + <h3 class="text-yellow-500"> 31 + <a href="/as-seen-on" class="after:content-['_->'] before:content-['🎥_']">as seen on</a> 30 32 </h3> 31 33 </section> 32 34 33 35 <hr class="border-yellow-500 " /> 34 36 35 37 <section class="flex flex-col gap-2 text-white"> 36 - <h3 class="text-yellow-500"> 37 - <a href="/resume" class="after:content-['_->']">resume</a> 38 - </h3> 39 - <h3 class="text-yellow-500"> 40 - <a href="/open-source" class="after:content-['_->']">open source</a> 41 - </h3> 42 - <a href="https://app.opensauced.pizza" target="_blank" class="after:content-['_↗']">OpenSauced</a> 43 - <a href="https://easytodo.link" target="_blank" class="after:content-['_↗']">easytodo.link</a> 38 + <h3 class="text-yellow-500">socials</h3> 39 + <a href="https://bsky.app/profile/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🦋_']">bluesky</a> 40 + <a href="https://github.com/zeucapua" target="_blank" class="after:content-['_↗'] before:content-['💻_']">github</a> 41 + <a href="https://tangled.sh/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🧶_']">tangled</a> 42 + <a href="https://twitch.tv/zeu_dev" target="_blank" class="after:content-['_↗'] before:content-['👾_']">twitch</a> 43 + <a href="https://stream.place/zeu.dev" target="_blank" class="after:content-['_↗'] before:content-['🟪_']">streamplace</a> 44 44 </section> 45 45 </nav> 46 46 <Dialog.Close
+10
src/components/SiteLayout.astro
··· 15 15 ></script> 16 16 <meta name="viewport" content="width=device-width" /> 17 17 <meta name="generator" content={Astro.generator} /> 18 + <meta property="og:type" content="website" /> 19 + <meta property="og:url" content="https://www.zeu.dev/" /> 20 + <meta property="og:title" content={title ?? "zeu.dev"} /> 21 + <meta property="og:description" content="Personal site of Zeu, a software engineer." /> 22 + <meta property="twitter:card" content="/site_screenshot.png"> 23 + <meta property="og:image" content="/site_screenshot.png"> 24 + <meta property="og:image:alt" content="zeu in lower case ASCII"> 18 25 <title>{ title }</title> 19 26 </head> 20 27 <body class="relative font-syne bg-neutral-900 text-yellow-500 grid grid-cols-1 md:grid-cols-5 w-full h-full min-w-screen min-h-screen"> ··· 45 52 </h3> 46 53 <h3 class="text-yellow-500"> 47 54 <a href="/open-source" class="after:content-['_->'] before:content-['🧮_']">open source</a> 55 + </h3> 56 + <h3 class="text-yellow-500"> 57 + <a href="/as-seen-on" class="after:content-['_->'] before:content-['🎥_']">as seen on</a> 48 58 </h3> 49 59 </section> 50 60
+6 -2
src/content/about/as-seen-on.mdx
··· 5 5 6 6 import { Icon } from "astro-icon/components"; 7 7 8 - ## Web Dev Challenge: Build a multiplayer web app using PartyKit 8 + I've participated in a few community events and video. I stream on [stream.place](https://stream.place/zeu.dev) 9 + and [Twitch](https://twitch.tv/zeu_dev), and post videos sometimes on my [youtube channel](https://www.youtube.com/@zeucapua851). 10 + 11 + ## Web Dev Challenge: Build a multiplayer web app using PartyKit [<Icon name="tabler:brand-youtube" class="inline-block" />](https://youtu.be/DbaBeLDU-oY?si=Y074Vjt9-7BX2NnI) 12 + 9 13 - 24k+ views on YouTube 10 14 - 18 stars on the typer99 GitHub repository 11 15 - Built a type racing game with powerups and obstacles, implementing PartyKit into a SvelteKit application 12 16 - Participated alongside Jason Lengstorf (host), Nick Taylor (prev OpenSauced), and Steve Ruiz (tldraw.com) 13 17 14 - ## Web Dev Challenge: What can you build in 4 hours with Google Gemini? [<Icon name="tabler:brand-youtube" class="inline-block" />](https://www.youtube.com/watch?v=pn5Jju4FNG4&t=340s) 18 + ## Web Dev Challenge: What can you build in 4 hours with Google Gemini? [<Icon name="tabler:brand-youtube" class="inline-block" />](https://www.youtube.com/watch?v=pn5Jju4FNG4) 15 19 16 20 - 97k+ views on YouTube 17 21 - 8 stars on the thankadev GitHub repository
-4
src/pages/as-seen-on.astro
··· 13 13 <SiteLayout title="zeu.dev"> 14 14 <main class="flex flex-col gap-4 px-4 py-8 text-white text-lg"> 15 15 <h1 class="text-5xl text-yellow-500 font-bold">As seen on</h1> 16 - <p class="text-yellow-500"> 17 - I've participated in a few community events and video. I stream on [stream.place](https://stream.place/zeu.dev) 18 - and [Twitch](https://twitch.tv/zeu_dev), and post videos sometimes on my [youtube channel](https://www.youtube.com/@zeucapua851). 19 - </p> 20 16 21 17 <span class="prose prose-invert prose-yellow lg:prose-xl prose-headings:text-yellow-500"> 22 18 <Content />
+1 -1
src/pages/blog/[...slug].astro
··· 21 21 const { Content } = await blog.render(); 22 22 --- 23 23 24 - <SiteLayout> 24 + <SiteLayout title={blog.data.title}> 25 25 <main class="flex flex-col gap-4 w-full py-8 px-4"> 26 26 <article class="prose prose-invert w-full max-w-6xl prose-code:text-purple-400"> 27 27 <h1 class="text-yellow-500">{blog.data.title}</h1>