From f1efbde3358c3ef9971eb473431a64928d68477d Mon Sep 17 00:00:00 2001
From: mitchell <m@mjfs.us>
Date: Sun, 23 Jun 2024 22:59:38 -0400
Subject: [PATCH] Handle no JS case better, and refactor deploy script

---
 components/ContactButtons.vue | 84 +++++++++++++++++++++--------------
 components/RepoButton.vue     |  9 +---
 contact.md                    | 11 ++++-
 deploy.ts                     | 22 ++++++---
 package.json                  |  2 +-
 5 files changed, 79 insertions(+), 49 deletions(-)

diff --git a/components/ContactButtons.vue b/components/ContactButtons.vue
index d312954..00d9039 100644
--- a/components/ContactButtons.vue
+++ b/components/ContactButtons.vue
@@ -1,54 +1,70 @@
 <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">
-    <VPButton
-      theme="brand"
-      class="button"
-      :text="text === email ? copiedMsg(email) : 'E-mail'"
-      @click="copy(email)"
-    />
-    <VPButton
-      theme="alt"
-      class="button"
-      :text="text === discord ? copiedMsg(discord) : 'Discord'"
-      @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 v-if="isSupported" class="contact-buttons">
+    <div class="container">
+      <div class="buttons">
+        <VPButton
+          theme="brand"
+          class="button"
+          :text="text === email ? copiedMsg(email) : 'E-mail'"
+          @click="copy(email)"
+        />
+        <VPButton
+          theme="alt"
+          class="button"
+          :text="text === discord ? copiedMsg(discord) : 'Discord'"
+          @click="copy(discord)"
+        />
+      </div>
+    </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>
diff --git a/components/RepoButton.vue b/components/RepoButton.vue
index eab5d23..a94ec12 100644
--- a/components/RepoButton.vue
+++ b/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>
 
diff --git a/contact.md b/contact.md
index 14f03e7..c4fd8d0 100644
--- a/contact.md
+++ b/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 />
diff --git a/deploy.ts b/deploy.ts
index b4f69ae..0e3176f 100755
--- a/deploy.ts
+++ b/deploy.ts
@@ -1,11 +1,21 @@
 #!/usr/bin/env bun
 import { $ } from "bun";
 
-await $`bun run clean`;
-await $`bun run build`;
+async function main() {
+  const profile = process.env.MJFS_PROFILE;
+  const distId = process.env.MJFS_DIST_ID;
 
-const profile = prompt("Profile:");
-const distId = prompt("Distribution Id:");
+  if (
+    !confirm(`Deploy to distribution "${distId}" with profile "${profile}"?`)
+  ) {
+    return;
+  }
 
-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 $`bun run clean`;
+  await $`bun run build`;
+
+  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();
diff --git a/package.json b/package.json
index b250c14..b2cd4a2 100644
--- a/package.json
+++ b/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 .",