refactor: new features page, separate showcase page (#16)

docusaurus.config.ts

@@ -60,7 +60,7 @@ const config: Config = {
 					position: "left",
 					label: "Docs",
 				},
-				{ to: "/showcase", label: "Showcase", position: "left" },
+				{ to: "/features", label: "Features", position: "left" },
 				{ to: "/blog", label: "Blog", position: "left" },
 				{
 					href: "https://github.com/sxyazi/yazi",
@@ -73,15 +73,19 @@ const config: Config = {
 			style: "dark",
 			links: [
 				{
-					title: "Docs",
+					title: "Resources",
 					items: [
 						{
 							label: "Docs",
 							to: "/docs/installation",
 						},
 						{
-							label: "Showcase",
-							to: "/showcase",
+							label: "Features",
+							to: "/features",
+						},
+						{
+							label: "Blog",
+							to: "/blog",
 						},
 					],
 				},

src/components/Highlights/index.tsx

@@ -0,0 +1,59 @@
+import Heading from "@theme/Heading"
+
+import React from "react"
+import Link from "@docusaurus/Link"
+import clsx from "clsx"
+
+import styles from "./styles.module.css"
+
+export type CardProps = {
+	title: string
+	video: string
+	description: string
+}
+
+function Card(props: CardProps) {
+	return (
+		<li key={props.title} className="card shadow--md">
+			<div className={clsx("card__image")}>
+				<video src={props.video} width="100%" autoPlay controls loop muted></video>
+			</div>
+			<div className="card__body">
+				<Heading as="h4">{props.title}</Heading>
+				<p>{props.description}</p>
+			</div>
+			<ul className={clsx("card__footer")}></ul>
+		</li>
+	)
+}
+
+export function Header({
+	heading,
+	description,
+	link,
+}: {
+	heading: string
+	description?: string
+	link: { emoji: string; text: string; to: string }
+}) {
+	return (
+		<section className="margin-top--lg margin-bottom--lg text--center">
+			<Heading as="h1">{heading}</Heading>
+			{description && <p>{description}</p>}
+			<Link className={clsx("button button--primary", styles.space)} to={link.to}>
+				<span aria-hidden="true">{link.emoji}</span>
+				<span>{link.text}</span>
+			</Link>
+		</section>
+	)
+}
+
+export function Cards({ from: cards }: { from: CardProps[] }) {
+	return (
+		<section className="margin-top--lg margin-bottom--xl">
+			<div className="container">
+				<ul className={clsx("container", "clean-list", styles.cards)}>{cards.map(card => Card(card))}</ul>
+			</div>
+		</section>
+	)
+}

src/pages/showcase/styles.module.css → src/components/Highlights/styles.module.css

@@ -3,3 +3,8 @@
 	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
 	gap: 24px;
 }
+
+.space {
+	gap: 0.5rem;
+	display: inline-flex;
+}

src/components/HomepageFeatures/index.tsx → src/components/Landing/index.tsx

@@ -2,13 +2,13 @@ import clsx from "clsx"
 import Heading from "@theme/Heading"
 import styles from "./styles.module.css"
 
-type FeatureItem = {
+type CardProps = {
 	title: string
 	Svg: React.ComponentType<React.ComponentProps<"svg">>
 	description: JSX.Element
 }
 
-const FeatureList: FeatureItem[] = [
+const cards: CardProps[] = [
 	{
 		title: "Full Asynchronous Support",
 		Svg: require("@site/static/img/async.svg").default,
@@ -36,7 +36,7 @@ const FeatureList: FeatureItem[] = [
 	},
 ]
 
-function Feature({ title, Svg, description }: FeatureItem) {
+function Card({ title, Svg, description }: CardProps) {
 	return (
 		<div className={clsx("col col--3")}>
 			<div className="text--center">
@@ -50,13 +50,13 @@ function Feature({ title, Svg, description }: FeatureItem) {
 	)
 }
 
-export default function HomepageFeatures(): JSX.Element {
+export default function Landing(): JSX.Element {
 	return (
 		<section className={styles.features}>
 			<div className="container">
 				<div className="row">
-					{FeatureList.map((props, idx) => (
-						<Feature key={idx} {...props} />
+					{cards.map((props, idx) => (
+						<Card key={idx} {...props} />
 					))}
 				</div>
 			</div>

src/pages/features/index.tsx

@@ -0,0 +1,62 @@
+import Layout from "@theme/Layout"
+
+import { Header, Cards, CardProps } from "@site/src/components/Highlights"
+
+const features: CardProps[] = [
+	{
+		title: "Scrollable Preview",
+		video: "/videos/scrollable-preview.mp4",
+		description: "Preview various types of files, and scroll while previewing.",
+	},
+	{
+		title: "Visual Mode & Batch Rename",
+		video: "/videos/visual-mode_batch-rename.mp4",
+		description: "Batch select files in visual mode, and rename them.",
+	},
+	{
+		title: "Vim-like Input & Select Component",
+		video: "/videos/input_select.mp4",
+		description: "Quickly edit filename in the Input, and choose how to open it in the Select.",
+	},
+	{
+		title: "Multi-Tab & fzf, zoxide",
+		video: "/videos/multi-tab_zoxide.mp4",
+		description: "Collaborate across multiple tabs, and use fzf, zoxide for quick jumps.",
+	},
+	{
+		title: "Multi-Select & Task Management",
+		video: "/videos/multi-select_task-management.mp4",
+		description:
+			"Select multiple files individually, perform copy, cut, etc. Which are scheduled by the task system, providing real-time progress reports and task cancellation.",
+	},
+	{
+		title: "Incremental Find",
+		video: "/videos/incremental-find.mp4",
+		description:
+			"Find files incrementally in real-time, with the current position and number of all matches displayed.",
+	},
+	{
+		title: "Search",
+		video: "/videos/search.mp4",
+		description: "Search by name using fd, by content using rg, and perform arbitrary operations on the results.",
+	},
+]
+
+export default function Features(): JSX.Element {
+	return (
+		<Layout title="Features" description="List of Yazi's features.">
+			<main className="margin-vert--lg">
+				<Header
+					heading="Features"
+					description="List of features shipped with Yazi."
+					link={{
+						emoji: "✨",
+						text: "Suggest a feature!",
+						to: "https://github.com/sxyazi/yazi/issues/new?template=feature.yml",
+					}}
+				/>
+				<Cards from={features} />
+			</main>
+		</Layout>
+	)
+}

src/pages/index.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx"
 import Link from "@docusaurus/Link"
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
 import Layout from "@theme/Layout"
-import HomepageFeatures from "@site/src/components/HomepageFeatures"
+import Landing from "@site/src/components/Landing"
 import Heading from "@theme/Heading"
 
 import styles from "./index.module.css"
@@ -31,7 +31,7 @@ export default function Home(): JSX.Element {
 		<Layout description="Blazing fast terminal file manager written in Rust, based on async I/O.">
 			<HomepageHeader />
 			<main>
-				<HomepageFeatures />
+				<Landing />
 			</main>
 		</Layout>
 	)