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;
}

43
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%; }
td.linenos pre { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; }
td.linenos pre.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; 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; }
.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 .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666666 } /* Operator */
.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */
.codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #9C6500 } /* Comment.Preproc */
.codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.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 .gi { color: #00A000 } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gi { color: #008400 } /* Generic.Inserted */
.codehilite .go { color: #717171 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.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 .m { color: #666666 } /* Literal.Number */
.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 .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.codehilite .no { color: #880000 } /* Name.Constant */
.codehilite .nd { color: #AA22FF } /* Name.Decorator */
.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.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 .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 .w { color: #bbbbbb } /* Text.Whitespace */
.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 .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.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 .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 .sr { color: #BB6688 } /* Literal.String.Regex */
.codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */

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": {
"locked": {
"lastModified": 1638239011,
"narHash": "sha256-AjhmbT4UBlJWqxY0ea8a6GU2C2HdKUREkG43oRr3TZg=",
"lastModified": 1689449371,
"narHash": "sha256-sK3Oi8uEFrFPL83wKPV6w0+96NrmwqIpw9YFffMifVg=",
"owner": "NixOS",
"repo": "nixpkgs",
"rev": "a7ecde854aee5c4c7cd6177f54a99d2c1ff28a31",
"rev": "29bcead8405cfe4c00085843eb372cc43837bb9d",
"type": "github"
},
"original": {
"owner": "NixOS",
"ref": "21.11",
"ref": "nixpkgs-unstable",
"repo": "nixpkgs",
"type": "github"
}

10
flake.nix
View File

@ -2,7 +2,7 @@
description = "The blog hosted at https://blog.polynom.me";
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";
};
@ -16,9 +16,17 @@
in {
packages = forAllSystems (system: let
pkgs = import nixpkgs { inherit system; };
tailwindWithTypography = pkgs.nodePackages.tailwindcss.overrideAttrs (old: {
plugins = [
pkgs.nodePackages."@tailwindcss/typography"
];
});
in {
default = pkgs.callPackage ./pkgs/blog.nix {
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;
}
}

19
layout/item.html
View File

@ -1,11 +1,14 @@
<div class="horizontal-center">
<div class="post-list-item">
<h2><a class="post-list-item-title" href="/{{ slug }}.html">{{ title }}</a></h2>
<!-- Post item -->
<div class="w-4/5 py-4">
<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="post-summary">{{ summary }}...</p>
</div>
</div>
<p class="prose text-white py-2">
{{ summary }}...
</p>
</div>

7
layout/list.html
View File

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

84
layout/page.html
View File

@ -1,61 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
<!doctype html>
<html>
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}" />
<head>
<title>{{ title }}</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" href="{{ page_assets }}/css/main.css" />
<link rel="stylesheet" href="/assets/css/blog.css" />
<link rel="stylesheet" href="/assets/css/syntax.css" />
{{ mathjax_include }}
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}" />
<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 -->
<link rel="alternative"
type="application/rss+xml"
title="PapaTutuWawa's Blog"
href="https://{{ blog_url }}/atom.xml" />
title="PapaTutuWawa's Blog"
href="https://{{ blog_url }}/atom.xml" />
<!-- Mastodon -->
<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="" />
</head>
<div class="vertical-center">
<span class="name-title">PapaTutuWawa's Blog</span>
<body class="min-h-screen h-full flex flex-col p-8 h-full">
<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">
<ul>
<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="flex flex-col justify-center px-8">
<h1 class="text-xl lg:text-4xl text-white">PapaTutuWawa's blog</h1>
<div class="horizontal-center">
{{ content }}
</div>
<div class="flex flex-row justify-between">
<a class="text-indigo-400" href="/index.html">Posts</a>
<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">
<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>

34
layout/post.html
View File

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

3
params.json
View File

@ -4,7 +4,8 @@
"blog_description": "My personal blog. Mainly tech stuff.",
"git_url": "git.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_user": "papatutuwawa",
"email_domain": "polynom.me",

14
pkgs/blog.nix
View File

@ -1,9 +1,12 @@
{
lib, stdenv
, gnumake, imagemagick
, shared-assets
}:
stdenv.mkDerivation {
, python3
, shared-assets # For makesite.py
, tailwindWithTypography
}: let
pythonEnv = python3.withPackages (ps: with ps; [markdown pygments]);
in stdenv.mkDerivation {
pname = "blog";
version = "20231507";
@ -12,12 +15,15 @@ stdenv.mkDerivation {
buildInputs = [ shared-assets gnumake imagemagick ];
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"
'';
buildPhase = ''
make buildnosign
# Generate Tailwind CSS data
${tailwindWithTypography}/bin/tailwindcss --input ./input.css --output _site/assets/css/index.css
'';
installPhase = ''

10
tailwind.config.js Normal file
View File

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