hello world, again

This commit is contained in:
taskylizard 2024-08-07 12:23:35 +00:00
commit f479740dd1
No known key found for this signature in database
GPG key ID: 1820131ED1A24120
133 changed files with 32895 additions and 0 deletions

View file

@ -0,0 +1,15 @@
<script setup lang="ts">
import { useData } from 'vitepress'
const { frontmatter } = useData()
</script>
<template>
<a
v-if="frontmatter.hero.prelink"
:href="frontmatter.hero.prelink.link"
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>

View file

@ -0,0 +1,49 @@
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
authors: string[]
}>()
interface Author {
name: string
github: string
}
const data = [
{
name: 'nbats',
github: 'https://github.com/nbats'
},
{
name: 'Kai',
github: 'https://github.com/Kai-FMHY'
},
{
name: 'taskylizard',
github: 'https://github.com/taskylizard'
},
{
name: 'zinklog',
github: 'https://github.com/zinklog2'
},
{
name: 'Q',
github: 'https://github.com/qiracy'
}
] satisfies Author[]
const authors = computed(() =>
data.filter((author) => props.authors.includes(author.name))
)
</script>
<template>
<div class="flex flex-wrap gap-4 pt-2">
<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>
</div>
</div>
</template>

View file

@ -0,0 +1,16 @@
<script setup lang="ts">
defineProps<{
icon: string
}>()
</script>
<template>
<div class="flex items-center mb-[8px] g-[12px]">
<span class="flex items-center">
<div class="text-2xl" :class="icon" />
<div class="ml-2 text-sm text-[var(--vp-c-text-2)]">
<slot />
</div>
</span>
</div>
</template>

View file

@ -0,0 +1,327 @@
<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
TransitionRoot,
TransitionChild,
Dialog,
DialogPanel,
DialogTitle,
DialogDescription,
Listbox,
ListboxLabel,
ListboxButton,
ListboxOptions,
ListboxOption
} from '@headlessui/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 router = useRouter()
const feedback = reactive<FeedbackType>({ message: '' })
const options = [
{
label: '💡 Suggestion',
value: 'suggestion'
},
{
label: '❤️ Appreciation',
value: 'appreciate'
},
{ label: '🐞 Bug', value: 'bug' },
{ label: '📂 Other', value: 'other' }
]
const selectedOption = ref(options[0])
async function handleSubmit() {
loading.value = true
const body: FeedbackType = {
message: feedback.message,
type: selectedOption.value.value,
page: router.route.path
}
try {
const response = await fetch('https://api.fmhy.net/feedback', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
})
const data = await response.json()
if (data.error) {
error.value = data.error
return
}
if (data.status === 'ok') {
success.value = true
}
} catch (error) {
error.value = error
} finally {
loading.value = false
}
}
const isOpen = ref(false)
function closeModal() {
isOpen.value = false
}
function openModal() {
isOpen.value = true
}
</script>
<template>
<button
type="button"
class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
@click="openModal"
/>
<Teleport to="body">
<TransitionRoot appear :show="isOpen" as="template">
<Dialog as="div" class="relative z-10" @close="closeModal">
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0"
enter-to="opacity-100"
leave="duration-200 ease-in"
leave-from="opacity-100"
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"
>
<TransitionChild
as="template"
enter="duration-300 ease-out"
enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100"
leave="duration-200 ease-in"
leave-from="opacity-100 scale-100"
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"
>
Feedback
</DialogTitle>
<div class="mt-4 top-16 w-72" v-if="!success">
<Listbox v-model="selectedOption">
<div class="relative mt-1">
<ListboxButton
class="relative w-full cursor-default rounded-lg bg-bg-alt text-text py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
>
<span class="block truncate">
{{ selectedOption.label }}
</span>
<span
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
>
<div
class="i-heroicons-solid:chevron-up-down h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</ListboxButton>
<transition
leave-active-class="transition duration-100 ease-in"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bg-alt py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
>
<ListboxOption
v-slot="{ active, selected }"
v-for="option in options"
:key="option.value"
:value="option"
as="template"
>
<li
:class="[
active ? 'text-primary' : 'text-gray-500',
'relative cursor-default select-none py-2 pl-10 pr-4'
]"
>
<span
:class="[
selected ? 'font-medium' : 'font-normal',
'block truncate'
]"
>
{{ option.label }}
</span>
<span
v-if="selected"
class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary"
>
<div
class="i-heroicons-solid:check h-5 w-5"
aria-hidden="true"
/>
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
</Listbox>
<div class="mt-2">
<div>
<label class="field-label">Message</label>
<textarea
v-model="feedback.message"
class="mt-2 h-32"
placeholder="What a lovely wiki!"
rows="5"
/>
</div>
</div>
<p class="text-sm text-gray-400 mb-2">
If you want a reply to your feedback, feel free to mention a
contact in the message or join our
<a
class="text-primary font-semibold text-underline"
href="https://discord.gg/Stz6y6NgNg"
>
Discord.
</a>
</p>
<details
v-if="selectedOption.value === 'suggestion'"
class="text-sm text-gray-400"
>
<summary class="mb-2">Submission Guidelines</summary>
<strong>🕹 Emulators</strong>
<p>
They're already on the
<a
class="text-primary font-bold text-underline"
href="https://emulation.gametechwiki.com/index.php/Main_Page"
>
Game Tech Wiki.
</a>
</p>
<strong>🔻 Leeches</strong>
<p>
They're already on the
<a
class="text-primary font-bold text-underline"
href="https://filehostlist.miraheze.org/wiki/Free_Premium_Leeches"
>
File Hosting Wiki.
</a>
</p>
<strong>🐧 Distros</strong>
<p>
They're already on
<a
class="text-primary font-bold text-underline"
href="https://distrowatch.com/"
>
DistroWatch.
</a>
</p>
<strong>🎲 Mining / Betting Sites</strong>
<p>
Don't post anything related to betting, mining, BINs, CCs,
etc.
</p>
<strong>🎮 Multiplayer Game Hacks</strong>
<p>
Don't post any hacks/exploits that give unfair advantages
in multiplayer games.
</p>
</details>
<div class="mt-4">
<button
type="button"
class="inline-flex justify-center rounded-md border border-transparent bg-blue-500 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:bg-blue-400"
:disabled="
feedback.message.length < 5 ||
feedback.message.length > 1000
"
@click="handleSubmit()"
>
Submit
</button>
<button
type="button"
class="ml-2 inline-flex justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-sm font-medium text-red-100 hover:bg-red-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
@click="closeModal()"
>
Close
</button>
</div>
</div>
<div v-else-if="error">
<div class="text-sm font-medium leading-6 text-text">
Error!
</div>
<details>{{ error }}</details>
</div>
<div v-else>
<TransitionRoot
enter="transition-opacity duration-75"
enter-from="opacity-0"
enter-to="opacity-100"
>
Thanks!
</TransitionRoot>
</div>
</DialogPanel>
</TransitionChild>
</div>
</div>
</Dialog>
</TransitionRoot>
</Teleport>
</template>
<style scoped>
textarea,
input {
font-family: var(--vp-font-family-base);
background: var(--vp-c-bg-soft);
font-size: 14px;
border-radius: 4px;
padding: 16px;
width: 100%;
&::placeholder {
color: var(--vp-c-text-2) !important;
opacity: 1;
}
}
</style>

View file

@ -0,0 +1,47 @@
<script setup lang="ts">
defineProps<{
label: string
id: string
}>()
</script>
<template>
<div class="input-field">
<div v-if="label" class="input-label">
<label :for="id" class="pane-label">
{{ label }}
</label>
<div class="display-value">
<slot name="display" />
</div>
</div>
<slot />
</div>
</template>
<style scoped>
.pane-label {
line-height: 20px;
font-size: 13px;
font-weight: 600;
color: var(--vt-c-text-1);
display: block;
}
.input-field:not(:last-child) {
margin-bottom: 16px;
}
.display-value {
font-size: 13px;
color: var(--vp-c-text-2);
}
.input-label {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
gap: 12px;
}
</style>

View file

@ -0,0 +1,60 @@
<script setup lang="ts">
import Field from './CardField.vue'
import Feedback from './Feedback.vue'
import InputField from './InputField.vue'
import ToggleStarred from './ToggleStarred.vue'
</script>
<template>
<div class="card">
<div class="card-header">
<div class="card-title">Emoji Legend</div>
</div>
<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>
<div class="card-header">
<div class="card-title">Options</div>
</div>
<InputField id="feedback" label="Feedback">
<template #display>
<Feedback />
</template>
</InputField>
<InputField id="toggle-starred" label="Toggle Starred">
<template #display>
<ToggleStarred />
</template>
</InputField>
</div>
</template>
<style scoped>
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.card-title {
font-weight: 700;
color: var(--vp-c-text-1);
line-height: 32px;
font-size: 16px;
}
.card {
background: var(--vp-c-bg);
padding: 12px 24px 24px;
border-radius: 12px;
position: relative;
z-index: 0;
border: 1px solid transparent;
transition: border-color 0.4s ease-in-out;
}
.card:hover {
border-color: var(--vp-c-brand-1);
}
</style>

View file

@ -0,0 +1,52 @@
<script setup>
import { ref } from 'vue'
import { Switch } from '@headlessui/vue'
const enabled = ref(false)
</script>
<template>
<Switch v-model="enabled" class="switch" :class="{ enabled }">
<span class="thumb" />
</Switch>
</template>
<style>
.switch {
display: inline-flex;
position: relative;
width: 40px;
height: 22px;
flex-shrink: 0;
border: 1px solid var(--vp-input-border-color);
background-color: var(--vp-input-switch-bg-color);
transition:
border-color 0.25s,
background-color 0.4s ease;
border-radius: 11px;
}
.switch.enabled {
background-color: var(--vp-c-brand);
}
</style>
<style scoped>
.switch:hover {
border-color: var(--vp-input-hover-border-color);
}
.thumb {
display: inline-block;
background-color: #fff;
transition: transform 0.25s;
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: var(--vp-shadow-1);
}
.switch.enabled .thumb {
transform: translateX(18px);
}
</style>

View file

@ -0,0 +1,16 @@
<script setup lang="ts">
import Switch from './Switch.vue'
const toggleStarred = () =>
document.documentElement.classList.toggle('starred-only')
</script>
<template>
<Switch @click="toggleStarred()" />
</template>
<style>
.starred-only li:not(.starred) {
display: none;
}
</style>

View file

@ -0,0 +1,29 @@
<script setup lang="ts">
defineProps<{
title: string
description: string
mobile: string
desktop: string
}>()
</script>
<template>
<div class="rounded-lg border bg-bg-elv text-text shadow-sm w-full max-w-md">
<div class="flex flex-col space-y-1.5 p-6 pb-4">
<h4 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">
{{ title }}
</h4>
<p class="text-sm text-text-2 font-medium leading-none tracking-tight">
{{ description }}
</p>
</div>
<div class="p-6">
<img :src="desktop" :alt="title" class="rounded-md object-cover aspect-[3/2]" width="1080" height="1920" />
</div>
<div class="items-center p-6 flex gap-2">
<a :href="mobile" target="_blank">Mobile</a>
<span class="text-text-2"></span>
<a :href="desktop" target="_blank">Desktop</a>
</div>
</div>
</template>