polynom.me/blog.polynom.me
Archived
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

feat: Make my blog much prettier

Browse Source
This commit is contained in:
PapaTutuWawa 2023-07-16 22:51:58 +02:00
parent 98cfbaf97c
commit ba567e0d65
13 changed files with 146 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
assets/css/blog.css
View File

@ -1,103 +0,0 @@
* {
box-sizing: border-box;
}
/* Looks bad. And it is! Workaround for having no control over
* how the markdown python module renders the post.
*/
.post > article > p > img {
/* Prevent images in blog posts from getting too big */
max-width: 800px;
}
.profile-picture {
max-width: 200px;
}
h1, h2, h3, h4 {
color: #9b59b6;
}
.post-list {
padding: 10px;
}
.post-list-item {
display: block;
max-width: 800px;
}
.post-list-item-title {
color: #3498db;
}
.post {
display: block;
width: 100%;
padding: 10px;
font-size: 21px;
}
.text {
font-size: 21px;
}
.text-content {
max-width: 1000px;
}
.stretch-horizontally {
width: 100%;
}
@media only screen and (max-width: 768px) {
.page-title {
/* The page header title otherwise overflows the page on small screens */
font-size: 8vw;
}
.text-content {
/* Otherwise the page content overflows the page */
max-width: 100%;
}
.text {
/* A smaller font looks better on smaller devices */
font-size: 19px;
}
.post {
/* A smaller font looks better on smaller devices */
font-size: 19px;
/* Otherwise the entire page overflows for some reason */
width: 100%;
}
p > img {
/* This should match all images used inside blog posts */
width: 100%;
}
}
code {
display: inline-block;
padding: 0 3px;
border-radius: 3px;
background-color: black;
line-height: 1.5;
}
pre > code {
background-color: black;
line-height: 1.5;
border-radius: 3px;
padding: 10px;
width: 100%;
overflow-x: auto;
}

45
assets/css/syntax.css → assets/css/code.css
View File

@ -1,26 +1,25 @@
/* Generated by python pygmentize, modified by me*/
pre { line-height: 125%; } pre { line-height: 125%; }
td.linenos pre { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; } td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; } span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos pre.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc } .codehilite .hll { background-color: #ffffcc }
.codehilite .c { color: #408080; font-style: italic } /* Comment */ .codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */ .codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */ .codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666666 } /* Operator */ .codehilite .o { color: #666666 } /* Operator */
.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */ .codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */ .codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */ .codehilite .cp { color: #9C6500 } /* Comment.Preproc */
.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */ .codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */ .codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */ .codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */ .codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */ .codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #FF0000 } /* Generic.Error */ .codehilite .gr { color: #E40000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */ .codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #00A000 } /* Generic.Inserted */ .codehilite .gi { color: #008400 } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */ .codehilite .go { color: #717171 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ .codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */ .codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ .codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
@ -33,18 +32,18 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left:
.codehilite .kt { color: #B00040 } /* Keyword.Type */ .codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666666 } /* Literal.Number */ .codehilite .m { color: #666666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */ .codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #7D9029 } /* Name.Attribute */ .codehilite .na { color: #687822 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */ .codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */ .codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.codehilite .no { color: #880000 } /* Name.Constant */ .codehilite .no { color: #880000 } /* Name.Constant */
.codehilite .nd { color: #AA22FF } /* Name.Decorator */ .codehilite .nd { color: #AA22FF } /* Name.Decorator */
.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */ .codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ .codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #0000FF } /* Name.Function */ .codehilite .nf { color: #0000FF } /* Name.Function */
.codehilite .nl { color: #A0A000 } /* Name.Label */ .codehilite .nl { color: #767600 } /* Name.Label */
.codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ .codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */ .codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #7473CE } /* Name.Variable */ .codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ .codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */ .codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mb { color: #666666 } /* Literal.Number.Bin */ .codehilite .mb { color: #666666 } /* Literal.Number.Bin */
@ -58,11 +57,11 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left:
.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */ .codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ .codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */ .codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ .codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */ .codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ .codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */ .codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */ .codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */ .codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */ .codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */ .codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
@ -71,4 +70,4 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left:
.codehilite .vg { color: #19177C } /* Name.Variable.Global */ .codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */ .codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .vm { color: #19177C } /* Name.Variable.Magic */ .codehilite .vm { color: #19177C } /* Name.Variable.Magic */
.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */ .codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */

41
content/about.html
View File

@ -1,41 +0,0 @@
<!-- title: About "PapaTutuWawa" -->
<!-- description: -->
<!-- render: yes -->
<div class="vertical text">
<div class="horizontal-center">
<div class="text-content">
<h3>About "PapaTutuWawa"</h3>
<p>
<img
class="profile-picture"
src="assets/img/profile.jpg"
alt="Profile Picture" />
</p>
<div class="quote">
<p>
Student, Anime expert, Vocaloid listener, Docker and Linux fan
and hobby SysAdmin.
</p>
</div>
<ul>
<li><a href="https://{{ git_url }}/">Code</a></li>
<li><a href="https://{{ blog_url }}/">Blog</a></li>
<li><a href="https://{{ mastodon_url }}/">Mastodon</a></li>
</ul>
<h3>Contact</h3>
<ul>
<li>EMail: <i>{{ email_user }} ["a" with a weird circle] {{ email_domain }}</i> (<a href="https://{{ email_gpg_url}}">GPG</a>)</li>
</ul>
<h3>About This Page</h3>
<ul>
<li><a href="https://{{ git_url }}/PapaTutuWawa/blog.polynom.me">Source</a></li>
<li>Last updated <i>{{ build_time }}</i></li>
</ul>
</div>
</div>
</div>

8
flake.lock
View File

@ -36,16 +36,16 @@
}, },
"nixpkgs_2": { "nixpkgs_2": {
"locked": { "locked": {
"lastModified": 1638239011, "lastModified": 1689449371,
"narHash": "sha256-AjhmbT4UBlJWqxY0ea8a6GU2C2HdKUREkG43oRr3TZg=", "narHash": "sha256-sK3Oi8uEFrFPL83wKPV6w0+96NrmwqIpw9YFffMifVg=",
"owner": "NixOS", "owner": "NixOS",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "a7ecde854aee5c4c7cd6177f54a99d2c1ff28a31", "rev": "29bcead8405cfe4c00085843eb372cc43837bb9d",
"type": "github" "type": "github"
}, },
"original": { "original": {
"owner": "NixOS", "owner": "NixOS",
"ref": "21.11", "ref": "nixpkgs-unstable",
"repo": "nixpkgs", "repo": "nixpkgs",
"type": "github" "type": "github"
} }

10
flake.nix
View File

@ -2,7 +2,7 @@
description = "The blog hosted at https://blog.polynom.me"; description = "The blog hosted at https://blog.polynom.me";
inputs = { inputs = {
nixpkgs.url = "github:NixOS/nixpkgs/21.11"; nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
assets.url = "git+https://git.polynom.me/polynom.me/shared-assets.git"; assets.url = "git+https://git.polynom.me/polynom.me/shared-assets.git";
}; };
@ -16,9 +16,17 @@
in { in {
packages = forAllSystems (system: let packages = forAllSystems (system: let
pkgs = import nixpkgs { inherit system; }; pkgs = import nixpkgs { inherit system; };
tailwindWithTypography = pkgs.nodePackages.tailwindcss.overrideAttrs (old: {
plugins = [
pkgs.nodePackages."@tailwindcss/typography"
];
});
in { in {
default = pkgs.callPackage ./pkgs/blog.nix { default = pkgs.callPackage ./pkgs/blog.nix {
shared-assets = assets.packages.${system}.default; shared-assets = assets.packages.${system}.default;
inherit tailwindWithTypography;
}; };
}); });

20
input.css Normal file
View File

@ -0,0 +1,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
background-color: #212121;
}
@layer base {
article > p > a, h1, h2, h3, h4, h5, h6 {
@apply text-indigo-400 !important;
}
article > p > strong, code {
@apply text-white !important;
}
article > h1, h2, h3, h4, h5, h6 {
@apply text-indigo-400 !important;
}
}

21
layout/item.html
View File

@ -1,11 +1,14 @@
<div class="horizontal-center"> <!-- Post item -->
<div class="post-list-item"> <div class="w-4/5 py-4">
<h2><a class="post-list-item-title" href="/{{ slug }}.html">{{ title }}</a></h2> <a href="/{{ slug }}.html">
<h1 class="prose prose-h1 text-2xl text-indigo-400">{{ title }}</h1>
</a>
<p><b>&gt; {{ date }}</b></p> <p class="prose prose-xs text-white">
Posted on {{ date }}
</p>
<div class="quote text"> <p class="prose text-white py-2">
<p class="post-summary">{{ summary }}...</p> {{ summary }}...
</div> </p>
</div> </div>
</div>

9
layout/list.html
View File

@ -1,5 +1,4 @@
<div class="post-list"> <!-- Posts wrapper -->
<div class="vertical"> <div class="flex flex-col items-center">
{{ content }} {{ content }}
</div> </div>
</div>

88
layout/page.html
View File

@ -1,61 +1,49 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html>
<head>
<title>{{ title }}</title>
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}" />
<meta charset="UTF-8" /> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> <title>{{ title }}</title>
<link rel="stylesheet" href="{{ page_assets }}/css/main.css" />
<link rel="stylesheet" href="/assets/css/blog.css" /> <meta property="og:title" content="{{ title }}" />
<link rel="stylesheet" href="/assets/css/syntax.css" /> <meta property="og:description" content="{{ description }}" />
{{ mathjax_include }}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/index.css" rel="stylesheet" />
<link href="/assets/css/code.css" rel="stylesheet" />
<!-- Optional MathJax -->
{{ mathjax_include }}
<!-- Blog --> <!-- Blog -->
<link rel="alternative" <link rel="alternative"
type="application/rss+xml" type="application/rss+xml"
title="PapaTutuWawa's Blog" title="PapaTutuWawa's Blog"
href="https://{{ blog_url }}/atom.xml" /> href="https://{{ blog_url }}/atom.xml" />
<!-- Mastodon --> </head>
<link rel="me" href="https://fosstodon.org/@polynomdivision" />
</head>
<body>
<div class="horizontal-center">
<div class="vertical header">
<div id="header" class="horizontal">
<img class="avatar" src="{{ page_assets }}/img/avatar.jpg" alt="" />
<div class="vertical-center"> <body class="min-h-screen h-full flex flex-col p-8 h-full">
<span class="name-title">PapaTutuWawa's Blog</span> <div class="flex flex-col items-center">
<!-- Allow the header to be independently sized from the content -->
<div>
<div class="flex flex-row">
<img class="w-32 md:w-36 lg:w-48 h-32 md:h-36 lg:h-48 rounded-lg" src="https://cdn.polynom.me/img/avatar.jpg" />
<div id="header-links"> <div class="flex flex-col justify-center px-8">
<ul> <h1 class="text-xl lg:text-4xl text-white">PapaTutuWawa's blog</h1>
<li><a href="index.html">Posts</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="https://polynom.me">About</a></li>
</ul>
</div>
</div>
</div>
<div class="horizontal-center"> <div class="flex flex-row justify-between">
{{ content }} <a class="text-indigo-400" href="/index.html">Posts</a>
</div> <a class="text-indigo-400" href="/atom.xml">RSS</a>
<a class="text-indigo-400" href="https://polynom.me">About</a>
</div>
</div>
</div>
</div>
<br /> {{ content }}
</div>
</body>
<div class="horizontal-center footer"> </html>
<span>
Created by <i>PapaTutuWawa</i> with &lt;3 using
<a href="https://github.com/google/roboto">Roboto</a>,
<a href="https://github.com/RedHatOfficial/Overpass">Overpass</a> and
<a href="https://github.com/sunainapai/makesite">makesite</a>a
</span>
</div>
</div>
</div>
</body>
</html>

36
layout/post.html
View File

@ -1,24 +1,18 @@
<div class="horizontal-center stretch-horizontally"> <!-- Post wrapper -->
<div class="post"> <div class="flex flex-col items-center pt-8">
<article> <h1 class="prose prose-h1 text-2xl text-indigo-400 self-start">{{ title }}</h1>
<h1>{{ title }}</h1>
<p>// Posted {{ date }}</p> <p class="prose prose-xs text-white self-start">Posted on {{ date }}</p>
<ul> <article class="text-white prose prose-lg pt-8">
<li><a href="https://{{ git_url }}/PapaTutuWawa/blog.polynom.me/src/branch/master/content/blog/{{ file_name }}">Post source</a></li> {{ content }}
<li><a href="https://{{ git_url }}/PapaTutuWawa/blog.polynom.me/raw/branch/master/content/blog/{{ file_name }}.sig">Signed</a> with <a href="https://{{ email_gpg_url }}">this publickey</a></li> </article>
</ul>
{{ mathjax_warning }}
{{ content }} <!-- Post ending -->
<span class="text-white prose prose-lg self-start pt-8">
<br /> If you have any questions or comments, then feel free to send me an email (Preferably with GPG encryption) to
{{ email_user }} [at] {{ email_domain }} or
If you have any questions or comments, then feel free to send me an email reach out to me on the Fediverse at <a class="text-indigo-400"
(Preferably with <a href="https://{{ email_gpg_url }}">GPG encryption</a>) to href="https://{{ fediverse_url }}">{{ fediverse_handle }}</a>.
{{ email_user }} [weird "a" with a circle] {{ email_domain }}. </span>
</article> </div>
</div>
</div>

3
params.json
View File

@ -4,7 +4,8 @@
"blog_description": "My personal blog. Mainly tech stuff.", "blog_description": "My personal blog. Mainly tech stuff.",
"git_url": "git.polynom.me", "git_url": "git.polynom.me",
"blog_url": "blog.polynom.me", "blog_url": "blog.polynom.me",
"mastodon_url": "fosstodon.org/@polynomdivision", "fediverse_url": "social.polynom.me/PapaTutuWawa",
"fediverse_handle": "@PapaTutuWawa@social.polynom.me",
"email_gpg_url": "pki.polynom.me/pubkeys/papatutuwawa.pub", "email_gpg_url": "pki.polynom.me/pubkeys/papatutuwawa.pub",
"email_user": "papatutuwawa", "email_user": "papatutuwawa",
"email_domain": "polynom.me", "email_domain": "polynom.me",

14
pkgs/blog.nix
View File

@ -1,9 +1,12 @@
{ {
lib, stdenv lib, stdenv
, gnumake, imagemagick , gnumake, imagemagick
, shared-assets , python3
}: , shared-assets # For makesite.py
stdenv.mkDerivation { , tailwindWithTypography
}: let
pythonEnv = python3.withPackages (ps: with ps; [markdown pygments]);
in stdenv.mkDerivation {
pname = "blog"; pname = "blog";
version = "20231507"; version = "20231507";
@ -12,12 +15,15 @@ stdenv.mkDerivation {
buildInputs = [ shared-assets gnumake imagemagick ]; buildInputs = [ shared-assets gnumake imagemagick ];
patchPhase = '' patchPhase = ''
sed -i Makefile -e "s|python ../shared-assets/makesite.py|python ${shared-assets}/bin/makesite.py|g" sed -i Makefile -e "s|python ../shared-assets/makesite.py|${pythonEnv}/bin/python ${shared-assets}/bin/makesite.py|g"
sed -i Makefile -e "s|tar -czf blog.tar.gz _site||g" sed -i Makefile -e "s|tar -czf blog.tar.gz _site||g"
''; '';
buildPhase = '' buildPhase = ''
make buildnosign make buildnosign
# Generate Tailwind CSS data
${tailwindWithTypography}/bin/tailwindcss --input ./input.css --output _site/assets/css/index.css
''; '';
installPhase = '' installPhase = ''

10
tailwind.config.js Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
content: [
"./layout/*.html",
],
theme: {
},
plugins: [
require('@tailwindcss/typography'),
],
}