docs: quick start

Author: wibus-wee

.gitignore

@@ -0,0 +1,20 @@
+# Ignore all files in the dist directory
+dist
+
+**/.vitepress/dist
+
+**/cache
+
+# Ignore all files in the modules directory
+
+node_modules
+
+# Ignore all files in the .idea directory
+
+.idea
+
+# Ignore all files in the .vscode directory
+
+.vscode
+
+

docs/.vitepress/config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   lastUpdated: true,
   themeConfig: {
     logo: "/logo.svg",
-    
+
     editLink: {
       pattern: "https://github.com/jwcjs/docs/edit/main/docs/:path",
       text: "在 GitHub 上编辑此页",
@@ -18,6 +18,38 @@ export default defineConfig({
       { text: 'Guide', link: '/guide/' },
     ],
 
+    sidebar: {
+      '/': [
+        {
+          text: 'Getting Started', items: [{
+            text: 'Introduction',
+            link: '/guide/what-is-jwc',
+          }, {
+            text: 'Quick Start',
+            link: '/guide/quick-start',
+          }]
+        },
+        {
+          text: 'Components', items: [{
+            text: 'Defining',
+            link: '/guide/defining',
+          }, {
+            text: 'Rendering',
+            link: '/guide/rendering',
+          }, {
+            text: 'Reactivity',
+            link: '/guide/reactivity',
+          }, {
+            text: 'Styles',
+            link: '/guide/styles',
+          }, {
+            text: 'Lifecycle',
+            link: '/guide/lifecycle',
+          },],
+        },
+      ]
+    },
+
     footer: {
       message: 'Made with ❤️ by Wibus and AkaraChen',
       copyright: 'Copyright © 2022-PRESENT Jwc.js',

docs/.vitepress/theme/index.ts

@@ -0,0 +1,6 @@
+import './styles/main.css'
+import Theme from 'vitepress/theme'
+
+export default {
+  ...Theme,
+}

docs/.vitepress/theme/styles/main.css

@@ -0,0 +1,8 @@
+:root {
+  --vp-c-bg-alt: var(--vp-c-bg) !important;
+}
+
+/* 缓慢变暗 */
+body {
+  transition: color .5s,background-color .5s;
+}

docs/guide/quick-start.md

@@ -0,0 +1,78 @@
+# Quick Start
+
+## Create a new Jwc project
+
+You can use npm, yarn or pnpm to install jwcjs. We recommend using pnpm, it is faster and more efficient. 
+
+You can install it with the following command:
+
+::: code-group
+
+```bash [npm]
+npm install jwcjs
+```
+
+```bash [yarn]
+yarn add jwcjs
+```
+
+```bash [pnpm]
+pnpm add jwcjs
+```
+:::
+
+These commands will install jwcjs. You can use Vite, Rollup, Webpack, or any other build tool to build your project.
+
+### Create a new project
+
+::: danger SORRY
+We have not yet published the package to npm, so you can only install it from github. And CLI is not yet available, so you can only use it in the project directory.
+:::
+
+Once the project is created, follow the instructions to install dependencies and start the dev server:
+
+::: code-group
+
+```bash [npm]
+cd <project-name>
+npm install
+npm run dev
+```
+
+```bash [yarn]
+cd <project-name>
+yarn
+yarn dev
+```
+
+```bash [pnpm]
+cd <project-name>
+pnpm install
+pnpm dev
+```
+:::
+
+You should now have your Jwc project running! When you are ready to deploy, use the build command:
+
+::: code-group
+
+```bash [npm]
+npm run build
+```
+
+```bash [yarn]
+yarn build
+```
+
+```bash [pnpm]
+pnpm build
+```
+:::
+
+This will create a js file in the dist directory. You can use it in your project like this:
+
+```html
+<script src="/dist/index.js"></script>
+
+<app-element cound="1" ></app-element>
+```

docs/guide/what-is-jwc.md

@@ -0,0 +1,26 @@
+# What is Jwc?
+
+Jwc is a JavaScript framework for using JSX to write web components on the web. It builds on the [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) standard and provides a simple function-based API for writing components.
+
+::: warning
+JWC is currently in `alpha`. The API is not stable and may change at any time.
+:::
+
+The goal of JWC is to provide a simple, lightweight, and performant way to write web components. It is not a full framework like React or Vue. It is not a library like LitElement or Stencil. It is a framework for writing web components.
+
+## Why Jwc?
+
+Jwc supports the following features:
+
+- Function-based API
+- JSX
+- TypeScript
+- Web Components
+
+If you are looking for a way to build web components, Jwc is a great choice. You just need some basic knowledge of JavaScript and JSX. You don't need to learn a new templating language.
+
+## Why Web Components?
+
+Web Components are a set of standards that allow you to write custom HTML elements. They are a native browser feature that is supported by all modern browsers. They are the future of the web.
+
+Web Components are a great way to write reusable components. They are a standard that is not tied to any framework. They can be used in any framework or without a framework at all.

docs/index.md

@@ -11,10 +11,10 @@ hero:
   actions:
     - theme: brand
       text: Get Started
-      link: /guide/what-is-vitepress
+      link: /guide/what-is-jwc
     - theme: alt
       text: View on GitHub
-      link: https://github.com/vuejs/vitepress
+      link: https://github.com/jwcjs/core
 
 features:
   - title: Web Components
@@ -30,6 +30,6 @@ features:
 <style>
   :root {
     --vp-home-hero-image-background-image: linear-gradient( -45deg, #000 50%, #000 50% );
-    --vp-home-hero-image-filter: blur(50px);
+    --vp-home-hero-image-filter: blur(60px);
   }
 </style>