Prettier to biome, fixed themes, slimmed down configs and packages

Author: Xithrius

.github/workflows/ci.yml

@@ -33,18 +33,4 @@ jobs:
 
       - name: Install dependencies
         working-directory: ${{ matrix.dir }}
-        run: bun lint
-
-      - name: Prepare Pull Request Payload artifact
-        id: prepare-artifact
-        if: always() && github.event_name == 'pull_request'
-        continue-on-error: true
-        run: cat $GITHUB_EVENT_PATH | jq '.pull_request' > pull_request_payload.json
-
-      - name: Upload a Build Artifact
-        if: always() && steps.prepare-artifact.outcome == 'success'
-        continue-on-error: true
-        uses: actions/upload-artifact@v2
-        with:
-          name: pull-request-payload
-          path: pull_request_payload.json
+        run: bun ci

.pre-commit-config.yaml

@@ -0,0 +1,36 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.6.0
+    hooks:
+      - id: check-case-conflict
+      - id: check-merge-conflict
+      - id: check-toml
+      - id: check-yaml
+      - id: check-json
+      - id: trailing-whitespace
+        args: [--markdown-linebreak-ext=md]
+      - id: mixed-line-ending
+        args: [--fix=lf]
+      - id: end-of-file-fixer
+
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.6.0
+    hooks:
+      - id: check-ast
+      - id: trailing-whitespace
+      - id: check-toml
+      - id: end-of-file-fixer
+
+  - repo: https://github.com/asottile/add-trailing-comma
+    rev: v3.1.0
+    hooks:
+      - id: add-trailing-comma
+
+  - repo: https://github.com/macisamuele/language-formatters-pre-commit-hooks
+    rev: v2.13.0
+    hooks:
+      - id: pretty-format-yaml
+        args:
+          - --autofix
+          - --preserve-quotes
+          - --indent=2

site/.eslintignore

@@ -1,12 +1,12 @@
 export default defineAppConfig({
   globals: {
-    title: 'site',
+    title: "site",
   },
   ui: {
-    primary: 'red',
-    gray: 'cool',
+    primary: "red",
+    gray: "cool",
     container: {
-      constrained: 'max-w-2xl',
+      constrained: "max-w-2xl",
     },
   },
-})
+});

site/.eslintrc.cjs

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 useHead({
-  meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
-  ],
+  meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" }],
   htmlAttrs: {
-    lang: 'en'
-  }
-})
-
+    lang: "en",
+  },
+});
 </script>
 
 <template>

site/.pre-commit-config.yaml

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.2/schema.json",
+  "organizeImports": { "enabled": true },
+  "linter": { "enabled": true, "rules": { "recommended": true } },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": { "indentStyle": "space", "indentWidth": 2 }
+}

site/.prettierrc

@@ -13,6 +13,6 @@ defineProps({
   title: {
     type: String,
     required: true,
-  }
-})
+  },
+});
 </script>

site/app.config.ts

@@ -37,25 +37,25 @@
 </template>
 
 <script setup>
-import { useFixedHeader } from 'vue-use-fixed-header'
-const headerRef = ref(null)
-const { styles } = useFixedHeader(headerRef)
+import { useFixedHeader } from "vue-use-fixed-header";
+const headerRef = ref(null);
+const { styles } = useFixedHeader(headerRef);
 
 const items = [
   {
-    name: 'Home',
-    path: '/',
-    icon: 'solar:home-smile-outline',
+    name: "Home",
+    path: "/",
+    icon: "solar:home-smile-outline",
   },
   {
-    name: 'Blog',
-    path: '/posts',
-    icon: 'solar:document-add-outline',
+    name: "Blog",
+    path: "/posts",
+    icon: "solar:document-add-outline",
   },
   {
-    name: 'Showcase',
-    path: '/showcase',
-    icon: 'solar:folder-with-files-outline',
+    name: "Showcase",
+    path: "/showcase",
+    icon: "solar:folder-with-files-outline",
   },
-]
+];
 </script>

site/app.vue

@@ -19,14 +19,14 @@ defineProps({
     type: Object,
     required: true,
   },
-})
+});
 
 const getReadableDate = (dateString) => {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: '2-digit',
-    month: '2-digit',
-    day: '2-digit',
-  })
-}
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+  });
+};
 </script>

site/biome.json

@@ -25,5 +25,5 @@ defineProps({
     type: Object,
     required: true,
   },
-})
+});
 </script>

site/bun.lockb

@@ -1,28 +1,25 @@
-<script setup>
-const colorMode = useColorMode()
+<script setup lang="ts">
+const colorMode = useColorMode();
 
-const isDark = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  },
-})
+const onClick = () => {
+  const values = ["system", "light", "dark"];
+  const index = values.indexOf(colorMode.preference);
+  const next = (index + 1) % values.length;
+
+  colorMode.preference = values[next];
+};
 </script>
 
 <template>
-  <UTooltip text="Toggle theme" :ui="{ popper: { strategy: 'absolute' } }">
-    <button
-      class="relative px-3 py-4 flex items-center justify-center transition hover:text-primary-500 dark:hover:text-primary-400"
-      @click="isDark = !isDark"
-    >
-      <Icon
-        aria-hidden="true"
-        :name="isDark ? 'solar:sun-2-outline' : 'solar:moon-outline'"
-        class="w-5 h-5"
-      />
-      <span class="sr-only">Toggle theme</span>
-    </button>
-  </UTooltip>
+  <button
+    aria-label="Color Mode"
+    @click="onClick"
+    class="absolute px-3 py-4 flex items-center justify-center transition hover:text-primary-500 dark:hover:text-primary-400"
+  >
+    <ColorScheme placeholder="...">
+      <Icon v-if="colorMode.preference === 'dark'" name="uil:moon" />
+      <Icon v-else-if="colorMode.preference === 'light'" name="uil:sun" />
+      <Icon v-else name="uil:desktop" />
+    </ColorScheme>
+  </button>
 </template>

site/components/App/Header.vue

@@ -4,7 +4,7 @@ defineProps({
     type: Object,
     required: true,
   },
-})
+});
 </script>
 
 <template>

site/components/App/Navbar.vue

@@ -16,5 +16,5 @@ defineProps({
     type: String,
     required: true,
   },
-})
+});
 </script>

site/components/App/PostCard.vue

@@ -1,42 +1,42 @@
 <script setup lang="ts">
-import { useMotions } from '@vueuse/motion'
+import { useMotions } from "@vueuse/motion";
 
 interface MotionableProps {
-	as?: string | object;
-	name: string;
-	show?: boolean;
+  as?: string | object;
+  name: string;
+  show?: boolean;
 }
 
 const props = withDefaults(defineProps<MotionableProps>(), {
-	as: 'div',
-	show: true,
-})
+  as: "div",
+  show: true,
+});
 
-const motions = useMotions()
-const leaved = ref(!props.show)
+const motions = useMotions();
+const leaved = ref(!props.show);
 
 watch(
-	() => props.show,
-	async (newShow) => {
-		const motion = motions[props.name]
-
-		if (motion && motion.isAnimating.value) {
-			motion.stop('leave')
-
-			if (newShow) {
-				motion.apply('enter')
-			}
-		}
-
-		if (!newShow) {
-			leaved.value = false
-
-			motion.leave(() => {
-				leaved.value = true
-			})
-		}
-	},
-)
+  () => props.show,
+  async (newShow) => {
+    const motion = motions[props.name];
+
+    if (motion?.isAnimating.value) {
+      motion.stop("leave");
+
+      if (newShow) {
+        motion.apply("enter");
+      }
+    }
+
+    if (!newShow) {
+      leaved.value = false;
+
+      motion.leave(() => {
+        leaved.value = true;
+      });
+    }
+  },
+);
 </script>
 <template>
   <component :is="as" v-if="show || !leaved" v-motion="name">

site/components/App/ProjectCard.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { NavigationItem } from '~/types/navigation'
+import type { NavigationItem } from "~/types/navigation";
 
 defineProps<{
   item: NavigationItem;
-}>()
+}>();
 </script>
 <template>
   <NuxtLink