summaryrefslogtreecommitdiffstats
path: root/2023/info/one-after.md
blob: 616ece9e9733129d51a8d958916c7e1690266d94 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
<!-- Automatically generated by emacsconf-publish-after-page -->


<a name="one-mainVideo-transcript"></a>
# Transcript


[[!template new="1" text="""Introduction""" start="00:00:00.000" video="mainVideo-one" id="subtitle"]]

[[!template text="""Hi, everybody. Welcome to the EmacsConf 2023.""" start="00:00:00.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""I hope you're doing well and you're having fun.""" start="00:00:04.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""I'm Tony Aldon, and in this talk,""" start="00:00:06.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""we are going to see how to build a static website""" start="00:00:08.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""with the package one.el that I wrote.""" start="00:00:11.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""But before we start, I'd like to thank""" start="00:00:14.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""all the people who organized that conference,""" start="00:00:17.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""so thank you all for the great work.""" start="00:00:20.560" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Documentation""" start="00:00:24.000" video="mainVideo-one" id="subtitle"]]

[[!template text="""Now let's jump into the documentation of one.el,""" start="00:00:24.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""which is built with one.el. In the install page,""" start="00:00:27.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""we can see that we have a sidebar""" start="00:00:31.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""with all of the pages in the documentation,""" start="00:00:33.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""some buttons to switch between pages,""" start="00:00:35.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we also have a table of contents""" start="00:00:39.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""for some of the pages if we need it.""" start="00:00:41.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now let's jump into one.el repository""" start="00:00:45.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""and see why I like how it is implemented,""" start="00:00:49.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""because the website that we've seen,""" start="00:00:52.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""the documentation, is just one file.""" start="00:00:53.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is that file, with the headline of level 1""" start="00:00:55.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""being the web pages.""" start="00:01:00.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""There needs to be a web page to have the property,""" start="00:01:03.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""the Org property `:ONE:`, set to a render function.""" start="00:01:06.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""We are going to see how they work after.""" start="00:01:09.240" video="mainVideo-one" id="subtitle"]]
[[!template text="""And the `:CUSTOM_ID:`, the value of the `:CUSTOM_ID:`,""" start="00:01:11.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""is the path of the page. So really,""" start="00:01:14.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""the website that we have on the left""" start="00:01:17.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""is this file. So to me, this is something simple like that""" start="00:01:20.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""that I wanted.""" start="00:01:24.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""And another thing is that when we want to""" start="00:01:25.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""change something with one.el,""" start="00:01:29.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""we don't change configuration""" start="00:01:33.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""or write JavaScript or anything else.""" start="00:01:36.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""We just write Emacs Lisp code or a bit of CSS.""" start="00:01:38.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is what we have with a minibuffer website""" start="00:01:43.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""that is built with one.el,""" start="00:01:45.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the only thing that I had to do""" start="00:01:47.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""is to write Emacs Lisp code.""" start="00:01:50.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""So those are two things: the content in one file,""" start="00:01:51.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""and if we want to change the layout, CSS and Emacs Lisp.""" start="00:01:55.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""This is one.el.""" start="00:01:58.680" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Starting a new project""" start="00:02:02.200" video="mainVideo-one" id="subtitle"]]

[[!template text="""Now let's go to our node,""" start="00:02:02.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we are going to start a new project.""" start="00:02:03.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""How do we do that?""" start="00:02:07.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""In a new empty directory,""" start="00:02:09.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""so new project directory,""" start="00:02:11.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""we call the function `one-default-new-project`.""" start="00:02:15.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""We have that project, which is one file with the""" start="00:02:19.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""five default type of pages that we have,""" start="00:02:22.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""and one CSS file.""" start="00:02:25.760" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Building""" start="00:02:27.400" video="mainVideo-one" id="subtitle"]]

[[!template text="""How to build that website?""" start="00:02:27.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""Okay, so we call the function `one-build`.""" start="00:02:29.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""This builds the website.""" start="00:02:32.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""We jump into a terminal, and now if we run tree,""" start="00:02:33.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""we can see that the website""" start="00:02:36.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""has been built in the public directory""" start="00:02:39.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""with the information in the Org properties""" start="00:02:42.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the content of one.org files. Okay, cool.""" start="00:02:45.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now we are going to render that in the browser""" start="00:02:50.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""to serve that, and to do that""" start="00:02:53.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""we can use browser-sync utility,""" start="00:02:58.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""which is cool with that,""" start="00:03:01.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""in that each time we are going to...""" start="00:03:02.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we go into public...""" start="00:03:06.420" video="mainVideo-one" id="subtitle"]]
[[!template text="""Each time we are going to change and rebuild the website,""" start="00:03:07.861" video="mainVideo-one" id="subtitle"]]
[[!template text="""this will be reloaded in the browser.""" start="00:03:11.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""So one, this is that website, is now this one.""" start="00:03:14.320" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Side by side""" start="00:03:19.760" video="mainVideo-one" id="subtitle"]]

[[!template text="""So let's put them side by side.""" start="00:03:19.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""We go there, and we may do something like that.""" start="00:03:22.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""So one.el, the home page, so our custom ID""" start="00:03:26.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""with the value just a /,""" start="00:03:30.240" video="mainVideo-one" id="subtitle"]]
[[!template text="""is rendered with that function `one-default-home`,""" start="00:03:32.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""which is a render function,""" start="00:03:36.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the first argument of that function is the headline,""" start="00:03:37.240" video="mainVideo-one" id="subtitle"]]
[[!template text="""this current headline. So, parsed with the Org parser,""" start="00:03:41.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""and then we do the thing that we want to do,""" start="00:03:45.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the render function returns an HTML string""" start="00:03:48.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""that is used to build the pages at the custom ID.""" start="00:03:52.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now we can go to another web page, the second web page,""" start="00:03:57.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see that there is a different value""" start="00:04:03.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""for the `:ONE:` property, so another render function,""" start="00:04:05.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the custom ID at the path of that page.""" start="00:04:10.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we can see that in the browser.""" start="00:04:14.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is `/blog/default-home-list-pages`.""" start="00:04:16.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is that. Now there are three other pages,""" start="00:04:19.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""but we can list that like that.""" start="00:04:23.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""We do a grep in that files,""" start="00:04:25.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see the different default render function.""" start="00:04:28.360" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Writing a render function""" start="00:04:32.160" video="mainVideo-one" id="subtitle"]]

[[!template text="""In the second part of that talk,""" start="00:04:32.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""we are going to write a render function.""" start="00:04:34.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we are going to see that after.""" start="00:04:38.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now maybe we can go to the default page,""" start="00:04:41.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""and let's modify that default page.""" start="00:04:47.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""We see that this uses `one-default` render function,""" start="00:04:50.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now let's write &quot;foo bar baz&quot;.""" start="00:04:54.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""We want to modify the content. We save.""" start="00:04:57.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""We call again one-build distribute,""" start="00:05:00.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see here we have it: foo bar baz in the default page.""" start="00:05:10.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now we can use... When we use one-build,""" start="00:05:16.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""this also copies the files in the asset directory""" start="00:05:19.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""into the public directory.""" start="00:05:23.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""This is not always what we want to do.""" start="00:05:25.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""Sometimes we just change the content,""" start="00:05:28.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""and for that we can use `one-render-page-at-point`.""" start="00:05:29.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""If we use that one, this just renders the current page.""" start="00:05:34.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we see that we have again &quot;foo bar baz&quot; in the page.""" start="00:05:39.480" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""New page""" start="00:05:44.680" video="mainVideo-one" id="subtitle"]]

[[!template text="""Now let's add a new page. To add a new page,""" start="00:05:44.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""we just have to copy one of them, maybe the default page.""" start="00:05:47.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""We are going to call it maybe emacsconf-2023.""" start="00:05:52.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""We still use one default render function to render it,""" start="00:05:58.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""but we want to change the path.""" start="00:06:01.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""So the custom ID, we are going to give it /blog""" start="00:06:04.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""and emacsconf-2023 with a slash at the end,""" start="00:06:08.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the content... We no longer want this one,""" start="00:06:12.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""but maybe &quot;We're having a lot of fun&quot;.""" start="00:06:18.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we save that, we rebuild with `one-build` this,""" start="00:06:22.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now we can look at the top""" start="00:06:28.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and pass it the path `/blog/emacsconf-2023/.""" start="00:06:33.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we have that new page.""" start="00:06:39.280" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Linking between pages""" start="00:06:41.720" video="mainVideo-one" id="subtitle"]]

[[!template text="""Now, how to link between pages?""" start="00:06:41.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we are going to write a link""" start="00:06:44.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""that links to the last page,""" start="00:06:46.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""so a page with the table of contents.""" start="00:06:48.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""To do that, we just have to use the value of the custom ID,""" start="00:06:50.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""and to link to a custom ID inside Org mode,""" start="00:06:54.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""we use the hashtag. We pass it here,""" start="00:06:58.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""then we pass it in the description,""" start="00:07:03.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""so TOC and sidebar,""" start="00:07:07.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now if we press RET inside Emacs,""" start="00:07:09.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""we jump to that page. So this is cool.""" start="00:07:12.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now we build again,""" start="00:07:15.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see that we are going to have""" start="00:07:17.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""the link to the page in the browser.""" start="00:07:19.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this link to the default page with a table of contents,""" start="00:07:22.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""fine, but maybe what we want to do""" start="00:07:27.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""is to link to the &quot;Headline foo&quot; in that page.""" start="00:07:29.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""How do we do that?""" start="00:07:33.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""We do that by adding a custom id.""" start="00:07:34.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""We keep the first part,""" start="00:07:36.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""which is the page where we are,""" start="00:07:41.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we added hash with foo,""" start="00:07:43.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""so that Headline foo will have the ID &quot;foo&quot;""" start="00:07:46.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""in its H2 tag, HTML tag,""" start="00:07:50.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now we can link it here with still custom ID, so &quot;foo&quot;,""" start="00:07:57.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now it's headline... headline with what?""" start="00:08:05.081" video="mainVideo-one" id="subtitle"]]
[[!template text="""Headline foo in TOC page. So we have that.""" start="00:08:10.540" video="mainVideo-one" id="subtitle"]]
[[!template text="""If we press RET, we jump to that headline in Emacs.""" start="00:08:14.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is super cool.""" start="00:08:19.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""And now, if we call `one-build`,""" start="00:08:20.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""we see in the browser""" start="00:08:23.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we have a new link,""" start="00:08:25.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""and this link linked to that specific headline.""" start="00:08:26.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is cool. So we have the link between pages""" start="00:08:30.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""that works inside Emacs""" start="00:08:34.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""and that works well also in the browser.""" start="00:08:36.320" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""CSS""" start="00:08:40.000" video="mainVideo-one" id="subtitle"]]

[[!template text="""Now let's say that we want to change the CSS.""" start="00:08:40.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we've added a page with specific content,""" start="00:08:44.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we've done some links.""" start="00:08:50.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now we want to modify the CSS file""" start="00:08:51.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""which is in the asset directory, the one.css.""" start="00:08:55.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""Each time we change it,""" start="00:09:00.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""we want to have live reload""" start="00:09:02.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""that copy that file into the public directory,""" start="00:09:05.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""so the same. We go back here,""" start="00:09:10.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""and there is a utility called `entr`, e-n-t-r.""" start="00:09:14.660" video="mainVideo-one" id="subtitle"]]
[[!template text="""Yes, this one, and using that, so a new terminal,""" start="00:09:18.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""we are at the beginning.""" start="00:09:26.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""This will watch the changing in what.css,""" start="00:09:28.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""and `entr` will copy it into the public directory""" start="00:09:32.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""each time this changes. Let's go back to Org mode,""" start="00:09:35.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""because I chose some color that is cool,""" start="00:09:38.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now we go back to the CSS files.""" start="00:09:43.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""We put them side by side, and maybe we go to the new page""" start="00:09:47.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we were changing,""" start="00:09:53.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we are going to change the body,""" start="00:09:55.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""the background color, and maybe we can change""" start="00:10:01.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""with the color that we've just taken.""" start="00:10:03.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we save, and we see the changing happening.""" start="00:10:06.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""We can do it again with the color""" start="00:10:10.220" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we have at the beginning,""" start="00:10:14.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""and this is the user experience""" start="00:10:16.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we have with one.el and the default function.""" start="00:10:18.880" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""How to write a render function""" start="00:10:23.160" video="mainVideo-one" id="subtitle"]]

[[!template text="""Now that we've seen that,""" start="00:10:23.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""we've done all of that part,""" start="00:10:26.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now we are going to see""" start="00:10:30.461" video="mainVideo-one" id="subtitle"]]
[[!template text="""how to write a render function.""" start="00:10:31.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""So let's go. The render function,""" start="00:10:34.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""so one.org, we remember these are the functions""" start="00:10:36.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""that are in the `:ONE:` Org property.""" start="00:10:41.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we are going to remove that part.""" start="00:10:43.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""We no longer want that one. We don't want this.""" start="00:10:45.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""We just keep that. `one-default`,""" start="00:10:49.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""we want this to be the home of our website.""" start="00:10:52.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""We have that. We rebuild,""" start="00:10:55.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now we just have one page, and we have that page.""" start="00:10:57.660" video="mainVideo-one" id="subtitle"]]
[[!template text="""We are going to add another page that we call &quot;foo&quot;,""" start="00:11:05.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""and here we pass it the render function foo""" start="00:11:10.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""that doesn't exist yet, and we are going to write it.""" start="00:11:15.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""So maybe with some content, and we copy, copy.""" start="00:11:20.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""We have that. We call it &quot;bar&quot; to have something to show.""" start="00:11:27.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""So here we are. If we build that, so we build it,""" start="00:11:33.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see in the echo area at the bottom""" start="00:11:39.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we have an error &quot;void&quot;,""" start="00:11:42.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""which is because the function foo doesn't exist.""" start="00:11:43.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""So now we are going to write that function,""" start="00:11:46.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we write it in the onerc.el""" start="00:11:48.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""where we put any Elisp code""" start="00:11:53.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we want to be run""" start="00:11:57.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""each time we build the website or render the pages.""" start="00:11:58.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we want a render function called foo.""" start="00:12:03.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""So that takes three arguments: page-tree, pages, and global.""" start="00:12:06.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""We are going to look at the page-tree in our case,""" start="00:12:10.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the render function return an HTML string.""" start="00:12:16.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""This is the thing that we want from them.""" start="00:12:19.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""So maybe foo, bar, and baz.""" start="00:12:22.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now this is something well-defined,""" start="00:12:25.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""and with one.org here, the file, we rebuild this,""" start="00:12:28.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we can see now in the browser,""" start="00:12:34.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""if we go to the page foo, that we have &quot;foo bar baz&quot;.""" start="00:12:39.620" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is exactly what we have rendered""" start="00:12:42.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""by the render function that is set,""" start="00:12:45.460" video="mainVideo-one" id="subtitle"]]
[[!template text="""we see at the bottom in the one.org file,""" start="00:12:47.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""in the `:ONE:` property. Now this is HTML, so we can pass it,""" start="00:12:51.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""for instance, h1, the tag h1.""" start="00:12:56.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""We save that file. We go in the one.org file,""" start="00:13:00.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""we build again, and now we see that we have an h1.""" start="00:13:06.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""Okay, this is interesting, but if we would have to""" start="00:13:10.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""build this function with a string like that,""" start="00:13:14.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""this is boring and not the best way.""" start="00:13:18.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we can use the library Jack,""" start="00:13:22.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""which offers function `jack-html`""" start="00:13:24.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""that takes some data structure,""" start="00:13:27.589" video="mainVideo-one" id="subtitle"]]
[[!template text="""for instance, an h1, a nested list""" start="00:13:31.581" video="mainVideo-one" id="subtitle"]]
[[!template text="""that represents the HTML that we want to render,""" start="00:13:34.180" video="mainVideo-one" id="subtitle"]]
[[!template text="""and transform it into an HTML string.""" start="00:13:38.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we have that, we saved,""" start="00:13:41.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""we rebuild in the one.org file with `one-build`,""" start="00:13:43.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see now that this has been built using `jack-html`.""" start="00:13:48.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now what do we want to do?""" start="00:13:55.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""Okay, see, the thing that we want to do""" start="00:13:59.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""is to understand page-tree. So what is page-tree?""" start="00:14:02.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""page-tree is when we go to one.org,""" start="00:14:05.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""this is really for foo,""" start="00:14:07.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""this is the parsed data of that headline, that page.""" start="00:14:09.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""So this is done with, no, not this one, we use,""" start="00:14:17.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""so in the mini-buffer, we use `one-parse-buffer`,""" start="00:14:23.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see this is the data""" start="00:14:27.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we have with that function, first headline,""" start="00:14:30.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the second headline,""" start="00:14:33.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""this is the parse tree that we have there.""" start="00:14:34.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""This is that data that is passed to""" start="00:14:38.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""the `foo` render function. One thing that is cool,""" start="00:14:40.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""so I see here, is that as we are dealing with data,""" start="00:14:45.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""we have all the data of the website,""" start="00:14:51.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""we can show them in the web page. Now, why not?""" start="00:14:53.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""It's great to write the website""" start="00:14:57.361" video="mainVideo-one" id="subtitle"]]
[[!template text="""and also to debug if we need to debug at some point.""" start="00:15:00.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""So let's render page-tree directly in the page, one.org,""" start="00:15:02.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we rebuild, we reload, and we see this is what we have,""" start="00:15:10.280" video="mainVideo-one" id="subtitle"]]
[[!template text="""this is the data that we have, okay?""" start="00:15:15.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""And we have, for instance, the `:raw-value` with this &quot;foo&quot;,""" start="00:15:17.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""which is the headline,""" start="00:15:20.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""the content of the headline in a raw format,""" start="00:15:22.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we also have custom,""" start="00:15:27.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""so here we have the `:CUSTOM_ID: foo` and `:ONE: foo`,""" start="00:15:29.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""which are the properties,""" start="00:15:33.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""and when we are inside those render functions,""" start="00:15:35.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""we have access to this.""" start="00:15:40.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""So let's, what can we do now, is to,""" start="00:15:43.241" video="mainVideo-one" id="subtitle"]]
[[!template text="""let's get the row value.""" start="00:15:46.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""So we no longer need that.""" start="00:15:48.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""Maybe we can do something like that.""" start="00:15:51.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""We create now HTML. In HTML, we want the body,""" start="00:15:54.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""we want an h1 tag, and we are going to pass it""" start="00:16:04.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""a title, and in the title,""" start="00:16:08.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""this is something that we let-bind here,""" start="00:16:10.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""so the value of the title,""" start="00:16:13.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""we get it with `org-element-property`,""" start="00:16:15.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the `:raw-value`, so this is the property that we want,""" start="00:16:24.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""so `raw-value`, and from which data we want that,""" start="00:16:29.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""to page-tree. So now, let's have one.org at the bottom,""" start="00:16:34.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""we build again, and now we reload,""" start="00:16:40.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we see that we get a foo. This is that title,""" start="00:16:46.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""the value of that variable in that data structure.""" start="00:16:50.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now, let's get those two properties.""" start="00:16:56.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""How do we get those two properties?""" start="00:17:00.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""The same way, `:ONE:` that we call one, so raw-value,""" start="00:17:03.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""we change that for `:ONE`, the other raw-value""" start="00:17:07.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""for `:CUSTOM_ID`, we change the title for `custom-id`,""" start="00:17:11.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""and what we want now is for instance,""" start="00:17:19.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""yes, h1 again, and org properties.""" start="00:17:23.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""We add the org properties, and let's do a list,""" start="00:17:30.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""another list, with li element, one,""" start="00:17:34.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""we want that value, and that value will be""" start="00:17:39.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""the value of the variable one.""" start="00:17:43.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""We can do that with also custom-id,""" start="00:17:45.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now, in the one that we have to save,""" start="00:17:52.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""and in one of our files, not like that,""" start="00:17:56.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""we rebuild that, and we see""" start="00:17:59.440" video="mainVideo-one" id="subtitle"]]
[[!template text="""that we can get those properties.""" start="00:18:03.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""This is super cool.""" start="00:18:05.800" video="mainVideo-one" id="subtitle"]]
[[!template text="""As we are dealing with data,""" start="00:18:07.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we have the information of the whole website,""" start="00:18:09.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""we can do whatever we want,""" start="00:18:11.720" video="mainVideo-one" id="subtitle"]]
[[!template text="""because we have access to that data.""" start="00:18:14.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""Let's, for instance, add a date, the date of 2023,""" start="00:18:16.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""so I think this is 02, when there is the conference, see,""" start="00:18:23.840" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we can get access to that `one` again,""" start="00:18:28.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""here, so `date`, and we go,""" start="00:18:32.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""we change the `:CUSTOM_ID` with the `:DATE`,""" start="00:18:37.955" video="mainVideo-one" id="subtitle"]]
[[!template text="""and in the list here,""" start="00:18:42.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""so we want in the list, this to be the date,""" start="00:18:46.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we build again that,""" start="00:18:53.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we have access to the date.""" start="00:18:56.560" video="mainVideo-one" id="subtitle"]]
[[!template text="""Really, we can do whatever we want.""" start="00:18:58.800" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Rendering content""" start="00:19:03.200" video="mainVideo-one" id="subtitle"]]

[[!template text="""Now, we want the content. So far,""" start="00:19:03.200" video="mainVideo-one" id="subtitle"]]
[[!template text="""we get the property, but what about the content,""" start="00:19:06.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""so h1, and now we put &quot;Org content&quot;,""" start="00:19:11.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and this is going to be something in the variable content,""" start="00:19:17.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we have to add that variable,""" start="00:19:21.360" video="mainVideo-one" id="subtitle"]]
[[!template text="""so in the let binding, we write our content,""" start="00:19:25.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""we are going to have that content from the page-tree.""" start="00:19:28.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""To do that, we use `org-export`,""" start="00:19:30.640" video="mainVideo-one" id="subtitle"]]
[[!template text="""so we need to export something into HTML,""" start="00:19:33.680" video="mainVideo-one" id="subtitle"]]
[[!template text="""we export the data with the backend.""" start="00:19:36.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""So the data that we want is page-tree,""" start="00:19:37.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""but we don't want the first headline,""" start="00:19:40.240" video="mainVideo-one" id="subtitle"]]
[[!template text="""so we use `org-element-contents`,""" start="00:19:42.240" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we pass it `page-tree`, so this is that.""" start="00:19:46.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""But for the exported, we need to pass it,""" start="00:19:50.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""and also, how do we call that, we call that an Org backend.""" start="00:19:53.120" video="mainVideo-one" id="subtitle"]]
[[!template text="""So `one-ox` is our backend provided by one.el,""" start="00:20:00.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and the last argument is nil.""" start="00:20:06.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""We are almost done. Now with one.org,""" start="00:20:09.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""we build the website, and we see that we have an error,""" start="00:20:14.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""it's because this is not a content,""" start="00:20:18.880" video="mainVideo-one" id="subtitle"]]
[[!template text="""so there.. No, okay,""" start="00:20:22.080" video="mainVideo-one" id="subtitle"]]
[[!template text="""there was this `org-element-contents`, I think,""" start="00:20:27.040" video="mainVideo-one" id="subtitle"]]
[[!template text="""and now we build it, and we must see it here.""" start="00:20:32.840" video="mainVideo-one" id="subtitle"]]

[[!template new="1" text="""Rendering CSS""" start="00:20:37.160" video="mainVideo-one" id="subtitle"]]

[[!template text="""So we have the content,""" start="00:20:37.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""we have the Org values,""" start="00:20:39.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""and last thing that we can do maybe is to put some CSS.""" start="00:20:43.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""Let's have a look to `one-default` function.""" start="00:20:48.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""We can see in one.el file that we have a lot of""" start="00:20:51.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""default functions that we can use to take inspiration.""" start="00:20:56.400" video="mainVideo-one" id="subtitle"]]
[[!template text="""The last thing that we need""" start="00:21:01.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""is to link to the one.css file,""" start="00:21:05.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""so we are going to do that `onerc` file.""" start="00:21:08.000" video="mainVideo-one" id="subtitle"]]
[[!template text="""This is here, so `html` we don't need,""" start="00:21:14.920" video="mainVideo-one" id="subtitle"]]
[[!template text="""we have that one, we want the head to be here,""" start="00:21:20.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we pass it a class, which is a title,""" start="00:21:26.480" video="mainVideo-one" id="subtitle"]]
[[!template text="""a div with the class content. We have that.""" start="00:21:37.320" video="mainVideo-one" id="subtitle"]]
[[!template text="""Now with one.org, we build it again,""" start="00:21:42.240" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we should see the website render with the CSS,""" start="00:21:46.160" video="mainVideo-one" id="subtitle"]]
[[!template text="""the property, and all the content,""" start="00:21:50.600" video="mainVideo-one" id="subtitle"]]
[[!template text="""and we've done that just with that Emacs Lisp file,""" start="00:21:56.760" video="mainVideo-one" id="subtitle"]]
[[!template text="""so this is all I wanted to show you today with one.el,""" start="00:22:01.520" video="mainVideo-one" id="subtitle"]]
[[!template text="""I hope you enjoyed the talk, and have a nice day,""" start="00:22:08.960" video="mainVideo-one" id="subtitle"]]
[[!template text="""and a nice conference.""" start="00:22:14.880" video="mainVideo-one" id="subtitle"]]



Captioner: sachac

Questions or comments? Please e-mail [tony@tonyaldon.com](mailto:tony@tonyaldon.com?subject=Comment%20for%20EmacsConf%202023%20one%3A%20one.el%3A%20the%20static%20site%20generator%20for%20Emacs%20Lisp%20Programmers)


<!-- End of emacsconf-publish-after-page -->