aria/FMHY-Website
1
0
Fork 0
mirror of https://github.com/fmhy/edit.git synced 2025-07-31 08:12:23 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

l

Browse source
This commit is contained in:
taskylizard 2025-06-28 08:38:06 +00:00
parent b1da9e7563
commit 887ad08707
No known key found for this signature in database
GPG key ID: 1820131ED1A24120
8 changed files with 162 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/.vitepress/constants.ts
View file

@ -277,9 +277,9 @@ export const wikiSidebar = [
items: [
meta.build.nsfw
? {
text: '<span class="i-twemoji:no-one-under-eighteen"></span> NSFW',
link: 'https://rentry.co/NSFW-Checkpoint'
}
text: '<span class="i-twemoji:no-one-under-eighteen"></span> NSFW',
link: 'https://rentry.co/NSFW-Checkpoint'
}
: {},
{
text: '<span class="i-twemoji:warning"></span> Unsafe Sites',

13
tsconfig.json
View file

@ -3,10 +3,7 @@
"verbatimModuleSyntax": true,
"module": "esnext",
"target": "esnext",
"lib": [
"DOM",
"ESNext"
],
"lib": ["DOM", "ESNext"],
"strict": true,
"jsx": "preserve",
"esModuleInterop": true,
@ -16,13 +13,9 @@
"noUnusedLocals": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"types": [
"vitepress"
]
"types": ["vitepress"]
},
"exclude": [
"node_modules"
],
"exclude": ["node_modules"],
"include": [
"website/**/*.ts",
"website/**/*.d.ts",

4
website/hooks/opengraph.ts
View file

@ -72,14 +72,14 @@ async function generateImage({
const _page = getPage(url)
const title =
frontmatter.layout === 'home'
? frontmatter.hero.name ?? frontmatter.title
? (frontmatter.hero.name ?? frontmatter.title)
: frontmatter.title
? frontmatter.title
: _page?.title
const description =
frontmatter.layout === 'home'
? frontmatter.hero.tagline ?? frontmatter.description
? (frontmatter.hero.tagline ?? frontmatter.description)
: frontmatter.description
? frontmatter.description
: _page?.description

36
website/theme/components/ColorPicker.vue
View file

@ -85,21 +85,30 @@ const handleColorChange = (value: string) => {
:style="{ backgroundColor: colors[selectedColor][500] }"
/>
</div>
<SelectRoot :model-value="selectedColor" @update:model-value="handleColorChange">
<SelectTrigger
class="color-input-text"
aria-label="Select theme color">
<SelectRoot
:model-value="selectedColor"
@update:model-value="handleColorChange"
>
<SelectTrigger class="color-input-text" aria-label="Select theme color">
<SelectValue :placeholder="normalizeColorName(selectedColor)" />
</SelectTrigger>
<SelectPortal>
<SelectContent class="bg-bg-elv border border-div rounded-md shadow-lg z-50 max-h-60 overflow-hidden z-9999"
:side-offset="4">
<SelectContent
class="bg-bg-elv border border-div rounded-md shadow-lg z-50 max-h-60 overflow-hidden z-9999"
:side-offset="4"
>
<SelectViewport class="p-1">
<SelectItem v-for="color in colorOptions" :key="color" :value="color"
class="relative flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-bg-alt rounded-sm outline-none data-[highlighted]:bg-bg-alt data-[state=checked]:bg-bg-alt data-[state=checked]:text-text">
<span class="inline-block w-4 h-4 rounded-full border border-div"
:style="{ backgroundColor: colors[color][500] }" />
<SelectItem
v-for="color in colorOptions"
:key="color"
:value="color"
class="relative flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-bg-alt rounded-sm outline-none data-[highlighted]:bg-bg-alt data-[state=checked]:bg-bg-alt data-[state=checked]:text-text"
>
<span
class="inline-block w-4 h-4 rounded-full border border-div"
:style="{ backgroundColor: colors[color][500] }"
/>
<SelectItemText>
{{ normalizeColorName(color) }}
</SelectItemText>
@ -158,10 +167,13 @@ const handleColorChange = (value: string) => {
text-align: left;
border-radius: 8px;
cursor: text;
transition: border-color 0.25s, background 0.4s ease;
transition:
border-color 0.25s,
background 0.4s ease;
}
.color-picker:hover, .color-picker:focus {
.color-picker:hover,
.color-picker:focus {
border-color: var(--vp-c-brand);
background: var(--vp-c-bg-alt);
}

87
website/theme/components/Feedback.vue
View file

@ -134,24 +134,36 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
<template>
<template v-if="props.heading">
<button @click="toggleCard()"
class="bg-$vp-c-default-soft text-primary border-$vp-c-default-soft hover:border-primary ml-3 inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-1.5 py-3.5 text-sm font-medium transition-all duration-300 sm:h-6">
<span :class="isCardShown === false ? `i-lucide:mail` : `i-lucide:mail-x`" />
<button
@click="toggleCard()"
class="bg-$vp-c-default-soft text-primary border-$vp-c-default-soft hover:border-primary ml-3 inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-1.5 py-3.5 text-sm font-medium transition-all duration-300 sm:h-6"
>
<span
:class="isCardShown === false ? `i-lucide:mail` : `i-lucide:mail-x`"
/>
</button>
</template>
<template v-else>
<div
class="mt-2 p-4 border-2 border-solid bg-brand-50 border-brand-300 dark:bg-brand-950 dark:border-brand-800 rounded-xl col-span-3 transition-colors duration-250">
class="mt-2 p-4 border-2 border-solid bg-brand-50 border-brand-300 dark:bg-brand-950 dark:border-brand-800 rounded-xl col-span-3 transition-colors duration-250"
>
<div class="flex items-start md:items-center gap-3">
<div class="pt-1 md:pt-0">
<div class="w-10 h-10 rounded-full flex items-center justify-center bg-brand-500 dark:bg-brand-400">
<span :class="isCardShown === false
? `i-lucide:mail w-6 h-6 text-white dark:text-brand-950`
: `i-lucide:mail-x w-6 h-6 text-white dark:text-brand-950`
" />
<div
class="w-10 h-10 rounded-full flex items-center justify-center bg-brand-500 dark:bg-brand-400"
>
<span
:class="
isCardShown === false
? `i-lucide:mail w-6 h-6 text-white dark:text-brand-950`
: `i-lucide:mail-x w-6 h-6 text-white dark:text-brand-950`
"
/>
</div>
</div>
<div class="flex-grow flex items-start md:items-center gap-3 flex-col md:flex-row">
<div
class="flex-grow flex items-start md:items-center gap-3 flex-col md:flex-row"
>
<div class="flex-grow">
<div class="font-semibold text-brand-950 dark:text-brand-50">
Got feedback?
@ -163,7 +175,8 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
<div>
<button
class="inline-block text-center rounded-full px-4 py-2.5 text-sm font-medium border-2 border-solid text-brand-700 border-brand-300 dark:text-brand-100 dark:border-brand-800"
@click="toggleCard()">
@click="toggleCard()"
>
Share Feedback
</button>
</div>
@ -173,17 +186,22 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
</template>
<Transition name="fade" mode="out-in">
<div v-if="isCardShown"
class="border-$vp-c-divider bg-$vp-c-bg-alt b-rd-4 m-[2rem 0] mt-4 border-2 border-solid p-6">
<div
v-if="isCardShown"
class="border-$vp-c-divider bg-$vp-c-bg-alt b-rd-4 m-[2rem 0] mt-4 border-2 border-solid p-6"
>
<Transition name="fade" mode="out-in">
<div v-if="!feedback.type">
<p class="heading">
{{ helpfulText }}
</p>
<div class="flex flex-wrap gap-2">
<button v-for="item in feedbackOptions" :key="item.value"
<button
v-for="item in feedbackOptions"
:key="item.value"
class="bg-bg border-$vp-c-default-soft hover:border-primary mt-2 select-none rounded border-2 border-solid font-bold transition-all duration-250 rounded-lg text-[14px] font-500 leading-normal m-0 px-3 py-1.5 text-center align-middle whitespace-nowrap"
@click="handleSubmit(item.value)">
@click="handleSubmit(item.value)"
>
<span>{{ item.label }}</span>
</button>
</div>
@ -203,23 +221,30 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
<strong>🕹️ Emulators</strong>
<p class="desc">
They're already on the
<a class="text-primary text-underline font-bold"
href="https://emulation.gametechwiki.com/index.php/Main_Page">
<a
class="text-primary text-underline font-bold"
href="https://emulation.gametechwiki.com/index.php/Main_Page"
>
Game Tech Wiki.
</a>
</p>
<strong>🔻 Leeches</strong>
<p class="desc">
They're already on the
<a class="text-primary text-underline font-bold"
href="https://filehostlist.miraheze.org/wiki/Free_Premium_Leeches">
<a
class="text-primary text-underline font-bold"
href="https://filehostlist.miraheze.org/wiki/Free_Premium_Leeches"
>
File Hosting Wiki.
</a>
</p>
<strong>🐧 Distros</strong>
<p class="desc">
They're already on
<a class="text-primary text-underline font-bold" href="https://distrowatch.com/">
<a
class="text-primary text-underline font-bold"
href="https://distrowatch.com/"
>
DistroWatch.
</a>
</p>
@ -234,25 +259,35 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
</p>
</details>
</div>
<textarea v-model="feedback.message" autofocus
<textarea
v-model="feedback.message"
autofocus
class="bg-$vp-c-bg-alt text-$vp-c-text-2 w-full h-[100px] border border-$vp-c-divider rounded px-3 py-1.5 border-$vp-c-divider bg-$vp-c-bg-alt b-rd-4 border-2 border-solid"
placeholder="What a lovely wiki!" />
placeholder="What a lovely wiki!"
/>
<p class="desc mb-2">
Add your Discord handle if you would like a response, or if we need
more information from you, otherwise join our
<a class="text-primary text-underline font-semibold" href="https://rentry.co/FMHY-Invite/">
<a
class="text-primary text-underline font-semibold"
href="https://rentry.co/FMHY-Invite/"
>
Discord.
</a>
</p>
<div class="flex flex-row gap-2">
<button
class="bg-$vp-c-default-soft text-primary border-$vp-c-default-soft inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-1.5 py-3.5 text-sm font-medium transition-all duration-300 sm:h-6"
@click="feedback.type = undefined">
@click="feedback.type = undefined"
>
<span class="i-lucide:panel-left-close">close</span>
</button>
<button type="submit"
<button
type="submit"
class="border border-div rounded-lg transition-colors duration-250 inline-block text-14px font-500 leading-1.5 px-3 py-3 text-center align-middle whitespace-nowrap disabled:opacity-50 text-text-2 bg-brand-100 dark:bg-brand-700 border-brand-800 dark:border-brand-700 disabled:bg-brand-100 dark:disabled:bg-brand-900 hover:border-brand-900 dark:hover:border-brand-800 hover:bg-brand-200 dark:hover:bg-brand-800"
:disabled="isDisabled" @click="handleSubmit()">
:disabled="isDisabled"
@click="handleSubmit()"
>
Send Feedback 📩
</button>
</div>

11
website/theme/components/SidebarCard.vue
View file

@ -7,7 +7,8 @@ import ToggleStarred from './ToggleStarred.vue'
<template>
<div
class="bg-$vp-c-bg border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500">
class="bg-$vp-c-bg border-$vp-c-default-soft hover:border-primary transition-border relative z-0 rounded-lg border-2 border-solid p-5 duration-500"
>
<div class="align-center mb-4 flex justify-between">
<div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">
Emoji Legend
@ -24,14 +25,10 @@ import ToggleStarred from './ToggleStarred.vue'
<ToggleStarred />
</template>
</InputField>
<InputField
id="icon-color"
label="Color"
>
<InputField id="icon-color" label="Color">
<template #display>
<ColorPicker class="ml-auto"/>
<ColorPicker class="ml-auto" />
</template>
</InputField>
</div>
</template>

98
website/theme/components/VPButton.vue
View file

@ -10,18 +10,18 @@ function treatAsHtml(filename: string): boolean {
(import.meta as any).env?.VITE_EXTRA_EXTENSIONS ||
''
// md, html? are intentionally omitted
; (
'3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
'yaml,yml,zip' +
(extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
)
.split(',')
.forEach((ext) => KNOWN_EXTENSIONS.add(ext))
// md, html? are intentionally omitted
;(
'3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
'yaml,yml,zip' +
(extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
)
.split(',')
.forEach((ext) => KNOWN_EXTENSIONS.add(ext))
}
const ext = filename.split('.').pop()
@ -51,12 +51,12 @@ function normalizeLink(url: string): string {
pathname.endsWith('/') || pathname.endsWith('.html')
? url
: url.replace(
/(?:(^\.+)\/)?.*$/,
`$1${pathname.replace(
/(\.md)?$/,
site.value.cleanUrls ? '' : '.html'
)}${search}${hash}`
)
/(?:(^\.+)\/)?.*$/,
`$1${pathname.replace(
/(\.md)?$/,
site.value.cleanUrls ? '' : '.html'
)}${search}${hash}`
)
return withBase(normalizedPath)
}
@ -134,14 +134,22 @@ const processedItems = computed(() => {
<template>
<div v-if="theme === 'brand'" class="VPButtonDropdown" ref="dropdownRef">
<div class="VPButtonWrapper">
<component :is="component" class="VPButton VPButtonMain" :class="[size, theme]"
:href="href ? normalizeLink(href) : undefined" :target="props.target ?? (isExternal ? '_blank' : undefined)"
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)">
<component
:is="component"
class="VPButton VPButtonMain"
:class="[size, theme]"
:href="href ? normalizeLink(href) : undefined"
:target="props.target ?? (isExternal ? '_blank' : undefined)"
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
>
<slot>{{ text }}</slot>
</component>
<button
class="bg-$vp-c-default-soft text-text border-$vp-c-default-soft hover:bg-$vp-c-default-hover active:bg-$vp-c-default-active inline-flex items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-2.5 py-5 text-md font-medium sm:h-7 VPButtonTrigger"
@click="toggleDropdown" :aria-expanded="isDropdownOpen" aria-label="Toggle dropdown menu">
@click="toggleDropdown"
:aria-expanded="isDropdownOpen"
aria-label="Toggle dropdown menu"
>
<span class="i-lucide:menu"></span>
</button>
</div>
@ -151,12 +159,22 @@ const processedItems = computed(() => {
<template v-for="item in processedItems" :key="item.text">
<div v-if="'items' in item" class="VPButtonDropdownSection">
<div class="VPButtonDropdownSectionTitle" v-html="item.text"></div>
<a v-for="subItem in item.items" :key="subItem.text" :href="subItem.link" class="VPButtonDropdownItem"
@click="closeDropdown">
<a
v-for="subItem in item.items"
:key="subItem.text"
:href="subItem.link"
class="VPButtonDropdownItem"
@click="closeDropdown"
>
<span v-html="subItem.displayText"></span>
</a>
</div>
<a v-else :href="item.link" class="VPButtonDropdownItem" @click="closeDropdown">
<a
v-else
:href="item.link"
class="VPButtonDropdownItem"
@click="closeDropdown"
>
<span v-html="item.displayText"></span>
</a>
</template>
@ -164,9 +182,15 @@ const processedItems = computed(() => {
</div>
</div>
<component v-else :is="component" class="VPButton" :class="[size, theme]"
:href="href ? normalizeLink(href) : undefined" :target="props.target ?? (isExternal ? '_blank' : undefined)"
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)">
<component
v-else
:is="component"
class="VPButton"
:class="[size, theme]"
:href="href ? normalizeLink(href) : undefined"
:target="props.target ?? (isExternal ? '_blank' : undefined)"
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
>
<slot>{{ text }}</slot>
</component>
</template>
@ -178,11 +202,17 @@ const processedItems = computed(() => {
text-align: center;
font-weight: 600;
white-space: nowrap;
transition: color 0.25s, border-color 0.25s, background-color 0.25s;
transition:
color 0.25s,
border-color 0.25s,
background-color 0.25s;
}
.VPButton:active {
transition: color 0.1s, border-color 0.1s, background-color 0.1s;
transition:
color 0.1s,
border-color 0.1s,
background-color 0.1s;
}
.VPButton.medium {
@ -282,7 +312,9 @@ const processedItems = computed(() => {
background-color: var(--vp-c-bg-elv);
border: 1px solid var(--vp-c-divider);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.08);
min-width: 280px;
max-height: 400px;
overflow-y: auto;
@ -332,14 +364,14 @@ const processedItems = computed(() => {
flex-shrink: 0;
}
.VPButtonDropdownItem span :deep([class*="i-"]) {
.VPButtonDropdownItem span :deep([class*='i-']) {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-right: 8px;
}
.VPButtonDropdownSectionTitle :deep([class*="i-"]) {
.VPButtonDropdownSectionTitle :deep([class*='i-']) {
width: 14px;
height: 14px;
flex-shrink: 0;

2
website/theme/style.scss
View file

@ -133,7 +133,6 @@
text-decoration-style: solid;
}
::selection {
background-color: var(--vp-c-brand-400, #5586a6);
@ -195,7 +194,6 @@
}
}
#VPContent strong > a {
font-weight: bold;
}