Skip to content
This repository was archived by the owner on Jul 6, 2025. It is now read-only.

Commit 68c63e0

Browse files
author
Je
committed
chore: add hi example
1 parent 1ea431e commit 68c63e0

File tree

7 files changed

+194
-0
lines changed

7 files changed

+194
-0
lines changed

‎examples/hi/app.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { ComponentType } from 'https://esm.sh/react'
2+
import { Head } from 'https://deno.land/x/aleph/mod.ts'
3+
4+
export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
5+
return (
6+
<>
7+
<Head>
8+
<title>Hello World - Aleph.js</title>
9+
</Head>
10+
<Page {...pageProps} />
11+
</>
12+
)
13+
}

‎examples/hi/components/logo.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'https://esm.sh/react'
2+
3+
export default function Logo({ height = 100 }: { height?: number }) {
4+
return (
5+
<img src="/logo.png" height={height} title="Aleph.js" />
6+
)
7+
}

‎examples/hi/pages/hi/[name].tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Import, useDeno, Link, useRouter } from 'https://deno.land/x/aleph/mod.ts'
2+
import React from 'https://esm.sh/react'
3+
import Logo from '../../components/logo.tsx'
4+
5+
export default function Home() {
6+
const { params } = useRouter()
7+
const version = useDeno(() => {
8+
return Deno.version
9+
})
10+
11+
return (
12+
<div className="page">
13+
<Import from="../../style/index.less" />
14+
<p className="logo"><Logo /></p>
15+
<h1>Hi, <strong>{params.name}</strong>!</h1>
16+
<p className="go-button">
17+
<Link to="/"><button>Back</button></Link>
18+
</p>
19+
<p className="links">
20+
<a href="https://alephjs.org" target="_blank">Website</a>
21+
<span>&middot;</span>
22+
<a href="https://alephjs.org/docs/get-started" target="_blank">Get Started</a>
23+
<span>&middot;</span>
24+
<a href="https://alephjs.org/docs" target="_blank">Docs</a>
25+
<span>&middot;</span>
26+
<a href="https://github.com/postui/alephjs" target="_blank">Github</a>
27+
</p>
28+
<p className="copyinfo">Built by Aleph.js in Deno v{version.deno}</p>
29+
</div>
30+
)
31+
}

‎examples/hi/pages/index.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Import, Link, useDeno } from 'https://deno.land/x/aleph/mod.ts'
2+
import React, { useState } from 'https://esm.sh/react'
3+
import Logo from '../components/logo.tsx'
4+
5+
export default function Home() {
6+
const [name, setName] = useState('')
7+
const version = useDeno(() => {
8+
return Deno.version
9+
})
10+
11+
return (
12+
<div className="page">
13+
<Import from="../style/index.less" />
14+
<p className="logo"><Logo /></p>
15+
<h1>Welcome to use <strong>Aleph.js</strong>!</h1>
16+
<p className="name-input">
17+
<input
18+
type="text"
19+
value={name}
20+
onChange={e => setName(e.target.value.trim())}
21+
placeholder="What's your name?"
22+
/>
23+
</p>
24+
<p className="go-button">
25+
<Link to={`/hi/${name}`}><button disabled={name === ''}>Go</button></Link>
26+
</p>
27+
<p className="links">
28+
<a href="https://alephjs.org" target="_blank">Website</a>
29+
<span>&middot;</span>
30+
<a href="https://alephjs.org/docs/get-started" target="_blank">Get Started</a>
31+
<span>&middot;</span>
32+
<a href="https://alephjs.org/docs" target="_blank">Docs</a>
33+
<span>&middot;</span>
34+
<a href="https://github.com/postui/alephjs" target="_blank">Github</a>
35+
</p>
36+
<p className="copyinfo">Built by Aleph.js in Deno v{version.deno}</p>
37+
</div>
38+
)
39+
}

‎examples/hi/public/favicon.ico

4.19 KB
Binary file not shown.

‎examples/hi/public/logo.png

432 KB
Loading

‎examples/hi/style/index.less

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
border: none;
5+
outline: none;
6+
font: inherit;
7+
font-size: 100%;
8+
vertical-align: baseline;
9+
background: transparent;
10+
}
11+
12+
body {
13+
font-family: "Helvetica Neue", Helvetica, Arial sans-serif;
14+
font-size: 15px;
15+
}
16+
17+
main {
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
height: 100vh;
22+
}
23+
24+
.page {
25+
h1 {
26+
margin: 0;
27+
line-height: 1.5;
28+
font-size: 18px;
29+
font-weight: 400;
30+
text-align: center;
31+
color: #000;
32+
33+
strong {
34+
font-weight: 700;
35+
}
36+
}
37+
38+
p {
39+
margin: 0;
40+
line-height: 1.5;
41+
text-align: center;
42+
color: #333;
43+
}
44+
45+
.name-input {
46+
margin-top: 36px;
47+
48+
input {
49+
width: 300px;
50+
text-align: center;
51+
padding: 7px 0;
52+
outline: 0;
53+
line-height: 1.5;
54+
font-size: 15px;
55+
border: 1px solid #e5e7eb;
56+
border-radius: 6px;
57+
}
58+
}
59+
60+
.go-button {
61+
margin-top: 15px;
62+
text-align: center;
63+
64+
button {
65+
display: inline-block;
66+
padding: 3px 12px;
67+
background-color: #333;
68+
border-radius: 6px;
69+
color: #fff;
70+
cursor: pointer;
71+
}
72+
button[disabled] {
73+
background-color: #aaa;
74+
cursor: disable;
75+
}
76+
}
77+
78+
.links {
79+
margin-top: 36px;
80+
span, a {
81+
display: inline-block;
82+
vertical-align: middle;
83+
}
84+
span {
85+
color: #999;
86+
}
87+
a {
88+
margin: 0 9px;
89+
color: #766;
90+
text-decoration: none;
91+
border-bottom: 1px dashed #cbb;
92+
93+
&:hover {
94+
border-bottom-color: transparent;
95+
}
96+
}
97+
}
98+
99+
.copyinfo {
100+
margin-top: 9px;
101+
font-size: 14px;
102+
color: #999;
103+
}
104+
}

0 commit comments

Comments
 (0)