pages/site/.vitepress/theme/Layout.vue.in

<template>
  <DefaultTheme.Layout>
    <template #layout-top>
      <NolebaseHighlightTargetedHeading />
      <ClientOnly>
        <div class="background">
          <TresCanvas>
            <TresOrthographicCamera :position="[0, 0, 10]" />
            <TresAmbientLight :intensity="1" />
            <Suspense>
              <Background />
            </Suspense>
          </TresCanvas>
        </div>
      </ClientOnly>
    </template>
    <template #layout-bottom>
    	<footer class="vp-doc">
			<div>CC {{ new Date().getFullYear() }} <a class="h-card" rel="me" href="/about"><img src="/me.jpg" alt="" />The Paper Pilot</a>. <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.</div>
			<div>Any and all opinions listed here are my own and not representative of my employers; future, past and present.</div>
			<div><a href="https://resume.incremental.social/thepaperpilot/thepaperpilot">Resume</a> (not actively seeking new opportunities).</div>
			<div>Site built from <a href="COMMIT_LINK">this commit</a> on <time>COMMIT_TIME</time>. <a href="https://www.thepaperpilot.org/licenses.txt">Legal disclaimers</a>.</div>
		</footer>
    </template>
  </DefaultTheme.Layout>
</template>

<script setup lang="tsx">
import { NolebaseHighlightTargetedHeading } from '@nolebase/vitepress-plugin-highlight-targeted-heading/client'
import { TresCanvas } from '@tresjs/core'
import '@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css'
import DefaultTheme from 'vitepress/theme'
import Background from './Background.vue'
import Camera from './Camera.vue'
import OrbitControls from './OrbitControls.vue'
import './custom.css'
</script>

<style scoped>
.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
}

footer {
    padding: 2em;
    z-index: 26;
    position: relative;
    font-size: small;
    background: var(--vp-c-bg-elv);
}
</style>