path: root/2023/captions/emacsconf-2023-one--oneel-the-static-site-generator-for-emacs-lisp-programmers--tony-aldon--main.vtt

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.