Skip to content

Commit 6e3a322

Browse files
cblanqueracblanquera
committed
documentation layout
1 parent 878f20f commit 6e3a322

48 files changed

Lines changed: 5331 additions & 164 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎config/common.ts‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,7 @@ export const session = {
4343
key: 'session',
4444
//used to generate the session id
4545
seed: 'abc123',
46-
access: {
47-
GUEST: [
48-
//page routes
49-
{ method: 'ALL', route: '/' },
50-
{ method: 'GET', route: '/form' },
51-
{ method: 'ALL', route: '/auth/**' },
52-
{ method: 'ALL', route: '/api/**' }
53-
]
54-
}
46+
access: { GUEST: [ { method: 'ALL', route: '/**' } ] }
5547
};
5648

5749
export const cookie = {

‎config/develop.ts‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -32,33 +32,11 @@ export const config: Config = {
3232
plugins: [ unocss() ]
3333
}
3434
},
35-
session: {
36-
...common.session,
37-
access: {
38-
GUEST: [
39-
...common.session.access.GUEST,
40-
//dev routes
41-
{ method: 'ALL', route: '/@vite/client' },
42-
{ method: 'ALL', route: '/@react-refresh' },
43-
{ method: 'ALL', route: '/@fs/**' },
44-
{ method: 'ALL', route: '/node_modules/**' },
45-
{ method: 'ALL', route: '/__uno.css' },
46-
{ method: 'ALL', route: '/plugins/**' },
47-
{ method: 'ALL', route: '/react.svg' },
48-
//public routes
49-
{ method: 'GET', route: '/assets/**' },
50-
{ method: 'GET', route: '/client/**' },
51-
{ method: 'GET', route: '/images/**' },
52-
{ method: 'GET', route: '/styles/**' },
53-
{ method: 'GET', route: '/favicon.ico' },
54-
{ method: 'GET', route: '/favicon.png' },
55-
]
56-
}
57-
},
5835
brand: common.brand,
5936
cli: common.cli,
6037
cookie: common.cookie,
61-
language: common.language
38+
language: common.language,
39+
session: common.session
6240
};
6341

6442
export async function bootstrap() {

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"private": true,
66
"plugins": [
77
"./plugins/app/plugin",
8+
"./plugins/docs/plugin",
89
"stackpress"
910
],
1011
"scripts": {
@@ -17,7 +18,8 @@
1718
"frui": "0.1.6",
1819
"react": "19.1.0",
1920
"react-dom": "19.1.0",
20-
"stackpress": "0.2.9"
21+
"react-syntax-highlighter": "15.6.1",
22+
"stackpress": "0.2.10"
2123
},
2224
"devDependencies": {
2325
"@stackpress/idea-transformer": "0.5.15",

‎plugins/app/Layout.tsx‎

Lines changed: 50 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,86 @@
11
//modules
22
import { useEffect } from 'react';
3-
import { useLanguage } from 'r22n';
43
//views
54
import type {
65
PanelAppProps,
6+
LayoutHeadProps,
77
LayoutPanelProps
88
} from 'stackpress/view/client';
99
import {
1010
unload,
11-
useSession,
1211
useTheme,
13-
useToggle,
12+
useLanguage,
1413
NotifyContainer,
15-
LayoutHead,
16-
LayoutRight,
1714
LayoutMain,
1815
LayoutProvider
1916
} from 'stackpress/view/client';
2017

21-
export function UserMenu() {
22-
const session = useSession();
23-
const { changeLanguage } = useLanguage();
18+
export function Head(props: LayoutHeadProps) {
19+
const { theme, toggleTheme } = props;
20+
const { _ } = useLanguage();
21+
const themeColor = theme === 'dark' ? 'bg-gray-600': 'bg-orange-600';
22+
const themeIcon = theme === 'dark' ? 'fa-moon': 'fa-sun';
2423
return (
25-
<section className="flex flex-col px-h-100-0">
26-
<header>
27-
{session.data.id ? (
28-
<div className="px-px-10 px-py-14 theme-tx1 flex items-center">
29-
<i className="px-fs-26 inline-block px-mr-10 fas fa-user-circle" />
30-
<span>{session.data.name}</span>
31-
</div>
32-
) : null}
33-
<nav className="theme-bg-bg3 px-px-10 px-py-12">
34-
<a
35-
className="theme-info theme-bg-bg0 px-fs-10 inline-block px-p-5"
36-
onClick={() => changeLanguage('en_US')}
37-
>EN</a>
24+
<header className="theme-bg-bg1 theme-bc-bd0 duration-200 absolute px-h-60 px-l-0 px-r-0 px-t-0 border-b">
25+
<div className="flex items-center px-px-20 px-h-100-0">
26+
<a className="theme-tx1 flex items-center no-underline px-mr-10" href="/">
27+
<img
28+
src="/images/stackpress-logo-icon.png"
29+
alt="stackpress logo"
30+
className="px-w-30 px-h-30 px-mr-10"
31+
/>
32+
<img
33+
src="/images/stackpress-logo-text.png"
34+
alt="stackpress logo"
35+
className="px-h-16 px-mr-10"
36+
/>
37+
</a>
38+
<nav className="flex-grow">
39+
<a className="theme-tx1 flex items-center no-underline uppercase" href="/docs/introduction">
40+
{_('Docs')}
41+
</a>
42+
</nav>
43+
<nav className="rmd-hidden flex items-center">
44+
<a className="px-mr-10" href="https://github.com/stackpress">
45+
<i className="px-fs-26 fab fa-github"></i>
46+
</a>
3847
<a
39-
className="theme-info theme-bg-bg0 px-fs-10 inline-block px-p-5 px-ml-5"
40-
onClick={() => changeLanguage('th_TH')}
41-
>TH</a>
48+
className="px-mr-10 px-w-26 px-h-26 hex-bg-CB3837 rounded-full flex justify-center items-center"
49+
href="https://www.npmjs.com/package/stackpress"
50+
>
51+
<i className="px-fs-16 fab fa-npm text-white"></i>
52+
</a>
53+
{toggleTheme && (
54+
<button
55+
className={`flex justify-center items-center b-0 px-mr-10 px-h-26 px-w-26 px-fs-18 rounded-full text-white ${themeColor}`}
56+
onClick={() => toggleTheme()}
57+
>
58+
<i className={`fas ${themeIcon}`}></i>
59+
</button>
60+
)}
4261
</nav>
43-
</header>
44-
<main className="flex-grow bg-t-0">
45-
{session.data.id ? (
46-
<div className="px-h-100-0">
47-
{session.data.roles && session.data.roles.includes('ADMIN') && (
48-
<nav className="theme-bc-bd0 flex items-center px-px-10 px-py-14 border-b" >
49-
<i className="inline-block px-mr-10 fas fa-gauge" />
50-
<a className="theme-info" href="/admin/profile/search">Admin</a>
51-
</nav>
52-
)}
53-
54-
<nav className="theme-bc-bd0 flex items-center px-px-10 px-py-14 border-b">
55-
<i className="inline-block px-mr-10 fas fa-power-off" />
56-
<a className="theme-info" href="/auth/signout">Sign Out</a>
57-
</nav>
58-
</div>
59-
) : (
60-
<div className="h-full">
61-
<nav className="theme-bc-bd0 flex items-center px-px-10 px-py-14 border-b">
62-
<i className="inline-block px-mr-10 fas fa-lock" />
63-
<a className="theme-info" href="/auth/signin">Sign In</a>
64-
</nav>
65-
<nav className="theme-bc-bd0 flex items-center px-px-10 px-py-14 border-b">
66-
<i className="inline-block px-mr-10 fas fa-trophy" />
67-
<a className="theme-info" href="/auth/signup">Sign Up</a>
68-
</nav>
69-
</div>
70-
)}
71-
</main>
72-
</section>
62+
</div>
63+
</header>
7364
);
7465
}
7566

76-
export function PanelApp(props: PanelAppProps) {
67+
export function App(props: PanelAppProps) {
7768
const { children } = props;
78-
const [ right, toggleRight ] = useToggle();
7969
const { theme, toggle: toggleTheme } = useTheme();
8070
return (
8171
<div className={`${theme} relative overflow-hidden px-w-100-0 px-h-100-0 theme-bg-bg0 theme-tx1`}>
82-
<LayoutHead
83-
theme={theme}
84-
toggleRight={toggleRight}
85-
toggleTheme={toggleTheme}
86-
/>
87-
<LayoutRight head open={right}><UserMenu /></LayoutRight>
88-
<LayoutMain head right open={{ right }}>{children}</LayoutMain>
72+
<Head theme={theme} toggleTheme={toggleTheme} />
73+
<LayoutMain head>{children}</LayoutMain>
8974
</div>
9075
);
9176
}
9277

93-
export default function LayoutPanel(props: LayoutPanelProps) {
78+
export default function Layout(props: LayoutPanelProps) {
9479
const {
9580
data,
9681
session,
9782
request,
9883
response,
99-
menu,
100-
left,
101-
right,
10284
children
10385
} = props;
10486
//unload flash message
@@ -110,9 +92,7 @@ export default function LayoutPanel(props: LayoutPanelProps) {
11092
request={request}
11193
response={response}
11294
>
113-
<PanelApp left={left} right={right} menu={menu}>
114-
{children}
115-
</PanelApp>
95+
<App>{children}</App>
11696
<NotifyContainer />
11797
</LayoutProvider>
11898
);

0 commit comments

Comments
 (0)