Skip to content

Commit 7aaaddb

Browse files
sanyuan0704spicylemonhahagithub-actions[bot]
authored
feat: responsible layout (#143)
* feat: responsive (#138) * feat: responsive 70% * feat: modify screen lock logic * feat: search responsive * fix: add _isalnd * fix: add _isalnd * fix: add _island * fix: fix some code specification problems * fix: fix some code specification problems * feat: reaponsive navScreen transition * feat: reaponsive navScreen transition * fix: fix appearance bug * fix: fix appearance bug * fix: fix appearance bug * fix: fix localnav * feat: responsive 90% * fix: build error in production * fix: search error (#139) * fix: search error * chore: add changeset * chore: lint * fix: island_inject not found * chore: scripts * chore: changelog repo param * chore: update config.json for changeset * chore: release (#140) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat: responsive 70% * feat: modify screen lock logic * feat: search responsive * fix: add _isalnd * fix: add _isalnd * fix: fix some code specification problems * fix: fix some code specification problems * feat: reaponsive navScreen transition * feat: reaponsive navScreen transition * fix: fix appearance bug * fix: fix appearance bug * fix: fix appearance bug * fix: fix localnav * feat: responsive 90% * feat: responsice 100% * feat: responsice 100% Co-authored-by: sanyuan <[email protected]> Co-authored-by: yangxingyuan <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: delete localNav * chore: add changeset * fix: vendors cannot found Co-authored-by: spicylemonhaha <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 52611fd commit 7aaaddb

40 files changed

+1253
-194
lines changed

‎.changeset/quick-lobsters-drive.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'islandjs': minor
3+
'@islandjs/plugin-backtop': minor
4+
'@islandjs/plugin-check-links': minor
5+
'@islandjs/plugin-search': minor
6+
---
7+
8+
feat: responsible layout

‎.github/workflows/test.yml

+3
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ jobs:
3838

3939
- name: Build
4040
run: pnpm run build
41+
env:
42+
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
43+
TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
4144

4245
- name: Lint
4346
run: pnpm run lint

‎docs/zh/guide/navbar.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ export interface NavItemWithLink {
4949
```ts
5050
export interface NavItemWithChildren {
5151
text: string;
52-
children: NavItem[];
52+
items: NavItem[];
5353
}
5454
```
5555

5656
其中各项属性的含义如下:
5757

5858
- `text` - 导航栏文本
59-
- `children` - 子导航栏元素
59+
- `items` - 子导航栏元素
6060

6161
### 示例
6262

@@ -73,7 +73,7 @@ export default defineConfig({
7373
},
7474
{
7575
text: '更多链接',
76-
children: [
76+
items: [
7777
{
7878
text: 'Github',
7979
link: 'http://github.com/sanyuan0704/island.js',

‎package.json

+75
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,64 @@
3838
],
3939
"author": "Sanyuan0704",
4040
"license": "MIT",
41+
"dependencies": {
42+
"@babel/core": "^7.19.0",
43+
"@babel/helper-plugin-utils": "^7.19.0",
44+
"@babel/preset-react": "^7.18.6",
45+
"@mdx-js/mdx": "^2.1.3",
46+
"@mdx-js/react": "^2.1.3",
47+
"@mdx-js/rollup": "2",
48+
"@svgr/core": "6.3.1",
49+
"@unocss/preset-attributify": "^0.45.26",
50+
"@unocss/preset-wind": "^0.45.26",
51+
"@unocss/vite": "^0.45.26",
52+
"@vitejs/plugin-react": "2.0.1",
53+
"acorn": "^8.8.0",
54+
"b-tween": "^0.3.3",
55+
"body-scroll-lock": "4.0.0-beta.0",
56+
"cac": "6.7.12",
57+
"check-links": "^1.1.8",
58+
"chokidar": "^3.5.3",
59+
"compression": "^1.7.4",
60+
"copy-to-clipboard": "^3.3.2",
61+
"debug": "^4.3.4",
62+
"esbuild": "0.15.5",
63+
"fast-glob": "3.2.11",
64+
"flexsearch": "0.6.32",
65+
"fs-extra": "10.1.0",
66+
"github-slugger": "^1.4.0",
67+
"hast": "^1.0.0",
68+
"hast-util-from-html": "^1.0.0",
69+
"husky": "^8.0.1",
70+
"lodash-es": "^4.17.21",
71+
"mdast-util-mdxjs-esm": "^1.3.0",
72+
"ora": "^6.1.2",
73+
"picocolors": "^1.0.0",
74+
"polka": "^0.5.2",
75+
"react": "^18.2.0",
76+
"react-dom": "^18.2.0",
77+
"react-helmet-async": "^1.3.0",
78+
"react-router-dom": "^6.3.0",
79+
"rehype-autolink-headings": "^6.1.1",
80+
"rehype-external-links": "^2.0.1",
81+
"rehype-highlight": "^5.0.2",
82+
"rehype-slug": "^5.0.1",
83+
"remark-directive": "^2.0.1",
84+
"remark-frontmatter": "^4.0.1",
85+
"remark-gemoji": "^7.0.1",
86+
"remark-gfm": "^3.0.1",
87+
"remark-mdx-frontmatter": "^2.0.3",
88+
"sass": "^1.54.5",
89+
"shiki": "^0.11.1",
90+
"simple-git": "^3.14.1",
91+
"sirv": "^2.0.2",
92+
"unified": "^10.1.2",
93+
"unist-util-visit": "^4.1.1",
94+
"unist-util-visit-children": "^2.0.0",
95+
"unocss": "^0.45.26",
96+
"vite": "~3.1.4",
97+
"vite-plugin-inspect": "^0.7.4"
98+
},
4199
"devDependencies": {
42100
"@changesets/changelog-github": "^0.4.7",
43101
"@changesets/cli": "^2.25.1",
@@ -46,6 +104,23 @@
46104
"@islandjs/plugin-check-links": "workspace:*",
47105
"@playwright/test": "^1.26.1",
48106
"@types/node": "^18.11.7",
107+
"@release-it/conventional-changelog": "^5.1.0",
108+
"@types/babel__core": "^7.1.19",
109+
"@types/babel__helper-plugin-utils": "^7.10.0",
110+
"@types/babel__traverse": "^7.18.1",
111+
"@types/body-scroll-lock": "^3.1.0",
112+
"@types/compression": "^1.7.2",
113+
"@types/debug": "^4.1.7",
114+
"@types/fs-extra": "^9.0.13",
115+
"@types/github-slugger": "^1.3.0",
116+
"@types/hast": "^2.3.4",
117+
"@types/koa": "^2.13.5",
118+
"@types/koa-router": "^7.4.4",
119+
"@types/lodash-es": "^4.17.6",
120+
"@types/polka": "^0.5.4",
121+
"@types/react": "^18.0.17",
122+
"@types/react-dom": "^18.0.6",
123+
"@types/resolve": "^1.20.2",
49124
"@typescript-eslint/eslint-plugin": "^5.36.1",
50125
"@typescript-eslint/parser": "^5.36.1",
51126
"commitlint": "^17.1.2",

‎packages/island/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,17 @@
4646
"author": "Sanyuan0704",
4747
"license": "MIT",
4848
"dependencies": {
49-
"@islandjs/plugin-search": "workspace:*",
50-
"@islandjs/plugin-backtop": "workspace:*",
5149
"@babel/core": "^7.19.0",
5250
"@babel/helper-plugin-utils": "^7.19.0",
5351
"@babel/preset-react": "^7.18.6",
5452
"@iconify-json/carbon": "^1.1.8",
53+
"@islandjs/plugin-backtop": "workspace:*",
54+
"@islandjs/plugin-search": "workspace:*",
5555
"@mdx-js/mdx": "^2.1.3",
5656
"@mdx-js/react": "^2.1.3",
5757
"@mdx-js/rollup": "2",
5858
"@svgr/core": "6.3.1",
59+
"@types/react-transition-group": "^4.4.5",
5960
"@unocss/preset-attributify": "^0.45.26",
6061
"@unocss/preset-icons": "^0.45.29",
6162
"@unocss/preset-wind": "^0.45.26",
@@ -84,6 +85,7 @@
8485
"react-dom": "^18.2.0",
8586
"react-helmet-async": "^1.3.0",
8687
"react-router-dom": "^6.3.0",
88+
"react-transition-group": "^4.4.5",
8789
"rehype-autolink-headings": "^6.1.1",
8890
"rehype-external-links": "^2.0.1",
8991
"rehype-highlight": "^5.0.2",

‎packages/island/src/theme-default/components/BackDrop/index.module.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.backDrop {
2+
position: fixed;
3+
top: 0;
4+
right: 0;
5+
bottom: 0;
6+
left: 0;
7+
z-index: var(--island-z-index-backdrop);
8+
background: rgba(0, 0, 0, 0.6);
9+
}
10+
@media (min-width: 960px) {
11+
.backDrop {
12+
display: none;
13+
}
14+
}

‎packages/island/src/theme-default/components/BackDrop/index.tsx

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styles from './index.module.scss';
2+
import type { ComponentPropsWithIsland } from 'islandjs';
3+
4+
interface Props {
5+
closeSidebar: () => void;
6+
isOpen: boolean;
7+
}
8+
9+
export function BackDrop(props: Props & ComponentPropsWithIsland) {
10+
const { closeSidebar, isOpen } = props;
11+
return isOpen ? (
12+
<div onClick={closeSidebar} className={styles.backDrop} />
13+
) : null;
14+
}

‎packages/island/src/theme-default/components/DocFooter/index.module.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@
1010
padding-left: 16px;
1111
}
1212
}
13-
13+
@media (min-width: 768px) {
14+
.prev {
15+
width: 50%;
16+
}
17+
.next {
18+
width: 50%;
19+
}
20+
}
1421
.pager-link {
1522
display: block;
1623
border: 1px solid var(--island-c-divider-light);

‎packages/island/src/theme-default/components/DocFooter/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,15 @@ export function DocFooter() {
6161
divider-top=""
6262
pt="6"
6363
>
64-
<div flex="~ col" w="50%">
64+
<div flex="~ col" className={styles.prev}>
6565
{prevPage ? (
6666
<a href={normalizeHref(prevPage.link)} className={styles.pagerLink}>
6767
<span className={styles.desc}>{prevPageText}</span>
6868
<span className={styles.title}>{prevPage.text}</span>
6969
</a>
7070
) : null}
7171
</div>
72-
<div flex="~ col" w="50%">
72+
<div flex="~ col" className={styles.next}>
7373
{nextPage ? (
7474
<a
7575
href={normalizeHref(nextPage.link)}

‎packages/island/src/theme-default/components/Link/index.module.scss

+2
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@
55

66
.link {
77
display: block;
8+
font-size: 14px;
9+
font-weight: 500;
810
}

‎packages/island/src/theme-default/components/LocalSideBar/index.module.scss

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.localNav {
2+
position: sticky;
3+
top: 0;
4+
left: 0;
5+
z-index: 2;
6+
display: flex;
7+
justify-content: space-between;
8+
align-items: center;
9+
transform: translateX(-24px);
10+
border-bottom: 1px solid var(--island-c-divider-light);
11+
width: calc(100% + 48px);
12+
color: var(--island-c-text-1);
13+
transition: border-color 0.5s, background-color 0.5s, color 0.5s;
14+
background-color: var(--island-c-bg);
15+
.menu {
16+
padding: 12px 28px 11px;
17+
transition: color 0.5s;
18+
&:hover {
19+
color: var(--island-c-text-3);
20+
}
21+
}
22+
}
23+
@media (min-width: 960px) {
24+
.localNav {
25+
display: none;
26+
}
27+
.backDrop {
28+
display: none;
29+
}
30+
}
31+
.backDrop {
32+
position: fixed;
33+
top: 0;
34+
right: 0;
35+
bottom: 0;
36+
left: 0;
37+
z-index: var(--island-z-index-backdrop);
38+
background: rgba(0, 0, 0, 0.6);
39+
}

‎packages/island/src/theme-default/components/LocalSideBar/index.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import styles from './index.module.scss';
2+
import { SideBar } from '../Siderbar';
3+
import { Fragment, useState } from 'react';
4+
import { ComponentPropsWithIsland } from '../../../shared/types';
5+
import { DefaultTheme } from '../../../shared/types';
6+
7+
interface Props {
8+
pathname: string;
9+
langRoutePrefix: string;
10+
sidebarData: DefaultTheme.SidebarGroup[];
11+
}
12+
13+
export function SideMenu(props: ComponentPropsWithIsland & Props) {
14+
const { langRoutePrefix, pathname, sidebarData } = props;
15+
const [isSidebarOpen, setIsOpen] = useState<boolean>(false);
16+
function openSidebar() {
17+
setIsOpen(true);
18+
}
19+
20+
function closeSidebar() {
21+
setIsOpen(false);
22+
}
23+
return (
24+
<Fragment>
25+
<div className={styles.localNav}>
26+
<button flex="center" onClick={openSidebar} className={styles.menu}>
27+
<div text="md" mr="2" className="i-carbon:menu"></div>
28+
<span text="md ">Menu</span>
29+
</button>
30+
</div>
31+
<SideBar
32+
langRoutePrefix={langRoutePrefix}
33+
pathname={pathname}
34+
sidebarData={sidebarData}
35+
isSidebarOpen={isSidebarOpen}
36+
></SideBar>
37+
{isSidebarOpen ? (
38+
<div onClick={closeSidebar} className={styles.backDrop} />
39+
) : null}
40+
</Fragment>
41+
);
42+
}

‎packages/island/src/theme-default/components/Nav/NavMenuGroup.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export interface NavMenuGroupItem {
1111

1212
export function NavMenuGroup(item: NavMenuGroupItem) {
1313
const { activeIndex } = item;
14-
1514
return (
1615
<div relative="" className="nav-menu-group">
1716
<button
@@ -31,7 +30,6 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
3130
absolute=""
3231
pos="top-13 right-0"
3332
m="x-0.8"
34-
opacity="0"
3533
transition="opacity duration-300"
3634
className="nav-menu-group-content invisible"
3735
>
@@ -45,7 +43,8 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
4543
bg="bg-default"
4644
style={{
4745
boxShadow: 'var(--island-shadow-3)',
48-
marginRight: '-1.5rem'
46+
marginRight: '-1.5rem',
47+
zIndex: 100
4948
}}
5049
>
5150
{item.items.map((child, index) => {

‎packages/island/src/theme-default/components/Nav/NavMenuSingleItem.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import { useLocation } from 'react-router-dom';
21
import { DefaultTheme } from 'shared/types';
32
import { normalizeHref } from '@client';
43
import { Link } from '../Link/index';
54

6-
export function NavMenuSingleItem(item: DefaultTheme.NavItemWithLink) {
7-
const location = useLocation();
8-
const isActive = new RegExp(item.activeMatch || item.link).test(
9-
location.pathname
10-
);
5+
interface Props {
6+
pathname: string;
7+
}
8+
9+
export function NavMenuSingleItem(item: DefaultTheme.NavItemWithLink & Props) {
10+
const { pathname } = item;
11+
const isActive = new RegExp(item.activeMatch || item.link).test(pathname);
1112
return (
1213
<div
1314
key={item.text}

‎packages/island/src/theme-default/components/Nav/index.module.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,15 @@
4646
}
4747
}
4848
}
49-
49+
.rightNav {
50+
display: none;
51+
}
52+
@media (min-width: 768px) {
53+
.rightNav {
54+
display: flex;
55+
align-items: center;
56+
}
57+
}
5058
.container {
5159
max-width: calc(var(--island-layout-max-width) - 64px);
5260
}

0 commit comments

Comments
 (0)