feat: social link config

bump: drizzle-kit

astro.config.ts

@@ -12,28 +12,22 @@ import remarkUnwrapImages from 'remark-unwrap-images'
 import arraybuffer from 'vite-plugin-arraybuffer'
 import { remarkReadingTime } from './src/lib/remark-reading-time'
 import { expressiveCodeOptions } from './src/site.config'
-import { AstroIntegration } from 'astro'
 
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://mikepayne.me',
 	integrations: [
 		expressiveCode(expressiveCodeOptions),
-		tailwind({
-			applyBaseStyles: false
-		}) as AstroIntegration,
 		sitemap(),
-		pagefind() as AstroIntegration,
-		mdx() as AstroIntegration,
+		pagefind(),
+		mdx(),
 		icon(),
-		react()
+		react(),
+		tailwind({ applyBaseStyles: false })
 	],
 	vite: {
 		// @ts-ignore
-		plugins: [arraybuffer()],
-		build: {
-			minify: false
-		}
+		plugins: [arraybuffer()]
 	},
 	image: {
 		domains: ['webmention.io']

drizzle.config.ts

@@ -7,6 +7,7 @@ if (!process.env.TURSO_DATABASE_URL || !process.env.TURSO_AUTH_TOKEN) {
 export default defineConfig({
 	schema: 'src/schema.ts',
 	driver: 'turso',
+	dialect: 'sqlite',
 	out: './drizzle',
 	dbCredentials: {
 		url: process.env.TURSO_DATABASE_URL,

package.json

@@ -36,11 +36,12 @@
   },
   "devDependencies": {
     "@astrojs/react": "^3.3.2",
-    "@astrojs/ts-plugin": "^1.6.1",
+    "@astrojs/ts-plugin": "^1.7.0",
     "@cloudflare/workers-types": "^4.20240423.0",
     "@dotenvx/dotenvx": "^0.37.1",
     "@iconify-json/fa6-brands": "^1.1.19",
     "@iconify-json/heroicons": "^1.1.21",
+    "@iconify-json/ri": "^1.1.20",
     "@resvg/resvg-wasm": "^2.6.2",
     "@rive-app/canvas-single": "^2.15.5",
     "@silvia-odwyer/photon-node": "^0.3.3",
@@ -52,7 +53,7 @@
     "astro-icon": "^1.1.0",
     "canvas-confetti": "^1.9.3",
     "debug": "^4.3.4",
-    "drizzle-kit": "^0.20.17",
+    "drizzle-kit": "latest",
     "esbuild-runner": "^2.2.2",
     "eslint": "^8.57.0",
     "eslint-plugin-astro": "^1.1.1",
@@ -76,4 +77,4 @@
     "vite-plugin-arraybuffer": "^0.0.7",
     "wrangler": "^3.53.0"
   }
-}
+}

prettier.config.cjs

@@ -1,6 +1,5 @@
 /** @type {import("prettier").Config} */
 module.exports = {
-	// i am just using the standard config, change if you need something else
 	...require('prettier-config-standard'),
 	pluginSearchDirs: [__dirname],
 	plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],

src/components/layout/Footer.astro

@@ -1,7 +1,8 @@
 ---
 import ViewCount from '@/components/ViewCount.astro'
-import { Icon } from 'astro-icon/components'
-import { siteConfig } from '@/site-config'
+import type { SocialItem } from '@/types'
+import { siteConfig, socialLinks } from '@/site-config'
+import SocialLink from './SocialLink.astro'
 
 const { showViewCount = false } = Astro.props
 ---
@@ -20,53 +21,16 @@ const { showViewCount = false } = Astro.props
 			<div class='flex items-center justify-between'>
 				<!-- Social Brands -->
 				<div class='flex items-center gap-x-4'>
-					<!-- Snapchat -->
-					<a
-						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
-						aria-label='Snapchat'
-						href='https://snapchat.com/t/uMm9JFth'
-						target='_blank'
-					>
-						<Icon name='fa6-brands:snapchat' class='size-5 flex-shrink-0' />
-					</a>
-					<!-- Instagram -->
-					<a
-						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
-						aria-label='Instagram'
-						href='https://www.instagram.com/michaelpayne02/'
-						target='_blank'
-					>
-						<Icon name='fa6-brands:instagram' class='size-5 flex-shrink-0' />
-					</a>
-					<!-- GitHub -->
-					<a
-						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
-						aria-label='Github'
-						rel='me'
-						href='https://github.com/michaelpayne02'
-						target='_blank'
-					>
-						<Icon name='fa6-brands:github' class='size-5 flex-shrink-0' />
-					</a>
-					<!-- Linkedin -->
-					<a
-						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
-						aria-label='LinkedIn'
-						target='_blank'
-						href='https://www.linkedin.com/in/michaelpayne02/'
-					>
-						<Icon name='fa6-brands:linkedin' class='size-5 flex-shrink-0' />
-					</a>
-					<!-- Email -->
-					<a
-						class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
-						rel='me'
-						aria-label='Email'
-						target='_blank'
-						href='mailto:michael@payne.cx'
-					>
-						<Icon name='heroicons:envelope' class='size-5 flex-shrink-0' />
-					</a>
+					{
+						socialLinks.map((social: SocialItem) => (
+							<SocialLink
+								href={social.href}
+								label={social.label}
+								icon={social.icon}
+								target={social.target}
+							/>
+						))
+					}
 				</div>
 				<!-- End Social Brands -->
 			</div>

src/components/layout/SocialLink.astro

@@ -0,0 +1,15 @@
+---
+import type { SocialItem } from '@/types'
+const { href, label, icon, target = '_blank' } = Astro.props as SocialItem
+import { Icon } from 'astro-icon/components'
+---
+
+<a
+	class='inline-block text-muted-foreground transition-all hover:text-muted-foreground/75'
+	aria-label={label}
+	rel='me'
+	href={href}
+	target={target}
+>
+	<Icon name={icon} class='size-5 flex-shrink-0' />
+</a>

src/content/project/bags-for-bryan.md

@@ -3,7 +3,7 @@ title: Bags For Bryan Shirts
 description: T-shirt design for DU's Fall 2023 philanthropy event
 publishDate: 13 Oct 2022
 coverImage:
-  src: '@/images/bags-for-bryan.png'
+  src: '@/assets/images/bags-for-bryan.png'
   alt: Bags for Bryan T-shirt design
 tags: ['Illustrator']
 ogImage: bags-for-bryan.png

src/content/project/delta-scoopsilon/index.mdx

@@ -3,7 +3,7 @@ title: Delta Scoopsilon Shirts
 description: T-shirt design for DU's Fall 2023 philanthropy event
 publishDate: 1 August 2023
 coverImage:
-  src: '@/images/delta-scoopsilon.png'
+  src: '@/assets/images/delta-scoopsilon.png'
   alt: Summer Rush 2023
 tags: ['Blender', 'Illustrator', 'Photoshop']
 ogImage: delta-scoopsilon.png

src/content/project/du-donuts.md

@@ -3,7 +3,7 @@ title: DU Donuts Shirts 2023
 description: T-shirt design for DU's spring 2023 philanthropy event
 publishDate: 20 Apr 2023
 coverImage:
-  src: '@/images/du-donuts.png'
+  src: '@/assets/images/du-donuts.png'
   alt: DU Donuts 2023 T-shirt design
 tags: ['Illustrator']
 ogImage: du-donuts.png

src/content/project/du-open.md

@@ -3,7 +3,7 @@ title: DU Open 2024 Shirts
 description: T-shirt designs for the 2024 DU Open tournament
 publishDate: 1 March 2024
 coverImage:
-  src: '@/images/du-open.png'
+  src: '@/assets/images/du-open.png'
   alt: DU Open 2024
 tags: ['Illustrator']
 ogImage: du-open.png

src/content/project/formal.md

@@ -3,7 +3,7 @@ title: Cornhusker Hotel Formal
 description: T-shirt design for DU's formal at the Cornhusker Hotel
 publishDate: 11 Nov 2022
 coverImage:
-  src: '@/images/formal.png'
+  src: '@/assets/images/formal.png'
   alt: T-shirt design for DU's formal at the Cornhusker Hotel
 tags: ['Illustrator']
 ogImage: formal.png

src/content/project/grafana-widgets.md

@@ -3,7 +3,7 @@ title: Grafana iOS Widgets
 description: iOS Home screen widgets for Grafana using Scriptable
 publishDate: 1 May 2024
 coverImage:
-  src: '@/images/grafana-widgets.png'
+  src: '@/assets/images/grafana-widgets.png'
   alt: Example Wi-Fi traffic iOS home screen widget
 tags: ['Docker', 'Javascript']
 ogImage: grafana-widgets.png

src/content/project/rush-23/index.mdx

@@ -3,7 +3,7 @@ title: Summer Rush Shirts 2023
 description: Summer Recruitment T-shirts - Greek theme
 publishDate: 1 May 2023
 coverImage:
-  src: '@/images/rush.png'
+  src: '@/assets/images/rush.png'
   alt: Summer Rush 2023
 tags: ['Illustrator']
 ogImage: rush.png

src/layouts/Base.astro

@@ -1,6 +1,5 @@
 ---
 import type { SiteMeta } from '@/types'
-
 import BaseHead from '@/components/Head.astro'
 import Footer from '@/components/layout/Footer.astro'
 import Header from '@/components/layout/Header.astro'
@@ -27,7 +26,7 @@ const {
 
 	<body class='flex justify-center bg-background'>
 		<div class='absolute -z-10 h-screen w-full overflow-hidden'>
-			<div id='gradient' class='absolute start-1/2 size-[35rem] -translate-x-1/2'></div>
+			<div id='gradient' class='absolute start-1/2 size-[70rem] -translate-x-1/2'></div>
 		</div>
 		<ThemeProvider />
 		<SkipLink />
@@ -45,7 +44,7 @@ const {
 				background: radial-gradient(
 					circle at top,
 					hsl(var(--primary-foreground)) 0%,
-					transparent 40%
+					transparent 35%
 				);
 			}
 		</style>

src/pages/404.astro

@@ -12,7 +12,7 @@ const meta = {
 }
 ---
 
-<PageLayout meta={meta}>
+<PageLayout {meta}>
 	<div class='px-4 py-10 text-center sm:px-6 lg:px-8'>
 		<h1 class='block font-mono text-7xl font-bold sm:text-9xl'>404</h1>
 		<p class='mt-3 text-muted-foreground'>How could this happen</p>

src/pages/contact/index.astro

@@ -63,7 +63,7 @@ const meta = {
 }
 ---
 
-<PageLayout meta={meta}>
+<PageLayout {meta}>
 	<div class='m-10 flex flex w-full flex-col justify-center text-center sm:w-2/3'>
 		<h2 class='text-2xl font-bold'>Contact</h2>
 		<form class='mt-8 flex flex-col items-center gap-y-7' action='/contact' method='post'>

src/pages/contact/thanks.astro

@@ -20,7 +20,7 @@ if (Astro.request.method === 'POST') {
 }
 ---
 
-<PageLayout meta={meta}>
+<PageLayout {meta}>
 	<div class='px-4 py-10 text-center sm:px-6 lg:px-8'>
 		{firstName && <h1 class='block pb-4 font-mono text-7xl font-bold sm:text-5xl'>Thanks!</h1>}
 		{!firstName && <h1 class='block pb-4 font-mono text-7xl font-bold sm:text-5xl'>Whoops</h1>}

src/pages/projects/[...page].astro

@@ -46,7 +46,7 @@ const paginationProps = {
 }
 ---
 
-<PageLayout meta={meta}>
+<PageLayout {meta}>
 	<div class='w-full'>
 		<Button transition:persist='back' title='Back' href='/' style='button'>
 			<Icon slot='icon-before' name='heroicons:arrow-left' class='size-4' />

src/pages/tags/[tag]/[...page].astro

@@ -53,7 +53,7 @@ const paginationProps = {
 }
 ---
 
-<PageLayout meta={meta}>
+<PageLayout {meta}>
 	<div class='w-full'>
 		<Button transition:persist='back' title='Back' href='/projects' style='button'>
 			<Icon slot='icon-before' name='heroicons:arrow-left' class='size-4' />

src/pages/tags/index.astro

@@ -16,7 +16,7 @@ const meta = {
 }
 ---
 
-<PageLayout meta={meta}>
+<PageLayout {meta}>
 	<div class='w-full'>
 		<Button transition:persist='back' title='Back' href='/projects' style='button'>
 			<Icon slot='icon-before' name='heroicons:arrow-left' class='size-4' />

src/pages/tools/index.astro

@@ -81,7 +81,7 @@ const DEVELOPMENT = [
 ]
 ---
 
-<PageLayout meta={{ title: 'Home' }} showViewCount={true}>
+<PageLayout meta={{ title: 'Tools' }} showViewCount={true}>
 	<div class='w-full'>
 		<Button transition:persist='back' title='Back' href='/' style='button'>
 			<Icon slot='icon-before' name='heroicons:arrow-left' class='size-4' />

src/site.config.ts

@@ -1,4 +1,4 @@
-import type { SiteConfig } from '@/types'
+import type { SiteConfig, SocialItem } from '@/types'
 import type { AstroExpressiveCodeOptions } from 'astro-expressive-code'
 
 export const siteConfig: SiteConfig = {
@@ -41,6 +41,39 @@ export const menuLinks: Array<{ title: string; path: string }> = [
 	}
 ]
 
+export const socialLinks: Array<SocialItem> = [
+	{
+		label: 'Snapchat',
+		href: 'https://snapchat.com/t/uMm9JFth',
+		icon: 'fa6-brands:snapchat'
+	},
+	{
+		label: 'Instagram',
+		href: 'https://www.instagram.com/michaelpayne02/',
+		icon: 'fa6-brands:instagram'
+	},
+	{
+		label: 'Github',
+		href: 'https://github.com/michaelpayne02',
+		icon: 'fa6-brands:github'
+	},
+	{
+		label: 'LinkedIn',
+		href: 'https://www.linkedin.com/in/michaelpayne02/',
+		icon: 'fa6-brands:linkedin'
+	},
+	{
+		label: 'Ethereum',
+		href: 'https://etherscan.io/address/0x964D98dfa07549cB7571a4D6A161D825d76f9070',
+		icon: 'ri:eth-fill'
+	},
+	{
+		label: 'Email',
+		href: 'mailto:michael@payne.cx',
+		icon: 'heroicons:envelope'
+	}
+]
+
 // https://expressive-code.com/reference/configuration/
 export const expressiveCodeOptions: AstroExpressiveCodeOptions = {
 	// One dark, one light theme => https://expressive-code.com/guides/themes/#available-themes

src/types.ts

@@ -30,6 +30,13 @@ export type SiteMeta = {
 	articleDate?: string | undefined
 }
 
+export type SocialItem = {
+	href: string
+	label?: string
+	icon: string
+	target?: '_blank' | '_self' | '_parent' | '_top'
+}
+
 /** Webmentions */
 export type WebmentionsFeed = {
 	type: string