feat: social link config

bump: drizzle-kit

astro.config.ts

@@ -12,21 +12,18 @@ 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

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

@@ -1,6 +1,7 @@
 {
   "name": "portfolio",
   "version": "1.0.6",
+  "type": "module",
   "scripts": {
     "dev": "wrangler types && astro dev",
     "start": "wrangler types && astro dev",
@@ -36,11 +37,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 +54,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 +78,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/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/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

tsconfig.json

@@ -20,7 +20,6 @@
 				"name": "@astrojs/ts-plugin"
 			}
 		],
-		"verbatimModuleSyntax": true,
 		"jsx": "react-jsx",
 		"jsxImportSource": "react"
 	},