Too many updates to track.
Moved the 'docs' section down and eliminated the folder. It wasn't necessary. Built out the Section.html file, and started work on the SASS. Having a hell of a time getting the side panels to animate the way they do for adidoks, but I'm sure I'll figure it out eventually.
This commit is contained in:
parent
5517b77fad
commit
58cf0c9cbd
|
|
@ -1,19 +1,15 @@
|
||||||
+++
|
+++
|
||||||
title = "Brains!!!"
|
title = "Elf's Notes"
|
||||||
|
description = "This is Elf Sternberg's brain dump of notes about various software things he knows. If you find it useful, good! Just be aware that this site is probably a bit random, as it consists of explanations, snippets, and recipes for how I do things. It's meant to be a guide from a past version of myself to explain things to a future version that may have forgotten."
|
||||||
|
date = 2025-05-01T18:00:00+00:00
|
||||||
|
updated = 2021-05-01T18:00:00+00:00
|
||||||
|
template = "index.html"
|
||||||
|
|
||||||
# The homepage contents
|
[taxonomies]
|
||||||
[extra]
|
documentation=["Reference"]
|
||||||
lead = "This is Elf Sternberg's brain dump of notes about various software things he knows. If you find it useful, good! Just be aware that this site is probably a bit random, as it consists of explanations, snippets, and recipes for how I do things. It's meant to be a guide from a past version of myself to explain things to a future version that may have forgotten."
|
|
||||||
|
|
||||||
# Menu items
|
|
||||||
[[extra.menu.main]]
|
|
||||||
name = "Blog"
|
|
||||||
section = "blog"
|
|
||||||
url = "https://elfsternberg.com"
|
|
||||||
weight = 20
|
|
||||||
|
|
||||||
[[extra.list]]
|
|
||||||
title = "Zola"
|
|
||||||
url="/docs/zola"
|
|
||||||
content = 'This site is hosted with <a href="https://getzola.org">Zola</a>, a static site generator written in Rust.'
|
|
||||||
+++
|
+++
|
||||||
|
This is Elf Sternberg's brain dump of notes about various software things he
|
||||||
|
knows. If you find it useful, good! Just be aware that this site is probably a
|
||||||
|
bit random, as it consists of explanations, snippets, and recipes for how I do
|
||||||
|
things. It's meant to be a guide from a past version of myself to explain things
|
||||||
|
to a future version that may have forgotten.
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ title = "Git Notes"
|
||||||
description = "Basic documentation of Git"
|
description = "Basic documentation of Git"
|
||||||
date = 2022-04-27T18:00:00+00:00
|
date = 2022-04-27T18:00:00+00:00
|
||||||
updated = 2022-04-27T18:00:00+00:00
|
updated = 2022-04-27T18:00:00+00:00
|
||||||
template = "docs/section.html"
|
template = "section.html"
|
||||||
sort_by = "weight"
|
sort_by = "weight"
|
||||||
weight = 6
|
weight = 6
|
||||||
draft = false
|
draft = false
|
||||||
|
|
@ -3,7 +3,7 @@ title = "Zola Cookbook"
|
||||||
description = "Snippets I've developed that I want to keep"
|
description = "Snippets I've developed that I want to keep"
|
||||||
date = 2022-04-27T18:00:00+00:00
|
date = 2022-04-27T18:00:00+00:00
|
||||||
updated = 2022-04-27T18:00:00+00:00
|
updated = 2022-04-27T18:00:00+00:00
|
||||||
template = "docs/section.html"
|
template = "section.html"
|
||||||
sort_by = "weight"
|
sort_by = "weight"
|
||||||
weight = 5
|
weight = 5
|
||||||
draft = false
|
draft = false
|
||||||
|
|
@ -62,6 +62,6 @@ Zola shortcode to import the macro template into Markdown and start the render:
|
||||||
Invocation in Markdown file, providing the data source:
|
Invocation in Markdown file, providing the data source:
|
||||||
|
|
||||||
```
|
```
|
||||||
{{ definition_list(source="@/docs/zola/definitions.json") }}
|
{{ definition_list(source="@/docs/zola/definitions.json") }}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -3,7 +3,7 @@ title = "Zola"
|
||||||
description = "Zola is a static site generator"
|
description = "Zola is a static site generator"
|
||||||
date = 2025-05-01T18:00:00+00:00
|
date = 2025-05-01T18:00:00+00:00
|
||||||
updated = 2021-05-01T18:00:00+00:00
|
updated = 2021-05-01T18:00:00+00:00
|
||||||
template = "docs/section.html"
|
template = "section.html"
|
||||||
sort_by = "weight"
|
sort_by = "weight"
|
||||||
weight = 4
|
weight = 4
|
||||||
draft = false
|
draft = false
|
||||||
|
|
@ -13,19 +13,55 @@ categories=["Web Development", "Static Site Generation", "Zola"]
|
||||||
+++
|
+++
|
||||||
|
|
||||||
[Zola](https://getzola.org) is a static site generator written in
|
[Zola](https://getzola.org) is a static site generator written in
|
||||||
[Rust](../rust). It builds an entire web page out of a structured markdown
|
[Rust](../rust). It is a single binary that builds an entire web site out of a
|
||||||
collection and a collection of HTML templates. The templating language is called
|
collection of markdown documents in a folder-structured hierarchy, using a
|
||||||
[Tera](https://tera.netlify.app).
|
corresponding collection of HTML templates, which in turn use a corresponding
|
||||||
|
collection of SASS collection and a collection of HTML templates. The templating
|
||||||
Zola is a single binary capable of assembling the website out of a collection of
|
language is called [Tera](https://tera.netlify.app).
|
||||||
templates, SASS files, static data (including CSS if you're not into SASS), and
|
|
||||||
markdown files. The Markdown files create the structure of the website as a
|
|
||||||
series of folders.
|
|
||||||
|
|
||||||
If you need anything else (Typescript built into Javascript, templates other
|
If you need anything else (Typescript built into Javascript, templates other
|
||||||
than Zola's internal, static file conversion, etc.), you'll need separate
|
than Zola's internal, static file conversion, etc.), you'll need separate
|
||||||
toolchains for those.
|
toolchains for those.
|
||||||
|
|
||||||
|
## Mental Model for Zola
|
||||||
|
|
||||||
|
A website built with Zola originates with the `content/` folder. Inside that
|
||||||
|
folder, every markdown document and every folder creates a corresponding page in
|
||||||
|
the constructed website. There are only *two* models you have to understand
|
||||||
|
Zola: *sections* and *pages*.
|
||||||
|
|
||||||
|
A *section* is a folder with a file named `_index.md` in it; note the
|
||||||
|
underscore, which signifies the section definition file. For these documents, a
|
||||||
|
[`Section` model](#section) is the default context object received by the
|
||||||
|
template. Each markdown document in the same folder, and each folder immediately
|
||||||
|
underneath this folder that has an `index.md` folder (note the lack of
|
||||||
|
underscore) is a *page* and receives the [`Page` model](#page) as the default
|
||||||
|
context.
|
||||||
|
|
||||||
|
Every markdown document has two parts: a frontmatter block, written in TOML, and
|
||||||
|
the content, written in Markdown. Whether a `section` or `page` context is
|
||||||
|
passed by default, if there is content the `.content` field will be the HTML
|
||||||
|
output of the markdown in the document.
|
||||||
|
|
||||||
|
Every folder, whether containing an `_index.md` or `index.md` file, can contain
|
||||||
|
co-located assets such a images, videos, and even Javascript. These will be
|
||||||
|
found in the `.assets` field of the context object (the use of co-located assets
|
||||||
|
in why a folder can be a page).
|
||||||
|
|
||||||
|
Whether a `Page` or a `Section`, the corresponding context object provides means
|
||||||
|
by which every template has access to the metadata (and even the content!) of
|
||||||
|
every other markdown document, arranged in the hierarchy described in the
|
||||||
|
`content` folder.
|
||||||
|
|
||||||
|
### Recommendation
|
||||||
|
|
||||||
|
1. Design your document hierarchy first.
|
||||||
|
2. Construct your content folder to support that hierarchy.
|
||||||
|
3. Build the `Section` template for the home page.
|
||||||
|
4. Build the `Section` template for your level two sections
|
||||||
|
5. Build the corresponding `Page` templates.
|
||||||
|
6. Worry about Sass afterward
|
||||||
|
|
||||||
## Running Zola
|
## Running Zola
|
||||||
|
|
||||||
Zola has only a few commands:
|
Zola has only a few commands:
|
||||||
|
|
@ -66,7 +102,7 @@ underscore prefix) is considered a *page*. This allows content writers to
|
||||||
supply additional assets, such as images or data files, along with the contents
|
supply additional assets, such as images or data files, along with the contents
|
||||||
of the page.
|
of the page.
|
||||||
|
|
||||||
## The Templating Languagae
|
## The Templating Language
|
||||||
|
|
||||||
The Tera templating language looks a lot like Django's, or for that matter any
|
The Tera templating language looks a lot like Django's, or for that matter any
|
||||||
number of templating languages. Every page generated with Tera receives a
|
number of templating languages. Every page generated with Tera receives a
|
||||||
|
|
@ -139,7 +175,7 @@ Conditional statements are managed with `if/is ... else ... endif`
|
||||||
|
|
||||||
The list of `is` tests that are shipped with Zola are:
|
The list of `is` tests that are shipped with Zola are:
|
||||||
|
|
||||||
{{ definition_list(source="docs/zola/predicates.json") }}
|
{{ definition_list(source="zola/predicates.json") }}
|
||||||
|
|
||||||
#### `for`
|
#### `for`
|
||||||
|
|
||||||
|
|
@ -222,7 +258,7 @@ variable. There are a few basic operations and filters available, however:
|
||||||
|
|
||||||
**Math And Logic Expressions**:
|
**Math And Logic Expressions**:
|
||||||
|
|
||||||
{{ definition_list(source="docs/zola/expressions.json") }}
|
{{ definition_list(source="zola/expressions.json") }}
|
||||||
|
|
||||||
**Concatenation**:
|
**Concatenation**:
|
||||||
|
|
||||||
|
|
@ -244,31 +280,31 @@ An entire chunk of HTML can be filtered by:
|
||||||
|
|
||||||
The filters provided are:
|
The filters provided are:
|
||||||
|
|
||||||
{{ definition_list(source="docs/zola/filters.json") }}
|
{{ definition_list(source="zola/filters.json") }}
|
||||||
|
|
||||||
### Functions
|
### Functions
|
||||||
|
|
||||||
Only a few functions provide ad-hoc expressions in-line with template
|
Only a few functions provide ad-hoc expressions in-line with template
|
||||||
interpretation.
|
interpretation.
|
||||||
|
|
||||||
- `range`: Generates an array of numbers.
|
- `range(end=n, start=0, [step_by=n])`: Generates an array of numbers.
|
||||||
- `now`: Generates the current datetime
|
- `now(datetime, utc)`: Generates the current datetime.
|
||||||
- `get_random`: Generates a random number
|
- `get_random(end=n, [start=0])`: Generates a random number
|
||||||
- `get_env`: Returns an environment variable
|
- `get_env(name="s", default="d")`: Returns an environment variable
|
||||||
- `get_page`: Returns a the content of a page in the Zola content folder
|
- `get_page(path="p")`: Returns a the content of a page in the Zola content folder
|
||||||
- `get_section`: Returns the content of a Zola section (an `_index.md`) file as an
|
- `get_section(path="p")`: Returns the content of a Zola section (an `_index.md`) file as an
|
||||||
object.
|
object.
|
||||||
- `get_taxonomy_url`: Returns the URL of a Zola taxonomy index
|
- `get_taxonomy_url(kind="taxonomy", name=page.taxonomies.category)`: Returns the URL of a Zola taxonomy index
|
||||||
- `get_url`: Gets the generated URL for a document in the Zola content folder
|
- `get_url(path="p")`: Gets the generated URL for a document in the Zola content folder
|
||||||
- `get_image_metadata`: Gets the metadata for an image in Zola's static folder
|
- `get_image_metadata(path="p")`: Gets the metadata for an image in Zola's static folder
|
||||||
- `load_data`: (Zola) Loads static data from a file. Understands TOML, JSON, CSV and
|
- `load_data(path="p")`: (Zola) Loads static data from a file. Understands TOML, JSON, CSV and
|
||||||
BibTeX. Takes either `path=` or `url=` (!) as an argument.
|
BibTeX. Takes either `path=` or `url=` (!) as an argument.
|
||||||
- `resize_image`: (Zola) Takes an image, resizes the image, and provides a link to the
|
- `resize_image(path, width, height, op, format, quality)`: (Zola) Takes an
|
||||||
resized image.
|
image, resizes the image, and provides a link to the resized image.
|
||||||
|
|
||||||
## Zola Content
|
## Zola Content
|
||||||
|
|
||||||
### Sections
|
### Sections {#section}
|
||||||
|
|
||||||
In Zola, every folder under `./content/` (including that folder itself) is
|
In Zola, every folder under `./content/` (including that folder itself) is
|
||||||
potentially a _section_. Sections are basically Zola's version of the WWW
|
potentially a _section_. Sections are basically Zola's version of the WWW
|
||||||
|
|
@ -315,7 +351,7 @@ available to the template:
|
||||||
- `assets`: An array of assets available in this section.
|
- `assets`: An array of assets available in this section.
|
||||||
- `ancestors`: An array of parent paths, with the root being the last one.
|
- `ancestors`: An array of parent paths, with the root being the last one.
|
||||||
|
|
||||||
### Pages
|
### Pages {#page}
|
||||||
|
|
||||||
A page is _either_ a markdown file within the same folder as its section, or it
|
A page is _either_ a markdown file within the same folder as its section, or it
|
||||||
is in a subfolder with a file named `index.md` (note the lack of prefix
|
is in a subfolder with a file named `index.md` (note the lack of prefix
|
||||||
|
|
@ -339,7 +375,7 @@ The following items can appear in the TOML header of a page:
|
||||||
- `[taxonomies]`: The taxonomies for this page
|
- `[taxonomies]`: The taxonomies for this page
|
||||||
- `[extra]`: Your own extra data
|
- `[extra]`: Your own extra data
|
||||||
|
|
||||||
Pages have the following information in their context:
|
Pages derive the following information in their context:
|
||||||
|
|
||||||
- `content`: The markdown content from the page's file
|
- `content`: The markdown content from the page's file
|
||||||
- `title`: The title, if present in the TOML block
|
- `title`: The title, if present in the TOML block
|
||||||
|
|
@ -0,0 +1,226 @@
|
||||||
|
@import "design/_normalize";
|
||||||
|
@import "design/_scales";
|
||||||
|
@import "design/_typography";
|
||||||
|
@import "design/fonts/_nunito";
|
||||||
|
@import "design/fonts/_sauna_mono";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--default-font-size: var(--step-0);
|
||||||
|
--background-color: #ffffff;
|
||||||
|
--border-color: #e9ecef;
|
||||||
|
--text-color: #1f000d;
|
||||||
|
--header-size: calc(1.5 * var(--step-0) + 2 * var(--space-3xs));
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-size: var(--default-font-size);
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding-top: var(--header-size);
|
||||||
|
font-size: var(--default-font-size);
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin fixed-top {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1044px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 var(--space-xs) 0 var(--space-xs);
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
margin-left: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: calc(0.5 * var(--space-3xs));
|
||||||
|
padding-bottom: calc(0.5 * var(--space-3xs));
|
||||||
|
background-color: var(--background-color);
|
||||||
|
opacity: 0.95;
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
@include fixed-top();
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: inherit;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #1d2d35;
|
||||||
|
text-align: cent er;
|
||||||
|
vertical-align: middle;
|
||||||
|
user-select: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: 1rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
|
||||||
|
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
font-size: var(--step-1);
|
||||||
|
margin-right: var(--space-s);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-color);
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:visited,
|
||||||
|
&:hover {
|
||||||
|
color: var(--text-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
font-size: var(--step-0);
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-left: var(--space-2xl);
|
||||||
|
margin-right: var(--space-s);
|
||||||
|
|
||||||
|
input {
|
||||||
|
appearance: none;
|
||||||
|
background-clip: padding-box;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
border: 0;
|
||||||
|
color: #1d2d35;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: var(--space-3xs) var(--space-l) var(--space-3xs) var(--space-3xs);
|
||||||
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav {
|
||||||
|
font-size: var(--step-1);
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: var(--space-xs);
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
line-height: 1.5;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin toc-sticky {
|
||||||
|
max-width: 100%;
|
||||||
|
position: sticky;
|
||||||
|
top: var(--space-xl);
|
||||||
|
height: calc(100vh - var(--space-xl));
|
||||||
|
z-index: 900;
|
||||||
|
|
||||||
|
&:hover .scrollable-sidebar {
|
||||||
|
scrollbar-color: #e9ecef #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollable-sidebar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #fff #fff;
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-bottom: var(--step--1);
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: var(--space-s);
|
||||||
|
list-style: disc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-sidebar {
|
||||||
|
@include toc-sticky();
|
||||||
|
font-size: 80%;
|
||||||
|
order: 0;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
width: 25%;
|
||||||
|
padding-right: var(--space-2xs);
|
||||||
|
border-right: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs-toc {
|
||||||
|
@include toc-sticky();
|
||||||
|
font-size: 66.666%;
|
||||||
|
order: 2;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 18.75%;
|
||||||
|
border-left: 1px solid var(--border-color);
|
||||||
|
padding-left: var(--space-2xs);
|
||||||
|
|
||||||
|
nav > ul {
|
||||||
|
& > li:not(:first-child) {
|
||||||
|
margin-top: var(--space-3xs);
|
||||||
|
border-top: 1px dashed #e9ecef;
|
||||||
|
}
|
||||||
|
& > li:not(:first-child) {
|
||||||
|
padding-top: var(--space-3xs);
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
order: 1;
|
||||||
|
padding: 0 var(--space-s) var(--space-m-l) var(--space-s);
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 56.25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,26 +1,27 @@
|
||||||
{%- import 'macros/font_preloads.html' as font_preloads -%}
|
|
||||||
{%- import 'macros/stylesheets.html' as stylesheets -%}
|
|
||||||
{%- import 'macros/header.html' as header -%}
|
|
||||||
{%- import 'macros/footer.html' as footer -%}
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ config.extra.language_code | default(value="en-US") }}">
|
<html lang="{{ config.extra.language_code | default(value="en-US") }}">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
{{ font_preloads::preloads() }}
|
{% block styles %}
|
||||||
{{ stylesheets::stylesheets() }}
|
<link rel="stylesheet" href="{{ get_url(path="index.css") | safe }}">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block seo %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
{% block body %}{% set page_class="home" %}{% endblock body %}
|
<body>
|
||||||
<body class="{{ page_class }}">
|
{% block body %}
|
||||||
{% block header %}
|
{% include "components/sitebar.html" %}
|
||||||
{{ header::header(current_section="/") }}
|
{% block content %}
|
||||||
{% endblock header %}
|
{% block header %}
|
||||||
|
{% endblock header %}
|
||||||
|
|
||||||
{% block content %}{% endblock content %}
|
{% block main %}
|
||||||
|
{% endblock main %}
|
||||||
{% block footer %}
|
{% endblock content %}
|
||||||
{{ footer::footer() }}
|
{% block footer %}
|
||||||
{% endblock footer %}
|
{% endblock footer %}
|
||||||
|
{% endblock body %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
{#
|
||||||
|
The left sidebar for large document sections navigation for topics that
|
||||||
|
have child pages. This sidebar contains links to all the pages, and all their
|
||||||
|
level-one headers, for all the content in the section.
|
||||||
|
#}
|
||||||
|
|
||||||
|
<nav class="left-sidebar" aria-label="Site navigation">
|
||||||
|
{% set index = get_section(path="_index.md") %}
|
||||||
|
<h3>{{ index.title }}</h3>
|
||||||
|
<ul class="notes">
|
||||||
|
{% for subsection in index.subsections %}
|
||||||
|
{% set active = "" %}
|
||||||
|
{% if current_url == subsection.permalink %}
|
||||||
|
{% set active = " active" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<h3><a class="note-link {{ active }}" href="{{ subsection.permalink | safe }}">
|
||||||
|
{{ subsection.title }}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{% set pagecount = subsection.pages | length %}
|
||||||
|
{% if pagecount > 0 %}
|
||||||
|
<ul>
|
||||||
|
{% for page in subsection.pages %}
|
||||||
|
<li><a class="note-link" href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<ul>
|
||||||
|
{% for dest in subsection.toc %}
|
||||||
|
<li><a class="note-link" href="{{ dest.permalink | safe }}">{{ dest.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
<ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
<ul>
|
||||||
|
</nav>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
{#
|
||||||
|
The left sidebar for singleton pages provides navigation is for topics that
|
||||||
|
have no child pages. This sidebar contains only links to all the level zero
|
||||||
|
and level one headers for all content in the site. It should only be used for
|
||||||
|
document section that have only a section definition file, `_index.md`.
|
||||||
|
#}
|
||||||
|
|
||||||
|
<div class="left-sidebar" aria-label="Site navigation">
|
||||||
|
<nav class="scrollable-sidebar">
|
||||||
|
{% set index = get_section(path="_index.md") %}
|
||||||
|
<h3>{{ index.title }}</h3>
|
||||||
|
<ul class="notes">
|
||||||
|
{% for s in index.subsections %}
|
||||||
|
{% set subsection = get_section(path=s) %}
|
||||||
|
{% set active = "" %}
|
||||||
|
{% if current_url == subsection.permalink %}
|
||||||
|
{% set active = " active" %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a class="note-link {{ active }}" href="{{ subsection.permalink | safe }}">
|
||||||
|
{{ subsection.title }}
|
||||||
|
</a>
|
||||||
|
{% set pagecount = subsection.pages | length %}
|
||||||
|
{% if pagecount > 0 %}
|
||||||
|
<ul>
|
||||||
|
{% for page in subsection.pages %}
|
||||||
|
<li><a class="note-link" href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% else %}
|
||||||
|
<ul>
|
||||||
|
{% for dest in subsection.toc %}
|
||||||
|
<li><a class="note-link" href="{{ dest.permalink | safe }}">{{ dest.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
<ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
{% if section %} {% set toc = section.toc %} {% else %} {% set toc = page.toc %} {% endif %}
|
||||||
|
<div class="docs-toc" aria-label="On-page navigation">
|
||||||
|
<div class="scrollable-sidebar">
|
||||||
|
<div class="page-links">
|
||||||
|
<h4>On this page</h3>
|
||||||
|
<nav id="TableOfContents">
|
||||||
|
<ul>
|
||||||
|
{% for h1 in toc %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ h1.permalink | safe}}">{{ h1.title }}</a>
|
||||||
|
{% if h1.children %}
|
||||||
|
<ul>
|
||||||
|
{% for h2 in h1.children %}
|
||||||
|
<li><a href="{{ h2.permalink | safe }}">{{ h2.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<header class="navbar">
|
||||||
|
<div class="container">
|
||||||
|
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
|
||||||
|
<a class="brand" href="{{ config.base_url | safe }}"
|
||||||
|
>{{ config.title | default(value="Elf M. Sternberg's Notebook") }}</a
|
||||||
|
>
|
||||||
|
<form class="search">
|
||||||
|
<input
|
||||||
|
id="userinput"
|
||||||
|
class="search-form"
|
||||||
|
type="search"
|
||||||
|
placeholder="Search notes..."
|
||||||
|
aria-label="Search notes..."
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
<div id="suggestions"></div>
|
||||||
|
</form>
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<button id="mode" class="btn" type="button" aria-label="Toggle mode">
|
||||||
|
<span class="toggle-dark"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="feather feather-moon"
|
||||||
|
>
|
||||||
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg
|
||||||
|
></span>
|
||||||
|
<span class="toggle-light"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="feather feather-sun"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="12" r="5"></circle>
|
||||||
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||||
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||||
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||||
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||||
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||||
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||||
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||||
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg
|
||||||
|
></span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="https://twitter.com/elfsternberg"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="feather feather-twitter"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
|
||||||
|
></path></svg
|
||||||
|
><span class="hidden">Twitter</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="https://github.com/elfsternberg"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="feather feather-github"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
||||||
|
></path></svg
|
||||||
|
><span class="hidden">GitHub</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
@ -7,9 +7,7 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container" role="document">
|
<div class="container" role="document">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="notes-sidebar">
|
{% include "components/left-sidebar-singleton.html" %}
|
||||||
Sidebar!
|
|
||||||
</div>
|
|
||||||
<article>
|
<article>
|
||||||
<h1 class="text-center">{{ section.title }}</h1>
|
<h1 class="text-center">{{ section.title }}</h1>
|
||||||
<div class="text-center">{{ section.content | safe }}</div>
|
<div class="text-center">{{ section.content | safe }}</div>
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,23 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container" role="document">
|
<section class="section">
|
||||||
<div class="content">
|
<h1>{{ section.title | default(value="Elf's Notes") }}</h1>
|
||||||
<section class="section container-fluid mt-n3 pb-3">
|
<article class="text">
|
||||||
<div class="row justify-content-center">
|
{{ section.content | safe }}
|
||||||
<div class="col-lg-12 text-center">
|
</article>
|
||||||
<h1>{{ section.title | default(value="Elf's Notes") }}</h1>
|
</section>
|
||||||
</div>
|
|
||||||
<article class="text-article">
|
|
||||||
<p class="lead">
|
|
||||||
{{ section.extra.lead | default(value="You need to add some content") | safe }}
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container topic-list">
|
<section class="subject-list">
|
||||||
<h2>Topics Available:</h2>
|
<h2>Subjects Available:</h2>
|
||||||
<section class="section">
|
<div class="topic-cards">
|
||||||
<div class="topic-cards">
|
{% for subsection_path in section.subsections %}
|
||||||
{% if section.extra.list %} {% for val in section.extra.list %}
|
{% set subsection = get_section(path=subsection_path) %}
|
||||||
<div class="topic-card">
|
<div class="topic-card">
|
||||||
<h3><a href="{{val.url}}">{{ val.title }}</a></h3>
|
<h3><a href="{{subsection.permalink}}">{{ subsection.title }}</a></h3>
|
||||||
<p>{{ val.content | safe }}</p>
|
<p>{{ subsection.description | default(value="No description provided") }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %} {% endif %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -2,27 +2,15 @@
|
||||||
|
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block body %}
|
|
||||||
{% if section.extra.class %}
|
|
||||||
{% set page_class = section.extra.class %}
|
|
||||||
{% else %}
|
|
||||||
{% set page_class = "page list" %}
|
|
||||||
{% endif %}
|
|
||||||
{% endblock body %}
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="wrap container" role="document">
|
<div class="container" role="document">
|
||||||
<div class="content">
|
<div class="main">
|
||||||
<div class="row justify-content-center">
|
{% include "components/left-sidebar-singleton.html" %}
|
||||||
<div class="col-md-12 col-lg-10 col-xxl-8">
|
{% include "components/right-sidebar.html" %}
|
||||||
<article class="text-article">
|
<article>
|
||||||
<div class="page-header">
|
<h1 class="text-center">{{ section.title }}</h1>
|
||||||
<h1>{{ section.title }}</h1>
|
<div class="text-center">{{ section.content | safe }}</div>
|
||||||
</div>
|
</article>
|
||||||
{{ section.content | safe }}
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue