Lint project

This commit is contained in:
Soitora 2023-09-05 22:36:12 +02:00
parent 4f2431c306
commit d87ab7fc72
No known key found for this signature in database
GPG Key ID: A6D711EB4F2CCD97
19 changed files with 143 additions and 171 deletions

View File

@ -11,7 +11,7 @@ import generateOgImages from "./config/hooks/generateOgImages";
const title = "Tachiyomi"; const title = "Tachiyomi";
const description = "Read your favorite manga, webtoons, comics, and more easier than ever on your Android."; const description = "Read your favorite manga, webtoons, comics, and more easier than ever on your Android.";
const env = loadEnv("", process.cwd()) const env = loadEnv("", process.cwd());
const hostname: string = env.VITE_HOSTNAME || "http://localhost:4173"; const hostname: string = env.VITE_HOSTNAME || "http://localhost:4173";
export default defineConfig({ export default defineConfig({

View File

@ -69,12 +69,8 @@ const generateMeta = (context: TransformContext, hostname: string) => {
}, },
]); ]);
} else { } else {
const url = pageData.filePath const url = pageData.filePath.replace("index.md", "").replace(".md", "");
.replace("index.md", "") const imageUrl = `${url}/__og_image__/og.png`.replace(/\/\//g, "/").replace(/^\//, "");
.replace(".md", "");
const imageUrl = `${url}/__og_image__/og.png`
.replace(/\/\//g, "/")
.replace(/^\//, "");
head.push(["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }]); head.push(["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }]);
head.push(["meta", { property: "og:image:width", content: "1200" }]); head.push(["meta", { property: "og:image:width", content: "1200" }]);

View File

@ -10,7 +10,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
const __fonts = resolve(__dirname, "../../fonts"); const __fonts = resolve(__dirname, "../../fonts");
async function generateOgImages(config: SiteConfig) { async function generateOgImages(config: SiteConfig) {
const pages = await createContentLoader("**/*.md", { excerpt: true }).load() const pages = await createContentLoader("**/*.md", { excerpt: true }).load();
const template = await readFile(resolve(__dirname, "../../theme/components/OgImageTemplate.vue"), "utf-8"); const template = await readFile(resolve(__dirname, "../../theme/components/OgImageTemplate.vue"), "utf-8");
const fonts: SatoriOptions["fonts"] = [ const fonts: SatoriOptions["fonts"] = [
@ -40,14 +40,14 @@ async function generateOgImages(config: SiteConfig) {
}, },
]; ];
const filteredPages = pages.filter(p => p.frontmatter.image === undefined); const filteredPages = pages.filter((p) => p.frontmatter.image === undefined);
for (const page of filteredPages) { for (const page of filteredPages) {
await generateImage({ await generateImage({
page, page,
template, template,
outDir: config.outDir, outDir: config.outDir,
fonts fonts,
}); });
} }
} }
@ -69,19 +69,17 @@ async function generateImage({ page, template, outDir, fonts }: GenerateImagesOp
height: 628, height: 628,
fonts, fonts,
props: { props: {
title: frontmatter.layout === "home" title:
? (frontmatter.hero.name ?? frontmatter.title.replace(/\s\-.*$/, "")) frontmatter.layout === "home"
: (frontmatter.customMetaTitle ?? frontmatter.title.replace(/\s\-.*$/, "")), ? frontmatter.hero.name ?? frontmatter.title.replace(/\s\-.*$/, "")
description: frontmatter.layout === "home" : frontmatter.customMetaTitle ?? frontmatter.title.replace(/\s\-.*$/, ""),
? (frontmatter.hero.tagline ?? frontmatter.description) description:
frontmatter.layout === "home"
? frontmatter.hero.tagline ?? frontmatter.description
: frontmatter.description, : frontmatter.description,
dir: (url.startsWith("/docs/faq/")) dir: url.startsWith("/docs/faq/") ? "FAQ" : url.startsWith("/docs/guides/") ? "Guide" : undefined,
? "FAQ" },
: (url.startsWith("/docs/guides/")) };
? "Guide"
: undefined,
}
}
const svg = await satoriVue(options, template); const svg = await satoriVue(options, template);

View File

@ -24,7 +24,6 @@ const markdownConfig: MarkdownOptions = {
md.use(shortcode_plugin, shortcodes); md.use(shortcode_plugin, shortcodes);
}, },
}; };
export default markdownConfig; export default markdownConfig;

View File

@ -8,7 +8,7 @@ const nav = [
}, },
{ {
text: APP_VERSION, text: APP_VERSION,
activeMatch: "^\/*?(download|changelogs)\/*?$", activeMatch: "^/*?(download|changelogs)/*?$",
items: [ items: [
{ {
text: "Download", text: "Download",

View File

@ -56,14 +56,14 @@ const dateFormatter = new Intl.DateTimeFormat("en", {
<style lang="stylus" scoped> <style lang="stylus" scoped>
h2 { h2 {
margin-bottom: 0; margin-bottom: 0
display: flex; display: flex
align-items: center; align-items: center
gap: 0.5rem; gap: 0.5rem
} }
time { time {
font-size: 0.875rem; font-size: 0.875rem
color: var(--vp-c-text-2); color: var(--vp-c-text-2)
} }
</style> </style>

View File

@ -81,29 +81,29 @@ function addToNonExistent(user: string) {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.contributors { .contributors {
ul { ul {
display: flex; display: flex
align-items: center; align-items: center
flex-wrap: wrap; flex-wrap: wrap
gap: 0.5rem; gap: 0.5rem
list-style-type: none; list-style-type: none
padding-left: 0; padding-left: 0
li + li { li + li {
margin-top: 0; margin-top: 0
} }
} }
.avatar { .avatar {
width: 32px; width: 32px
height: 32px; height: 32px
border-radius: 50%; border-radius: 50%
box-shadow: var(--vp-shadow-1); box-shadow: var(--vp-shadow-1)
border: 1px solid var(--vp-c-divider); border: 1px solid var(--vp-c-divider)
} }
.names { .names {
font-size: 0.875rem; font-size: 0.875rem
color: var(--vp-c-text-2); color: var(--vp-c-text-2)
} }
} }
</style> </style>

View File

@ -1,50 +0,0 @@
<script>
import { langName, simpleLangName } from "../../../config/scripts/languages";
import ExtensionItem from "./ExtensionItem.vue";
export default {
components: { ExtensionItem },
props: ["list", "totalCount"],
computed: {
groupName: function () {
const firstItem = this.list[0];
return firstItem.lang === "en" ? simpleLangName(firstItem.lang) : langName(firstItem.lang);
},
},
methods: {
simpleLangName,
langName,
},
};
</script>
<template>
<div class="extension-group">
<h2>
{{ groupName }}
<span class="extensions-total">
Total:
<span class="extensions-total-sum">
{{ totalCount }}
</span>
</span>
</h2>
<ExtensionItem
v-for="extension in list"
:id="extension.pkg.replace('eu.kanade.tachiyomi.extension.', '')"
:key="extension.apk"
:item="extension"
/>
</div>
</template>
<style lang="stylus">
.extensions-total {
float: right
&-sum {
color: var(--vp-c-brand)
}
}
</style>

View File

@ -77,7 +77,7 @@ export default {
.extension-icon { .extension-icon {
flex-shrink: 0 flex-shrink: 0
margin-left: -4px; margin-left: -4px
} }
.extension-text { .extension-text {
@ -129,7 +129,7 @@ export default {
} }
@media (max-width 767px) { @media (max-width 767px) {
padding: 0.4em 0em padding: 0.4em 0
} }
} }
@ -144,7 +144,7 @@ export default {
padding: 0.5em padding: 0.5em
.extension-icon { .extension-icon {
margin-left: 0; margin-left: 0
} }
.extension-download { .extension-download {

View File

@ -33,14 +33,15 @@ const dateFormatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
<style lang="stylus" scoped> <style lang="stylus" scoped>
.news { .news {
display: flex; display: flex
flex-direction: column; flex-direction: column
gap: 0.5rem gap: 0.5rem
position: relative position: relative
&:first-of-type { &:first-of-type {
margin-top: 3rem margin-top: 3rem
} }
& + .news { & + .news {
margin-top: 3rem margin-top: 3rem
} }
@ -52,7 +53,8 @@ const dateFormatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
z-index: 10 z-index: 10
} }
h3, p { h3,
p {
margin: 0 margin: 0
} }
@ -77,7 +79,10 @@ const dateFormatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
} }
} }
.title, .readPrompt, p, time { .title,
.readPrompt,
p,
time {
position: relative position: relative
} }
@ -102,7 +107,8 @@ const dateFormatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
} }
} }
.hover, .background { .hover,
.background {
position: absolute position: absolute
z-index: 20 z-index: 20
bottom: -1rem bottom: -1rem
@ -117,18 +123,27 @@ const dateFormatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
transform: scale(0.95) transform: scale(0.95)
opacity: 0 opacity: 0
z-index: 0 z-index: 0
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)
transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
} }
&:hover .background, &:focus-within .background { &:hover .background,
&:focus-within .background {
opacity: 1 opacity: 1
transform: scale(1) transform: scale(1)
} }
h3 a:focus-visible + .background { h3: a
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2)
}
:focus-visible + .background {
outline: 2px solid var(--vp-c-brand-2) outline: 2px solid var(--vp-c-brand-2)
} }
} }
</style> </style>

View File

@ -24,6 +24,6 @@
<div v-if="description" tw="mt-2 text-4xl text-slate-600">{{ description }}</div> <div v-if="description" tw="mt-2 text-4xl text-slate-600">{{ description }}</div>
</div> </div>
</div> </div>
<div tw="shrink-0 h-2 w-full flex" style="background-color: #8995FF;" /> <div tw="shrink-0 h-2 w-full flex" style="background-color: #8995ff;" />
</div> </div>
</template> </template>

View File

@ -50,7 +50,7 @@ const whatsNew = computed(() => {
transition: border-color 0.25s, background-color 0.25s transition: border-color 0.25s, background-color 0.25s
padding: 24px padding: 24px
height: 100% height: 100%
margin: 1.5em auto 0.5em auto margin: 1.5em auto 0.5em
header { header {
display: flex display: flex

View File

@ -1,4 +1,4 @@
import { defineLoader } from "vitepress" import { defineLoader } from "vitepress";
import { Octokit } from "@octokit/rest"; import { Octokit } from "@octokit/rest";
import type { GetResponseDataTypeFromEndpointMethod } from "@octokit/types"; import type { GetResponseDataTypeFromEndpointMethod } from "@octokit/types";
@ -18,5 +18,5 @@ export default defineLoader({
}); });
return releases; return releases;
} },
}); });

View File

@ -1,4 +1,4 @@
import { defineLoader, createContentLoader } from "vitepress" import { defineLoader, createContentLoader } from "vitepress";
export interface News { export interface News {
title: string; title: string;
@ -16,12 +16,15 @@ export default defineLoader({
return articles return articles
.filter(({ url }) => url !== "/news/") .filter(({ url }) => url !== "/news/")
.map(({ frontmatter, url }) => <News>({ .map(
({ frontmatter, url }) =>
<News>{
title: frontmatter.title, title: frontmatter.title,
description: frontmatter.description, description: frontmatter.description,
date: frontmatter.date, date: frontmatter.date,
url, url,
}))
.sort((a, b) => b.date.localeCompare(a.date));
} }
)
.sort((a, b) => b.date.localeCompare(a.date));
},
}); });

View File

@ -1,4 +1,4 @@
import { defineLoader } from "vitepress" import { defineLoader } from "vitepress";
import { Octokit } from "@octokit/rest"; import { Octokit } from "@octokit/rest";
import type { GetResponseDataTypeFromEndpointMethod } from "@octokit/types"; import type { GetResponseDataTypeFromEndpointMethod } from "@octokit/types";
@ -27,5 +27,5 @@ export default defineLoader({
}); });
return { stable, preview }; return { stable, preview };
} },
}); });

View File

@ -117,13 +117,14 @@ html:not(.dark) {
/** /**
* Component: LocalSearch * Component: LocalSearch
*/ */
.VPLocalSearchBox { .VPLocalSearchBox {
--vp-local-search-highlight-bg: var(--vp-c-brand-soft); --vp-local-search-highlight-bg: var(--vp-c-brand-soft)
--vp-local-search-highlight-text: var(--vp-c-brand-dark); --vp-local-search-highlight-text: var(--vp-c-brand-dark)
} }
.dark .VPLocalSearchBox { .dark .VPLocalSearchBox {
--vp-local-search-highlight-text: var(--vp-c-brand-lightest); --vp-local-search-highlight-text: var(--vp-c-brand-lightest)
} }
/** /**
@ -191,6 +192,7 @@ main :where(h1, h2, h3, h4, h5, h6) + figure {
/** /**
* Component: Shortcodes * Component: Shortcodes
* -------------------------------------------------------------------------- */ * -------------------------------------------------------------------------- */
.navigation { .navigation {
color: var(--vp-c-text-2) color: var(--vp-c-text-2)
font-weight: 600 font-weight: 600
@ -202,7 +204,7 @@ main :where(h1, h2, h3, h4, h5, h6) + figure {
svg, svg,
span.name { span.name {
vertical-align: middle; /* Align both SVG and <span> vertically */ vertical-align: middle // Align both SVG and <span> vertically
} }
svg { svg {

View File

@ -0,0 +1,9 @@
.extension-list {
> div {
&:not(:first-of-type) {
.extensions-total {
display: none
}
}
}
}