94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
|
import Heading from '@theme/Heading'
|
|
import Layout from '@theme/Layout'
|
|
import styles from './index.module.css'
|
|
|
|
const topics = ['Clean', 'Focused', 'Reusable', 'Long-term']
|
|
|
|
export default function Home(): ReactNode {
|
|
const { siteConfig } = useDocusaurusContext()
|
|
|
|
return (
|
|
<Layout
|
|
title={siteConfig.title}
|
|
description="oneao 的个人技术笔记和资料整理。"
|
|
>
|
|
<main className={styles.page}>
|
|
<section className={styles.hero}>
|
|
<div className="container">
|
|
<div className={styles.heroInner}>
|
|
<div className={styles.copy}>
|
|
<div className={styles.brandLine}>
|
|
<img src="/img/logo.png" alt="" className={styles.logo} />
|
|
<span>oneao notes</span>
|
|
</div>
|
|
<Heading as="h1" className={styles.title}>
|
|
{siteConfig.title}
|
|
</Heading>
|
|
<p className={styles.subtitle}>
|
|
技术 · 笔记 · 记录
|
|
</p>
|
|
<p className={styles.description}>
|
|
一个保持简洁、方便回看的个人站点，用来沉淀日常记录、长期维护的资料和可复用的信息。
|
|
</p>
|
|
<div className={styles.topicRow} aria-label="笔记主题">
|
|
{topics.map(topic => (
|
|
<span key={topic}>{topic}</span>
|
|
))}
|
|
</div>
|
|
<div className={styles.statusLine}>
|
|
<span />
|
|
<p>保持内容克制、结构清晰，方便之后快速回看。</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.previewWrap}>
|
|
<div className={styles.previewShadow} />
|
|
<div className={styles.preview} aria-label="笔记预览">
|
|
<div className={styles.previewHeader}>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
<strong>oneao.cn</strong>
|
|
</div>
|
|
<div className={styles.previewBody}>
|
|
<span className={styles.kicker}>Personal Archive</span>
|
|
<h2>整理、沉淀、回看</h2>
|
|
<p>
|
|
把零散信息收束成清晰页面，让每次查找都更直接。
|
|
</p>
|
|
<div className={styles.codeBlock}>
|
|
<span>clear structure</span>
|
|
<span>quiet interface</span>
|
|
<span>steady updates</span>
|
|
</div>
|
|
<div className={styles.noteLines}>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</div>
|
|
<div className={styles.noteFooter}>
|
|
<span>Notes</span>
|
|
<span>Archive</span>
|
|
<span>Review</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.miniCard}>
|
|
<strong>Simple Index</strong>
|
|
<div>
|
|
<span />
|
|
<span />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</Layout>
|
|
)
|
|
}
|