format all with prettier
CrimsonTome
Rowan Clark
parent
06c52cb09a
commit
f890176bd3
217
.eleventy.js
217
.eleventy.js
|
|
@ -7,138 +7,135 @@ const markdownIt = require("markdown-it");
|
|||
const markdownItAnchor = require("markdown-it-anchor");
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
// Add plugins
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight);
|
||||
eleventyConfig.addPlugin(pluginNavigation);
|
||||
// Add plugins
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight);
|
||||
eleventyConfig.addPlugin(pluginNavigation);
|
||||
|
||||
// https://www.11ty.dev/docs/data-deep-merge/
|
||||
eleventyConfig.setDataDeepMerge(true);
|
||||
// https://www.11ty.dev/docs/data-deep-merge/
|
||||
eleventyConfig.setDataDeepMerge(true);
|
||||
|
||||
// Alias `layout: post` to `layout: layouts/post.njk`
|
||||
eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
|
||||
// Alias `layout: post` to `layout: layouts/post.njk`
|
||||
eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
|
||||
|
||||
eleventyConfig.addFilter("readableDate", dateObj => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat("dd LLL yyyy");
|
||||
});
|
||||
eleventyConfig.addFilter("readableDate", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat(
|
||||
"dd LLL yyyy"
|
||||
);
|
||||
});
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
|
||||
eleventyConfig.addFilter('htmlDateString', (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
|
||||
});
|
||||
// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
|
||||
eleventyConfig.addFilter("htmlDateString", (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd");
|
||||
});
|
||||
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
if (!Array.isArray(array) || array.length === 0) {
|
||||
return [];
|
||||
}
|
||||
if (n < 0) {
|
||||
return array.slice(n);
|
||||
}
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
if (!Array.isArray(array) || array.length === 0) {
|
||||
return [];
|
||||
}
|
||||
if (n < 0) {
|
||||
return array.slice(n);
|
||||
}
|
||||
|
||||
return array.slice(0, n);
|
||||
});
|
||||
return array.slice(0, n);
|
||||
});
|
||||
|
||||
// Return the smallest number argument
|
||||
eleventyConfig.addFilter("min", (...numbers) => {
|
||||
return Math.min.apply(null, numbers);
|
||||
});
|
||||
// Return the smallest number argument
|
||||
eleventyConfig.addFilter("min", (...numbers) => {
|
||||
return Math.min.apply(null, numbers);
|
||||
});
|
||||
|
||||
function filterTagList(tags) {
|
||||
return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
|
||||
}
|
||||
function filterTagList(tags) {
|
||||
return (tags || []).filter(
|
||||
(tag) => ["all", "nav", "post", "posts"].indexOf(tag) === -1
|
||||
);
|
||||
}
|
||||
|
||||
eleventyConfig.addFilter("filterTagList", filterTagList)
|
||||
eleventyConfig.addFilter("filterTagList", filterTagList);
|
||||
|
||||
// Create an array of all tags
|
||||
eleventyConfig.addCollection("tagList", function (collection) {
|
||||
let tagSet = new Set();
|
||||
collection.getAll().forEach(item => {
|
||||
(item.data.tags || []).forEach(tag => tagSet.add(tag));
|
||||
});
|
||||
// Create an array of all tags
|
||||
eleventyConfig.addCollection("tagList", function (collection) {
|
||||
let tagSet = new Set();
|
||||
collection.getAll().forEach((item) => {
|
||||
(item.data.tags || []).forEach((tag) => tagSet.add(tag));
|
||||
});
|
||||
|
||||
return filterTagList([...tagSet]);
|
||||
});
|
||||
return filterTagList([...tagSet]);
|
||||
});
|
||||
|
||||
// Copy the `img` and `css` folders to the output
|
||||
eleventyConfig.addPassthroughCopy("img");
|
||||
eleventyConfig.addPassthroughCopy("css");
|
||||
// Copy the `img` and `css` folders to the output
|
||||
eleventyConfig.addPassthroughCopy("img");
|
||||
eleventyConfig.addPassthroughCopy("css");
|
||||
|
||||
// Customize Markdown library and settings:
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true
|
||||
}).use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "direct-link",
|
||||
symbol: "#",
|
||||
level: [1, 2, 3, 4],
|
||||
}),
|
||||
slugify: eleventyConfig.getFilter("slug")
|
||||
});
|
||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||
// Customize Markdown library and settings:
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true,
|
||||
}).use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "direct-link",
|
||||
symbol: "#",
|
||||
level: [1, 2, 3, 4],
|
||||
}),
|
||||
slugify: eleventyConfig.getFilter("slug"),
|
||||
});
|
||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||
|
||||
// Override Browsersync defaults (used only with --serve)
|
||||
eleventyConfig.setBrowserSyncConfig({
|
||||
callbacks: {
|
||||
ready: function (err, browserSync) {
|
||||
const content_404 = fs.readFileSync('_site/404.html');
|
||||
// Override Browsersync defaults (used only with --serve)
|
||||
eleventyConfig.setBrowserSyncConfig({
|
||||
callbacks: {
|
||||
ready: function (err, browserSync) {
|
||||
const content_404 = fs.readFileSync("_site/404.html");
|
||||
|
||||
browserSync.addMiddleware("*", (req, res) => {
|
||||
// Provides the 404 content without redirect.
|
||||
res.writeHead(404, { "Content-Type": "text/html; charset=UTF-8" });
|
||||
res.write(content_404);
|
||||
res.end();
|
||||
});
|
||||
},
|
||||
},
|
||||
ui: false,
|
||||
ghostMode: false
|
||||
});
|
||||
browserSync.addMiddleware("*", (req, res) => {
|
||||
// Provides the 404 content without redirect.
|
||||
res.writeHead(404, { "Content-Type": "text/html; charset=UTF-8" });
|
||||
res.write(content_404);
|
||||
res.end();
|
||||
});
|
||||
},
|
||||
},
|
||||
ui: false,
|
||||
ghostMode: false,
|
||||
});
|
||||
|
||||
return {
|
||||
// Control which files Eleventy will process
|
||||
// e.g.: *.md, *.njk, *.html, *.liquid
|
||||
templateFormats: [
|
||||
"md",
|
||||
"njk",
|
||||
"html",
|
||||
"liquid"
|
||||
],
|
||||
return {
|
||||
// Control which files Eleventy will process
|
||||
// e.g.: *.md, *.njk, *.html, *.liquid
|
||||
templateFormats: ["md", "njk", "html", "liquid"],
|
||||
|
||||
// -----------------------------------------------------------------
|
||||
// If your site deploys to a subdirectory, change `pathPrefix`.
|
||||
// Don’t worry about leading and trailing slashes, we normalize these.
|
||||
// -----------------------------------------------------------------
|
||||
// If your site deploys to a subdirectory, change `pathPrefix`.
|
||||
// Don’t worry about leading and trailing slashes, we normalize these.
|
||||
|
||||
// If you don’t have a subdirectory, use "" or "/" (they do the same thing)
|
||||
// This is only used for link URLs (it does not affect your file structure)
|
||||
// Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
|
||||
// If you don’t have a subdirectory, use "" or "/" (they do the same thing)
|
||||
// This is only used for link URLs (it does not affect your file structure)
|
||||
// Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
|
||||
|
||||
// You can also pass this in on the command line using `--pathprefix`
|
||||
// You can also pass this in on the command line using `--pathprefix`
|
||||
|
||||
// Optional (default is shown)
|
||||
pathPrefix: "/",
|
||||
// -----------------------------------------------------------------
|
||||
// Optional (default is shown)
|
||||
pathPrefix: "/",
|
||||
// -----------------------------------------------------------------
|
||||
|
||||
// Pre-process *.md files with: (default: `liquid`)
|
||||
markdownTemplateEngine: "njk",
|
||||
// Pre-process *.md files with: (default: `liquid`)
|
||||
markdownTemplateEngine: "njk",
|
||||
|
||||
// Pre-process *.html files with: (default: `liquid`)
|
||||
htmlTemplateEngine: "njk",
|
||||
// Pre-process *.html files with: (default: `liquid`)
|
||||
htmlTemplateEngine: "njk",
|
||||
|
||||
// Opt-out of pre-processing global data JSON files: (default: `liquid`)
|
||||
dataTemplateEngine: false,
|
||||
// Opt-out of pre-processing global data JSON files: (default: `liquid`)
|
||||
dataTemplateEngine: false,
|
||||
|
||||
// These are all optional (defaults are shown):
|
||||
dir: {
|
||||
input: ".",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
output: "_site"
|
||||
}
|
||||
};
|
||||
// These are all optional (defaults are shown):
|
||||
dir: {
|
||||
input: ".",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
output: "_site",
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ name: Publish Docker image
|
|||
on:
|
||||
push:
|
||||
branches:
|
||||
- 'main'
|
||||
- "main"
|
||||
|
||||
jobs:
|
||||
push_to_registries:
|
||||
|
|
@ -20,20 +20,20 @@ jobs:
|
|||
steps:
|
||||
- name: Check out the repo
|
||||
uses: actions/checkout@v3
|
||||
|
||||
|
||||
- name: Log in to Docker Hub
|
||||
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_PASSWORD }}
|
||||
|
||||
|
||||
- name: Log in to the Container registry
|
||||
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
|
||||
- name: Extract metadata (tags, labels) for Docker
|
||||
id: meta
|
||||
uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
|
||||
|
|
@ -41,7 +41,7 @@ jobs:
|
|||
images: |
|
||||
${{ secrets.DOCKERHUB_USERNAME }}/blog
|
||||
ghcr.io/${{ github.repository }}
|
||||
|
||||
|
||||
- name: Build and push Docker images
|
||||
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
|
||||
with:
|
||||
|
|
|
|||
|
|
@ -29,7 +29,5 @@ jobs:
|
|||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: '18.x'
|
||||
- name: run Prettier
|
||||
run: npx prettier --check .
|
||||
- name: Run npm
|
||||
run: npm install && npm run build
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
_site/
|
||||
node_modules/
|
||||
package-lock.json
|
||||
debug.log
|
||||
|
|
@ -0,0 +1 @@
|
|||
{}
|
||||
7
404.md
7
404.md
|
|
@ -3,6 +3,7 @@ layout: layouts/home.njk
|
|||
permalink: 404.html
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
# Oops, content not found.
|
||||
|
||||
Go <a href="{{ '/' | url }}">home</a>.
|
||||
|
|
@ -12,6 +13,6 @@ Read more: https://www.11ty.dev/docs/quicktips/not-found/
|
|||
|
||||
This will work for both GitHub pages and Netlify:
|
||||
|
||||
* https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
|
||||
* https://www.netlify.com/docs/redirects/#custom-404
|
||||
#}
|
||||
- https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/
|
||||
- https://www.netlify.com/docs/redirects/#custom-404
|
||||
#}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ If for whatever reason you wish to make a pull request for this repository, whet
|
|||
|
||||
|
||||
|
||||
- Clone the repo to your device: `git clone https://github.com/your-github-username/crimsontome-blog.git`
|
||||
- Clone the repo to your device: `git clone https://github.com/your-github-username/crimsontome-blog.git`
|
||||
|
||||
- navigate to the repo on your device with `cd crimsontome-blog`
|
||||
- make your changes to files you want to with your preferred editor
|
||||
|
|
|
|||
21
README.md
21
README.md
|
|
@ -1,4 +1,5 @@
|
|||
# CrimsonTome's Blog
|
||||
|
||||
> My personal blog documenting my journey into open-source development alongside other things.
|
||||
> Created with 11ty, hosted in a docker container on my VPS
|
||||
|
||||
|
|
@ -10,23 +11,24 @@
|
|||
|
||||
## Development
|
||||
|
||||
- clone the repo
|
||||
- run `npm i` to install dependencies
|
||||
- npm `run serve`
|
||||
- make some changes and watch them update in the browser
|
||||
|
||||
- clone the repo
|
||||
- run `npm i` to install dependencies
|
||||
- npm `run serve`
|
||||
- make some changes and watch them update in the browser
|
||||
|
||||
## Building
|
||||
|
||||
### Node
|
||||
|
||||
- run `npm run build`
|
||||
- run `npm run build`
|
||||
|
||||
### Docker
|
||||
|
||||
The site can also be built and ran inside a docker container when you are in the base of the repo:
|
||||
- `sudo docker build -t crimsontome-blog .`
|
||||
- `sudo docker run -itd -p unused-port-number:80 crimsontome-blog`
|
||||
- visit `localhost:port` or `ip:port` if you are hosting on a VPS and the site should be available to view
|
||||
|
||||
- `sudo docker build -t crimsontome-blog .`
|
||||
- `sudo docker run -itd -p unused-port-number:80 crimsontome-blog`
|
||||
- visit `localhost:port` or `ip:port` if you are hosting on a VPS and the site should be available to view
|
||||
|
||||
## Dockerfile
|
||||
|
||||
|
|
@ -47,6 +49,7 @@ RUN rm -r /usr/share/nginx/html/
|
|||
COPY --from=builder /app/_site/ /usr/share/nginx/html/
|
||||
|
||||
```
|
||||
|
||||
### Ouroboros
|
||||
|
||||
Using a tool like [Ouroboros](https://github.com/pyouroboros/ouroboros), you can automatically update containers without the need for restarts. This site is setup with that so you can (instead of building it yourself like above) with `sudo docker run -d -p unused-port-number:80 crimsontome427:crimsontome-blog`
|
||||
|
|
|
|||
863
css/index.css
863
css/index.css
|
|
@ -1,443 +1,442 @@
|
|||
/* Colors */
|
||||
:root {
|
||||
--header: #333;
|
||||
--border: #c0c0c0;
|
||||
--text: #fff;
|
||||
--visited: #660066;
|
||||
--link: #fff;
|
||||
--bg: #fff;
|
||||
--code-bg: #f6f6f6;
|
||||
--header-text: #333;
|
||||
}
|
||||
|
||||
/* Global stylesheet */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
/*border: 3px solid #73AD21; toggle to debug borders */
|
||||
}
|
||||
|
||||
header {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
--header: #333;
|
||||
--border: #c0c0c0;
|
||||
--text: #fff;
|
||||
--visited: #660066;
|
||||
--link: #fff;
|
||||
--bg: #fff;
|
||||
--code-bg: #f6f6f6;
|
||||
--header-text: #333;
|
||||
}
|
||||
|
||||
/* Global stylesheet */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
/*border: 3px solid #73AD21; toggle to debug borders */
|
||||
}
|
||||
|
||||
header {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
text-align: justify;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 25% 1fr 25%;
|
||||
grid-template-areas: "left content right";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
background-image: linear-gradient(
|
||||
116deg,
|
||||
rgba(232, 232, 232, 0.03) 0%,
|
||||
rgba(232, 232, 232, 0.03) 10%,
|
||||
rgba(14, 14, 14, 0.03) 10%,
|
||||
rgba(14, 14, 14, 0.03) 66%,
|
||||
rgba(232, 232, 232, 0.03) 66%,
|
||||
rgba(232, 232, 232, 0.03) 72%,
|
||||
rgba(44, 44, 44, 0.03) 72%,
|
||||
rgba(44, 44, 44, 0.03) 81%,
|
||||
rgba(51, 51, 51, 0.03) 81%,
|
||||
rgba(51, 51, 51, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
109deg,
|
||||
rgba(155, 155, 155, 0.03) 0%,
|
||||
rgba(155, 155, 155, 0.03) 23%,
|
||||
rgba(30, 30, 30, 0.03) 23%,
|
||||
rgba(30, 30, 30, 0.03) 63%,
|
||||
rgba(124, 124, 124, 0.03) 63%,
|
||||
rgba(124, 124, 124, 0.03) 73%,
|
||||
rgba(195, 195, 195, 0.03) 73%,
|
||||
rgba(195, 195, 195, 0.03) 84%,
|
||||
rgba(187, 187, 187, 0.03) 84%,
|
||||
rgba(187, 187, 187, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
79deg,
|
||||
rgba(254, 254, 254, 0.03) 0%,
|
||||
rgba(254, 254, 254, 0.03) 27%,
|
||||
rgba(180, 180, 180, 0.03) 27%,
|
||||
rgba(180, 180, 180, 0.03) 33%,
|
||||
rgba(167, 167, 167, 0.03) 33%,
|
||||
rgba(167, 167, 167, 0.03) 34%,
|
||||
rgba(68, 68, 68, 0.03) 34%,
|
||||
rgba(68, 68, 68, 0.03) 63%,
|
||||
rgba(171, 171, 171, 0.03) 63%,
|
||||
rgba(171, 171, 171, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
109deg,
|
||||
rgba(71, 71, 71, 0.03) 0%,
|
||||
rgba(71, 71, 71, 0.03) 3%,
|
||||
rgba(97, 97, 97, 0.03) 3%,
|
||||
rgba(97, 97, 97, 0.03) 40%,
|
||||
rgba(40, 40, 40, 0.03) 40%,
|
||||
rgba(40, 40, 40, 0.03) 55%,
|
||||
rgba(5, 5, 5, 0.03) 55%,
|
||||
rgba(5, 5, 5, 0.03) 73%,
|
||||
rgba(242, 242, 242, 0.03) 73%,
|
||||
rgba(242, 242, 242, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
271deg,
|
||||
rgba(70, 70, 70, 0.03) 0%,
|
||||
rgba(70, 70, 70, 0.03) 11%,
|
||||
rgba(178, 178, 178, 0.03) 11%,
|
||||
rgba(178, 178, 178, 0.03) 23%,
|
||||
rgba(28, 28, 28, 0.03) 23%,
|
||||
rgba(28, 28, 28, 0.03) 72%,
|
||||
rgba(152, 152, 152, 0.03) 72%,
|
||||
rgba(152, 152, 152, 0.03) 86%,
|
||||
rgba(43, 43, 43, 0.03) 86%,
|
||||
rgba(43, 43, 43, 0.03) 100%
|
||||
),
|
||||
linear-gradient(90deg, rgb(27, 27, 27), rgb(1, 1, 1));
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
body {
|
||||
display: grid;
|
||||
text-align: justify;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 25% 1fr 25%;
|
||||
grid-template-areas: "left content right";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
background-image: linear-gradient(
|
||||
116deg,
|
||||
rgba(232, 232, 232, 0.03) 0%,
|
||||
rgba(232, 232, 232, 0.03) 10%,
|
||||
rgba(14, 14, 14, 0.03) 10%,
|
||||
rgba(14, 14, 14, 0.03) 66%,
|
||||
rgba(232, 232, 232, 0.03) 66%,
|
||||
rgba(232, 232, 232, 0.03) 72%,
|
||||
rgba(44, 44, 44, 0.03) 72%,
|
||||
rgba(44, 44, 44, 0.03) 81%,
|
||||
rgba(51, 51, 51, 0.03) 81%,
|
||||
rgba(51, 51, 51, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
109deg,
|
||||
rgba(155, 155, 155, 0.03) 0%,
|
||||
rgba(155, 155, 155, 0.03) 23%,
|
||||
rgba(30, 30, 30, 0.03) 23%,
|
||||
rgba(30, 30, 30, 0.03) 63%,
|
||||
rgba(124, 124, 124, 0.03) 63%,
|
||||
rgba(124, 124, 124, 0.03) 73%,
|
||||
rgba(195, 195, 195, 0.03) 73%,
|
||||
rgba(195, 195, 195, 0.03) 84%,
|
||||
rgba(187, 187, 187, 0.03) 84%,
|
||||
rgba(187, 187, 187, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
79deg,
|
||||
rgba(254, 254, 254, 0.03) 0%,
|
||||
rgba(254, 254, 254, 0.03) 27%,
|
||||
rgba(180, 180, 180, 0.03) 27%,
|
||||
rgba(180, 180, 180, 0.03) 33%,
|
||||
rgba(167, 167, 167, 0.03) 33%,
|
||||
rgba(167, 167, 167, 0.03) 34%,
|
||||
rgba(68, 68, 68, 0.03) 34%,
|
||||
rgba(68, 68, 68, 0.03) 63%,
|
||||
rgba(171, 171, 171, 0.03) 63%,
|
||||
rgba(171, 171, 171, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
109deg,
|
||||
rgba(71, 71, 71, 0.03) 0%,
|
||||
rgba(71, 71, 71, 0.03) 3%,
|
||||
rgba(97, 97, 97, 0.03) 3%,
|
||||
rgba(97, 97, 97, 0.03) 40%,
|
||||
rgba(40, 40, 40, 0.03) 40%,
|
||||
rgba(40, 40, 40, 0.03) 55%,
|
||||
rgba(5, 5, 5, 0.03) 55%,
|
||||
rgba(5, 5, 5, 0.03) 73%,
|
||||
rgba(242, 242, 242, 0.03) 73%,
|
||||
rgba(242, 242, 242, 0.03) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
271deg,
|
||||
rgba(70, 70, 70, 0.03) 0%,
|
||||
rgba(70, 70, 70, 0.03) 11%,
|
||||
rgba(178, 178, 178, 0.03) 11%,
|
||||
rgba(178, 178, 178, 0.03) 23%,
|
||||
rgba(28, 28, 28, 0.03) 23%,
|
||||
rgba(28, 28, 28, 0.03) 72%,
|
||||
rgba(152, 152, 152, 0.03) 72%,
|
||||
rgba(152, 152, 152, 0.03) 86%,
|
||||
rgba(43, 43, 43, 0.03) 86%,
|
||||
rgba(43, 43, 43, 0.03) 100%
|
||||
),
|
||||
linear-gradient(90deg, rgb(27, 27, 27), rgb(1, 1, 1));
|
||||
background-size: 100% 100%;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "left" "right" "content";
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
body {
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "left" "right" "content";
|
||||
}
|
||||
|
||||
.postlist .postlist-item {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-template-areas: "number title title" "time time tags";
|
||||
}
|
||||
|
||||
.postlist-item:before {
|
||||
grid-area: number;
|
||||
}
|
||||
.postlist-link {
|
||||
grid-area: title;
|
||||
}
|
||||
.postlist-date {
|
||||
grid-area: time;
|
||||
}
|
||||
.post-tags {
|
||||
grid-area: tags;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.postlist .postlist-item {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-template-areas: "number title title" "time time tags";
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: right;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
.tmpl-post li {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a[href]:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
grid-area: content;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
main :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: left;
|
||||
color: var(--text);
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono",
|
||||
"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
|
||||
"Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
|
||||
"Courier New", Courier, monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 14px;
|
||||
line-height: 1.375;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*background-color: var(--code-bg)*/
|
||||
code {
|
||||
word-break: break-all !important;
|
||||
}
|
||||
|
||||
.highlight-line {
|
||||
display: block;
|
||||
padding: 0.125em 1em;
|
||||
text-decoration: none;
|
||||
/* override del, ins, mark defaults */
|
||||
color: inherit;
|
||||
/* override del, ins, mark defaults */
|
||||
}
|
||||
|
||||
/* allow highlighting empty lines */
|
||||
.highlight-line:empty:before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
/* avoid double line breaks when using display: block; */
|
||||
.highlight-line + br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlight-line-isdir {
|
||||
color: #b0b0b0;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.highlight-line-active {
|
||||
background-color: #444;
|
||||
background-color: hsla(0, 0%, 27%, 0.8);
|
||||
}
|
||||
|
||||
.highlight-line-add {
|
||||
background-color: #45844b;
|
||||
}
|
||||
|
||||
.highlight-line-remove {
|
||||
background-color: #902f2f;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.home {
|
||||
padding: 0 1rem;
|
||||
float: left;
|
||||
margin: 1rem 0;
|
||||
/* 16px /16 */
|
||||
font-size: 1em;
|
||||
/* 16px /16 */
|
||||
}
|
||||
|
||||
.home :link:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
.nav {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.nav-item a[href]:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Posts list */
|
||||
.postlist {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.postlist-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
counter-increment: start-from -1;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
|
||||
.postlist-item:before {
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
content: "" counter(start-from, decimal-leading-zero) ". ";
|
||||
line-height: 100%;
|
||||
text-align: right;
|
||||
grid-area: number;
|
||||
}
|
||||
|
||||
.postlist-date,
|
||||
.postlist-item:before {
|
||||
font-size: 0.8125em;
|
||||
/* 13px /16 */
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.postlist-date {
|
||||
word-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.postlist-link {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
text-underline-position: from-font;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-thickness: 1px;
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.postlist-item-active .postlist-link {
|
||||
font-weight: bold;
|
||||
.postlist-date {
|
||||
grid-area: time;
|
||||
}
|
||||
|
||||
.tmpl-home .postlist-link {
|
||||
font-size: 1.1875em;
|
||||
/* 19px /16 */
|
||||
font-weight: 700;
|
||||
.post-tags {
|
||||
grid-area: tags;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.post-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75em;
|
||||
/* 12px /16 */
|
||||
padding: 0.08333333333333em 0.3333333333333em;
|
||||
/* 1px 4px /12 */
|
||||
margin-left: 0.6666666666667em;
|
||||
/* 8px /12 */
|
||||
margin-top: 0.5em;
|
||||
/* 6px /12 */
|
||||
margin-bottom: 0.5em;
|
||||
/* 6px /12 */
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.25em;
|
||||
/* 3px /12 */
|
||||
text-decoration: none;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
a[href].post-tag,
|
||||
a[href].post-tag:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a[href].post-tag:hover,
|
||||
a[href].post-tag:focus {
|
||||
background-color: var(--header);
|
||||
}
|
||||
|
||||
.postlist-item > .post-tag {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.warning {
|
||||
background-color: #ffc;
|
||||
padding: 1em 0.625em;
|
||||
/* 16px 10px /16 */
|
||||
}
|
||||
|
||||
.warning ol:only-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Direct Links / Markdown Headers */
|
||||
.direct-link {
|
||||
font-family: sans-serif;
|
||||
text-decoration: none;
|
||||
font-style: normal;
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
a[href].direct-link,
|
||||
a[href].direct-link:visited {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
a[href].direct-link:focus,
|
||||
a[href].direct-link:focus:visited,
|
||||
:hover > a[href].direct-link,
|
||||
:hover > a[href].direct-link:visited {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.time-and-tags {
|
||||
align-content: center;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto;
|
||||
grid-template-areas: "content";
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tandt {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: right;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
.tmpl-post li {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
a[href]:visited {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
grid-area: content;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
main :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: left;
|
||||
color: var(--text);
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono",
|
||||
"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
|
||||
"Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L",
|
||||
"Courier New", Courier, monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 14px;
|
||||
line-height: 1.375;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*background-color: var(--code-bg)*/
|
||||
code {
|
||||
word-break: break-all !important;
|
||||
}
|
||||
|
||||
.highlight-line {
|
||||
display: block;
|
||||
padding: 0.125em 1em;
|
||||
text-decoration: none;
|
||||
/* override del, ins, mark defaults */
|
||||
color: inherit;
|
||||
/* override del, ins, mark defaults */
|
||||
}
|
||||
|
||||
/* allow highlighting empty lines */
|
||||
.highlight-line:empty:before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
/* avoid double line breaks when using display: block; */
|
||||
.highlight-line + br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlight-line-isdir {
|
||||
color: #b0b0b0;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.highlight-line-active {
|
||||
background-color: #444;
|
||||
background-color: hsla(0, 0%, 27%, 0.8);
|
||||
}
|
||||
|
||||
.highlight-line-add {
|
||||
background-color: #45844b;
|
||||
}
|
||||
|
||||
.highlight-line-remove {
|
||||
background-color: #902f2f;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.home {
|
||||
padding: 0 1rem;
|
||||
float: left;
|
||||
margin: 1rem 0;
|
||||
/* 16px /16 */
|
||||
font-size: 1em;
|
||||
/* 16px /16 */
|
||||
}
|
||||
|
||||
.home :link:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
.nav {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
float: left;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.nav-item a[href]:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Posts list */
|
||||
.postlist {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.postlist-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
counter-increment: start-from -1;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.postlist-item:before {
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
content: "" counter(start-from, decimal-leading-zero) ". ";
|
||||
line-height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlist-date,
|
||||
.postlist-item:before {
|
||||
font-size: 0.8125em;
|
||||
/* 13px /16 */
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.postlist-date {
|
||||
word-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.postlist-link {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
text-underline-position: from-font;
|
||||
text-underline-offset: 0;
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
.postlist-item-active .postlist-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tmpl-home .postlist-link {
|
||||
font-size: 1.1875em;
|
||||
/* 19px /16 */
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.post-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75em;
|
||||
/* 12px /16 */
|
||||
padding: 0.08333333333333em 0.3333333333333em;
|
||||
/* 1px 4px /12 */
|
||||
margin-left: 0.6666666666667em;
|
||||
/* 8px /12 */
|
||||
margin-top: 0.5em;
|
||||
/* 6px /12 */
|
||||
margin-bottom: 0.5em;
|
||||
/* 6px /12 */
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.25em;
|
||||
/* 3px /12 */
|
||||
text-decoration: none;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
a[href].post-tag,
|
||||
a[href].post-tag:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a[href].post-tag:hover,
|
||||
a[href].post-tag:focus {
|
||||
background-color: var(--header);
|
||||
}
|
||||
|
||||
.postlist-item > .post-tag {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.warning {
|
||||
background-color: #ffc;
|
||||
padding: 1em 0.625em;
|
||||
/* 16px 10px /16 */
|
||||
}
|
||||
|
||||
.warning ol:only-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Direct Links / Markdown Headers */
|
||||
.direct-link {
|
||||
font-family: sans-serif;
|
||||
text-decoration: none;
|
||||
font-style: normal;
|
||||
margin-left: 0.1em;
|
||||
}
|
||||
|
||||
a[href].direct-link,
|
||||
a[href].direct-link:visited {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
a[href].direct-link:focus,
|
||||
a[href].direct-link:focus:visited,
|
||||
:hover > a[href].direct-link,
|
||||
:hover > a[href].direct-link:visited {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.time-and-tags {
|
||||
align-content: center;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto;
|
||||
grid-template-areas: "content";
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tandt {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,90 +1,104 @@
|
|||
code[class*="language-"], pre[class*="language-"] {
|
||||
font-size: 14px;
|
||||
line-height: 1.375;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
font-size: 14px;
|
||||
line-height: 1.375;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
background: #272822;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
pre[class*="language-"] {
|
||||
padding: 1.5em 1.5em;
|
||||
margin: .5em 0;
|
||||
padding: 1.5em 1.5em;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata {
|
||||
color: #75715e;
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #75715e;
|
||||
}
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
color: #f8f8f2;
|
||||
}
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.operator, .token.boolean, .token.number {
|
||||
color: #fd971f;
|
||||
.token.operator,
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #fd971f;
|
||||
}
|
||||
.token.property {
|
||||
color: #f4bf75;
|
||||
color: #f4bf75;
|
||||
}
|
||||
.token.tag {
|
||||
color: #66d9ef;
|
||||
color: #66d9ef;
|
||||
}
|
||||
.token.string {
|
||||
color: #a1efe4;
|
||||
color: #a1efe4;
|
||||
}
|
||||
.token.selector {
|
||||
color: #ae81ff;
|
||||
color: #ae81ff;
|
||||
}
|
||||
.token.attr-name {
|
||||
color: #fd971f;
|
||||
color: #fd971f;
|
||||
}
|
||||
.token.entity, .token.url, .language-css .token.string, .style .token.string {
|
||||
color: #a1efe4;
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a1efe4;
|
||||
}
|
||||
.token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit {
|
||||
color: #a6e22e;
|
||||
.token.attr-value,
|
||||
.token.keyword,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: #a6e22e;
|
||||
}
|
||||
.token.statement, .token.regex, .token.atrule {
|
||||
color: #a1efe4;
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.atrule {
|
||||
color: #a1efe4;
|
||||
}
|
||||
.token.placeholder, .token.variable {
|
||||
color: #66d9ef;
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #66d9ef;
|
||||
}
|
||||
.token.deleted {
|
||||
text-decoration: line-through;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.token.inserted {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
.token.important, .token.bold {
|
||||
font-weight: bold;
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.important {
|
||||
color: #f92672;
|
||||
color: #f92672;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
pre > code.highlight {
|
||||
outline: 0.4em solid #f92672;
|
||||
outline-offset: .4em;
|
||||
outline: 0.4em solid #f92672;
|
||||
outline-offset: 0.4em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
"@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
|
||||
"luxon": "^1.26.0",
|
||||
"markdown-it": "^12.1.0",
|
||||
"markdown-it-anchor": "^8.1.2"
|
||||
"markdown-it-anchor": "^8.1.2",
|
||||
"prettier": "2.7.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
posts/PVE.md
14
posts/PVE.md
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: An introduction to a potential series on Proxmox
|
||||
title: An introduction to a potential series on Proxmox
|
||||
description: An introduction to the Proxmox Virtual Environment
|
||||
date: 2022-02-10
|
||||
tags:
|
||||
- PVE
|
||||
- VMs
|
||||
- VMs
|
||||
- linux
|
||||
layout: layouts/post.njk
|
||||
---
|
||||
|
|
@ -12,6 +12,7 @@ layout: layouts/post.njk
|
|||
This post has been in the works since November 2021, or rather I thought of around then, it hasn't been until February 2022 that I have started drafting anything, as such early details about setting this up may require reading the PVE Documentation more than if I could explain it all. This series is less of a tutorial and more so a collection of my experiences working with the projects. With that in mind let's begin.
|
||||
|
||||
# Why am I doing this?
|
||||
|
||||
Virtual machines can lead to a good learning experience, whether it’s trying out that new Linux distribution that everyone won’t stop telling you about or testing things out in a safe environment. It’s undeniable that VMs have their usage.
|
||||
|
||||
I think my first experience trying out a VM was when I decided to try out Linux ‘properly’ after using a Raspberry Pi for about a year. As a longtime Windows user I felt a bit intimidated with all the variety in what was available to me, and the list of distros available is only expanding. By the reccomendation of a friend who had been using Linux for a few years, I tried out [Linux Mint](https://linuxmint.com/). This is a rather beginner friendly distribution, especially for those coming from Windows like myself.
|
||||
|
|
@ -19,7 +20,8 @@ I think my first experience trying out a VM was when I decided to try out Linux
|
|||
I don’t remember much about it apart that because of the specs of my laptop, it ran super slowly. So why am i bringing this up now? Recently a member of Freeside very kindly gave me one of their old desktops and after talking with some other members I decided to install [Proxmox VE](https://www.proxmox.com/en/proxmox-ve) onto it.
|
||||
|
||||
# The setup
|
||||
Proxmox wasn't very hard to setup, with some help from a Freesider that knew what they were doing we quickly set it up along with transferring over some OS images and setting up a few testing virtual machines.
|
||||
|
||||
Proxmox wasn't very hard to setup, with some help from a Freesider that knew what they were doing we quickly set it up along with transferring over some OS images and setting up a few testing virtual machines.
|
||||
|
||||
A few weeks after that, after a flatmate donated a second NIC (the first one is used to connect to my laptop), I could connect the server to the internet and begin updating everything. The NIC took a while to setup but once working I've not had issues with it since. So now I could seriously begin the project. Over Christmas I received a [Unifi Switch](https://store.ui.com/collections/unifi-network-switching/products/usw-flex-mini) so it was time to set up the virtual machines for that along with [OPNsense](https://opnsense.org/), those two would handle the networking.
|
||||
|
||||
|
|
@ -27,15 +29,17 @@ OPNsense was a bit of a pain to setup, with most of it being my fault and not no
|
|||
|
||||
The VM containing the Unifi software for running the switch was also a little bit of a pain to setup, as the version of Java it ships with doesn't actually work. In the end Java 8 worked (instead of a more up to date 17, another later version may work but I went with 8 as I've seen most people use that). However once tha Java issue was sorted I can't remember any issues with the switch so that's promising.
|
||||
|
||||
Along with networking, I decided to setup a [TrueNAS](https://www.truenas.com/) VM for storing backups from my laptop. This did not take long to setup and with some troubleshooting of the NFS share, I could begin backing up files from my laptop. Using a combination of `rsync` to transfer the data and `fdupes` for deduplication ([ZFS deduplication](https://www.truenas.com/docs/references/zfsdeduplication/) is very intensive, way outside of the scope of the current specs of the server). The whole process took around two days but at least now I have a backup of all my files should I need to restore them. I ordered another hard drive to act as a mirror, a [WD Red NAS](https://www.westerndigital.com/en-ie/products/internal-drives/wd-red-sata-hdd) drive.
|
||||
Along with networking, I decided to setup a [TrueNAS](https://www.truenas.com/) VM for storing backups from my laptop. This did not take long to setup and with some troubleshooting of the NFS share, I could begin backing up files from my laptop. Using a combination of `rsync` to transfer the data and `fdupes` for deduplication ([ZFS deduplication](https://www.truenas.com/docs/references/zfsdeduplication/) is very intensive, way outside of the scope of the current specs of the server). The whole process took around two days but at least now I have a backup of all my files should I need to restore them. I ordered another hard drive to act as a mirror, a [WD Red NAS](https://www.westerndigital.com/en-ie/products/internal-drives/wd-red-sata-hdd) drive.
|
||||
|
||||
I also plan to:
|
||||
|
||||
- set up a personal Git server using [Gitea](https://gitea.io/en-us/)
|
||||
- set up [L2ARC](https://www.truenas.com/docs/references/l2arc/) for my NAS
|
||||
- set up [FreeIPA](https://www.freeipa.org/page/Main_Page)
|
||||
- set up various other [AAA](https://en.wikipedia.org/wiki/AAA_(computer_security))
|
||||
- set up various other [AAA](<https://en.wikipedia.org/wiki/AAA_(computer_security)>)
|
||||
- set up [VLAN Tagging](https://documentation.meraki.com/General_Administration/Tools_and_Troubleshooting/Fundamentals_of_802.1Q_VLAN_Tagging)
|
||||
- set up [Terraform](https://www.terraform.io/)
|
||||
|
||||
# Current issues
|
||||
|
||||
Sadly at present I am unable to continue working on the server as due to a somewhat unknown cause only 4GB out of the 24GB of RAM is displaying which prevents my VMs from starting. This may be an issue with the motherboard however I cannot be 100% sure until I open it up which will happen sometime in the future.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: VPS setup 2, electric boogaloo
|
||||
title: VPS setup 2, electric boogaloo
|
||||
description: An update on services I'm running on my VPS
|
||||
date: 2022-09-04
|
||||
tags:
|
||||
|
|
@ -15,7 +15,6 @@ layout: layouts/post.njk
|
|||
|
||||
Back in July, I wrote a post detailing [what I run on my VPS](https://blog.crimsontome.com/posts/my-current-vps-setup), some things have changed since then so I thought I'd come back with an update. If you haven't read the previous post I suggest you do. p.s. Sorry in advance for any awful puns.
|
||||
|
||||
|
||||
## A change to be made
|
||||
|
||||
Firstly, I switched VPS providers from Digital Ocean (DO) to [OVH](ovhcloud.com/). This was for a few reasons, the prices for droplets at DO were going up, meaning my free credits from the [GitHub student developer pack](https://education.github.com/pack) would not last me as long as I first thought. In addition to this, at around the time the price increase was announced OVH was having a summer sale, dramatically decreaseing the prices of some of their tiers. The VPS I run now is (on paper) twice as fast as the DO droplet I was using. With a dual core CPU and 4GB of RAM, compared to a single core with 2GB of RAM. The OVH VPS also comes with a larger 50GB SSD. In theory these specs are more than good enough for what I am plan to run and what I currently use it for.
|
||||
|
|
@ -40,12 +39,13 @@ To clone all the repos I needed to get back up and running, I uploaded an SSH ke
|
|||
|
||||
```
|
||||
|
||||
There is however perhaps a more efficient way of doing this, instead of manually cloning all of your repos one by one, using the [GitHub CLI](https://cli.github.com/) and a small shell script. Once `gh` is linked to your GitHub account you can run the following script to clone every repo you own.
|
||||
There is however perhaps a more efficient way of doing this, instead of manually cloning all of your repos one by one, using the [GitHub CLI](https://cli.github.com/) and a small shell script. Once `gh` is linked to your GitHub account you can run the following script to clone every repo you own.
|
||||
|
||||
```shell
|
||||
gh repo list --limit num-of-repos |awk '{print $1}' | xargs -L1 gh repo clone
|
||||
```
|
||||
|
||||
Once all my repos had been cloned, I moved them to their appropriate directories and could more or less just run them as I would normally with minimal tweaking. The main things that needed work was Cloudflare DNS and Nginx Proxy Manager but that was just updating the IP address to the new server.
|
||||
Once all my repos had been cloned, I moved them to their appropriate directories and could more or less just run them as I would normally with minimal tweaking. The main things that needed work was Cloudflare DNS and Nginx Proxy Manager but that was just updating the IP address to the new server.
|
||||
|
||||
## What has stayed the same
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ My [git server](https://git.crimsontome.com) is still alive but doesn't see much
|
|||
|
||||
### Saying goodbye
|
||||
|
||||
I no longer run a [PrivateBin](https://privatebin.info/) server as I could never get it to function properly, but am still looking for other similar variations. I'll get one to work eventually.
|
||||
I no longer run a [PrivateBin](https://privatebin.info/) server as I could never get it to function properly, but am still looking for other similar variations. I'll get one to work eventually.
|
||||
|
||||
I have also stopped using [Dashy](https://dashy.to/) and [Netdata](https://github.com/netdata/netdata) for my server dashboard and metrics respectively. I found I didn't have much of a use for the dashboard and NetData was too memory intensive on the old server so I never bothered setting it up on this server, though it would probably work just fine.
|
||||
|
||||
|
|
@ -69,15 +69,15 @@ I have also stopped using [Dashy](https://dashy.to/) and [Netdata](https://githu
|
|||
|
||||
Perhaps the most helpful addition to my server is [Ouroboros](https://github.com/pyouroboros/ouroboros), it is used to automate the updating of containers. I wrote a [blog post](https://blog.crimsontome.com/posts/automating-container-updates-with-ouroboros/) about it if you are interested.
|
||||
|
||||
Instead of NetData's advanced metrics, I decided to go with something much more lightweight called [Glances](https://github.com/nicolargo/glances), it functions quite like `top` but has some more details and can be viewed in a browser too.
|
||||
Instead of NetData's advanced metrics, I decided to go with something much more lightweight called [Glances](https://github.com/nicolargo/glances), it functions quite like `top` but has some more details and can be viewed in a browser too.
|
||||
|
||||
As a form of secret manageent, I use [vaultwarden](https://github.com/dani-garcia/vaultwarden/), though this has not seen a lot of use recently, so I may scrap this.
|
||||
As a form of secret manageent, I use [vaultwarden](https://github.com/dani-garcia/vaultwarden/), though this has not seen a lot of use recently, so I may scrap this.
|
||||
|
||||
[Uptime Kuma](https://github.com/louislam/uptime-kuma) is used to monitor some sites hosted by friends and Freeside and can be seen [here](https://uptime.crimsontome.com/status/uptime)
|
||||
|
||||
### Things I may come back to
|
||||
|
||||
- Honeypots including [Honeyport](https://github.com/securitygeneration/Honeyport)
|
||||
- A [factorio map site](https://github.com/ProkopRandacek/FactorioFotograf) inspired by [sbrl's world](https://public.mooncarrot.space/Mazeworld64/)
|
||||
- A [Spotify profile dashboard](https://github.com/Yooooomi/your_spotify)
|
||||
- A Discord bot for fetching information about Magic The Gathering cards
|
||||
- Honeypots including [Honeyport](https://github.com/securitygeneration/Honeyport)
|
||||
- A [factorio map site](https://github.com/ProkopRandacek/FactorioFotograf) inspired by [sbrl's world](https://public.mooncarrot.space/Mazeworld64/)
|
||||
- A [Spotify profile dashboard](https://github.com/Yooooomi/your_spotify)
|
||||
- A Discord bot for fetching information about Magic The Gathering cards
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
---
|
||||
title: A ramble about GitHub
|
||||
title: A ramble about GitHub
|
||||
description: An introduction to GitHub from someone fairly new to it
|
||||
date: 2021-11-17
|
||||
tags:
|
||||
- github
|
||||
layout: layouts/post.njk
|
||||
|
||||
---
|
||||
|
||||
<br>
|
||||
<img src="/img/GitHub_Logo_White.png" alt="GHLogo" width="200"/>
|
||||
|
||||
## A ramble about GitHub by someone fairly new to it
|
||||
|
||||
### (This may become a series of posts on GitHub)
|
||||
|
||||
#### First, a little background information
|
||||
|
||||
A few years ago, back when I was in secondary school doing some group Python programming in year 9 I though to myself something like: This is interesting, working in a team on different parts then compiling them all together. But working on it all at the same time is a bit awkward to do. Is there a better way of doing this?
|
||||
Introducing GitHub, the answer to all my questions. Sadly I only found out about GitHub's purpose years later once I was in college, and even then I never used it to contribute to open-source projects with others. I just browsed through lots of programs and just thought it was a place to archive code.
|
||||
|
||||
#### What about now?
|
||||
|
||||
Fast forward a few years to September 2021 and I had began to use GitHub 'properly', forking repos and making my own versions of things alongside working with others on communal projects like the [Freeside Student Resource List](https://github.com/FreesideHull/StudentResources) and adding my blog to [HullBlogs](https://hullblogs.com/). Even the site you're looking at now relies on GitHub to run as Netlify fetches all the data is needs from the repository. I can honestly say it feels a bit like magic, the difference between contributing to projects years ago in secondary school and now is like night and day. It's always better when there's a community of people there to help you out, and for you to help yourself. For me that's Freeside at Hull. I've met a lot of people that have helped me get started with GitHub, setting up projects (this site in particular) and it's wonderful to feel like you're all part of a community. Anyway, I'm getting a bit sidetracked, what does GitHub allow you to do?
|
||||
As mentioned, GitHub allows you to contribute to open-source projects. If you don't own the repository you want to contribute to this will mean it forking (making a personal copy) it, making your changes and then submitting a pull request (asking those with write access to 'pull' your changes into the main project). If all goes well your changes will be accepted and your work will now be part of something much larger. GitHub has its own resources on how to [get started](https://docs.github.com/en/get-started/quickstart) and also a [cheat sheet](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||
As mentioned, GitHub allows you to contribute to open-source projects. If you don't own the repository you want to contribute to this will mean it forking (making a personal copy) it, making your changes and then submitting a pull request (asking those with write access to 'pull' your changes into the main project). If all goes well your changes will be accepted and your work will now be part of something much larger. GitHub has its own resources on how to [get started](https://docs.github.com/en/get-started/quickstart) and also a [cheat sheet](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||
If you happen to be a University of Hull student and don't already know about it, the Student Resource List mentioned above is full of lots of handy materials.
|
||||
If you're looking for projects to contribute to <https://www.firsttimersonly.com/> has a list of sites that compile projects looking for new users/those with less experience. Have a scroll through and after some time (depending on what you want to make and your skill level with what is needed) you should find something you'd be interested in. Usually a repo will have a `CONTRIBUTING.md` file containing guidelines on how to make a pull request, so make sure you pay attention to it or your request may be denied.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Automating container updates with Ouroboros
|
||||
title: Automating container updates with Ouroboros
|
||||
description: How to automate container updates with Ouroboros
|
||||
date: 2022-08-25
|
||||
tags:
|
||||
|
|
@ -10,26 +10,28 @@ tags:
|
|||
- how-to
|
||||
layout: layouts/post.njk
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
A few months ago, I started learning about containers using Docker. This has certainly been a fun experience overall (though sometimes frustrating 😛). One *issue* with this is rebuilding the container upon every update when you want to deploy the new image.
|
||||
A few months ago, I started learning about containers using Docker. This has certainly been a fun experience overall (though sometimes frustrating 😛). One _issue_ with this is rebuilding the container upon every update when you want to deploy the new image.
|
||||
|
||||
There is however a solution to this problem thankfully. A good friend [Kieran](https://github.com/kieranrobson "Kieran's GitHub account"), who also started learning Docker at around the same time as myself introduced me to [Ouroboros](https://github.com/pyouroboros/ouroboros "Ouroboris Git repo"). Kieran uses this to keep his many Discord bots up to date without having to manually rebuild and bring up each container over and over again, and this seems to work pretty well. It is unfortunate that the project has now been abandonned (last commit in 2020). However the software still functions as it should. The following guide assumes you have some basic experience with Docker. If you have no experience then there are a couple of good posts by Kieran Robson [here](https://docs.kieranrobson.com/tags/docker/) on how to setup docker and portainer.
|
||||
|
||||
|
||||
To set this up you will need:
|
||||
- Docker
|
||||
- a [DockerHub](https://hub.docker.com/) account
|
||||
- A GitHub repo with a functioning `Dockerfile` in
|
||||
|
||||
- Docker
|
||||
- a [DockerHub](https://hub.docker.com/) account
|
||||
- A GitHub repo with a functioning `Dockerfile` in
|
||||
|
||||
<break>
|
||||
|
||||
## Docker CI
|
||||
- go to `https://github.com/your-username/your-repo/actions/new` and click on `set up a workflow yourself`.
|
||||
- remove the existing yaml in the auto generated file and copy the contents from below into it
|
||||
```yaml
|
||||
# This workflow uses actions that are not certified by GitHub.
|
||||
## Docker CI
|
||||
|
||||
- go to `https://github.com/your-username/your-repo/actions/new` and click on `set up a workflow yourself`.
|
||||
- remove the existing yaml in the auto generated file and copy the contents from below into it
|
||||
|
||||
```yaml
|
||||
# This workflow uses actions that are not certified by GitHub.
|
||||
# They are provided by a third-party and are governed by
|
||||
# separate terms of service, privacy policy, and support
|
||||
# documentation.
|
||||
|
|
@ -39,7 +41,7 @@ name: Publish Docker image
|
|||
on:
|
||||
push:
|
||||
branches:
|
||||
- 'main'
|
||||
- "main"
|
||||
|
||||
jobs:
|
||||
push_to_registries:
|
||||
|
|
@ -51,20 +53,20 @@ jobs:
|
|||
steps:
|
||||
- name: Check out the repo
|
||||
uses: actions/checkout@v3
|
||||
|
||||
|
||||
- name: Log in to Docker Hub
|
||||
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_PASSWORD }}
|
||||
|
||||
|
||||
- name: Log in to the Container registry
|
||||
uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
|
||||
with:
|
||||
registry: ghcr.io
|
||||
username: ${{ github.actor }}
|
||||
password: ${{ secrets.GITHUB_TOKEN }}
|
||||
|
||||
|
||||
- name: Extract metadata (tags, labels) for Docker
|
||||
id: meta
|
||||
uses: docker/metadata-action@98669ae865ea3cffbcbaa878cf57c20bbf1c6c38
|
||||
|
|
@ -72,7 +74,7 @@ jobs:
|
|||
images: |
|
||||
$/YOUR-IMAGE-NAME-HERE
|
||||
ghcr.io/${{ github.repository }}
|
||||
|
||||
|
||||
- name: Build and push Docker images
|
||||
uses: docker/build-push-action@ad44023a93711e3deb337508980b4b5e9bcdc5dc
|
||||
with:
|
||||
|
|
@ -80,34 +82,36 @@ jobs:
|
|||
push: true
|
||||
tags: ${{ steps.meta.outputs.tags }}
|
||||
labels: ${{ steps.meta.outputs.labels }}
|
||||
```
|
||||
- the above will build the docker image and push it to the Docker Hub as well as GitHub's registry.
|
||||
- there are two fields that need editing before this will work. `username: ${{ secrets.DOCKERHUB_USERNAME }}` and `password: ${{ secrets.DOCKERHUB_PASSWORD }}`. These can be configured at `https://github.com/your-username/your-repo/settings/secrets/actions/new` - open this in a new tab. Add your `DOCKERHUB_USERNAME` to one and DOCKERHUB_PASSWORD to another. also change `$/YOUR-IMAGE-NAME-HERE` with an appropriate name and then save. You should end up with something like this
|
||||
|
||||
```
|
||||
|
||||
- the above will build the docker image and push it to the Docker Hub as well as GitHub's registry.
|
||||
- there are two fields that need editing before this will work. `username: ${{ secrets.DOCKERHUB_USERNAME }}` and `password: ${{ secrets.DOCKERHUB_PASSWORD }}`. These can be configured at `https://github.com/your-username/your-repo/settings/secrets/actions/new` - open this in a new tab. Add your `DOCKERHUB_USERNAME` to one and DOCKERHUB_PASSWORD to another. also change `$/YOUR-IMAGE-NAME-HERE` with an appropriate name and then save. You should end up with something like this
|
||||
|
||||
<break>
|
||||
|
||||
<img src="/img/docker-secrets.png"/>
|
||||
|
||||
- now go back to the action code and save it
|
||||
- with any luck after some time you should have something like this in your actions tab
|
||||
|
||||
- now go back to the action code and save it
|
||||
- with any luck after some time you should have something like this in your actions tab
|
||||
|
||||
<break>
|
||||
|
||||
<img src="/img/workflow.png"/>
|
||||
|
||||
## Ouroboros setup
|
||||
|
||||
- To run Ouroboros:
|
||||
- To run Ouroboros:
|
||||
|
||||
```docker
|
||||
docker run -d --name ouroboros \
|
||||
-v /var/run/docker.sock:/var/run/docker.sock \
|
||||
pyouroboros/ouroboros
|
||||
```
|
||||
|
||||
- Then with the containers involved:
|
||||
- Then with the containers involved:
|
||||
|
||||
- stop the containers
|
||||
- run the snippet below, filling in the details you need to
|
||||
- stop the containers
|
||||
- run the snippet below, filling in the details you need to
|
||||
|
||||
```docker
|
||||
docker run -d \
|
||||
|
|
@ -116,6 +120,7 @@ docker run -d \
|
|||
--restart unless-stopped \
|
||||
DOCKERHUB-USERNAME/IMAGE:TAG
|
||||
```
|
||||
|
||||
Note that the tag used in this workflow is `main`.
|
||||
|
||||
With any luck you should now have containers automatically update once you push changes to GitHub.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Welcome to Freeside
|
||||
title: Welcome to Freeside
|
||||
description: Third post, an introduction to the Freeside society at the University of Hull.
|
||||
date: 2021-10-16
|
||||
tags:
|
||||
|
|
@ -12,14 +12,22 @@ layout: layouts/post.njk
|
|||
<img src="/img/freeside_square_path.svg" alt="FreesideLogo" width="200"/>
|
||||
|
||||
This post will act as an informal introduction to Freeside
|
||||
|
||||
## What is Freeside?
|
||||
|
||||
Freeside is the student run Linux user group at the University of Hull.
|
||||
|
||||
## How do I join?
|
||||
|
||||
Unlike many groups at a university, there is **no** membership cost to become a member of Freeside. It is also irrelevant which course you are taking, everyone is welcome here - even if you don't attend the university! You can join the Freeside Discord server [here](https://discord.gg/jE5VGjCu).
|
||||
|
||||
## What do we do?
|
||||
|
||||
Linux, seems a bit of a vague description doesn't it? How about I go into a little more detail.
|
||||
Freeside provides an environment for everyone to learn more about Linux, open-source development, system administration, have experience with networking and career opportunities, social events / weekly virtual meet ups and access to the Freeside lab (Freeside Lab available to UoH students only).
|
||||
|
||||
## Where to find us?
|
||||
|
||||
- On-site : Robert Blackburn Building Room 300
|
||||
- [Discord](https://discord.gg/jE5VGjCu)
|
||||
- [GitHub](https://github.com/freesidehull)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ layout: layouts/post.njk
|
|||
---
|
||||
|
||||
I was looking for a way to lock my sites that need some sort of authentication that does not come built in. I had tried [Autheila](https://github.com/authelia/authelia) but I could never get it working. So here is a quick tutorial on locking sites with [Nginx Proxy Manager](https://nginxproxymanager.com/) (NPM)
|
||||
First of all, I'm going to assume you have some sites that are *already* proxied via NPM. If you don't have any sites proxied then you can folloew [this guide](https://docs.kieranrobson.com/posts/how-to-setup-nginx-proxy-manager-and-cloudflare-copy/) by Kieran Robson.
|
||||
First of all, I'm going to assume you have some sites that are _already_ proxied via NPM. If you don't have any sites proxied then you can folloew [this guide](https://docs.kieranrobson.com/posts/how-to-setup-nginx-proxy-manager-and-cloudflare-copy/) by Kieran Robson.
|
||||
Once you have a site proxied go to your Access Lists, click on Add Access List and give it a name. Under Authorization enter in a username and password you want to lock a site with. Then in Access type all in allow, or if you have a specific IP range you want to be able to connect from, you can enter it here. Leave deny on all then press Save.
|
||||
Navigate back to Hosts > Proxy Hosts and edit (triple dot icon) the site you want to lock then click on Access List and change from Publicly Accessible to the name of the Access List you chose. Click save and then navigate to the URL of the site. You should no be prompted with a login prompt and be met with a 401 error if you enter incorrect details.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Making your own blog
|
||||
title: Making your own blog
|
||||
description: Second post, how to make your own blog using GitHub, Netlify and Eleventy.
|
||||
date: 2021-10-16
|
||||
tags:
|
||||
|
|
@ -9,16 +9,15 @@ tags:
|
|||
layout: layouts/post.njk
|
||||
---
|
||||
|
||||
|
||||
Please note that I will be updating this as I go along. This is my **first** time using Netlify, as such I lack a lot of experience using the service so far. I have been using GitHub consistently since September 2021 so I am still relatively new to how everything works. If there are any issues you can log them [here](https://github.com/CrimsonTome/crimsontome-blog/issues), ping me on Discord: `CrimsonTome427#7459` or send me and email at `crimsontome427@gmail.com`
|
||||
|
||||
## Still here?
|
||||
|
||||
Please note that this guide assumes you're working in a browser rather than a terminal/command line.
|
||||
Please note that this guide assumes you're working in a browser rather than a terminal/command line.
|
||||
|
||||
Well, let's begin.
|
||||
|
||||
First of all, if you want to use GitHub as the source for your code you'll need a repository(repo). If you're reading this then you may be new to GitHub like I was not so long ago.
|
||||
First of all, if you want to use GitHub as the source for your code you'll need a repository(repo). If you're reading this then you may be new to GitHub like I was not so long ago.
|
||||
|
||||
### Creating the repo
|
||||
|
||||
|
|
@ -44,9 +43,12 @@ You can create your repo using a template (what I did) e.g Eleventy's base templ
|
|||
### Netlify config
|
||||
|
||||
GitHub will then generate your repo using the eleventy base blog template. There will be a list of files generated, an important one being `README.md`. As the README states, you will need to `Edit _data/metadata.json`. You will find this at `https://github.com/your-github-name/your-repo-name/blob/master/_data/metadata.json`. But first, make sure you commit your changes if you've made any and let's head over to [Netlify](https://app.netlify.com/signup).
|
||||
You can use your email or GitHub login (I'd recommend using GH as that is what I did). Once logged in go to <https://app.netlify.com/start>, choose `GitHub` as the option for Continuous Deployment then select your repo you have created with the elventy template. Then click `Deploy site`. Head to `https://app.netlify.com/sites/user-name/settings/general#site-details`. For now Netlify provides you with its own subdomain at `subdomain.netlify.app` but you can change it by presssing `Change site name`.
|
||||
You can use your email or GitHub login (I'd recommend using GH as that is what I did). Once logged in go to <https://app.netlify.com/start>, choose `GitHub` as the option for Continuous Deployment then select your repo you have created with the elventy template. Then click `Deploy site`. Head to `https://app.netlify.com/sites/user-name/settings/general#site-details`. For now Netlify provides you with its own subdomain at `subdomain.netlify.app` but you can change it by presssing `Change site name`.
|
||||
|
||||
### Back to GitHub
|
||||
|
||||
Remember `metadata.json`? You'll need to fill that in now to customise the template to match you.
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "Blog title",
|
||||
|
|
@ -69,15 +71,17 @@ Remember `metadata.json`? You'll need to fill that in now to customise the templ
|
|||
"url": "https://subdomain-you-chose.netlify.app/about-me/"
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
Make sure to commit your changes and then netlify should automatically rebuild your site. It shouldn't take more than a minute to do so.
|
||||
You can add an about me page by editing `about/index.md`. Leave the front matter (stuff surrounded by):
|
||||
|
||||
```
|
||||
---
|
||||
|
||||
---
|
||||
```
|
||||
Now then, you'll probably want to make some blog posts, this is a blog repo that you're maiking after all right?
|
||||
|
||||
Now then, you'll probably want to make some blog posts, this is a blog repo that you're maiking after all right?
|
||||
The Eleventy base blog template comes with a few in `/posts`, I'd recommend leaving the layout section in the front matter, change everything else as you please. Oh and you can rename the file, just keep at as `something.`**md**
|
||||
If you know how to work with CSS then you can change the main stylesheet at `css/index.css`
|
||||
If you know how to work with CSS then you can change the main stylesheet at `css/index.css`
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: My current VPS setup
|
||||
title: My current VPS setup
|
||||
description: What I'm running on my VPS
|
||||
date: 2022-06-09
|
||||
tags:
|
||||
|
|
@ -9,13 +9,14 @@ tags:
|
|||
layout: layouts/post.njk
|
||||
---
|
||||
|
||||
A few months ago I made a [post](https://blog.crimsontome.com/posts/PVE/) on Proxmox and what I run/ran on my physical home server, and whilst I have now fixed my hardware issues (by geting completely different hardware) I am yet to recreate all my VMs on that machine. So in the meantime, using my [GitHub Student](https://education.github.com/pack) credits I have setup a VPS with [DigitalOcean](https://www.digitalocean.com/products/droplets).
|
||||
A few months ago I made a [post](https://blog.crimsontome.com/posts/PVE/) on Proxmox and what I run/ran on my physical home server, and whilst I have now fixed my hardware issues (by geting completely different hardware) I am yet to recreate all my VMs on that machine. So in the meantime, using my [GitHub Student](https://education.github.com/pack) credits I have setup a VPS with [DigitalOcean](https://www.digitalocean.com/products/droplets).
|
||||
|
||||
## What I run
|
||||
|
||||
### Blog
|
||||
|
||||
My blog (what you are currently reading) is hosted on my droplet using [11ty](https://www.11ty.dev/) and [Docker](https://www.docker.com/). It is essentially the same as what I have done previously except instead of deploying to netlify I have Docker build the site and expose it on my server with this Dockerfile
|
||||
|
||||
```dockerfile
|
||||
FROM node:10-alpine3.9 as npmpackages
|
||||
WORKDIR /app
|
||||
|
|
@ -42,6 +43,7 @@ My Git server at https://git.crimsontome.com (as reccomended by a good friend [S
|
|||
### Links
|
||||
|
||||
https://links.crimsontome.com is created from a [littlelink](https://github.com/techno-tim/littlelink-server) container. It is an open-source self-hosted alternative to services like LinkTree. It contains links to most of my public services and is ran through this docker-compose file
|
||||
|
||||
```dockerfile
|
||||
version: "3.0"
|
||||
services:
|
||||
|
|
@ -64,12 +66,12 @@ services:
|
|||
- THEME=Dark
|
||||
- AVATAR_URL=https://https://avatars.githubusercontent.com/u/64846840?v=4
|
||||
- AVATAR_2X_URL=https://https://avatars.githubusercontent.com/u/64846840?v=4
|
||||
- AVATAR_ALT=
|
||||
- AVATAR_ALT=
|
||||
- NAME=CrimsonTome
|
||||
- BIO=The home of CrimsonTomes links
|
||||
# use ENV variable names for order, listed buttons will be boosted to the top
|
||||
- BUTTON_ORDER=YOUTUBE,TWITCH,TWITTER,GITHUB,INSTAGRAM,DISCORD,FACEBOOK,TIKTOK,PATREON,GEAR,DOCUMENTATION
|
||||
# you can render an unlimited amount of custom buttons by adding
|
||||
# you can render an unlimited amount of custom buttons by adding
|
||||
# the CUSTOM_BUTTON_* variables and by using a comma as a separator.
|
||||
- CUSTOM_BUTTON_TEXT=Blog,LinkedIn, Git Service, PasteBin Service
|
||||
- CUSTOM_BUTTON_URL=https://blog.crimsontome.com,https://www.linkedin.com/in/matt-clark-aa776b1b4/,https://git.crimsontome.com,https://paste.crimsontome.com
|
||||
|
|
@ -114,13 +116,14 @@ You can also use it to lock sites that don't come with their own authenticattion
|
|||
### PrivateBin server
|
||||
|
||||
Whilst currently not fully functional, https://paste.crimsontome.com hosts my [PrivateBin](https://privatebin.info/) instance. Like most of my services it runs inside a docker container
|
||||
|
||||
```dockerfile
|
||||
docker run -d --restart="always" --read-only -p 8080:8080 -v $PWD/privatebin-data:/srv/data privatebin/nginx-fpm-alpine
|
||||
```
|
||||
|
||||
### Dashy
|
||||
|
||||
[Dashy](https://dashy.to/) can be ran in a docker container, but some plugins *do not* work whilst Dashy is in one, so I am using npm to build and serve it instead. Once you are done setting up dashy
|
||||
[Dashy](https://dashy.to/) can be ran in a docker container, but some plugins _do not_ work whilst Dashy is in one, so I am using npm to build and serve it instead. Once you are done setting up dashy
|
||||
|
||||
```shell
|
||||
git clone https://github.com/Lissy93/dashy.git
|
||||
|
|
@ -132,4 +135,4 @@ npm run start
|
|||
|
||||
### Server metrics with NetData
|
||||
|
||||
I use [NetData](https://github.com/netdata/netdata) to provide server metrics for my dashboard such as CPU, Memory and disk usage, alognside many others
|
||||
I use [NetData](https://github.com/netdata/netdata) to provide server metrics for my dashboard such as CPU, Memory and disk usage, alognside many others
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
{
|
||||
"tags": [
|
||||
"posts"
|
||||
]
|
||||
"tags": ["posts"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Introduction to Raspberry Pi
|
||||
title: Introduction to Raspberry Pi
|
||||
description: This is my first post, it is an introduction to Raspberry Pi.
|
||||
date: 2021-10-15
|
||||
tags:
|
||||
|
|
@ -11,7 +11,7 @@ layout: layouts/post.njk
|
|||
|
||||
I would be surprised if you've never heard of them, since they seem to have exploded in popularity in recent years. They are very popular with those who want to get into programming and electronics, or Linux in general.
|
||||
|
||||
*Just a quick disclaimer, though I have been using Pis in some form for over 5 years now I can only really say I have casual experience with Pis and as such what is written here may be subjective or incorrect in some ways. I suggest you do your own research if you want to get into them, or if you're someone with knowledge of them and want to correct me feel free to contact me.*
|
||||
_Just a quick disclaimer, though I have been using Pis in some form for over 5 years now I can only really say I have casual experience with Pis and as such what is written here may be subjective or incorrect in some ways. I suggest you do your own research if you want to get into them, or if you're someone with knowledge of them and want to correct me feel free to contact me._
|
||||
|
||||
## But first, just a little bit of history
|
||||
|
||||
|
|
@ -19,13 +19,15 @@ The Raspberry Pi Foundation (RPF), based in the UK launched their first model of
|
|||
|
||||
## So, why should you get a Pi?
|
||||
|
||||
It may seem like these single board computers are a bit underwhelming. What, the best model only has 8GB of RAM?! Well you see not everyone has the money to spend hundreds or even thousands of pounds on a computer. This leads me to what I think is the best thing about these: they're cheap. For example the Raspberry Pi Zero costs ~£5 and can do plenty of things that it's successors can. Sure it does it to a lesser extent but to me at least that is part of the fun, given what you've got how can I make *x* work?
|
||||
It may seem like these single board computers are a bit underwhelming. What, the best model only has 8GB of RAM?! Well you see not everyone has the money to spend hundreds or even thousands of pounds on a computer. This leads me to what I think is the best thing about these: they're cheap. For example the Raspberry Pi Zero costs ~£5 and can do plenty of things that it's successors can. Sure it does it to a lesser extent but to me at least that is part of the fun, given what you've got how can I make _x_ work?
|
||||
Another reason is that if you have an idea, you can probably make it with a Raspberry Pi. As you'll see in the resources section, there are so many different things you can do, and for a lot of them you don't really need to know that much beforehand, just get stuck in. Want to make a NAS, retro games player, host your own website, play around with some electronics? The Pi has you covered.
|
||||
|
||||
## Series
|
||||
|
||||
### Zero
|
||||
|
||||
The Raspberry Pi Zero (released in 2015) is a much smaller device - around half the size of the Raspberry Pi model A+. The original Zero had these specifications:
|
||||
|
||||
- 1GHz single-core CPU
|
||||
- 512MB RAM
|
||||
- Mini HDMI port
|
||||
|
|
@ -40,6 +42,7 @@ Given its size and low specifications, it is highly portable and has very low po
|
|||
### Pico
|
||||
|
||||
The Raspberry Pi Pico was released in 2021 with a price of ~£3 with these features:
|
||||
|
||||
- RP2040 microcontroller chip designed by Raspberry Pi in the United Kingdom
|
||||
- Dual-core Arm Cortex M0+ processor, flexible clock running up to 133 MHz
|
||||
- 264KB of SRAM, and 2MB of on-board Flash memory
|
||||
|
|
@ -54,10 +57,12 @@ The Raspberry Pi Pico was released in 2021 with a price of ~£3 with these featu
|
|||
- Accelerated floating-point libraries on-chip
|
||||
- 8 × Programmable I/O (PIO) state machines for custom peripheral support
|
||||
|
||||
Like the Zero, the Pico can also be used as part of an embedded system such as acting as a temperature sensor for someewhere like a greenhouse
|
||||
Like the Zero, the Pico can also be used as part of an embedded system such as acting as a temperature sensor for someewhere like a greenhouse
|
||||
|
||||
### Other
|
||||
|
||||
A popular model of the Raspberry Pi is the Model 4B:
|
||||
|
||||
- Broadcom BCM2711, Quad core Cortex-A72 (ARM v8) 64-bit SoC @ 1.5GHz
|
||||
- 2GB, 4GB or 8GB LPDDR4-3200 SDRAM (depending on model)
|
||||
- 2.4 GHz and 5.0 GHz IEEE 802.11ac wireless, Bluetooth 5.0, BLE
|
||||
|
|
@ -71,8 +76,8 @@ A popular model of the Raspberry Pi is the Model 4B:
|
|||
- H.265 (4kp60 decode), H264 (1080p60 decode, 1080p30 encode)
|
||||
- OpenGL ES 3.1, Vulkan 1.0
|
||||
- Micro-SD card slot for loading operating system and data storage
|
||||
-5V DC via USB-C connector (minimum 3A)
|
||||
- 5V DC via GPIO header (minimum 3A*)
|
||||
-5V DC via USB-C connector (minimum 3A)
|
||||
- 5V DC via GPIO header (minimum 3A\*)
|
||||
- Power over Ethernet (PoE) enabled (requires separate PoE HAT)
|
||||
|
||||
The Pi Model 4B can be powerful enough to run some quite intensive things, given the right environment. For example (though not with a 4B) I used to run Retropie for running some retro games with decent performance.
|
||||
|
|
@ -108,4 +113,4 @@ The Pi Model 4B can be powerful enough to run some quite intensive things, given
|
|||
6. [Git server](https://pimylifeup.com/raspberry-pi-git-server/)
|
||||
7. [Projects from Raspberry Pi](https://projects.raspberrypi.org/en)
|
||||
|
||||
*Resources compiled by various Freeside members, a huge thanks to everyone who helped!*
|
||||
_Resources compiled by various Freeside members, a huge thanks to everyone who helped!_
|
||||
|
|
|
|||
Loading…
Reference in New Issue