From 513119c41f448aee061313bbc2f64be7dd547e1f Mon Sep 17 00:00:00 2001 From: Hoang Nguyen Date: Sun, 25 Jun 2023 00:00:00 +0700 Subject: [PATCH] Overhaul styling - Use dart-sass as the transpiler (because of @use at-rule) ==> we can't use Bazel anymore -_- ==> go back to multiple GitLab CI/CD jobs - Modularize scss files (sadly the templated text is still needed to be in the main file) - Add shortcodes: icon, link, admonition, table, mark, spoiler and details ==> Vendor some web fonts - Use the new hugo.{toml,yaml} configuration file (was config.yaml) - Add render-link hook (to open external links in a new tab) --- .bazelrc | 3 - .editorconfig | 13 +- .gitignore | 2 +- .gitlab-ci.yml | 47 +- BUILD.bazel | 35 - MODULE.bazel | 16 - README.md | 3 +- WORKSPACE | 15 - assets/css/_base.scss | 154 +++ assets/css/{nord.css => _chroma.scss} | 7 +- assets/css/_fonts.scss | 103 ++ assets/css/{ => _vendor}/normalize.css | 0 assets/css/fonts.css | 71 -- assets/css/main.tpl.scss | 213 ++-- assets/css/pages/homepage.css | 7 - config.yaml | 58 -- content/_index.md | 2 - content/about/index.md | 18 +- .../blog/gitlab-is-an-awesome-mess/index.md | 2 +- .../index.md | 4 +- .../blog/{test-post.md => test-post/index.md} | 42 + content/blog/test-post/sample-table.csv | 3 + hugo.toml | 43 + layouts/_default/_markup/render-link.html | 2 + layouts/partials/footer.html | 11 +- layouts/partials/head.html | 11 +- layouts/shortcodes/admonition.html | 3 + layouts/shortcodes/details.html | 6 + layouts/shortcodes/icon.html | 22 + layouts/shortcodes/link.html | 9 + layouts/shortcodes/mark.html | 1 + layouts/shortcodes/spoiler.html | 5 + layouts/shortcodes/table.html | 34 + package.json | 13 - pnpm-lock.yaml | 964 ------------------ 35 files changed, 579 insertions(+), 1363 deletions(-) delete mode 100644 .bazelrc delete mode 100644 BUILD.bazel delete mode 100644 MODULE.bazel delete mode 100644 WORKSPACE create mode 100644 assets/css/_base.scss rename assets/css/{nord.css => _chroma.scss} (88%) create mode 100644 assets/css/_fonts.scss rename assets/css/{ => _vendor}/normalize.css (100%) delete mode 100644 assets/css/fonts.css delete mode 100644 config.yaml rename content/blog/{test-post.md => test-post/index.md} (54%) create mode 100644 content/blog/test-post/sample-table.csv create mode 100644 hugo.toml create mode 100644 layouts/_default/_markup/render-link.html create mode 100644 layouts/shortcodes/admonition.html create mode 100644 layouts/shortcodes/details.html create mode 100644 layouts/shortcodes/icon.html create mode 100644 layouts/shortcodes/link.html create mode 100644 layouts/shortcodes/mark.html create mode 100644 layouts/shortcodes/spoiler.html create mode 100644 layouts/shortcodes/table.html delete mode 100644 package.json delete mode 100644 pnpm-lock.yaml diff --git a/.bazelrc b/.bazelrc deleted file mode 100644 index e3b87c6..0000000 --- a/.bazelrc +++ /dev/null @@ -1,3 +0,0 @@ -try-import ci.bazelrc - -common --experimental_enable_bzlmod diff --git a/.editorconfig b/.editorconfig index c7d0292..adef4ef 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,21 +1,14 @@ root = true [*] -tab_width = 4 charset = utf-8 end_of_line = lf +tab_width = 4 +indent_size = 2 +indent_style = space insert_final_newline = true trim_trailing_whitespace = true -[{*.css,*.scss,*.html,*.xml}] -indent_style = space -indent_size = 2 - [*.md] -indent_style = space -indent_size = 2 max_line_length = 80 trim_trailing_whitespace = false - -[package.json] -indent_style = tab diff --git a/.gitignore b/.gitignore index 0cfd779..627a63b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ +/.hugo_cache/ /public/ /resources/ /.hugo_build.lock -/bazel-* diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 75bf420..f165e55 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -6,19 +6,40 @@ default: stages: - build + - deploy -# NOTE: there is no caching right now, so the build could be slow -cloudflare_pages: - stage: build - image: - name: gcr.io/bazel-public/bazel:6.2.1 - entrypoint: [""] - script: - - | - cat >ci.bazelrc <> /etc/apk/repositories + - apk add --no-cache hugo dart-sass + - hugo --verbose --gc --panicOnWarning + cache: + key: resources-$CI_COMMIT_REF_NAME + paths: + - resources/ + - .hugo_cache/ + artifacts: + expire_in: 1 hour + paths: + - public/ + +deploy:cloudflare_pages: + stage: deploy + image: + name: node:20-alpine + entrypoint: [""] + script: | + npx wrangler pages deploy \ + --project-name=folliehiyuki \ + --branch="$CI_COMMIT_REF_NAME" \ + public/ + dependencies: + - build:hugo diff --git a/BUILD.bazel b/BUILD.bazel deleted file mode 100644 index 27cad7d..0000000 --- a/BUILD.bazel +++ /dev/null @@ -1,35 +0,0 @@ -load("@rules_hugo//hugo:rules.bzl", "hugo_site", "hugo_serve") - -hugo_site( - name = "public", - config = "config.yaml", - assets = glob(["assets/**"]), - content = glob(["content/**"]), - layouts = glob(["layouts/**"]), - static = glob(["static/**"]), - quiet = False, -) - -hugo_serve(name = "serve", dep = [":public"]) - -load("@npm//:defs.bzl", "npm_link_all_packages") - -npm_link_all_packages(name = "node_modules") - -load("@npm//:wrangler/package_json.bzl", wrangler_bin = "bin") - -# NOTE: CLOUDFLARE_ACCOUNT_ID and CLOUDFLARE_API_TOKEN are set as CI/CD variables -CF_PAGES_PROJECT = "folliehiyuki" - -# Mark the run as dirty, since wrangler is run inside a git-ignored directory -wrangler_bin.wrangler_binary( - name = "upload", - data = [":public"], - args = [ - "pages", - "deploy", - "--commit-dirty=true", - "--project-name=%s" % CF_PAGES_PROJECT, - "public", - ], -) diff --git a/MODULE.bazel b/MODULE.bazel deleted file mode 100644 index 39e6354..0000000 --- a/MODULE.bazel +++ /dev/null @@ -1,16 +0,0 @@ -module(repo_name = "personal_blog") - -bazel_dep(name = "aspect_rules_js", version = "1.27.1") - -npm = use_extension("@aspect_rules_js//npm:extensions.bzl", "npm") - -npm.npm_translate_lock( - name = "npm", - pnpm_lock = "//:pnpm-lock.yaml", -) - -use_repo(npm, "npm") - -pnpm = use_extension("@aspect_rules_js//npm:extensions.bzl", "pnpm") - -use_repo(pnpm, "pnpm") diff --git a/README.md b/README.md index 887f8ec..ec698a2 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ Powered by [hugo](https://gohugo.io/) static site generator. - [ ] Toggle TOC (check ) - [ ] Add KaTeX support (maybe?) +- [ ] More icons fonts: [Weather Icons](https://github.com/erikflowers/weather-icons), [Codicons](https://github.com/microsoft/vscode-codicons), [Material Design Icons](https://github.com/Templarian/MaterialDesign) ## Ideas @@ -22,7 +23,7 @@ These are things I've encountered and found interesting to talk about. I might w ## 🌟 Credits -The website's theme is based on [hugo-flex](https://github.com/de-souza/hugo-flex). +The website's theme is initially based on [hugo-flex](https://github.com/de-souza/hugo-flex). ## 📋 Licenses diff --git a/WORKSPACE b/WORKSPACE deleted file mode 100644 index ec3e34f..0000000 --- a/WORKSPACE +++ /dev/null @@ -1,15 +0,0 @@ -# NOTE: rules_hugo doesn't exist on registry.bazel.build so keep it in WORKSPACE -load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive") - -RULES_HUGO_COMMIT = "294a8ec626a394011d35397108c930be631ab9fa" - -http_archive( - name = "rules_hugo", - url = "https://github.com/stackb/rules_hugo/archive/%s.zip" % RULES_HUGO_COMMIT, - sha256 = "8df370f374dc72701b65b7c8a8add8ccb8423a845e973993fa9c68f8b516c9be", - strip_prefix = "rules_hugo-%s" % RULES_HUGO_COMMIT, -) - -load("@rules_hugo//hugo:rules.bzl", "hugo_repository") - -hugo_repository(name = "hugo", extended = True, version = "0.113.0") diff --git a/assets/css/_base.scss b/assets/css/_base.scss new file mode 100644 index 0000000..6ab1467 --- /dev/null +++ b/assets/css/_base.scss @@ -0,0 +1,154 @@ +:root { + --color-bg: #f2f4f8; + --color-fg: #3b4252; + --color-black: #2e3440; + --color-gray: #d8dee9; + --color-cyan: #88c0d0; + --color-blue: #5e81ac; + --color-yellow: #ebcb8b; + --color-red: #bf616a; + --color-green: #a3be8c; + --color-purple: #b48ead; + + @media (prefers-color-scheme: dark) { + --color-bg: #3b4252; + --color-fg: #eceff4; + --color-gray: #434c5e; + --color-blue: #81a1c1; + } +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + box-sizing: border-box; + font-family: "Iosevka Aile Web", sans-serif; + display: flex; + line-height: 1.5; + flex-direction: column; + min-height: 100vh; + margin: 0; + padding: 0; + color: var(--color-fg); + background: var(--color-bg); +} + +main { + flex-grow: 1; +} + +img { + max-width: 100%; + border-radius: 0.4rem; +} + +pre { + overflow-x: auto; + border: 0.1rem solid var(--color-black); + border-radius: 0.4rem; + padding: 1rem; +} + +blockquote { + border-left: 0.25rem solid var(--color-blue); + background: var(--color-gray); + margin: 1rem 0; + padding: 0.1rem 0.8rem; +} + +code { + font-family: "Iosevka Web", monospace; + + // For small code snippets in between normal text + &:not([class]) { + border-radius: 0.4rem; + background: var(--color-gray); + padding: 0.25rem; + } +} + +details > p { + margin-left: 0.3rem; + padding-left: 0.5rem; + border-left: 0.1rem solid var(--color-fg); +} + +mark { + background: var(--color-yellow); + color: var(--color-fg); + + @media (prefers-color-scheme: dark) { + color: var(--color-black); + } +} + +h1 { + font-size: 1.75rem; +} + +@for $i from 2 through 4 { + h#{$i} { + font-size: 2 - $i * 0.25rem; + &:hover > a { + visibility: visible; + } + } +} + +a { + color: var(--color-blue); + text-decoration: none; + position: relative; + + &.anchor { + visibility: hidden; + transition: 0.25s; + } + + &.footnote-ref { + &::before { + content: "["; + } + + &::after { + content: "]"; + } + } + + &:hover:not(.Banner-link):not(.Heading-link) { + color: var(--color-cyan); + border-bottom: 0.1rem solid var(--color-cyan); + + &:has(img) { + border-bottom: none; + } + } +} + +table { + width: 100%; +} + +th { + background: var(--color-cyan); + + @media (prefers-color-scheme: dark) { + background: var(--color-blue); + } +} + +table, th, td { + border: 0.1rem solid var(--color-fg); + border-collapse: collapse; + padding: 0.25rem 0.5rem; + overflow-wrap: normal; + word-break: normal; +} + +hr { + color: var(--color-fg); +} diff --git a/assets/css/nord.css b/assets/css/_chroma.scss similarity index 88% rename from assets/css/nord.css rename to assets/css/_chroma.scss index 16adfba..4fe15f8 100644 --- a/assets/css/nord.css +++ b/assets/css/_chroma.scss @@ -1,11 +1,12 @@ /* Background */ .bg { color: #d8dee9; background-color: #2e3440 } /* PreWrapper */ .chroma { color: #d8dee9; background-color: #2e3440; } /* Error */ .chroma .err { color: #bf616a } +/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } /* LineHighlight */ .chroma .hl { background-color: #4c566a } -/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7b88a1 } -/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7b88a1 } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7b88a1 } +/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7b88a1 } /* Line */ .chroma .line { display: flex; } /* Keyword */ .chroma .k { color: #81a1c1; font-weight: bold } /* KeywordConstant */ .chroma .kc { color: #81a1c1; font-weight: bold } @@ -24,6 +25,8 @@ /* NameFunction */ .chroma .nf { color: #88c0d0 } /* NameLabel */ .chroma .nl { color: #8fbcbb } /* NameNamespace */ .chroma .nn { color: #8fbcbb } +/* NameOther */ .chroma .nx { color: #d8dee9 } +/* NameProperty */ .chroma .py { color: #8fbcbb } /* NameTag */ .chroma .nt { color: #81a1c1 } /* LiteralString */ .chroma .s { color: #a3be8c } /* LiteralStringAffix */ .chroma .sa { color: #a3be8c } diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss new file mode 100644 index 0000000..153d60c --- /dev/null +++ b/assets/css/_fonts.scss @@ -0,0 +1,103 @@ +@font-face { + font-family: "Iosevka Aile Web"; + font-display: swap; + font-weight: 400; + font-stretch: normal; + font-style: normal; + src: url("/fonts/iosevka-aile-regular.woff2") format("woff2"); +} + +@font-face { + font-family: "Iosevka Aile Web"; + font-display: swap; + font-weight: 400; + font-stretch: normal; + font-style: italic; + src: url("/fonts/iosevka-aile-italic.woff2") format("woff2"); +} + +@font-face { + font-family: "Iosevka Aile Web"; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: normal; + src: url("/fonts/iosevka-aile-bold.woff2") format("woff2"); +} + +@font-face { + font-family: "Iosevka Aile Web"; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: italic; + src: url("/fonts/iosevka-aile-bolditalic.woff2") format("woff2"); +} + +@font-face { + font-family: "Iosevka Web"; + font-display: swap; + font-weight: 400; + font-stretch: normal; + font-style: normal; + src: url("/fonts/iosevka-regular.woff2") format("woff2"); +} + +@font-face { + font-family: "Iosevka Web"; + font-display: swap; + font-weight: 400; + font-stretch: normal; + font-style: italic; + src: url("/fonts/iosevka-italic.woff2") format("woff2"); +} + +@font-face { + font-family: "Iosevka Web"; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: normal; + src: url("/fonts/iosevka-bold.woff2") format("woff2"); +} + +@font-face { + font-family: "Iosevka Web"; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: italic; + src: url("/fonts/iosevka-bolditalic.woff2") format("woff2"); +} + +@font-face { + font-family: "Font Awesome 6 Free"; + font-display: block; + font-weight: 900; + font-style: normal; + src: url("/fonts/fa-solid-900.woff2") format("woff2"); +} + +@font-face { + font-family: "Font Awesome 6 Brands"; + font-display: block; + font-weight: 400; + font-style: normal; + src: url("/fonts/fa-brands-400.woff2") format("woff2"); +} + +@font-face { + font-family: "devicon"; + font-display: block; + font-weight: 400; + font-style: normal; + src: url("/fonts/devicon.woff") format("woff"); +} + +@font-face { + font-family: "font-logos"; + font-display: block; + font-weight: 400; + font-style: normal; + src: url("/fonts/font-logos.woff2") format("woff2"); +} diff --git a/assets/css/normalize.css b/assets/css/_vendor/normalize.css similarity index 100% rename from assets/css/normalize.css rename to assets/css/_vendor/normalize.css diff --git a/assets/css/fonts.css b/assets/css/fonts.css deleted file mode 100644 index d7a0851..0000000 --- a/assets/css/fonts.css +++ /dev/null @@ -1,71 +0,0 @@ -@font-face { - font-family: 'Iosevka Aile Web'; - font-display: swap; - font-weight: 400; - font-stretch: normal; - font-style: normal; - src: url('/fonts/iosevka-aile-regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Aile Web'; - font-display: swap; - font-weight: 400; - font-stretch: normal; - font-style: italic; - src: url('/fonts/iosevka-aile-italic.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Aile Web'; - font-display: swap; - font-weight: 700; - font-stretch: normal; - font-style: normal; - src: url('/fonts/iosevka-aile-bold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Aile Web'; - font-display: swap; - font-weight: 700; - font-stretch: normal; - font-style: italic; - src: url('/fonts/iosevka-aile-bolditalic.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Web'; - font-display: swap; - font-weight: 400; - font-stretch: normal; - font-style: normal; - src: url('/fonts/iosevka-regular.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Web'; - font-display: swap; - font-weight: 400; - font-stretch: normal; - font-style: italic; - src: url('/fonts/iosevka-italic.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Web'; - font-display: swap; - font-weight: 700; - font-stretch: normal; - font-style: normal; - src: url('/fonts/iosevka-bold.woff2') format('woff2'); -} - -@font-face { - font-family: 'Iosevka Web'; - font-display: swap; - font-weight: 700; - font-stretch: normal; - font-style: italic; - src: url('/fonts/iosevka-bolditalic.woff2') format('woff2'); -} diff --git a/assets/css/main.tpl.scss b/assets/css/main.tpl.scss index 69bbc80..42cd5e5 100644 --- a/assets/css/main.tpl.scss +++ b/assets/css/main.tpl.scss @@ -1,148 +1,57 @@ -@import "normalize"; -@import "fonts"; -@import "nord"; +@charset "UTF-8"; -:root { - --bg: #f2f4f8; - --fg: #3b4252; - --black: #2e3440; - --gray: #d8dee9; - --cyan: #88c0d0; - --blue: #5e81ac; +@use "_vendor/normalize"; +@use "fonts"; +@use "chroma"; +@use "base"; - @media (prefers-color-scheme: dark) { - --bg: #3b4252; - --fg: #eceff4; - --gray: #434c5e; - --blue: #81a1c1; +@mixin admon($fg, $sign, $title) { + border-top: 2.25rem solid $fg; + background: color-mix(in srgb, $fg 50%, var(--color-bg)); + + &::before { + font-family: "Font Awesome 6 Free"; + position: absolute; + content: $sign; + top: 0.4rem; + left: 0.75rem; + } + + &::after { + position: absolute; + content: $title; + font-weight: bold; + top: 0.5rem; + left: 2.25rem; } } -body { - font-family: "Iosevka Aile Web", sans-serif; - line-height: 1.6; - display: flex; - flex-direction: column; - min-height: 100vh; - margin: 0; - padding: 0; - color: var(--fg); - background: var(--bg); -} - -main { - flex-grow: 1; -} - -img { - max-width: 100%; - border-radius: 0.4rem; -} - -pre { - overflow-x: auto; - border: 0.1rem solid var(--black); - border-radius: 0.4rem; - padding: 1rem; -} - -blockquote { - border-left: 0.25rem solid var(--blue); - background: var(--gray); +.admonition { margin: 1rem 0; - padding: 0.1rem 0.8rem; -} - -code { - font-family: "Iosevka Web", monospace; - - // For small code snippets in between normal text - &:not([class]) { - border-radius: 0.4rem; - background: var(--gray); - padding: 0.25rem; - } -} - -table { - margin-left: auto; - margin-right: auto; -} - -table, th, td { - border: 0.1rem solid var(--fg); - border-collapse: collapse; - padding: 0.25rem 0.5rem; -} - -th { - background: var(--cyan); -} - -h1 { - font-size: 1.75rem; -} - -h2 { - font-size: 1.5rem; -} - -h3 { - font-size: 1.25rem; -} - -h4 { - font-size: 1rem; -} - -h2:hover a, h3:hover a, h4:hover a { - visibility: visible; -} - -a { - color: var(--blue); - text-decoration: none; - display: inline-block; position: relative; - &.anchor { - visibility: hidden; - transition: 0.25s; + p { + padding: 1rem; } - &.footnote-ref { - &::before { - content: "["; - } - - &::after { - content: "]"; - } + &-tip p { + @include admon(var(--color-green), "\f0eb", "TIP"); } - &:hover:not(.Banner-link):not(.Heading-link) { - color: var(--cyan); - text-decoration: underline; - } -} - -.toc { - float: right; - margin: 1rem 0rem 1rem 1rem; - width: 45%; - border: 0.1rem solid var(--gray); - border-radius: 0.4rem; - background: var(--gray); - - &-header { - padding-left: 1rem; + &-note p { + @include admon(var(--color-blue), "\f303", "NOTE"); } - @media only screen and (max-width: 1000px) { - float: none; - margin: auto; - margin-top: 1rem; - width: 60%; + &-warning p { + @include admon(var(--color-yellow), "\f071", "WARNING"); + } + + &-important p { + @include admon(var(--color-red), "\f06a", "IMPORTANT"); + } + + &-caution p { + @include admon(var(--color-purple), "\f06d", "CAUTION"); } } @@ -160,18 +69,17 @@ a { &-link { font-size: 1.5rem; - color: var(--fg); + color: var(--color-fg); padding: 0.5rem 0.5rem; &::after { content: ""; - display: block; width: 0; height: 2px; left: 50%; bottom: 0; position: absolute; - background: var(--fg); + background: var(--color-fg); transition: all 0.25s ease-in-out; } @@ -207,7 +115,7 @@ a { .Footer { text-align: center; padding: 0.5rem; - background: var(--gray); + background: var(--color-gray); span { margin: 0.5rem 0.75rem; @@ -225,7 +133,7 @@ a { } &-background { - background: var(--gray); + background: var(--color-gray); } &-clickable { @@ -234,3 +142,36 @@ a { display: inline-block; } } + +.toc { + float: right; + margin: 1rem 0rem 1rem 1rem; + width: 45%; + border: 0.1rem solid var(--color-gray); + border-radius: 0.4rem; + background: var(--color-gray); + + &-header { + padding-left: 1rem; + } + + @media only screen and (max-width: 1000px) { + float: none; + margin: auto; + margin-top: 1rem; + width: 60%; + } +} + +.spoiler { + background: var(--color-fg); + color: transparent; + cursor: help; + user-select: none; + transition: background 0.3s ease 0.2s, color 0.2s ease 0.25s; + + &:focus, &:hover { + color: inherit; + background: inherit; + } +} diff --git a/assets/css/pages/homepage.css b/assets/css/pages/homepage.css index 4b1888e..8ffd361 100644 --- a/assets/css/pages/homepage.css +++ b/assets/css/pages/homepage.css @@ -8,13 +8,6 @@ margin-bottom: 2rem; } -h3 { - text-align: center; - color: var(--fg) !important; -} - main { display: flex !important; - align-items: center !important; - justify-content: center !important; } diff --git a/config.yaml b/config.yaml deleted file mode 100644 index d396da0..0000000 --- a/config.yaml +++ /dev/null @@ -1,58 +0,0 @@ -baseURL: https://www.folliehiyuki.com -languageCode: en-us -title: FollieHiyuki's blog -hasCJKLanguage: true -enableEmoji: true -enableRobotsTXT: true -disablePathToLower: true -disableHugoGeneratorInject: true -disableKinds: -- taxonomy -- term -# rssLimit: 10 - -menu: - nav: - - name: Blog - url: blog/ - weight: 1 - - name: About - url: about/ - weight: 2 - -outputs: - section: - - HTML - -minify: - minifyOutput: true - -markup: - goldmark: - renderer: - hardWraps: true - unsafe: false - parser: - attribute: - block: true - tableOfContents: - startLevel: 2 - endLevel: 4 - ordered: false - highlight: - tabWidth: 2 - noClasses: false - -privacy: - disqus: - disable: true - googleAnalytics: - disable: true - instagram: - disable: true - twitter: - disable: true - vimeo: - disable: true - youtube: - disable: true diff --git a/content/_index.md b/content/_index.md index 90a7316..054d7fb 100644 --- a/content/_index.md +++ b/content/_index.md @@ -6,5 +6,3 @@ css: css/pages/homepage.css {{< figure src="avatar.webp" alt="avatar" class="avatar" width=100% height=100% >}} ### YAML editor by day, anime nerd by night - -### [RSS](/index.xml) · [GitHub](https://github.com/FollieHiyuki) · [Gitea](https://git.disroot.org/FollieHiyuki) · [Docs](https://docs.folliehiyuki.com) diff --git a/content/about/index.md b/content/about/index.md index d550342..7fe7bd3 100644 --- a/content/about/index.md +++ b/content/about/index.md @@ -1,13 +1,23 @@ --- title: About me -description: About FollieHiyuki and other things related +description: About FollieHiyuki and other related things --- My name is Hoang Nguyen Huy, a DevOps engineer and a massive weeb that likes FOSS and cute anime girls. You might know me on the Internet as *folliehiyuki* (or the shorten form - *follie*). -## Contact +## Contacts - Email: folliekazetani@protonmail.com `text/plain` messages with PGP encryption are encouraged. - My public PGP key: [0xB0567C20730E9B11](publickey.txt) -- Fediverse: [@folliehiyuki@fosstodon.org](https://fosstodon.org/@folliehiyuki) +- Fediverse: {{< link rel="me noopener external" target="_blank" href="https://fosstodon.org/@folliehiyuki" >}}@folliehiyuki@fosstodon.org{{< /link >}} + +## Public keys + +- PGP: [0xB0567C20730E9B11](publickey.txt) + +## Code forges + +- [GitHub](https://github.com/FollieHiyuki) +- [GitLab](https://gitlab.com/FollieHiyuki) +- [Disroot's Gitea](https://git.disroot.org/FollieHiyuki) +- [Codeberg](https://codeberg.org/FollieHiyuki) diff --git a/content/blog/gitlab-is-an-awesome-mess/index.md b/content/blog/gitlab-is-an-awesome-mess/index.md index 1a0140e..6eaa27d 100644 --- a/content/blog/gitlab-is-an-awesome-mess/index.md +++ b/content/blog/gitlab-is-an-awesome-mess/index.md @@ -49,7 +49,7 @@ $ gitlab-psql And if it still doesn't work? Just go to the [migration file list](https://gitlab.com/gitlab-org/gitlab/-/tree/master/spec/migrations), find the specific Ruby migration code that failed in the batch, and replicate it with SQL commands directly inside `gitlab-psql` console. Remember to mark the migration as finished afterward. -Another example, just recently, is the introduction of [`admin_mode` scope for Personal Access Token](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107875) in version 15.8. All admin tokens have this scope injected to them automatically, while there are no way to set or unset it through GitLab API. What it means is that all my Pulumi automation code to manage admin access tokens is now broken, because Pulumi will try to recreate the tokens every time it runs, due to the mismatched scopes in state. How nice! +Another example, just recently, is the introduction of [*admin_mode* scope for Personal Access Token](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107875) in version 15.8. All admin tokens have this scope injected to them automatically, while there are no way to set or unset it through GitLab API. What it means is that all my Pulumi automation code to manage admin access tokens is now broken, because Pulumi will try to recreate the tokens every time it runs, due to the mismatched scopes in state. How nice! ### Tokens diff --git a/content/blog/rootfull-rootless-containers-on-btrfs-zfs/index.md b/content/blog/rootfull-rootless-containers-on-btrfs-zfs/index.md index 6972a64..aa018f9 100644 --- a/content/blog/rootfull-rootless-containers-on-btrfs-zfs/index.md +++ b/content/blog/rootfull-rootless-containers-on-btrfs-zfs/index.md @@ -119,9 +119,9 @@ Voilà! Enjoy your new rootfull container setup! #### Starting containerd -In rootless mode, you need [`containerd_rootless.sh`](https://github.com/containerd/nerdctl/blob/master/extras/rootless/containerd-rootless.sh) script and a way to run it on user login (for convenient sake). +In rootless mode, you need [containerd_rootless.sh](https://github.com/containerd/nerdctl/blob/master/extras/rootless/containerd-rootless.sh) script and a way to run it on user login (for convenient sake). -If you use `systemd`, great! nerdctl already provides [`containerd-rootless-setuptools.sh`](https://github.com/containerd/nerdctl/blob/master/extras/rootless/containerd-rootless-setuptool.sh) script that does the job for you. Just follow the instruction! +If you use `systemd`, great! nerdctl already provides [containerd-rootless-setuptools.sh](https://github.com/containerd/nerdctl/blob/master/extras/rootless/containerd-rootless-setuptool.sh) script that does the job for you. Just follow the instruction! For other service managers, if yours support creating user services ([runit](https://docs.voidlinux.org/config/services/user-services.html) and [dinit](https://github.com/davmac314/dinit/blob/master/doc/getting_started.md) do), use it. Otherwise, just start `containerd_rootless.sh` inside `~/.profile` (or a similar file) or use your desktop environment's autostart mechanism. diff --git a/content/blog/test-post.md b/content/blog/test-post/index.md similarity index 54% rename from content/blog/test-post.md rename to content/blog/test-post/index.md index 25481c5..fe0d5d6 100644 --- a/content/blog/test-post.md +++ b/content/blog/test-post/index.md @@ -84,6 +84,48 @@ Ordered? 3. No one cares { .ordered } +Todo list? + +- [ ] 1st item +- [x] 2nd item (DONE) + - [ ] 3rd item (not yet) + +### Shortcodes + +{{< details text="This is a spoiler block" >}} +This shouldn't be shown at first. +{{< /details >}} + +{{< spoiler >}}Spoiler text can also be inlined.{{< /spoiler >}}And {{< mark "important characters" >}} can be highlighted. + +Font icons can be injected inside a \ tag: +- [Font Awesome (brands/free)](https://origin.fontawesome.com/search?o=r&m=free) : {{< icon class="fa-brands fa-rust" >}}{{< /icon >}}, {{< icon class="fa-solid fa-paw" >}}{{< /icon >}} +- [Devicon](https://github.com/devicons/devicon/blob/master/devicon-base.css): {{< icon class="devicon-ansible-plain" >}}{{< /icon >}}, {{< icon class="devicon-terraform-plain" >}}{{< /icon >}} +- [Font Logos](https://github.com/lukas-w/font-logos/blob/master/README.md): {{< icon class="fl-alpine" >}}{{< /icon >}}, {{< icon class="fl-almalinux" >}}{{< /icon >}} + +Admonitions: + +{{< admonition "note" >}}Take note of this paragraph{{< /admonition >}} + +{{< admonition "warning" >}} +This is a test paragraph in a test post. +{{< /admonition >}} + +{{< admonition "tip" >}} +Some tips and tricks. +{{< /admonition >}} + +{{< admonition "important" >}} +This is a serious message. +{{< /admonition >}} + +{{< admonition "caution" >}} +Avoid what is written here. +{{< /admonition >}} + +Display tables with external data sources: +{{< table path="sample-table.csv" caption="sample-table.csv" header=true >}} + # Level 1 ## Level 2 ### Level 3 diff --git a/content/blog/test-post/sample-table.csv b/content/blog/test-post/sample-table.csv new file mode 100644 index 0000000..1c4417e --- /dev/null +++ b/content/blog/test-post/sample-table.csv @@ -0,0 +1,3 @@ +Name,Address +Joe,25th Oracle st. +Alan,69th Mandeva st. diff --git a/hugo.toml b/hugo.toml new file mode 100644 index 0000000..ab1b955 --- /dev/null +++ b/hugo.toml @@ -0,0 +1,43 @@ +baseURL = "https://www.folliehiyuki.com" +languageCode = 'en-us' +title = "FollieHiyuki's blog" +hasCJKLanguage = true +enableEmoji = true +enableRobotsTXT = true +disablePathToLower = true +disableHugoGeneratorInject = true +disableKinds = ["taxonomy", "term"] +# rssLimit = 10 + +[menu] +nav = [ + { name = "Blog", url = "blog/", weight = 10 }, + { name = "About", url = "about/", weight = 20 }, +] + +[outputs] +section = ["HTML"] + +[minify] +minifyOutput = true + +[markup.goldmark.renderer] +hardWraps = true +unsafe = false +[markup.goldmark.parser.attribute] +block = true +[markup.tableOfContents] +startLevel = 2 +endLevel = 4 +ordered = false +[markup.highlight] +tabWidth = 2 +noClasses = false + +[privacy] +disqus.disable = true +googleAnalytics.disable = true +instagram.disable = true +twitter.disable = true +vimeo.disable = true +youtube.disable = true diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html new file mode 100644 index 0000000..e7e824d --- /dev/null +++ b/layouts/_default/_markup/render-link.html @@ -0,0 +1,2 @@ +{{ $isRemote := strings.HasPrefix .Destination "http" }} +{{ .Text | safeHTML }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 96f561d..9b97537 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,12 +1,13 @@