Refactoring code, improving CI and removing unused dependencies.

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Build and Deploy
+name: Deploy
 
 on:
   schedule:
@@ -7,20 +7,28 @@ on:
 
 permissions:
   contents: write
+
 jobs:
-  build-and-deploy:
+  deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout 🛎️
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
 
-      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
-        run: |
-          npm i
-          npm run build
+      - name: Build
+        run: npm run build
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages
-          folder: .vitepress/dist # The folder the action should deploy.
+          folder: .vitepress/dist # The folder the action should deploy.

.gitignore

@@ -17,8 +17,5 @@ yarn-error.log*
 .zed/
 .vscode/
 
-package-lock.json
-pnpm-lock.yaml
-
 release.data.json
 changelogs.data.json

.vitepress/config/index.ts

@@ -11,7 +11,6 @@ import shortcode_plugin from "markdown-it-shortcode-tag"
 import shortcodes from "./shortcodes"
 import generateOgImages from "./hooks/generateOgImages"
 import generateMeta from "./hooks/generateMeta"
-import Unocss from 'unocss/vite'
 
 const SITE_HOST = 'https://kotatsu.app'
 const SITE_TITLE = 'kotatsu.app'
@@ -88,6 +87,9 @@ export default defineConfigWithTheme<Theme.Config>({
   transformHead: async (context) => generateMeta(context, SITE_HOST),
 
   vite: {
+    define:{
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__:"false"
+    },
     resolve: {
       alias: [
         'VPSidebar',
@@ -104,15 +106,13 @@ export default defineConfigWithTheme<Theme.Config>({
         )
       })),
     },
-    plugins: [
-      Unocss(),
-    ]
   },
 
   sitemap: {
     hostname: SITE_HOST,
   },
 
+
   buildEnd: async (context) => {
     generateOgImages(context)
   }

.vitepress/theme/components/Changelog.vue

@@ -18,23 +18,23 @@ const changelog = computed(() => {
 </script>
 
 <template>
-	<div class="changelog">
-		<header>
-			<h2>Changelog</h2>
+	<section class="changelog">
+		<header class="changelog__header">
+			<h2 class="changelog__title">Changelog</h2>
 		</header>
-		<div v-html="changelog" />
-	</div>
-	<div class="fullChangelog">
+		<article class="changelog__content" v-html="changelog" />
+	</section>
+	<footer class="full-changelog">
 		<p>
 			View the full release
-			<a href="https://github.com/KotatsuApp/Kotatsu/releases/latest" target="_blank" rel="noopener">
+			<a class="full-changelog__link" href="https://github.com/KotatsuApp/Kotatsu/releases/latest" target="_blank" rel="noopener">
 				here
 			</a>
 		</p>
-	</div>
+	</footer>
 </template>
 
-<style>
+<style scoped>
 .changelog {
 	display: block;
 	border: 1px solid var(--vp-c-bg-soft);
@@ -44,38 +44,42 @@ const changelog = computed(() => {
 	padding: 24px;
 	height: 100%;
 	margin: 1.5em auto 0.5em;
-}
 
-.changelog header {
-	display: flex;
-	justify-content: center;
-	align-items: baseline;
-	margin: 0 0 1rem;
-}
+	.changelog__header {
+	  display: flex;
+		justify-content: center;
+		align-items: baseline;
+		margin: 0 0 1rem;
 
-.changelog svg {
-	font-size: 1.2em;
-	margin-right: 0.5rem;
-	vertical-align: middle;
-}
+		.changelog__title {
+			font-size: 1.5rem;
+			margin: 0;
+			padding: 0;
+			color: var(--vp-c-text-1);
+			border: none;
+		}
+	}
 
-.changelog h2 {
-	font-size: 1.5rem;
-	margin: 0;
-	padding: 0;
-	color: var(--vp-c-text-1);
-	border: none;
-}
+	.changelog__content {
+		margin: 0;
 
-.changelog div > p {
-	margin: 0 0 1rem;
-	color: var(--vp-c-text-2);
-	font-size: 0.9rem;
+		& > p {
+		  margin: 0 0 1rem;
+			color: var(--vp-c-text-2);
+			font-size: 0.875rem;
+		}
+
+		& svg {
+		  font-size: 1.2em;
+			margin-right: 0.5rem;
+			vertical-align: middle;
+		}
+	}
 }
 
-.fullChangelog {
+.full-changelog {
 	margin: 0 0 1rem;
 	color: var(--vp-c-text-2);
-	font-size: 0.9rem;
+	font-size: 0.875rem;
 }
 </style>

.vitepress/theme/components/ChangelogsList.vue

@@ -47,8 +47,8 @@ const dateFormatter = new Intl.DateTimeFormat("en", {
 				:aria-label="`Permalink to "${release.tag_name}"`"
 			/>
 		</h2>
-		<time class="release__date" :datetime="release.published_at!">
-			{{ dateFormatter.format(new Date(release.published_at!)) }}
+		<time class="release__date" :datetime="release.published_at">
+			{{ dateFormatter.format(new Date(release.published_at)) }}
 		</time>
 		<div v-html="renderMarkdown(release.body)" />
 	</div>

.vitepress/theme/components/Contributors.vue

@@ -99,7 +99,7 @@ function addToNonExistent(user: string) {
 }
 
 .contributor {
-  .avatar {
+  .contributor__avatar {
     width: 32px;
   	height: 32px;
   	border-radius: 50%;

.vitepress/theme/components/DownloadButtons.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /// <reference types="@types/gtag.js" />
 
-import { computed, onMounted, ref } from "vue"
+import { computed } from "vue"
 import { data as release } from "../data/release.data"
 
 const downloadInformation = computed(() => ({
@@ -16,12 +16,6 @@ const downloadInformation = computed(() => ({
   	},
 }))
 
-const isAndroid = ref(true)
-
-onMounted(() => {
-	isAndroid.value = !!navigator.userAgent.match(/android/i)
-})
-
 function handleAnalytics() {
 	window.gtag?.("event", "Download", {
 		event_category: "App",
@@ -141,4 +135,4 @@ svg {
 	margin: 0.75em auto;
 	font-size: 0.75rem;
 }
-</style>
+</style>

.vitepress/theme/components/Feature.vue

@@ -19,7 +19,7 @@ defineProps<{
         <p v-html="details"></p>
       </div>
       <div class="image">
-        <VPImage class="image-src" :image="image" />
+        <VPImage class="image-src" :image />
       </div>
     </div>
   </div>

.vitepress/theme/components/Features.vue

@@ -19,17 +19,11 @@ const {features} = defineProps<{
 const grid = computed(() => {
   const length = features.length
 
-  if (length === 0) {
-    return
-  } else if (length === 2) {
-    return 'grid-2'
-  } else if (length === 3) {
-    return 'grid-3'
-  } else if (length % 3 === 0) {
-    return 'grid-6'
-  } else if (length > 3) {
-    return 'grid-4'
-  }
+  if (length === 0) return
+  if (length === 2) return 'grid-2'
+  if (length === 3) return 'grid-3'
+  if (length % 3 === 0) return 'grid-6'
+  if (length > 3) return 'grid-4'
 })
 </script>
 

.vitepress/theme/components/HomeHero.vue

@@ -4,13 +4,13 @@ import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
 import Button from './Button.vue'
 import { type Ref, inject } from 'vue'
 
-export interface HeroAction {
+interface HeroAction {
   theme?: 'brand' | 'alt'
   text: string
   link: string
 }
 
-export interface Data {
+interface Data {
   image?: DefaultTheme.ThemeableImage
   title: string
   text: string

.vitepress/theme/components/Link.vue

@@ -14,7 +14,7 @@ const isExternal = computed(() => href && /^[a-z]+:/i.test(href))
   <component
     :is="href ? 'a' : 'span'"
     :class="{ link: href }"
-    :href="href"
+    :href
     :target="isExternal ? '_blank' : 'self'"
     :rel="isExternal ? 'noopener noreferrer' : undefined"
     :title="title || href"
@@ -23,19 +23,19 @@ const isExternal = computed(() => href && /^[a-z]+:/i.test(href))
     <label
       v-if="isExternal && !noIcon"
       i-ic-round-arrow-outward
-      :class="$style.icon"
+      class="icon"
     />
   </component>
 </template>
 
-<style module>
+<style scoped>
 .icon {
   cursor: pointer;
   display: inline-block;
   margin-top: -2px;
   margin-left: 4px;
-  width: 11px !important;
-  height: 11px !important;
+  width: 12px;
+  height: 21px;
   transition: fill 0.25s;
 }
 </style>

.vitepress/theme/components/List.vue

@@ -13,8 +13,8 @@ defineProps<{
 <template>
   <ul>
     <li
-      v-for="(item, key) in items"
-      :key="key"
+      v-for="(item, idx) in items"
+      :key="idx"
       class="item"
       :class="{ 'has-link': item.link }"
     >

.vitepress/theme/components/NavBar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useWindowScroll } from '@vueuse/core'
-import { ref, watchPostEffect } from 'vue'
+import { computed } from 'vue'
 import { useData, inBrowser } from 'vitepress'
 import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
 import VPNavBarTitle from 'vitepress/dist/client/theme-default/components/VPNavBarTitle.vue'
@@ -23,14 +23,10 @@ const { y } = useWindowScroll({ window: inBrowser && window })
 const { hasSidebar } = useSidebar()
 const { frontmatter } = useData()
 
-const classes = ref<Record<string, boolean>>({})
-
-watchPostEffect(() => {
-  classes.value = {
-    'has-sidebar': hasSidebar.value,
-    top: frontmatter.value?.layout === 'home' && y.value === 0,
-  }
-})
+const classes = computed(() => ({
+  'has-sidebar': hasSidebar.value,
+  top: frontmatter.value?.layout === 'home' && y.value === 0,
+}))
 </script>
 
 <template>
@@ -163,6 +159,13 @@ watchPostEffect(() => {
   align-items: center;
   height: calc(var(--vp-nav-height) - 1px);
   transition: background-color 0.5s;
+  gap: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .content-body {
+    gap: unset
+  }
 }
 
 @media (min-width: 960px) {
@@ -172,12 +175,6 @@ watchPostEffect(() => {
   }
 }
 
-@media (max-width: 767px) {
-  .content-body {
-    column-gap: 0.5rem;
-  }
-}
-
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,

.vitepress/theme/components/NavBarMenu.vue

@@ -45,8 +45,8 @@ const nav = computed(() => {
 	<nav v-if="nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
 		<span id="main-nav-aria-label" class="visually-hidden">Main navigation</span>
 		<template v-for="item in nav" :key="item.text">
-			<VPNavBarMenuLink v-if="'link' in item" :item="item" />
-			<VPNavBarMenuGroup v-else :item="item" />
+			<VPNavBarMenuLink v-if="'link' in item" :item />
+			<VPNavBarMenuGroup v-else :item />
 		</template>
 	</nav>
 </template>