Merge pull request #69 from codeacme17/docs

docs: update isntallation pages

Author: codeacme17

docs/.island/config.ts

@@ -1,9 +1,4 @@
 import { defineConfig, DefaultTheme } from 'islandjs'
-import { createRequire } from 'module'
-import path from 'node:path'
-
-const require = createRequire(import.meta.url)
-const version = require('../../package.json').version
 
 export default defineConfig({
   lang: 'en-US',
@@ -22,16 +17,6 @@ export default defineConfig({
     exclude: ['src/**/*'],
   },
   themeConfig: {
-    // socialLinks: [
-    //   {
-    //     icon: 'twitter',
-    //     link: 'https://twitter.com/codeacme17',
-    //   },
-    //   {
-    //     icon: 'github',
-    //     link: 'https://github.com/codeacme17/echo-ui',
-    //   },
-    // ],
     locales: {
       '/zh/': {
         lang: 'zh',
@@ -81,10 +66,10 @@ function getSidebar(lang: 'zh' | 'en'): DefaultTheme.Sidebar {
             text: getText('介绍', 'Introduction'),
             link: getLink('/guide/introduction'),
           },
-          // {
-          //   text: getText('安装', 'Installation'),
-          //   link: getLink('/guide/installation'),
-          // },
+          {
+            text: getText('安装', 'Installation'),
+            link: getLink('/guide/installation'),
+          },
           {
             text: getText('声明', 'Declaration'),
             link: getLink('/guide/declaration'),

docs/.island/dist/404.html

@@ -1,4 +1,4 @@
-import{U as n,A as u,a as e}from"./index.978ae265.js";import{jsx as t,jsxs as i,Fragment as l}from"react/jsx-runtime";import{B as s}from"./index.2ccb91f8.js";import{S as d,a as r,T as c}from"./Triangle.2f45397e.js";function p(o){return t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256",...o,children:t("path",{fill:"currentColor",d:"m238.29 138.22l-104 64A12 12 0 0 1 116 192V85.47l-85.71 52.75a12 12 0 0 1-12.58-20.44l104-64A12 12 0 0 1 140 64v106.53l85.71-52.75a12 12 0 1 1 12.58 20.44Z"})})}const m=()=>t(n,{code:"<Button> Button </Button>",scope:{Button:s}}),f=()=>t(n,{code:"<Button toggled> Toggled </Button>",scope:{Button:s}}),v=()=>t(n,{code:"<Button disabled> Disabled </Button>",scope:{Button:s}}),y=()=>t(n,{code:`<div className="flex gap-4 items-center">
+import{U as n,A as u,a as e}from"./index.60566919.js";import{jsx as t,jsxs as i,Fragment as l}from"react/jsx-runtime";import{B as s}from"./index.4d4f9478.js";import{S as d,a as r,T as c}from"./Triangle.2f45397e.js";function p(o){return t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256",...o,children:t("path",{fill:"currentColor",d:"m238.29 138.22l-104 64A12 12 0 0 1 116 192V85.47l-85.71 52.75a12 12 0 0 1-12.58-20.44l104-64A12 12 0 0 1 140 64v106.53l85.71-52.75a12 12 0 1 1 12.58 20.44Z"})})}const m=()=>t(n,{code:"<Button> Button </Button>",scope:{Button:s}}),f=()=>t(n,{code:"<Button toggled> Toggled </Button>",scope:{Button:s}}),v=()=>t(n,{code:"<Button disabled> Disabled </Button>",scope:{Button:s}}),y=()=>t(n,{code:`<div className="flex gap-4 items-center">
   <Button size="sm">
     Small
   </Button>  

…s/.island/dist/assets/Button.663b3431.js …s/.island/dist/assets/Button.7e58ba1e.jsdocs/.island/dist/assets/Button.663b3431.js renamed to docs/.island/dist/assets/Button.7e58ba1e.js docs/.island/dist/assets/Button.663b3431.js renamed to docs/.island/dist/assets/Button.7e58ba1e.js

@@ -1,20 +1,20 @@
-import{jsx as n,jsxs as t,Fragment as i}from"react/jsx-runtime";import{C as r}from"./CodeBlock.d8e569ad.js";import{D as l,A as p,a as d,E as c}from"./Envelope.756a718a.js";import"react";import"./index.93441784.js";import"./index.6eef3859.js";import"./index.2ccb91f8.js";import"./index.978ae265.js";import"../client-entry.js";import"./chunk-FXLYF44B.3661c596.js";import"react-dom";import"./usePropsWithGroup.a30eaab0.js";import"./transform.3e3dfeca.js";import"./line.c32ceb13.js";import"./log.83f32a09.js";import"./index.185caace.js";import"./assertion.e9357fda.js";import"./useCommandAltClick.cec7174c.js";const T=void 0,I=[{id:"import",text:"Import",depth:2},{id:"usage",text:"Usage",depth:2},{id:"ahdsr-envelope",text:"AHDSR Envelope",depth:3},{id:"delay",text:"Delay",depth:3},{id:"api",text:"API",depth:2},{id:"envelope",text:"Envelope",depth:3},{id:"type-declarations",text:"Type Declarations",depth:2}],L="Envelope";function a(o){const e=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",h3:"h3",code:"code"},o.components);return t(i,{children:[t(e.h1,{id:"envelope",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#envelope",children:"#"}),"Envelope"]}),`
-`,t(e.p,{children:["Envelope is a visual linear interactive component for ",n(e.a,{href:"https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope",target:"_blank",rel:"nofollow",children:"ADSR"})," envelope generator. You can use this component to control properties related to ADSR."]}),`
-`,t(e.h2,{id:"import",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#import",children:"#"}),"Import"]}),`
-`,n(r,{code:"import { Envelope } from 'echo-ui'"}),`
-`,t(e.h2,{id:"usage",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#usage",children:"#"}),"Usage"]}),`
+import{jsx as n,jsxs as r,Fragment as i}from"react/jsx-runtime";import{C as o}from"./CodeBlock.d8e569ad.js";import{D as l,A as p,a as d,E as c}from"./Envelope.180234a0.js";import"react";import"./index.93441784.js";import"./index.6eef3859.js";import"./index.4d4f9478.js";import"./index.60566919.js";import"../client-entry.js";import"./chunk-FXLYF44B.3661c596.js";import"react-dom";import"./usePropsWithGroup.a30eaab0.js";import"./transform.3e3dfeca.js";import"./line.c32ceb13.js";import"./log.83f32a09.js";import"./index.b890c817.js";import"./assertion.e9357fda.js";import"./useCommandAltClick.cec7174c.js";const T=void 0,I=[{id:"import",text:"Import",depth:2},{id:"usage",text:"Usage",depth:2},{id:"ahdsr-envelope",text:"AHDSR Envelope",depth:3},{id:"delay",text:"Delay",depth:3},{id:"api",text:"API",depth:2},{id:"envelope",text:"Envelope",depth:3},{id:"type-declarations",text:"Type Declarations",depth:2}],L="Envelope";function a(t){const e=Object.assign({h1:"h1",a:"a",p:"p",h2:"h2",h3:"h3",code:"code"},t.components);return r(i,{children:[r(e.h1,{id:"envelope",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#envelope",children:"#"}),"Envelope"]}),`
+`,r(e.p,{children:["Envelope is a visual linear interactive component for ",n(e.a,{href:"https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope",target:"_blank",rel:"nofollow",children:"ADSR"})," envelope generator. You can use this component to control properties related to ADSR."]}),`
+`,r(e.h2,{id:"import",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#import",children:"#"}),"Import"]}),`
+`,n(o,{code:"import { Envelope } from 'echo-ui'"}),`
+`,r(e.h2,{id:"usage",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#usage",children:"#"}),"Usage"]}),`
 `,n(l,{}),`
-`,t(e.h3,{id:"ahdsr-envelope",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#ahdsr-envelope",children:"#"}),"AHDSR Envelope"]}),`
+`,r(e.h3,{id:"ahdsr-envelope",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#ahdsr-envelope",children:"#"}),"AHDSR Envelope"]}),`
 `,n(p,{}),`
-`,t(e.p,{children:["You can achieve ",n(e.a,{href:"https://support.output.com/hc/en-us/articles/4408642133399-AHDSR-Modulation",target:"_blank",rel:"nofollow",children:"AHDSR"})," envelope by passing the ",n(e.code,{children:"hold"})," parameter to the ",n(e.code,{children:"data"})," prop."]}),`
-`,t(e.h3,{id:"delay",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#delay",children:"#"}),"Delay"]}),`
+`,r(e.p,{children:["You can achieve ",n(e.a,{href:"https://support.output.com/hc/en-us/articles/4408642133399-AHDSR-Modulation",target:"_blank",rel:"nofollow",children:"AHDSR"})," envelope by passing the ",n(e.code,{children:"hold"})," parameter to the ",n(e.code,{children:"data"})," prop."]}),`
+`,r(e.h3,{id:"delay",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#delay",children:"#"}),"Delay"]}),`
 `,n(d,{}),`
-`,t(e.p,{children:["By passing the ",n(e.code,{children:"delay"})," parameter to the ",n(e.code,{children:"data"})," prop, you can introduce delay points into the envelope."]}),`
-`,t(e.h2,{id:"api",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),`
-`,t(e.h3,{id:"envelope-1",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#envelope-1",children:"#"}),"Envelope"]}),`
+`,r(e.p,{children:["By passing the ",n(e.code,{children:"delay"})," parameter to the ",n(e.code,{children:"data"})," prop, you can introduce delay points into the envelope."]}),`
+`,r(e.h2,{id:"api",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#api",children:"#"}),"API"]}),`
+`,r(e.h3,{id:"envelope-1",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#envelope-1",children:"#"}),"Envelope"]}),`
 `,n(c,{}),`
-`,t(e.h2,{id:"type-declarations",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#type-declarations",children:"#"}),"Type Declarations"]}),`
-`,n(r,{code:`export interface EnvelopeProps extends React.HTMLAttributes<EnvelopeRef> {
+`,r(e.h2,{id:"type-declarations",children:[n(e.a,{className:"header-anchor","aria-hidden":"true",href:"#type-declarations",children:"#"}),"Type Declarations"]}),`
+`,n(o,{code:`export interface EnvelopeProps extends React.HTMLAttributes<EnvelopeRef> {
   data: EnvelopeData
   limits?: EnvelopeLimits
   lineColor?: string
@@ -42,69 +42,69 @@ export interface EnvelopeLimits {
 }
 
 export interface EnvelopeRef extends HTMLDivElement {}
-`})]})}function M(o={}){const{wrapper:e}=o.components||{};return e?n(e,Object.assign({},o,{children:n(a,o)})):a(o)}const P="2024/1/15 18:45:10",B=`import { CodeBlock } from '../../src/components/CodeBlock.tsx'
-import { Default, AHDSR, DADSR } from '../../src/components/UsageBox/Envelope.tsx'
-import { EnvelopeAPITable } from '../../src/components/APITable/Envelope.tsx'
-
-# Envelope
-
-Envelope is a visual linear interactive component for [ADSR](https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope) envelope generator. You can use this component to control properties related to ADSR.
-
-## Import
-
-<CodeBlock code={\`import { Envelope } from 'echo-ui'\`} />
-
-## Usage
-
-<Default />
-
-### AHDSR Envelope
-
-<AHDSR />
-
-You can achieve [AHDSR](https://support.output.com/hc/en-us/articles/4408642133399-AHDSR-Modulation) envelope by passing the \`hold\` parameter to the \`data\` prop.
-
-### Delay
-
-<DADSR />
-
-By passing the \`delay\` parameter to the \`data\` prop, you can introduce delay points into the envelope.
-
-## API
-
-### Envelope
-
-<EnvelopeAPITable />
-
-## Type Declarations
-
-<CodeBlock code={\`export interface EnvelopeProps extends React.HTMLAttributes<EnvelopeRef> {
-  data: EnvelopeData
-  limits?: EnvelopeLimits
-  lineColor?: string
-  lineWidth?: number
-  nodeColor?: string
-  nodeSize?: number
-  onDataChange?: (data: EnvelopeData) => void
-}
-
-export interface EnvelopeData {
-  delay?: number
-  attack: number
-  decay: number
-  hold?: number
-  sustain: number
-  release: number
-}
-
-export interface EnvelopeLimits {
-  delay?: number
-  attack?: number
-  hold?: number
-  decay?: number
-  release?: number
-}
-
-export interface EnvelopeRef extends HTMLDivElement {}
-\`} />
+`})]})}function M(t={}){const{wrapper:e}=t.components||{};return e?n(e,Object.assign({},t,{children:n(a,t)})):a(t)}const P="2024/1/15 18:45:10",B=`import { CodeBlock } from '../../src/components/CodeBlock.tsx'\r
+import { Default, AHDSR, DADSR } from '../../src/components/UsageBox/Envelope.tsx'\r
+import { EnvelopeAPITable } from '../../src/components/APITable/Envelope.tsx'\r
+\r
+# Envelope\r
+\r
+Envelope is a visual linear interactive component for [ADSR](https://en.wikipedia.org/wiki/Synthesizer#ADSR_envelope) envelope generator. You can use this component to control properties related to ADSR.\r
+\r
+## Import\r
+\r
+<CodeBlock code={\`import { Envelope } from 'echo-ui'\`} />\r
+\r
+## Usage\r
+\r
+<Default />\r
+\r
+### AHDSR Envelope\r
+\r
+<AHDSR />\r
+\r
+You can achieve [AHDSR](https://support.output.com/hc/en-us/articles/4408642133399-AHDSR-Modulation) envelope by passing the \`hold\` parameter to the \`data\` prop.\r
+\r
+### Delay\r
+\r
+<DADSR />\r
+\r
+By passing the \`delay\` parameter to the \`data\` prop, you can introduce delay points into the envelope.\r
+\r
+## API\r
+\r
+### Envelope\r
+\r
+<EnvelopeAPITable />\r
+\r
+## Type Declarations\r
+\r
+<CodeBlock code={\`export interface EnvelopeProps extends React.HTMLAttributes<EnvelopeRef> {\r
+  data: EnvelopeData\r
+  limits?: EnvelopeLimits\r
+  lineColor?: string\r
+  lineWidth?: number\r
+  nodeColor?: string\r
+  nodeSize?: number\r
+  onDataChange?: (data: EnvelopeData) => void\r
+}\r
+\r
+export interface EnvelopeData {\r
+  delay?: number\r
+  attack: number\r
+  decay: number\r
+  hold?: number\r
+  sustain: number\r
+  release: number\r
+}\r
+\r
+export interface EnvelopeLimits {\r
+  delay?: number\r
+  attack?: number\r
+  hold?: number\r
+  decay?: number\r
+  release?: number\r
+}\r
+\r
+export interface EnvelopeRef extends HTMLDivElement {}\r
+\`} />\r
 `;export{B as content,M as default,T as frontmatter,P as lastUpdatedTime,L as title,I as toc};