mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-20 23:22:00 +01:00
Add a news archive page (#19)
* Add a news archive page. * Fix read prompt color on dark. * Change news time position.
This commit is contained in:
Alessandro Jean
GitHub
parent
ae56247633
commit
af01a3cdd1
@ -80,7 +80,6 @@
|
||||
"element-plus": "^2.3.12",
|
||||
"lodash.groupby": "^4.6.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"moment": "^2.29.4",
|
||||
"vitepress-plugin-auto-sidebar": "^1.1.0"
|
||||
"moment": "^2.29.4"
|
||||
}
|
||||
}
|
||||
|
||||
8
website/pnpm-lock.yaml
generated
8
website/pnpm-lock.yaml
generated
@ -28,9 +28,6 @@ dependencies:
|
||||
moment:
|
||||
specifier: ^2.29.4
|
||||
version: 2.29.4
|
||||
vitepress-plugin-auto-sidebar:
|
||||
specifier: ^1.1.0
|
||||
version: 1.1.0
|
||||
|
||||
devDependencies:
|
||||
'@mdit/plugin-attrs':
|
||||
@ -4784,11 +4781,6 @@ packages:
|
||||
fsevents: 2.3.3
|
||||
dev: true
|
||||
|
||||
/vitepress-plugin-auto-sidebar@1.1.0:
|
||||
resolution: {integrity: sha512-LgkpjKVlNlQS54PFv5R/Y4+CHtHoXsJ3xgyVTKNi0sG1fXUmViKCg3Hnl9eo/SfNn894qsNRXoNneQmRBP2Lmw==}
|
||||
engines: {node: ^14.13.1 || ^16.7.0 || >=18}
|
||||
dev: false
|
||||
|
||||
/vitepress-plugin-tabs@0.3.0(vitepress@1.0.0-rc.10)(vue@3.3.4):
|
||||
resolution: {integrity: sha512-3dKsBuP6PDzcFHgUtNCwwCs3bYoZduj7AcQkT9JfAKTRAKPCNmjiNInPT3IZ7AihL0SJNoQ3liz/e97z8oo+XA==}
|
||||
peerDependencies:
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
import { getSidebar } from "vitepress-plugin-auto-sidebar";
|
||||
|
||||
const sidebar = {
|
||||
"/docs/": defaultSidebar(),
|
||||
"/forks/": defaultSidebar(),
|
||||
"/changelogs/": defaultSidebar(),
|
||||
"/news/": getSidebar({
|
||||
contentRoot: "/src/",
|
||||
contentDirs: ["news"],
|
||||
collapsed: false,
|
||||
}),
|
||||
"/news/": defaultSidebar(),
|
||||
};
|
||||
|
||||
function defaultSidebar() {
|
||||
@ -132,6 +126,10 @@ function defaultSidebar() {
|
||||
text: "Forks",
|
||||
link: "/forks/",
|
||||
},
|
||||
{
|
||||
text: "News",
|
||||
link: "/news/",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
134
website/src/.vitepress/theme/components/News.vue
Normal file
134
website/src/.vitepress/theme/components/News.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<script setup lang="ts">
|
||||
import { data as newsList } from "../data/news.data";
|
||||
import { IconChevronRight } from "@iconify-prerendered/vue-mdi";
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat("en", { dateStyle: "medium" });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
v-for="news of newsList"
|
||||
:key="news.url"
|
||||
class="news"
|
||||
>
|
||||
<div>
|
||||
<h3>
|
||||
<a :href="news.url">
|
||||
<span class="hover" />
|
||||
<span class="title">{{ news.title }}</span>
|
||||
</a>
|
||||
<div class="background" />
|
||||
</h3>
|
||||
<time :datetime="news.date">
|
||||
{{ dateFormatter.format(new Date(news.date)) }}
|
||||
</time>
|
||||
</div>
|
||||
<p>{{ news.description }}</p>
|
||||
<div class="readPrompt" aria-hidden="true">
|
||||
<span>Read article</span>
|
||||
<IconChevronRight />
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.news {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem
|
||||
position: relative
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 3rem
|
||||
}
|
||||
& + .news {
|
||||
margin-top: 3rem
|
||||
}
|
||||
|
||||
time {
|
||||
font-size: 0.875rem
|
||||
line-height: 1.25rem
|
||||
color: var(--vp-c-text-2)
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
h3, p {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
h3 {
|
||||
position: unset
|
||||
font-size: 1.125rem
|
||||
line-height: 1.75rem
|
||||
letter-spacing: -0.025em
|
||||
}
|
||||
|
||||
h3 a {
|
||||
font-weight: 600
|
||||
color: var(--vp-c-text-1)
|
||||
|
||||
&:hover {
|
||||
color: var(--vp-c-text-1)
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none
|
||||
}
|
||||
}
|
||||
|
||||
.title, .readPrompt, p, time {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.title {
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
.readPrompt {
|
||||
font-weight: 500
|
||||
font-size: 0.875rem
|
||||
line-height: 1.25rem
|
||||
color: var(--vp-c-brand-1)
|
||||
display: flex
|
||||
align-items: center
|
||||
margin-top: 0.25rem
|
||||
|
||||
svg {
|
||||
margin-bottom: -2px
|
||||
margin-left: 0.25rem
|
||||
width: 1.25rem
|
||||
height: 1.25rem
|
||||
}
|
||||
}
|
||||
|
||||
.hover, .background {
|
||||
position: absolute
|
||||
z-index: 20
|
||||
bottom: -1rem
|
||||
top: -1rem
|
||||
left: -1rem
|
||||
right: -1rem
|
||||
border-radius: 12px
|
||||
}
|
||||
|
||||
.background {
|
||||
background-color: var(--vp-c-bg-soft)
|
||||
transform: scale(0.95)
|
||||
opacity: 0
|
||||
z-index: 0
|
||||
transition: opacity 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 {
|
||||
opacity: 1
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
h3 a:focus-visible + .background {
|
||||
outline: 2px solid var(--vp-c-brand-2)
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
27
website/src/.vitepress/theme/data/news.data.ts
Normal file
27
website/src/.vitepress/theme/data/news.data.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { defineLoader, createContentLoader } from "vitepress"
|
||||
|
||||
export interface News {
|
||||
title: string;
|
||||
description: string;
|
||||
date: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
declare const data: News[];
|
||||
export { data };
|
||||
|
||||
export default defineLoader({
|
||||
async load(): Promise<News[]> {
|
||||
const articles = await createContentLoader("news/*.md", { excerpt: true }).load();
|
||||
|
||||
return articles
|
||||
.filter(({ url }) => url !== "/news/")
|
||||
.map(({ frontmatter, url }) => <News>({
|
||||
title: frontmatter.title,
|
||||
description: frontmatter.description,
|
||||
date: frontmatter.date,
|
||||
url,
|
||||
}))
|
||||
.sort((a, b) => b.date.localeCompare(a.date));
|
||||
}
|
||||
});
|
||||
18
website/src/news/index.md
Normal file
18
website/src/news/index.md
Normal file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: News archive
|
||||
description: Collection of news and announcements about Tachiyomi.
|
||||
lastUpdated: false
|
||||
editLink: false
|
||||
prev: false
|
||||
next: false
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import News from "@theme/components/News.vue";
|
||||
</script>
|
||||
|
||||
# News archive
|
||||
|
||||
Collection of news and announcements about Tachiyomi.
|
||||
|
||||
<News />
|
||||
@ -7,4 +7,23 @@ date: 2023-07-20
|
||||
|
||||
# Updated website
|
||||
|
||||
We've got a fresh new website we hope will be even easier to use
|
||||
The website was updated to use [VitePress](https://vitepress.dev/), a modern
|
||||
tool that replaces [VuePress](https://vuepress.vuejs.org/), which was used
|
||||
by many years in our previous website. This change will make the user usability
|
||||
better and will also allow contributors to make changes more easier as the
|
||||
code is more robust and updated to use [Vue.js](https://vuejs.org/) v3.
|
||||
|
||||
Many improvements were done to several pages such as the [download](/download/)
|
||||
one, which now doesn't require any new additional requests. A new [changelogs](/changelogs/)
|
||||
page was also added to keep the history of all changes done in the app through time.
|
||||
|
||||
This page is part of the new [news](/news/) section in the website, which
|
||||
will be used in ocasions like this to keep you informed. We hope these changes
|
||||
will make the users experience better and keep the information more easy to find.
|
||||
|
||||
As we're still in the process of rewritting and updating part of the
|
||||
documentation and the guides, errors might be present in the texts. If you
|
||||
find any, please report by opening an issue in the [site repository](https://github.com/tachiyomiorg/website/issues/new/choose)
|
||||
on GitHub.
|
||||
|
||||
*The Tachiyomi Team*.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user