Add a news archive page (#19)

* Add a news archive page.

* Fix read prompt color on dark.

* Change news time position.

website/package.json

@@ -80,7 +80,6 @@
 		"element-plus": "^2.3.12",
 		"lodash.groupby": "^4.6.0",
 		"markdown-it": "^13.0.1",
-		"moment": "^2.29.4",
+		"moment": "^2.29.4"
-		"vitepress-plugin-auto-sidebar": "^1.1.0"
 	}
 }

website/pnpm-lock.yaml

@@ -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:

website/src/.vitepress/config/navigation/sidebar.ts

@@ -1,14 +1,8 @@
-import { getSidebar } from "vitepress-plugin-auto-sidebar";
-
 const sidebar = {
 	"/docs/": defaultSidebar(),
 	"/forks/": defaultSidebar(),
 	"/changelogs/": defaultSidebar(),
-	"/news/": getSidebar({
+	"/news/": defaultSidebar(),
-		contentRoot: "/src/",
-		contentDirs: ["news"],
-		collapsed: false,
-	}),
 };
 
 function defaultSidebar() {
@@ -132,6 +126,10 @@ function defaultSidebar() {
 					text: "Forks",
 					link: "/forks/",
 				},
+				{
+					text: "News",
+					link: "/news/",
+				},
 			],
 		},
 	];

website/src/.vitepress/theme/components/News.vue

@@ -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>

website/src/.vitepress/theme/data/news.data.ts

@@ -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));
+	}
+});

website/src/news/index.md

@@ -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 />

website/src/news/updated-website.md

@@ -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*.