Skip to content

Commit

Permalink
docs: refactor docs
Browse files Browse the repository at this point in the history
  • Loading branch information
zhoushaw committed Nov 1, 2024
1 parent 270f873 commit aa9a4d6
Show file tree
Hide file tree
Showing 15 changed files with 435 additions and 20 deletions.
2 changes: 1 addition & 1 deletion website-new/docs/guide/demo/react.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# react 子应用

import WebpackConfig from '@components/config/_webpackConfig.mdx';
import { Tab, Tabs } from 'rspress/theme';

本节我们将详细介绍 react 框架的应用作为子应用的接入步骤。[v16/17 demo](https://github.com/modern-js-dev/garfish/tree/main/dev/app-react-17)[v18 demo](https://github.com/modern-js-dev/garfish/blob/main/dev/app-react-18)

Expand All @@ -21,7 +22,6 @@ npm install @garfish/bridge-react --save

更多 bridge 函数参数介绍请参考 [这里](/guide/bridge)
### react v16、v17 导出
import { Tab, Tabs } from 'rspress/theme';

<Tabs>
<Tab value="bridge_provider" label="使用 @garfish/bridge-react" default>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@
import WebpackConfig from '@components/config/_webpackConfig.mdx';

import ViteConfig from '@components/config/_viteConfig.mdx';
import { Tab, Tabs } from 'rspress/theme';

本节分别从主、子 应用视角出发,介绍如何通过 [Garfish API](/api) 来将应用接入 Garfish 框架

:::tip 在线预览
<a href="https://stackblitz.com/edit/garfish-demo?file=react-sub%2Fsrc%2FApp.js"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" width="150"/></a>

:::

## 主应用
Expand Down Expand Up @@ -57,6 +59,7 @@ Garfish.run({
1. 将挂载点设置为常驻挂载点,不要跟随路由变化使子应用挂载点销毁和出现
2. 保证 Garfish 在渲染时挂载点存在

:::

如果你的业务需要手动控制应用加载,可以使用 [Garfish.loadApp](/api/loadApp.md) 手动加载 APP:
Expand Down Expand Up @@ -85,16 +88,16 @@ app.mounted ? app.show() : await app.mount();
### 1.调整子应用的构建配置

<Tabs>
<TabItem value="Webpack" label="Webpack" default>
<Tab value="Webpack" label="Webpack" default>

<WebpackConfig />

</TabItem>
<TabItem value="vite" label="Vite" default>
</Tab>
<Tab value="vite" label="Vite" default>

<ViteConfig />

</TabItem>
</Tab>
</Tabs>

### 2.导出 provider 函数
Expand All @@ -107,7 +110,7 @@ npm install @garfish/bridge-react --save
```

<Tabs>
<TabItem value="Webpack" label="使用 @garfish/bridge-react 接入" default>
<Tab value="Webpack" label="使用 @garfish/bridge-react 接入" default>

```jsx
import { reactBridge } from '@garfish/bridge-react';
Expand All @@ -119,8 +122,8 @@ export const provider = reactBridge({
});
```

</TabItem>
<TabItem value="vite" label="自定义导出函数" default>
</Tab>
<Tab value="vite" label="自定义导出函数" default>

```tsx
import React from 'react';
Expand Down Expand Up @@ -152,7 +155,7 @@ export const provider = () => ({
});
```

</TabItem>
</Tab>
</Tabs>

### 3. 设置应用路由 `basename`
Expand Down
11 changes: 6 additions & 5 deletions website-new/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,17 @@
pageType: home

hero:
name: Garfish
name: Garfish Framework
text: 微前端框架
tagline: 可轻松将多个前端应用组合成内聚的单个产品
tagline: 包含构建微前端系统时所需要的基本能力,任意前端框架均可使用。接入简单,可轻松将多个前端应用组合成内聚的单个产品

actions:
- theme: brand
text: Quick Start
text: 入门教程
link: /guide/quick-start/index.html
- theme: alt
text: GitHub
link: https://github.com/web-infra-dev/rspress
text: 快速开始
link: /guide/quick-start/start.html
image:
src: https://lf3-static.bytednsdoc.com/obj/eden-cn/dhozeh7vhpebvog/open-garfish/icons/icon.png
alt: Garfish Logo
Expand Down
48 changes: 47 additions & 1 deletion website-new/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion website-new/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
"preview": "rspress preview"
},
"dependencies": {
"rspress": "^1.32.0"
"rspress": "^1.32.0",
"swiper": "8.1.6",
"clsx": "1.1.1"
},
"devDependencies": {
"@types/node": "^16"
Expand Down
2 changes: 1 addition & 1 deletion website-new/rspress.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as path from 'path';
import * as path from 'node:path';
import { defineConfig } from 'rspress/config';

export default defineConfig({
Expand Down
11 changes: 11 additions & 0 deletions website-new/theme/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Theme, { Search, Link } from 'rspress/theme';
import { HomeLayout } from './pages/index';



export default {
...Theme,
HomeLayout,
};

export * from 'rspress/theme';
70 changes: 70 additions & 0 deletions website-new/theme/pages/HomeHero/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
.clip {
background: -webkit-linear-gradient(120deg, var(--rp-c-brand) 30%, #f4f468);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: var(--rp-home-hero-name-color);
}

.mask {
position: absolute;
background-image: conic-gradient(
from 180deg at 50% 50%,
#71bedb 0deg,
180deg,
#9589ea 1turn
);
width: 600px;
height: 600px;
border-radius: 100%;
mixblendmode: normal;
opacity: 0.05;
filter: blur(60px);
top: -200px;
transform: translateX(-50%);
z-index: 0;
}

:global(.dark) .mask {
opacity: 0.25;
}

:global(.modern-doc-home-hero-image) {
width: 25vw;
height: 25vw;
max-width: 400px;
position: relative;
img {
position: absolute;
width: 100%;
object-fit: cover;
}
}

@media (max-width: 768px) {
:global(.modern-doc-home-hero-image) {
width: 50vw;
height: 50vw;
}
}

.imgMask {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 75%;
background-image: conic-gradient(
from 180deg at 50% 50%,
#71bedb 0deg,
180deg,
#9589ea 1turn
);
border-radius: 50%;
filter: blur(72px);
opacity: 0.5;
}

:global(.dark) .imgMask {
opacity: 1;
}
70 changes: 70 additions & 0 deletions website-new/theme/pages/HomeHero/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Button } from 'rspress/theme';
import { normalizeHrefInRuntime } from 'rspress/runtime';
import styles from './index.module.scss';

export interface Hero {
name: string;
text: string;
tagline: string;
image?: {
src: string;
alt: string;
};
actions: {
text: string;
link: string;
theme: 'brand' | 'alt';
}[];
}

export function HomeHero({ hero }: { hero: Hero }) {
const hasImage = hero.image !== undefined;
return (
<div
className="m-auto px-6 pb-12 sm:pt-0 sm:px-8 md:px-16 md:pb-16"
style={{
height: 'calc(100vh - var(--rp-nav-height)))',
}}
>
<div className="max-w-6xl m-auto flex flex-col md:flex-row">
<div className="m-auto flex flex-col order-2 md:order-1 items-center justify-center text-center">
<h1 className="text-3xl sm:text-6xl md:text-7xl font-bold pb-3 lg:pb-5 z-10">
<span className={styles.clip}>{hero.name}</span>
</h1>
{hero.text?.length && (
<p
className={"pb-2 mx-auto md:m-0 text-3xl sm:text-5xl md:text-6xl font-bold z-10 max-w-xs sm:max-w-xl"}
style={{ lineHeight: '1.15' }}
>
{hero.text}
</p>
)}

<p className="pt-2 m-auto md:m-0 text-sm sm:text-xl md:text-2xl text-text-2 font-medium z-10 whitespace-pre-wrap">
{hero.tagline}
</p>
<div className="justify-center gap-3 flex flex-wrap m--1.5 pt-4 z-10">
{hero.actions.map((action) => (
<div key={action.link} className="p-1 flex-shrink-0">
<Button
className="pl-2 pr-2"
type="a"
text={action.text}
href={normalizeHrefInRuntime(action.link)}
theme={action.theme}
/>
</div>
))}
</div>
</div>

{hasImage ? (
<div className="modern-doc-home-hero-image m-auto flex-center md:none lg:flex order-1 md:order-2">
<div className={styles.imgMask} />
<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/dhozeh7vhpebvog/open-garfish/icons/icon.png" alt={hero.image?.alt} />
</div>
) : null}
</div>
</div>
);
}
Loading

0 comments on commit aa9a4d6

Please sign in to comment.