Skip to content

Commit 1b2079d

Browse files
cblanqueracblanquera
committed
getting started
1 parent 6e3a322 commit 1b2079d

File tree

4 files changed

+239
-10
lines changed

4 files changed

+239
-10
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@types/node": "22.14.1",
2929
"@types/react": "19.1.2",
3030
"@types/react-dom": "19.1.2",
31+
"@types/react-syntax-highlighter": "15.5.13",
3132
"@vitejs/plugin-react": "4.4.1",
3233
"chai": "5.2.0",
3334
"dotenv-cli": "8.0.0",

‎plugins/docs/components/Code.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import type { CSSProperties } from 'react';
2+
import { useEffect, useState } from 'react';
3+
import SyntaxHighlighter from 'react-syntax-highlighter';
4+
import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
5+
6+
// copy should reveal the copy button, but onCopy should be defined to modify its behavior
7+
// meanwhile, the presence of onCopy should be enough to show the copy button
8+
9+
export default function Code(props: {
10+
copy?: boolean;
11+
className?: string;
12+
value?: string;
13+
language?: string;
14+
numbers?: boolean;
15+
onCopy?: () => void;
16+
children: string;
17+
style?: CSSProperties;
18+
}) {
19+
const [ mounted, setMounted ] = useState(false);
20+
const {
21+
children,
22+
className,
23+
copy,
24+
onCopy,
25+
language = 'javascript',
26+
numbers,
27+
style = {
28+
background: 'transparent',
29+
color: 'inherit',
30+
padding: '10px'
31+
}
32+
} = props;
33+
34+
const body = children
35+
.split('\n')
36+
.map((line) => (language === 'bash' ? `$ ${line}` : line))
37+
.join('\n');
38+
39+
//extends the default copy function if an extension is provided
40+
const handleCopy = () => {
41+
if (onCopy) {
42+
onCopy();
43+
}
44+
navigator.clipboard.writeText(children.toString());
45+
};
46+
47+
//only add highlighting when mounted
48+
//necessary because of problems with SSR
49+
useEffect(() => {
50+
setMounted(true);
51+
}, []);
52+
53+
return (
54+
<div className={className} style={{ position: 'relative' }}>
55+
{copy && (
56+
<div style={{
57+
float: 'right',
58+
margin: '10px',
59+
color: 'inherit',
60+
cursor: 'pointer',
61+
whiteSpace: 'nowrap'
62+
}} onClick={copy && handleCopy}>
63+
<span>❐</span> Copy
64+
</div>
65+
)}
66+
{mounted && (
67+
<SyntaxHighlighter
68+
language={language}
69+
style={atomOneDark}
70+
showLineNumbers={numbers}
71+
customStyle={style}
72+
>
73+
{body}
74+
</SyntaxHighlighter>
75+
)}
76+
</div>
77+
);
78+
}

‎plugins/docs/views/getting-started.tsx‎

Lines changed: 152 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@ import type {
33
ServerConfigProps,
44
ServerPageProps
55
} from 'stackpress/view/client';
6-
import { useLanguage } from 'r22n';
6+
import { useState } from 'react';
7+
import { useLanguage } from 'stackpress/view/client';
78
//docs
89
import {
910
Header1,
1011
Header2,
1112
Header3,
1213
Paragraph,
14+
InlineCode,
1315
Nav
1416
} from '../Typography.js';
17+
import Code from '../components/Code.js';
1518
import Layout from '../Layout.js';
1619

1720
export function Head(props: ServerPageProps<ServerConfigProps>) {
@@ -53,24 +56,146 @@ export function Right() {
5356
{_('On this page')}
5457
</h6>
5558
<nav className="px-fs-14 px-lh-32">
56-
<a className="theme-tx0 block" href="#item1">
57-
{_('item1')}
59+
<a className="theme-tx0 block" href="#system-requirements">
60+
{_('1. System Requirements')}
61+
</a>
62+
<a className="theme-tx0 block" href="#manual-installation">
63+
{_('2. Manual Installation')}
5864
</a>
5965
</nav>
6066
</menu>
6167
);
6268
}
6369

6470
export function Body() {
71+
const [ install, setInstall ] = useState('npm');
6572
return (
66-
<main className="px-h-100-0 overflow-auto">
73+
<main className="px-h-100-0 overflow-auto px-p-10">
6774
<Header1>Getting Started</Header1>
6875
<Paragraph>
69-
describe
76+
The following is a guide to get you started with Stackpress.
77+
</Paragraph>
78+
79+
<a id="system-requirements"></a>
80+
<Header2>1. System Requirements</Header2>
81+
82+
<Paragraph>
83+
Before you begin, make sure your system meets the following
84+
requirements.
85+
</Paragraph>
86+
87+
<ul className="px-lh-30 px-px-20">
88+
<li>• Node.js 22</li>
89+
<li>• macOS, Windows (including WSL), or Linux.</li>
90+
</ul>
91+
92+
<a id="manual-installation"></a>
93+
<Header2>2. Manual Installation</Header2>
94+
95+
<Paragraph>
96+
To manually create a new Stackpress project, install the
97+
following packages. These are needed for development, the build
98+
process and live server.
99+
</Paragraph>
100+
101+
<div className="rounded-lg px-mx-10">
102+
<div className="theme-bg-bg3 flex items-center">
103+
<div
104+
className={`px-py-10 px-px-30 ${install === 'npm' ? 'theme-bg-bg1' : 'theme-bg-bg2'}`}
105+
onClick={() => setInstall('npm')}
106+
>
107+
<i className="px-fs-20 fab fa-fw fa-npm" />
108+
</div>
109+
<div
110+
className={`px-py-10 px-px-30 ${install === 'yarn' ? 'theme-bg-bg1' : 'theme-bg-bg2'}`}
111+
onClick={() => setInstall('yarn')}
112+
>
113+
<i className="px-fs-20 fab fa-fw fa-yarn" />
114+
</div>
115+
</div>
116+
<Code copy language="bash" className={`theme-bg-bg1 ${install === 'npm' ? '' : 'hidden'}`}>{
117+
'npm -i stackpress frui react react-dom'
118+
}</Code>
119+
<Code copy language="bash" className={`theme-bg-bg1 ${install === 'yarn' ? '' : 'hidden'}`}>{
120+
'yarn add stackpress frui react react-dom'
121+
}</Code>
122+
</div>
123+
124+
<Paragraph>
125+
Next install the following development packages. These are
126+
needed for development and the build process.
127+
</Paragraph>
128+
129+
<div className="rounded-lg px-mx-10 px-mb-20">
130+
<div className="theme-bg-bg3 flex items-center">
131+
<div
132+
className={`px-py-10 px-px-30 ${install === 'npm' ? 'theme-bg-bg1' : 'theme-bg-bg2'}`}
133+
onClick={() => setInstall('npm')}
134+
>
135+
<i className="px-fs-20 fab fa-fw fa-npm" />
136+
</div>
137+
<div
138+
className={`px-py-10 px-px-30 ${install === 'yarn' ? 'theme-bg-bg1' : 'theme-bg-bg2'}`}
139+
onClick={() => setInstall('yarn')}
140+
>
141+
<i className="px-fs-20 fab fa-fw fa-yarn" />
142+
</div>
143+
</div>
144+
<Code copy language="bash" className={`theme-bg-bg1 ${install === 'npm' ? '' : 'hidden'}`}>{
145+
'npm -i -D @types/react @types/react-dom typescript tsx @stackpress/idea-transformer fast-glob prettier ts-morph @vitejs/plugin-react unocss vite'
146+
}</Code>
147+
<Code copy language="bash" className={`theme-bg-bg1 ${install === 'yarn' ? '' : 'hidden'}`}>{
148+
'yarn add -D @types/react @types/react-dom typescript tsx @stackpress/idea-transformer fast-glob prettier ts-morph @vitejs/plugin-react unocss vite'
149+
}</Code>
150+
</div>
151+
152+
<Header3>2.1. Create Typescript Configuration</Header3>
153+
154+
<p className="px-px-10 px-pb-20">
155+
In your project root, create a new file called
156+
<InlineCode>tsconfig.json</InlineCode> with the following code.
157+
This file will configure your project to use the latest Ecmascript
158+
Module Standard.
159+
</p>
160+
161+
<Code copy language="javascript" className="bg-black text-white px-mx-10 px-mb-20">{
162+
JSON.stringify({
163+
"extends": "stackpress/tsconfig/esm",
164+
"compilerOptions": {
165+
"module": "nodenext",
166+
"moduleResolution": "nodenext",
167+
},
168+
"include": [
169+
"index.ts"
170+
],
171+
"exclude": [ "node_modules" ]
172+
}, null, 2)
173+
}</Code>
174+
175+
<Header3>2.2. Create Entry File</Header3>
176+
177+
<p className="px-px-10 px-pb-20">
178+
In your project root, create a new file called
179+
<InlineCode>index.ts</InlineCode> with the following code. This
180+
file will be the entry point for your application, for now.
181+
</p>
182+
183+
<Code copy language="javascript" className="bg-black text-white px-mx-10 px-mb-20">{
184+
examples[0]
185+
}</Code>
186+
187+
<Header3>2.3. Run the Server</Header3>
188+
189+
<ol className="px-px-10 px-lh-30 px-pb-20">
190+
<li>2.3.1. In Terminal, run <InlineCode>npx tsx index.ts</InlineCode></li>
191+
<li>2.3.2. On your browser, visit <InlineCode>http://localhost:3000?name=John</InlineCode></li>
192+
</ol>
193+
194+
<Paragraph>
195+
This is enough to explore the Stackpress documentation, but to
196+
learn how to maximize the framework it's recommended to peruse
197+
the tutorials.
70198
</Paragraph>
71-
<a id="item1"></a>
72-
<Header2>Section</Header2>
73-
<Header3>Subsection</Header3>
74199

75200
<Nav
76201
prev={{ text: 'Introduction', href: '/docs/introduction' }}
@@ -93,4 +218,22 @@ export default function Page(props: ServerPageProps<ServerConfigProps>) {
93218
<Body />
94219
</Layout>
95220
);
96-
}
221+
}
222+
223+
const examples = [
224+
`
225+
//index.ts
226+
import { server } from 'stackpress/http'
227+
228+
const app = server()
229+
230+
app.get('/', (req, res) => {
231+
const name = req.data.path('name', 'guest')
232+
res.setBody('text/plain', \`Hello \${name}\`)
233+
})
234+
235+
app.create().listen(3000, () => {
236+
console.log('Server is running on port 3000')
237+
})
238+
`.trim()
239+
];

‎yarn.lock‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -934,7 +934,14 @@
934934
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.2.tgz#bd1fe3b8c28a3a2e942f85314dcfb71f531a242f"
935935
integrity sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==
936936

937-
"@types/react@19.1.2":
937+
"@types/react-syntax-highlighter@15.5.13":
938+
version "15.5.13"
939+
resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz#c5baf62a3219b3bf28d39cfea55d0a49a263d1f2"
940+
integrity sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==
941+
dependencies:
942+
"@types/react" "*"
943+
944+
"@types/react@*", "@types/react@19.1.2":
938945
version "19.1.2"
939946
resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.2.tgz#11df86f66f188f212c90ecb537327ec68bfd593f"
940947
integrity sha512-oxLPMytKchWGbnQM9O7D67uPa9paTNxO7jVoNMXgkkErULBPhPARCfkKL9ytcIJJRGjbsVwW4ugJzyFFvm/Tiw==

0 commit comments

Comments
 (0)