refactor: upgrade to vitepress 0.15 + fix typing issues

docs/.vitepress/theme/index.ts

@@ -1,6 +1,6 @@
 // this file is here temporary during the development. it should become the
 // default VitePress theme, so we shouldn't have to import it like this.
 
-import { VWApp } from 'vue-website'
+import { VWTheme } from 'vue-website'
 
-export default VWApp
+export default VWTheme

package.json

@@ -34,11 +34,12 @@
  "normalize.css": "^8.0.1"
  },
  "devDependencies": {
+ "@types/body-scroll-lock": "^2.6.1",
  "jest": "^26.6.3",
  "prettier": "^2.3.1",
  "ts-jest": "^26.5.1",
  "typescript": "^4.3.2",
- "vitepress": "^0.14.1",
+ "vitepress": "^0.15.0",
  "vue": "^3.1.1"
  }
 }

src-theme/core/components/VTBackdrop.vue

@@ -1,13 +1,13 @@
-<template>
- <transition name="fade">
- <div v-if="show" class="vt-backdrop" />
- </transition>
-</template>
-
 <script lang="ts" setup>
 import { defineProps } from 'vue'
 
 defineProps<{
  show: boolean
 }>()
 </script>
+
+<template>
+ <transition name="fade">
+ <div v-if="show" class="vt-backdrop" />
+ </transition>
+</template>

src-theme/core/components/VTFlyout.vue

@@ -1,3 +1,16 @@
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import type { MenuItem } from '../composables/menu'
+import VTIconChevronDown from './icons/VTIconChevronDown.vue'
+import VTIconMoreHorizontal from './icons/VTIconMoreHorizontal.vue'
+import VTMenu from './VTMenu.vue'
+
+const props = defineProps<{
+ button?: string
+ items?: MenuItem[]
+}>()
+</script>
+
 <template>
  <div class="vt-flyout">
  <button class="vt-flyout-button">
@@ -15,17 +28,4 @@
  </VTMenu>
  </div>
  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, computed } from 'vue'
-import type { MenuItem } from '../composables/menu'
-import VTIconChevronDown from './icons/VTIconChevronDown.vue'
-import VTIconMoreHorizontal from './icons/VTIconMoreHorizontal.vue'
-import VTMenu from './VTMenu.vue'
-
-const props = defineProps<{
- button?: string
- items?: MenuItem[]
-}>()
-</script>
+</template>

src-theme/core/components/VTHamburger.vue

@@ -1,21 +1,17 @@
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+
+defineProps<{
+ active: boolean
+}>()
+</script>
+
 <template>
- <div class="vt-hamburger" :class="classes" role="button">
+ <div class="vt-hamburger" :class="{ 'is-active': active }" role="button">
  <div class="vt-hamburger-container">
  <div class="vt-hamburger-top" />
  <div class="vt-hamburger-middle" />
  <div class="vt-hamburger-bottom" />
  </div>
  </div>
 </template>
-
-<script lang="ts" setup>
-import { defineProps, computed } from 'vue'
-
-const props = defineProps<{
- active: boolean
-}>()
-
-const classes = computed(() => ({
- 'is-active': props.active
-}))
-</script>

src-theme/core/components/VTLink.vue

@@ -1,31 +1,26 @@
-<template>
- <component
- :is="tag"
- class="vt-link"
- :class="{ link: href }"
- :href="href"
- :target="target"
- :rel="rel"
- >
- <slot />
- <VTIconExternalLink v-if="showIcon" class="vt-link-icon" />
- </component>
-</template>
-
 <script lang="ts" setup>
 import { defineProps, computed } from 'vue'
 import VTIconExternalLink from './icons/VTIconExternalLink.vue'
 
-const OUTBOUND_REGEX = /^[a-z]+:/i
-
 const props = defineProps<{
  href?: string
  noIcon?: boolean
 }>()
 
-const isExternal = computed(() => OUTBOUND_REGEX.test(props.href))
-const tag = computed(() => props.href ? 'a' : 'span')
-const target = computed(() => isExternal.value ? '_blank' : null)
-const rel = computed(() => isExternal.value ? 'noopener noreferrer' : null)
-const showIcon = computed(() => isExternal.value && !props.noIcon)
+const OUTBOUND_REGEX = /^[a-z]+:/i
+const isExternal = computed(() => props.href && OUTBOUND_REGEX.test(props.href))
 </script>
+
+<template>
+ <component
+ :is="href ? 'a' : 'span'"
+ class="vt-link"
+ :class="{ link: href }"
+ :href="href"
+ :target="isExternal ? '_blank' : undefined"
+ :rel="isExternal ? 'noopener noreferrer' : undefined"
+ >
+ <slot />
+ <VTIconExternalLink v-if="isExternal && !noIcon" class="vt-link-icon" />
+ </component>
+</template>

src-theme/core/components/VTMenu.vue

@@ -1,29 +1,5 @@
-<template>
- <div class="vt-menu">
- <div v-if="items" class="vt-menu-items">
- <template v-for="item in items">
- <VTMenuLink
- v-if="item.link"
- :key="item.text"
- :text="item.text"
- :link="item.link"
- />
-
- <VTMenuGroup
- v-else
- :key="item.text"
- :text="item.text"
- :items="item.items"
- />
- </template>
- </div>
-
- <slot />
- </div>
-</template>
-
 <script lang="ts" setup>
-import { defineProps, computed } from 'vue'
+import { defineProps } from 'vue'
 import type { MenuItem } from '../composables/menu'
 import VTMenuLink from './VTMenuLink.vue'
 import VTMenuGroup from './VTMenuGroup.vue'
@@ -32,3 +8,16 @@ defineProps<{
  items?: MenuItem[]
 }>()
 </script>
+
+<template>
+ <div class="vt-menu">
+ <div v-if="items" class="vt-menu-items">
+ <template v-for="item in items" :key="item.text">
+ <VTMenuLink v-if="'link' in item" :text="item.text" :link="item.link" />
+ <VTMenuGroup v-else :text="item.text" :items="item.items" />
+ </template>
+ </div>
+
+ <slot />
+ </div>
+</template>

src-theme/core/components/VTMenuGroup.vue

@@ -1,25 +1,25 @@
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import type { MenuItemChild } from '../composables/menu'
+import VTMenuLink from './VTMenuLink.vue'
+
+defineProps<{
+ text?: string
+ items: MenuItemChild[]
+}>()
+</script>
+
 <template>
  <div class="vt-menu-group">
  <p v-if="text" class="vt-menu-group-title">{{ text }}</p>
 
  <template v-for="item in items">
  <VTMenuLink
- v-if="item.link"
+ v-if="'link' in item"
  :key="item.text"
  :text="item.text"
  :link="item.link"
  />
  </template>
  </div>
 </template>
-
-<script lang="ts" setup>
-import { defineProps, computed } from 'vue'
-import type { MenuItemWithChildren } from '../composables/menu'
-import VTMenuLink from './VTMenuLink.vue'
-
-defineProps<{
- text?: string
- items: MenuItemWithChildren[]
-}>()
-</script>

src-theme/core/components/VTMenuLink.vue

@@ -1,15 +1,15 @@
-<template>
- <VTLink class="vt-menu-link" :href="link">
- {{ text }}
- </VTLink>
-</template>
-
 <script lang="ts" setup>
-import { defineProps, computed } from 'vue'
+import { defineProps } from 'vue'
 import VTLink from './VTLink.vue'
 
 defineProps<{
  text: string
  link: string
 }>()
 </script>
+
+<template>
+ <VTLink class="vt-menu-link" :href="link">
+ {{ text }}
+ </VTLink>
+</template>

src-theme/core/components/VTSocialLink.vue

@@ -1,15 +1,3 @@
-<template>
- <a
- class="vt-social-link"
- :class="classes"
- :href="link"
- target="_blank"
- rel="noopener noreferrer"
- >
- <component :is="icon" class="vt-social-link-icon" />
- </a>
-</template>
-
 <script lang="ts" setup>
 import { defineProps, computed } from 'vue'
 import type { SocialLinkSize, SocialLinkIcon } from '../composables/socialLink'
@@ -26,11 +14,6 @@ const props = defineProps<{
  link: string
 }>()
 
-const classes = computed(() => ({
- 'is-small': props.size === 'small',
- 'is-medium': props.size === 'medium'
-}))
-
 const icon = computed(() => {
  switch (props.icon) {
  case 'discord':
@@ -48,3 +31,18 @@ const icon = computed(() => {
  }
 })
 </script>
+
+<template>
+ <a
+ class="vt-social-link"
+ :class="{
+ 'is-small': size === 'small',
+ 'is-medium': size === 'medium'
+ }"
+ :href="link"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <component :is="icon" class="vt-social-link-icon" />
+ </a>
+</template>

src-theme/core/components/VTSocialLinks.vue

@@ -1,15 +1,3 @@
-<template>
- <div class="vt-social-links">
- <VTSocialLink
- v-for="link in links"
- :key="link.link"
- :size="size"
- :icon="link.icon"
- :link="link.link"
- />
- </div>
-</template>
-
 <script lang="ts" setup>
 import { defineProps } from 'vue'
 import type { SocialLinkSize, SocialLink } from '../composables/socialLink'
@@ -20,3 +8,15 @@ defineProps<{
  links: SocialLink[]
 }>()
 </script>
+
+<template>
+ <div class="vt-social-links">
+ <VTSocialLink
+ v-for="{ link, icon } in links"
+ :key="link"
+ :size="size"
+ :icon="icon"
+ :link="link"
+ />
+ </div>
+</template>

src-theme/core/components/VTSwitchAppearance.vue

@@ -1,3 +1,11 @@
+<script lang="ts" setup>
+import { useAppearance } from '../composables/appearance'
+import VTIconSun from './icons/VTIconSun.vue'
+import VTIconMoon from './icons/VTIconMoon.vue'
+
+const { toggle } = useAppearance()
+</script>
+
 <template>
  <div class="vt-switch-appearance" role="button" @click="toggle">
  <div class="vt-switch-appearance-check">
@@ -8,11 +16,3 @@
  </div>
  </div>
 </template>
-
-<script lang="ts" setup>
-import { useAppearance } from '../composables/appearance'
-import VTIconSun from './icons/VTIconSun.vue'
-import VTIconMoon from './icons/VTIconMoon.vue'
-
-const { toggle } = useAppearance()
-</script>

src-theme/core/composables/socialLink.ts

@@ -10,3 +10,5 @@ export type SocialLinkIcon =
  | 'linkedin'
  | 'slack'
  | 'twitter'
+
+export type SocialLinkSize = 'small' | 'medium'