Move contact buttons to a component and refactor dev tooling

components/ContactButtons.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { VPButton } from "vitepress/theme";
+import { useClipboard } from "@vueuse/core";
+
+const email = "m@mjfs.us";
+const phone = "+19498727279";
+const discord = "zettam";
+const formattedPhone = "+1 (949) 872 7279";
+const formattedDiscord = "zettam on Discord";
+const discordLink = "https://discord.com/users/145338365133193226/";
+
+const { text, copy, isSupported } = useClipboard();
+</script>
+
+<template>
+  <div v-if="isSupported" class="button-container">
+    <VPButton
+      theme="brand"
+      class="button"
+      :text="text === email ? `Copied ${email}` : email"
+      @click="copy(email)"
+    />
+    <VPButton
+      theme="alt"
+      class="button"
+      :text="text === phone ? `Copied ${phone}` : formattedPhone"
+      @click="copy(phone)"
+    />
+    <VPButton
+      theme="alt"
+      class="button"
+      :text="text === discord ? `Copied ${discord}` : formattedDiscord"
+      @click="copy(discord)"
+    />
+  </div>
+  <div v-else class="button-container">
+    <VPButton
+      theme="brand"
+      class="button"
+      :href="`mailto:${email}`"
+      :text="email"
+    />
+    <VPButton
+      theme="alt"
+      class="button"
+      :href="`tel:${phone}`"
+      :text="formattedPhone"
+    />
+    <VPButton
+      theme="alt"
+      class="button"
+      :href="discordLink"
+      :text="formattedDiscord"
+    />
+  </div>
+</template>
+
+<style scoped>
+.button {
+  margin: 6px;
+}
+.button-container {
+  margin: -6px;
+}
+</style>

contact.md

@@ -8,56 +8,7 @@ hero:
 ---
 
 <script setup lang="ts">
-import { VPButton } from "vitepress/theme";
+import ContactButtons from './components/ContactButtons.vue';
-import { useClipboard } from "@vueuse/core";
-
-const formattedPhone = "+1 (949) 872 7279";
-const formattedDiscord = "zettam on Discord";
-const discordLink = "https://discord.com/users/145338365133193226/";
-
-const email = "m@mjfs.us";
-const phone = "+19498727279";
-const discord = "zettam";
-const { text, copy, copied, isSupported } = useClipboard();
 </script>
 
-<div v-if="isSupported">
+<ContactButtons />
-  <VPButton
-    style="margin: 6px"
-    theme="brand"
-    @click="copy(email)"
-    :text="text === email ? `Copied ${email}` : email"
-  />
-  <VPButton
-    style="margin: 6px"
-    theme="alt"
-    @click="copy(phone)"
-    :text="text === phone ? `Copied ${phone}` : formattedPhone"
-  />
-  <VPButton
-    style="margin: 6px"
-    theme="alt"
-    @click="copy(discord)"
-    :text="text === discord ? `Copied ${discord}` : formattedDiscord"
-  />
-</div>
-<div v-else>
-  <VPButton
-    style="margin: 6px"
-    theme="brand"
-    :href="`mailto:${email}`"
-    :text="email"
-  />
-  <VPButton
-    style="margin: 6px"
-    theme="alt"
-    :href="`tel:${phone}`"
-    :text="formattedPhone"
-  />
-  <VPButton
-    style="margin: 6px"
-    theme="alt"
-    :href="discordLink"
-    :text="formattedDiscord"
-  />
-</div>

eslint.config.js

@@ -1,13 +1,15 @@
 import globals from "globals";
-import pluginJs from "@eslint/js";
+import js from "@eslint/js";
-import tseslint from "typescript-eslint";
+import ts from "typescript-eslint";
-import pluginVue from "eslint-plugin-vue";
+import vue from "eslint-plugin-vue";
+import prettier from "eslint-config-prettier";
 
 export default [
   { files: ["**/*.{js,mjs,cjs,ts,vue}"] },
   { ignores: [".vitepress/dist", ".vitepress/cache"] },
   { languageOptions: { globals: globals.browser } },
-  pluginJs.configs.recommended,
+  js.configs.recommended,
-  ...tseslint.configs.recommended,
+  ...ts.configs.recommended,
-  ...pluginVue.configs["flat/essential"],
+  ...vue.configs["flat/recommended"],
+  prettier,
 ];

mjfs-us.md

@@ -3,5 +3,5 @@
 This website is simple but effective and powered by [VitePress](https://vitepress.dev/). A static
 site generator that uses Vite and Vue under the hood.
 
-The content is composed with Markdown then staticly rendered and deployed to AWS S3/Cloudfront for
+The content is composed with Markdown/Vue files then staticly rendered and deployed to AWS
-max performance and SEO optimization.
+S3/Cloudfront for max performance and SEO optimization.

package.json

@@ -8,6 +8,7 @@
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^10.11.0",
     "eslint": "9.x",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.26.0",
     "globals": "^15.6.0",
     "prettier": "^3.3.2",
@@ -19,10 +20,13 @@
     "typescript": "^5.0.0"
   },
   "scripts": {
-    "dev": "bunx --bun vitepress dev",
+    "dev": "bun vitepress dev",
-    "build": "bunx --bun vitepress build",
+    "build": "bun vitepress build",
-    "preview": "bunx --bun vitepress preview",
+    "preview": "bun vitepress preview",
+    "typecheck": "bunx vue-tsc",
     "format": "prettier -w .",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "check": "bun run format && bun run lint && bun run typecheck",
+    "clean": "rm -rf ./.vitepress/cache/ ./.vitepress/dist/"
   }
 }