Automated commit

4 files changed, 1522 insertions, 1 deletions

diff --git a/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main--chapters.vtt b/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main--chapters.vtt
new file mode 100644
index 00000000..ce9fc468
--- /dev/null
+++ b/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main--chapters.vtt
@@ -0,0 +1,38 @@
+WEBVTT
+
+
+00:00:00.000 --> 00:00:23.999
+Introduction
+
+00:00:24.000 --> 00:02:02.199
+Documentation
+
+00:02:02.200 --> 00:02:27.399
+Starting a new project
+
+00:02:27.400 --> 00:03:19.759
+Building
+
+00:03:19.760 --> 00:04:32.159
+Side by side
+
+00:04:32.160 --> 00:05:44.679
+Writing a render function
+
+00:05:44.680 --> 00:06:41.719
+New page
+
+00:06:41.720 --> 00:08:39.999
+Linking between pages
+
+00:08:40.000 --> 00:10:23.159
+CSS
+
+00:10:23.160 --> 00:19:03.199
+How to write a render function
+
+00:19:03.200 --> 00:20:37.159
+Rendering content
+
+00:20:37.160 --> 00:22:17.840
+Rendering CSS
diff --git a/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt b/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt
new file mode 100644
index 00000000..b6e0dfd6
--- /dev/null
+++ b/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt
@@ -0,0 +1,1102 @@
+WEBVTT captioned by sachac, checked by sachac
+
+NOTE Introduction
+
+00:00:00.000 --> 00:00:04.159
+Hi, everybody. Welcome to the EmacsConf 2023.
+
+00:00:04.160 --> 00:00:06.399
+I hope you're doing well and you're having fun.
+
+00:00:06.400 --> 00:00:08.359
+I'm Tony Aldon, and in this talk,
+
+00:00:08.360 --> 00:00:11.159
+we are going to see how to build a static website
+
+00:00:11.160 --> 00:00:14.519
+with the package one.el that I wrote.
+
+00:00:14.520 --> 00:00:17.599
+But before we start, I'd like to thank
+
+00:00:17.600 --> 00:00:20.559
+all the people who organized that conference,
+
+00:00:20.560 --> 00:00:23.999
+so thank you all for the great work.
+
+NOTE Documentation
+
+00:00:24.000 --> 00:00:27.719
+Now let's jump into the documentation of one.el,
+
+00:00:27.720 --> 00:00:31.679
+which is built with one.el. In the install page,
+
+00:00:31.680 --> 00:00:33.079
+we can see that we have a sidebar
+
+00:00:33.080 --> 00:00:35.559
+with all of the pages in the documentation,
+
+00:00:35.560 --> 00:00:39.039
+some buttons to switch between pages,
+
+00:00:39.040 --> 00:00:41.959
+and we also have a table of contents
+
+00:00:41.960 --> 00:00:45.119
+for some of the pages if we need it.
+
+00:00:45.120 --> 00:00:49.439
+Now let's jump into one.el repository
+
+00:00:49.440 --> 00:00:52.559
+and see why I like how it is implemented,
+
+00:00:52.560 --> 00:00:53.839
+because the website that we've seen,
+
+00:00:53.840 --> 00:00:55.959
+the documentation, is just one file.
+
+00:00:55.960 --> 00:01:00.719
+So this is that file, with the headline of level 1
+
+00:01:00.720 --> 00:01:03.279
+being the web pages.
+
+00:01:03.280 --> 00:01:06.079
+There needs to be a web page to have the property,
+
+00:01:06.080 --> 00:01:09.239
+the Org property `:ONE:`, set to a render function.
+
+00:01:09.240 --> 00:01:11.799
+We are going to see how they work after.
+
+00:01:11.800 --> 00:01:14.639
+And the `:CUSTOM_ID:`, the value of the `:CUSTOM_ID:`,
+
+00:01:14.640 --> 00:01:17.519
+is the path of the page. So really,
+
+00:01:17.520 --> 00:01:20.079
+the website that we have on the left
+
+00:01:20.080 --> 00:01:24.639
+is this file. So to me, this is something simple like that
+
+00:01:24.640 --> 00:01:25.919
+that I wanted.
+
+00:01:25.920 --> 00:01:29.839
+And another thing is that when we want to
+
+00:01:29.840 --> 00:01:33.559
+change something with one.el,
+
+00:01:33.560 --> 00:01:36.679
+we don't change configuration
+
+00:01:36.680 --> 00:01:38.879
+or write JavaScript or anything else.
+
+00:01:38.880 --> 00:01:43.479
+We just write Emacs Lisp code or a bit of CSS.
+
+00:01:43.480 --> 00:01:45.919
+So this is what we have with a minibuffer website
+
+00:01:45.920 --> 00:01:47.959
+that is built with one.el,
+
+00:01:47.960 --> 00:01:50.279
+and the only thing that I had to do
+
+00:01:50.280 --> 00:01:51.919
+is to write Emacs Lisp code.
+
+00:01:51.920 --> 00:01:55.119
+So those are two things: the content in one file,
+
+00:01:55.120 --> 00:01:58.679
+and if we want to change the layout, CSS and Emacs Lisp.
+
+00:01:58.680 --> 00:02:02.199
+This is one.el.
+
+NOTE Starting a new project
+
+00:02:02.200 --> 00:02:03.879
+Now let's go to our node,
+
+00:02:03.880 --> 00:02:07.159
+and we are going to start a new project.
+
+00:02:07.160 --> 00:02:09.599
+How do we do that?
+
+00:02:09.600 --> 00:02:11.359
+In a new empty directory,
+
+00:02:11.360 --> 00:02:15.159
+so new project directory,
+
+00:02:15.160 --> 00:02:19.559
+we call the function `one-default-new-project`.
+
+00:02:19.560 --> 00:02:22.319
+We have that project, which is one file with the
+
+00:02:22.320 --> 00:02:25.759
+five default type of pages that we have,
+
+00:02:25.760 --> 00:02:27.399
+and one CSS file.
+
+NOTE Building
+
+00:02:27.400 --> 00:02:29.439
+How to build that website?
+
+00:02:29.440 --> 00:02:32.839
+Okay, so we call the function `one-build`.
+
+00:02:32.840 --> 00:02:33.959
+This builds the website.
+
+00:02:33.960 --> 00:02:36.799
+We jump into a terminal, and now if we run tree,
+
+00:02:36.800 --> 00:02:39.799
+we can see that the website
+
+00:02:39.800 --> 00:02:42.679
+has been built in the public directory
+
+00:02:42.680 --> 00:02:45.559
+with the information in the Org properties
+
+00:02:45.560 --> 00:02:50.159
+and the content of one.org files. Okay, cool.
+
+00:02:50.160 --> 00:02:53.919
+Now we are going to render that in the browser
+
+00:02:53.920 --> 00:02:58.079
+to serve that, and to do that
+
+00:02:58.080 --> 00:03:01.159
+we can use browser-sync utility,
+
+00:03:01.160 --> 00:03:02.559
+which is cool with that,
+
+00:03:02.560 --> 00:03:06.419
+in that each time we are going to...
+
+00:03:06.420 --> 00:03:07.860
+So we go into public...
+
+00:03:07.861 --> 00:03:11.759
+Each time we are going to change and rebuild the website,
+
+00:03:11.760 --> 00:03:14.319
+this will be reloaded in the browser.
+
+00:03:14.320 --> 00:03:19.759
+So one, this is that website, is now this one.
+
+NOTE Side by side
+
+00:03:19.760 --> 00:03:22.559
+So let's put them side by side.
+
+00:03:22.560 --> 00:03:26.319
+We go there, and we may do something like that.
+
+00:03:26.320 --> 00:03:30.239
+So one.el, the home page, so our custom ID
+
+00:03:30.240 --> 00:03:31.999
+with the value just a /,
+
+00:03:32.000 --> 00:03:36.079
+is rendered with that function `one-default-home`,
+
+00:03:36.080 --> 00:03:37.239
+which is a render function,
+
+00:03:37.240 --> 00:03:41.559
+and the first argument of that function is the headline,
+
+00:03:41.560 --> 00:03:45.599
+this current headline. So, parsed with the Org parser,
+
+00:03:45.600 --> 00:03:48.359
+and then we do the thing that we want to do,
+
+00:03:48.360 --> 00:03:52.079
+and the render function returns an HTML string
+
+00:03:52.080 --> 00:03:57.199
+that is used to build the pages at the custom ID.
+
+00:03:57.200 --> 00:04:03.279
+Now we can go to another web page, the second web page,
+
+00:04:03.280 --> 00:04:05.799
+and we see that there is a different value
+
+00:04:05.800 --> 00:04:10.119
+for the `:ONE:` property, so another render function,
+
+00:04:10.120 --> 00:04:13.999
+and the custom ID at the path of that page.
+
+00:04:14.000 --> 00:04:16.399
+So we can see that in the browser.
+
+00:04:16.400 --> 00:04:19.599
+So this is `/blog/default-home-list-pages`.
+
+00:04:19.600 --> 00:04:23.479
+So this is that. Now there are three other pages,
+
+00:04:23.480 --> 00:04:25.679
+but we can list that like that.
+
+00:04:25.680 --> 00:04:28.359
+We do a grep in that files,
+
+00:04:28.360 --> 00:04:32.159
+and we see the different default render function.
+
+NOTE Writing a render function
+
+00:04:32.160 --> 00:04:34.839
+In the second part of that talk,
+
+00:04:34.840 --> 00:04:38.399
+we are going to write a render function.
+
+00:04:38.400 --> 00:04:41.079
+So we are going to see that after.
+
+00:04:41.080 --> 00:04:47.079
+Now maybe we can go to the default page,
+
+00:04:47.080 --> 00:04:50.959
+and let's modify that default page.
+
+00:04:50.960 --> 00:04:54.639
+We see that this uses `one-default` render function,
+
+00:04:54.640 --> 00:04:56.999
+and now let's write "foo bar baz".
+
+00:04:57.000 --> 00:05:00.599
+We want to modify the content. We save.
+
+00:05:00.600 --> 00:05:10.439
+We call again one-build distribute,
+
+00:05:10.440 --> 00:05:16.199
+and we see here we have it: foo bar baz in the default page.
+
+00:05:16.200 --> 00:05:19.759
+Now we can use... When we use one-build,
+
+00:05:19.760 --> 00:05:23.799
+this also copies the files in the asset directory
+
+00:05:23.800 --> 00:05:25.919
+into the public directory.
+
+00:05:25.920 --> 00:05:28.039
+This is not always what we want to do.
+
+00:05:28.040 --> 00:05:29.879
+Sometimes we just change the content,
+
+00:05:29.880 --> 00:05:34.079
+and for that we can use `one-render-page-at-point`.
+
+00:05:34.080 --> 00:05:39.479
+If we use that one, this just renders the current page.
+
+00:05:39.480 --> 00:05:44.679
+So we see that we have again "foo bar baz" in the page.
+
+NOTE New page
+
+00:05:44.680 --> 00:05:47.919
+Now let's add a new page. To add a new page,
+
+00:05:47.920 --> 00:05:52.199
+we just have to copy one of them, maybe the default page.
+
+00:05:52.200 --> 00:05:58.319
+We are going to call it maybe emacsconf-2023.
+
+00:05:58.320 --> 00:06:01.839
+We still use one default render function to render it,
+
+00:06:01.840 --> 00:06:04.519
+but we want to change the path.
+
+00:06:04.520 --> 00:06:08.519
+So the custom ID, we are going to give it /blog
+
+00:06:08.520 --> 00:06:12.639
+and emacsconf-2023 with a slash at the end,
+
+00:06:12.640 --> 00:06:18.359
+and the content... We no longer want this one,
+
+00:06:18.360 --> 00:06:22.039
+but maybe "We're having a lot of fun".
+
+00:06:22.040 --> 00:06:28.599
+So we save that, we rebuild with `one-build` this,
+
+00:06:28.600 --> 00:06:33.599
+and now we can look at the top
+
+00:06:33.600 --> 00:06:39.279
+and pass it the path `/blog/emacsconf-2023/.
+
+00:06:39.280 --> 00:06:41.719
+So we have that new page.
+
+NOTE Linking between pages
+
+00:06:41.720 --> 00:06:44.159
+Now, how to link between pages?
+
+00:06:44.160 --> 00:06:46.079
+So we are going to write a link
+
+00:06:46.080 --> 00:06:47.999
+that links to the last page,
+
+00:06:48.000 --> 00:06:50.519
+so a page with the table of contents.
+
+00:06:50.520 --> 00:06:54.399
+To do that, we just have to use the value of the custom ID,
+
+00:06:54.400 --> 00:06:58.479
+and to link to a custom ID inside Org mode,
+
+00:06:58.480 --> 00:07:03.079
+we use the hashtag. We pass it here,
+
+00:07:03.080 --> 00:07:07.279
+then we pass it in the description,
+
+00:07:07.280 --> 00:07:09.799
+so TOC and sidebar,
+
+00:07:09.800 --> 00:07:12.799
+and now if we press RET inside Emacs,
+
+00:07:12.800 --> 00:07:15.839
+we jump to that page. So this is cool.
+
+00:07:15.840 --> 00:07:17.719
+Now we build again,
+
+00:07:17.720 --> 00:07:19.919
+and we see that we are going to have
+
+00:07:19.920 --> 00:07:22.279
+the link to the page in the browser.
+
+00:07:22.280 --> 00:07:26.999
+So this link to the default page with a table of contents,
+
+00:07:27.000 --> 00:07:29.879
+fine, but maybe what we want to do
+
+00:07:29.880 --> 00:07:32.999
+is to link to the "Headline foo" in that page.
+
+00:07:33.000 --> 00:07:34.679
+How do we do that?
+
+00:07:34.680 --> 00:07:36.919
+We do that by adding a custom id.
+
+00:07:36.920 --> 00:07:41.639
+We keep the first part,
+
+00:07:41.640 --> 00:07:43.759
+which is the page where we are,
+
+00:07:43.760 --> 00:07:46.359
+and we added hash with foo,
+
+00:07:46.360 --> 00:07:50.799
+so that Headline foo will have the ID "foo"
+
+00:07:50.800 --> 00:07:57.599
+in its H2 tag, HTML tag,
+
+00:07:57.600 --> 00:08:05.080
+and now we can link it here with still custom ID, so "foo",
+
+00:08:05.081 --> 00:08:10.539
+and now it's headline... headline with what?
+
+00:08:10.540 --> 00:08:14.799
+Headline foo in TOC page. So we have that.
+
+00:08:14.800 --> 00:08:19.159
+If we press RET, we jump to that headline in Emacs.
+
+00:08:19.160 --> 00:08:20.919
+So this is super cool.
+
+00:08:20.920 --> 00:08:23.559
+And now, if we call `one-build`,
+
+00:08:23.560 --> 00:08:25.799
+we see in the browser
+
+00:08:25.800 --> 00:08:26.799
+that we have a new link,
+
+00:08:26.800 --> 00:08:30.319
+and this link linked to that specific headline.
+
+00:08:30.320 --> 00:08:34.439
+So this is cool. So we have the link between pages
+
+00:08:34.440 --> 00:08:36.319
+that works inside Emacs
+
+00:08:36.320 --> 00:08:39.999
+and that works well also in the browser.
+
+NOTE CSS
+
+00:08:40.000 --> 00:08:44.519
+Now let's say that we want to change the CSS.
+
+00:08:44.520 --> 00:08:50.719
+So we've added a page with specific content,
+
+00:08:50.720 --> 00:08:51.719
+and we've done some links.
+
+00:08:51.720 --> 00:08:55.599
+Now we want to modify the CSS file
+
+00:08:55.600 --> 00:09:00.279
+which is in the asset directory, the one.css.
+
+00:09:00.280 --> 00:09:02.959
+Each time we change it,
+
+00:09:02.960 --> 00:09:05.199
+we want to have live reload
+
+00:09:05.200 --> 00:09:10.799
+that copy that file into the public directory,
+
+00:09:10.800 --> 00:09:14.659
+so the same. We go back here,
+
+00:09:14.660 --> 00:09:18.879
+and there is a utility called `entr`, e-n-t-r.
+
+00:09:18.880 --> 00:09:26.559
+Yes, this one, and using that, so a new terminal,
+
+00:09:26.560 --> 00:09:28.679
+we are at the beginning.
+
+00:09:28.680 --> 00:09:32.359
+This will watch the changing in what.css,
+
+00:09:32.360 --> 00:09:35.519
+and `entr` will copy it into the public directory
+
+00:09:35.520 --> 00:09:38.519
+each time this changes. Let's go back to Org mode,
+
+00:09:38.520 --> 00:09:43.319
+because I chose some color that is cool,
+
+00:09:43.320 --> 00:09:47.799
+and now we go back to the CSS files.
+
+00:09:47.800 --> 00:09:53.639
+We put them side by side, and maybe we go to the new page
+
+00:09:53.640 --> 00:09:55.639
+that we were changing,
+
+00:09:55.640 --> 00:10:00.999
+and we are going to change the body,
+
+00:10:01.000 --> 00:10:03.959
+the background color, and maybe we can change
+
+00:10:03.960 --> 00:10:06.119
+with the color that we've just taken.
+
+00:10:06.120 --> 00:10:10.219
+So we save, and we see the changing happening.
+
+00:10:10.220 --> 00:10:14.679
+We can do it again with the color
+
+00:10:14.680 --> 00:10:16.119
+that we have at the beginning,
+
+00:10:16.120 --> 00:10:18.879
+and this is the user experience
+
+00:10:18.880 --> 00:10:23.159
+that we have with one.el and the default function.
+
+NOTE How to write a render function
+
+00:10:23.160 --> 00:10:26.279
+Now that we've seen that,
+
+00:10:26.280 --> 00:10:30.460
+we've done all of that part,
+
+00:10:30.461 --> 00:10:31.919
+and now we are going to see
+
+00:10:31.920 --> 00:10:34.279
+how to write a render function.
+
+00:10:34.280 --> 00:10:36.759
+So let's go. The render function,
+
+00:10:36.760 --> 00:10:41.479
+so one.org, we remember these are the functions
+
+00:10:41.480 --> 00:10:43.399
+that are in the `:ONE:` Org property.
+
+00:10:43.400 --> 00:10:45.599
+So we are going to remove that part.
+
+00:10:45.600 --> 00:10:49.439
+We no longer want that one. We don't want this.
+
+00:10:49.440 --> 00:10:52.439
+We just keep that. `one-default`,
+
+00:10:52.440 --> 00:10:55.839
+we want this to be the home of our website.
+
+00:10:55.840 --> 00:10:57.659
+We have that. We rebuild,
+
+00:10:57.660 --> 00:11:05.079
+and now we just have one page, and we have that page.
+
+00:11:05.080 --> 00:11:10.679
+We are going to add another page that we call "foo",
+
+00:11:10.680 --> 00:11:15.519
+and here we pass it the render function foo
+
+00:11:15.520 --> 00:11:20.319
+that doesn't exist yet, and we are going to write it.
+
+00:11:20.320 --> 00:11:27.159
+So maybe with some content, and we copy, copy.
+
+00:11:27.160 --> 00:11:33.159
+We have that. We call it "bar" to have something to show.
+
+00:11:33.160 --> 00:11:39.959
+So here we are. If we build that, so we build it,
+
+00:11:39.960 --> 00:11:42.599
+and we see in the echo area at the bottom
+
+00:11:42.600 --> 00:11:43.719
+that we have an error "void",
+
+00:11:43.720 --> 00:11:46.799
+which is because the function foo doesn't exist.
+
+00:11:46.800 --> 00:11:48.799
+So now we are going to write that function,
+
+00:11:48.800 --> 00:11:53.359
+and we write it in the onerc.el
+
+00:11:53.360 --> 00:11:57.199
+where we put any Elisp code
+
+00:11:57.200 --> 00:11:58.359
+that we want to be run
+
+00:11:58.360 --> 00:12:03.479
+each time we build the website or render the pages.
+
+00:12:03.480 --> 00:12:06.519
+So we want a render function called foo.
+
+00:12:06.520 --> 00:12:09.999
+So that takes three arguments: page-tree, pages, and global.
+
+00:12:10.000 --> 00:12:16.639
+We are going to look at the page-tree in our case,
+
+00:12:16.640 --> 00:12:19.759
+and the render function return an HTML string.
+
+00:12:19.760 --> 00:12:22.319
+This is the thing that we want from them.
+
+00:12:22.320 --> 00:12:25.159
+So maybe foo, bar, and baz.
+
+00:12:25.160 --> 00:12:28.159
+Now this is something well-defined,
+
+00:12:28.160 --> 00:12:34.199
+and with one.org here, the file, we rebuild this,
+
+00:12:34.200 --> 00:12:39.619
+and we can see now in the browser,
+
+00:12:39.620 --> 00:12:42.959
+if we go to the page foo, that we have "foo bar baz".
+
+00:12:42.960 --> 00:12:45.459
+So this is exactly what we have rendered
+
+00:12:45.460 --> 00:12:47.879
+by the render function that is set,
+
+00:12:47.880 --> 00:12:51.599
+we see at the bottom in the one.org file,
+
+00:12:51.600 --> 00:12:56.119
+in the `:ONE:` property. Now this is HTML, so we can pass it,
+
+00:12:56.120 --> 00:13:00.879
+for instance, h1, the tag h1.
+
+00:13:00.880 --> 00:13:06.039
+We save that file. We go in the one.org file,
+
+00:13:06.040 --> 00:13:10.399
+we build again, and now we see that we have an h1.
+
+00:13:10.400 --> 00:13:14.839
+Okay, this is interesting, but if we would have to
+
+00:13:14.840 --> 00:13:18.119
+build this function with a string like that,
+
+00:13:18.120 --> 00:13:22.319
+this is boring and not the best way.
+
+00:13:22.320 --> 00:13:24.639
+So we can use the library Jack,
+
+00:13:24.640 --> 00:13:27.588
+which offers function `jack-html`
+
+00:13:27.589 --> 00:13:31.580
+that takes some data structure,
+
+00:13:31.581 --> 00:13:34.179
+for instance, an h1, a nested list
+
+00:13:34.180 --> 00:13:38.479
+that represents the HTML that we want to render,
+
+00:13:38.480 --> 00:13:41.039
+and transform it into an HTML string.
+
+00:13:41.040 --> 00:13:43.959
+So we have that, we saved,
+
+00:13:43.960 --> 00:13:48.279
+we rebuild in the one.org file with `one-build`,
+
+00:13:48.280 --> 00:13:55.399
+and we see now that this has been built using `jack-html`.
+
+00:13:55.400 --> 00:13:59.159
+Now what do we want to do?
+
+00:13:59.160 --> 00:14:01.999
+Okay, see, the thing that we want to do
+
+00:14:02.000 --> 00:14:04.999
+is to understand page-tree. So what is page-tree?
+
+00:14:05.000 --> 00:14:07.599
+page-tree is when we go to one.org,
+
+00:14:07.600 --> 00:14:09.479
+this is really for foo,
+
+00:14:09.480 --> 00:14:17.919
+this is the parsed data of that headline, that page.
+
+00:14:17.920 --> 00:14:23.119
+So this is done with, no, not this one, we use,
+
+00:14:23.120 --> 00:14:27.879
+so in the mini-buffer, we use `one-parse-buffer`,
+
+00:14:27.880 --> 00:14:29.999
+and we see this is the data
+
+00:14:30.000 --> 00:14:33.359
+that we have with that function, first headline,
+
+00:14:33.360 --> 00:14:34.439
+and the second headline,
+
+00:14:34.440 --> 00:14:38.199
+this is the parse tree that we have there.
+
+00:14:38.200 --> 00:14:40.719
+This is that data that is passed to
+
+00:14:40.720 --> 00:14:45.279
+the `foo` render function. One thing that is cool,
+
+00:14:45.280 --> 00:14:51.599
+so I see here, is that as we are dealing with data,
+
+00:14:51.600 --> 00:14:53.359
+we have all the data of the website,
+
+00:14:53.360 --> 00:14:57.360
+we can show them in the web page. Now, why not?
+
+00:14:57.361 --> 00:15:00.079
+It's great to write the website
+
+00:15:00.080 --> 00:15:02.839
+and also to debug if we need to debug at some point.
+
+00:15:02.840 --> 00:15:10.279
+So let's render page-tree directly in the page, one.org,
+
+00:15:10.280 --> 00:15:15.679
+and we rebuild, we reload, and we see this is what we have,
+
+00:15:15.680 --> 00:15:17.159
+this is the data that we have, okay?
+
+00:15:17.160 --> 00:15:20.599
+And we have, for instance, the `:raw-value` with this "foo",
+
+00:15:20.600 --> 00:15:22.519
+which is the headline,
+
+00:15:22.520 --> 00:15:27.039
+the content of the headline in a raw format,
+
+00:15:27.040 --> 00:15:29.719
+and we also have custom,
+
+00:15:29.720 --> 00:15:33.839
+so here we have the `:CUSTOM_ID: foo` and `:ONE: foo`,
+
+00:15:33.840 --> 00:15:34.999
+which are the properties,
+
+00:15:35.000 --> 00:15:40.359
+and when we are inside those render functions,
+
+00:15:40.360 --> 00:15:43.240
+we have access to this.
+
+00:15:43.241 --> 00:15:46.799
+So let's, what can we do now, is to,
+
+00:15:46.800 --> 00:15:48.639
+let's get the row value.
+
+00:15:48.640 --> 00:15:51.759
+So we no longer need that.
+
+00:15:51.760 --> 00:15:54.839
+Maybe we can do something like that.
+
+00:15:54.840 --> 00:16:03.999
+We create now HTML. In HTML, we want the body,
+
+00:16:04.000 --> 00:16:08.039
+we want an h1 tag, and we are going to pass it
+
+00:16:08.040 --> 00:16:10.559
+a title, and in the title,
+
+00:16:10.560 --> 00:16:13.839
+this is something that we let-bind here,
+
+00:16:13.840 --> 00:16:15.599
+so the value of the title,
+
+00:16:15.600 --> 00:16:24.719
+we get it with `org-element-property`,
+
+00:16:24.720 --> 00:16:29.759
+and the `:raw-value`, so this is the property that we want,
+
+00:16:29.760 --> 00:16:34.039
+so `raw-value`, and from which data we want that,
+
+00:16:34.040 --> 00:16:40.599
+to page-tree. So now, let's have one.org at the bottom,
+
+00:16:40.600 --> 00:16:46.039
+we build again, and now we reload,
+
+00:16:46.040 --> 00:16:50.839
+and we see that we get a foo. This is that title,
+
+00:16:50.840 --> 00:16:56.559
+the value of that variable in that data structure.
+
+00:16:56.560 --> 00:17:00.319
+Now, let's get those two properties.
+
+00:17:00.320 --> 00:17:03.039
+How do we get those two properties?
+
+00:17:03.040 --> 00:17:07.199
+The same way, `:ONE:` that we call one, so raw-value,
+
+00:17:07.200 --> 00:17:11.639
+we change that for `:ONE`, the other raw-value
+
+00:17:11.640 --> 00:17:19.359
+for `:CUSTOM_ID`, we change the title for `custom-id`,
+
+00:17:19.360 --> 00:17:23.559
+and what we want now is for instance,
+
+00:17:23.560 --> 00:17:30.159
+yes, h1 again, and org properties.
+
+00:17:30.160 --> 00:17:34.799
+We add the org properties, and let's do a list,
+
+00:17:34.800 --> 00:17:39.799
+another list, with li element, one,
+
+00:17:39.800 --> 00:17:43.159
+we want that value, and that value will be
+
+00:17:43.160 --> 00:17:45.759
+the value of the variable one.
+
+00:17:45.760 --> 00:17:52.479
+We can do that with also custom-id,
+
+00:17:52.480 --> 00:17:56.119
+and now, in the one that we have to save,
+
+00:17:56.120 --> 00:17:59.439
+and in one of our files, not like that,
+
+00:17:59.440 --> 00:18:03.199
+we rebuild that, and we see
+
+00:18:03.200 --> 00:18:05.799
+that we can get those properties.
+
+00:18:05.800 --> 00:18:06.999
+This is super cool.
+
+00:18:07.000 --> 00:18:09.159
+As we are dealing with data,
+
+00:18:09.160 --> 00:18:11.719
+and we have the information of the whole website,
+
+00:18:11.720 --> 00:18:14.039
+we can do whatever we want,
+
+00:18:14.040 --> 00:18:16.599
+because we have access to that data.
+
+00:18:16.600 --> 00:18:23.839
+Let's, for instance, add a date, the date of 2023,
+
+00:18:23.840 --> 00:18:28.319
+so I think this is 02, when there is the conference, see,
+
+00:18:28.320 --> 00:18:32.759
+and we can get access to that `one` again,
+
+00:18:32.760 --> 00:18:37.954
+here, so `date`, and we go,
+
+00:18:37.955 --> 00:18:42.359
+we change the `:CUSTOM_ID` with the `:DATE`,
+
+00:18:42.360 --> 00:18:46.639
+and in the list here,
+
+00:18:46.640 --> 00:18:53.359
+so we want in the list, this to be the date,
+
+00:18:53.360 --> 00:18:56.559
+and we build again that,
+
+00:18:56.560 --> 00:18:58.799
+and we have access to the date.
+
+00:18:58.800 --> 00:19:03.199
+Really, we can do whatever we want.
+
+NOTE Rendering content
+
+00:19:03.200 --> 00:19:06.759
+Now, we want the content. So far,
+
+00:19:06.760 --> 00:19:11.599
+we get the property, but what about the content,
+
+00:19:11.600 --> 00:19:17.039
+so h1, and now we put "Org content",
+
+00:19:17.040 --> 00:19:21.359
+and this is going to be something in the variable content,
+
+00:19:21.360 --> 00:19:25.079
+and we have to add that variable,
+
+00:19:25.080 --> 00:19:27.999
+so in the let binding, we write our content,
+
+00:19:28.000 --> 00:19:30.639
+we are going to have that content from the page-tree.
+
+00:19:30.640 --> 00:19:33.679
+To do that, we use `org-export`,
+
+00:19:33.680 --> 00:19:36.119
+so we need to export something into HTML,
+
+00:19:36.120 --> 00:19:37.599
+we export the data with the backend.
+
+00:19:37.600 --> 00:19:40.239
+So the data that we want is page-tree,
+
+00:19:40.240 --> 00:19:42.239
+but we don't want the first headline,
+
+00:19:42.240 --> 00:19:46.759
+so we use `org-element-contents`,
+
+00:19:46.760 --> 00:19:50.519
+and we pass it `page-tree`, so this is that.
+
+00:19:50.520 --> 00:19:53.119
+But for the exported, we need to pass it,
+
+00:19:53.120 --> 00:20:00.599
+and also, how do we call that, we call that an Org backend.
+
+00:20:00.600 --> 00:20:06.759
+So `one-ox` is our backend provided by one.el,
+
+00:20:06.760 --> 00:20:09.519
+and the last argument is nil.
+
+00:20:09.520 --> 00:20:14.079
+We are almost done. Now with one.org,
+
+00:20:14.080 --> 00:20:18.879
+we build the website, and we see that we have an error,
+
+00:20:18.880 --> 00:20:22.079
+it's because this is not a content,
+
+00:20:22.080 --> 00:20:27.039
+so there.. No, okay,
+
+00:20:27.040 --> 00:20:32.839
+there was this `org-element-contents`, I think,
+
+00:20:32.840 --> 00:20:37.159
+and now we build it, and we must see it here.
+
+NOTE Rendering CSS
+
+00:20:37.160 --> 00:20:39.959
+So we have the content,
+
+00:20:39.960 --> 00:20:43.319
+we have the Org values,
+
+00:20:43.320 --> 00:20:48.399
+and last thing that we can do maybe is to put some CSS.
+
+00:20:48.400 --> 00:20:51.919
+Let's have a look to `one-default` function.
+
+00:20:51.920 --> 00:20:56.399
+We can see in one.el file that we have a lot of
+
+00:20:56.400 --> 00:21:01.919
+default functions that we can use to take inspiration.
+
+00:21:01.920 --> 00:21:05.599
+The last thing that we need
+
+00:21:05.600 --> 00:21:07.999
+is to link to the one.css file,
+
+00:21:08.000 --> 00:21:14.919
+so we are going to do that `onerc` file.
+
+00:21:14.920 --> 00:21:20.319
+This is here, so `html` we don't need,
+
+00:21:20.320 --> 00:21:26.479
+we have that one, we want the head to be here,
+
+00:21:26.480 --> 00:21:37.319
+and we pass it a class, which is a title,
+
+00:21:37.320 --> 00:21:42.239
+a div with the class content. We have that.
+
+00:21:42.240 --> 00:21:46.159
+Now with one.org, we build it again,
+
+00:21:46.160 --> 00:21:50.599
+and we should see the website render with the CSS,
+
+00:21:50.600 --> 00:21:56.759
+the property, and all the content,
+
+00:21:56.760 --> 00:22:01.519
+and we've done that just with that Emacs Lisp file,
+
+00:22:01.520 --> 00:22:08.959
+so this is all I wanted to show you today with one.el,
+
+00:22:08.960 --> 00:22:14.879
+I hope you enjoyed the talk, and have a nice day,
+
+00:22:14.880 --> 00:22:17.840
+and a nice conference.
diff --git a/2023/info/one-after.md b/2023/info/one-after.md
index 9832af36..3cfbfe11 100644
--- a/2023/info/one-after.md
+++ b/2023/info/one-after.md
@@ -1,6 +1,373 @@
 <!-- Automatically generated by emacsconf-publish-after-page -->
 
 
+<a name="one-mainVideo-transcript"></a>
+# Transcript
+
+[[!template new="1" 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="""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="""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="""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="""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="""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="""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="""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="""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="""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="""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="""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%202022%20one%3A%20one.el%3A%20the%20static%20site%20generator%20for%20Emacs%20Lisp%20Programmers)
 
 
diff --git a/2023/info/one-before.md b/2023/info/one-before.md
index 154f6250..af1c44c6 100644
--- a/2023/info/one-before.md
+++ b/2023/info/one-before.md
@@ -8,12 +8,26 @@ The following image shows where the talk is in the schedule for Sat 2023-12-02.
 Format: 23-min talk; Q&A: BigBlueButton conference room <https://media.emacsconf.org/2023/current/bbb-one.html>
 Etherpad: <https://pad.emacsconf.org/2023-one>  
 Discuss on IRC: [#emacsconf-gen](https://chat.emacsconf.org/?join=emacsconf,emacsconf-gen)  
-Status: Ready to stream  
+Status: Now playing on the conference livestream  
 <div>Times in different timezones:</div><div class="times" start="2023-12-02T16:30:00Z" end="2023-12-02T16:50:00Z"><div class="conf-time">Saturday, Dec 2 2023, ~11:30 AM - 11:50 AM EST (US/Eastern)</div><div class="others"><div>which is the same as:</div>Saturday, Dec 2 2023, ~10:30 AM - 10:50 AM CST (US/Central)<br />Saturday, Dec 2 2023, ~9:30 AM - 9:50 AM MST (US/Mountain)<br />Saturday, Dec 2 2023, ~8:30 AM - 8:50 AM PST (US/Pacific)<br />Saturday, Dec 2 2023, ~4:30 PM - 4:50 PM UTC <br />Saturday, Dec 2 2023, ~5:30 PM - 5:50 PM CET (Europe/Paris)<br />Saturday, Dec 2 2023, ~6:30 PM - 6:50 PM EET (Europe/Athens)<br />Saturday, Dec 2 2023, ~10:00 PM - 10:20 PM IST (Asia/Kolkata)<br />Sunday, Dec 3 2023, ~12:30 AM - 12:50 AM +08 (Asia/Singapore)<br />Sunday, Dec 3 2023, ~1:30 AM - 1:50 AM JST (Asia/Tokyo)</div></div><div><a href="/2023/watch/gen/">Find out how to watch and participate</a></div>
 
 
 
 
+<div class="vid"><video controls preload="none" id="one-mainVideo"><source src="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.webm" />captions="""<track label="English" kind="captions" srclang="en" src="/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt" default />"""<track kind="chapters" label="Chapters" src="/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main--chapters.vtt" /><p><em>Your browser does not support the video tag. Please download the video instead.</em></p></video>[[!template id="chapters" vidid="one-mainVideo" data="""
+00:00.000 Introduction
+00:24.000 Documentation
+02:02.200 Starting a new project
+02:27.400 Building
+03:19.760 Side by side
+04:32.160 Writing a render function
+05:44.680 New page
+06:41.720 Linking between pages
+08:40.000 CSS
+10:23.160 How to write a render function
+19:03.200 Rendering content
+20:37.160 Rendering CSS
 
+"""]]<div></div>Duration: 22:18 minutes<div class="files resources"><ul><li><a href="https://pad.emacsconf.org/2023-one">Open Etherpad</a></li><li><a href="https://media.emacsconf.org/2023/current/bbb-one.html">Open public Q&A</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--final.webm">Download --final.webm (54MB)</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--intro.vtt">Download --intro.vtt</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--intro.webm">Download --intro.webm</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main--chapters.vtt">Download --main--chapters.vtt</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.opus">Download --main.opus (14MB)</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.txt">Download --main.txt</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt">Download --main.vtt</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.webm">Download --main.webm (54MB)</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--normalized.opus">Download --normalized.opus (19MB)</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--original.mp4">Download --original.mp4 (49MB)</a></li><li><a href="https://media.emacsconf.org/2023/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--reencoded.webm">Download --reencoded.webm (49MB)</a></li><li><a href="https://toobnix.org/w/x2yYYWLHQe75FTV8sWiDmy">View on Toobnix</a></li></ul></div></div>
 # Description
 <!-- End of emacsconf-publish-before-page -->
\ No newline at end of file