diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b9e7186 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +_site/ +.sass-cache/ +.jekyll-cache/ +.jekyll-metadata +.gem \ No newline at end of file diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..e0503c6 --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,28 @@ +image: jekyll/jekyll + +cache: + paths: + - _bundle/ + +build: + stage: build + script: + - bundle install + - bundle exec jekyll build + - mv _site public + artifacts: + paths: + - public + except: + - main + +pages: + stage: deploy + script: + - bundle exec jekyll build + - mv _site public + artifacts: + paths: + - public + only: + - main diff --git a/.woodpecker.yml b/.woodpecker.yml new file mode 100644 index 0000000..657af55 --- /dev/null +++ b/.woodpecker.yml @@ -0,0 +1,52 @@ +# Jekyll on Woodpecker to codeberg pages +# +# This file would typically be .woodpecker.yml in the root of your repository. +# +# Takes a repository with jekyll source, generates the static site and +# pushes the result to codeberg pages +# +# Needs a codeberg access token (cbtoken) as secret in woodpecker config +# Also uses another secret (cbmail) with email address for git config +# +# CBIN must be replaced with the source repo +# CBOUT must be replaced with the target codeberg pages repo +# CBUSER must be replaced with the user/org +# +# See the _config.yml file for the important keep_files: line to preserve +# git metadata during build +# +# We also assume a domains file in the source repo that gets copied to +# .domains in the target repo so codeberg pages works for custom domains +# + +steps: + build: + # Use the official jekyll build container + image: jekyll/jekyll + secrets: [ cbtoken, cbmail ] + commands: + # Avoid permission denied errors + - chmod -R a+w . + # Set up git in a working way + - git config --global --add safe.directory /woodpecker/src/codeberg.org/daudix-UFO/duckquill-source/_site + - git config --global user.email "$CBMAIL" + - git config --global user.name "CI Builder" + - git config --global init.defaultBranch pages + # clone and move the target repo + - git clone -b pages https://codeberg.org/daudix-UFO/duckquill.git + - mv blog _site + - chmod -R a+w _site + - cd _site + # Prepare for push + - git remote set-url origin https://$CBTOKEN@codeberg.org/daudix-UFO/duckquill.git + - cd .. + # Run Jekyll build stage + - bundle install + - bundle exec jekyll build + # Only needed for custom domains + # - cp domains _site/.domains + # Push to target + - cd _site + - git add --all + - git commit -m "Woodpecker CI Jekyll Build at $( env TZ=Europe/Berlin date +"%Y-%m-%d %X %Z" )" + - git push \ No newline at end of file diff --git a/404.md b/404.md new file mode 100644 index 0000000..98e5e9d --- /dev/null +++ b/404.md @@ -0,0 +1,13 @@ +--- +layout: default +permalink: /404.html +--- + +![404]({{site.baseurl}}/assets/404.png){:.full.pixels}{:loading="lazy"} + +# Document Not Found + +The requested page could not be found. If you feel this is not normal, then you create an issue on the {{ site.hosting }}. + +[Go Back](){: .inline-button} [File an issue]({{site.issuesurl}}) +{: .dialog-buttons} diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..37031a9 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,5 @@ +FROM jekyll/jekyll + +COPY Gemfile* ./ + +RUN chmod -R a+w . && bundle install \ No newline at end of file diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..46fc7a3 --- /dev/null +++ b/Gemfile @@ -0,0 +1,10 @@ +source 'https://rubygems.org' + +group :jekyll_plugins do + gem 'jekyll-sass-converter', '~> 2.2' + gem 'jekyll-sitemap' + gem 'jekyll-feed' + gem 'jekyll-toc' +end + +gem "webrick" \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..628e29d --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,83 @@ +GEM + remote: https://rubygems.org/ + specs: + addressable (2.8.5) + public_suffix (>= 2.0.2, < 6.0) + colorator (1.1.0) + concurrent-ruby (1.2.2) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + ffi (1.15.5) + forwardable-extended (2.6.0) + http_parser.rb (0.8.0) + i18n (1.14.1) + concurrent-ruby (~> 1.0) + jekyll (4.3.2) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (>= 2.0, < 4.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.3, >= 2.3.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (>= 0.3.6, < 0.5) + pathutil (~> 0.9) + rouge (>= 3.0, < 5.0) + safe_yaml (~> 1.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-feed (0.17.0) + jekyll (>= 3.7, < 5.0) + jekyll-sass-converter (2.2.0) + sassc (> 2.0.1, < 3.0) + jekyll-sitemap (1.4.0) + jekyll (>= 3.7, < 5.0) + jekyll-toc (0.18.0) + jekyll (>= 3.9) + nokogiri (~> 1.12) + jekyll-watch (2.2.1) + listen (~> 3.0) + kramdown (2.4.0) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.4) + listen (3.8.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.4.0) + nokogiri (1.15.4-x86_64-linux) + racc (~> 1.4) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (5.0.3) + racc (1.7.1) + rb-fsevent (0.11.2) + rb-inotify (0.10.1) + ffi (~> 1.0) + rexml (3.2.6) + rouge (4.1.3) + safe_yaml (1.0.5) + sassc (2.4.0) + ffi (~> 1.9) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + unicode-display_width (2.4.2) + webrick (1.8.1) + +PLATFORMS + x86_64-linux-musl + +DEPENDENCIES + jekyll-feed + jekyll-sass-converter (~> 2.2) + jekyll-sitemap + jekyll-toc + webrick + +BUNDLED WITH + 2.3.25 diff --git a/README.md b/README.md index 1fec7c2..e252505 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,5 @@ -# duckquill-source + +- Jakub Steiner for an awesome [OS Component Website](https://jimmac.github.io/os-component-website) that are used as a base +- Cassidy James for and awesome [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon) +- dwb, ejm and jgs for ASCII art diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..d8435b6 --- /dev/null +++ b/_config.yml @@ -0,0 +1,62 @@ +# Site settings +title: Duckquill +baseurl: "/duckquill" # the subpath of your site, e.g. /blog/ + # usually empty. necessary for building absolute URIs + # for metadata header +url: "https://daudix-ufo.codeberg.page" # the base hostname & protocol for your site +sourceurl: "https://codeberg.org/daudix-UFO/duckquill" # "edit this website" link in the footer +hosting: "Codeberg" # the hosting of your site, e.g Codeberg +description: "Duckquill blog template." +issuesurl: "https://codeberg.org/daudix-UFO/duckquill/issues" # issue tracker for website +permalink: /:title/ +primary-color: "#ffa348" # used in iOS theme. further color customization in _sass/variables.scss + +# Mastodon-powered commenting. +# See https://github.com/cassidyjames/cassidyjames.github.io/blob/main/_config.yaml#L31-L70 +# Values can be overridden in front-matter, e.g. +# for multi-author blogs or guest posts. +comments: + # Your Mastodon API host; this should be where you have an account + host: mstdn.social + + # Optional; vanity domain if configured; host will be used if omitted + domain: + + # Used to determine who the original/verified poster is; role may be expanded + # in the future (e.g. for moderation) + username: Daudix + + # Optional; required to fetch more than 60 replies to any given blog post. + # Application access token with read:statuses scope; NOTE: IF INCLUDED, ANYONE + # WILL BE ABLE TO READ THE ASSOCIATED ACCOUNT'S PRIVATE STATUSES. It is highly + # recommended to use a dedicated bot/API account to create an application with + # scope read:statuses. + token: + + # Additional verified usernames in username@example.com format. If they are on + # the host listed above, OMIT the @example.com + verified: + +# Build settings +markdown: kramdown +timezone: UTC +exclude: [Gemfile, Gemfile.lock, Dockerfile, local.sh, rename.sh, README.md] + +compress_html: + blanklines: true + +feed: + tags: + path: "feed/tags/" +plugins: + - jekyll-sitemap + - jekyll-feed + - jekyll-toc +defaults: + - scope: + path: "_posts" + type: "posts" + values: + layout: "default" + author: "Duckquill" + destination: "posts" \ No newline at end of file diff --git a/_includes/comments.html b/_includes/comments.html new file mode 100644 index 0000000..e5d7870 --- /dev/null +++ b/_includes/comments.html @@ -0,0 +1,427 @@ + + +{% if include.host %} + {% assign host = include.host %} +{% elsif page.comments.host %} + {% assign host = page.comments.host %} +{% else %} + {% assign host = site.comments.host %} +{% endif %} + +{% if include.domain %} + {% assign domain = include.domain %} +{% elsif page.comments.domain %} + {% assign domain = page.comments.domain %} +{% elsif site.comments.domain %} + {% assign domain = site.comments.domain %} +{% else %} + {% assign domain = host %} +{% endif %} + +{% if include.username %} + {% assign username = include.username %} +{% elsif page.comments.username %} + {% assign username = page.comments.username %} +{% else %} + {% assign username = site.comments.username %} +{% endif %} + +{% if include.token %} + {% assign token = include.token %} +{% elsif page.comments.token %} + {% assign token = page.comments.token %} +{% else %} + {% assign token = site.comments.token %} +{% endif %} + +{% if include.id %} + {% assign id = include.id %} +{% else %} + {% assign id = page.comments.id %} +{% endif %} + +{% if site.comments.verified %} + {% assign verified = site.comments.verified | jsonify %} +{% else %} + {% assign verified = "[]" %} +{% endif %} + +
+

Comments

+

Comment on this blog post by publicly replying to this Mastodon post using a Mastodon or other ActivityPub/​Fediverse account. Known non-private replies are displayed below.

+ +
+

No known comments, yet. Reply to this Mastodon post to add your own!

+ +
+ + + +
diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..4b4f990 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,11 @@ + diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..eb7736f --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,25 @@ + + + + + + + {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} + + + + + + + + + + + + + + + + + + diff --git a/_includes/navigation.html b/_includes/navigation.html new file mode 100644 index 0000000..66ef862 --- /dev/null +++ b/_includes/navigation.html @@ -0,0 +1,19 @@ + diff --git a/_layouts/compress.html b/_layouts/compress.html new file mode 100644 index 0000000..bb34487 --- /dev/null +++ b/_layouts/compress.html @@ -0,0 +1,10 @@ +--- +# Jekyll layout that compresses HTML +# v3.1.0 +# http://jch.penibelst.de/ +# © 2014–2015 Anatol Broder +# MIT License +--- + +{% capture _LINE_FEED %} +{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "" %}{% endif %}{% unless _pre_before contains "" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %}
Step Bytes
raw {{ content | size }}{% if _profile_endings %}
endings {{ _profile_endings }}{% endif %}{% if _profile_startings %}
startings {{ _profile_startings }}{% endif %}{% if _profile_comments %}
comments {{ _profile_comments }}{% endif %}{% if _profile_collapse %}
collapse {{ _profile_collapse }}{% endif %}{% if _profile_clippings %}
clippings {{ _profile_clippings }}{% endif %}
{% endif %}{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..5acdf12 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,22 @@ +--- +layout: compress +--- + + + + + {% include head.html %} + + + + {% include navigation.html %} + +
+ {{ content }} +
+ + {% include footer.html %} + + + + diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..de8dd0c --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,68 @@ +--- +layout: default +--- + +

{{ page.title }}

+ + + + {% if page.tags %} + {% if page.tags.size > 0 %} + • {{ page.tags | join: ', ' }} + {% endif %} + {% endif %} + + +{% if page.archive %} +
+

⚠ Archived

+ {{ page.archive | markdownify }} +
+{% endif %} + +{% if page.trigger %} +
+

⚠ Trigger Warning

+ {{ page.trigger | markdownify }} +
+{% endif %} + +{% if page.disclaimer %} +
+

⚠ Disclaimer(s)

+ {{ page.disclaimer | markdownify }} +
+{% endif %} + +{% if page.toc %} +

Table of Contents

+ {{ content | toc }} +{% else %} + {{ content }} +{% endif %} + +{%- if page.comments -%} + {%- if page.comments.id -%} + {%- include comments.html -%} +
+ {%- endif -%} +{%- endif -%} + +{% if page.next %} +

Read Next

+ + {{ page.next.title }} + +{% endif %} + +{% if page.previous %} +

Read Previous

+ + {{ page.previous.title }} + +{% endif %} + +

+ Go to top + File an issue +

diff --git a/_layouts/posts.html b/_layouts/posts.html new file mode 100644 index 0000000..f1e4b6a --- /dev/null +++ b/_layouts/posts.html @@ -0,0 +1,25 @@ +--- +layout: default +--- + +{{ content }} +

{{ page.title }}

+{{ page.description }} + +{% for post in site.posts %} +
+

+ + {{ post.title }} + +

+ + + {% if post.tags %} + {% if post.tags.size > 0 %} + • {{ post.tags | join: ', ' }} + {% endif %} + {% endif %} + +
+{% endfor %} diff --git a/_layouts/tags.html b/_layouts/tags.html new file mode 100644 index 0000000..a8d22b5 --- /dev/null +++ b/_layouts/tags.html @@ -0,0 +1,16 @@ +--- +layout: default +--- + +{{ content }} +

{{ page.title }}

+{{ page.description }} + +{% for tag in site.tags %} +

{{ tag[0] }}

+ +{% endfor %} diff --git a/_posts/2023-08-30-the-quill-of-duck.md b/_posts/2023-08-30-the-quill-of-duck.md new file mode 100644 index 0000000..d41989b --- /dev/null +++ b/_posts/2023-08-30-the-quill-of-duck.md @@ -0,0 +1,48 @@ +--- +layout: post +title: "The Quill of Duck" +tags: Demo Test +toc: true +comments: + id: +--- + +![Quill](../assets/posts/2023-08-31/quill.png){:.full.media.hover} + +## The what? + +This is a Duckquill post example, this post has nothing but a bunch of text and random formattings, acting like a demo. + +## The Stanley! + +This is the story of a man named _Stanley_. + +_Stanley_ worked for a company in a big building where he was Employee `#427`. + +![The Office](../assets/posts/2023-08-31/The_Office.webp){:.full.media.hover} + +Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard. + +Orders came to him through a monitor on his desk telling him what buttons to push, how long to push them, and in what order. + +This is what Employee `#427` did every day of every month of every year, and although others may have considered it soul rending, + +_Stanley_ relished every moment that the orders came in, as though he had been made exactly for this job. + +And _Stanley_ was happy. + +And then one day, something very peculiar happened. + +Something that would forever change _Stanley_; + +Something he would never quite forget. + +He had been at his desk for nearly an hour when he had realized not one single order had arrived on the monitor for him to follow. + +No one had shown up to give him instructions, call a meeting, or even say 'hi'. Never in all his years at the company had this happened, this complete isolation. + +Something was very clearly wrong. Shocked, frozen solid, _Stanley_ found himself unable to move for the longest time. + +But as he came to his wits and regained his senses, he got up from his desk and stepped out of his office. + +All of his co-workers were gone. What could it mean? Stanley decided to go to the meeting room; perhaps he had simply missed a memo. diff --git a/_sass/comments.scss b/_sass/comments.scss new file mode 100644 index 0000000..3379fe9 --- /dev/null +++ b/_sass/comments.scss @@ -0,0 +1,248 @@ +/* Comments */ +section#comments { + .comment { + display: grid; + column-gap: 1rem; + grid-template-areas: + "avatar name" + "avatar time" + "avatar post" + "...... card" + "...... interactions"; + grid-template-columns: min-content; + justify-items: start; + margin: 2rem auto 2rem -1rem; + padding: 1rem; + + .avatar-link { + grid-area: avatar; + height: 4rem; + position: relative; + width: 4rem; + + .avatar { + margin: unset; + background-color: var(--bg2); + border-radius: var(--border-radius); + box-shadow: var(--shadow); + height: 100%; + width: 100%; + } + + &.op::after { + background-color: var(--accent-color); + border-radius: 50%; + bottom: -0.25rem; + color: var(--dark4); + content: "✓"; + display: block; + font-size: 1.25rem; + font-weight: bold; + height: 1.5rem; + line-height: 1.5rem; + position: absolute; + right: -0.25rem; + text-align: center; + width: 1.5rem; + } + } + + .author { + align-items: center; + cursor: default; + display: flex; + font-weight: bold; + gap: 0.5rem; + grid-area: name; + + .instance { + background-color: var(--fg05); + border-radius: 9999px; + color: var(--text); + font-size: smaller; + font-weight: normal; + padding: 0.25rem 0.75rem; + + &:hover { + opacity: 0.8; + text-decoration: none; + } + + &.op { + background-color: var(--accent-color); + color: var(--dark4); + + &::before { + content: "✓"; + font-weight: bold; + margin-inline-end: 0.25rem; + margin-inline-start: -0.25rem; + } + } + } + } + + time { + @extend small; + + font-size: smaller; + opacity: 0.9; + grid-area: time; + line-height: 1.5rem; + + &.edited::after { + content: " *"; + } + } + + main { + grid-area: post; + justify-self: stretch; + + p:first-child { + margin-top: 0.25rem; + } + + p:last-child { + margin-bottom: 0; + } + } + + .card { + color: inherit; + grid-area: card; + max-width: 400px; + + &:hover { + text-decoration: none; + } + + figure { + border-radius: var(--border-radius); + background-color: var(--bg2); + box-shadow: var(--shadow); + margin-left: 0; + margin-right: 0; + overflow: hidden; + transition: var(--transition); + + img { + margin: unset; + } + + &:hover { + transform: translateY(-0.5rem); + } + } + + figcaption { + display: grid; + gap: 0.5rem; + margin: 0; + padding: 1rem; + text-align: left; + + * { + display: inline-block; + line-height: 1.25; + margin: 0; + overflow: hidden; + padding: 0; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + + // Hide the card from the shared post + &:first-of-type .card { + display: none; + } + + footer { + @extend small; + + display: flex; + gap: 0.4rem; + grid-area: interactions; + margin-top: 0.925rem; + + .boosts { + cursor: default; + font-weight: 600; + font-variation-settings: "wght" 600; /* needed for webkit */ + font-size: 90%; + padding: 0.4rem 1rem; + border-radius: var(--border-radius); + background-color: var(--orange-bg); + color: var(--orange-fg); + + &::before { + color: var(--orange2); + content: "🔁"; + margin-inline-end: 0.25rem; + } + } + + .faves { + cursor: default; + font-weight: 600; + font-variation-settings: "wght" 600; /* needed for webkit */ + font-size: 90%; + padding: 0.4rem 1rem; + border-radius: var(--border-radius); + background-color: var(--red-bg); + color: var(--red-fg); + + &::before { + color: var(--red2); + content: "❤️"; + margin-inline-end: 0.25rem; + } + } + } + + .emoji { + margin: unset; + display: inline; + height: 1.25rem; + vertical-align: middle; + width: 1.25rem; + } + + .invisible { + display: none; + } + + .ellipsis::after { + content: "…"; + } + + details { + summary { + background-image: linear-gradient( + 90deg, + transparent, + transparent 0.4rem, + var(--bg2) 0.4rem, + var(--bg2) calc(100% - 0.4rem), + transparent calc(100% - 0.4rem), + transparent + ), + repeating-linear-gradient( + 45deg, + var(--bg1), + var(--bg1) 0.3rem, + var(--accent-color) 0.3rem, + var(--accent-color) 0.6rem + ); + border-radius: var(--border-radius-small); + color: inherit; + cursor: pointer; + box-shadow: var(--shadow); + margin-top: 0.925rem; + padding: 1rem; + } + } + } +} diff --git a/_sass/fonts.scss b/_sass/fonts.scss new file mode 100644 index 0000000..a3efb47 --- /dev/null +++ b/_sass/fonts.scss @@ -0,0 +1,8 @@ +/* Typography */ +@font-face { + font-family: "InterVar"; + font-weight: 100 900; + font-display: swap; + font-style: oblique italic 0deg 10deg; + src: url("../fonts/Inter.var.woff2?v=4.0") format("woff2"); +} diff --git a/_sass/main.scss b/_sass/main.scss new file mode 100644 index 0000000..41c0e01 --- /dev/null +++ b/_sass/main.scss @@ -0,0 +1,478 @@ +* { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; + scroll-behavior: smooth; + scrollbar-color: var(--fg50) transparent; +} + +body { + font-size: 16px; + font-family: "InterVar", sans-serif; + font-weight: 400; + line-height: 1.6; + color: var(--text); + background-color: var(--background); + /* ⇩⇩ put footer at the bottom for short pages, such as the 404 ⇩⇩ */ + display: grid; + min-height: 100vh; + grid-template-rows: auto minmax(auto, 1fr) auto; /* header, stuff, footer */ +} + +@media only screen and (max-device-width: 480px) { + body { + font-size: 14px; + } +} + +@media (prefers-color-scheme: dark) { + html { + background-color: var(--dark5); + } +} + +/* Layout */ +.container { + width: 80%; + margin-left: auto; + margin-right: auto; + max-width: var(--content-width); +} + +@media only screen and (max-device-width: 480px) { + /*mobile*/ + .container { + width: 90%; + } +} + +:target { + scroll-margin-top: 25vh; + animation: glow-in-out var(--transition-long); + animation-delay: 1s; +} + +@keyframes glow-in-out { + 0% { + text-shadow: none; + } + 50% { + text-shadow: var(--glow); + } + 100% { + text-shadow: none; + } +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 3rem 0 1rem; + font-weight: 600; + line-height: 1.25; + font-variation-settings: "wght" 600; /* needed for webkit */ +} + +h1 { + font-size: 1.5rem; +} + +@media screen and (min-width: 640px) { + h1 { + font-size: 1.6rem; + } +} + +h2 { + font-size: 1.2rem; +} + +a { + font-weight: 600; + text-decoration: none; + color: var(--accent-color); + cursor: pointer; + font-variation-settings: "wght" 600; /* needed for webkit */ +} + +a:hover { + text-decoration: underline; +} + +b { + font-weight: 600; +} + +small { + color: var(--fg50); +} + +dl { + padding: 0; +} + +dl dt { + padding: 0; + margin-top: 1rem; + font-size: 1rem; + font-weight: bold; +} + +dl dd { + padding: 0; + margin-bottom: 1rem; +} + +hr { + margin: 3rem auto 4rem; + width: 40%; + opacity: 40%; +} + +blockquote { + padding: 0 1rem; + margin-left: 0; + color: var(--fg40); + border-left: 0.3rem solid var(--fg07); +} + +blockquote > :first-child { + margin-top: 0; +} + +blockquote > :last-child { + margin-bottom: 0; +} + +abbr { + cursor: help; +} + +kbd { + background-color: var(--fg05); + border: 1px solid var(--fg07); + border-radius: 4px; + box-shadow: inset 0 -1px 0 var(--fg09); + color: var(--text); + display: inline-block; + font-size: 11px; + line-height: 10px; + padding: 3px 5px; + vertical-align: middle; + cursor: pointer; + user-select: none; + -webkit-user-select: none; +} + +kbd:active { + box-shadow: inset 0 0px 0 var(--fg09); + vertical-align: bottom; + filter: contrast(0.2); +} + +/* Tables */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +table { + display: block; + width: 100%; + overflow: auto; + word-break: normal; + word-break: keep-all; +} + +table th { + font-weight: bold; +} + +table th, +table td { + padding: 0.5rem 1rem; + border: 1px solid var(--fg05); +} + +td, +th { + padding: 0; +} + +/* Make tables vertically aligned to the top */ +tbody td { + vertical-align: top; +} + +/* Media */ +img { + display: block; + margin: 2rem auto; + max-width: 100%; +} + +img.full { + width: 100%; +} + +img.pixels { + image-rendering: crisp-edges; /* older firefox browsers */ + image-rendering: pixelated; +} + +video { + display: block; + margin: 2rem auto; + max-width: 100%; +} + +.media { + border-radius: var(--border-radius-small); + box-shadow: var(--shadow); +} + +.media.hover { + transition: var(--transition-longer); +} + +.media.hover:hover { + transform: scale(125%); + border-radius: unset; + box-shadow: var(--shadow-raised); +} + +@media only screen and (max-device-width: 480px) { + /*mobile*/ + .media.hover:hover { + transform: scale(110%); + } +} + +/* Navbar */ +.nav-container { + display: block; + width: 80%; + margin-left: auto; + margin-right: auto; + max-width: var(--content-width); +} + +.nav { + position: sticky; + top: 0; + z-index: 1; + background-color: var(--nav-bg); + backdrop-filter: blur(24px) saturate(180%); + -webkit-backdrop-filter: blur(24px) saturate(180%); + border-bottom: 1px solid var(--fg07); + box-shadow: var(--shadow); + overflow: auto; +} + +.nav-container { + margin: 0.5rem auto; + position: relative; + text-align: center; +} + +.nav-title { + color: var(--fg50); + display: inline-block; + margin: 0; +} + +.nav-title:hover { + text-decoration: underline; +} + +.nav ul { + list-style-type: none; + margin: 1rem 0 0; + padding: 0; + text-align: center; +} + +.nav li { + color: var(--fg50); + display: inline-block; +} + +.nav a { + display: inline-block; + font-weight: 900; + font-size: 90%; + padding: 0.4rem 1rem; + border-radius: var(--border-radius); + background-color: transparent; + color: var(--fg50); + /* transition: var(--transition); */ +} + +.nav a:hover { + background-color: var(--fg05); + /* box-shadow: var(--glow); */ +} + +.nav svg { + fill: var(--fg50); + height: 1rem; + width: 1rem; + vertical-align: middle; + transform: translateY(-0.125rem); +} + +@media (min-width: 640px) { + .nav-container { + text-align: left; + } + + .nav ul { + bottom: 0; + position: absolute; + right: 0; + } +} + +/* Footer */ +.site-footer { + text-align: center; + padding: 3rem 0 3rem; + font-size: 1rem; + margin-top: 4rem; +} + +/* Link arrows */ +.page-link::after { + content: " →"; +} + +.site-link::after { + content: " ↗"; +} + +/* Buttons */ +.dialog-buttons { + display: flex; + flex-direction: row; + align-items: baseline; + justify-content: space-between; + margin-top: 6rem; +} + +.inline-button { + display: inline-block; + font-weight: 900; + font-size: 90%; + padding: 0.4rem 1rem; + border-radius: var(--border-radius); + background-color: var(--fg05); + color: var(--text); +} + +/* ASCII */ +.ascii { + line-height: normal; + margin: 3rem 0 1rem; + padding: 2px 1rem; + max-width: 80vw; + overflow-x: auto; + transition: var(--transition-long); + + background: linear-gradient(to top, var(--text) 0%, transparent 100%); + background-clip: text; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; +} + +.ascii:hover { + -webkit-text-fill-color: var(--text); + -moz-text-fill-color: var(--text); + text-shadow: var(--glow); +} + +@media only screen and (max-device-width: 480px) { + /*mobile*/ + .ascii { + max-width: 90vw; + } +} + +@media only screen and (max-device-width: 640px) { + /*mobile*/ + .ascii { + display: none; + } +} + +@media (prefers-color-scheme: dark) { + .highlight { + filter: contrast(0.4) saturate(2); + } +} + +/* Code Blocks */ +.highlighter-rouge { + line-height: normal; + margin: 1rem 0 1rem; + padding: 2px 1rem; + border-radius: var(--border-radius-small); + background-color: var(--bg2); + max-width: 80vw; + overflow-x: auto; + box-shadow: var(--shadow); +} + +@media only screen and (max-device-width: 480px) { + /*mobile*/ + .highlighter-rouge { + max-width: 90vw; + } +} + +.highlighter-rouge * { + background-color: transparent; +} + +/* Inline Code */ +code.highlighter-rouge { + padding: 2px 6px; + background-color: var(--fg07); + color: var(--red-fg); + box-shadow: none; +} + +/* Statements */ +.statement-container { + margin: 1rem 0 1rem; + line-height: normal; +} + +.statement-container h2 { + margin: inherit; +} + +.archive { + background-color: var(--purple-bg); + color: var(--purple-fg); +} + +.disclaimer { + background-color: var(--red-bg); + color: var(--red-fg); +} + +.trigger { + background-color: var(--yellow-bg); + color: var(--yellow-fg); +} diff --git a/_sass/rouge-github.scss b/_sass/rouge-github.scss new file mode 100644 index 0000000..1a6dd03 --- /dev/null +++ b/_sass/rouge-github.scss @@ -0,0 +1,217 @@ +.highlight table td { + padding: 5px; +} +.highlight table pre { + margin: 0; +} +.highlight .cm { + color: #999988; + font-style: italic; +} +.highlight .cp { + color: #999999; + font-weight: bold; +} +.highlight .c1 { + color: #999988; + font-style: italic; +} +.highlight .cs { + color: #999999; + font-weight: bold; + font-style: italic; +} +.highlight .c, +.highlight .cd { + color: #999988; + font-style: italic; +} +.highlight .err { + color: #a61717; + background-color: #e3d2d2; +} +.highlight .gd { + color: #000000; + background-color: #ffdddd; +} +.highlight .ge { + color: #000000; + font-style: italic; +} +.highlight .gr { + color: #aa0000; +} +.highlight .gh { + color: #999999; +} +.highlight .gi { + color: #000000; + background-color: #ddffdd; +} +.highlight .go { + color: #888888; +} +.highlight .gp { + color: #555555; +} +.highlight .gs { + font-weight: bold; +} +.highlight .gu { + color: #aaaaaa; +} +.highlight .gt { + color: #aa0000; +} +.highlight .kc { + color: #000000; + font-weight: bold; +} +.highlight .kd { + color: #000000; + font-weight: bold; +} +.highlight .kn { + color: #000000; + font-weight: bold; +} +.highlight .kp { + color: #000000; + font-weight: bold; +} +.highlight .kr { + color: #000000; + font-weight: bold; +} +.highlight .kt { + color: #445588; + font-weight: bold; +} +.highlight .k, +.highlight .kv { + color: #000000; + font-weight: bold; +} +.highlight .mf { + color: #009999; +} +.highlight .mh { + color: #009999; +} +.highlight .il { + color: #009999; +} +.highlight .mi { + color: #009999; +} +.highlight .mo { + color: #009999; +} +.highlight .m, +.highlight .mb, +.highlight .mx { + color: #009999; +} +.highlight .sb { + color: #d14; +} +.highlight .sc { + color: #d14; +} +.highlight .sd { + color: #d14; +} +.highlight .s2 { + color: #d14; +} +.highlight .se { + color: #d14; +} +.highlight .sh { + color: #d14; +} +.highlight .si { + color: #d14; +} +.highlight .sx { + color: #d14; +} +.highlight .sr { + color: #009926; +} +.highlight .s1 { + color: #d14; +} +.highlight .ss { + color: #990073; +} +.highlight .s { + color: #d14; +} +.highlight .na { + color: #008080; +} +.highlight .bp { + color: #999999; +} +.highlight .nb { + color: #0086b3; +} +.highlight .nc { + color: #445588; + font-weight: bold; +} +.highlight .no { + color: #008080; +} +.highlight .nd { + color: #3c5d5d; + font-weight: bold; +} +.highlight .ni { + color: #800080; +} +.highlight .ne { + color: #990000; + font-weight: bold; +} +.highlight .nf { + color: #990000; + font-weight: bold; +} +.highlight .nl { + color: #990000; + font-weight: bold; +} +.highlight .nn { + color: #555555; +} +.highlight .nt { + color: #000080; +} +.highlight .vc { + color: #008080; +} +.highlight .vg { + color: #008080; +} +.highlight .vi { + color: #008080; +} +.highlight .nv { + color: #008080; +} +.highlight .ow { + color: #000000; + font-weight: bold; +} +.highlight .o { + color: #000000; + font-weight: bold; +} +.highlight .w { + color: #bbbbbb; +} +.highlight { + background-color: transparent; +} diff --git a/_sass/variables.scss b/_sass/variables.scss new file mode 100644 index 0000000..5981869 --- /dev/null +++ b/_sass/variables.scss @@ -0,0 +1,124 @@ +:root { + /* GNOME Color Palette */ + --blue1: rgb(153, 193, 241); + --blue2: rgb(98, 160, 234); + --blue3: rgb(53, 132, 228); + --blue4: rgb(28, 113, 216); + --blue5: rgb(26, 95, 180); + --green1: rgb(143, 240, 164); + --green2: rgb(87, 227, 137); + --green3: rgb(51, 209, 122); + --green4: rgb(46, 194, 126); + --green5: rgb(38, 162, 105); + --yellow1: rgb(249, 240, 107); + --yellow2: rgb(248, 228, 92); + --yellow3: rgb(246, 211, 45); + --yellow4: rgb(245, 194, 17); + --yellow5: rgb(229, 165, 10); + --orange1: rgb(255, 190, 111); + --orange2: rgb(255, 163, 72); + --orange3: rgb(255, 120, 0); + --orange4: rgb(230, 97, 0); + --orange5: rgb(198, 70, 0); + --red1: rgb(246, 97, 81); + --red2: rgb(237, 51, 59); + --red3: rgb(224, 27, 36); + --red4: rgb(192, 28, 40); + --red5: rgb(165, 29, 45); + --purple1: rgb(220, 138, 221); + --purple2: rgb(192, 97, 203); + --purple3: rgb(145, 65, 172); + --purple4: rgb(129, 61, 156); + --purple5: rgb(97, 53, 131); + --brown1: rgb(205, 171, 143); + --brown2: rgb(181, 131, 90); + --brown3: rgb(152, 106, 68); + --brown4: rgb(134, 94, 60); + --brown5: rgb(99, 69, 44); + --light1: rgb(255, 255, 255); + --light2: rgb(246, 245, 244); + --light3: rgb(222, 221, 218); + --light4: rgb(192, 191, 188); + --light5: rgb(154, 153, 150); + --dark1: rgb(119, 118, 123); + --dark2: rgb(94, 92, 100); + --dark3: rgb(61, 56, 70); + --dark4: rgb(36, 31, 49); + --dark5: rgb(0, 0, 0); + + /* General Setup */ + --border: var(--light3); + --border-radius: 0.75rem; + --border-radius-small: 0.5rem; + --accent-color: var(--orange2); + --secondary-accent-color: var(--purple4); + --text: var(--dark4); + --background: var(--bg1); + --content-width: 720px; + + /* Custom Color Palette */ + --bg1: rgb(250, 250, 250); + --bg2: rgb(255, 255, 255); + --bg3: rgb(75, 75, 75); + + --fg01: rgba(0, 0, 0, 0.01); + --fg03: rgba(0, 0, 0, 0.03); + --fg05: rgba(0, 0, 0, 0.05); + --fg07: rgba(0, 0, 0, 0.07); + --fg09: rgba(0, 0, 0, 0.09); + --fg40: rgba(0, 0, 0, 0.4); + --fg50: rgba(0, 0, 0, 0.5); + + --nav-bg: rgba(255, 255, 255, 0.5); + + --purple-bg: rgba(145, 65, 172, 0.1); + --purple-fg: rgb(145, 65, 172); + --red-bg: rgba(224, 27, 36, 0.1); + --red-fg: rgb(224, 27, 36); + --yellow-bg: rgba(156, 110, 3, 0.1); + --yellow-fg: rgb(156, 110, 3); + --orange-bg: rgba(255, 120, 0, 0.1); + --orange-fg: rgb(255, 120, 0); + + /* Custom Variables */ + --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), + 0 2px 6px 2px rgba(0, 0, 0, 0.03); + --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.03), + 0 2px 6px 2px rgba(0, 0, 0, 0.09), 0 4px 12px 4px rgba(0, 0, 0, 0.06); + --glow: var(--accent-color) -6px 0 12px, + var(--secondary-accent-color) 6px 0 12px; + + --transition: 200ms; + --transition-longer: 400ms; + --transition-long: 800ms; +} + +@media (prefers-color-scheme: dark) { + :root { + --text: var(--light2); + --background: var(--bg3); + + --fg01: rgba(255, 255, 255, 0.01); + --fg03: rgba(255, 255, 255, 0.03); + --fg05: rgba(255, 255, 255, 0.05); + --fg07: rgba(255, 255, 255, 0.07); + --fg09: rgba(255, 255, 255, 0.09); + --fg40: rgba(255, 255, 255, 0.4); + --fg50: rgba(255, 255, 255, 0.5); + + --bg1: rgb(36, 36, 36); + --bg2: rgb(30, 30, 30); + --bg3: rgb(11, 11, 11); + + --nav-bg: rgba(0, 0, 0, 0.5); + + --purple-bg: rgba(220, 138, 221, 0.1); + --purple-fg: rgb(220, 138, 221); + --red-bg: rgba(226, 97, 81, 0.1); + --red-fg: rgb(246, 97, 81); + --yellow-bg: rgba(248, 228, 92, 0.1); + --yellow-fg: rgb(248, 228, 92); + --orange-bg: rgba(255, 190, 111, 0.1); + --orange-fg: rgb(255, 190, 111); + } +} diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..5932cfd Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/apple-touch-icon.svg b/apple-touch-icon.svg new file mode 100644 index 0000000..19ee356 --- /dev/null +++ b/apple-touch-icon.svg @@ -0,0 +1,116 @@ + + + + diff --git a/assets/404.png b/assets/404.png new file mode 100644 index 0000000..3f59a49 Binary files /dev/null and b/assets/404.png differ diff --git a/assets/card.png b/assets/card.png new file mode 100644 index 0000000..77fbc00 Binary files /dev/null and b/assets/card.png differ diff --git a/assets/card.svg b/assets/card.svg new file mode 100644 index 0000000..c1b9d96 --- /dev/null +++ b/assets/card.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + Duckquill + Duckquill + diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..8a95e24 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,19 @@ +--- +--- + +/* + + Duckquill + ==================== + + based on OS Component Website which shamelessly stolen CSS from systemd + https://github.com/jimmac/os-component-website + https://github.com/systemd/systemd/tree/main/docs + +*/ + +@import "variables"; +@import "fonts"; +@import "main"; +@import "rouge-github"; +@import "comments"; diff --git a/assets/fonts/Inter.var.woff2 b/assets/fonts/Inter.var.woff2 new file mode 100644 index 0000000..317f314 Binary files /dev/null and b/assets/fonts/Inter.var.woff2 differ diff --git a/assets/posts/2023-08-31/The_Office.webp b/assets/posts/2023-08-31/The_Office.webp new file mode 100644 index 0000000..4b4ff1d Binary files /dev/null and b/assets/posts/2023-08-31/The_Office.webp differ diff --git a/assets/posts/2023-08-31/quill.png b/assets/posts/2023-08-31/quill.png new file mode 100644 index 0000000..fcff923 Binary files /dev/null and b/assets/posts/2023-08-31/quill.png differ diff --git a/comments.md b/comments.md new file mode 100644 index 0000000..4c23ef9 --- /dev/null +++ b/comments.md @@ -0,0 +1,7 @@ +--- +layout: post +title: "ActivityPub/​Fediverse comments demo" +toc: false +comments: + id: 110896168682002971 +--- \ No newline at end of file diff --git a/demo-page.md b/demo-page.md new file mode 100644 index 0000000..64a9f10 --- /dev/null +++ b/demo-page.md @@ -0,0 +1,12 @@ +--- +layout: default +title: "Cake Party!" +--- + +# Welcome to the cake party! + +![](https://i.imgur.com/ZS4LFj8.png){: width="50%"}{:loading="lazy"} + +Sadly, the cake is a _lie_ + +[Go Crying](../demo){: .inline-button} diff --git a/demo.md b/demo.md new file mode 100644 index 0000000..8b6c750 --- /dev/null +++ b/demo.md @@ -0,0 +1,180 @@ +--- +layout: post +title: "Demo page" +toc: false +archive: "This page is, in fact, not archived, meaning it will receive content updates." +trigger: "This page contains blackjack and hookers, and bad jokes such as this one." +disclaimer: " +- All tricks in this page are performed by lab boys, don't try this at home. + +- Don't expose yourself to 4000° kelvin. + +- Don't take party escort submission position. + +- Don't interact with asbestos and moon rocks." +--- + +Text can be **bold**, _italic_, or ~~strikethrough~~, it can also be _**thick**_. + +[Link to another page](../demo-page){:.page-link} + +There should be whitespace between paragraphs. + +There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project. + +# Header 1 + +This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. + +## Header 2 + +> This is a blockquote following a header. +> +> When something is important enough, you do it even if the odds are not in your favor. + +### Header 3 + +```js +// Javascript code with syntax highlighting. +var fun = function lang(l) { + dateformat.i18n = require("./lang/" + l); + return true; +}; +``` + +```ruby +# Ruby code with syntax highlighting +GitHubPages::Dependencies.gems.each do |gem, version| + s.add_dependency(gem, "= #{version}") +end +``` + +#### Header 4 + +- This is an unordered list following a header. +- This is an unordered list following a header. +- This is an unordered list following a header. + +##### Header 5 + +1. This is an ordered list following a header. +2. This is an ordered list following a header. +3. This is an ordered list following a header. + +###### Header 6 + +| head1 | head two | three | +| :----------- | :---------------- | :---- | +| ok | good swedish fish | nice | +| out of stock | good and plenty | nice | +| ok | good `oreos` | hmm | +| ok | good `zoute` drop | yumm | + +### There's a horizontal rule below this. + +--- + +### Here is an unordered list: + +- Item foo +- Item bar +- Item baz +- Item zip + +### And an ordered list: + +1. Item one +1. Item two +1. Item three +1. Item four + +### And a nested list: + +- level 1 item + - level 2 item + - level 2 item + - level 3 item + - level 3 item +- level 1 item + - level 2 item + - level 2 item + - level 2 item +- level 1 item + - level 2 item + - level 2 item +- level 1 item + +### Small image + +![Codeberg icon](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png){:loading="lazy"} + +### Large image + +![Codeberg horizontal](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png){:loading="lazy"} + +### Definition lists can be used with HTML syntax. + +
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
+ +``` +Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. +``` + +``` +The final element. +``` + +### Extra + +Display pixel-art in full width without filtering. + +``` +![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels}{:loading="lazy"} +``` + +![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels}{:loading="lazy"} + +[Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link} + +--- + +Keyboard shortcuts. + +``` +⌘ Super + Space +``` + +⌘ Super + Space + +--- + +Link with arrow. + +``` +[Link to page](markdown-page.md){:.page-link} + +[Link to site](https://example.org){:.site-link} +``` + +[Link to page](../markdown-page){:.page-link} + +[Link to site](https://example.org){:.site-link} + +--- + +Buttons. + +``` +[Go to top](#top){: .inline-button} +[File an issue]({{site.issuesurl}}) +{: .dialog-buttons} +``` diff --git a/favicon.aseprite b/favicon.aseprite new file mode 100644 index 0000000..e1127fc Binary files /dev/null and b/favicon.aseprite differ diff --git a/favicon.png b/favicon.png new file mode 100644 index 0000000..08d8a66 Binary files /dev/null and b/favicon.png differ diff --git a/index.md b/index.md new file mode 100644 index 0000000..173e1fd --- /dev/null +++ b/index.md @@ -0,0 +1,49 @@ +--- +layout: default +--- + +
+      _          _          _          _          _
+    >(')____,  >(')____,  >(')____,  >(')____,  >(') ___,
+      (` =~~/    (` =~~/    (` =~~/    (` =~~/    (` =~~/
+jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
+
+ +# Duckquill + +[Duckquill](https://codeberg.org/daudix-UFO/duckquill) is a modern, pretty, and clean [Jekyll](https://jekyllrb.com) template that has the purpose of greatly simplifying the process of rolling up your blog. It aims to let you write simple markdown pages and deploy them to Codeberg or GitLab Pages. + +Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes! + +- Proper favicon for modern browsers and Apple device icons. +- Mastodon, Facebook and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/app/com.rafaelmardojai.SharePreview) to test. +- Local copy of the amazing [Inter font](https://rsms.me/inter/). No slowdowns pulling from external hosting. +- Mobile friendly, dark variant included. + +Make yourself a cup of your favorite drink and let's start! + +## Preparation + +This template needs a CI to be built and deployed, I recommend using either Codeberg or GitLab Pages. For Codeberg Pages I've written a [blog post](https://daudix-ufo.codeberg.page/blog/migration-from-github-to-codeberg/#github-pages--codeberg-pages) on step-by-step guide how to get the CI working. + +There is an included `.woodpecker.yml` and `.gitlab-ci.yml` that should be easy to adjust to your situation. For additional info see [Codeberg Pages](https://docs.codeberg.org/codeberg-pages/) and [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) docs. + +## Getting started + +This template includes some useful utilities to make your life easier and keep you sane (looking at you, ruby stuff). + +The process of setting up the site locally consists of: + +- [Install Podman](https://podman.io/docs/installation). On [Fedora Silverblue](https://fedoraproject.org/silverblue) it's already installed + +- Run `local.sh build` to create a Podman container that uses official Jekyll image, download and install all needed Gems and build the site locally. + +- Edit the [Jekyll](https://jekyllrb.com) config file -- `_config.yml`. + +- Replace all mentions and links of `Daudix` and `Duckquill` with yours. + +- Replace or edit all the graphics. Using [Inkscape](https://inkscape.org) are recommended. If you want to reduce the SVGs size, use [svgo](https://github.com/svg/svgo). + +- Test the site locally. Run `local.sh serve`. + +- `git commit` your changes and push to your remote repo for automatic deployment. diff --git a/local.sh b/local.sh new file mode 100755 index 0000000..db77e21 --- /dev/null +++ b/local.sh @@ -0,0 +1,57 @@ +#!/usr/bin/env bash + +# Script for building and serving Jekyll site locally + +check_command() { + if ! command -v "$1" &>/dev/null; then + echo -e "\033[1;31m$1 is not installed, install $1 to continue\033[0m" + exit 1 + fi +} + +check_command "podman" + +set -e + +case $1 in + 'build') + +cat << "EOF" + __ __ __ __ __ +| |--.--.--.|__| |.--| |__|.-----.-----. +| _ | | || | || _ | || | _ |__ __ __ +|_____|_____||__|__||_____|__||__|__|___ |__|__|__| + |_____| + +EOF + + echo -e "\e[1;32mBuilding Podman image\e[0m" + podman build --tag pages . + + echo -e "\e[1;32mBuilding Jekyll site\e[0m" + podman run \ + -it --rm --volume="$PWD:/srv/jekyll:Z" \ + -w /srv/jekyll -p 4000:4000 pages \ + bundle exec jekyll build + ;; + 'serve') + +cat << "EOF" + __ +.-----.-----.----.--.--.|__|.-----.-----. +|__ --| -__| _| | || || | _ |__ __ __ +|_____|_____|__| \___/ |__||__|__|___ |__|__|__| + |_____| + +EOF + + echo -e "\e[1;32mBuilding Podman image\e[0m" + podman build --tag pages . + + echo -e "\e[1;32mBuilding Jekyll site\e[0m" + podman run \ + -it --rm --volume="$PWD:/srv/jekyll:Z" \ + -w /srv/jekyll -p 4000:4000 pages \ + bundle exec jekyll serve --incremental --livereload --host 0.0.0.0 + ;; +esac diff --git a/posts.md b/posts.md new file mode 100644 index 0000000..c887724 --- /dev/null +++ b/posts.md @@ -0,0 +1,18 @@ +--- +layout: posts +title: Posts +description: Index of all posts published to date. +--- + +
+
+  __
+ (`/\
+ `=\/\ __...--~~~~~-._   _.-~~~~~--...__
+  `=\/\               \ /               \\
+   `=\/                V                 \\
+   //_\___--~~~~~~-._  |  _.-~~~~~~--...__\\
+  //  ) (..----~~~~._\ | /_.~~~~----.....__\\
+ ===( INK )==========\\|//====================
+__ejm\___/________dwb`---`_____________________
+
diff --git a/rename.sh b/rename.sh new file mode 100755 index 0000000..3af0690 --- /dev/null +++ b/rename.sh @@ -0,0 +1,52 @@ +#!/usr/bin/env bash + +# Made by ChatGPT and countless tweak requests +# Script for renaming files to be web-friendly (kebab-case without special characters) + +# Function to rename files +rename_files() { + local dir="$1" + cd "$dir" || exit 1 + + for file in *; do + if [ -f "$file" ]; then + # Get the file extension (if any) + ext="" + if [[ $file == *.* ]]; then + ext=".${file##*.}" + new_name="${file%$ext}" + else + new_name="$file" + fi + + # Normalize non-ASCII characters to their closest ASCII representation and remove consecutive dashes + new_name=$(echo "$new_name" | sed 's/[^[:alnum:]\.]/-/g; s/[[:space:]_]\+/-/g; s/-\+/-/g') + + # Remove leading and trailing dashes + new_name="${new_name#-}" + new_name="${new_name%-}" + + # Convert the filename to lowercase + new_name="${new_name,,}" + + # Add back the file extension (if any) + new_name="$new_name$ext" + + # Check if the new name is different from the old one + if [ "$file" != "$new_name" ]; then + mv -i "$file" "$new_name" + echo "Renamed: $file -> $new_name" + fi + fi + done +} + +# Check if a directory argument is provided, otherwise use the current directory +if [ $# -eq 1 ]; then + target_directory="$1" +else + target_directory="." +fi + +# Call the function with the specified directory +rename_files "$target_directory" diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..19bd937 --- /dev/null +++ b/robots.txt @@ -0,0 +1,62 @@ +# Based on https://seirdy.one/robots.txt + +# The next three are borrowed from https://www.videolan.org/robots.txt + +# "This robot collects content from the Internet for the sole purpose of +# helping educational institutions prevent plagiarism. [...] we compare +# student papers against the content we find on the Internet to see if we +# can find similarities." (http://www.turnitin.com/robot/crawlerinfo.html) +# --> fuck off. +User-Agent: TurnitinBot +Disallow: / + +# "NameProtect engages in crawling activity in search of a wide range of +# brand and other intellectual property violations that may be of interest +# to our clients." (http://www.nameprotect.com/botinfo.html) +# --> fuck off. +User-Agent: NPBot +Disallow: / + +# "iThenticate® is a new service we have developed to combat the piracy +# of intellectual property and ensure the originality of written work for +# publishers, non-profit agencies, corporations, and newspapers." +# (http://www.slysearch.com/) +# --> fuck off. +User-Agent: SlySearch +Disallow: / + +# BLEXBot assists internet marketers to get information on the link structure +# of sites and their interlinking on the web, to avoid any technical and +# possible legal issues and improve overall online experience. +# (http://webmeup-crawler.com/) +# --> fuck off. +User-Agent: BLEXBot +Disallow: / + +# Providing Intellectual Property professionals with superior brand protection +# services by artfully merging the latest technology with expert analysis. +# (https://www.checkmarknetwork.com/spider.html/) +# "The Internet is just way to big to effectively police alone." (ACTUAL quote) +# --> fuck off. +User-agent: CheckMarkNetwork/1.0 (+https://www.checkmarknetwork.com/spider.html) +Disallow: / + +# Stop trademark violations and affiliate non-compliance in paid search. +# Automatically monitor your partner and affiliates’ online marketing to +# protect yourself from harmful brand violations and regulatory risks. +# We regularly crawl websites on behalf of our clients to ensure content +# compliance with brand and regulatory guidelines. +# (https://www.brandverity.com/why-is-brandverity-visiting-me) +# --> fuck off. +User-agent: BrandVerity/1.0 +Disallow: / + +# Eat shit, OpenAI. +User-agent: ChatGPT-User +Disallow: / +User-agent: GPTBot +Disallow: / +User-agent: CCBot +Disallow: / + +Sitemap: https://daudix-ufo.codeberg.page/duckquill/sitemap.xml diff --git a/tags.md b/tags.md new file mode 100644 index 0000000..d59bf3c --- /dev/null +++ b/tags.md @@ -0,0 +1,20 @@ +--- +layout: tags +title: Tags +description: Index of all tags, of all posts. +--- + +
+        _
+       | ]
+     .-|=====-.
+     | | TAGS |   
+     |________|___
+          ||
+          ||
+          ||   www                %%%
+   vwv    ||   )_(,;;;,        ,;,\_/ www
+   )_(    ||   \|/ \_/         )_(\|  (_)
+   \|   \ || /\\|/  |/         \| \|// | 
+___\|//jgs||//_\V/_\|//_______\\|//V/\\|/__
+