mirror of https://github.com/mitchell/mjfs-us.git
Move contact buttons to a component and refactor dev tooling
This commit is contained in:
parent
e3e51fb498
commit
ee0b48af25
|
|
@ -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>
|
||||
53
contact.md
53
contact.md
|
|
@ -8,56 +8,7 @@ hero:
|
|||
---
|
||||
|
||||
<script setup lang="ts">
|
||||
import { VPButton } from "vitepress/theme";
|
||||
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();
|
||||
import ContactButtons from './components/ContactButtons.vue';
|
||||
</script>
|
||||
|
||||
<div v-if="isSupported">
|
||||
<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>
|
||||
<ContactButtons />
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import globals from "globals";
|
||||
import pluginJs from "@eslint/js";
|
||||
import tseslint from "typescript-eslint";
|
||||
import pluginVue from "eslint-plugin-vue";
|
||||
import js from "@eslint/js";
|
||||
import ts from "typescript-eslint";
|
||||
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,
|
||||
...tseslint.configs.recommended,
|
||||
...pluginVue.configs["flat/essential"],
|
||||
js.configs.recommended,
|
||||
...ts.configs.recommended,
|
||||
...vue.configs["flat/recommended"],
|
||||
prettier,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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
|
||||
max performance and SEO optimization.
|
||||
The content is composed with Markdown/Vue files then staticly rendered and deployed to AWS
|
||||
S3/Cloudfront for max performance and SEO optimization.
|
||||
|
|
|
|||
12
package.json
12
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",
|
||||
"build": "bunx --bun vitepress build",
|
||||
"preview": "bunx --bun vitepress preview",
|
||||
"dev": "bun vitepress dev",
|
||||
"build": "bun vitepress build",
|
||||
"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/"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue