From 6ffd8e53d7361ee3d6a3fe868c7449b43a590ca6 Mon Sep 17 00:00:00 2001
From: Riri
Date: Tue, 25 Jul 2023 03:05:11 +0800
Subject: [PATCH] docs: add head document
---
README.md | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 68 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 01e94bc..3c59b70 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,73 @@ export const routes: RouteRecord[] = [
]
```
+## Document head
+
+You can use `` to manage all of your changes to the document head. It takes plain HTML tags and outputs plain HTML tags. It is a wrapper around [React Helmet](https://github.com/nfl/react-helmet).
+
+```tsx
+import { Head } from 'vite-react-ssg'
+
+const MyHead = () => (
+
+
+
+ My Title
+
+
+)
+```
+
+Nested or latter components will override duplicate usages:
+
+```tsx
+import { Head } from 'vite-react-ssg'
+
+const MyHead = () => (
+
+
+ My Title
+
+
+
+
+ Nested Title
+
+
+
+
+)
+```
+
+Outputs:
+```html
+
+ Nested Title
+
+
+```
+
+### Reactive head
+
+```tsx
+import { useState } from 'react'
+import { Head } from 'vite-react-ssg'
+
+export default function MyHead() {
+ const [state, setState] = useState(false)
+
+ return (
+
+
+
+ head test {state ? 'A' : 'B'}
+ {/* You can also set the 'body' attributes here */}
+
+
+ )
+}
+```
+
## Critical CSS
Vite SSG has built-in support for generating [Critical CSS](https://web.dev/extract-critical-css/) inlined in the HTML via the [`critters`](https://github.com/GoogleChromeLabs/critters) package.
@@ -162,9 +229,9 @@ export default {
## Roadmap
- [x] Preload assets
+- [x] Document head
- [ ] SSR under dev
- [ ] Initial State
-- [ ] Document head
- [ ] More Client components, such as `