Skip to content

Commit 143f0c2

Browse files
antfuantfu
committed
＼(￣▽￣)／
1 parent c262fee commit 143f0c2

22 files changed

+987
-1307
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ dist
44
*.local
55
.presite
66
.env
7+
.vite-ssg-dist

‎netlify.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
[build]
2-
publish = ".presite"
2+
publish = "dist"
33
command = "npm run build"
44

55
[[redirects]]

‎package.json

+17-16
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,53 @@
22
"private": true,
33
"scripts": {
44
"dev": "vite --port 3333 --open",
5-
"build": "cross-env NODE_ENV=production vite build && esno scripts/ssg.ts",
5+
"build": "cross-env NODE_ENV=production vite-ssg build",
66
"fetch": "esno scripts/fetch.ts"
77
},
88
"dependencies": {
9-
"@iconify/iconify": "^2.0.0-rc.2",
10-
"@vueuse/core": "^4.0.0-rc.8",
9+
"@iconify/iconify": "^2.0.0-rc.4",
10+
"@vueuse/core": "^4.0.0",
1111
"dayjs": "^1.9.7",
1212
"nprogress": "^0.2.0",
13-
"p5i": "^0.3.1",
13+
"p5i": "^0.4.2",
1414
"vue": "^3.0.4",
15-
"vue-router": "4.0.0-rc.3"
15+
"vue-router": "4.0.1"
1616
},
1717
"devDependencies": {
1818
"@antfu/eslint-config-vue": "^0.4.3",
19-
"@iconify/json": "^1.1.272",
19+
"@iconify/json": "^1.1.275",
2020
"@purge-icons/generated": "^0.4.1",
2121
"@types/cheerio": "^0.22.23",
2222
"@types/fs-extra": "^9.0.5",
23-
"@types/markdown-it": "^10.0.3",
23+
"@types/markdown-it": "^12.0.0",
2424
"@types/nprogress": "^0.2.0",
25-
"@typescript-eslint/eslint-plugin": "^4.9.1",
25+
"@typescript-eslint/eslint-plugin": "^4.11.0",
2626
"@vue/compiler-sfc": "^3.0.4",
27+
"@vue/server-renderer": "^3.0.4",
2728
"autoprefixer": "^10.1.0",
28-
"axios": "^0.21.0",
29-
"cheerio": "^1.0.0-rc.3",
30-
"chromium": "3.0.2",
29+
"axios": "^0.21.1",
30+
"cheerio": "^1.0.0-rc.5",
3131
"cross-env": "^7.0.3",
32-
"eslint": "^7.15.0",
32+
"eslint": "^7.16.0",
3333
"esno": "^0.3.0",
3434
"fast-glob": "^3.2.4",
3535
"fs-extra": "^9.0.1",
36-
"markdown-it": "^12.0.3",
36+
"markdown-it": "^12.0.4",
3737
"markdown-it-shiki": "^0.0.2",
3838
"postcss-nested": "^5.0.3",
39-
"presite": "^2.0.2",
4039
"tailwindcss": "^2.0.2",
4140
"typescript": "^4.1.3",
4241
"vite": "^1.0.0-rc.13",
4342
"vite-plugin-components": "^0.5.0",
44-
"vite-plugin-md": "^0.1.4",
43+
"vite-plugin-md": "^0.1.5",
4544
"vite-plugin-purge-icons": "^0.4.5",
4645
"vite-plugin-voie": "^0.4.1",
46+
"vite-ssg": "^0.0.12",
4747
"voie-pages": "^0.4.0"
4848
},
4949
"resolutions": {
50-
"postcss": "8.1.7"
50+
"postcss": "8.1.7",
51+
"vue-router": "4.0.0-rc.3"
5152
},
5253
"eslintConfig": {
5354
"extends": "@antfu/eslint-config-vue",

‎src/logics/dark.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@ export const isDark = computed({
1818

1919
watch(
2020
isDark,
21-
v => document.documentElement.classList.toggle('dark', v),
21+
v => typeof document !== 'undefined' && document.documentElement.classList.toggle('dark', v),
2222
{ immediate: true },
2323
)

‎src/main.ts

+5-14
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
11
import './css/index.postcss'
2-
import { createApp } from 'vue'
3-
import { createRouter, createWebHistory } from 'vue-router'
4-
2+
import { ViteSSG } from 'vite-ssg'
53
// import routes generated by Voie
64
import routes from 'voie-pages'
75
// import icons data generated by PurgeIcons
86
import '@purge-icons/generated'
97

108
import App from './App.vue'
119

12-
const app = createApp(App)
13-
const router = createRouter({
14-
history: createWebHistory(),
15-
routes,
16-
})
17-
18-
app.use(router)
19-
20-
router.isReady().then(() => {
21-
app.mount('#app', true)
22-
})
10+
export const createApp = ViteSSG(
11+
App,
12+
{ routes },
13+
)

‎src/pages/2020/1.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ In [Drawing With Numbers](https://daneden.me/blog/2016/drawing-with-numbers), Da
1818
Here’s Daniel’s sketch on [CodePen](https://codepen.io/daneden/pen/MjNZJa).<br>
1919
We have reproduced it below:
2020

21-
<sketch-day-1 />
21+
<client-only>
22+
<sketch-day-1 />
23+
</client-only>
2224

2325
Your task is to recreate it. We suggest that you use [p5.js](https://p5js.org), which is easy to get started. With [p5.js editor](https://editor.p5js.org), the only thing you need to get started is a browser. Of course, feel free to use any creative coding libraries that you prefer.
2426

‎src/pages/2020/12.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ These symbols might not make sense now, but hopefully they will after doing toda
2121

2222
The task today is to study how this sketch is made, and make one yourself.
2323

24-
<sketch-day-12 />
24+
<client-only>
25+
<sketch-day-12 />
26+
</client-only>
2527

2628
Starting from scratch is a bit too much for one day's task. I'd suggest downloading Processing to play with the sketch & learning how each parameter affects the system. Finally, translate the system into p5.js. A [port](https://p5js.org/examples/simulate-penrose-tiles.html) of p5.js is available as well.
2729

‎src/pages/2020/13.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ Today's pick is a simple particle system by [Mike Bostock](https://en.wikipedia.
66

77
Similar to [Day 1](https://codecember.ink/2020/1), the sketch picked today is mechanically simple but produces a minimalistic & elegant rendering. Let's start simple and work towards the complex.
88

9-
<sketch-day-13 />
9+
<client-only>
10+
<sketch-day-13 />
11+
</client-only>
1012

1113
## The Task
1214

‎src/pages/2020/15.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
22

33
Movement with time could create a trail. In comform, trails of particles can be created with a surprisingly simple method - just not clean the canvas on each frame. Continue from [day 13](/2020/13)'s sketch, just remove the cleaning code in the `draw()` method, we can have these:
44

5-
<sketch-day-15-1 />
5+
<client-only>
6+
<sketch-day-15-1 />
7+
</client-only>
68

79
Cool, but it may look a bit artificial. We can apply some rules to the particles, for example, following [Anders Hoff](https://inconvergent.net/)'s article [Shepherding Random Numbers](https://inconvergent.net/2016/shepherding-random-numbers/). Making the initial distribution of the particles on the circumference of a circle we can have this:
810

9-
<sketch-day-15-2 />
11+
<client-only>
12+
<sketch-day-15-2 />
13+
</client-only>
1014

1115
Here is [the code in p5.js](https://editor.p5js.org/antfu/sketches/VbM1ovnB3).
1216

‎src/pages/2020/16.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@
33
Today we will learn this beautiful wave motion by [Dave Whyte](https://beesandbombs.tumblr.com/post/45513650541/orbiters). I always find [Dave Whyte](https://twitter.com/beesandbombs)'s work so inspiring, and you should definitely check them out.
44

55
<br>
6-
<sketch-day-16-1 />
6+
<client-only>
7+
<sketch-day-16-1 />
8+
</client-only>
79
<br>
810

911
This is so pleasing to look at, right? And you may think this could be a bit hard to implement that may have some bitter physics or math involved. But don't be scared, let's see the moving path of the particles first:
1012

1113
<br>
12-
<sketch-day-16-2 />
14+
<client-only>
15+
<sketch-day-16-2 />
16+
</client-only>
1317
<br>
1418

1519
You will quickly find out that every particle is just moving on a circle with the exact same speed. Each of them has a slightly different offset against each other. And that's it. As the [Exploratorium](https://twitter.com/exploratorium/status/670667375172329472) explains, "Wave motion at the surface of water is made up of small circular motions of parcels of water."

‎src/pages/2020/17.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
Today's sketch is [Frozen Brush](https://www.openprocessing.org/sketch/413567) by [Jason Labbe](http://jasonlabbe3d.com/). Jason's use of particles + delaunay triangle creates a beautiful triangulation brushing effect. Hover on the sketch below, and press any key for a different effect!
44

5-
<sketch-day-17 />
5+
<client-only>
6+
<sketch-day-17 />
7+
</client-only>
68

79
## The Task
810

‎src/pages/2020/18.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ Today we are having an open task - implement the illusion, it's not necessary to
3838

3939
Here is [my port](https://editor.p5js.org/antfu/sketches/2Mgv2arXA) in p5.js implementing a very fundamental one:
4040

41-
<sketch-day-18 />
41+
<client-only>
42+
<sketch-day-18 />
43+
</client-only>
4244

4345
The basic idea is to have two animations swapping with each other, one for rotating white squares and one for the black, each of the animation should finish a complete loop back to what it starts. On the moment of switching, the black background becomes squares while the white squares become the background, vice versa.
4446

‎src/pages/2020/19.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ Among all of Jared's work, I love [Substrate](http://www.complexification.net/ga
1818

1919
We have visited Matt DesLauriers's p5.js demos in [Day 2](https://codecember.ink/2020/2) and [Day 6](https://codecember.ink/2020/6). The last sketch by Matt is an attempt to capture the substrate growing algorithm. Let's recreate that today.
2020

21-
<sketch-day-19 />
21+
<client-only>
22+
<sketch-day-19 />
23+
</client-only>
2224

2325
The source code is at [Glitch](https://glitch.com/edit/#!/p5-example-algorithm?path=sketch.js%3A1%3A0). Give it a try to recreate it with [p5.js editor](https://editor.p5js.org)!
2426

‎src/pages/2020/2.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ I picked today's sketch, [line ⟷ circle](https://glitch.com/edit/#!/p5-example
1515

1616
The original sketch is on [Glitch](https://glitch.com/edit/#!/p5-example-line-circle?path=sketch.js), but you can also edit it on p5.js editor with [my port](https://editor.p5js.org/octref/sketches/WqUGTmueF). The sketch is reproduced below.
1717

18-
<sketch-day-2 />
18+
<client-only>
19+
<sketch-day-2 />
20+
</client-only>
1921

2022
If you want to challenge yourself, I'd suggest not reading the original source code until you have reproduced it. Here's how I would do it:
2123

‎src/pages/2020/3.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ The original code is written with pure Canvas API. One suggestion I have is to r
2626

2727
The sketch is reproduced below.
2828

29-
<sketch-day-3 />
29+
<client-only>
30+
<sketch-day-3 />
31+
</client-only>
3032

3133
When you are all done, post your work on Twitter with the hashtag [#codecember](https://twitter.com/hashtag/codecember) and [#day3](https://twitter.com/hashtag/day3). **Remember to include a link to the source code**, so others can learn from your creation. We look forward to seeing your sketch!
3234

‎src/pages/2020/4.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# Peter de Jong Attractor
22

3-
<sketch-day-4 />
3+
<client-only>
4+
<sketch-day-4 />
5+
</client-only>
46

57
Mesmerizing, isn't it?
68

‎src/pages/2020/5.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ To start, I'd recommend these steps:
3737
Although Manohar did his sketches in Processing, you shouldn't have a hard time [translating them into p5.js](https://github.com/processing/p5.js/wiki/Processing-transition), Processing's close kin. Here are my p5.js reimplementation that you can use as references: [Perlin Noise Field](https://editor.p5js.org/antfu/sketches/sbq-u9HZq) | [Iteration 1](https://editor.p5js.org/antfu/sketches/KSVvsgQ7S).
3838

3939
<br>
40-
<sketch-day-5 />
40+
<client-only>
41+
<sketch-day-5 />
42+
</client-only>
4143
<br>
4244
<br>
4345

‎src/pages/2020/6.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
Continuing from Day 2, let's do another one from [Matt's p5 gallery](https://p5-demos.glitch.me):
44

5-
<sketch-day-6 />
5+
<client-only>
6+
<sketch-day-6 />
7+
</client-only>
68

79
## The Task
810

@@ -35,4 +37,4 @@ One advantage of computational form in digial media is its kinetics & interactiv
3537
When you are all done, post your work on Twitter with the hashtag [#codecember](https://twitter.com/hashtag/codecember) and [#day6](https://twitter.com/hashtag/day6). **Remember to include a link to the source code**, so others can learn from your creation. We look forward to seeing your sketch!
3638

3739
Yours, <br>
38-
[Pine](https://twitter.com/octref) & [Anthony](https://twitter.com/antfu7)
40+
[Pine](https://twitter.com/octref) & [Anthony](https://twitter.com/antfu7)

‎src/pages/2020/7.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ It reminds me of work by [Étienne Jacob](https://twitter.com/etiennejcb), who c
88

99
Recently Étienne started a new website to share techniques he uses to create the infinite loops. I have had fun playing with this technique, so I picked it as today's sketch to recreate:
1010

11-
<sketch-day-7 />
11+
<client-only>
12+
<sketch-day-7 />
13+
</client-only>
1214

1315
## The Task
1416

‎vite.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const config: UserConfig = {
1414
alias,
1515
plugins: [
1616
Voie({
17-
importMode: 'sync',
17+
// importMode: 'sync',
1818
extensions: ['vue', 'md'],
1919
}),
2020
Markdown({

‎vite.ssg.config.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import path from 'path'
2+
import { UserConfig } from 'vite'
3+
import Voie from 'vite-plugin-voie'
4+
import PurgeIcons from 'vite-plugin-purge-icons'
5+
import ViteComponents from 'vite-plugin-components'
6+
import Markdown from 'vite-plugin-md'
7+
import Shiki from 'markdown-it-shiki'
8+
9+
const alias = {
10+
'/~/': path.resolve(__dirname, 'src'),
11+
}
12+
13+
const config: UserConfig = {
14+
alias,
15+
plugins: [
16+
Voie({
17+
// importMode: 'sync',
18+
extensions: ['vue', 'md'],
19+
}),
20+
Markdown({
21+
wrapperComponent: 'day-wrapper',
22+
markdownItSetup(md) {
23+
md.use(Shiki, { theme: { dark: 'nord', light: 'min-light' } })
24+
},
25+
}),
26+
ViteComponents({
27+
alias,
28+
dirs: [
29+
'src/components',
30+
// SSG
31+
// 'src/sketches',
32+
],
33+
extensions: ['vue', 'md'],
34+
customLoaderMatcher: ({ path }) => path.endsWith('.md'),
35+
}),
36+
PurgeIcons(),
37+
],
38+
}
39+
40+
export default config

0 commit comments

Comments
 (0)