diff options
Diffstat (limited to '2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt')
| -rw-r--r-- | 2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt | 1102 |
1 files changed, 1102 insertions, 0 deletions
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. |