Handle no JS case better, and refactor deploy script

components/ContactButtons.vue

@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { VPButton } from "vitepress/theme";
+import { VPButton, VPHomeFeatures } from "vitepress/theme";
 import { useClipboard } from "@vueuse/core";
 
 const email = "m@mjfs.us";
 const discord = "zettam";
-const formattedDiscord = "zettam on Discord";
-const discordLink = "https://discord.com/users/145338365133193226/";
-
 const { text, copy, isSupported } = useClipboard();
 
 const copiedMsg = (text: string) => `Copied ${text} to clipboard`;
 </script>
 
 <template>
-  <div v-if="isSupported" class="container">
+  <div v-if="isSupported" class="contact-buttons">
+    <div class="container">
+      <div class="buttons">
         <VPButton
           theme="brand"
           class="button"
@@ -27,28 +26,45 @@ const copiedMsg = (text: string) => `Copied ${text} to clipboard`;
           @click="copy(discord)"
         />
       </div>
-  <div v-else class="container">
-    <VPButton
-      theme="brand"
-      class="button"
-      :href="`mailto:${email}`"
-      :text="email"
-    />
-    <VPButton
-      theme="alt"
-      class="button"
-      :href="discordLink"
-      :text="formattedDiscord"
-    />
     </div>
+  </div>
+  <VPHomeFeatures v-else />
 </template>
 
 <style scoped>
+.contact-buttons {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .contact-buttons {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .contact-buttons {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+}
+
 .button {
+  flex-shrink: 0;
   margin: 6px;
   text-decoration: none;
 }
-.container {
-  margin: -6px;
-}
 </style>

components/RepoButton.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
 import { VPButton } from "vitepress/theme";
-const props = defineProps<{ href: string }>();
+const { href } = defineProps<{ href: string }>();
 </script>
 
 <template>
   <div class="container">
-    <VPButton
-      theme="brand"
-      text="Repository"
-      class="button"
-      :href="props.href"
-    />
+    <VPButton theme="brand" text="Repository" class="button" :href />
   </div>
 </template>
 

contact.md

@@ -1,14 +1,23 @@
 ---
-layout: home
+layout: page
+sidebar: false
 
 hero:
   name: "Mitchell Simon"
   text: "Software Engineer"
   tagline: Specializing in web, mobile, and dev-ops
+
+features:
+  - title: Enable JavaScript
+    details:
+      Please, enable JS to show contact info. This is to prevent malicious bots from scraping
+      the info.
 ---
 
 <script setup lang="ts">
+import { VPHomeHero } from 'vitepress/theme';
 import ContactButtons from './components/ContactButtons.vue';
 </script>
 
+<VPHomeHero />
 <ContactButtons />

deploy.ts

@@ -1,11 +1,21 @@
 #!/usr/bin/env bun
 import { $ } from "bun";
 
+async function main() {
+  const profile = process.env.MJFS_PROFILE;
+  const distId = process.env.MJFS_DIST_ID;
+
+  if (
+    !confirm(`Deploy to distribution "${distId}" with profile "${profile}"?`)
+  ) {
+    return;
+  }
+
   await $`bun run clean`;
   await $`bun run build`;
 
-const profile = prompt("Profile:");
-const distId = prompt("Distribution Id:");
-
   await $`aws s3 sync ./.vitepress/dist/ s3://mjfs.us --acl public-read --delete --profile ${profile} --region us-west-1`;
   await $`aws cloudfront create-invalidation --distribution-id ${distId} --paths '/*' --profile ${profile}`;
+}
+
+await main();

package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "dev": "bunx --bun vitepress dev",
     "build": "bunx --bun vitepress build",
-    "preview": "bunx --bun vitepress preview",
+    "preview": "caddy file-server --listen :5173 --root ./.vitepress/dist/",
     "typecheck": "bunx --bun vue-tsc",
     "format": "bunx --bun prettier -w .",
     "lint": "bunx --bun eslint .",