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

Commit 1fca2d3

Browse files
author
Je
committed
chore: update examples
1 parent e0038c2 commit 1fca2d3

File tree

12 files changed

+116
-119
lines changed

12 files changed

+116
-119
lines changed

‎examples/hello-world/components/logo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'https://esm.sh/react'
22

3-
export default function Logo({ height = 90 }: { height?: number }) {
3+
export default function Logo({ height = 100 }: { height?: number }) {
44
return (
55
<img src="/logo.png" height={height} title="Aleph.js" />
66
)

‎examples/hello-world/pages/index.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { Import } from 'https://deno.land/x/aleph/mod.ts'
1+
import { Import, useDeno } from 'https://deno.land/x/aleph/mod.ts'
22
import React, { useState } from 'https://esm.sh/react'
33
import Logo from '../components/logo.tsx'
44

55
export default function Home() {
66
const [count, setCount] = useState(0)
7+
const version = useDeno(() => {
8+
return Deno.version
9+
})
710

811
return (
912
<div className="page">
@@ -25,6 +28,7 @@ export default function Home() {
2528
<button onClick={() => setCount(n => n - 1)}>-</button>
2629
<button onClick={() => setCount(n => n + 1)}>+</button>
2730
</p>
31+
<p className="copyinfo">Built by Aleph.js in Deno v{version.deno}</p>
2832
</div>
2933
)
3034
}

‎examples/hello-world/style/index.less

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
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+
112
body {
213
font-family: "Helvetica Neue", Helvetica, Arial sans-serif;
14+
font-size: 16px;
315
}
416

517
main {
618
display: flex;
719
align-items: center;
820
justify-content: center;
9-
min-height: 100vh;
21+
height: 100vh;
1022
}
1123

1224
.page {
13-
display: flex;
14-
align-items: center;
15-
justify-content: left;
16-
flex-direction: column;
17-
1825
h1 {
1926
margin: 0;
2027
line-height: 1.5;
21-
font-size: 16px;
28+
font-size: 18px;
2229
font-weight: 400;
2330
text-align: center;
2431
color: #000;
@@ -31,7 +38,6 @@ main {
3138
p {
3239
margin: 0;
3340
line-height: 1.5;
34-
font-size: 15px;
3541
text-align: center;
3642
color: #333;
3743
}
@@ -60,31 +66,55 @@ main {
6066
}
6167

6268
.counter {
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
6372
width: 260px;
64-
margin-top: 24px;
65-
padding: 12px 0;
66-
border: 1px dashed #eee;
73+
height: 48px;
74+
margin: 24px auto 0;
75+
border: 1px dashed #ddd;
6776
border-radius: 6px;
6877
transition: border-color 0.15s ease-in;
6978

7079
&:hover {
71-
border-color: #ddd;
80+
border-color: #ccc;
7281
}
7382

74-
strong,
75-
button {
83+
strong {
7684
display: inline-block;
85+
width: 48px;
86+
font-weight: 600;
7787
text-align: center;
7888
}
79-
strong {
80-
width: 45px;
81-
}
89+
8290
button {
83-
width: 24px;
91+
display: line-flex;
92+
align-items: center;
93+
justify-content: center;
94+
width: 22px;
95+
height: 22px;
96+
border-radius: 5px;
97+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
98+
line-height: 1;
99+
font-size: 12px;
100+
font-family: Courier, monospace;
101+
font-weight: 600;
102+
color: #666;
84103
cursor: pointer;
104+
105+
&:hover {
106+
color: #111;
107+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
108+
}
85109
}
86110
button + button {
87-
margin-left: 6px;
111+
margin-left: 9px;
88112
}
89113
}
114+
115+
.copyinfo {
116+
margin-top: 24px;
117+
font-size: 14px;
118+
color: #999;
119+
}
90120
}

‎examples/markdown-blog/pages/about.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Head, Link } from 'https://deno.land/x/aleph/mod.ts'
2+
import React from 'https://esm.sh/react'
3+
4+
export default function About() {
5+
return (
6+
<>
7+
<Head>
8+
<title>About Me.</title>
9+
</Head>
10+
<h1>About Me.</h1>
11+
<p><strong>Me</strong>, a <em>full-stack</em> web developor.</p>
12+
<p><Link to="/">Home</Link></p>
13+
</>
14+
)
15+
}

‎examples/markdown-blog/pages/blog.tsx

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,17 @@
1-
import { Head } from 'https://deno.land/x/aleph/mod.ts'
2-
import React, { ComponentType } from 'https://esm.sh/react'
1+
import { Head, Link } from 'https://deno.land/x/aleph/mod.ts'
2+
import React from 'https://esm.sh/react'
33

4-
interface Metadata {
5-
title: string
6-
author: string
7-
date: string
8-
}
9-
10-
export default function Blog({ Page }: { Page: ComponentType & { meta: Metadata } }) {
4+
export default function Blog() {
115
return (
126
<>
137
<Head>
14-
<title>{Page.meta.title}</title>
8+
<title>My Blog.</title>
159
</Head>
16-
<h1>{Page.meta.title}</h1>
17-
<p style={{ color: 'gray', border: '1px solid #ddd', padding: 12, borderRadius: 6 }}>
18-
<small>
19-
<em>{Page.meta.author}, {Page.meta.date}</em>
20-
</small>
21-
</p>
22-
<Page />
10+
<h1>My Blog.</h1>
11+
<ul>
12+
<li><Link to="/post/hello-world">Hello World</Link></li>
13+
</ul>
14+
<p><Link to="/">Home</Link></p>
2315
</>
2416
)
2517
}

‎examples/markdown-blog/pages/blog/index.md

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎examples/markdown-blog/pages/blog/readme.md

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎examples/markdown-blog/pages/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import React from 'https://esm.sh/react'
33

44
export default function Home() {
55
return (
6-
<div className="wrapper">
7-
<Head>
8-
<title>My Blog.</title>
6+
<>
7+
<Head>
8+
<title>Me.</title>
99
</Head>
10-
<h1>My Blog.</h1>
10+
<h1>Me.</h1>
1111
<ul>
12-
<li><Link to="/blog">Hello World</Link></li>
13-
<li><Link to="/blog/readme">Aleph.js</Link></li>
12+
<li><Link to="/about">About Me</Link></li>
13+
<li><Link to="/blog">My Blog</Link></li>
1414
</ul>
15-
</div>
15+
</>
1616
)
1717
}

‎examples/markdown-blog/pages/post.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Head, Link } from 'https://deno.land/x/aleph/mod.ts'
2+
import React, { ComponentType } from 'https://esm.sh/react'
3+
4+
interface Metadata {
5+
title: string
6+
author: string
7+
date: string
8+
}
9+
10+
export default function Blog({ Page }: { Page: ComponentType & { meta: Metadata } }) {
11+
return (
12+
<>
13+
<Head>
14+
<title>{Page.meta.title}</title>
15+
</Head>
16+
<Page />
17+
<p style={{ color: '#666' }}>created by <em style={{ color: '#000' }}>{Page.meta.author}</em> at <em style={{ color: '#000' }}>{Page.meta.date}</em></p>
18+
<p><Link to="/blog">My Blog</Link></p>
19+
</>
20+
)
21+
}

‎examples/markdown-blog/pages/post/hello-world.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: Hello World
3+
author: postUI Lab.
4+
date: 2020-10-01
5+
---
6+
7+
# Hello World
8+
9+
**Lorem ipsum** dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

0 commit comments

Comments
 (0)