This commit is contained in:
taskylizard 2023-11-14 22:48:52 +05:30
parent fbebbefb80
commit ffedc34675
No known key found for this signature in database
GPG Key ID: 5CABA3D642DDC497
11 changed files with 97 additions and 69 deletions

View File

@ -9,12 +9,14 @@ export const meta = {
// Netlify to Cloudflare otherwise dev // Netlify to Cloudflare otherwise dev
export const commitRef = process.env.COMMIT_REF export const commitRef = process.env.COMMIT_REF
? `<a href="https://github.com/fmhy/FMHYEdit/commit/${process.env.COMMIT_REF ? `<a href="https://github.com/fmhy/FMHYEdit/commit/${
}">${process.env.COMMIT_REF.slice(0, 8)}</a>` process.env.COMMIT_REF
}">${process.env.COMMIT_REF.slice(0, 8)}</a>`
: process.env.CF_PAGES : process.env.CF_PAGES
? `<a href="https://github.com/fmhy/FMHYEdit/commit/${process.env.CF_PAGES_COMMIT_SHA ? `<a href="https://github.com/fmhy/FMHYEdit/commit/${
process.env.CF_PAGES_COMMIT_SHA
}">${process.env.CF_PAGES_COMMIT_SHA.slice(0, 8)}</a>` }">${process.env.CF_PAGES_COMMIT_SHA.slice(0, 8)}</a>`
: "dev"; : "dev";
export const socials: DefaultTheme.SocialLink[] = [ export const socials: DefaultTheme.SocialLink[] = [
{ icon: "github", link: "https://github.com/fmhy/FMHYEdit" }, { icon: "github", link: "https://github.com/fmhy/FMHYEdit" },

View File

@ -6,28 +6,31 @@ export function generateMeta(context: TransformContext, hostname: string) {
const url = `${hostname}/${pageData.relativePath.replace(/((^|\/)index)?\.md$/, "$2")}`; const url = `${hostname}/${pageData.relativePath.replace(/((^|\/)index)?\.md$/, "$2")}`;
head.push(["link", { rel: "canonical", href: url }]); head.push(
head.push(["meta", { property: "og:url", content: url }]); ["link", { rel: "canonical", href: url }],
head.push(["meta", { name: "twitter:url", content: url }]); ["meta", { property: "og:url", content: url }],
head.push(["meta", { name: "twitter:card", content: "summary_large_image" }]); ["meta", { name: "twitter:url", content: url }],
["meta", { name: "twitter:card", content: "summary_large_image" }],
head.push(["meta", { property: "og:title", content: pageData.frontmatter.title }]); ["meta", { property: "og:title", content: pageData.frontmatter.title }],
head.push(["meta", { name: "twitter:title", content: pageData.frontmatter.title }]); ["meta", { name: "twitter:title", content: pageData.frontmatter.title }],
);
if (pageData.frontmatter.description) { if (pageData.frontmatter.description) {
head.push([ head.push(
"meta", [
{ "meta",
property: "og:description", {
content: pageData.frontmatter.description, property: "og:description",
}, content: pageData.frontmatter.description,
]); },
head.push([ ],
"meta", [
{ "meta",
name: "twitter:description", {
content: pageData.frontmatter.description, name: "twitter:description",
}, content: pageData.frontmatter.description,
]); },
],
);
} }
if (pageData.frontmatter.image) { if (pageData.frontmatter.image) {
head.push([ head.push([
@ -46,17 +49,19 @@ export function generateMeta(context: TransformContext, hostname: string) {
]); ]);
} else { } else {
const url = pageData.filePath.replace("index.md", "").replace(".md", ""); const url = pageData.filePath.replace("index.md", "").replace(".md", "");
const imageUrl = `${url}/__og_image__/og.png`.replace(/\/\//g, "/").replace(/^\//, ""); const imageUrl = `${url}/__og_image__/og.png`.replaceAll("//", "/").replace(/^\//, "");
head.push(["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }]); head.push(
head.push(["meta", { property: "og:image:width", content: "1200" }]); ["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }],
head.push(["meta", { property: "og:image:height", content: "628" }]); ["meta", { property: "og:image:width", content: "1200" }],
head.push(["meta", { property: "og:image:type", content: "image/png" }]); ["meta", { property: "og:image:height", content: "628" }],
head.push(["meta", { property: "og:image:alt", content: pageData.frontmatter.title }]); ["meta", { property: "og:image:type", content: "image/png" }],
head.push(["meta", { name: "twitter:image", content: `${hostname}/${imageUrl}` }]); ["meta", { property: "og:image:alt", content: pageData.frontmatter.title }],
head.push(["meta", { name: "twitter:image:width", content: "1200" }]); ["meta", { name: "twitter:image", content: `${hostname}/${imageUrl}` }],
head.push(["meta", { name: "twitter:image:height", content: "628" }]); ["meta", { name: "twitter:image:width", content: "1200" }],
head.push(["meta", { name: "twitter:image:alt", content: pageData.frontmatter.title }]); ["meta", { name: "twitter:image:height", content: "628" }],
["meta", { name: "twitter:image:alt", content: pageData.frontmatter.title }],
);
} }
if (pageData.frontmatter.tag) { if (pageData.frontmatter.tag) {
head.push(["meta", { property: "article:tag", content: pageData.frontmatter.tag }]); head.push(["meta", { property: "article:tag", content: pageData.frontmatter.tag }]);

View File

@ -80,7 +80,7 @@ async function generateImage({ page, template, outDir, fonts }: GenerateImagesOp
const render = await renderAsync(svg); const render = await renderAsync(svg);
const outputFolder = resolve(outDir, url.substring(1), "__og_image__"); const outputFolder = resolve(outDir, url.slice(1), "__og_image__");
const outputFile = resolve(outputFolder, "og.png"); const outputFile = resolve(outputFolder, "og.png");
await mkdir(outputFolder, { recursive: true }); await mkdir(outputFolder, { recursive: true });

View File

@ -1,7 +1,9 @@
import { readFile } from "node:fs/promises"; import { readFile } from "node:fs/promises";
import { dirname, resolve } from "node:path"; import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url"; import { fileURLToPath } from "node:url";
import { SatoriOptions, defineSatoriConfig } from "x-satori/vue"; import type { SatoriOptions } from "x-satori/vue";
import { defineSatoriConfig } from "x-satori/vue";
const __dirname = dirname(fileURLToPath(import.meta.url)); const __dirname = dirname(fileURLToPath(import.meta.url));
const __fonts = resolve(__dirname, "../fonts"); const __fonts = resolve(__dirname, "../fonts");

View File

@ -1,5 +1,5 @@
import { writeFile, readFile } from "node:fs/promises";
import { defineLoader } from "vitepress"; import { defineLoader } from "vitepress";
import { writeFile, readFile } from "fs/promises";
interface Data { interface Data {
title?: string; title?: string;
@ -10,7 +10,7 @@ declare const data: Data;
export { data }; export { data };
const page = "https://rentry.co/fmhy-guides/raw"; const page = "https://rentry.co/fmhy-guides/raw";
const regex = /\* \[([^\]]+)\]\(([^)]+)\)/g; const regex = /\* \[([^\]]+)]\(([^)]+)\)/g;
const rentryRe = /(?<=rentry\.(co|org)).*/; const rentryRe = /(?<=rentry\.(co|org)).*/;
const guides = new Set<Data>(); const guides = new Set<Data>();
@ -29,8 +29,8 @@ export default defineLoader({
const title = match[1]; const title = match[1];
const url = match[2]; const url = match[2];
// Fetch rentry guides // Fetch rentry guides
if (url.match(rentryRe)) { if (rentryRe.test(url)) {
const content = await f(url + "/raw"); const content = await f(`${url}/raw`);
guides.add({ title, content }); guides.add({ title, content });
} else { } else {
// Everything else can be here // Everything else can be here

View File

@ -37,7 +37,7 @@ export default defineEventHandler(async (event) => {
{ {
color: 3447003, color: 3447003,
title: getFeedbackOption(type).label, title: getFeedbackOption(type).label,
description: description, description,
}, },
], ],
}) })

View File

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from "vue"; import { reactive, ref } from "vue";
import { useRoute } from "vitepress"; import { useRoute } from "vitepress";
import type { FeedbackType } from "../../types/Feedback";
import { fetcher } from "itty-fetcher"; import { fetcher } from "itty-fetcher";
import type { FeedbackType } from "../../types/Feedback";
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const error = ref<unknown>(null); const error = ref<unknown>(null);
@ -57,8 +57,8 @@ async function handleSubmit(type?: FeedbackType["type"]) {
if (data.status === "success") { if (data.status === "success") {
success.value = true; success.value = true;
} }
} catch (err) { } catch (error_) {
error.value = err; error.value = error_;
} finally { } finally {
loading.value = false; loading.value = false;
} }

View File

@ -10,9 +10,7 @@ import {
} from "@headlessui/vue"; } from "@headlessui/vue";
const isOpen = ref(true); const isOpen = ref(true);
interface ILogger { interface ILogger {}
}
const feedbackOptions = [ const feedbackOptions = [
{ {
@ -36,20 +34,36 @@ function openModal() {
</script> </script>
<template> <template>
<button type="button" class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled" @click="openModal" /> <button
type="button"
class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
@click="openModal"
/>
<TransitionRoot appear :show="isOpen" as="template"> <TransitionRoot appear :show="isOpen" as="template">
<Dialog as="div" @close="closeModal" class="relative z-10"> <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" <TransitionChild
leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0"> 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" /> <div class="fixed inset-0 bg-black/25" />
</TransitionChild> </TransitionChild>
<div class="fixed inset-0 overflow-y-auto"> <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" enter-from="opacity-0 scale-95" <TransitionChild
enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100" as="template"
leave-to="opacity-0 scale-95"> 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 <DialogPanel
class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all"> 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"> <DialogTitle as="h3" class="text-lg font-medium leading-6 text-text">
@ -58,25 +72,30 @@ function openModal() {
<div class="mt-2"> <div class="mt-2">
<div class="grid gap-[0.5rem]"> <div class="grid gap-[0.5rem]">
<button v-for="item in feedbackOptions" :key="item.value" <button
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"> 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"
>
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
</button> </button>
</div> </div>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<div> <div>
<label for="feedback-input-text" class="field-label">Feedback*</label> <label for="feedback-input-text" class="field-label">Feedback*</label>
<textarea id="feedback-input-text" placeholder="meow" rows="5" /> <textarea id="feedback-input-text" placeholder="meow" rows="5" />
</div> </div>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<button type="button" <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" 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 Close
</button> </button>
</div> </div>

View File

@ -7,7 +7,7 @@ defineProps<{
<template> <template>
<div class="input-field"> <div class="input-field">
<div class="input-label" v-if="label"> <div v-if="label" class="input-label">
<label :for="id" class="pane-label"> <label :for="id" class="pane-label">
{{ label }} {{ label }}
</label> </label>

View File

@ -10,9 +10,9 @@ import ToggleStarred from "./ToggleStarred.vue";
<div class="card-header"> <div class="card-header">
<div class="card-title">Emoji Legend</div> <div class="card-title">Emoji Legend</div>
</div> </div>
<Field icon="i-twemoji-star">Recommendations</Field> <Field icon="i-twemoji-star"> Recommendations </Field>
<Field icon="i-twemoji-globe-with-meridians">Indexes</Field> <Field icon="i-twemoji-globe-with-meridians"> Indexes </Field>
<Field icon="i-twemoji-repeat-button">Storage Links</Field> <Field icon="i-twemoji-repeat-button"> Storage Links </Field>
<div class="card-header"> <div class="card-header">
<div class="card-title">Options</div> <div class="card-title">Options</div>
</div> </div>

View File

@ -6,6 +6,6 @@ import "uno.css";
export default { export default {
extends: DefaultTheme, extends: DefaultTheme,
Layout: Layout, Layout,
enhanceApp({ app, router, siteData }) {}, enhanceApp({ app, router, siteData }) {},
} satisfies Theme; } satisfies Theme;