🚚 refactor: move blog posts blog section
This commit is contained in:
welpo
7
content/blog/_index.md
Normal file
7
content/blog/_index.md
Normal file
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
paginate_by = 5
|
||||
path = "/blog"
|
||||
title = "Blog"
|
||||
sort_by = "date"
|
||||
template = "section.html"
|
||||
+++
|
||||
14
content/blog/almost-no-js.md
Normal file
14
content/blog/almost-no-js.md
Normal file
@@ -0,0 +1,14 @@
|
||||
+++
|
||||
title = "Almost no JavaScript"
|
||||
date = 2023-01-06
|
||||
description = "JavaScript is only used when HTML and CSS aren't enough."
|
||||
|
||||
[taxonomies]
|
||||
tags = ["showcase"]
|
||||
+++
|
||||
|
||||
# Javascript?
|
||||
|
||||
This theme has almost no JavaScript. It includes a single ~950 byte `.js` file with the logic for the light/dark mode switch.
|
||||
|
||||
Other than that, it's a fast site with html and css. Just the way (most of) the web should be :-)
|
||||
44
content/blog/markdown.md
Normal file
44
content/blog/markdown.md
Normal file
@@ -0,0 +1,44 @@
|
||||
+++
|
||||
title = "Markdown examples"
|
||||
date = 2023-01-31
|
||||
updated = 2023-03-01
|
||||
description = "This post showcases some examples of Markdown formatting, including a table, code blocks and tags, quotes, tables, and footnotes."
|
||||
|
||||
[taxonomies]
|
||||
tags = ["markdown", "showcase"]
|
||||
+++
|
||||
|
||||
|
||||
## Table
|
||||
|
||||
Here's an example of a table[^1]. Its colours change depending on the current theme.
|
||||
|
||||
| Symbol | Element | Atomic Number |
|
||||
|---------|---------|---------------|
|
||||
| H | Hydrogen| 1 |
|
||||
| C | Carbon | 6 |
|
||||
| Fe | Iron | 26 |
|
||||
| Au | Gold | 79 |
|
||||
|
||||
|
||||
## Code Block
|
||||
|
||||
```rust
|
||||
fn main() {
|
||||
println!("Hello, world!") -> ();
|
||||
}
|
||||
```
|
||||
|
||||
## Code tags
|
||||
|
||||
Lorem ipsum `dolor` sit amet, `consectetur adipiscing` elit.
|
||||
`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
|
||||
|
||||
## Quote
|
||||
|
||||
> We're all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we're going to die. Each of us secretly believing we won't.
|
||||
>
|
||||
> — Charlie Kaufman, Synecdoche, New York
|
||||
|
||||
|
||||
[^1]: And here's an example of a footnote!
|
||||
9
content/blog/one_more.md
Normal file
9
content/blog/one_more.md
Normal file
@@ -0,0 +1,9 @@
|
||||
+++
|
||||
title = "One more post"
|
||||
date = 2021-05-30
|
||||
description = "The only reason this post exists is to show the pagination in the blog section."
|
||||
+++
|
||||
|
||||
> ‘Look at you,’ she said, not without affection. ‘Sitting there like an owl. Melancholy bloody gargoyle. You mawkish bugger. You don’t get any insight, you know, just because it’s night. Just because some buildings have their lights on.’
|
||||
>
|
||||
> — China Miéville, The City & the City
|
||||
26
content/blog/security.md
Normal file
26
content/blog/security.md
Normal file
@@ -0,0 +1,26 @@
|
||||
+++
|
||||
title = "Secure by default"
|
||||
date = 2023-02-22
|
||||
description = "tabi has an easily customizable Content Security Policy (CSP) with safe defaults. Get peace of mind and an A+ on Mozilla Observatory."
|
||||
|
||||
[taxonomies]
|
||||
tags = ["security", "showcase"]
|
||||
+++
|
||||
|
||||
The default configuration of the theme gets an A+ score on [Mozilla Observatory](https://observatory.mozilla.org).
|
||||
|
||||
This is accomplished by programatically configuring Content Security Policy (CSP) headers based on a user-defined list of allowed domains in the theme's `config.toml` file. Here's the default and recommended setup (you could remove the last lines if you don't want to embed videos):
|
||||
|
||||
```
|
||||
[extra]
|
||||
allowed_domains = [
|
||||
{ directive = "img-src", domains = ["'self'", "https://*"] },
|
||||
{ directive = "script-src", domains = ["'self'"] },
|
||||
{ directive = "style-src", domains = ["'self'"] },
|
||||
{ directive = "frame-src", domains = ["player.vimeo.com", "https://www.youtube-nocookie.com"] },
|
||||
]
|
||||
```
|
||||
|
||||
The allowed_domains list specifies the URLs that the website should be able to connect to, and each domain in the list is associated with a CSP directive such as `frame-src`, `connect-src`, or `script-src`. The `templates/partials/header.html` file dynamically generates the CSP header based on this list.
|
||||
|
||||
This feature allows you to easily customize the website's security headers to allow for specific use cases, such as embedding YouTube videos, loading remote fonts ([not recommended](https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/)) or scripts.
|
||||
74
content/blog/shortcodes.md
Normal file
74
content/blog/shortcodes.md
Normal file
@@ -0,0 +1,74 @@
|
||||
+++
|
||||
title = "Custom shortcodes"
|
||||
date = 2023-02-19
|
||||
updated = 2023-02-27
|
||||
description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
|
||||
|
||||
[taxonomies]
|
||||
tags = ["showcase", "shortcodes"]
|
||||
+++
|
||||
|
||||
## Image shortcodes
|
||||
|
||||
### Dual theme images
|
||||
|
||||
Useful if you want to use a different image for the light and dark themes:
|
||||
|
||||
{{ dual_theme_image(light_src="$BASE_URL/img/paris_day.webp", dark_src="$BASE_URL/img/paris_night.webp" alt="The Eiffel tower") }}
|
||||
|
||||
#### Usage
|
||||
```
|
||||
{{/* dual_theme_image(light_src="$BASE_URL/img/paris_day.webp", dark_src="$BASE_URL/img/paris_night.webp" alt="The Eiffel tower") */}}
|
||||
```
|
||||
|
||||
### Invertible image
|
||||
|
||||
Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme.
|
||||
|
||||
{{ invertible_image(src="$BASE_URL/img/graph.webp", alt="Invertible graph") }}
|
||||
|
||||
#### Usage
|
||||
```
|
||||
{{/* invertible_image(src="$BASE_URL/img/graph.webp", alt="Invertible graph") */}}
|
||||
```
|
||||
|
||||
### Dimmable image
|
||||
|
||||
Images with too much brightness or contrast can be jarring against a dark background. Here's an example of a photograph that dims when the dark theme is active.
|
||||
|
||||
{{ dimmable_image(src="$BASE_URL/img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }}
|
||||
|
||||
#### Usage
|
||||
|
||||
```
|
||||
{{/* dimmable_image(src="$BASE_URL/img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}}
|
||||
```
|
||||
|
||||
## References
|
||||
|
||||
This shortcode formats a reference section with a hanging indent like so:
|
||||
|
||||
{% references() %}
|
||||
|
||||
Alderson, E. (2015). Cybersecurity and Social Justice: A Critique of Corporate Hegemony in a Digital World. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
|
||||
|
||||
Funkhouser, M. (2012). The Social Norms of Indecency: An Analysis of Deviant Behavior in Contemporary Society. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
|
||||
|
||||
Schrute, D. (2005). The Beet Farming Revolution: An Analysis of Agricultural Innovation. *Scranton Agricultural Quarterly, 38*(3), 67-81.
|
||||
|
||||
Steinbrenner, G. (1997). The Cost-Benefit Analysis of George Costanza: An Examination of Risk-Taking Behavior in the Workplace. *New York Journal of Business, 12*(4), 112-125.
|
||||
|
||||
Winger, J. A. (2010). The Art of Debate: An Examination of Rhetoric in Greendale Community College's Model United Nations. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
|
||||
|
||||
{% end %}
|
||||
|
||||
#### Usage
|
||||
|
||||
```
|
||||
{%/* references() */%}
|
||||
|
||||
Your references go here.
|
||||
|
||||
Each in a new line. Markdown (links, italics…) will be rendered.
|
||||
|
||||
{%/* end */%}
|
||||
48
content/blog/toc.md
Normal file
48
content/blog/toc.md
Normal file
@@ -0,0 +1,48 @@
|
||||
+++
|
||||
title = "Table of Contents"
|
||||
date = 2022-11-01
|
||||
description = "A post showcasing the optional Table of Contents."
|
||||
|
||||
[taxonomies]
|
||||
tags = ["showcase", "markdown"]
|
||||
|
||||
[extra]
|
||||
toc = true
|
||||
+++
|
||||
|
||||
# Heading 1
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
|
||||
## Heading 2
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
### Heading 3.1
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4.1
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4.2
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
|
||||
### Heading 3.2
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
|
||||
---
|
||||
|
||||
## Heading 2
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
### Heading 3.1
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4.1
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4.2
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
|
||||
### Heading 3.2
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4.1
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
#### Heading 4.1
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed mollis augue, vel efficitur lacus. Pellentesque eu egestas mi. Etiam ultrices lectus sit amet aliquet ullamcorper. Praesent in erat quis est sagittis finibus. Etiam nec sapien in nulla interdum faucibus. Integer iaculis lorem quis arcu lobortis, non malesuada neque vehicula. Aenean nec tellus eu metus bibendum tempus. Sed rutrum urna ut commodo tempor. Vestibulum aliquet elit posuere turpis maximus condimentum. Sed urna libero, ornare eu tellus vitae, laoreet condimentum risus. Aenean elit lectus, mattis quis nibh nec, faucibus rutrum sapien. Sed iaculis consectetur mi, eget posuere turpis finibus et.
|
||||
Reference in New Issue
Block a user