diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 73874d3a..2925291c 100644 --- a/docusaurus.config.ts +++ b/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", }, ], }, diff --git a/src/components/Highlights/index.tsx b/src/components/Highlights/index.tsx new file mode 100644 index 00000000..31b1f888 --- /dev/null +++ b/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 ( +
  • +
    + +
    +
    + {props.title} +

    {props.description}

    +
    + +
  • + ) +} + +export function Header({ + heading, + description, + link, +}: { + heading: string + description?: string + link: { emoji: string; text: string; to: string } +}) { + return ( +
    + {heading} + {description &&

    {description}

    } + + + {link.text} + +
    + ) +} + +export function Cards({ from: cards }: { from: CardProps[] }) { + return ( +
    +
    + +
    +
    + ) +} diff --git a/src/pages/showcase/styles.module.css b/src/components/Highlights/styles.module.css similarity index 67% rename from src/pages/showcase/styles.module.css rename to src/components/Highlights/styles.module.css index d9c2ccd6..ecc232c5 100644 --- a/src/pages/showcase/styles.module.css +++ b/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; +} diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/Landing/index.tsx similarity index 86% rename from src/components/HomepageFeatures/index.tsx rename to src/components/Landing/index.tsx index 6eb1aecf..0930c2fb 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/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> 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 (
    @@ -50,13 +50,13 @@ function Feature({ title, Svg, description }: FeatureItem) { ) } -export default function HomepageFeatures(): JSX.Element { +export default function Landing(): JSX.Element { return (
    - {FeatureList.map((props, idx) => ( - + {cards.map((props, idx) => ( + ))}
    diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/Landing/styles.module.css similarity index 100% rename from src/components/HomepageFeatures/styles.module.css rename to src/components/Landing/styles.module.css diff --git a/src/pages/features/index.tsx b/src/pages/features/index.tsx new file mode 100644 index 00000000..b86e1c1b --- /dev/null +++ b/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 ( + +
    +
    + +
    +
    + ) +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 50710d00..deeffe97 100644 --- a/src/pages/index.tsx +++ b/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 {
    - +
    ) diff --git a/src/pages/showcase/index.tsx b/src/pages/showcase/index.tsx deleted file mode 100644 index 5842c5c2..00000000 --- a/src/pages/showcase/index.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import Layout from "@theme/Layout" -import Heading from "@theme/Heading" - -import React from "react" -import Link from "@docusaurus/Link" -import clsx from "clsx" - -import styles from "./styles.module.css" - -const features = [ - { - 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.", - }, -] - -function ShowcaseHeader() { - return ( -
    - Yazi Showcase -

    List of features and plugins people are building with Yazi

    - - 🐤 Add your plugin - -
    - ) -} - -function ShowcaseCard(feature) { - return ( -
  • -
    - -
    -
    - {feature.title} -

    {feature.description}

    -
    -
      -
    • - ) -} - -function ShowcaseCards() { - return ( -
      -
      -
      - Features ✨ -
      -
        - {features.map(feature => ShowcaseCard(feature))} -
      -
      -
      - ) -} - -export default function Showcase(): JSX.Element { - return ( - -
      - - -
      -
      - ) -}