Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/danielroe/roe.dev. This is the code and content for my personal website, built in Nuxt. roe.dev
Something went wrong. Try again.
Vue
at ci/nightly
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127<template> <div id="app" class="overflow-x-hidden min-h-screen flex flex-col" :class="{ 'highlight-islands': highlightIslands }" @click="openSiteUI" > <LayoutTheSiteHeader /> <NuxtPage /> <LayoutThePresenceIndicator /> <LayoutTheSiteFooter /> </div></template>
<script lang="ts" setup>const route = useRoute()
// TODO: interactive components within server componentsconst highlightIslands = ref(false)function openSiteUI(e: MouseEvent | KeyboardEvent) { if ((e.target as HTMLElement).hasAttribute('data-site-ui')) { highlightIslands.value = !highlightIslands.value }}
useHead({ title: () => (route.meta.title as string) || '', titleTemplate: title => (title ? `${title} - Daniel Roe` : 'Daniel Roe'), bodyAttrs: { class: 'font-sans', },})
if (process.server) { const PATH_RE = createRegExp( exactly(char.times.any().and(charNotIn('/'))) .as('path') .and(exactly('/').optionally()) .at.lineEnd() )
const { path = '/' } = route.fullPath.match(PATH_RE)?.groups ?? {} const url = `https://roe.dev${path}`
useServerHead({ meta: () => [ { name: 'theme-color', content: '#1a202c' }, { name: 'msapplication-TileColor', content: '#1a202c' }, { property: 'og:url', content: url }, { property: 'og:image', content: `https://roe.dev/og/og.jpg`, key: 'og:image', }, { property: 'og:image:width', content: '1200' }, { property: 'og:image:height', content: '630' }, { property: 'og:title', content: (route.meta.title as string) || 'Daniel Roe', }, { name: 'description', content: (route.meta.description as string) || `The personal website of Daniel Roe`, }, { property: 'og:description', content: (route.meta.description as string) || `The personal website of Daniel Roe`, }, { name: 'twitter:card', content: 'summary_large_image' }, { name: 'twitter:site', content: '@danielcroe' }, { name: 'twitter:creator', content: '@danielcroe' }, ], link: [ ...[ '/fonts/barlow-7cHpv4kjgoGqM7E_Ass52Hs.woff2', '/fonts/firacode-uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2', '/fonts/barlow-7cHpv4kjgoGqM7E_DMs5.woff2', ].map( href => ({ rel: 'preload', as: 'font', type: 'font/woff2', crossorigin: '', href, }) as const ), { rel: 'canonical', href: url }, { rel: 'mask-icon', color: '#fff', href: '/favicon.svg' }, { rel: 'icon', type: 'image/svg', href: '/favicon.svg' }, { rel: 'alternate', type: 'application/rss+xml', href: '/rss.xml' }, { rel: 'webmention', href: 'https://webmention.io/roe.dev/webmention' }, { rel: 'pingback', href: 'https://webmention.io/roe.dev/xmlrpc' }, { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png', }, { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png', }, { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png', }, { rel: 'manifest', href: '/site.webmanifest' }, { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#1a202c' }, ], })}</script>
<style>.highlight-islands [data-island] { border: 1px solid red;}</style>