feat: add configure-site doc

.github/contributing.md

@@ -42,7 +42,7 @@ $ pnpm run dev
 And then you can execute:
 
 ```sh
-$ pnpm run docs:dev
+$ pnpm run dev:docs
 ```
 
 Visit http://localhost:5173 and try modifying the source code. You'll get live update.

docs/.island/config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from '../../dist';
 
 export default defineConfig({
   lang: 'en-US',
+  title: '666',
   icon: '/icon.png',
   themeConfig: {
     socialLinks: [
@@ -29,13 +30,18 @@ export default defineConfig({
 function getTutorialSidebar() {
   return [
     {
-      text: 'Guide',
-      items: [{ text: 'Getting Started', link: '/guide/getting-started' }]
+      text: 'Introduction',
+      items: [
+        { text: 'Getting Started', link: '/guide/getting-started' },
+        { text: 'Configure Your Site', link: '/guide/configure-site' }
+      ]
+    },
+    {
+      text: 'Concepts',
+      items: [
+        { text: 'SPA vs MPA', link: '/guide/spa-vs-mpa' },
+        { text: 'Islands Architecture', link: '/guide/islands-arch' }
+      ]
     }
-
-    // {
-    //   text: 'Advance',
-    //   items: []
-    // }
   ];
 }

docs/guide/configure-site.md

@@ -0,0 +1,122 @@
+# Configure your Site
+
+## Create config file
+
+Without any configuration, the page is pretty minimal, which has no navigation and no sidebar.However, you can configure the site by `.island/config.ts` file and custom your own site.
+
+For example, in the initial project created by previous guide, you can add the config file and the project structure will be like this:
+
+```bash
+.
+├─ docs
+│  ├─ .island
+│  │  └─ config.ts
+│  └─ index.md
+└─ package.json
+```
+
+You can try to add the following config code in `config.ts`:
+
+```ts
+import { defineConfig } from 'islandjs';
+
+export default defineConfig({
+  title: 'my-site'
+});
+```
+
+There are some tips for the config file:
+
+- 1. Island.js support `.js`、`.ts`、`.mjs`、`.cjs` file as config file.However, it is recommended to use TypeScript config because you can use `defineConfig` to get type hint.
+
+- 2. config file should has a default export, which is a `SiteConfig` object.
+
+In above example, we set the `title` of the site to `my-site`, then you can run start the dev server by `yarn dev:docs`.You will see the title of the site has been changed to `my-site`.This means you have awake your first site config, wonderful!
+
+In next section, we will introduce nav and sidebar config, which is very important for a doc site.
+
+## Nav config
+
+The nav config is used to config the navigation of the site, which has following structure:
+
+```ts
+import { defineConfig } from 'islandjs';
+
+export default defineConfig({
+  themeConfig: {
+    nav: [
+      {
+        text: 'Home',
+        link: '/',
+        activeMatch: '^/$|^/'
+      }
+    ]
+  }
+});
+```
+
+It should be noticed that the `nav` config is under `themeConfig`, and belongs to the default theme of Island.js.
+
+The `nav` config is an array of `NavItem`, which has following type:
+
+```ts
+interface NavItem {
+  // The text of the nav item
+  text: string;
+  // The link href will be entered when click the nav item
+  link: '/';
+  // The active match rule of the nav item
+  activeMatch: '^/$|^/';
+}
+```
+
+The `activeMatch` is used to match the current route, and the nav item will be highlighted when the route matches the `activeMatch` rule.
+
+## Sidebar config
+
+The sidebar config is used to config the sidebar of the site, which has following structure:
+
+```ts
+import { defineConfig } from 'islandjs';
+
+export default defineConfig({
+  themeConfig: {
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          {
+            text: 'Getting Started',
+            link: '/guide/getting-started'
+          }
+        ]
+      }
+    ]
+  }
+});
+```
+
+The `sidebar` config is also under `themeConfig`, and belongs to the default theme of Island.js.
+
+`sidebar` config has two form: `array` and `object`.
+
+The `array` config is a list of `SidebarGroup`, which has following type:
+
+```ts
+interface SidebarGroup {
+  // The text of the sidebar group
+  text: string;
+  // The child items of the sidebar group
+  items: SidebarItem[];
+  // Whether the sidebar group is collapsible
+  collapsible?: boolean;
+  // The initial state of the sidebar group, which is only valid when `collapsible` is true
+  collapsed?: boolean;
+}
+```
+
+The `object` config is a map for `SidebarGroup`, which has following type:
+
+```ts
+Record<string, SidebarGroup>;
+```

docs/guide/getting-started.md

@@ -2,15 +2,15 @@
 
 ## Why Island.js?
 
-🏝️ Island.js is a static site generator that builds on top of Vite and Mdx. It is designed to be simple, powerful, and performant. It is built to help you focus on writing and deployed with minimum configuration.It has the following features:
+🏝️ Island.js is a static site generator that builds on top of Vite, React and Mdx. It is designed to be simple, powerful, and performant. It is built to help you focus on writing and deployed with minimum configuration.It has the following features:
 
 - **Fast**: Island is built on top of Vite, which is a modern build tool that aims to provide a faster and leaner development experience.
 - **Flexible**: It has internal Mdx language support, which is a powerful way to write content. You can write, import and use React components in Markdown file.
 - **Performant**: It is designed to be [island architecture](https://jasonformat.com/islands-architecture/), which means less javascript bundle, partial hydration and better performance about FCP, TTI.
 
-## Quick Start
+Next we will walk you through the steps to create a new Island.js doc site.
 
-### 1. Init project
+## 1. Init project
 
 First, you can use create a new directory by following command:
 
@@ -48,7 +48,7 @@ And then you can add the following scripts in `package.json`:
 }
 ```
 
-### 2. Start dev server
+## 2. Start dev server
 
 Serve the documentation site in the local server.
 
@@ -58,7 +58,7 @@ yarn dev
 
 Island will start a development server at http://localhost:5173.
 
-### 3. Build for production
+## 3. Build for production
 
 Build the documentation site for production.
 
@@ -68,7 +68,7 @@ yarn build
 
 Island will generate a static site in the `.island/dist` directory.
 
-### 4. Preview locally
+## 4. Preview locally
 
 Preview the production build locally.
 

docs/guide/islands-arch.md

@@ -0,0 +1,3 @@
+# Islands architecture
+
+TODO

docs/guide/spa-vs-mpa.md

@@ -0,0 +1,3 @@
+# SPA vs MPA
+
+TODO

package.json

@@ -87,7 +87,7 @@
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.1",
     "unist-util-visit-children": "^2.0.0",
-    "vite": "3.1",
+    "vite": "3.0",
     "vite-plugin-inspect": "^0.7.1"
   },
   "devDependencies": {