mirror of
https://github.com/fmhy/edit.git
synced 2026-01-29 23:31:12 +11:00
style: format with new style
This commit is contained in:
taskylizard
parent
bc3bbaafeb
commit
ef422dcda8
43 changed files with 686 additions and 583 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useData } from "vitepress";
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const { frontmatter } = useData();
|
||||
const { frontmatter } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -9,7 +9,8 @@ const { frontmatter } = useData();
|
|||
v-if="frontmatter.hero.prelink"
|
||||
:href="frontmatter.hero.prelink.link"
|
||||
target="_blank"
|
||||
class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3">
|
||||
class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3"
|
||||
>
|
||||
{{ frontmatter.hero.prelink.title }}
|
||||
</a>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,41 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
authors: string[];
|
||||
}>();
|
||||
authors: string[]
|
||||
}>()
|
||||
|
||||
interface Author {
|
||||
name: string;
|
||||
github: string;
|
||||
name: string
|
||||
github: string
|
||||
}
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "nbats",
|
||||
github: "https://github.com/nbats",
|
||||
name: 'nbats',
|
||||
github: 'https://github.com/nbats'
|
||||
},
|
||||
{
|
||||
name: "Kai",
|
||||
github: "https://github.com/Kai-FMHY",
|
||||
name: 'Kai',
|
||||
github: 'https://github.com/Kai-FMHY'
|
||||
},
|
||||
{
|
||||
name: "taskylizard",
|
||||
github: "https://github.com/taskylizard",
|
||||
name: 'taskylizard',
|
||||
github: 'https://github.com/taskylizard'
|
||||
},
|
||||
{
|
||||
name: "zinklog",
|
||||
github: "https://github.com/zinklog2",
|
||||
name: 'zinklog',
|
||||
github: 'https://github.com/zinklog2'
|
||||
},
|
||||
{
|
||||
name: "Q",
|
||||
github: "https://github.com/qiracy",
|
||||
},
|
||||
] satisfies Author[];
|
||||
name: 'Q',
|
||||
github: 'https://github.com/qiracy'
|
||||
}
|
||||
] satisfies Author[]
|
||||
|
||||
const authors = computed(() => data.filter((author) => props.authors.includes(author.name)));
|
||||
const authors = computed(() =>
|
||||
data.filter((author) => props.authors.includes(author.name))
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -41,7 +43,7 @@ const authors = computed(() => data.filter((author) => props.authors.includes(au
|
|||
<div v-for="(c, index) of authors" class="flex gap-2 items-center">
|
||||
<img :src="`${c.github}.png`" class="w-8 h-8 rounded-full" />
|
||||
<a :href="c.github">{{ c.name }}</a>
|
||||
<span v-if="index < authors.length - 1"> • </span>
|
||||
<span v-if="index < authors.length - 1">•</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
icon: string;
|
||||
}>();
|
||||
icon: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,48 +1,52 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue";
|
||||
import { useRouter } from "vitepress";
|
||||
import { type FeedbackType, getFeedbackOption, feedbackOptions } from "../../types/Feedback";
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vitepress'
|
||||
import {
|
||||
type FeedbackType,
|
||||
getFeedbackOption,
|
||||
feedbackOptions
|
||||
} from '../../types/Feedback'
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
const error = ref<unknown>(null);
|
||||
const success = ref<boolean>(false);
|
||||
const loading = ref<boolean>(false)
|
||||
const error = ref<unknown>(null)
|
||||
const success = ref<boolean>(false)
|
||||
|
||||
const router = useRouter();
|
||||
const router = useRouter()
|
||||
|
||||
const feedback = reactive<FeedbackType>({ message: "" });
|
||||
const feedback = reactive<FeedbackType>({ message: '' })
|
||||
|
||||
async function handleSubmit(type?: FeedbackType["type"]) {
|
||||
if (type) feedback.type = type;
|
||||
loading.value = true;
|
||||
async function handleSubmit(type?: FeedbackType['type']) {
|
||||
if (type) feedback.type = type
|
||||
loading.value = true
|
||||
|
||||
const body: FeedbackType = {
|
||||
message: feedback.message,
|
||||
type: feedback.type,
|
||||
page: router.route.path,
|
||||
};
|
||||
page: router.route.path
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("https://feedback.tasky.workers.dev", {
|
||||
method: "POST",
|
||||
const response = await fetch('https://feedback.tasky.workers.dev', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
|
||||
const data = await response.json();
|
||||
const data = await response.json()
|
||||
|
||||
if (data.error) {
|
||||
error.value = data.error;
|
||||
return;
|
||||
error.value = data.error
|
||||
return
|
||||
}
|
||||
if (data.status === "ok") {
|
||||
success.value = true;
|
||||
if (data.status === 'ok') {
|
||||
success.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
error.value = error;
|
||||
error.value = error
|
||||
} finally {
|
||||
loading.value = false;
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -61,7 +65,8 @@ async function handleSubmit(type?: FeedbackType["type"]) {
|
|||
v-for="item in feedbackOptions"
|
||||
:key="item.value"
|
||||
class="btn"
|
||||
@click="handleSubmit(item.value as FeedbackType['type'])">
|
||||
@click="handleSubmit(item.value as FeedbackType['type'])"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -71,7 +76,11 @@ async function handleSubmit(type?: FeedbackType["type"]) {
|
|||
<p class="desc">Page: {{ router.route.path }}</p>
|
||||
<div>
|
||||
<span>{{ getFeedbackOption(feedback.type)?.label }}</span>
|
||||
<button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
|
||||
<button
|
||||
style="margin-left: 0.5rem"
|
||||
class="btn"
|
||||
@click="feedback.type = undefined"
|
||||
>
|
||||
<span class="i-carbon-close-large">close</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -80,19 +89,27 @@ async function handleSubmit(type?: FeedbackType["type"]) {
|
|||
v-model="feedback.message"
|
||||
autofocus
|
||||
class="input"
|
||||
placeholder="What a lovely wiki!" />
|
||||
placeholder="What a lovely wiki!"
|
||||
/>
|
||||
<p class="desc mb-2">
|
||||
If you'd prefer to be contacted through another platform, feel free to mention it in the
|
||||
message or join our
|
||||
<a class="text-primary font-semibold text-underline" href="https://discord.gg/Stz6y6NgNg"
|
||||
>Discord</a
|
||||
>.
|
||||
If you'd prefer to be contacted through another platform, feel free to
|
||||
mention it in the message or join our
|
||||
<a
|
||||
class="text-primary font-semibold text-underline"
|
||||
href="https://discord.gg/Stz6y6NgNg"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="feedback.message.length < 5 || feedback.message.length > 1000"
|
||||
@click="handleSubmit()">
|
||||
:disabled="
|
||||
feedback.message.length < 5 || feedback.message.length > 1000
|
||||
"
|
||||
@click="handleSubmit()"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
TransitionRoot,
|
||||
TransitionChild,
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from "@headlessui/vue";
|
||||
DialogDescription
|
||||
} from '@headlessui/vue'
|
||||
|
||||
const isOpen = ref(true);
|
||||
const isOpen = ref(true)
|
||||
|
||||
const feedbackOptions = [
|
||||
{
|
||||
label: "💡 Suggestion",
|
||||
value: "suggestion",
|
||||
label: '💡 Suggestion',
|
||||
value: 'suggestion'
|
||||
},
|
||||
{
|
||||
label: "❤️ Appreciation",
|
||||
value: "appreciate",
|
||||
label: '❤️ Appreciation',
|
||||
value: 'appreciate'
|
||||
},
|
||||
{ label: "🐞 Bug", value: "bug" },
|
||||
{ label: "📂 Other", value: "other" },
|
||||
];
|
||||
{ label: '🐞 Bug', value: 'bug' },
|
||||
{ label: '📂 Other', value: 'other' }
|
||||
]
|
||||
|
||||
function closeModal() {
|
||||
isOpen.value = false;
|
||||
isOpen.value = false
|
||||
}
|
||||
function openModal() {
|
||||
isOpen.value = true;
|
||||
isOpen.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -36,7 +36,8 @@ function openModal() {
|
|||
<button
|
||||
type="button"
|
||||
class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
|
||||
@click="openModal" />
|
||||
@click="openModal"
|
||||
/>
|
||||
|
||||
<TransitionRoot appear :show="isOpen" as="template">
|
||||
<Dialog as="div" class="relative z-10" @close="closeModal">
|
||||
|
|
@ -47,12 +48,15 @@ function openModal() {
|
|||
enter-to="opacity-100"
|
||||
leave="duration-200 ease-in"
|
||||
leave-from="opacity-100"
|
||||
leave-to="opacity-0">
|
||||
leave-to="opacity-0"
|
||||
>
|
||||
<div class="fixed inset-0 bg-black/25" />
|
||||
</TransitionChild>
|
||||
|
||||
<div class="fixed inset-0 overflow-y-auto">
|
||||
<div class="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<div
|
||||
class="flex min-h-full items-center justify-center p-4 text-center"
|
||||
>
|
||||
<TransitionChild
|
||||
as="template"
|
||||
enter="duration-300 ease-out"
|
||||
|
|
@ -60,10 +64,15 @@ function openModal() {
|
|||
enter-to="opacity-100 scale-100"
|
||||
leave="duration-200 ease-in"
|
||||
leave-from="opacity-100 scale-100"
|
||||
leave-to="opacity-0 scale-95">
|
||||
leave-to="opacity-0 scale-95"
|
||||
>
|
||||
<DialogPanel
|
||||
class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all">
|
||||
<DialogTitle as="h3" class="text-lg font-medium leading-6 text-text">
|
||||
class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all"
|
||||
>
|
||||
<DialogTitle
|
||||
as="h3"
|
||||
class="text-lg font-medium leading-6 text-text"
|
||||
>
|
||||
Feedback
|
||||
</DialogTitle>
|
||||
|
||||
|
|
@ -72,7 +81,8 @@ function openModal() {
|
|||
<button
|
||||
v-for="item in feedbackOptions"
|
||||
:key="item.value"
|
||||
class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
|
||||
class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -90,7 +100,8 @@ function openModal() {
|
|||
<button
|
||||
type="button"
|
||||
class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
|
||||
@click="closeModal">
|
||||
@click="closeModal"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
label: string;
|
||||
id: string;
|
||||
}>();
|
||||
label: string
|
||||
id: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import Feedback from "./Feedback.vue";
|
||||
import { ref } from 'vue'
|
||||
import Feedback from './Feedback.vue'
|
||||
|
||||
const showModal = ref(false);
|
||||
const showModal = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled" @click="showModal = true" />
|
||||
<button
|
||||
class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
|
||||
@click="showModal = true"
|
||||
/>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition name="modal">
|
||||
|
|
@ -14,7 +17,9 @@ const showModal = ref(false);
|
|||
<div class="modal-container">
|
||||
<Feedback />
|
||||
<div class="model-footer">
|
||||
<button class="modal-button" @click="showModal = false">Close</button>
|
||||
<button class="modal-button" @click="showModal = false">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import Field from "./CardField.vue";
|
||||
import Modal from "./Modal.vue";
|
||||
import InputField from "./InputField.vue";
|
||||
import ToggleStarred from "./ToggleStarred.vue";
|
||||
import Field from './CardField.vue'
|
||||
import Modal from './Modal.vue'
|
||||
import InputField from './InputField.vue'
|
||||
import ToggleStarred from './ToggleStarred.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -10,9 +10,9 @@ import ToggleStarred from "./ToggleStarred.vue";
|
|||
<div class="card-header">
|
||||
<div class="card-title">Emoji Legend</div>
|
||||
</div>
|
||||
<Field icon="i-twemoji-star"> Recommendations </Field>
|
||||
<Field icon="i-twemoji-globe-with-meridians"> Indexes </Field>
|
||||
<Field icon="i-twemoji-repeat-button"> Storage Links </Field>
|
||||
<Field icon="i-twemoji-star">Recommendations</Field>
|
||||
<Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
|
||||
<Field icon="i-twemoji-repeat-button">Storage Links</Field>
|
||||
<div class="card-header">
|
||||
<div class="card-title">Options</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { Switch } from "@headlessui/vue";
|
||||
import { ref } from 'vue'
|
||||
import { Switch } from '@headlessui/vue'
|
||||
|
||||
const enabled = ref(false);
|
||||
const enabled = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import Switch from "./Switch.vue";
|
||||
import Switch from './Switch.vue'
|
||||
|
||||
const toggleStarred = () => document.documentElement.classList.toggle("starred-only");
|
||||
const toggleStarred = () =>
|
||||
document.documentElement.classList.toggle('starred-only')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue