mirror of
https://github.com/andwati/andwati.com.git
synced 2026-10-29 22:12:15 +00:00
yolo
This commit is contained in:
@@ -1,10 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
title: "404: Page not found"
|
||||
permalink: 404.html
|
||||
---
|
||||
|
||||
<div class="page">
|
||||
<h1 class="page-title">404: Page not found</h1>
|
||||
<p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="{{ site.baseurl }}">Head back home</a> to try finding it again.</p>
|
||||
</div>
|
||||
@@ -1,6 +0,0 @@
|
||||
source "https://rubygems.org"
|
||||
|
||||
gem "jekyll"
|
||||
gem "jekyll-gist"
|
||||
gem "jekyll-paginate"
|
||||
gem "jekyll-seo-tag"
|
||||
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2024 Ian Andwati
|
||||
Copyright (c) 2023 Ian Andwati
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
#!/usr/bin/make -f
|
||||
|
||||
.PHONY: all build
|
||||
|
||||
BUILD_DIR := public
|
||||
|
||||
all: clean build
|
||||
|
||||
clean:
|
||||
rm -rfd ./$(BUILD_DIR)
|
||||
|
||||
build:
|
||||
zola build
|
||||
|
||||
serve:
|
||||
zola serve
|
||||
|
||||
update-zola:
|
||||
@./scripts/update-zola
|
||||
@@ -1,118 +1,68 @@
|
||||
# Hyde
|
||||
|
||||
Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler.
|
||||
|
||||
|
||||
# https://andwati.github.io
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Usage](#usage)
|
||||
- [Options](#options)
|
||||
- [Sidebar menu](#sidebar-menu)
|
||||
- [Sticky sidebar content](#sticky-sidebar-content)
|
||||
- [Themes](#themes)
|
||||
- [Reverse layout](#reverse-layout)
|
||||
- [Development](#development)
|
||||
- [Author](#author)
|
||||
- [License](#license)
|
||||
MY personal page and blog site.
|
||||
|
||||
<p align="center" width="100%">
|
||||
<img src="./screenshots/home.png" alt="word counter pro logo" />
|
||||
<img src="./screenshots/posts.png" alt="word counter pro logo" />
|
||||
</p>
|
||||
|
||||
## Usage
|
||||
<p align="center" width="100%">
|
||||
<img src="./screenshots/archive.png" alt="word counter pro logo" />
|
||||
<img src="./screenshots/about.png" alt="word counter pro logo" />
|
||||
</p>
|
||||
|
||||
Hyde is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll.
|
||||
## Features
|
||||
|
||||
- [ ] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
|
||||
- [x] Support for comments using utterances
|
||||
- [x] Perfect Lighthouse score (Performance, Accessibility, Best Practices and SEO).
|
||||
- [ ] [KaTeX](https://katex.org/) support.
|
||||
- [x] [feed](https://andwati.github.io/rss.xml).
|
||||
- [x] [Archive page](https://andwati.github.io/archive/).
|
||||
- [x] [Tags](<(https://andwati.github.io/tags/)>)
|
||||
- [x] Responsive design.
|
||||
- [x] Code syntax highlighting.
|
||||
- [ ] Newsletter
|
||||
- [x] Word Count and Reading time
|
||||
- [x] Pagination
|
||||
|
||||
## Options
|
||||
# Generating the site
|
||||
|
||||
Hyde includes some customizable options, typically applied via classes on the `<body>` element.
|
||||
## Steps
|
||||
|
||||
|
||||
### Sidebar menu
|
||||
|
||||
Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/).
|
||||
1. Clone this site and enter the directory.
|
||||
|
||||
```
|
||||
---
|
||||
layout: page
|
||||
title: About
|
||||
---
|
||||
repo='andwati.github.io'; git clone [email protected]:andwati/${repo}.git && cd $repo
|
||||
```
|
||||
|
||||
**Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout.
|
||||
2. Install or update to the latest Zola.
|
||||
|
||||
|
||||
### Sticky sidebar content
|
||||
|
||||
By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by removing the `.sidebar-sticky` class from the sidebar's `.container`. Sidebar content will then normally flow from top to bottom.
|
||||
|
||||
```html
|
||||
<!-- Default sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="container sidebar-sticky">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modified sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="container">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
make update-zola
|
||||
```
|
||||
|
||||
or install zola from [Github](https://github.com/getzola/zola)
|
||||
|
||||
### Themes
|
||||
3. Build the site!
|
||||
|
||||
Hyde ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).
|
||||
|
||||
|
||||
|
||||
There are eight themes available at this time.
|
||||
|
||||
|
||||
|
||||
To use a theme, add anyone of the available theme classes to the `<body>` element in the `default.html` layout, like so:
|
||||
|
||||
```html
|
||||
<body class="theme-base-08">
|
||||
...
|
||||
</body>
|
||||
```
|
||||
make build
|
||||
```
|
||||
|
||||
To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/hyde/blob/master/public/css/hyde.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
|
||||
or
|
||||
|
||||
### Reverse layout
|
||||
|
||||
|
||||
|
||||
Hyde's page orientation can be reversed with a single class.
|
||||
|
||||
```html
|
||||
<body class="layout-reverse">
|
||||
...
|
||||
</body>
|
||||
```
|
||||
zola build
|
||||
```
|
||||
|
||||
# Inspiration
|
||||
|
||||
## Development
|
||||
This website was inspired by [gruvbox](https://github.com/morhetz/gruvbox),[Reilly Tucker Siemens](https://github.com/reillysiemens/tuckersiemens.com) and many more.
|
||||
|
||||
Hyde has two branches, but only one is used for active development.
|
||||
# License
|
||||
|
||||
- `master` for development. **All pull requests should be submitted against `master`.**
|
||||
- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**
|
||||
|
||||
|
||||
## Author
|
||||
|
||||
**Mark Otto**
|
||||
- <https://github.com/mdo>
|
||||
- <https://twitter.com/mdo>
|
||||
|
||||
|
||||
## License
|
||||
|
||||
Open sourced under the [MIT license](LICENSE.md).
|
||||
|
||||
<3
|
||||
This repo is licensed under [MIT License](./LICENSE)
|
||||
|
||||
-26
@@ -1,26 +0,0 @@
|
||||
# Dependencies
|
||||
markdown: redcarpet
|
||||
highlighter: pygments
|
||||
|
||||
# Permalinks
|
||||
permalink: pretty
|
||||
relative_permalinks: true
|
||||
|
||||
# Setup
|
||||
title: Hyde
|
||||
tagline: 'A Jekyll theme'
|
||||
description: 'A brazen two-column <a href="http://jekyllrb.com" target="_blank">Jekyll</a> theme that pairs a prominent sidebar with uncomplicated content. Made by <a href="https://twitter.com/mdo" target="_blank">@mdo</a>.'
|
||||
url: http://hyde.getpoole.com
|
||||
baseurl: /
|
||||
|
||||
author:
|
||||
name: 'Mark Otto'
|
||||
url: https://twitter.com/mdo
|
||||
|
||||
paginate: 5
|
||||
|
||||
# Custom vars
|
||||
version: 2.1.0
|
||||
|
||||
github:
|
||||
repo: https://github.com/poole/hyde
|
||||
@@ -1,29 +0,0 @@
|
||||
<head>
|
||||
<link href="http://gmpg.org/xfn/11" rel="profile">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
|
||||
<!-- Enable responsiveness on mobile devices-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
||||
|
||||
<title>
|
||||
{% if page.title == "Home" %}
|
||||
{{ site.title }} · {{ site.tagline }}
|
||||
{% else %}
|
||||
{{ page.title }} · {{ site.title }}
|
||||
{% endif %}
|
||||
</title>
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}public/css/syntax.css">
|
||||
<link rel="stylesheet" href="{{ site.baseurl }}public/css/hyde.css">
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}public/apple-touch-icon-144-precomposed.png">
|
||||
<link rel="shortcut icon" href="{{ site.baseurl }}public/favicon.ico">
|
||||
|
||||
<!-- RSS -->
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
|
||||
</head>
|
||||
@@ -1,36 +0,0 @@
|
||||
<div class="sidebar">
|
||||
<div class="container sidebar-sticky">
|
||||
<div class="sidebar-about">
|
||||
<h1>
|
||||
<a href="{{ site.baseurl }}">
|
||||
{{ site.title }}
|
||||
</a>
|
||||
</h1>
|
||||
<p class="lead">{{ site.description }}</p>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a class="sidebar-nav-item{% if page.url == site.baseurl %} active{% endif %}" href="{{ site.baseurl }}">Home</a>
|
||||
|
||||
{% comment %}
|
||||
The code below dynamically generates a sidebar nav of pages with
|
||||
`layout: page` in the front-matter. See readme for usage.
|
||||
{% endcomment %}
|
||||
|
||||
{% assign pages_list = site.pages %}
|
||||
{% for node in pages_list %}
|
||||
{% if node.title != null %}
|
||||
{% if node.layout == "page" %}
|
||||
<a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}" href="{{ node.url }}">{{ node.title }}</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<a class="sidebar-nav-item" href="{{ site.github.repo }}/archive/v{{ site.version }}.zip">Download</a>
|
||||
<a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a>
|
||||
<span class="sidebar-nav-item">Currently v{{ site.version }}</span>
|
||||
</nav>
|
||||
|
||||
<p>© {{ site.time | date: '%Y' }}. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
<body>
|
||||
|
||||
{% include sidebar.html %}
|
||||
|
||||
<div class="content container">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="page">
|
||||
<h1 class="page-title">{{ page.title }}</h1>
|
||||
{{ content }}
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="post">
|
||||
<h1 class="post-title">{{ page.title }}</h1>
|
||||
<span class="post-date">{{ page.date | date_to_string }}</span>
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<div class="related">
|
||||
<h2>Related Posts</h2>
|
||||
<ul class="related-posts">
|
||||
{% for post in site.related_posts limit:3 %}
|
||||
<li>
|
||||
<h3>
|
||||
<a href="{{ post.url }}">
|
||||
{{ post.title }}
|
||||
<small>{{ post.date | date_to_string }}</small>
|
||||
</a>
|
||||
</h3>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
layout: post
|
||||
title: What's Jekyll?
|
||||
---
|
||||
|
||||
[Jekyll](http://jekyllrb.com) is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From [the project's readme](https://github.com/mojombo/jekyll/blob/master/README.markdown):
|
||||
|
||||
> Jekyll is a simple, blog aware, static site generator. It takes a template directory [...] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.
|
||||
|
||||
It's an immensely useful tool and one we encourage you to use here with Hyde.
|
||||
|
||||
Find out more by [visiting the project on GitHub](https://github.com/mojombo/jekyll).
|
||||
@@ -1,138 +0,0 @@
|
||||
---
|
||||
layout: post
|
||||
title: Example content
|
||||
---
|
||||
|
||||
|
||||
<div class="message">
|
||||
Howdy! This is an example blog post that shows several types of HTML content supported in this theme.
|
||||
</div>
|
||||
|
||||
Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
|
||||
|
||||
> Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
|
||||
Etiam porta **sem malesuada magna** mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
|
||||
|
||||
## Inline HTML elements
|
||||
|
||||
HTML defines a long list of available inline tags, a complete list of which can be found on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
|
||||
|
||||
- **To bold text**, use `<strong>`.
|
||||
- *To italicize text*, use `<em>`.
|
||||
- Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use `<abbr>`, with an optional `title` attribute for the full phrase.
|
||||
- Citations, like <cite>— Mark otto</cite>, should use `<cite>`.
|
||||
- <del>Deleted</del> text should use `<del>` and <ins>inserted</ins> text should use `<ins>`.
|
||||
- Superscript <sup>text</sup> uses `<sup>` and subscript <sub>text</sub> uses `<sub>`.
|
||||
|
||||
Most of these elements are styled by browsers with few modifications on our part.
|
||||
|
||||
## Heading
|
||||
|
||||
Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
|
||||
|
||||
### Code
|
||||
|
||||
Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus.
|
||||
|
||||
{% highlight js %}
|
||||
// Example can be run directly in your JavaScript console
|
||||
|
||||
// Create a function that takes two arguments and returns the sum of those arguments
|
||||
var adder = new Function("a", "b", "return a + b");
|
||||
|
||||
// Call the function
|
||||
adder(2, 6);
|
||||
// > 8
|
||||
{% endhighlight %}
|
||||
|
||||
Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
|
||||
|
||||
### Gists via GitHub Pages
|
||||
|
||||
Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.
|
||||
|
||||
{% gist 5555251 gist.md %}
|
||||
|
||||
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.
|
||||
|
||||
### Lists
|
||||
|
||||
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
|
||||
* Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
||||
* Donec id elit non mi porta gravida at eget metus.
|
||||
* Nulla vitae elit libero, a pharetra augue.
|
||||
|
||||
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
|
||||
|
||||
1. Vestibulum id ligula porta felis euismod semper.
|
||||
2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
||||
3. Maecenas sed diam eget risus varius blandit sit amet non magna.
|
||||
|
||||
Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
|
||||
|
||||
<dl>
|
||||
<dt>HyperText Markup Language (HTML)</dt>
|
||||
<dd>The language used to describe and define the content of a Web page</dd>
|
||||
|
||||
<dt>Cascading Style Sheets (CSS)</dt>
|
||||
<dd>Used to describe the appearance of Web content</dd>
|
||||
|
||||
<dt>JavaScript (JS)</dt>
|
||||
<dd>The programming language used to build advanced Web sites and applications</dd>
|
||||
</dl>
|
||||
|
||||
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
|
||||
|
||||
### Images
|
||||
|
||||
Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam metus erat, a pulvinar turpis suscipit at.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Tables
|
||||
|
||||
Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Upvotes</th>
|
||||
<th>Downvotes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Totals</td>
|
||||
<td>21</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alice</td>
|
||||
<td>10</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob</td>
|
||||
<td>4</td>
|
||||
<td>3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Charlie</td>
|
||||
<td>7</td>
|
||||
<td>9</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.
|
||||
|
||||
-----
|
||||
|
||||
Want to see something else added? <a href="https://github.com/poole/poole/issues/new">Open an issue.</a>
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
layout: post
|
||||
title: Introducing Hyde
|
||||
---
|
||||
|
||||
Hyde is a brazen two-column [Jekyll](http://jekyllrb.com) theme that pairs a prominent sidebar with uncomplicated content. It's based on [Poole](http://getpoole.com), the Jekyll butler.
|
||||
|
||||
### Built on Poole
|
||||
|
||||
Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Hyde here) includes the following:
|
||||
|
||||
* Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about))
|
||||
* Mobile friendly design and development
|
||||
* Easily scalable text and component sizing with `rem` units in the CSS
|
||||
* Support for a wide gamut of HTML elements
|
||||
* Related posts (time-based, because Jekyll) below each post
|
||||
* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)
|
||||
|
||||
### Hyde features
|
||||
|
||||
In addition to the features of Poole, Hyde adds the following:
|
||||
|
||||
* Sidebar includes support for textual modules and a dynamically generated navigation with active link support
|
||||
* Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `<body>` classes
|
||||
* [Eight optional color schemes](https://github.com/poole/hyde#themes), available via `<body>` classes
|
||||
|
||||
[Head to the readme](https://github.com/poole/hyde#readme) to learn more.
|
||||
|
||||
### Browser support
|
||||
|
||||
Hyde is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.
|
||||
|
||||
### Download
|
||||
|
||||
Hyde is developed on and hosted with GitHub. Head to the <a href="https://github.com/poole/hyde">GitHub repository</a> for downloads, bug reports, and features requests.
|
||||
|
||||
Thanks!
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
title: About
|
||||
---
|
||||
|
||||
<p class="message">
|
||||
Hey there! This page is included as an example. Feel free to customize it for your own use upon downloading. Carry on!
|
||||
</p>
|
||||
|
||||
In the novel, *The Strange Case of Dr. Jeykll and Mr. Hyde*, Mr. Poole is Dr. Jekyll's virtuous and loyal butler. Similarly, Poole is an upstanding and effective butler that helps you build Jekyll themes. It's made by [@mdo](https://twitter.com/mdo).
|
||||
|
||||
There are currently two themes built on Poole:
|
||||
|
||||
* [Hyde](http://hyde.getpoole.com)
|
||||
* [Lanyon](http://lanyon.getpoole.com)
|
||||
|
||||
Learn more and contribute on [GitHub](https://github.com/poole).
|
||||
|
||||
## Setup
|
||||
|
||||
Some fun facts about the setup of this project include:
|
||||
|
||||
* Built for [Jekyll](http://jekyllrb.com)
|
||||
* Developed on GitHub and hosted for free on [GitHub Pages](https://pages.github.com)
|
||||
* Coded with [Sublime Text 2](http://sublimetext.com), an amazing code editor
|
||||
* Designed and developed while listening to music like [Blood Bros Trilogy](https://soundcloud.com/maddecent/sets/blood-bros-series)
|
||||
|
||||
Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/poole/issues/new) or [ask me on Twitter](https://twitter.com/mdo).
|
||||
|
||||
Thanks for reading!
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
layout: null
|
||||
---
|
||||
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
|
||||
<title>{{ site.title }}</title>
|
||||
<link href="{{ site.url }}/atom.xml" rel="self"/>
|
||||
<link href="{{ site.url }}/"/>
|
||||
<updated>{{ site.time | date_to_xmlschema }}</updated>
|
||||
<id>{{ site.url }}</id>
|
||||
<author>
|
||||
<name>{{ site.author.name }}</name>
|
||||
<email>{{ site.author.email }}</email>
|
||||
</author>
|
||||
|
||||
{% for post in site.posts %}
|
||||
<entry>
|
||||
<title>{{ post.title }}</title>
|
||||
<link href="{{ site.url }}{{ post.url }}"/>
|
||||
<updated>{{ post.date | date_to_xmlschema }}</updated>
|
||||
<id>{{ site.url }}{{ post.id }}</id>
|
||||
<content type="html">{{ post.content | xml_escape }}</content>
|
||||
</entry>
|
||||
{% endfor %}
|
||||
|
||||
</feed>
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
title = "Ian Andwati"
|
||||
description = "Ian Andwati's personal website"
|
||||
base_url = "https://andwati.github.io"
|
||||
|
||||
genenerate_categories_pages = false
|
||||
generate_tags_pages = false
|
||||
generate_feed = true
|
||||
feed_filename = "rss.xml"
|
||||
minify_html = false
|
||||
taxonomies = [{ name = 'tags', feed = false }]
|
||||
compile_sass = true
|
||||
|
||||
[markdown]
|
||||
highlight_code = true
|
||||
highlight_theme = "gruvbox-dark"
|
||||
|
||||
[link_checker]
|
||||
|
||||
[extra]
|
||||
author = "Ian Andwati"
|
||||
@@ -0,0 +1,13 @@
|
||||
+++
|
||||
path = "/"
|
||||
title = "Latest Posts"
|
||||
sort_by = "date"
|
||||
template = "section.html"
|
||||
|
||||
|
||||
[extra]
|
||||
section_path = "blog/_index.md"
|
||||
header = {title = "Hello! I'm Ian.", img = "", img_alt = "Your Name" }
|
||||
max_posts = 4
|
||||
+++
|
||||
A software engineer programming high performance systems.
|
||||
@@ -0,0 +1,4 @@
|
||||
+++
|
||||
title = "Archive"
|
||||
template = "archive.html"
|
||||
+++
|
||||
@@ -0,0 +1,5 @@
|
||||
+++
|
||||
title = "Posts"
|
||||
sort_by = "date"
|
||||
paginate_by= 5
|
||||
+++
|
||||
@@ -0,0 +1,58 @@
|
||||
+++
|
||||
title = "A Fresh Coat Of Paint"
|
||||
description = "Migrating to Zola"
|
||||
author = "Ian Andwati"
|
||||
date = 2023-08-24
|
||||
[taxonomies]
|
||||
tags = ["zola", "blog", "tera", "rust"]
|
||||
+++
|
||||
|
||||
Using Zola as my preferred static site generator
|
||||
|
||||
<!-- more -->
|
||||
After using Hugo for over eight months I got tired of it and looked for other alternatives. That's when I stumbled upon Zola. Zola is a static site generator (SSG), similar to [Hugo](https://gohugo.io/), [Pelican](https://blog.getpelican.com/), and [Jekyll](https://jekyllrb.com/).
|
||||
|
||||
It is written in Rust and uses the Tera template engine, similar to Jinja2, Django templates, Liquid, and Twig. SSGs use dynamic templates to transform content into static HTML pages. Static sites are thus very fast and require no databases, making them easy to host.
|
||||
|
||||
My previous Hugo site used a theme because I wasn't really ready to learn Go's template engine. I'm already familiar with Python Django and its template system so using Tera wasn't hard because it's similar to jinja2 and the Django template syntax.
|
||||
|
||||
Content is written in [CommonMark](https://commonmark.org/), a strongly defined, highly compatible specification of [Markdown](https://www.markdownguide.org/). Zola uses [pulldown-cmark](https://github.com/raphlinus/pulldown-cmark#pulldown-cmark) to parse markdown files. The goal of this library is 100% compliance with the CommonMark spec. It adds a few additional features such as parsing footnotes, Github-flavored tables, Github-flavored task lists, and strikethrough.
|
||||
|
||||
Zola comes with built-in syntax highlighting, but you must first enable it in the configuration file.
|
||||
|
||||
Zola is very minimalistic, it is installed only as a single binary, with no extra dependencies needed. It is configured in `toml` and you only use what is needed. For example here is the configuration for this site `config.toml`:
|
||||
|
||||
```toml
|
||||
title = "Ian Andwati"
|
||||
description = "Ian Andwati's personal website"
|
||||
base_url = "https://andwati.github.io"
|
||||
|
||||
generate_categories_pages = false
|
||||
generate_tags_pages = false
|
||||
generate_feed = true
|
||||
feed_filename = "rss.xml"
|
||||
minify_html = false
|
||||
taxonomies = [{ name = 'tags', feed = false }]
|
||||
compile_sass = true
|
||||
|
||||
[markdown]
|
||||
highlight_code = true
|
||||
highlight_theme = "gruvbox-dark"
|
||||
|
||||
[link_checker]
|
||||
|
||||
[extra]
|
||||
author = "Ian Andwati"
|
||||
```
|
||||
|
||||
## Inspiration
|
||||
|
||||
The motivation to use Zola also came from my decision to move from independently developed themes. I decided to write the HTML and CSS myself and endeavor to maintain the site individually. The base CSS is borrowed from [Reilly Tucker Siemens](https://tuckersiemens.com/) who had created a nice gruvbox palette for his site.
|
||||
|
||||
I improved on it by adding an archive page, pagination, a comment system, and Google Analytics (more of these in later posts). I also implemented article read time and word count.
|
||||
|
||||
## What next
|
||||
|
||||
The site is a work in progress and is far from polished. I plan on implementing a newsletter to notify readers of new posts. The site is primarily a dark theme, in the future I'll also add theme toggling and maybe different palettes.
|
||||
|
||||
You can subscribe to the site's RSS feed at [https://andwati.github.io/rss.xml](https://andwati.github.io/rss.xml).
|
||||
@@ -0,0 +1,17 @@
|
||||
+++
|
||||
title = "File over app"
|
||||
description = "Take control of your artifacts"
|
||||
author = "Ian Andwati"
|
||||
draft = true
|
||||
date = 2023-12-18
|
||||
[taxonomies]
|
||||
tags = ["obsidian", "entropy", "notes"]
|
||||
+++
|
||||
|
||||
Take control of your artifacts
|
||||
|
||||
<!-- more -->
|
||||
|
||||
In my endless endevours to find the perfect note taking app led me to obsidian, a note taking software that uses markdown files as the file format. All software is ephemereal in nature and yoour artifacts need to survive the decline of your favorite app. The files you create should be available to you and shouldt rrequire specialized software to access.
|
||||
|
||||
Your data shouldt be locked behind a paywall or an authentication system that is not under your control.
|
||||
@@ -0,0 +1,41 @@
|
||||
+++
|
||||
title = "Django Secret Key Tutorial"
|
||||
description = "Managing secrets"
|
||||
author = "Ian Andwati"
|
||||
date = 2022-11-11T15:34:14.160Z
|
||||
[taxonomies]
|
||||
tags = ["tutorial", "django", "python", ".env"]
|
||||
+++
|
||||
|
||||
Managing the Django SECRET_KEY variable.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
The Django `SECRET_KEY` variable is very crucial to your Django application. The secret key must be a large random value and it must be kept secret. Leaking this value to unauthorized people could lead to a security breach. The SECRET_KEY is used in Django for cryptographic signing. It is used to generate tokens and hashes, they can be recreated using this variable. If it is not configured Django throws a `django.core.exceptions.ImproperlyConfigured: The SECRET_KEY setting must not be empty` error
|
||||
|
||||
# Using Environment Variables
|
||||
|
||||
The secret key should not be committed to version control. It is best practice to store the value in a .env file which is added to the .gitignore file to un-track its changes. The values can be loaded programmatically into your settings.py file.
|
||||
|
||||
# Generating A New Secret Key
|
||||
|
||||
This solution is using python's secrets lib on the back
|
||||
|
||||
```python
|
||||
from django.core.management.utils import get_random_secret_key
|
||||
# print new random secret key
|
||||
print(get_random_secret_key())
|
||||
```
|
||||
|
||||
This code can be run in the terminal as a command:
|
||||
|
||||
```python
|
||||
python -c 'from django.core.management.utils import get_random_secret_key; \
|
||||
print(get_random_secret_key())'
|
||||
```
|
||||
|
||||
Alternatively, If you are using python 3.6+ then you can use the `secrets.token_hex(\[nbytes=None])` function:
|
||||
|
||||
```python
|
||||
python3 -c 'import secrets; print(secrets.token_hex(100))'
|
||||
```
|
||||
@@ -0,0 +1,36 @@
|
||||
+++
|
||||
title = "Hello World"
|
||||
description = "Hello world"
|
||||
date = 2022-11-04
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags = ["hugo", "blog", "go"]
|
||||
+++
|
||||
|
||||
How it begins
|
||||
|
||||
<!-- more -->
|
||||
|
||||
In this post-web2.0 age, people seem to blog less and less, and blogs seem to be dying slowly. People are separated in different Apps where the content is not searchable by search engines.
|
||||
|
||||
However, I still prefer to write using a blog.
|
||||
|
||||
# Why this?
|
||||
|
||||
The best way to learn something is to teach others the knowledge that you have gained. Regurgitating that information will solidify it more firmly in your mind.
|
||||
|
||||
# What I write?
|
||||
|
||||
Mostly random stuff and a few tutorials. I'll see where this goes.Although some of the blog posts may only be helpful to myself, but who knows, I hope they will be helpful to someone else in some day.
|
||||
|
||||
# Static blog generator
|
||||
|
||||
I use hugo as a static site generator.After trying a couple of blogging platforms and trying to build a few from scratch I decided to
|
||||
throw in the towel and opt in for a ready made solution, no need reinventing the wheel.
|
||||
|
||||
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.Hugo provides a robust theming system that is easy to implement but capable of producing even the most complicated websites.Hugo's Go-based templates provide just the right amount of logic to build anything from the simple to complex. For this site I decided to go with the [even theme](https://github.com/olOwOlo/hugo-theme-even). The commenting system is implemented using [Utterances](https://utteranc.es/)
|
||||
|
||||
# Blog site hosting
|
||||
|
||||
The site is hosted on github pages as evident by the \*.github.io domain name.I prefer this mainly because it is free and I don't have
|
||||
to switch to a different hosting provider.
|
||||
@@ -0,0 +1,172 @@
|
||||
+++
|
||||
title ="Install PostgreSQL on Arch | Manjaro | Garuda Linux"
|
||||
description = "Getting PostgreSQL up and running on Arch Linux-based distros"
|
||||
date = 2023-02-16T15:34:14.160Z
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags = ["postgresql", "archlinux", "manjaro", "garuda", "linux"]
|
||||
+++
|
||||
|
||||
# Overview
|
||||
|
||||
**PostgreSQL** is a powerful open-source relational database management system (RDBMS) that allows you to store and manage large amounts of data. It was first released in 1996 and has become one of the most popular RDBMSs in the world.
|
||||
|
||||
PostgreSQL is designed to handle high levels of **concurrency**, providing features such as **MVCC (multi-version concurrency control)** that allow multiple users to access the same data simultaneously without conflicts. It is also **highly extensible**, with a large number of third-party extensions and libraries available that can be used to add functionality to the core database.
|
||||
|
||||
Some of the key features of PostgreSQL include support for **complex SQL queries**, **advanced indexing** and **query optimization**, **transactional integrity**, and support for a **wide range of programming languages** and development frameworks.PostgreSQL is used by a wide range of organizations, from small businesses to large enterprises, and is particularly popular in industries such as finance, healthcare, and e-commerce, where high levels of data security and reliability are critical.
|
||||
|
||||
In this tutorial, we’ll look at how to install PostgreSQL on Arch Linux, Manjaro, Garuda Linux, or any other Arch-based distro out there.
|
||||
|
||||
# PostgreSQL use cases
|
||||
|
||||
- **E-commerce websites:** PostgreSQL is a popular choice for e-commerce websites because it can handle large amounts of data and supports complex queries. It is used for product catalogs, order management, customer data, and more.
|
||||
- **Financial institutions:** PostgreSQL is used in financial institutions to store and manage transactional data, such as stock trades, bank transfers, and credit card transactions. It is highly secure and provides features such as transactional integrity and data encryption.
|
||||
- **Healthcare industry:** PostgreSQL is used in the healthcare industry to store patient data, such as medical records and diagnostic test results. It is also used for research purposes, where large amounts of data need to be stored and analyzed.
|
||||
- **Government agencies:** PostgreSQL is used by government agencies for a variety of purposes, including managing large datasets, storing and analyzing census data, and managing public health information.
|
||||
- **Mobile and web applications:** PostgreSQL is often used as a back-end database for mobile and web applications. It provides reliable data storage and retrieval and supports a wide range of programming languages and development frameworks.
|
||||
- **Geospatial applications:** PostgreSQL has built-in support for geospatial data and is often used for applications that require location-based data, such as mapping and GPS tracking.
|
||||
|
||||
# Why PostgreSQL?
|
||||
|
||||
Postgres offers a lot of advantages that make it an excellent choice for highly transactional environments regardless of application size and data volume. Its rich feature set and flexibility make it a popular choice for a wide range of applications and industries. Some of the top features are:
|
||||
|
||||
- **ACID Compliance:** PostgreSQL is ACID (Atomicity, Consistency, Isolation, Durability) compliant, which means it provides high reliability, consistency, and data integrity, even in the presence of hardware failures, power outages, and other system errors.
|
||||
- **Extensibility:** PostgreSQL is highly extensible, allowing developers to add new data types, operators, and functions using its extension framework. This makes it easy to customize PostgreSQL to meet the specific needs of your application.
|
||||
- **Concurrency:** PostgreSQL provides a high level of concurrency, allowing multiple users to access the same data at the same time without conflicts. It uses a Multi-Version Concurrency Control (MVCC) model that enables fast and reliable access to data, even under heavy load.
|
||||
- **Full-text search:** PostgreSQL provides a powerful full-text search engine that supports advanced search capabilities, such as stemming, ranking, and relevance matching.
|
||||
- **Advanced indexing:** PostgreSQL provides a wide range of indexing options, including B-tree, Hash, GiST, SP-GiST, GIN, and BRIN. These indexing options allow developers to optimize database performance for their specific use cases.
|
||||
- **JSON support:** PostgreSQL provides native support for storing and querying JSON data, making it easy to work with modern web and mobile applications that rely on JSON for data exchange.
|
||||
- **Security:** PostgreSQL provides a high level of security, with features such as SSL support, client authentication, and role-based access control. It also provides encryption for both data at rest and data in transit.
|
||||
- **Scalability:** PostgreSQL is designed to scale horizontally and vertically, allowing you to add more nodes to a cluster or increase the resources of a single node to handle more load.
|
||||
|
||||
# Install PostgreSQL on Arch | Manjaro | Garuda Linux
|
||||
|
||||
Now with all that fluff out of the way, let's get to business. The steps have been tested on Arch Linux with the KDE desktop.
|
||||
|
||||
> **Note:** Commands that should be run as the *postgres* user are prefixed by `[postgres]$` in this article.
|
||||
|
||||
## Step 1: Installing the PostgreSQL Package
|
||||
|
||||
```sh
|
||||
sudo pacman -Syu postgresql
|
||||
```
|
||||
|
||||
This command will update the package database and update all packages on the system then install the PostgreSQL package from your distribution mirrors. Never install a package without updating the system first. On a rolling release, this can lead to an unbootable system. Installing the package will also create a system user called *postgres*. You can now switch to the *postgres* user using a privilege elevation program.
|
||||
|
||||
You can switch to the PostgreSQL user by executing the following command:
|
||||
|
||||
- If you have sudo and are in sudoers
|
||||
|
||||
```sh
|
||||
sudo -iu postgres
|
||||
```
|
||||
|
||||
- Otherwise using su:
|
||||
|
||||
```sh
|
||||
su
|
||||
su -l postgres
|
||||
```
|
||||
|
||||
## Step 2: Initial Configuration
|
||||
|
||||
Before PostgreSQL can function correctly, the database cluster must be initialized.
|
||||
|
||||
### 2.1 We can confirm the installed PostgreSQL version by running:
|
||||
|
||||
```sh
|
||||
postgres --version ─╯
|
||||
postgres (PostgreSQL) 15.1
|
||||
```
|
||||
|
||||
### 2.2 Set applicable entries in **/etc/locale.gen**
|
||||
|
||||
```sh
|
||||
echo "en_US.UTF-8 UTF-8" | sudo tee /etc/locale.gen
|
||||
```
|
||||
|
||||
### 2.3 Then run **\*\*locale-gen\*\*** to generate locale settings
|
||||
|
||||
```sh
|
||||
sudo locale-gen
|
||||
Generating locales...
|
||||
en_US.UTF-8... done
|
||||
Generation complete.
|
||||
```
|
||||
|
||||
### 2.4 Initialize Postgres Data Directory
|
||||
|
||||
You must first log in as the **postgres** user using the following command before you can initialize PostgreSQL’s data directory:
|
||||
|
||||
```sh
|
||||
sudo su - postgres
|
||||
```
|
||||
|
||||
### 2.5 With the following command, you can now initialize PostgreSQL’s data directory:
|
||||
|
||||
```sh
|
||||
[postgres]$ initdb -D /var/lib/postgres/data
|
||||
```
|
||||
|
||||
### Step 3: PostgreSQL Service Management
|
||||
|
||||
### 3.1 Check PostgreSQL status with the following command:
|
||||
|
||||
```sh
|
||||
systemctl status postgresql ─╯
|
||||
postgresql.service - PostgreSQL database server
|
||||
Loaded: loaded (/usr/lib/systemd/system/postgresql.service; disabled; preset: disabled)
|
||||
Active: inactive (dead)
|
||||
```
|
||||
|
||||
### 3.2 Start the PostgreSQL service by running the following command:
|
||||
|
||||
```sh
|
||||
sudo systemctl start postgresql
|
||||
```
|
||||
|
||||
### 3.3 Enable the PostgreSQL service to start automatically at boot by running the following command:
|
||||
|
||||
```sh
|
||||
sudo systemctl enable postgresql
|
||||
```
|
||||
|
||||
### 3.4 Verify that PostgreSQL is running by running the following command:
|
||||
|
||||
```sh
|
||||
sudo systemctl status postgresql ─╯
|
||||
● postgresql.service - PostgreSQL database server
|
||||
Loaded: loaded (/usr/lib/systemd/system/postgresql.service; enabled; preset: disabled)
|
||||
Active: active (running) since Thu 2023-02-16 22:52:43 EAT; 20s ago
|
||||
Main PID: 26106 (postgres)
|
||||
Tasks: 6 (limit: 8790)
|
||||
Memory: 16.9M
|
||||
CPU: 113ms
|
||||
CGroup: /system.slice/postgresql.service
|
||||
├─26106 /usr/bin/postgres -D /var/lib/postgres/data
|
||||
├─26107 "postgres: checkpointer "
|
||||
├─26108 "postgres: background writer "
|
||||
├─26110 "postgres: walwriter "
|
||||
├─26111 "postgres: autovacuum launcher "
|
||||
└─26112 "postgres: logical replication launcher "
|
||||
```
|
||||
|
||||
### Change postgres user password
|
||||
|
||||
To change the postgres user password execute the following command:
|
||||
|
||||
```sh
|
||||
sudo -u postgres psql -c "ALTER USER postgres PASSWORD '$PGPASSWORD';"
|
||||
```
|
||||
|
||||
# Resources
|
||||
|
||||
- [Arch Linux Wiki](https://wiki.archlinux.org/title/PostgreSQL)
|
||||
- [Wikipedia](https://en.wikipedia.org/wiki/PostgreSQL)
|
||||
- [PostgreSQL Documentation](https://www.postgresql.org/docs/)
|
||||
|
||||
# Conclusion
|
||||
|
||||
Installing PostgreSQL on Arch Linux-based distribution is a straightforward process that can be completed in just a few steps. By following the steps outlined above, you can install, configure, and start the PostgreSQL database server on your Arch Linux system. Once installed, you can use PostgreSQL to store, manage, and query data for a wide range of applications and use cases. With its advanced features and high level of extensibility, PostgreSQL is a popular choice for developers and businesses seeking a robust and reliable database management system.
|
||||
|
||||
You can connect to the PostgreSQL server using the psql command-line client or a graphical tool such as pgAdmin.
|
||||
@@ -0,0 +1,159 @@
|
||||
+++
|
||||
title = "Integrating Netlify CMS"
|
||||
description = "Integrating netlify cms"
|
||||
date = 2022-11-24T15:34:14.160Z
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags = ["blog", "hugo", "netlify","netlify-cms","github"]
|
||||
+++
|
||||
|
||||
Migrating to a better content management system through Netlify CMS
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# Heavy Lifting
|
||||
|
||||
I use [Visual Studio Code](https://code.visualstudio.com/) to manually edit the blog post content on this website. This is quite a hassle because I have to deal with
|
||||
markdown files. There are many problems with this approach and several gotchas. I have to work on a local site repository to be able to edit the content. My GitHub credentials are also required to push my local changes to my remote repository on GitHub so that it can trigger the build process and publish the site.
|
||||
|
||||
This process has helped me a lot to master markdown syntax and some practice on my git skills. It’s fun to update the website content following these steps but sometimes it can be frustrating. At those times, I really miss the user interface of content management systems. After careful consideration, I moved on with Netlify CMS. At its core, Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including:
|
||||
|
||||
- **Fast, web-based UI:** With rich-text editing, real-time preview, and drag-and-drop media uploads.
|
||||
- **Platform agnostic:** Works with most static site generators.
|
||||
- **Easy installation:** Add two files to your site and hook up the backend by including those files in your build process or linking to our Content Delivery Network (CDN).
|
||||
- **Modern authentication:** Using GitHub, GitLab, or Bitbucket and JSON web tokens.
|
||||
- **Flexible content types:** Specify an unlimited number of content types with custom fields.
|
||||
- **Fully extensible:** Create custom-styled previews, UI widgets, and editor plugins.
|
||||
|
||||
# Redeploying to Netlify
|
||||
|
||||
I decided to move the site from GitHub pages to Netlify hosting to take full control of the platform. Hugo sites on Netlify can benefit from automatic framework detection and control over Hugo version selection. When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Hugo, Netlify provides a suggested build command and publish directory: Hugo and public. The build process is straight forward but you can add custom options to your `netlify.toml` file, here are my options:
|
||||
|
||||
```toml
|
||||
[build]
|
||||
command = "hugo"
|
||||
publish = "public"
|
||||
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.105.0"
|
||||
```
|
||||
|
||||
# Setting up Netlify CMS
|
||||
|
||||
You can adapt Netlify CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub, GitLab, or Bitbucket. You can Netlify CMS to a site that's built with a common static site generator, like Jekyll, Hugo, Hexo, or Gatsby. The official documentation for installing on your website can be found at the [official site](https://www.netlifycms.org/docs/intro/)
|
||||
|
||||
## Steps
|
||||
|
||||
**Step 1**
|
||||
|
||||
Create a static admin folder containing all Netlify CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. For Hugo, it is the `static` folder.
|
||||
|
||||
`/static/admin`
|
||||
|
||||
**Step 2**
|
||||
|
||||
Inside the admin folder, create two files: `index.html` and `config.yml`. The first file `admin/index.html` is an entry point to Netlify CMS. You will access the CMS interface from `yourwebsite.com/admin` when everything is ready.
|
||||
|
||||
**Step 3**
|
||||
|
||||
The first file, `admin/index.html`, is the entry point for the Netlify CMS admin interface. Paste this code in index.html and save. This HTML starter page will load the Netlify CMS Javascript file:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Content Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Netlify CMS -->
|
||||
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Step 4**
|
||||
|
||||
Now let’s move to the configuration section. These are the configurations that go into the `config.yml` file. This process is different for every site. I followed the guidelines on the website and made minor adjustments. It worked on my website. The configuration options are available at the [docs](<https://www.netlifycms.org/docs/add-to-your-site/#:~:text=%2C%20MyTemplate)-,Configuration,-Configuration%20is%20different>). This is how I configured my config.yml file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: netlify-cms # Branch to update (optional; defaults to master)
|
||||
|
||||
# This line should *not* be indented
|
||||
publish_mode: editorial_workflow
|
||||
|
||||
media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
|
||||
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
|
||||
|
||||
collections:
|
||||
- name: "post" # Used in routes, e.g., /admin/collections/blog
|
||||
label: "posts" # Used in the UI
|
||||
folder: "content/post" # The path to the folder where the documents are stored
|
||||
create: true # Allow users to create new documents in this collection
|
||||
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
|
||||
fields: # The fields for each document, usually in front matter
|
||||
- { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
|
||||
- { label: "Title", name: "title", widget: "string" }
|
||||
- { label: "Draft", name: "draft", widget: "boolean", default: true }
|
||||
- { label: "Publish Date", name: "date", widget: "datetime" }
|
||||
- { label: "Last Modified", name: "lastmod", widget: "datetime" }
|
||||
- { label: "Body", name: "body", widget: "markdown" }
|
||||
- { label: "Keywords", name: "keywords", widget: "list" }
|
||||
- { label: "Tags", name: "tags", widget: "list" }
|
||||
- { label: "Categories", name: "categories", widget: "list" }
|
||||
- { label: "Comments", name: "comment", widget: "boolean", default: true }
|
||||
- {
|
||||
label: "Table of Contents",
|
||||
name: "toc",
|
||||
widget: "boolean",
|
||||
default: true,
|
||||
}
|
||||
```
|
||||
|
||||
**Step 5**
|
||||
|
||||
**Authentication**
|
||||
|
||||
Now that the Netlify CMS files are in place and configured, all that's left is to enable authentication.
|
||||
Netlify offers a built-in authentication service called Identity. In order to use it, connect your site repo with Netlify. Netlify has published a general [Step-by-Step Guide](https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/) for this, along with detailed guides for many popular static site generators
|
||||
|
||||
Let’s first enable Netlify Identity and Git Gateway:
|
||||
|
||||
- On your Netlify account, go to **Settings > Identity** and select **Enable Identity Service**
|
||||
- Under **Registration preferences**, select **Invite Only**.
|
||||
- If you want to enable login from external providers such as Google and GitHub, check the boxes you want to use, under **External Providers** section. I find it practical to log in with GitHub, so I added it.
|
||||
- Go to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git Host and generates and API token.
|
||||
- Everything is almost set up. What we need now is a front-end interface to connect. We will add the following script in two places, to include the **Netlify Identity Widget** on our website:
|
||||
|
||||
```html
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
```
|
||||
|
||||
We will use Netlify's [script injection](https://docs.netlify.com/site-deploys/post-processing/snippet-injection/) feature to add the script to our site. To use snippet injection, go to **Site Settings > Build & Deploy > Post processing**. Find the Snippet Injection section and select **Add Snippet**. Write a name for the script in the first box (e.g. Netlify Identity Widget). Paste the script inside the second box. Choose Insert before the `</body>` option and save.
|
||||
|
||||
Lastly, we will add the following script before the closing `<body>` tag of our website’s main index page. This script allows the user to redirect back to the `/admin/` path after completing the login with the Netlify Identity Widget:
|
||||
|
||||
```html
|
||||
<script>
|
||||
if (window.netlifyIdentity) {
|
||||
window.netlifyIdentity.on("init", (user) => {
|
||||
if (!user) {
|
||||
window.netlifyIdentity.on("login", () => {
|
||||
document.location.href = "/admin/";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
**Step 5**
|
||||
|
||||
Now we’re all set. Since we set our registration preferences to **“Invite Only”**, we need to invite ourselves as site users. To do this, select the Identity tab from the Netlify site dashboard and select the Invite Users button. Add your email address and send an invitation. You will receive an email. In your email, click **“accept the invitation”**. You will be directed to your website admin sign-up panel. Choose a password. Now you are ready to log in to Netlify CMS.
|
||||
|
||||
# Setting up a custom domain
|
||||
|
||||
I bought a custom domain from [Namecheap](https://namecheap.com), they provide some pretty good deals. After pointing the nameservers for the domain to the Netlify nameservers, voila! everything worked smoothly. For HTTPS support, Netlify enables automatic TLS certificates with Let’s Encrypt.
|
||||
@@ -0,0 +1,188 @@
|
||||
+++
|
||||
title = "Export default and module.exports in Javascript"
|
||||
description = "Modules are the building blocks of modern JavaScript applications, allowing for the encapsulation of code into reusable components. Two primary systems govern the exportation of these modules: export default in ES6 and module.exports in CommonJS. "
|
||||
author = "Ian Andwati"
|
||||
date = 2024-01-17
|
||||
[taxonomies]
|
||||
tags = ["javascript", "node"]
|
||||
+++
|
||||
|
||||
Javascript is a popular programming language that can run both in the browser and on the server. However, different environments may have different ways of organizing and importing Javascript modules. In this article, we will compare two common methods of exporting and importing modules: **export default** and **module.exports**.
|
||||
|
||||
|
||||
## What are modules?
|
||||
Modules are reusable pieces of code that can be separated into different files. Modules can export values, functions, classes, or objects that can be imported by other modules. This way, modules can avoid polluting the global scope and enable code reuse and modularity.
|
||||
|
||||
## How to export modules in Node.js?
|
||||
Node.js is a runtime environment that allows Javascript to run on the server. Node.js uses a module system called CommonJS, which is based on the require and module.exports syntax.
|
||||
|
||||
To export a module in Node.js, you can assign the value that you want to export to the module.exports object. For example:
|
||||
|
||||
```javascript
|
||||
// my-module.js
|
||||
// export a function
|
||||
module.exports = function add(a, b) {
|
||||
return a + b;
|
||||
};
|
||||
|
||||
// export an object
|
||||
module.exports = {
|
||||
name: "Alice",
|
||||
age: 25,
|
||||
};
|
||||
```
|
||||
|
||||
To import a module in Node.js, you can use the require function and pass the path of the module file as an argument. The require function will return the value of module.exports from the module file. For example:
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
// import a function
|
||||
const add = require("./my-module.js");
|
||||
console.log(add(2, 3)); // 5
|
||||
|
||||
// import an object
|
||||
const person = require("./my-module.js");
|
||||
console.log(person.name); // Alice
|
||||
console.log(person.age); // 25
|
||||
```
|
||||
|
||||
Note that Node.js will cache the modules that are imported with require, so if you import the same module multiple times, you will get the same instance of the module.
|
||||
|
||||
## How to export modules in ES6?
|
||||
ES6 is the version of Javascript that introduced many new features, including a native module system. ES6 modules use the `import` and `export` syntax.
|
||||
|
||||
To export a module in ES6, you can use the `export` keyword followed by the declaration of the value that you want to export. You can also use the export keyword with curly braces to export a list of named values. For example:
|
||||
|
||||
```javascript
|
||||
// my-module.js
|
||||
// export a function
|
||||
export function add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
// export a class
|
||||
export class Person {
|
||||
constructor(name, age) {
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
}
|
||||
}
|
||||
|
||||
// export an object
|
||||
export const person = {
|
||||
name: "Alice",
|
||||
age: 25,
|
||||
};
|
||||
```
|
||||
|
||||
To import a module in ES6, you can use the `import` keyword followed by the name of the value that you want to import and the path of the module file. You can also use the import keyword with curly braces to import a list of named values. For example:
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
// import a function
|
||||
import { add } from "./my-module.js";
|
||||
console.log(add(2, 3)); // 5
|
||||
|
||||
// import a class
|
||||
import { Person } from "./my-module.js";
|
||||
const person = new Person("Bob", 30);
|
||||
console.log(person.name); // Bob
|
||||
console.log(person.age); // 30
|
||||
|
||||
// import an object
|
||||
import { person as Alice } from "./my-module.js";
|
||||
console.log(Alice.name); // Alice
|
||||
console.log(Alice.age); // 25
|
||||
```
|
||||
Note that ES6 modules are imported and executed only once, so if you import the same module multiple times, you will get the same instance of the module.
|
||||
|
||||
## What is the difference between export default and module.exports?
|
||||
One of the main differences between export default and module.exports is that export default is an ES6 feature, while module.exports is a CommonJS feature. Therefore, they are not compatible with each other by default. However, some tools like Babel or Webpack can transpile ES6 modules to CommonJS modules, or vice versa, to make them work together.
|
||||
|
||||
Another difference is that export default can only export one value per module, while module.exports can export any value, including multiple values. For example:
|
||||
|
||||
```javascript
|
||||
// my-module.js
|
||||
// export default a function
|
||||
export default function add(a, b) {
|
||||
return a + b;
|
||||
}
|
||||
|
||||
// export default an object
|
||||
export default {
|
||||
name: "Alice",
|
||||
age: 25,
|
||||
};
|
||||
|
||||
// export default a class
|
||||
export default class Person {
|
||||
constructor(name, age) {
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// my-module.js
|
||||
// export a function
|
||||
module.exports = function add(a, b) {
|
||||
return a + b;
|
||||
};
|
||||
|
||||
// export an object
|
||||
module.exports = {
|
||||
name: "Alice",
|
||||
age: 25,
|
||||
};
|
||||
|
||||
// export a class
|
||||
module.exports = class Person {
|
||||
constructor(name, age) {
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Note that you can only have one export default statement per module, but you can have multiple module.exports statements. However, each module.exports statement will overwrite the previous one, so only the last one will be exported.
|
||||
|
||||
To import a default export, you can use the import keyword without curly braces and assign any name to the imported value. For example:
|
||||
|
||||
```javascript
|
||||
// main.js
|
||||
// import a default export
|
||||
import add from "./my-module.js";
|
||||
console.log(add(2, 3)); // 5
|
||||
|
||||
// import another default export
|
||||
import person from "./my-module.js";
|
||||
console.log(person.name); // Alice
|
||||
console.log(person.age); // 25
|
||||
|
||||
// import another default export
|
||||
import Person from "./my-module.js";
|
||||
const person = new Person("Bob", 30);
|
||||
console.log(person.name); // Bob
|
||||
console.log(person.age); // 30
|
||||
```
|
||||
|
||||
To import a module.exports value, you can use the require function and assign any name to the imported value. For example:
|
||||
```javascript
|
||||
// main.js
|
||||
// import a module.exports value
|
||||
const add = require("./my-module.js");
|
||||
console.log(add(2, 3)); // 5
|
||||
|
||||
// import another module.exports value
|
||||
const person = require("./my-module.js");
|
||||
console.log(person.name); // Alice
|
||||
console.log(person.age); // 25
|
||||
|
||||
// import another module.exports value
|
||||
const Person = require("./my-module.js");
|
||||
const person = new Person("Bob", 30);
|
||||
console.log(person.name); // Bob
|
||||
console.log(person.age); // 30
|
||||
```
|
||||
Node’s JavaScript has diverged from that of the browser. Understanding both CommonJS modules and ES6 modules is your first step in becoming a 10X developer. Happy coding!
|
||||
@@ -0,0 +1,120 @@
|
||||
+++
|
||||
title = "Setting up Obsidian sync in Windows"
|
||||
description = "Syncing Obsidian in Windows with Windows Task Scheduler with git"
|
||||
author = "Ian Andwati"
|
||||
date = 2023-10-01
|
||||
[taxonomies]
|
||||
tags = ["obsidian", "git","sync", "windows", "cron", "task scheduler", "powershell"]
|
||||
+++
|
||||
|
||||
Syncing Obsidian in Windows with Windows Task Scheduler and git
|
||||
|
||||
<!-- more -->
|
||||
|
||||
[Obsidian](https://obsidian.md/) is a powerful note-taking and knowledge management tool that has gained a dedicated following among researchers, writers, and knowledge workers. To make the most of Obsidian, it's essential to keep your notes synchronized across devices and ensure your data is regularly backed up.Obsidian is the private and flexible writing app that adapts to the way you think.
|
||||
|
||||
Obsidian is free for personal use.It does not charge based on features or usage.You only pay if you use Obsidian commercially.
|
||||
|
||||
In this article, we'll guide you through the process of setting up automated synchronization for your Obsidian vault on Windows using Windows Task Scheduler and a PowerShell script.[^note]
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before we dive into setting up the synchronization task, ensure you have the following prerequisites in place:
|
||||
|
||||
1. **Obsidian Installed:** Make sure Obsidian is [installed](https://obsidian.md/download) on your Windows computer, and you have an existing Obsidian vault that you want to sync.
|
||||
|
||||
1. **Git Installed:** You'll need Git installed and configured with your Obsidian vault's repository. If you haven't already done this, you can download Git from the [official website](https://git-scm.com/downloads) and follow the installation instructions.
|
||||
|
||||
1. **PowerShell Script:** The provided PowerShell script, sync.ps1, should be located in your Obsidian vault folder.
|
||||
|
||||
## Understanding the PowerShell Script
|
||||
|
||||
The provided PowerShell script, sync.ps1, is the heart of our synchronization task. It automates the process of committing changes in your Obsidian vault's Git repository and pushing them to your remote repository (e.g., GitHub or GitLab). Here's a brief overview of the script:
|
||||
|
||||
```ps1
|
||||
# Define the folder path
|
||||
$FolderPath = "C:\path\to\obsidian-vault"
|
||||
|
||||
# Change directory to the repository folder
|
||||
Set-Location -Path $FolderPath
|
||||
|
||||
# Check if the working tree is clean
|
||||
$IsClean = (git diff-index --quiet HEAD --) -or (git diff-files --quiet)
|
||||
|
||||
if ($IsClean) {
|
||||
Write-Host "Working tree is clean. Skipping commit and pushing changes."
|
||||
git push
|
||||
} else {
|
||||
# Get the current date in the desired format (Day - Date)
|
||||
$CommitMessage = "$(Get-Date -Format 'dddd - yyyy-MM-dd HH:mm:ss')"
|
||||
|
||||
# Commit the changes
|
||||
git add .
|
||||
git commit -m $CommitMessage
|
||||
|
||||
# Push the changes
|
||||
git push
|
||||
}
|
||||
```
|
||||
|
||||
This script does the following:
|
||||
|
||||
- Sets the folder path to your Obsidian vault.
|
||||
- Checks if there are any changes to commit. If the vault is clean (no changes), it skips the commit and only pushes changes.
|
||||
- If there are changes, it commits them with a timestamped message and then pushes them to the remote repository.
|
||||
|
||||
## Setting up Windows Task Scheduler
|
||||
|
||||
Now that we have our PowerShell script ready, let's set up a scheduled task using Windows Task Scheduler to automate the synchronization process. Follow these steps:
|
||||
|
||||
1. **Open an Elevated PowerShell Prompt:** To run the necessary commands, open PowerShell as an administrator.
|
||||
|
||||
1. **Define Task Variables:** Execute the following commands to define variables for your task:
|
||||
|
||||
```ps1
|
||||
$ScriptPath = "C:\path\to\obsidian-vault\sync.ps1"
|
||||
$TaskName = "obsidian-sync"
|
||||
$UserAccount = "$env:USERDOMAIN\$env:USERNAME"
|
||||
```
|
||||
|
||||
Replace $ScriptPath with the actual path to your sync.ps1 script, $TaskName with a name for your task.
|
||||
|
||||
1. **Configure Task Trigger:** Set up a trigger for your task. In this example, we'll schedule the task to run daily at 9:00 PM:
|
||||
|
||||
```ps1
|
||||
$Trigger = New-ScheduledTaskTrigger -Daily -At '9:00 PM'
|
||||
```
|
||||
|
||||
You can adjust the schedule according to your preference.
|
||||
|
||||
1. Define Task Principal and Settings: Configure the task's principal (the user account under which the task will run) and settings:
|
||||
|
||||
```ps1
|
||||
$Principal = New-ScheduledTaskPrincipal -UserId $UserAccount -RunLevel Highest
|
||||
$Settings = New-ScheduledTaskSettingsSet -AllowStartIfOnBatteries -RunOnlyIfNetworkAvailable -WakeToRun
|
||||
```
|
||||
|
||||
These settings ensure that the task runs with the necessary privileges and conditions.
|
||||
|
||||
1. **Define Task Action:** Specify the action that the task will perform, which is running the PowerShell script:
|
||||
|
||||
```ps1
|
||||
$Action = New-ScheduledTaskAction -Execute 'PowerShell.exe' -Argument "-ExecutionPolicy Bypass -WindowStyle Hidden -File `"$ScriptPath`""
|
||||
```
|
||||
|
||||
This action runs PowerShell with the provided script.
|
||||
|
||||
1. **Create the Scheduled Task:** Finally, create the scheduled task and register it with Windows Task Scheduler:
|
||||
|
||||
```ps1
|
||||
$Task = New-ScheduledTask -Action $Action -Trigger $Trigger -Principal $Principal -Settings $Settings
|
||||
Register-ScheduledTask -TaskName $TaskName -InputObject $Task
|
||||
```
|
||||
|
||||
The Obsidian synchronization task is now set up and ready to run automatically based on the schedule you defined.
|
||||
|
||||
# Inspiration
|
||||
|
||||
When looking up on how to implement this I found some breakthrough from this [stack overflow](https://stackoverflow.com/questions/7195503/setting-up-a-cron-job-in-windows) post. There are suggestions on how to do this using cron jobs in wsl. They are worth a look at. This article on [powershell](https://learn.microsoft.com/en-us/powershell/module/scheduledtasks/new-scheduledtask?view=windowsserver2022-ps) with windows server was also helpful.
|
||||
|
||||
[^note]: This method is only optimal for desktop sync. To sync across devices obsidian has a paid plan that has some extra features Such as Sync notes across devices, End-to-end encryption, Version history, Priority email support. Consider checking it out at [https://obsidian.md/pricing](https://obsidian.md/pricing)
|
||||
@@ -0,0 +1,89 @@
|
||||
+++
|
||||
title= "Semantic Versioning(SemVer) and Conventional Commits"
|
||||
description = "Adopting best practices in your git and build workflows."
|
||||
date= 2023-01-24T15:34:14.160Z
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags= ["git", "semver","workflow", "conventional commits"]
|
||||
+++
|
||||
|
||||
Adopting best practices in your git and build workflows.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# What is Semver?
|
||||
|
||||
Semantic versioning or just SemVer is a dependency naming guidline that aims to bring some sanity into naming libraries and packages in software development. It is a standard versioning system created by **Tom Preston Werner** (co-founder of Github) that’s used to communicate what changes are in a release.
|
||||
|
||||
An efficient and smooth versioning becomes crucial for efficient software delivery expecially for projects that expose a public API. This saves the developers the chaos that is **dependency hell**.Dependency hell is a colloquial term for the frustration of some software users who have installed software packages which have dependencies on specific versions of other software packages.
|
||||
|
||||
The dependency issue arises when several packages have dependencies on the same shared packages or libraries, but they depend on different and incompatible versions of the shared packages. If the shared package or library can only be installed in a single version, the user may need to address the problem by obtaining newer or older versions of the dependent packages. This, in turn, may break other dependencies and push the problem to another set of packages.
|
||||
|
||||
## Semantic Versioning Specifications
|
||||
|
||||
### Summary
|
||||
|
||||
Semantic versioning is based on three numbers that indicate the versions of the software and the compatibilities.They are `X.Y.Z` corresponding to `Major.Minor.Patch`
|
||||
|
||||
- **Major Version (X):**Introduces major changes to the code and breaking changes toward backward compatibility
|
||||
- **Minor Version (Y):** These code changes don’t introduce breaking changes. This could be adding a new feature that doesn't break changes but are not exactly bug fixes.
|
||||
- **Patches (Z):** Mainly correspond to bug fixes
|
||||
|
||||
### Examples in common packages
|
||||
|
||||
#### React(v18.2.0)
|
||||
|
||||
|
||||
|
||||
- **Major -> 18**
|
||||
- **Minor -> 2**
|
||||
- **Patch -> 0**
|
||||
|
||||
---
|
||||
|
||||
#### Pipx(v1.1.0)
|
||||
|
||||
|
||||
|
||||
- **Major -> 1**
|
||||
- **Minor -> 1**
|
||||
- **Patch -> 0**
|
||||
|
||||
---
|
||||
|
||||
## Start at v0.1.0 or v1.0.0?
|
||||
|
||||
Convention recommends that in the initial development phase the starting version should be 0.1.0 which makes sense since it’s not in production yet.
|
||||
|
||||
The version should only be bumped to 1.0.0 only if it is being used in production and stable.
|
||||
|
||||
If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.
|
||||
|
||||
# Conventional Commits
|
||||
|
||||
Conventional Commits is a convention on top of commit messages that are used to automate version changes. It provides an easy set of rules for creating commit messages and works well with SemVer by describing features, fixes and breaking changes that correspond to SemVer standards.
|
||||
|
||||
## Summary
|
||||
|
||||
The commit message should be structured as follows:
|
||||
|
||||
```
|
||||
<type>[optional scope]: <description>
|
||||
|
||||
[optional body]
|
||||
|
||||
[optional footer(s)]
|
||||
```
|
||||
|
||||
The commit contains the following structural elements, to communicate intent to the consumers of your library:
|
||||
|
||||
1. fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
|
||||
2. feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
|
||||
3. BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
|
||||
4. types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the Angular convention) recommends build:, chore:, ci:, docs:, style:, refactor:, perf:, test:, and others.
|
||||
5. footers other than BREAKING CHANGE: <description> may be provided and follow a convention similar to git trailer format.
|
||||
|
||||
# Resources
|
||||
|
||||
https://semver.org/
|
||||
https://www.conventionalcommits.org/en/v1.0.0/
|
||||
@@ -0,0 +1,122 @@
|
||||
+++
|
||||
title= "Subresource Integrity"
|
||||
description = "Understanding Subresource Integrity"
|
||||
date= 2023-04-29
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags= ["subresource integrity", "csp", "cors"]
|
||||
+++
|
||||
|
||||
Understanding Subresource Integrity
|
||||
|
||||
<!-- more -->
|
||||
|
||||
In my junior year while I was learning HTML and CSS I got to use the Bootstrap css library.The easiest way to obtain the files was from a Content Delivery Network(CDN). I could see links such as:
|
||||
|
||||
```html
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
```
|
||||
|
||||
I didn't bother with the `integrity` attribute of the link(guess I wasn't curios enough). The integrity attribute has a cryptographic hash value that is important in CDNs and its called the Subresource Integrity.
|
||||
|
||||
Subresource Integrity (SRI) is a security feature in web browsers that helps prevent malicious or compromised scripts from being loaded and executed on a website.a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.
|
||||
|
||||
When a resource, such as a script or stylesheet, fails the SRI check, the browser will block the resource from being loaded and displayed on the website.
|
||||
|
||||
# How Subresource Integrity Helps
|
||||
|
||||
Subresource Integrity (SRI) is a security feature that helps protect against certain types of attacks, such as those that involve malicious modifications to third-party resources that a website loads.
|
||||
|
||||
SRI works by allowing a website to specify a cryptographic hash for a particular external resource (such as a JavaScript file or a CSS stylesheet) that it expects to load. When a user's browser fetches that resource, it checks the hash against the actual contents of the resource. If the hash doesn't match, the browser will refuse to load the resource, indicating that it may have been tampered with.
|
||||
|
||||
This can help prevent a variety of attacks, such as those involving a compromised content delivery network (CDN) or a man-in-the-middle attacker who intercepts and modifies network traffic. By using SRI, a website can help ensure that it is loading only the resources it expects, and that those resources have not been tampered with in transit.
|
||||
|
||||
# Using it
|
||||
|
||||
Using Subresource Integrity (SRI) involves a few steps, but it is relatively straightforward.An integrity value begins with at least one string, with each string including a prefix indicating a particular hash algorithm (currently the allowed prefixes are sha256, sha384, and sha512), followed by a dash, and ending with the actual base64-encoded hash.
|
||||
|
||||
- Generate a cryptographic hash(a base64-encoded cryptographic hash) of the external resource you want to load on your website. This can be done using a hash function such as SHA-256.
|
||||
|
||||
- Add the hash as an attribute to the tag that loads the external resource. For example, for a JavaScript file, you would add the integrity attribute to the `<script>` tag like this:
|
||||
|
||||
```html
|
||||
<script
|
||||
src="https://example.com/example.js"
|
||||
integrity="sha256-ABC123XYZ456"
|
||||
></script>
|
||||
```
|
||||
|
||||
> An integrity value may contain multiple hashes separated by whitespace. A resource will be loaded if it matches one of those hashes.
|
||||
|
||||
Make sure the hash you've generated matches the actual contents of the external resource.
|
||||
|
||||
Test your website to ensure that the external resource is loading correctly and that the SRI feature is working as intended.
|
||||
|
||||
# Tools for generating SRI hashes
|
||||
|
||||
You can use a tool such as the [SRI Hash Generator](https://www.srihash.org/) to generate the hash and check it against the file's contents.
|
||||
|
||||
You can generate SRI hashes from the command-line with openssl using a command invocation such as:
|
||||
|
||||
```sh
|
||||
cat FILENAME.py | openssl dgst -sha384 -binary | openssl base64 -A
|
||||
```
|
||||
|
||||
or with shasum using a command invocation such as:
|
||||
|
||||
```sh
|
||||
shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64
|
||||
```
|
||||
|
||||
> The pipe-through xxd step takes the hexadecimal output from shasum and converts it to binary.
|
||||
> The pipe-through awk step is necessary because shasum will pass the hashed filename in its output to xxd. That can have disastrous consequences if the filename happens to have valid hex characters in it — because xxd will also decode that and pass it to base64.
|
||||
|
||||
In a Windows environment, you can create a tool for generating SRI hashes with the following code:
|
||||
|
||||
```bat
|
||||
@echo off
|
||||
set bits=384
|
||||
openssl dgst -sha%bits% -binary %1% | openssl base64 -A > tmp
|
||||
set /p a= < tmp
|
||||
del tmp
|
||||
echo sha%bits%-%a%
|
||||
pause
|
||||
```
|
||||
|
||||
To use that code:
|
||||
|
||||
1. Save that code in a file named sri-hash.bat in the Windows SendTo folder in your environment (for example, C:\Users\USER\AppData\Roaming\Microsoft\Windows\SendTo).
|
||||
1. Right-click a file in the File Explorer, select Send to…, and then select sri-hash. You will see the integrity value in a command box.
|
||||
1. Select the integrity value and right-click to copy it to the Clipboard.
|
||||
1. Press any key to dismiss the command box
|
||||
|
||||
# Cross-Origin Resource Sharing and Subresource Integrity
|
||||
|
||||
When verifying the subresource integrity of a resource that originates from a different domain than the document it's embedded in, web browsers will check the resource using Cross-Origin Resource Sharing (CORS) to ensure that the domain serving the resource allows it to be shared with the requesting domain.
|
||||
As a result, the resource must be served with an Access-Control-Allow-Origin header that permits the resource to be shared with the requesting domain. For example, the header could include a wildcard (\*) to allow any domain to access the resource.
|
||||
|
||||
```
|
||||
Access-Control-Allow-Origin: *
|
||||
```
|
||||
|
||||
# How browsers handle Subresource Integrity
|
||||
|
||||
Web browsers employ several mechanisms to handle Subresource Integrity (SRI). When a **script** or **link** element with an integrity attribute is encountered by the browser, it compares the script or stylesheet to the expected hash given in the integrity value before executing the script or applying the stylesheet.
|
||||
|
||||
For resources served from a different domain than the document in which it's embedded, the browser also checks the resource using Cross-Origin Resource Sharing (CORS) to ensure that the origin serving the resource allows it to be shared with the requesting domain. This additional check is important for preventing unauthorized access to sensitive resources.
|
||||
|
||||
If the script or stylesheet fails to match its associated integrity value, the browser will refuse to execute the script or apply the stylesheet and return a network error, indicating that the fetching of that script or stylesheet failed. This behavior ensures that the resource being loaded is trustworthy and helps to protect users from potential security threats.
|
||||
|
||||
# References
|
||||
|
||||
- [https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
|
||||
- [https://www.srihash.org/](https://www.srihash.org/)
|
||||
- [https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
|
||||
- [https://html.spec.whatwg.org/multipage/semantics.html#attr-script-integrity](https://html.spec.whatwg.org/multipage/semantics.html#attr-script-integrity)
|
||||
- [https://html.spec.whatwg.org/multipage/semantics.html#attr-link-integrity](https://html.spec.whatwg.org/multipage/semantics.html#attr-link-integrity)
|
||||
- [https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute](https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute)
|
||||
@@ -0,0 +1,67 @@
|
||||
+++
|
||||
title = "What say you?"
|
||||
description = "Adding a comment system by utterances"
|
||||
author = "Ian Andwati"
|
||||
date = 2023-08-24T15:34:14.160Z
|
||||
[taxonomies]
|
||||
tags = ["blog", "utterances"]
|
||||
+++
|
||||
|
||||
Free speech enhanced
|
||||
|
||||
<!-- more -->
|
||||
|
||||
There is no point in writing online if your readers cannot provide feedback for your writings. You might as well be shouting at a void. My ideal commenting system has to be free, open source and should not be a hassle to setup. Luckily, [utterances 🔮](https://github.com/utterance/utterances) checks all of these conditions
|
||||
|
||||
It is a lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more! The notable features are:
|
||||
|
||||
- Open source. 🙌
|
||||
- No tracking, no ads, always free. 📡🚫
|
||||
- No lock-in. All data stored in GitHub issues. 🔓
|
||||
- Styled with Primer, the css toolkit that powers GitHub. 💅
|
||||
- Dark theme. 🌘
|
||||
- Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲
|
||||
|
||||
## How it works
|
||||
|
||||
When Utterances loads, the GitHub [issue search API](https://developer.github.com/v3/search/#search-issues) is used to find the issue associated with the page based on url, pathname or title. If it cannot find an issue that matches the page, [utterances-bot](https://github.com/utterances-bot) will automatically create an issue the first time someone comments.
|
||||
|
||||
To comment, users must authorize the utterances app to post on their behalf using the GitHub [OAuth flow](https://developer.github.com/v3/oauth/#web-application-flow). Alternatively, users can comment on the GitHub issue directly.
|
||||
|
||||
# Setting up Utterances
|
||||
|
||||
### Repository
|
||||
|
||||
Choose the repository utterances will connect to.
|
||||
|
||||
Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.
|
||||
Make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.
|
||||
If your repo is a fork, navigate to its settings tab and confirm the issues feature is turned on.
|
||||
|
||||
```
|
||||
repo:
|
||||
username/repo
|
||||
```
|
||||
|
||||
A public GitHub repository. This is where the blog post issues and issue-comments will be posted.
|
||||
|
||||
### Theme
|
||||
|
||||
Choose an Utterances theme that matches your blog.
|
||||
|
||||
### Enable Utterances
|
||||
|
||||
Add the following script tag to your blog's template. Position it where you want the comments to appear. Customize the layout using the .utterances and .utterances-frame selectors.
|
||||
|
||||
```js
|
||||
<script
|
||||
src="https://utteranc.es/client.js"
|
||||
repo="[ENTER REPO HERE]"
|
||||
issue-term="title"
|
||||
theme="gruvbox-dark"
|
||||
crossorigin="anonymous"
|
||||
async
|
||||
></script>
|
||||
```
|
||||
|
||||
The complete documentation can be found at [https://utteranc.es](https://utteranc.es/)
|
||||
@@ -0,0 +1,19 @@
|
||||
+++
|
||||
title = "Contact"
|
||||
description = "Let's get in touch."
|
||||
+++
|
||||
# Find me on:
|
||||
|
||||
- Github : [https://github.com/andwati](https://github.com/andwati)
|
||||
|
||||
|
||||
|
||||
[Stack Overflow]( https://stackoverflow.com/users/12246264/ian)
|
||||
|
||||
|
||||
|
||||
- Twitter : [https://twitter.com/andwati_]( https://twitter.com/andwati_)
|
||||
|
||||
- Email: [[email protected]](mailto:[email protected])
|
||||
|
||||
- LinkedIn : [https://linkedin.com/in/andwati](https://linkedin.com/in/andwati)
|
||||
@@ -0,0 +1,7 @@
|
||||
+++
|
||||
render = false
|
||||
insert_anchor_links = "left"
|
||||
|
||||
[extra]
|
||||
hide_from_feed = true
|
||||
+++
|
||||
@@ -0,0 +1,8 @@
|
||||
+++
|
||||
title = "Posts"
|
||||
template = "posts.html"
|
||||
page_template = "post.html"
|
||||
sort_by = "date"
|
||||
insert_anchor_links = "right"
|
||||
paginate_by= 5
|
||||
+++
|
||||
@@ -0,0 +1,58 @@
|
||||
+++
|
||||
title = "A Fresh Coat Of Paint"
|
||||
description = "Migrating to Zola"
|
||||
author = "Ian Andwati"
|
||||
date = 2023-08-24
|
||||
[taxonomies]
|
||||
tags = ["zola", "blog", "tera", "rust"]
|
||||
+++
|
||||
|
||||
Using Zola as my preferred static site generator
|
||||
|
||||
<!-- more -->
|
||||
After using Hugo for over eight months I got tired of it and looked for other alternatives. That's when I stumbled upon Zola. Zola is a static site generator (SSG), similar to [Hugo](https://gohugo.io/), [Pelican](https://blog.getpelican.com/), and [Jekyll](https://jekyllrb.com/).
|
||||
|
||||
It is written in Rust and uses the Tera template engine, similar to Jinja2, Django templates, Liquid, and Twig. SSGs use dynamic templates to transform content into static HTML pages. Static sites are thus very fast and require no databases, making them easy to host.
|
||||
|
||||
My previous Hugo site used a theme because I wasn't really ready to learn Go's template engine. I'm already familiar with Python Django and its template system so using Tera wasn't hard because it's similar to jinja2 and the Django template syntax.
|
||||
|
||||
Content is written in [CommonMark](https://commonmark.org/), a strongly defined, highly compatible specification of [Markdown](https://www.markdownguide.org/). Zola uses [pulldown-cmark](https://github.com/raphlinus/pulldown-cmark#pulldown-cmark) to parse markdown files. The goal of this library is 100% compliance with the CommonMark spec. It adds a few additional features such as parsing footnotes, Github-flavored tables, Github-flavored task lists, and strikethrough.
|
||||
|
||||
Zola comes with built-in syntax highlighting, but you must first enable it in the configuration file.
|
||||
|
||||
Zola is very minimalistic, it is installed only as a single binary, with no extra dependencies needed. It is configured in `toml` and you only use what is needed. For example here is the configuration for this site `config.toml`:
|
||||
|
||||
```toml
|
||||
title = "Ian Andwati"
|
||||
description = "Ian Andwati's personal website"
|
||||
base_url = "https://andwati.github.io"
|
||||
|
||||
generate_categories_pages = false
|
||||
generate_tags_pages = false
|
||||
generate_feed = true
|
||||
feed_filename = "rss.xml"
|
||||
minify_html = false
|
||||
taxonomies = [{ name = 'tags', feed = false }]
|
||||
compile_sass = true
|
||||
|
||||
[markdown]
|
||||
highlight_code = true
|
||||
highlight_theme = "gruvbox-dark"
|
||||
|
||||
[link_checker]
|
||||
|
||||
[extra]
|
||||
author = "Ian Andwati"
|
||||
```
|
||||
|
||||
## Inspiration
|
||||
|
||||
The motivation to use Zola also came from my decision to move from independently developed themes. I decided to write the HTML and CSS myself and endeavor to maintain the site individually. The base CSS is borrowed from [Reilly Tucker Siemens](https://tuckersiemens.com/) who had created a nice gruvbox palette for his site.
|
||||
|
||||
I improved on it by adding an archive page, pagination, a comment system, and Google Analytics (more of these in later posts). I also implemented article read time and word count.
|
||||
|
||||
## What next
|
||||
|
||||
The site is a work in progress and is far from polished. I plan on implementing a newsletter to notify readers of new posts. The site is primarily a dark theme, in the future I'll also add theme toggling and maybe different palettes.
|
||||
|
||||
You can subscribe to the site's RSS feed at [https://andwati.github.io/rss.xml](https://andwati.github.io/rss.xml).
|
||||
@@ -0,0 +1,17 @@
|
||||
+++
|
||||
title = "File over app"
|
||||
description = "Take control of your artifacts"
|
||||
author = "Ian Andwati"
|
||||
draft = true
|
||||
date = 2023-12-18
|
||||
[taxonomies]
|
||||
tags = ["obsidian", "entropy", "notes"]
|
||||
+++
|
||||
|
||||
Take control of your artifacts
|
||||
|
||||
<!-- more -->
|
||||
|
||||
In my endless endevours to find the perfect note taking app led me to obsidian, a note taking software that uses markdown files as the file format. All software is ephemereal in nature and yoour artifacts need to survive the decline of your favorite app. The files you create should be available to you and shouldt rrequire specialized software to access.
|
||||
|
||||
Your data shouldt be locked behind a paywall or an authentication system that is not under your control.
|
||||
@@ -0,0 +1,41 @@
|
||||
+++
|
||||
title = "Django Secret Key Tutorial"
|
||||
description = "Managing secrets"
|
||||
author = "Ian Andwati"
|
||||
date = 2022-11-11T15:34:14.160Z
|
||||
[taxonomies]
|
||||
tags = ["tutorial", "django", "python", ".env"]
|
||||
+++
|
||||
|
||||
Managing the Django SECRET_KEY variable.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
The Django `SECRET_KEY` variable is very crucial to your Django application. The secret key must be a large random value and it must be kept secret. Leaking this value to unauthorized people could lead to a security breach. The SECRET_KEY is used in Django for cryptographic signing. It is used to generate tokens and hashes, they can be recreated using this variable. If it is not configured Django throws a `django.core.exceptions.ImproperlyConfigured: The SECRET_KEY setting must not be empty` error
|
||||
|
||||
# Using Environment Variables
|
||||
|
||||
The secret key should not be committed to version control. It is best practice to store the value in a .env file which is added to the .gitignore file to un-track its changes. The values can be loaded programmatically into your settings.py file.
|
||||
|
||||
# Generating A New Secret Key
|
||||
|
||||
This solution is using python's secrets lib on the back
|
||||
|
||||
```python
|
||||
from django.core.management.utils import get_random_secret_key
|
||||
# print new random secret key
|
||||
print(get_random_secret_key())
|
||||
```
|
||||
|
||||
This code can be run in the terminal as a command:
|
||||
|
||||
```python
|
||||
python -c 'from django.core.management.utils import get_random_secret_key; \
|
||||
print(get_random_secret_key())'
|
||||
```
|
||||
|
||||
Alternatively, If you are using python 3.6+ then you can use the `secrets.token_hex(\[nbytes=None])` function:
|
||||
|
||||
```python
|
||||
python3 -c 'import secrets; print(secrets.token_hex(100))'
|
||||
```
|
||||
@@ -0,0 +1,36 @@
|
||||
+++
|
||||
title = "Hello World"
|
||||
description = "Hello world"
|
||||
date = 2022-11-04
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags = ["hugo", "blog", "go"]
|
||||
+++
|
||||
|
||||
How it begins
|
||||
|
||||
<!-- more -->
|
||||
|
||||
In this post-web2.0 age, people seem to blog less and less, and blogs seem to be dying slowly. People are separated in different Apps where the content is not searchable by search engines.
|
||||
|
||||
However, I still prefer to write using a blog.
|
||||
|
||||
# Why this?
|
||||
|
||||
The best way to learn something is to teach others the knowledge that you have gained. Regurgitating that information will solidify it more firmly in your mind.
|
||||
|
||||
# What I write?
|
||||
|
||||
Mostly random stuff and a few tutorials. I'll see where this goes.Although some of the blog posts may only be helpful to myself, but who knows, I hope they will be helpful to someone else in some day.
|
||||
|
||||
# Static blog generator
|
||||
|
||||
I use hugo as a static site generator.After trying a couple of blogging platforms and trying to build a few from scratch I decided to
|
||||
throw in the towel and opt in for a ready made solution, no need reinventing the wheel.
|
||||
|
||||
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.Hugo provides a robust theming system that is easy to implement but capable of producing even the most complicated websites.Hugo's Go-based templates provide just the right amount of logic to build anything from the simple to complex. For this site I decided to go with the [even theme](https://github.com/olOwOlo/hugo-theme-even). The commenting system is implemented using [Utterances](https://utteranc.es/)
|
||||
|
||||
# Blog site hosting
|
||||
|
||||
The site is hosted on github pages as evident by the \*.github.io domain name.I prefer this mainly because it is free and I don't have
|
||||
to switch to a different hosting provider.
|
||||
@@ -0,0 +1,168 @@
|
||||
+++
|
||||
title ="Install PostgreSQL 15 on Arch | Manjaro | Garuda Linux"
|
||||
description = "Installing postgresql"
|
||||
date = 2023-02-16T15:34:14.160Z
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags = ["postgresql", "archlinux", "manjaro", "garuda", "linux"]
|
||||
+++
|
||||
|
||||
Getting PostgreSQL up and running on Arch Linux-based distros
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# Overview
|
||||
|
||||
**PostgreSQL** is a powerful open-source relational database management system (RDBMS) that allows you to store and manage large amounts of data. It was first released in 1996 and has become one of the most popular RDBMSs in the world.
|
||||
|
||||
PostgreSQL is designed to handle high levels of **concurrency**, providing features such as **MVCC (multi-version concurrency control)** that allow multiple users to access the same data simultaneously without conflicts. It is also **highly extensible**, with a large number of third-party extensions and libraries available that can be used to add functionality to the core database.
|
||||
|
||||
Some of the key features of PostgreSQL include support for **complex SQL queries**, **advanced indexing** and **query optimization**, **transactional integrity**, and support for a **wide range of programming languages** and development frameworks.PostgreSQL is used by a wide range of organizations, from small businesses to large enterprises, and is particularly popular in industries such as finance, healthcare, and e-commerce, where high levels of data security and reliability are critical.
|
||||
|
||||
In this tutorial, we’ll look at how to install PostgreSQL 15 on Arch Linux, Manjaro, Garuda Linux, or any other Arch-based distro out there.
|
||||
|
||||
# PostgreSQL use cases
|
||||
|
||||
- **E-commerce websites:** PostgreSQL is a popular choice for e-commerce websites because it can handle large amounts of data and supports complex queries. It is used for product catalogs, order management, customer data, and more.
|
||||
- **Financial institutions:** PostgreSQL is used in financial institutions to store and manage transactional data, such as stock trades, bank transfers, and credit card transactions. It is highly secure and provides features such as transactional integrity and data encryption.
|
||||
- **Healthcare industry:** PostgreSQL is used in the healthcare industry to store patient data, such as medical records and diagnostic test results. It is also used for research purposes, where large amounts of data need to be stored and analyzed.
|
||||
- **Government agencies:** PostgreSQL is used by government agencies for a variety of purposes, including managing large datasets, storing and analyzing census data, and managing public health information.
|
||||
- **Mobile and web applications:** PostgreSQL is often used as a back-end database for mobile and web applications. It provides reliable data storage and retrieval and supports a wide range of programming languages and development frameworks.
|
||||
- **Geospatial applications:** PostgreSQL has built-in support for geospatial data and is often used for applications that require location-based data, such as mapping and GPS tracking.
|
||||
|
||||
# Why PostgreSQL?
|
||||
|
||||
Postgres offers a lot of advantages that make it an excellent choice for highly transactional environments regardless of application size and data volume. Its rich feature set and flexibility make it a popular choice for a wide range of applications and industries. Some of the top features are:
|
||||
|
||||
- **ACID Compliance:** PostgreSQL is ACID (Atomicity, Consistency, Isolation, Durability) compliant, which means it provides high reliability, consistency, and data integrity, even in the presence of hardware failures, power outages, and other system errors.
|
||||
- **Extensibility:** PostgreSQL is highly extensible, allowing developers to add new data types, operators, and functions using its extension framework. This makes it easy to customize PostgreSQL to meet the specific needs of your application.
|
||||
- **Concurrency:** PostgreSQL provides a high level of concurrency, allowing multiple users to access the same data at the same time without conflicts. It uses a Multi-Version Concurrency Control (MVCC) model that enables fast and reliable access to data, even under heavy load.
|
||||
- **Full-text search:** PostgreSQL provides a powerful full-text search engine that supports advanced search capabilities, such as stemming, ranking, and relevance matching.
|
||||
- **Advanced indexing:** PostgreSQL provides a wide range of indexing options, including B-tree, Hash, GiST, SP-GiST, GIN, and BRIN. These indexing options allow developers to optimize database performance for their specific use cases.
|
||||
- **JSON support:** PostgreSQL provides native support for storing and querying JSON data, making it easy to work with modern web and mobile applications that rely on JSON for data exchange.
|
||||
- **Security:** PostgreSQL provides a high level of security, with features such as SSL support, client authentication, and role-based access control. It also provides encryption for both data at rest and data in transit.
|
||||
- **Scalability:** PostgreSQL is designed to scale horizontally and vertically, allowing you to add more nodes to a cluster or increase the resources of a single node to handle more load.
|
||||
|
||||
# Install PostgreSQL on Arch | Manjaro | Garuda Linux
|
||||
|
||||
Now with all that fluff out of the way, let's get to business. The steps have been tested on Arch Linux with the KDE desktop.
|
||||
|
||||
> **Note:** Commands that should be run as the *postgres* user are prefixed by `[postgres]$` in this article.
|
||||
|
||||
## Step 1: Installing the PostgreSQL Package
|
||||
|
||||
```sh
|
||||
$ sudo pacman -Syu postgresql
|
||||
```
|
||||
|
||||
This command will update the package database and update all packages on the system then install the PostgreSQL package from your distribution mirrors. Never install a package without updating the system first. On a rolling release, this can lead to an unbootable system. Installing the package will also create a system user called *postgres*. You can now switch to the *postgres* user using a privilege elevation program.
|
||||
|
||||
You can switch to the PostgreSQL user by executing the following command:
|
||||
|
||||
- If you have sudo and are in sudoers
|
||||
|
||||
```sh
|
||||
$ sudo -iu postgres
|
||||
```
|
||||
|
||||
- Otherwise using su:
|
||||
|
||||
```sh
|
||||
$ su
|
||||
# su -l postgres
|
||||
```
|
||||
|
||||
## Step 2: Initial Configuration
|
||||
|
||||
Before PostgreSQL can function correctly, the database cluster must be initialized.
|
||||
|
||||
### 2.1 We can confirm the installed PostgreSQL version by running:
|
||||
|
||||
```sh
|
||||
$ postgres --version ─╯
|
||||
postgres (PostgreSQL) 15.1
|
||||
```
|
||||
|
||||
### 2.2 Set applicable entries in **/etc/locale.gen**
|
||||
|
||||
```sh
|
||||
$ echo "en_US.UTF-8 UTF-8" | sudo tee /etc/locale.gen
|
||||
```
|
||||
|
||||
### 2.3 Then run **\*\*locale-gen\*\*** to generate locale settings
|
||||
|
||||
```sh
|
||||
$ sudo locale-gen
|
||||
Generating locales...
|
||||
en_US.UTF-8... done
|
||||
Generation complete.
|
||||
```
|
||||
|
||||
### 2.4 Initialize Postgres Data Directory
|
||||
|
||||
You must first log in as the **postgres** user using the following command before you can initialize PostgreSQL’s data directory:
|
||||
|
||||
```sh
|
||||
sudo su - postgres
|
||||
```
|
||||
|
||||
### 2.5 With the following command, you can now initialize PostgreSQL’s data directory:
|
||||
|
||||
```sh
|
||||
[postgres]$ initdb -D /var/lib/postgres/data
|
||||
```
|
||||
|
||||
### Step 3: PostgreSQL Service Management
|
||||
|
||||
### 3.1 Check PostgreSQL status with the following command:
|
||||
|
||||
```sh
|
||||
$ systemctl status postgresql ─╯
|
||||
postgresql.service - PostgreSQL database server
|
||||
Loaded: loaded (/usr/lib/systemd/system/postgresql.service; disabled; preset: disabled)
|
||||
Active: inactive (dead)
|
||||
```
|
||||
|
||||
### 3.2 Start the PostgreSQL service by running the following command:
|
||||
|
||||
```sh
|
||||
sudo systemctl start postgresql
|
||||
```
|
||||
|
||||
### 3.3 Enable the PostgreSQL service to start automatically at boot by running the following command:
|
||||
|
||||
```sh
|
||||
$ sudo systemctl enable postgresql
|
||||
```
|
||||
|
||||
### 3.4 Verify that PostgreSQL is running by running the following command:
|
||||
|
||||
```sh
|
||||
$ sudo systemctl status postgresql ─╯
|
||||
● postgresql.service - PostgreSQL database server
|
||||
Loaded: loaded (/usr/lib/systemd/system/postgresql.service; enabled; preset: disabled)
|
||||
Active: active (running) since Thu 2023-02-16 22:52:43 EAT; 20s ago
|
||||
Main PID: 26106 (postgres)
|
||||
Tasks: 6 (limit: 8790)
|
||||
Memory: 16.9M
|
||||
CPU: 113ms
|
||||
CGroup: /system.slice/postgresql.service
|
||||
├─26106 /usr/bin/postgres -D /var/lib/postgres/data
|
||||
├─26107 "postgres: checkpointer "
|
||||
├─26108 "postgres: background writer "
|
||||
├─26110 "postgres: walwriter "
|
||||
├─26111 "postgres: autovacuum launcher "
|
||||
└─26112 "postgres: logical replication launcher "
|
||||
```
|
||||
|
||||
# Resources
|
||||
|
||||
- [Arch Linux Wiki](https://wiki.archlinux.org/title/PostgreSQL)
|
||||
- [Wikipedia](https://en.wikipedia.org/wiki/PostgreSQL)
|
||||
- [PostgreSQL Documentation](https://www.postgresql.org/docs/)
|
||||
|
||||
# Conclusion
|
||||
|
||||
Installing PostgreSQL on Arch Linux-based distribution is a straightforward process that can be completed in just a few steps. By following the steps outlined above, you can install, configure, and start the PostgreSQL database server on your Arch Linux system. Once installed, you can use PostgreSQL to store, manage, and query data for a wide range of applications and use cases. With its advanced features and high level of extensibility, PostgreSQL is a popular choice for developers and businesses seeking a robust and reliable database management system.
|
||||
|
||||
You can connect to the PostgreSQL server using the psql command-line client or a graphical tool such as pgAdmin.
|
||||
@@ -0,0 +1,159 @@
|
||||
+++
|
||||
title = "Integrating Netlify CMS"
|
||||
description = "Integrating netlify cms"
|
||||
date = 2022-11-24T15:34:14.160Z
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags = ["blog", "hugo", "netlify","netlify-cms","github"]
|
||||
+++
|
||||
|
||||
Migrating to a better content management system through Netlify CMS
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# Heavy Lifting
|
||||
|
||||
I use [Visual Studio Code](https://code.visualstudio.com/) to manually edit the blog post content on this website. This is quite a hassle because I have to deal with
|
||||
markdown files. There are many problems with this approach and several gotchas. I have to work on a local site repository to be able to edit the content. My GitHub credentials are also required to push my local changes to my remote repository on GitHub so that it can trigger the build process and publish the site.
|
||||
|
||||
This process has helped me a lot to master markdown syntax and some practice on my git skills. It’s fun to update the website content following these steps but sometimes it can be frustrating. At those times, I really miss the user interface of content management systems. After careful consideration, I moved on with Netlify CMS. At its core, Netlify CMS is an open-source React app that acts as a wrapper for the Git workflow, using the GitHub, GitLab, or Bitbucket API. This provides many advantages, including:
|
||||
|
||||
- **Fast, web-based UI:** With rich-text editing, real-time preview, and drag-and-drop media uploads.
|
||||
- **Platform agnostic:** Works with most static site generators.
|
||||
- **Easy installation:** Add two files to your site and hook up the backend by including those files in your build process or linking to our Content Delivery Network (CDN).
|
||||
- **Modern authentication:** Using GitHub, GitLab, or Bitbucket and JSON web tokens.
|
||||
- **Flexible content types:** Specify an unlimited number of content types with custom fields.
|
||||
- **Fully extensible:** Create custom-styled previews, UI widgets, and editor plugins.
|
||||
|
||||
# Redeploying to Netlify
|
||||
|
||||
I decided to move the site from GitHub pages to Netlify hosting to take full control of the platform. Hugo sites on Netlify can benefit from automatic framework detection and control over Hugo version selection. When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Hugo, Netlify provides a suggested build command and publish directory: Hugo and public. The build process is straight forward but you can add custom options to your `netlify.toml` file, here are my options:
|
||||
|
||||
```toml
|
||||
[build]
|
||||
command = "hugo"
|
||||
publish = "public"
|
||||
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.105.0"
|
||||
```
|
||||
|
||||
# Setting up Netlify CMS
|
||||
|
||||
You can adapt Netlify CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub, GitLab, or Bitbucket. You can Netlify CMS to a site that's built with a common static site generator, like Jekyll, Hugo, Hexo, or Gatsby. The official documentation for installing on your website can be found at the [official site](https://www.netlifycms.org/docs/intro/)
|
||||
|
||||
## Steps
|
||||
|
||||
**Step 1**
|
||||
|
||||
Create a static admin folder containing all Netlify CMS files, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. For Hugo, it is the `static` folder.
|
||||
|
||||
`/static/admin`
|
||||
|
||||
**Step 2**
|
||||
|
||||
Inside the admin folder, create two files: `index.html` and `config.yml`. The first file `admin/index.html` is an entry point to Netlify CMS. You will access the CMS interface from `yourwebsite.com/admin` when everything is ready.
|
||||
|
||||
**Step 3**
|
||||
|
||||
The first file, `admin/index.html`, is the entry point for the Netlify CMS admin interface. Paste this code in index.html and save. This HTML starter page will load the Netlify CMS Javascript file:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Content Manager</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Include the script that builds the page and powers Netlify CMS -->
|
||||
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Step 4**
|
||||
|
||||
Now let’s move to the configuration section. These are the configurations that go into the `config.yml` file. This process is different for every site. I followed the guidelines on the website and made minor adjustments. It worked on my website. The configuration options are available at the [docs](<https://www.netlifycms.org/docs/add-to-your-site/#:~:text=%2C%20MyTemplate)-,Configuration,-Configuration%20is%20different>). This is how I configured my config.yml file:
|
||||
|
||||
```yaml
|
||||
backend:
|
||||
name: git-gateway
|
||||
branch: netlify-cms # Branch to update (optional; defaults to master)
|
||||
|
||||
# This line should *not* be indented
|
||||
publish_mode: editorial_workflow
|
||||
|
||||
media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
|
||||
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
|
||||
|
||||
collections:
|
||||
- name: "post" # Used in routes, e.g., /admin/collections/blog
|
||||
label: "posts" # Used in the UI
|
||||
folder: "content/post" # The path to the folder where the documents are stored
|
||||
create: true # Allow users to create new documents in this collection
|
||||
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
|
||||
fields: # The fields for each document, usually in front matter
|
||||
- { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
|
||||
- { label: "Title", name: "title", widget: "string" }
|
||||
- { label: "Draft", name: "draft", widget: "boolean", default: true }
|
||||
- { label: "Publish Date", name: "date", widget: "datetime" }
|
||||
- { label: "Last Modified", name: "lastmod", widget: "datetime" }
|
||||
- { label: "Body", name: "body", widget: "markdown" }
|
||||
- { label: "Keywords", name: "keywords", widget: "list" }
|
||||
- { label: "Tags", name: "tags", widget: "list" }
|
||||
- { label: "Categories", name: "categories", widget: "list" }
|
||||
- { label: "Comments", name: "comment", widget: "boolean", default: true }
|
||||
- {
|
||||
label: "Table of Contents",
|
||||
name: "toc",
|
||||
widget: "boolean",
|
||||
default: true,
|
||||
}
|
||||
```
|
||||
|
||||
**Step 5**
|
||||
|
||||
**Authentication**
|
||||
|
||||
Now that the Netlify CMS files are in place and configured, all that's left is to enable authentication.
|
||||
Netlify offers a built-in authentication service called Identity. In order to use it, connect your site repo with Netlify. Netlify has published a general [Step-by-Step Guide](https://www.netlify.com/blog/2016/10/27/a-step-by-step-guide-deploying-a-static-site-or-single-page-app/) for this, along with detailed guides for many popular static site generators
|
||||
|
||||
Let’s first enable Netlify Identity and Git Gateway:
|
||||
|
||||
- On your Netlify account, go to **Settings > Identity** and select **Enable Identity Service**
|
||||
- Under **Registration preferences**, select **Invite Only**.
|
||||
- If you want to enable login from external providers such as Google and GitHub, check the boxes you want to use, under **External Providers** section. I find it practical to log in with GitHub, so I added it.
|
||||
- Go to **Services > Git Gateway**, and click **Enable Git Gateway**. This authenticates with your Git Host and generates and API token.
|
||||
- Everything is almost set up. What we need now is a front-end interface to connect. We will add the following script in two places, to include the **Netlify Identity Widget** on our website:
|
||||
|
||||
```html
|
||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
||||
```
|
||||
|
||||
We will use Netlify's [script injection](https://docs.netlify.com/site-deploys/post-processing/snippet-injection/) feature to add the script to our site. To use snippet injection, go to **Site Settings > Build & Deploy > Post processing**. Find the Snippet Injection section and select **Add Snippet**. Write a name for the script in the first box (e.g. Netlify Identity Widget). Paste the script inside the second box. Choose Insert before the `</body>` option and save.
|
||||
|
||||
Lastly, we will add the following script before the closing `<body>` tag of our website’s main index page. This script allows the user to redirect back to the `/admin/` path after completing the login with the Netlify Identity Widget:
|
||||
|
||||
```html
|
||||
<script>
|
||||
if (window.netlifyIdentity) {
|
||||
window.netlifyIdentity.on("init", (user) => {
|
||||
if (!user) {
|
||||
window.netlifyIdentity.on("login", () => {
|
||||
document.location.href = "/admin/";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
**Step 5**
|
||||
|
||||
Now we’re all set. Since we set our registration preferences to **“Invite Only”**, we need to invite ourselves as site users. To do this, select the Identity tab from the Netlify site dashboard and select the Invite Users button. Add your email address and send an invitation. You will receive an email. In your email, click **“accept the invitation”**. You will be directed to your website admin sign-up panel. Choose a password. Now you are ready to log in to Netlify CMS.
|
||||
|
||||
# Setting up a custom domain
|
||||
|
||||
I bought a custom domain from [Namecheap](https://namecheap.com), they provide some pretty good deals. After pointing the nameservers for the domain to the Netlify nameservers, voila! everything worked smoothly. For HTTPS support, Netlify enables automatic TLS certificates with Let’s Encrypt.
|
||||
@@ -0,0 +1,120 @@
|
||||
+++
|
||||
title = "Setting up Obsidian sync in Windows"
|
||||
description = "Syncing Obsidian in Windows with Windows Task Scheduler with git"
|
||||
author = "Ian Andwati"
|
||||
date = 2023-10-01
|
||||
[taxonomies]
|
||||
tags = ["obsidian", "git","sync", "windows", "cron", "task scheduler", "powershell"]
|
||||
+++
|
||||
|
||||
Syncing Obsidian in Windows with Windows Task Scheduler and git
|
||||
|
||||
<!-- more -->
|
||||
|
||||
[Obsidian](https://obsidian.md/) is a powerful note-taking and knowledge management tool that has gained a dedicated following among researchers, writers, and knowledge workers. To make the most of Obsidian, it's essential to keep your notes synchronized across devices and ensure your data is regularly backed up.Obsidian is the private and flexible writing app that adapts to the way you think.
|
||||
|
||||
Obsidian is free for personal use.It does not charge based on features or usage.You only pay if you use Obsidian commercially.
|
||||
|
||||
In this article, we'll guide you through the process of setting up automated synchronization for your Obsidian vault on Windows using Windows Task Scheduler and a PowerShell script.[^note]
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before we dive into setting up the synchronization task, ensure you have the following prerequisites in place:
|
||||
|
||||
1. **Obsidian Installed:** Make sure Obsidian is [installed](https://obsidian.md/download) on your Windows computer, and you have an existing Obsidian vault that you want to sync.
|
||||
|
||||
1. **Git Installed:** You'll need Git installed and configured with your Obsidian vault's repository. If you haven't already done this, you can download Git from the [official website](https://git-scm.com/downloads) and follow the installation instructions.
|
||||
|
||||
1. **PowerShell Script:** The provided PowerShell script, sync.ps1, should be located in your Obsidian vault folder.
|
||||
|
||||
## Understanding the PowerShell Script
|
||||
|
||||
The provided PowerShell script, sync.ps1, is the heart of our synchronization task. It automates the process of committing changes in your Obsidian vault's Git repository and pushing them to your remote repository (e.g., GitHub or GitLab). Here's a brief overview of the script:
|
||||
|
||||
```ps1
|
||||
# Define the folder path
|
||||
$FolderPath = "C:\path\to\obsidian-vault"
|
||||
|
||||
# Change directory to the repository folder
|
||||
Set-Location -Path $FolderPath
|
||||
|
||||
# Check if the working tree is clean
|
||||
$IsClean = (git diff-index --quiet HEAD --) -or (git diff-files --quiet)
|
||||
|
||||
if ($IsClean) {
|
||||
Write-Host "Working tree is clean. Skipping commit and pushing changes."
|
||||
git push
|
||||
} else {
|
||||
# Get the current date in the desired format (Day - Date)
|
||||
$CommitMessage = "$(Get-Date -Format 'dddd - yyyy-MM-dd HH:mm:ss')"
|
||||
|
||||
# Commit the changes
|
||||
git add .
|
||||
git commit -m $CommitMessage
|
||||
|
||||
# Push the changes
|
||||
git push
|
||||
}
|
||||
```
|
||||
|
||||
This script does the following:
|
||||
|
||||
- Sets the folder path to your Obsidian vault.
|
||||
- Checks if there are any changes to commit. If the vault is clean (no changes), it skips the commit and only pushes changes.
|
||||
- If there are changes, it commits them with a timestamped message and then pushes them to the remote repository.
|
||||
|
||||
## Setting up Windows Task Scheduler
|
||||
|
||||
Now that we have our PowerShell script ready, let's set up a scheduled task using Windows Task Scheduler to automate the synchronization process. Follow these steps:
|
||||
|
||||
1. **Open an Elevated PowerShell Prompt:** To run the necessary commands, open PowerShell as an administrator.
|
||||
|
||||
1. **Define Task Variables:** Execute the following commands to define variables for your task:
|
||||
|
||||
```ps1
|
||||
$ScriptPath = "C:\path\to\obsidian-vault\sync.ps1"
|
||||
$TaskName = "obsidian-sync"
|
||||
$UserAccount = "$env:USERDOMAIN\$env:USERNAME"
|
||||
```
|
||||
|
||||
Replace $ScriptPath with the actual path to your sync.ps1 script, $TaskName with a name for your task.
|
||||
|
||||
1. **Configure Task Trigger:** Set up a trigger for your task. In this example, we'll schedule the task to run daily at 9:00 PM:
|
||||
|
||||
```ps1
|
||||
$Trigger = New-ScheduledTaskTrigger -Daily -At '9:00 PM'
|
||||
```
|
||||
|
||||
You can adjust the schedule according to your preference.
|
||||
|
||||
1. Define Task Principal and Settings: Configure the task's principal (the user account under which the task will run) and settings:
|
||||
|
||||
```ps1
|
||||
$Principal = New-ScheduledTaskPrincipal -UserId $UserAccount -RunLevel Highest
|
||||
$Settings = New-ScheduledTaskSettingsSet -AllowStartIfOnBatteries -RunOnlyIfNetworkAvailable -WakeToRun
|
||||
```
|
||||
|
||||
These settings ensure that the task runs with the necessary privileges and conditions.
|
||||
|
||||
1. **Define Task Action:** Specify the action that the task will perform, which is running the PowerShell script:
|
||||
|
||||
```ps1
|
||||
$Action = New-ScheduledTaskAction -Execute 'PowerShell.exe' -Argument "-ExecutionPolicy Bypass -WindowStyle Hidden -File `"$ScriptPath`""
|
||||
```
|
||||
|
||||
This action runs PowerShell with the provided script.
|
||||
|
||||
1. **Create the Scheduled Task:** Finally, create the scheduled task and register it with Windows Task Scheduler:
|
||||
|
||||
```ps1
|
||||
$Task = New-ScheduledTask -Action $Action -Trigger $Trigger -Principal $Principal -Settings $Settings
|
||||
Register-ScheduledTask -TaskName $TaskName -InputObject $Task
|
||||
```
|
||||
|
||||
The Obsidian synchronization task is now set up and ready to run automatically based on the schedule you defined.
|
||||
|
||||
# Inspiration
|
||||
|
||||
When looking up on how to implement this I found some breakthrough from this [stack overflow](https://stackoverflow.com/questions/7195503/setting-up-a-cron-job-in-windows) post. There are suggestions on how to do this using cron jobs in wsl. They are worth a look at. This article on [powershell](https://learn.microsoft.com/en-us/powershell/module/scheduledtasks/new-scheduledtask?view=windowsserver2022-ps) with windows server was also helpful.
|
||||
|
||||
[^note]: This method is only optimal for desktop sync. To sync across devices obsidian has a paid plan that has some extra features Such as Sync notes across devices, End-to-end encryption, Version history, Priority email support. Consider checking it out at [https://obsidian.md/pricing](https://obsidian.md/pricing)
|
||||
@@ -0,0 +1,89 @@
|
||||
+++
|
||||
title= "Semantic Versioning(SemVer) and Conventional Commits"
|
||||
description = "Adopting best practices in your git and build workflows."
|
||||
date= 2023-01-24T15:34:14.160Z
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags= ["git", "semver","workflow", "conventional commits"]
|
||||
+++
|
||||
|
||||
Adopting best practices in your git and build workflows.
|
||||
|
||||
<!-- more -->
|
||||
|
||||
# What is Semver?
|
||||
|
||||
Semantic versioning or just SemVer is a dependency naming guidline that aims to bring some sanity into naming libraries and packages in software development. It is a standard versioning system created by **Tom Preston Werner** (co-founder of Github) that’s used to communicate what changes are in a release.
|
||||
|
||||
An efficient and smooth versioning becomes crucial for efficient software delivery expecially for projects that expose a public API. This saves the developers the chaos that is **dependency hell**.Dependency hell is a colloquial term for the frustration of some software users who have installed software packages which have dependencies on specific versions of other software packages.
|
||||
|
||||
The dependency issue arises when several packages have dependencies on the same shared packages or libraries, but they depend on different and incompatible versions of the shared packages. If the shared package or library can only be installed in a single version, the user may need to address the problem by obtaining newer or older versions of the dependent packages. This, in turn, may break other dependencies and push the problem to another set of packages.
|
||||
|
||||
## Semantic Versioning Specifications
|
||||
|
||||
### Summary
|
||||
|
||||
Semantic versioning is based on three numbers that indicate the versions of the software and the compatibilities.They are `X.Y.Z` corresponding to `Major.Minor.Patch`
|
||||
|
||||
- **Major Version (X):**Introduces major changes to the code and breaking changes toward backward compatibility
|
||||
- **Minor Version (Y):** These code changes don’t introduce breaking changes. This could be adding a new feature that doesn't break changes but are not exactly bug fixes.
|
||||
- **Patches (Z):** Mainly correspond to bug fixes
|
||||
|
||||
### Examples in common packages
|
||||
|
||||
#### React(v18.2.0)
|
||||
|
||||
|
||||
|
||||
- **Major -> 18**
|
||||
- **Minor -> 2**
|
||||
- **Patch -> 0**
|
||||
|
||||
---
|
||||
|
||||
#### Pipx(v1.1.0)
|
||||
|
||||
|
||||
|
||||
- **Major -> 1**
|
||||
- **Minor -> 1**
|
||||
- **Patch -> 0**
|
||||
|
||||
---
|
||||
|
||||
## Start at v0.1.0 or v1.0.0?
|
||||
|
||||
Convention recommends that in the initial development phase the starting version should be 0.1.0 which makes sense since it’s not in production yet.
|
||||
|
||||
The version should only be bumped to 1.0.0 only if it is being used in production and stable.
|
||||
|
||||
If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.
|
||||
|
||||
# Conventional Commits
|
||||
|
||||
Conventional Commits is a convention on top of commit messages that are used to automate version changes. It provides an easy set of rules for creating commit messages and works well with SemVer by describing features, fixes and breaking changes that correspond to SemVer standards.
|
||||
|
||||
## Summary
|
||||
|
||||
The commit message should be structured as follows:
|
||||
|
||||
```
|
||||
<type>[optional scope]: <description>
|
||||
|
||||
[optional body]
|
||||
|
||||
[optional footer(s)]
|
||||
```
|
||||
|
||||
The commit contains the following structural elements, to communicate intent to the consumers of your library:
|
||||
|
||||
1. fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in Semantic Versioning).
|
||||
2. feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in Semantic Versioning).
|
||||
3. BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in Semantic Versioning). A BREAKING CHANGE can be part of commits of any type.
|
||||
4. types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the Angular convention) recommends build:, chore:, ci:, docs:, style:, refactor:, perf:, test:, and others.
|
||||
5. footers other than BREAKING CHANGE: <description> may be provided and follow a convention similar to git trailer format.
|
||||
|
||||
# Resources
|
||||
|
||||
https://semver.org/
|
||||
https://www.conventionalcommits.org/en/v1.0.0/
|
||||
@@ -0,0 +1,122 @@
|
||||
+++
|
||||
title= "Subresource Integrity"
|
||||
description = "Understanding Subresource Integrity"
|
||||
date= 2023-04-29
|
||||
author = "Ian Andwati"
|
||||
[taxonomies]
|
||||
tags= ["subresource integrity", "csp", "cors"]
|
||||
+++
|
||||
|
||||
Understanding Subresource Integrity
|
||||
|
||||
<!-- more -->
|
||||
|
||||
In my junior year while I was learning HTML and CSS I got to use the Bootstrap css library.The easiest way to obtain the files was from a Content Delivery Network(CDN). I could see links such as:
|
||||
|
||||
```html
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
```
|
||||
|
||||
I didn't bother with the `integrity` attribute of the link(guess I wasn't curios enough). The integrity attribute has a cryptographic hash value that is important in CDNs and its called the Subresource Integrity.
|
||||
|
||||
Subresource Integrity (SRI) is a security feature in web browsers that helps prevent malicious or compromised scripts from being loaded and executed on a website.a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.
|
||||
|
||||
When a resource, such as a script or stylesheet, fails the SRI check, the browser will block the resource from being loaded and displayed on the website.
|
||||
|
||||
# How Subresource Integrity Helps
|
||||
|
||||
Subresource Integrity (SRI) is a security feature that helps protect against certain types of attacks, such as those that involve malicious modifications to third-party resources that a website loads.
|
||||
|
||||
SRI works by allowing a website to specify a cryptographic hash for a particular external resource (such as a JavaScript file or a CSS stylesheet) that it expects to load. When a user's browser fetches that resource, it checks the hash against the actual contents of the resource. If the hash doesn't match, the browser will refuse to load the resource, indicating that it may have been tampered with.
|
||||
|
||||
This can help prevent a variety of attacks, such as those involving a compromised content delivery network (CDN) or a man-in-the-middle attacker who intercepts and modifies network traffic. By using SRI, a website can help ensure that it is loading only the resources it expects, and that those resources have not been tampered with in transit.
|
||||
|
||||
# Using it
|
||||
|
||||
Using Subresource Integrity (SRI) involves a few steps, but it is relatively straightforward.An integrity value begins with at least one string, with each string including a prefix indicating a particular hash algorithm (currently the allowed prefixes are sha256, sha384, and sha512), followed by a dash, and ending with the actual base64-encoded hash.
|
||||
|
||||
- Generate a cryptographic hash(a base64-encoded cryptographic hash) of the external resource you want to load on your website. This can be done using a hash function such as SHA-256.
|
||||
|
||||
- Add the hash as an attribute to the tag that loads the external resource. For example, for a JavaScript file, you would add the integrity attribute to the `<script>` tag like this:
|
||||
|
||||
```html
|
||||
<script
|
||||
src="https://example.com/example.js"
|
||||
integrity="sha256-ABC123XYZ456"
|
||||
></script>
|
||||
```
|
||||
|
||||
> An integrity value may contain multiple hashes separated by whitespace. A resource will be loaded if it matches one of those hashes.
|
||||
|
||||
Make sure the hash you've generated matches the actual contents of the external resource.
|
||||
|
||||
Test your website to ensure that the external resource is loading correctly and that the SRI feature is working as intended.
|
||||
|
||||
# Tools for generating SRI hashes
|
||||
|
||||
You can use a tool such as the [SRI Hash Generator](https://www.srihash.org/) to generate the hash and check it against the file's contents.
|
||||
|
||||
You can generate SRI hashes from the command-line with openssl using a command invocation such as:
|
||||
|
||||
```sh
|
||||
cat FILENAME.py | openssl dgst -sha384 -binary | openssl base64 -A
|
||||
```
|
||||
|
||||
or with shasum using a command invocation such as:
|
||||
|
||||
```sh
|
||||
shasum -b -a 384 FILENAME.js | awk '{ print $1 }' | xxd -r -p | base64
|
||||
```
|
||||
|
||||
> The pipe-through xxd step takes the hexadecimal output from shasum and converts it to binary.
|
||||
> The pipe-through awk step is necessary because shasum will pass the hashed filename in its output to xxd. That can have disastrous consequences if the filename happens to have valid hex characters in it — because xxd will also decode that and pass it to base64.
|
||||
|
||||
In a Windows environment, you can create a tool for generating SRI hashes with the following code:
|
||||
|
||||
```bat
|
||||
@echo off
|
||||
set bits=384
|
||||
openssl dgst -sha%bits% -binary %1% | openssl base64 -A > tmp
|
||||
set /p a= < tmp
|
||||
del tmp
|
||||
echo sha%bits%-%a%
|
||||
pause
|
||||
```
|
||||
|
||||
To use that code:
|
||||
|
||||
1. Save that code in a file named sri-hash.bat in the Windows SendTo folder in your environment (for example, C:\Users\USER\AppData\Roaming\Microsoft\Windows\SendTo).
|
||||
1. Right-click a file in the File Explorer, select Send to…, and then select sri-hash. You will see the integrity value in a command box.
|
||||
1. Select the integrity value and right-click to copy it to the Clipboard.
|
||||
1. Press any key to dismiss the command box
|
||||
|
||||
# Cross-Origin Resource Sharing and Subresource Integrity
|
||||
|
||||
When verifying the subresource integrity of a resource that originates from a different domain than the document it's embedded in, web browsers will check the resource using Cross-Origin Resource Sharing (CORS) to ensure that the domain serving the resource allows it to be shared with the requesting domain.
|
||||
As a result, the resource must be served with an Access-Control-Allow-Origin header that permits the resource to be shared with the requesting domain. For example, the header could include a wildcard (\*) to allow any domain to access the resource.
|
||||
|
||||
```
|
||||
Access-Control-Allow-Origin: *
|
||||
```
|
||||
|
||||
# How browsers handle Subresource Integrity
|
||||
|
||||
Web browsers employ several mechanisms to handle Subresource Integrity (SRI). When a **script** or **link** element with an integrity attribute is encountered by the browser, it compares the script or stylesheet to the expected hash given in the integrity value before executing the script or applying the stylesheet.
|
||||
|
||||
For resources served from a different domain than the document in which it's embedded, the browser also checks the resource using Cross-Origin Resource Sharing (CORS) to ensure that the origin serving the resource allows it to be shared with the requesting domain. This additional check is important for preventing unauthorized access to sensitive resources.
|
||||
|
||||
If the script or stylesheet fails to match its associated integrity value, the browser will refuse to execute the script or apply the stylesheet and return a network error, indicating that the fetching of that script or stylesheet failed. This behavior ensures that the resource being loaded is trustworthy and helps to protect users from potential security threats.
|
||||
|
||||
# References
|
||||
|
||||
- [https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
|
||||
- [https://www.srihash.org/](https://www.srihash.org/)
|
||||
- [https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
|
||||
- [https://html.spec.whatwg.org/multipage/semantics.html#attr-script-integrity](https://html.spec.whatwg.org/multipage/semantics.html#attr-script-integrity)
|
||||
- [https://html.spec.whatwg.org/multipage/semantics.html#attr-link-integrity](https://html.spec.whatwg.org/multipage/semantics.html#attr-link-integrity)
|
||||
- [https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute](https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute)
|
||||
@@ -0,0 +1,67 @@
|
||||
+++
|
||||
title = "What say you?"
|
||||
description = "Adding a comment system by utterances"
|
||||
author = "Ian Andwati"
|
||||
date = 2023-08-24T15:34:14.160Z
|
||||
[taxonomies]
|
||||
tags = ["blog", "utterances"]
|
||||
+++
|
||||
|
||||
Free speech enhanced
|
||||
|
||||
<!-- more -->
|
||||
|
||||
There is no point in writing online if your readers cannot provide feedback for your writings. You might as well be shouting at a void. My ideal commenting system has to be free, open source and should not be a hassle to setup. Luckily, [utterances 🔮](https://github.com/utterance/utterances) checks all of these conditions
|
||||
|
||||
It is a lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more! The notable features are:
|
||||
|
||||
- Open source. 🙌
|
||||
- No tracking, no ads, always free. 📡🚫
|
||||
- No lock-in. All data stored in GitHub issues. 🔓
|
||||
- Styled with Primer, the css toolkit that powers GitHub. 💅
|
||||
- Dark theme. 🌘
|
||||
- Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲
|
||||
|
||||
## How it works
|
||||
|
||||
When Utterances loads, the GitHub [issue search API](https://developer.github.com/v3/search/#search-issues) is used to find the issue associated with the page based on url, pathname or title. If it cannot find an issue that matches the page, [utterances-bot](https://github.com/utterances-bot) will automatically create an issue the first time someone comments.
|
||||
|
||||
To comment, users must authorize the utterances app to post on their behalf using the GitHub [OAuth flow](https://developer.github.com/v3/oauth/#web-application-flow). Alternatively, users can comment on the GitHub issue directly.
|
||||
|
||||
# Setting up Utterances
|
||||
|
||||
### Repository
|
||||
|
||||
Choose the repository utterances will connect to.
|
||||
|
||||
Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.
|
||||
Make sure the utterances app is installed on the repo, otherwise users will not be able to post comments.
|
||||
If your repo is a fork, navigate to its settings tab and confirm the issues feature is turned on.
|
||||
|
||||
```
|
||||
repo:
|
||||
username/repo
|
||||
```
|
||||
|
||||
A public GitHub repository. This is where the blog post issues and issue-comments will be posted.
|
||||
|
||||
### Theme
|
||||
|
||||
Choose an Utterances theme that matches your blog.
|
||||
|
||||
### Enable Utterances
|
||||
|
||||
Add the following script tag to your blog's template. Position it where you want the comments to appear. Customize the layout using the .utterances and .utterances-frame selectors.
|
||||
|
||||
```js
|
||||
<script
|
||||
src="https://utteranc.es/client.js"
|
||||
repo="[ENTER REPO HERE]"
|
||||
issue-term="title"
|
||||
theme="gruvbox-dark"
|
||||
crossorigin="anonymous"
|
||||
async
|
||||
></script>
|
||||
```
|
||||
|
||||
The complete documentation can be found at [https://utteranc.es](https://utteranc.es/)
|
||||
-37
@@ -1,37 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
title: Home
|
||||
---
|
||||
|
||||
<div class="posts">
|
||||
{% for post in paginator.posts %}
|
||||
<div class="post">
|
||||
<h1 class="post-title">
|
||||
<a href="{{ post.url }}">
|
||||
{{ post.title }}
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<span class="post-date">{{ post.date | date_to_string }}</span>
|
||||
|
||||
{{ post.content }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="pagination">
|
||||
{% if paginator.next_page %}
|
||||
<a class="pagination-item older" href="{{ site.baseurl }}page{{paginator.next_page}}">Older</a>
|
||||
{% else %}
|
||||
<span class="pagination-item older">Older</span>
|
||||
{% endif %}
|
||||
{% if paginator.previous_page %}
|
||||
{% if paginator.page == 2 %}
|
||||
<a class="pagination-item newer" href="{{ site.baseurl }}">Newer</a>
|
||||
{% else %}
|
||||
<a class="pagination-item newer" href="{{ site.baseurl }}page{{paginator.previous_page}}">Newer</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="pagination-item newer">Newer</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 588 B |
@@ -1,250 +0,0 @@
|
||||
/*
|
||||
* __ __
|
||||
* /\ \ /\ \
|
||||
* \ \ \___ __ __ \_\ \ __
|
||||
* \ \ _ `\/\ \/\ \ /'_` \ /'__`\
|
||||
* \ \ \ \ \ \ \_\ \/\ \_\ \/\ __/
|
||||
* \ \_\ \_\/`____ \ \___,_\ \____\
|
||||
* \/_/\/_/`/___/> \/__,_ /\/____/
|
||||
* /\___/
|
||||
* \/__/
|
||||
*
|
||||
* Designed, built, and released under MIT license by @mdo. Learn more at
|
||||
* https://github.com/poole/hyde.
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Contents
|
||||
*
|
||||
* Global resets
|
||||
* Sidebar
|
||||
* Container
|
||||
* Reverse layout
|
||||
* Themes
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Global resets
|
||||
*
|
||||
* Update the foundational and global aspects of the page.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: "PT Sans", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 58em) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*
|
||||
* Flexible banner for housing site name, intro, and "footer" content. Starts
|
||||
* out above content in mobile and later moves to the side with wider viewports.
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
color: rgba(255,255,255,.5);
|
||||
background-color: #202020;
|
||||
}
|
||||
@media (min-width: 48em) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 18rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar links */
|
||||
.sidebar a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* About section */
|
||||
.sidebar-about h1 {
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
font-family: "Abril Fatface", serif;
|
||||
font-size: 3.25rem;
|
||||
}
|
||||
|
||||
/* Sidebar nav */
|
||||
.sidebar-nav {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.sidebar-nav-item {
|
||||
display: block;
|
||||
line-height: 1.75;
|
||||
}
|
||||
a.sidebar-nav-item:hover,
|
||||
a.sidebar-nav-item:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.sidebar-nav-item.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Sticky sidebar
|
||||
*
|
||||
* Add the `sidebar-sticky` class to the sidebar's container to affix it the
|
||||
* contents to the bottom of the sidebar in tablets and up.
|
||||
*/
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.sidebar-sticky {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Container
|
||||
*
|
||||
* Align the contents of the site above the proper threshold with some margin-fu
|
||||
* with a 25%-wide `.sidebar`.
|
||||
*/
|
||||
|
||||
.content {
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.content {
|
||||
max-width: 38rem;
|
||||
margin-left: 20rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.content {
|
||||
margin-left: 22rem;
|
||||
margin-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Reverse layout
|
||||
*
|
||||
* Flip the orientation of the page by placing the `.sidebar` on the right.
|
||||
*/
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.layout-reverse .sidebar {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.layout-reverse .content {
|
||||
margin-left: 2rem;
|
||||
margin-right: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
.layout-reverse .content {
|
||||
margin-left: 4rem;
|
||||
margin-right: 22rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Themes
|
||||
*
|
||||
* As of v1.1, Hyde includes optional themes to color the sidebar and links
|
||||
* within blog posts. To use, add the class of your choosing to the `body`.
|
||||
*/
|
||||
|
||||
/* Base16 (http://chriskempson.github.io/base16/#default) */
|
||||
|
||||
/* Red */
|
||||
.theme-base-08 .sidebar {
|
||||
background-color: #ac4142;
|
||||
}
|
||||
.theme-base-08 .content a,
|
||||
.theme-base-08 .related-posts li a:hover {
|
||||
color: #ac4142;
|
||||
}
|
||||
|
||||
/* Orange */
|
||||
.theme-base-09 .sidebar {
|
||||
background-color: #d28445;
|
||||
}
|
||||
.theme-base-09 .content a,
|
||||
.theme-base-09 .related-posts li a:hover {
|
||||
color: #d28445;
|
||||
}
|
||||
|
||||
/* Yellow */
|
||||
.theme-base-0a .sidebar {
|
||||
background-color: #f4bf75;
|
||||
}
|
||||
.theme-base-0a .content a,
|
||||
.theme-base-0a .related-posts li a:hover {
|
||||
color: #f4bf75;
|
||||
}
|
||||
|
||||
/* Green */
|
||||
.theme-base-0b .sidebar {
|
||||
background-color: #90a959;
|
||||
}
|
||||
.theme-base-0b .content a,
|
||||
.theme-base-0b .related-posts li a:hover {
|
||||
color: #90a959;
|
||||
}
|
||||
|
||||
/* Cyan */
|
||||
.theme-base-0c .sidebar {
|
||||
background-color: #75b5aa;
|
||||
}
|
||||
.theme-base-0c .content a,
|
||||
.theme-base-0c .related-posts li a:hover {
|
||||
color: #75b5aa;
|
||||
}
|
||||
|
||||
/* Blue */
|
||||
.theme-base-0d .sidebar {
|
||||
background-color: #6a9fb5;
|
||||
}
|
||||
.theme-base-0d .content a,
|
||||
.theme-base-0d .related-posts li a:hover {
|
||||
color: #6a9fb5;
|
||||
}
|
||||
|
||||
/* Magenta */
|
||||
.theme-base-0e .sidebar {
|
||||
background-color: #aa759f;
|
||||
}
|
||||
.theme-base-0e .content a,
|
||||
.theme-base-0e .related-posts li a:hover {
|
||||
color: #aa759f;
|
||||
}
|
||||
|
||||
/* Brown */
|
||||
.theme-base-0f .sidebar {
|
||||
background-color: #8f5536;
|
||||
}
|
||||
.theme-base-0f .content a,
|
||||
.theme-base-0f .related-posts li a:hover {
|
||||
color: #8f5536;
|
||||
}
|
||||
@@ -1,430 +0,0 @@
|
||||
/*
|
||||
* ___
|
||||
* /\_ \
|
||||
* _____ ___ ___\//\ \ __
|
||||
* /\ '__`\ / __`\ / __`\\ \ \ /'__`\
|
||||
* \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
|
||||
* \ \ ,__/\ \____/\ \____//\____\ \____\
|
||||
* \ \ \/ \/___/ \/___/ \/____/\/____/
|
||||
* \ \_\
|
||||
* \/_/
|
||||
*
|
||||
* Designed, built, and released under MIT license by @mdo. Learn more at
|
||||
* https://github.com/poole/poole.
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Contents
|
||||
*
|
||||
* Body resets
|
||||
* Custom type
|
||||
* Messages
|
||||
* Container
|
||||
* Masthead
|
||||
* Posts and pages
|
||||
* Pagination
|
||||
* Reverse layout
|
||||
* Themes
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Body resets
|
||||
*
|
||||
* Update the foundational and global aspects of the page.
|
||||
*/
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@media (min-width: 38em) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: #515151;
|
||||
background-color: #fff;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* No `:visited` state is required by default (browsers will use `a`) */
|
||||
a {
|
||||
color: #268bd2;
|
||||
text-decoration: none;
|
||||
}
|
||||
a strong {
|
||||
color: inherit;
|
||||
}
|
||||
/* `:focus` is linked to `:hover` for basic accessibility */
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: .5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.25;
|
||||
color: #313131;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
h4, h5, h6 {
|
||||
margin-top: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Body text */
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
|
||||
/* Lists */
|
||||
ul, ol, dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
hr {
|
||||
position: relative;
|
||||
margin: 1.5rem 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
abbr {
|
||||
font-size: 85%;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #e5e5e5;
|
||||
}
|
||||
|
||||
/* Code */
|
||||
code,
|
||||
pre {
|
||||
font-family: Menlo, Monaco, "Courier New", monospace;
|
||||
}
|
||||
code {
|
||||
padding: .25em .5em;
|
||||
font-size: 85%;
|
||||
color: #bf616a;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
font-size: .8rem;
|
||||
line-height: 1.4;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Pygments via Jekyll */
|
||||
.highlight {
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.highlight pre {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Gist via GitHub Pages */
|
||||
.gist .gist-file {
|
||||
font-family: Menlo, Monaco, "Courier New", monospace !important;
|
||||
}
|
||||
.gist .markdown-body {
|
||||
padding: 15px;
|
||||
}
|
||||
.gist pre {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.gist .gist-file .gist-data {
|
||||
font-size: .8rem !important;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.gist code {
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Quotes */
|
||||
blockquote {
|
||||
padding: .5rem 1rem;
|
||||
margin: .8rem 0;
|
||||
color: #7a7a7a;
|
||||
border-left: .25rem solid #e5e5e5;
|
||||
}
|
||||
blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (min-width: 30em) {
|
||||
blockquote {
|
||||
padding-right: 5rem;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 0 1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: .25rem .5rem;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
tbody tr:nth-child(odd) td,
|
||||
tbody tr:nth-child(odd) th {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Custom type
|
||||
*
|
||||
* Extend paragraphs with `.lead` for larger introductory text.
|
||||
*/
|
||||
|
||||
.lead {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Messages
|
||||
*
|
||||
* Show alert messages to users. You may add it to single elements like a `<p>`,
|
||||
* or to a parent if there are multiple elements to show.
|
||||
*/
|
||||
|
||||
.message {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
color: #717171;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Container
|
||||
*
|
||||
* Center the page content.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 38rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Masthead
|
||||
*
|
||||
* Super small header above the content for site name and short description.
|
||||
*/
|
||||
|
||||
.masthead {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.masthead-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: #505050;
|
||||
}
|
||||
.masthead-title a {
|
||||
color: #505050;
|
||||
}
|
||||
.masthead-title small {
|
||||
font-size: 75%;
|
||||
font-weight: 400;
|
||||
color: #c0c0c0;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Posts and pages
|
||||
*
|
||||
* Each post is wrapped in `.post` and is used on default and post layouts. Each
|
||||
* page is wrapped in `.page` and is only used on the page layout.
|
||||
*/
|
||||
|
||||
.page,
|
||||
.post {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
|
||||
/* Blog post or page title */
|
||||
.page-title,
|
||||
.post-title,
|
||||
.post-title a {
|
||||
color: #303030;
|
||||
}
|
||||
.page-title,
|
||||
.post-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Meta data line below post title */
|
||||
.post-date {
|
||||
display: block;
|
||||
margin-top: -.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
/* Related posts */
|
||||
.related {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.related-posts {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.related-posts h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.related-posts li small {
|
||||
font-size: 75%;
|
||||
color: #999;
|
||||
}
|
||||
.related-posts li a:hover {
|
||||
color: #268bd2;
|
||||
text-decoration: none;
|
||||
}
|
||||
.related-posts li a:hover small {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Pagination
|
||||
*
|
||||
* Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
|
||||
* there are no more previous or next posts to show.
|
||||
*/
|
||||
|
||||
.pagination {
|
||||
overflow: hidden; /* clearfix */
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
font-family: "PT Sans", Helvetica, Arial, sans-serif;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Pagination items can be `span`s or `a`s */
|
||||
.pagination-item {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.pagination-item:first-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
/* Only provide a hover state for linked pagination items */
|
||||
a.pagination-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
@media (min-width: 30em) {
|
||||
.pagination {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
.pagination-item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.pagination-item:first-child {
|
||||
margin-bottom: 0;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.pagination-item:last-child {
|
||||
margin-left: -1px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
.highlight .hll { background-color: #ffc; }
|
||||
.highlight .c { color: #999; } /* Comment */
|
||||
.highlight .err { color: #a00; background-color: #faa } /* Error */
|
||||
.highlight .k { color: #069; } /* Keyword */
|
||||
.highlight .o { color: #555 } /* Operator */
|
||||
.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
|
||||
.highlight .cp { color: #099 } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #999; } /* Comment.Single */
|
||||
.highlight .cs { color: #999; } /* Comment.Special */
|
||||
.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gr { color: #f00 } /* Generic.Error */
|
||||
.highlight .gh { color: #030; } /* Generic.Heading */
|
||||
.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
|
||||
.highlight .go { color: #aaa } /* Generic.Output */
|
||||
.highlight .gp { color: #009; } /* Generic.Prompt */
|
||||
.highlight .gs { } /* Generic.Strong */
|
||||
.highlight .gu { color: #030; } /* Generic.Subheading */
|
||||
.highlight .gt { color: #9c6 } /* Generic.Traceback */
|
||||
.highlight .kc { color: #069; } /* Keyword.Constant */
|
||||
.highlight .kd { color: #069; } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #069; } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #069 } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #069; } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #078; } /* Keyword.Type */
|
||||
.highlight .m { color: #f60 } /* Literal.Number */
|
||||
.highlight .s { color: #d44950 } /* Literal.String */
|
||||
.highlight .na { color: #4f9fcf } /* Name.Attribute */
|
||||
.highlight .nb { color: #366 } /* Name.Builtin */
|
||||
.highlight .nc { color: #0a8; } /* Name.Class */
|
||||
.highlight .no { color: #360 } /* Name.Constant */
|
||||
.highlight .nd { color: #99f } /* Name.Decorator */
|
||||
.highlight .ni { color: #999; } /* Name.Entity */
|
||||
.highlight .ne { color: #c00; } /* Name.Exception */
|
||||
.highlight .nf { color: #c0f } /* Name.Function */
|
||||
.highlight .nl { color: #99f } /* Name.Label */
|
||||
.highlight .nn { color: #0cf; } /* Name.Namespace */
|
||||
.highlight .nt { color: #2f6f9f; } /* Name.Tag */
|
||||
.highlight .nv { color: #033 } /* Name.Variable */
|
||||
.highlight .ow { color: #000; } /* Operator.Word */
|
||||
.highlight .w { color: #bbb } /* Text.Whitespace */
|
||||
.highlight .mf { color: #f60 } /* Literal.Number.Float */
|
||||
.highlight .mh { color: #f60 } /* Literal.Number.Hex */
|
||||
.highlight .mi { color: #f60 } /* Literal.Number.Integer */
|
||||
.highlight .mo { color: #f60 } /* Literal.Number.Oct */
|
||||
.highlight .sb { color: #c30 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #c30 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #c30 } /* Literal.String.Double */
|
||||
.highlight .se { color: #c30; } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #c30 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #a00 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #c30 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #3aa } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #c30 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #fc3 } /* Literal.String.Symbol */
|
||||
.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
|
||||
.highlight .vc { color: #033 } /* Name.Variable.Class */
|
||||
.highlight .vg { color: #033 } /* Name.Variable.Global */
|
||||
.highlight .vi { color: #033 } /* Name.Variable.Instance */
|
||||
.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
|
||||
|
||||
.css .o,
|
||||
.css .o + .nt,
|
||||
.css .nt + .nt { color: #999; }
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 315 B |
+369
@@ -0,0 +1,369 @@
|
||||
/* TODO: Future considerations.
|
||||
- Reset all margin and padding for * to 0.
|
||||
- Use the <abbr> tag for abbreviations.
|
||||
- Support footnotes or asides for notes sections.
|
||||
- Support a "display title" in an [extra] section to allow for <br> elements
|
||||
or other manual control over title display.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Serif';
|
||||
src: local('Noto Serif'),
|
||||
url('fonts/NotoSerif.ttf') format("ttf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
src: local('Noto Sans'),
|
||||
url('fonts/NotoSans.ttf') format("ttf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans Mono';
|
||||
src: local('Noto Sans Mono'),
|
||||
url('fonts/NotoSansMono.ttf') format("ttf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Fonts and Text Sizes */
|
||||
--default-serif-font: "Noto Serif", serif;
|
||||
--default-sans-font: "Noto Sans", sans-serif;
|
||||
--default-mono-font: "Noto Sans Mono", monospace;
|
||||
--default-font-size: 16px;
|
||||
--header-font-size: 2em;
|
||||
/* Not sure I like this as the default, but it keeps inline code blocks from
|
||||
overlapping. */
|
||||
--default-line-height: 1.5;
|
||||
|
||||
/* Gruvbox Dark Colors */
|
||||
--background-color: #1d2021;
|
||||
--foreground-color: #ebdbb2;
|
||||
--link-color: #458588;
|
||||
--muted-color: #928374;
|
||||
--primary-accent-color: #b16286;
|
||||
--secondary-accent-color: #689d6a;
|
||||
--code-background-color: #282828;
|
||||
--inline-code-background-color: #3c3836;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: var(--primary-accent-color);
|
||||
}
|
||||
|
||||
/* Required for sticky footer. */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
/* Required for sticky footer. */
|
||||
flex-direction: column;
|
||||
/* Required for sticky footer. */
|
||||
margin: 0;
|
||||
line-height: var(--default-line-height);
|
||||
font-size: var(--default-font-size);
|
||||
font-family: var(--default-serif-font);
|
||||
background-color: var(--background-color);
|
||||
color: var(--foreground-color);
|
||||
border-top: 0.5em solid var(--primary-accent-color);
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
/* Required for sticky footer. */
|
||||
}
|
||||
|
||||
/* FIXME: For reasons that utterly bewilder me, an <article> with this id needs
|
||||
to be inside a <main> with no id. I have a strong feeling I've done
|
||||
something wrong here. */
|
||||
#content {
|
||||
max-width: 48em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-right: 1.4em;
|
||||
padding-left: 1.4em;
|
||||
padding-bottom: 1.4em;
|
||||
}
|
||||
|
||||
header {
|
||||
overflow: hidden;
|
||||
/* FIXME: This WILL cut off titles that are too long! */
|
||||
margin-top: 1.4em;
|
||||
margin-bottom: 1.4em;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
header>h1 {
|
||||
text-align: center;
|
||||
font-size: var(--header-font-size);
|
||||
font-family: var(--default-sans-font);
|
||||
padding-top: 2.8rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
header .post-meta {
|
||||
text-align: center;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.9em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-meta time {
|
||||
// TODO: This color doesn't look great in with a light color scheme...
|
||||
color: var(--muted-color);
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
padding-top: 1.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 0.4em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
/* Default text uses serif, so use sans-serif to differentiate quoted text. */
|
||||
font-family: var(--default-sans-font);
|
||||
font-style: italic;
|
||||
/* Indent blockquotes, but align the start with where text in code begins. */
|
||||
margin: 0 1.25rem;
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
border-left: 3px solid var(--secondary-accent-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/* ---- Anchor links --------------------------------------------------------*/
|
||||
|
||||
/* Add a # to the left of a subheading when it references an internal link... */
|
||||
:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
|
||||
content: "#";
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
margin-left: -1.2rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* ... but only display the internal anchor link when hovered over. */
|
||||
:where(h2, h3, h4, h5, h6):hover>a[href^="#"]::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* When internal links are linked directly, display with the accent color. */
|
||||
:where(h2, h3, h4, h5, h6):target>a[href^="#"]::before {
|
||||
opacity: 1;
|
||||
color: var(--primary-accent-color);
|
||||
}
|
||||
|
||||
/* ---- Media ---------------------------------------------------------------*/
|
||||
|
||||
img,
|
||||
video {
|
||||
/* Media should fill the width of its container if possible. */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
/* Don't add margins to figures. */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
/* De-emphasize figure captions. */
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
|
||||
/* ---- Tables --------------------------------------------------------------*/
|
||||
|
||||
table {
|
||||
/* FIXME: Use flexbox for centering? Frankly, this is still bad on mobile.
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
*/
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/* Headers in a row (column scoped) get a colored bottom border. */
|
||||
th[scope="col"] {
|
||||
padding-top: 0.4em;
|
||||
border-bottom: 3px solid var(--secondary-accent-color);
|
||||
}
|
||||
|
||||
/* Headers in a column (row scoped) get a colored right border. */
|
||||
th[scope="row"] {
|
||||
border-right: 3px solid var(--secondary-accent-color);
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
border: 1px solid var(--muted-color);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
vertical-align: bottom;
|
||||
padding-left: 0.4em;
|
||||
padding-right: 0.4em;
|
||||
border: 1px solid var(--muted-color);
|
||||
}
|
||||
|
||||
/* ---- Footer, nav, and copyright ------------------------------------------*/
|
||||
|
||||
footer {
|
||||
border-top: 0.5em solid var(--primary-accent-color);
|
||||
text-align: center;
|
||||
/* FIXME: Using the code background color could look awkward if a post ends
|
||||
in a code snippet. */
|
||||
background-color: var(--code-background-color);
|
||||
padding: 1.4em;
|
||||
flex-shrink: 0;
|
||||
/* Required for sticky footer. */
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--secondary-accent-color);
|
||||
}
|
||||
|
||||
/* Give footer nav links some breathing room. */
|
||||
footer>nav>a {
|
||||
// margin: 0 1.4em;
|
||||
margin: 0 0.4em;
|
||||
}
|
||||
|
||||
/* FIXME: This could probably go away with global margin/padding adjustments. */
|
||||
footer p {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
footer p,
|
||||
footer a {
|
||||
font-family: var(--default-sans-font);
|
||||
/* It doesn't seem as though Google fonts support direct usage of OpenType
|
||||
features like 'c2sc' and 'smcp'.
|
||||
|
||||
FIXME: It's not clear why numerals don't seem to obey this property. */
|
||||
font-variant-caps: all-small-caps;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
|
||||
.page-item .disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.page-numbers {
|
||||
font-size: 0.9rem;
|
||||
color: var(--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
padding: 0.25rem 1.25rem;
|
||||
font-size: 85%;
|
||||
border-left: 0.25rem solid var(--primary-accent-color);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0 0.4rem;
|
||||
// background-color: #3c3836;
|
||||
background-color: var(--inline-code-background-color);
|
||||
/* Inline code blocks look less aggressive with a little rounding. */
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
overflow: auto;
|
||||
font-family: var(--default-mono-font);
|
||||
}
|
||||
|
||||
/* Without this the <code> tag gains a little padding that offsets text by like
|
||||
2 pixels. Let's *not* do that. */
|
||||
pre>code {
|
||||
padding: 0;
|
||||
background-color: var(--code-background-color);
|
||||
// Code inside a pre block doesn't need rounded borders.
|
||||
border-radius: unset;
|
||||
}
|
||||
|
||||
/* ---- Media Queries ------------------------------------------------------ */
|
||||
|
||||
@media (min-width: 470px) {
|
||||
:root {
|
||||
--default-font-size: 17px;
|
||||
}
|
||||
|
||||
/* Above this size, increase the header margins. Smaller sizes benefit from
|
||||
extra breathing room in the title. */
|
||||
header {
|
||||
margin-left: 2.8em;
|
||||
margin-right: 2.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 625px) {
|
||||
:root {
|
||||
--default-font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 802px) {
|
||||
:root {
|
||||
--default-font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1003px) {
|
||||
:root {
|
||||
--default-font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1225px) {
|
||||
:root {
|
||||
--default-font-size: 21px;
|
||||
}
|
||||
|
||||
/* On larger devices, give the anchor link some more space. */
|
||||
:where(h2, h3, h4, h5, h6)>a[href^="#"]::before {
|
||||
width: 1.8rem;
|
||||
margin-left: -1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1496px) {
|
||||
:root {
|
||||
--default-font-size: 22px;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Executable
+62
@@ -0,0 +1,62 @@
|
||||
#!/usr/bin/env sh
|
||||
|
||||
set -e
|
||||
|
||||
: ${ZOLA_REPO='https://github.com/getzola/zola'}
|
||||
: ${ZOLA_INSTALL_DIR="${HOME}/.cargo/bin"}
|
||||
|
||||
# Helpers for ANSI color and logging.
|
||||
name="$(basename $0)"; esc=''; reset="${esc}[0m"
|
||||
red() { local string="${1}"; echo "${esc}[31m${string}${reset}"; }
|
||||
yellow() { local string="${1}"; echo "${esc}[33m${string}${reset}"; }
|
||||
green() { local string="${1}"; echo "${esc}[32m${string}${reset}"; }
|
||||
blue() { local string="${1}"; echo "${esc}[34m${string}${reset}"; }
|
||||
magenta() { local string="${1}"; echo "${esc}[35m${string}${reset}"; }
|
||||
log() { local string="${1}"; echo "[$(blue $name)] ${string}"; }
|
||||
|
||||
prompt_for_update() {
|
||||
local current="${1}"
|
||||
local latest="${2}"
|
||||
|
||||
[ -n "${current}" ] \
|
||||
&& installed="You're using Zola $(yellow $current)" \
|
||||
|| installed="Zola is $(red 'not installed')"
|
||||
|
||||
log "${installed}, but $(magenta $latest) is available."
|
||||
|
||||
# Prompt for an update. Exit the entire script if declined.
|
||||
read -p "$(log "Would you like to install Zola $(magenta $latest)? [y/N]: ")" answer
|
||||
case $answer in
|
||||
[Yy]*) log "Downloading Zola $(magenta $latest) from GitHub." ;;
|
||||
[Nn]*|*) log $(red "Aborted!"); exit ;;
|
||||
esac
|
||||
}
|
||||
|
||||
install_zola() {
|
||||
local version="${1}"
|
||||
local download_url="${ZOLA_REPO}/releases/download/${version}/zola-${version}-x86_64-unknown-linux-gnu.tar.gz"
|
||||
|
||||
curl --progress-bar --location $download_url | tar --gunzip --extract --directory=$ZOLA_INSTALL_DIR --file -
|
||||
}
|
||||
|
||||
update_zola() {
|
||||
# Find the current Zola version (if any).
|
||||
[ -n "$(which zola 2> /dev/null)" ] && current_version=$(zola --version | awk '{print "v"$2}')
|
||||
|
||||
# Find the latest available Zola version. Use --refs to avoid listing
|
||||
# annotated commit objects that include the dereference syntax '^{}'.
|
||||
# Find more background at https://stackoverflow.com/a/15472310.
|
||||
local latest_version=$(git ls-remote --tags --refs $ZOLA_REPO | # Fetch remote tags.
|
||||
sort -t '/' -k 3 -V | # Sort them by version.
|
||||
tail -n 1 | # Take the latest one.
|
||||
awk -F / '{print $3}') # Return only the tag.
|
||||
|
||||
if [ "${current_version}" != "${latest_version}" ]; then
|
||||
prompt_for_update "${current_version}" "${latest_version}"
|
||||
install_zola "${latest_version}"
|
||||
fi
|
||||
|
||||
log "You're using Zola $(magenta $latest_version). $(green "Everything is up-to-date!")"
|
||||
}
|
||||
|
||||
update_zola
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 572 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Ian Andwati",
|
||||
"short_name": "andwati",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}
|
||||
404 Not Found
|
||||
{% endblock title %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="404 Not Found" />
|
||||
<meta property="og:site_name" content="andwati.github.io" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:title" content="404 Not Found" />
|
||||
<meta property="og:description" content="404 Not Found" />
|
||||
<meta property="og:image" content="https://andwati.github.io/self.png" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati_" />
|
||||
<meta property="twitter:title" content="404 Not Found" />
|
||||
<meta property="twitter:description" content="404 Not Found" />
|
||||
<meta property="twitter:image" content="https://andwati.github.io/self.png" />
|
||||
{% endblock meta %}
|
||||
{% block links %}
|
||||
{% endblock links %}
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
404 Not Found
|
||||
</header>
|
||||
<p>Hmm...could not find that page</p>
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
@@ -0,0 +1 @@
|
||||
<a href="#{{ id }}" aria-label='Anchor link for: {{ id }}'></a>
|
||||
@@ -0,0 +1,29 @@
|
||||
{% extends "section.html" %}
|
||||
{% import "post_macros.html" as page_macros %}
|
||||
{% import "paginate.html" as paginate_macro %}
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
<h1>Archive</h1>
|
||||
</header>
|
||||
{% set section = get_section(path="posts/_index.md") %}
|
||||
{% for year, posts in section.pages
|
||||
| sort(attribute="date")
|
||||
| reverse
|
||||
| group_by(attribute="year") %}
|
||||
<div class="archive">
|
||||
<h2>{{ year }}</h2>
|
||||
<ul>
|
||||
{% for post in posts %}
|
||||
<li>
|
||||
<time>{{ post.date | date(format="%d-%h") }}</time>
|
||||
<a href="{{ post.permalink }}">{{ post.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if paginator %}{{ paginate_macro::paginate() }}{% endif %}
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
@@ -0,0 +1,4 @@
|
||||
<div>
|
||||
<script src="https://utteranc.es/client.js" repo="andwati/andwati.github.io" issue-term="title" theme="gruvbox-dark" crossorigin="anonymous" async>
|
||||
</script>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<footer>
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
⬡
|
||||
<a href="/posts">Posts</a>
|
||||
⬡
|
||||
<a href="/tags">Tags</a>
|
||||
⬡
|
||||
<a href="/archive">Archive</a>
|
||||
⬡
|
||||
<a href="/contact">Contact</a>
|
||||
</nav>
|
||||
|
||||
<p>
|
||||
© 2022 -
|
||||
{{ now() | date(format="%Y") }}
|
||||
Ian Andwati
|
||||
⬡
|
||||
<a href="https://github.com/andwati/andwati.github.io">Source</a>
|
||||
⬡
|
||||
<a href="/rss.xml">Feed</a>
|
||||
</p>
|
||||
</footer>
|
||||
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta name="google-site-verification" content="lBZ8ofF4rZJjQDf6ngTrI20wzaDq9GVMCsxfZfTcllI" />
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3QJCKHZT3J"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'G-3QJCKHZT3J');
|
||||
</script>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="keywords" content="" />
|
||||
<title>
|
||||
{% block title %}
|
||||
{{ section.title }}
|
||||
{% endblock title %}
|
||||
</title>
|
||||
{% block meta %}
|
||||
<meta name="description" content="{{ section.description }}" />
|
||||
<meta property="og:site_name" content="andwati.github.io" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:url" content="{{ section.permalink }}" />
|
||||
<meta property="og:title" content="{{ section.title }}" />
|
||||
<meta property="og:description" content="{{ section.description }}" />
|
||||
<meta property="og:type" content="profile" />
|
||||
<meta property="og:image" content="https://andwati.github.io/self.png" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati_" />
|
||||
<meta property="twitter:title" content="{{ section.title }}" />
|
||||
<meta property="twitter:description" content="{{ section.description }}" />
|
||||
<meta property="twitter:image" content="https://andwati.github.io/self.png" />
|
||||
{% endblock meta %}
|
||||
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
|
||||
<link rel="stylesheet" href="/site.css" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
{% block links %}
|
||||
<link rel="canonical" href="{{ section.permalink }}" />
|
||||
{% endblock links %}
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
<h1>{{ section.title }}</h1>
|
||||
</header>
|
||||
{{ section.content | safe }}
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}
|
||||
{{ page.title }}
|
||||
{% endblock title %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="{{ page.description }}" />
|
||||
<meta property="og:site_name" content="andwati.github.io" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:url" content="{{ page.permalink }}" />
|
||||
<meta property="og:title" content="{{ page.title }}" />
|
||||
<meta property="og:description" content="{{ page.description }}" />
|
||||
<meta property="og:image" content="https://andwati.github.io/self.png" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati_" />
|
||||
<meta property="twitter:title" content="{{ page.title }}" />
|
||||
<meta property="twitter:description" content="{{ page.description }}" />
|
||||
<meta property="twitter:image" content="andwati.github.io/self.png" />
|
||||
{% endblock meta %}
|
||||
{% block links %}
|
||||
<link rel="canonical" href="{{ page.permalink }}" />
|
||||
{% endblock links %}
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
{{ page.content | safe }}
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
@@ -0,0 +1,27 @@
|
||||
{% macro paginate() %}
|
||||
{% if paginator %}
|
||||
<div>
|
||||
<ul class="pagination">
|
||||
{% if paginator.previous %}
|
||||
<li class="page-item page-prev">
|
||||
<a href="{{ paginator.previous }}" class="page-link">← Prev</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item page-prev">
|
||||
<span class="page-link disabled" aria-disabled="true">← Prev</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="page-item page-numbers">{{ paginator.current_index }} of {{ paginator.number_pagers }}</li>
|
||||
{% if paginator.next %}
|
||||
<li class="page-item page-next">
|
||||
<a href="{{ paginator.next }}" class="page-link">Next →</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item page-next">
|
||||
<span class="page-link disabled" aria-disabled="trues">Next →</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endmacro paginate %}
|
||||
@@ -0,0 +1,35 @@
|
||||
{% extends "page.html" %}
|
||||
{% import "post_macros.html" as page_macros %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="{{ page.description }}" />
|
||||
<meta property="og:site_name" content="andwati.github.io" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:url" content="{{ page.permalink }}" />
|
||||
<meta property="og:title" content="{{ page.title }}" />
|
||||
<meta property="og:description" content="{{ page.description }}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:image" content="https://andwati.github.io/self.png" />
|
||||
<meta property="og:article:author" content="{{ config.extra.author }}" />
|
||||
<meta property="og:article:published_time" content="{{ page.date }}" />
|
||||
<meta property="og:article:section" content="Posts" />
|
||||
{% for tag in page.taxonomies.tags %}<meta property="og:article:tag" content="{{ tag }}" />{% endfor %}
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati_" />
|
||||
<meta property="twitter:title" content="{{ page.title }}" />
|
||||
<meta property="twitter:description" content="{{ page.description }}" />
|
||||
<meta property="twitter:image" content="https://andwati.github.io/self.png" />
|
||||
{% endblock meta %}
|
||||
{% block content %}
|
||||
<main>
|
||||
<article id="content">
|
||||
<header>
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ page_macros::meta(page=page) }}
|
||||
</header>
|
||||
{{ page.content | safe }}
|
||||
</article>
|
||||
</main>
|
||||
|
||||
{% include "comments.html" %}
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
@@ -0,0 +1,25 @@
|
||||
{% macro meta(page) %}
|
||||
<div class="post-meta">
|
||||
<time datetime="{{ page.date }}">{{ page.date | date(format="%B %d,%Y") }}</time>
|
||||
{% if page.taxonomies.tags %}
|
||||
<span class="accent">⬡</span>
|
||||
{% for tag in page.taxonomies.tags %}
|
||||
<a href="{{ get_taxonomy_url(kind="tags", name=tag) }}">#{{ tag }}</a>
|
||||
{%- if page.taxonomies.tags | length > 1 and loop.index != page.taxonomies.tags | length -%},{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div class="accent">☕ {{ page.reading_time }} minutes 📝 {{ page.word_count }}</div>
|
||||
</div>
|
||||
{% endmacro meta %}
|
||||
{% macro snippet(page) %}
|
||||
<article>
|
||||
<h2>
|
||||
<a href="{{ page.permalink }}">{{ page.title }}</a>
|
||||
</h2>
|
||||
{{ self::meta(page=page) }}
|
||||
{% if page.summary %}{{ page.summary | safe }}{% endif %}
|
||||
<nav>
|
||||
<a href="{{ page.permalink }}">Read More →</a>
|
||||
</nav>
|
||||
</article>
|
||||
{% endmacro snippet %}
|
||||
@@ -0,0 +1,13 @@
|
||||
{% extends "section.html" %}
|
||||
{% import "post_macros.html" as post_macros %}
|
||||
{% import "paginate.html" as paginate_macro %}
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
<h1>Posts</h1>
|
||||
</header>
|
||||
{% for page in paginator.pages %}{{ post_macros::snippet(page=page) }}{% endfor %}
|
||||
{% if paginator %}{{ paginate_macro::paginate() }}{% endif %}
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
@@ -0,0 +1,29 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}
|
||||
{{ section.title }}
|
||||
{% endblock title %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="{{ section.description }}" />
|
||||
<meta property="og:site_name" content="andwati.github.io" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:url" content="{{ section.permalink }}" />
|
||||
<meta property="og:title" content="{{ section.title }}" />
|
||||
<meta property="og:description" content="{{ section.description }}" />
|
||||
<meta property="og:image" content="https://andati.com/self.png" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati_" />
|
||||
<meta property="twitter:title" content="{{ section.title }}" />
|
||||
<meta property="twitter:description" content="{{ section.description }}" />
|
||||
<meta property="twitter:image" content="https://andwati.github.io/self.png" />
|
||||
{% endblock meta %}
|
||||
{% block links %}
|
||||
<link rel="canonical" href="{{ section.permalink }}" />
|
||||
{% endblock links %}
|
||||
{% block content %}
|
||||
<main>
|
||||
<header>
|
||||
<h1>{{ section.title }}</h1>
|
||||
</header>
|
||||
{{ section.content | safe }}
|
||||
</main>
|
||||
{% endblock content %}
|
||||
@@ -0,0 +1,38 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}
|
||||
Tags
|
||||
{% endblock title %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="All tags." />
|
||||
<meta property="og:site_name" content="andwati.github.io" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:url" content="{{ current_url }}" />
|
||||
<meta property="og:title" content="Tags" />
|
||||
<meta property="og:description" content="All tags." />
|
||||
<meta property="og:image" content="https://andwati.github.io/self.png" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati" />
|
||||
<meta property="twitter:title" content="Tags" />
|
||||
<meta property="twitter:description" content="All tags." />
|
||||
<meta property="twitter:image" content="https://andwati.github.io/self.png" />
|
||||
{% endblock meta %}
|
||||
{% block links %}
|
||||
<link rel="canonical" href="{{ current_url }}" />
|
||||
{% endblock links %}
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
<h1>All Tags</h1>
|
||||
</header>
|
||||
{% if terms %}
|
||||
<ul>
|
||||
{% for term in terms %}
|
||||
<li>
|
||||
<a href="{{ term.permalink }}">#{{ term.name }}</a> ({{ term.pages | length }})
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
@@ -0,0 +1,32 @@
|
||||
{% extends "index.html" %}
|
||||
{% import "post_macros.html" as post_macros %}
|
||||
{% block title %}
|
||||
Tag - {{ term.name }}
|
||||
{% endblock title %}
|
||||
{% block meta %}
|
||||
<meta name="description" content="Posts tagged as {{ term.name }}" />
|
||||
<meta property="og:site_name" content="andwati.github.io" />
|
||||
<meta property="og:locale" content="en-us" />
|
||||
<meta property="og:url" content="{{ current_url }}" />
|
||||
<meta property="og:title" content="Tag - {{ term.name }}" />
|
||||
<meta property="og:description" content="Posts tagged as {{ term.name }}" />
|
||||
<meta property="og:image" content="https://andwati.github.io/self.png" />
|
||||
<meta property="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@andwati_" />
|
||||
<meta property="twitter:title" content="Tag - {{ term.name }}" />
|
||||
<meta property="twitter:description"
|
||||
content="Posts tagged as {{ term.name }}" />
|
||||
<meta property="twitter:image" content="https://andwati.github.io/self.png" />
|
||||
{% endblock meta %}
|
||||
{% block links %}
|
||||
<link rel="canonical" href="{{ current_url }}" />
|
||||
{% endblock links %}
|
||||
{% block content %}
|
||||
<main id="content">
|
||||
<header>
|
||||
<h1>Posts Tagged as "{{ term.name }}"</h1>
|
||||
</header>
|
||||
{% for page in term.pages %}{{ post_macros::snippet(page=page) }}{% endfor %}
|
||||
</main>
|
||||
{% include "footer.html" %}
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user