diff options
| -rw-r--r-- | .gitlab-ci.yml | 62 | ||||
| -rw-r--r-- | Procfile | 1 | ||||
| -rw-r--r-- | content/posts/2020-07-12Road_to_local_K8S.html | 150 | ||||
| -rw-r--r-- | src/blog.rs | 32 | ||||
| -rw-r--r-- | src/router.rs | 11 | ||||
| -rw-r--r-- | templates/head.html | 2 | ||||
| -rw-r--r-- | templates/header.html | 18 | ||||
| -rw-r--r-- | templates/index.html | 44 | ||||
| -rw-r--r-- | templates/main.css | 263 | ||||
| -rw-r--r-- | templates/post.html | 32 |
10 files changed, 411 insertions, 204 deletions
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml deleted file mode 100644 index dd3bba4..0000000 --- a/.gitlab-ci.yml +++ /dev/null @@ -1,62 +0,0 @@ -stages: - - test - - production - - prepare - - release - -test: - image: rust:alpine - stage: test - script: - - apk add musl-dev - - cargo install cargo2junit - - cargo test -- -Z unstable-options --format json --report-time | cargo2junit > results.xml - only: - - master - artifacts: - reports: - junit: results.xml - -production: - stage: production - image: ruby:latest - needs: - - test - script: - - apt-get update -qy - - apt-get install -y ruby-dev - - gem install dpl - - gem install faraday -v 1.8.0 - - dpl --provider=heroku --app=$HEROKU_APP --api-key=$HEROKU_API_KEY - only: - - master - -prepare_job: - stage: prepare - image: rust:alpine - rules: - - if: $CI_COMMIT_TAG - script: - - echo "running release_job" - - apk add musl-dev - - cargo build --release - artifacts: - paths: - - target/release/hyper - - target/release/actix - -release_job: - stage: release - image: registry.gitlab.com/gitlab-org/release-cli:latest - rules: - - if: $CI_COMMIT_TAG - script: - - echo "running release_job for $TAG" - needs: - - job: prepare_job - artifacts: true - release: - name: 'Release $CI_COMMIT_TAG' - description: 'New macroblog version' - tag_name: '$CI_COMMIT_TAG' - ref: '$CI_COMMIT_TAG' diff --git a/Procfile b/Procfile deleted file mode 100644 index 51c4728..0000000 --- a/Procfile +++ /dev/null @@ -1 +0,0 @@ -web: ./target/release/actix diff --git a/content/posts/2020-07-12Road_to_local_K8S.html b/content/posts/2020-07-12Road_to_local_K8S.html index 5d34b27..52820b3 100644 --- a/content/posts/2020-07-12Road_to_local_K8S.html +++ b/content/posts/2020-07-12Road_to_local_K8S.html @@ -1,43 +1,43 @@ <section> - <h3>Goal</h3> - <p> + <h3>Goal</h3> + <p> The goal is to deploy kubernetes on my local networks, and keep everything as reproducible as possible. - </p> - <h3>Stack</h3> - <p> + </p> + <h3>Stack</h3> + <p> I'll use Fedora Core OS, Matchbox and Terraform <sup><a href="#footnotes">1</a></sup>, a match the requirements for Tectonic<sup><a href="#footnotes">2</a></sup>.</p> - <h3>Steps</h3> - <ul> - <li>Network Setup DHCP/TFTP/DNS<sup><a href="#footnotes">3</a></sup></li> - <li>Matchbox<sup><a href="#footnotes">4</a></sup></li> - <li>PXE nextwork boot evnrionment</li> - <li>Terraform Tectonic<sup><a href="#footnotes">5</a></sup></li> - </ul> - <h3>Network Setup DHCP/TFTP/DNS</h3> - <p>First learning the basics</p> - <ul> - <li> - <a href="https://linuxhint.com/install_dhcp_server_ubuntu/"> - https://linuxhint.com/install_dhcp_server_ubuntu/ - </a> - </li> - <li> - <a href="https://www.youtube.com/watch?v=XQ3T14SIlV4"> - https://www.youtube.com/watch?v=XQ3T14SIlV4 - </a> - </li> - </ul> - <p> + <h3>Steps</h3> + <ul> + <li>Network Setup DHCP/TFTP/DNS<sup><a href="#footnotes">3</a></sup></li> + <li>Matchbox<sup><a href="#footnotes">4</a></sup></li> + <li>PXE nextwork boot evnrionment</li> + <li>Terraform Tectonic<sup><a href="#footnotes">5</a></sup></li> + </ul> + <h3>Network Setup DHCP/TFTP/DNS</h3> + <p>First learning the basics</p> + <ul> + <li> + <a href="https://linuxhint.com/install_dhcp_server_ubuntu/"> + https://linuxhint.com/install_dhcp_server_ubuntu/ + </a> + </li> + <li> + <a href="https://www.youtube.com/watch?v=XQ3T14SIlV4"> + https://www.youtube.com/watch?v=XQ3T14SIlV4 + </a> + </li> + </ul> + <p> To check open ports -<pre><code>lsof -Pni | grep LISTEN</code></pre> - </p> - <p> + <pre><code>lsof -Pni | grep LISTEN</code></pre> + </p> + <p> Run the provided<sup><a href="#footnotes">6</a></sup> image with dnsmasq and PXE toolkit -<pre><code>docker run --rm --cap-add=NET_ADMIN --net=host quay.io/coreos/dnsmasq \ + <pre><code>docker run --rm --cap-add=NET_ADMIN --net=host quay.io/coreos/dnsmasq \ -d -q \ --dhcp-range=192.168.1.3,192.168.1.254 \ --enable-tftp --tftp-root=/var/lib/tftpboot \ @@ -54,48 +54,48 @@ --address=/matchbox.example/192.168.1.2 \ --log-queries \ --log-dhcp</code></pre> - </p> - <h3>Matchbox</h3> - <p>...</p> - <h3>PXE network boot enviroment</h3> - <p>...</p> - <h3>Terraform Tectonic</h3> - <p>...</p> - <h3 id="footnotes">Links</h3> - <div > - <sup>1</sup> - <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html"> - https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html - </a> - <div> - <div> - <sup>2</sup> - <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html"> - https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html - </a> - <div> - <div> - <sup>3</sup> - <a href="https://coreos.com/matchbox/docs/latest/network-setup.html"> - https://coreos.com/matchbox/docs/latest/network-setup.html - </a> - <div> - <div> - <sup>4</sup> - <a href="https://coreos.com/matchbox/docs/latest/deployment.html"> - https://coreos.com/matchbox/docs/latest/deployment.html - </a> - <div> - <div> - <sup>5</sup> - <a href="https://coreos.com/tectonic/releases/"> - https://coreos.com/tectonic/releases/ - </a> - <div> - <div> - <sup>6</sup> - <a href="https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq"> - https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq - </a> - <div> + </p> + <h3>Matchbox</h3> + <p>...</p> + <h3>PXE network boot enviroment</h3> + <p>...</p> + <h3>Terraform Tectonic</h3> + <p>...</p> + <h3 id="footnotes">Links</h3> + <div > + <sup>1</sup> + <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html"> + https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html + </a> + <div> + <div> + <sup>2</sup> + <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html"> + https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html + </a> + <div> + <div> + <sup>3</sup> + <a href="https://coreos.com/matchbox/docs/latest/network-setup.html"> + https://coreos.com/matchbox/docs/latest/network-setup.html + </a> + <div> + <div> + <sup>4</sup> + <a href="https://coreos.com/matchbox/docs/latest/deployment.html"> + https://coreos.com/matchbox/docs/latest/deployment.html + </a> + <div> + <div> + <sup>5</sup> + <a href="https://coreos.com/tectonic/releases/"> + https://coreos.com/tectonic/releases/ + </a> + <div> + <div> + <sup>6</sup> + <a href="https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq"> + https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq + </a> + <div> </section> diff --git a/src/blog.rs b/src/blog.rs index 6bbda49..0fa9543 100644 --- a/src/blog.rs +++ b/src/blog.rs @@ -1,9 +1,9 @@ +use chrono::NaiveDate; +use regex::Regex; use rust_embed::RustEmbed; use sailfish::TemplateOnce; -use chrono::NaiveDate; -use regex::{Regex}; +use std::cmp::{Eq, Ord, PartialEq, PartialOrd}; use std::str; -use std::cmp::{PartialOrd, Ord, PartialEq, Eq}; const BLOG_REGEX: &str = r"(?P<date>[\d]{4}-[\d]{2}-[\d]{2})(?P<title>[a-zA-Z0-9-_]*)"; @@ -11,7 +11,6 @@ const BLOG_REGEX: &str = r"(?P<date>[\d]{4}-[\d]{2}-[\d]{2})(?P<title>[a-zA-Z0-9 #[folder = "content/posts/"] struct PostAsset; - #[derive(TemplateOnce)] #[template(path = "index.html")] struct IndexTemplate { @@ -23,7 +22,7 @@ struct IndexTemplate { struct PostTemplate { content: String, title: String, - date: String + date: String, } #[derive(PartialEq, Eq, PartialOrd, Ord)] @@ -43,12 +42,11 @@ impl BlogEntry { BlogEntry { title: String::from(title), file: String::from(path), - datetime: NaiveDate::parse_from_str(date, "%Y-%m-%d").unwrap() + datetime: NaiveDate::parse_from_str(date, "%Y-%m-%d").unwrap(), } } pub fn read_assets() -> Vec<BlogEntry> { - let mut entries: Vec<BlogEntry> = PostAsset::iter() .map(|e| format!("{}", e)) .map(|e| BlogEntry::new(&e)) @@ -61,29 +59,27 @@ impl BlogEntry { } fn get_file_content(path: &str) -> String { - let buffer = PostAsset::get(path) - .unwrap() - .data - .into_owned(); + let buffer = PostAsset::get(path).unwrap().data.into_owned(); return String::from_utf8(buffer).unwrap(); } - pub fn render_post_page(path: &String) -> String { let blog = BlogEntry::new(path); PostTemplate { content: get_file_content(path), title: blog.title, - date: blog.datetime.format("%Y-%m-%d").to_string() + date: blog.datetime.format("%Y-%m-%d").to_string(), } - .render_once() - .unwrap() + .render_once() + .unwrap() } pub fn render_index_page() -> String { - IndexTemplate { posts: BlogEntry::read_assets() } - .render_once() - .unwrap() + IndexTemplate { + posts: BlogEntry::read_assets(), + } + .render_once() + .unwrap() } diff --git a/src/router.rs b/src/router.rs index 0bba091..35fdf3e 100644 --- a/src/router.rs +++ b/src/router.rs @@ -1,4 +1,4 @@ -use regex::{Regex}; +use regex::Regex; const ACTION_REGEX: &str = r"/{0,1}(?P<action>\w*)/(?P<id>.+)"; @@ -14,14 +14,15 @@ impl Router { let caps = re.captures(path); let action = match caps { Some(ref value) => &value["action"], - None => "index" + None => "index", }; match action { - "posts" => Router::Post { page: caps.unwrap()["id"].to_string() }, + "posts" => Router::Post { + page: caps.unwrap()["id"].to_string(), + }, "index" => Router::Index, - _ => Router::NotFound + _ => Router::NotFound, } } } - diff --git a/templates/head.html b/templates/head.html index c054157..3492eda 100644 --- a/templates/head.html +++ b/templates/head.html @@ -3,5 +3,5 @@ <title>Yet Another Blog</title> <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,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"> <style> - <% include!("pico.min.css"); %> +<% include!("main.css"); %> </style> diff --git a/templates/header.html b/templates/header.html index 1340aa1..c830273 100644 --- a/templates/header.html +++ b/templates/header.html @@ -1,10 +1,12 @@ <header class="container"> - <nav class="container-fluid"> - <ul> - <li><h2><a href="/">Yet Another Blog</a></h2></li> - </ul> - <ul> - <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li> - </ul> - </nav> + <div class="title-wrapper"> + <a href="/"> + <h2 class="title">Yet Another Blog</h2> + </a> + <nav class="container-fluid"> + <ul> + <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li> + </ul> + </nav> + </div> </header> diff --git a/templates/index.html b/templates/index.html index 006643a..f6f3ca9 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,22 +1,28 @@ <!DOCTYPE html> <html data-theme="light" lang="en"> -<head> - <% include!("head.html"); %> -</head> -<body> -<% include!("header.html"); %> -<main class="container"> - <section> - A gathering of information about some things I do on my spare time. - You can find me on gitlab, twitter and linkedin. - </section> - <section> - <ul> - <% for p in &posts { %> - <li><a href="/posts/<%- p.file %>"><%- p.title %></a></li> - <% } %> - </ul> - </section> -</main> -</body> + <head> + <% include!("head.html"); %> + </head> + <body> + <div class="layout"> + <% include!("header.html"); %> + <main> + <div class="slim-description"> + A gathering of information about some things I do on my + spare time. You can find me on gitlab, twitter and + linkedin. + </div> + <div class="blog-list"> + <% for p in &posts { %> + <article class="list-item"> + <div class="post-title"> + <a href="/posts/<%- p.file %>"><%- p.title %></a> + </div> + <span classname="data-label"><%- p.datetime | disp %></span> + </article> + <% } %> + </div> + </main> + </div> + </body> </html> diff --git a/templates/main.css b/templates/main.css new file mode 100644 index 0000000..f056a50 --- /dev/null +++ b/templates/main.css @@ -0,0 +1,263 @@ +* { + box-sizing: border-box; + font-family: dejavu sans; +} +body { + margin: 0; +} +h1, +h2, +h3, +h4 { + font-weight: 400; +} +code[class*="language-"], +nav, +.blog-list { + font-style: normal; + font-weight: 400; + font-size: 1.025rem; +} +code { + font-family: dejavu sans mono; +} +tags { + font-family: dejavu sans mono; +} +.list-item { + font-family: dejavu sans mono; +} +html { + font-size: 16px; +} +body { + line-height: 1.8em; + color: #333; + background: #fefefe; +} +.post-title, +.date-label { + letter-spacing: 0.025rem; +} +p, +sub, +nav { + letter-spacing: 0.05rem; +} +.title-wrapper, +.title { + letter-spacing: 0.075rem; +} +a { + text-decoration: none; +} +.brand-icon { + color: #f93a3a; + display: inline-flex; + border-bottom: 1px solid; +} +.brand-icon:hover { + border-bottom: none; +} +.layout { + max-width: 48rem; + margin-left: auto; + margin-right: auto; + padding: 2.625rem 1.3125rem; +} +.layout .title-wrapper { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 0.5rem; +} +.layout .title { + color: #333; + text-align: left; + display: block; + font-size: 1.875rem; + margin: 0; +} +nav { + font-size: 1.025rem; + text-align: center; +} +nav ul { + display: block; + padding: 0; +} +nav ul li { + display: inline; + list-style-type: none; +} +nav ul li a { + color: #333; + display: inline-block; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border-bottom: 1px solid #fefefe; +} +nav ul li a:hover { + color: #f93a3a; +} +nav ul li:not(:last-child) { + padding: 0 1rem 0 0; +} +.slim-description { + margin-bottom: calc(16px * 2); + color: #666; +} +.blog-post-content a { + color: #f93a3a; + text-decoration: none; + border-bottom: 1px solid; +} +.blog-post-content a:hover { + border-bottom: none; +} +.blog-list .list-item { + display: flex; + flex-direction: column-reverse; + align-items: baseline; + padding: 0.5rem 0.5rem 0.5rem 0; +} +.blog-list .post-title a { + text-decoration: none; + color: #333; + border-bottom: none; +} +.blog-list .post-title a:hover { + border-bottom: 1px solid; +} +.blog-list .date-label { + font-size: 80%; + margin-right: 1rem; +} +.content .title { + font-size: 1.275rem; +} +.blog-post-content a { + color: #f93a3a; + text-decoration: none; + border-bottom: 1px solid; +} +.blog-post-content a:hover { + border-bottom: none; +} +.blog-post-content img { + width: 100%; +} +.post-image { + margin-left: calc(-1.3125rem); + margin-right: calc(-1.3125rem); +} +.post-image img { + width: 100%; +} +.tags { + font-size: 0.9em; + text-align: left; +} +.tags ul { + display: block; + padding: 0; +} +.tags ul li { + display: inline; + list-style-type: none; + text-align: center; +} +.tags ul li a { + border: 1px solid #f93a3a; + border-radius: 3px; + background: #f93a3a; + padding: 0.2em; + color: #fff; + margin: 10px 2px 10px 0; + line-height: 1em; +} +.tags ul li a:hover { + background: #fefefe; + color: #f93a3a; +} +.tags ul li:not(:last-child) { + padding: 0 0.1rem 0 0; +} +.highlight { + margin-left: calc(-1.3125rem); + margin-right: calc(-1.3125rem); +} +.highlight pre { + line-height: 1.2rem; + border: 1px solid #ddd; + border-radius: 5px; + overflow: auto; + padding: 1.3125rem; + margin: 0; +} +.highlight pre code[class*="language-"] { + font-size: 0.9em; +} +.highlight pre .token.comment { + font-style: italic; +} +blockquote { + background: #f9f9f9; + border-left: 5px solid #333; + margin: 1.5em 10px; + padding: 0.5em 10px; + quotes: "“" "”" "‘" "’"; +} +blockquote:before { + color: #333; + content: open-quote; + font-size: 4em; + line-height: 0.1em; + margin-right: 0.25em; + vertical-align: -0.4em; +} +blockquote p { + display: inline; +} +time { + font-size: 80%; + margin-right: 1rem; +} +@media only screen and (min-width: 600px) { + .layout .title-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + } + .layout .title { + margin-block-start: 0.83em; + margin-block-end: 0.83em; + margin-inline-start: 0; + margin-inline-end: 0; + } + .blog-list .list-item { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: unset; + padding: 0; + margin-bottom: 0.5rem; + } + .blog-list .date-label { + font-size: 100%; + margin-right: 0; + } + .project-board { + grid-template-columns: 1fr 1fr; + } + .highlight { + margin-left: 0; + margin-right: 0; + } + .post-image { + margin-left: 0; + margin-right: 0; + } +} + diff --git a/templates/post.html b/templates/post.html index 7e0a909..99a7852 100644 --- a/templates/post.html +++ b/templates/post.html @@ -1,18 +1,20 @@ <!DOCTYPE html> <html data-theme="light" lang="en"> -<head> - <% include!("head.html"); %> -</head> -<body> -<% include!("header.html"); %> -<main class="container"> - <h2><%- title %></h2> - <h5>Created At: <%- date %></h2> - <%- content %> - </section> -</main> -</body> - -<script> -</script> + <head> + <% include!("head.html"); %> + </head> + <body> + <div class="layout"> + <% include!("header.html"); %> + <main> + <article> + <h1><%- title %></h1> + <time>Created At: <%- date %></time> + <div class="blog-post-content"> + <%- content %> + </div> + </article> + </main> + </div> + </body> </html> |