Compare commits
10 Commits
de8eb4c3ec
...
9f101abc10
| Author | SHA1 | Date | |
|---|---|---|---|
9f101abc10
|
|||
|
280122c27d
|
|||
| 84335ce590 | |||
| 615b6e1683 | |||
| 815d3e21ca | |||
| 1bc1454b93 | |||
| 2d90cc6151 | |||
| b3e082ac55 | |||
| 13561786a7 | |||
| 48475ae4ab |
@ -1,6 +1,6 @@
|
||||
<meta name="date" content="2023/05/01">
|
||||
<title>It's Alive!</title>
|
||||
<link rel=stylesheet href=style.css>
|
||||
<link rel=stylesheet href='/style.css'>
|
||||
<body style="background-color: #161617;">
|
||||
<p>
|
||||
Cloning via http(s) now works!
|
||||
20
blog/What-is-a-squibid/index.html
Normal file
20
blog/What-is-a-squibid/index.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<meta name="date" content="2023/10/30">
|
||||
<title>'What is a squibid?'</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="stylesheet" href="/blog/style.css">
|
||||
<body style="background-color: #161617;">
|
||||
<p>
|
||||
Recently, a few people have been asking me: "what is a squibid?" or
|
||||
"where did your name come from?". In this blog post I will answer those
|
||||
questions.
|
||||
<br>
|
||||
<br>
|
||||
A few years ago I came up with a drawing of an animal
|
||||
reason to do anything with it, but regardless I chose to name it a
|
||||
squibid. Eventually, when trying to find a good username I chose squibid
|
||||
because that would cover both the username and profile picture.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
48
blog/Why-"suckless"-software-is-important/index.html
Normal file
48
blog/Why-"suckless"-software-is-important/index.html
Normal file
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<title>'Why "suckless" software is important'</title>
|
||||
<meta name="date" content="2024/01/14">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<style> html, body {
|
||||
display: unset !important;
|
||||
max-width: 80ch;
|
||||
margin: auto;
|
||||
} </style>
|
||||
<body id="blog">
|
||||
<p>
|
||||
When it comes to learning how to program there are a few things you can
|
||||
do:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Read a textbook</li>
|
||||
<li>Watch videos</li>
|
||||
<li>Read some source code</li>
|
||||
</ol>
|
||||
<p>
|
||||
Of these options I find the best way to truly learn how to program is to
|
||||
read someone else's program and try and understand it. For example
|
||||
recently I've been working on my own
|
||||
<a href="https://tools.suckless.org/dmenu">dmenu</a> clone for Wayland.
|
||||
Throughout working on it instead of looking for tutorials on how to render
|
||||
a square using pixman I decided to take a look at
|
||||
<a href="https://github.com/djpohly/dtao">dtao</a> which is a clone of
|
||||
dzen for Wayland. By just reading the code and messing around with the
|
||||
program I was able to get an understanding for how rendering is done in
|
||||
pixman.
|
||||
</p>
|
||||
<p>
|
||||
Now you may be asking yourself something like: "But what does this have to
|
||||
do with suckless software?". The answer to that is in their philosophy
|
||||
which is about: "keeping things simple, minimal and usable". The idea of
|
||||
keeping things minimal and useable allows them to create wonderful
|
||||
programs that not only work, but also showcase how to do things without
|
||||
extra fluff that something like i3 might have.
|
||||
</p>
|
||||
<p>
|
||||
Even if you don't like suckless software it still serves as a great place
|
||||
to learn how to do the bare minimum. And for those who do enjoy using it,
|
||||
it can serve as a great starting place to hack upon until you get the
|
||||
software of your dreams.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Squibid's Blog</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
@ -20,16 +20,12 @@
|
||||
<div id="master">
|
||||
<header>
|
||||
<h1 id="font", style="margin-bottom: 0">
|
||||
<a href="https://squi.bid">Squibid's</a> Blog
|
||||
<a href="/">Squibid's</a> Blog
|
||||
</h1>
|
||||
</header>
|
||||
<hr style="color: #f7f7f7;">
|
||||
<p id="bloglist">
|
||||
<!-- b script marker blog -->
|
||||
<a href="/blog/librex-and-dots"> librex and dots</a><span>2023/06/27</span><br>
|
||||
<a href="/blog/It's-Alive!"> It's Alive!</a><span>2023/05/01</span><br>
|
||||
<a href="/blog/state-of-the-site"> state of the site</a><span>2023/03/11</span><br>
|
||||
<!-- e script marker blog -->
|
||||
<?php include(__DIR__.'/../misc/tools.php'); blog_entries("../blog"); ?>
|
||||
</p>
|
||||
<h2 id="font" style="text-align: center; margin-top: 0;">
|
||||
<a href="/blog/rss.xml", title="rss">subscribe</a>
|
||||
@ -1,6 +1,6 @@
|
||||
<meta name="date" content="2023/06/27">
|
||||
<title>librex and dots</title>
|
||||
<link rel=stylesheet href=style.css>
|
||||
<link rel=stylesheet href='/style.css'>
|
||||
<body style="background-color: #161617;">
|
||||
<p>
|
||||
Hello!
|
||||
28
blog/newblog
28
blog/newblog
@ -1,23 +1,29 @@
|
||||
#!/bin/sh
|
||||
# generate a base blog file
|
||||
|
||||
read -p "Enter name of blog: " name
|
||||
filename="$(echo $name | sed 's/ /-/g').html"
|
||||
printf "Enter name of blog entry: "
|
||||
read -r name
|
||||
filename="$(echo "$name" | sed 's/ /-/g')"
|
||||
|
||||
# make sure we don't overwrite an existent file
|
||||
[ -f $filename ] &&
|
||||
printf "File already exists! Please choose a different filename.\n"; exit 1
|
||||
# make sure we don't overwrite an existing file
|
||||
if [ -f "$filename" ]; then
|
||||
printf "Blog entry already exists! Please choose a different name.\n"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
printf '<!DOCTYPE HTML>
|
||||
mkdir "$filename"
|
||||
cat > "$filename/index.html" << EOF
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<meta name="date" content="2023/07/15"><title>'$name'</title>
|
||||
<link rel=stylesheet href=style.css>
|
||||
<body style="background-color: #161617;">
|
||||
<title>'$name'</title>
|
||||
<meta name="date" content="$(date "+%Y/%m/%d")">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<body id="blog">
|
||||
<p>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
' > $filename
|
||||
$EDITOR $filename
|
||||
EOF
|
||||
[ "$EDITOR" ] && $EDITOR "$filename/index.html" || vim "$filename/index.html"
|
||||
|
||||
echo "Make sure to run sup to add to rss feed!"
|
||||
|
||||
96
blog/rss.xml
96
blog/rss.xml
@ -11,10 +11,94 @@
|
||||
|
||||
<!-- LB -->
|
||||
|
||||
<item>
|
||||
<title>Why "suckless" software is important</title>
|
||||
<guid>https://squi.bid/blog/Why-"suckless"-software-is-important/index.html</guid>
|
||||
<link>https://squi.bid/blog/Why-"suckless"-software-is-important/index.html</link>
|
||||
<pubDate>Sun, 14 Jan 2024 20:22:27 -0500</pubDate>
|
||||
<description><![CDATA[<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<title>'Why "suckless" software is important'</title>
|
||||
<meta name="date" content="2024/01/14">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<style> html, body {
|
||||
display: unset !important;
|
||||
max-width: 80ch;
|
||||
margin: auto;
|
||||
} </style>
|
||||
<body id="blog">
|
||||
<p>
|
||||
When it comes to learning how to program there are a few things you can
|
||||
do:
|
||||
</p>
|
||||
<ol>
|
||||
<li>Read a textbook</li>
|
||||
<li>Watch videos</li>
|
||||
<li>Read some source code</li>
|
||||
</ol>
|
||||
<p>
|
||||
Of these options I find the best way to truly learn how to program is to
|
||||
read someone else's program and try and understand it. For example
|
||||
recently I've been working on my own
|
||||
<a href="https://tools.suckless.org/dmenu">dmenu</a> clone for Wayland.
|
||||
Throughout working on it instead of looking for tutorials on how to render
|
||||
a square using pixman I decided to take a look at
|
||||
<a href="https://github.com/djpohly/dtao">dtao</a> which is a clone of
|
||||
dzen for Wayland. By just reading the code and messing around with the
|
||||
program I was able to get an understanding for how rendering is done in
|
||||
pixman.
|
||||
</p>
|
||||
<p>
|
||||
Now you may be asking yourself something like: "But what does this have to
|
||||
do with suckless software?". The answer to that is in their philosophy
|
||||
which is about: "keeping things simple, minimal and usable". The idea of
|
||||
keeping things minimal and useable allows them to create wonderful
|
||||
programs that not only work, but also showcase how to do things without
|
||||
extra fluff that something like i3 might have.
|
||||
</p>
|
||||
<p>
|
||||
Even if you don't like suckless software it still serves as a great place
|
||||
to learn how to do the bare minimum. And for those who do enjoy using it,
|
||||
it can serve as a great starting place to hack upon until you get the
|
||||
software of your dreams.
|
||||
</p>
|
||||
|
||||
]]></description>
|
||||
</item>
|
||||
|
||||
|
||||
<item>
|
||||
<title>What is a squibid?</title>
|
||||
<guid>https://squi.bid/blog/What-is-a-squibid/index.html</guid>
|
||||
<link>https://squi.bid/blog/What-is-a-squibid/index.html</link>
|
||||
<pubDate>Mon, 30 Oct 2023 12:47:05 -0400</pubDate>
|
||||
<description><![CDATA[<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<meta name="date" content="2023/10/30">
|
||||
<title>'What is a squibid?'</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="stylesheet" href="/blog/style.css">
|
||||
<body style="background-color: #161617;">
|
||||
<p>
|
||||
Recently, a few people have been asking me: "what is a squibid?" or
|
||||
"where did your name come from?". In this blog post I will answer those
|
||||
questions.
|
||||
<br>
|
||||
<br>
|
||||
A few years ago I came up with a drawing of an animal
|
||||
reason to do anything with it, but regardless I chose to name it a
|
||||
squibid. Eventually, when trying to find a good username I chose squibid
|
||||
because that would cover both the username and profile picture.
|
||||
</p>
|
||||
|
||||
]]></description>
|
||||
</item>
|
||||
|
||||
|
||||
<item>
|
||||
<title>librex and dots</title>
|
||||
<guid>https://squi.bid/blog/librex-and-dots.html</guid>
|
||||
<link>https://squi.bid/blog/librex-and-dots.html</link>
|
||||
<guid>https://squi.bid/blog/librex-and-dots</guid>
|
||||
<link>https://squi.bid/blog/librex-and-dots</link>
|
||||
<pubDate>Tue, 27 Jun 2023 12:17:35 -0400</pubDate>
|
||||
<description><![CDATA[
|
||||
<p>
|
||||
@ -43,8 +127,8 @@ feel free to <a href="mailto:me@zacharyscheiman.com">email me</a>.
|
||||
|
||||
<item>
|
||||
<title>It's Alive!</title>
|
||||
<guid>https://squi.bid/blog/It's-Alive!.html</guid>
|
||||
<link>https://squi.bid/blog/It's-Alive!.html</link>
|
||||
<guid>https://squi.bid/blog/It's-Alive!</guid>
|
||||
<link>https://squi.bid/blog/It's-Alive!</link>
|
||||
<pubDate>Mon, 17 Apr 2023 13:22:03 +0000</pubDate>
|
||||
<description><![CDATA[
|
||||
<p>
|
||||
@ -58,8 +142,8 @@ feel free to <a href="mailto:me@zacharyscheiman.com">email me</a>.
|
||||
|
||||
<item>
|
||||
<title>state of the site</title>
|
||||
<guid>https://squi.bid/blog/state-of-the-site.html</guid>
|
||||
<link>https://squi.bid/blog/state-of-the-site.html</link>
|
||||
<guid>https://squi.bid/blog/state-of-the-site</guid>
|
||||
<link>https://squi.bid/blog/state-of-the-site</link>
|
||||
<pubDate>Sat, 11 Mar 2023 15:00:32 -0500</pubDate>
|
||||
<description><![CDATA[
|
||||
<p>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<meta name="date" content="2023/03/11">
|
||||
<title>state of the site</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<body style="background-color: #161617;">
|
||||
<p>
|
||||
Hello o/, and welcome to my website!<br>
|
||||
@ -1 +0,0 @@
|
||||
../style.css
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
51
genblog
51
genblog
@ -1,51 +0,0 @@
|
||||
#!/bin/sh
|
||||
#
|
||||
# genblog is a script to take data from my blogs and format it into html for
|
||||
# my website
|
||||
#
|
||||
# by: Squibid
|
||||
#
|
||||
|
||||
#
|
||||
# Helper variables and functions
|
||||
#
|
||||
bloglist=$(ls -t1 blog/*.html | grep -oP '(?<=\/).*?(?=\.)')
|
||||
top5=$(printf "$bloglist\n" | head -5)
|
||||
|
||||
blogdate() {
|
||||
grep -oP '(?<=\<meta name="date" content=").*(?="\>)' "blog/$1.html"
|
||||
}
|
||||
blogtitle() { grep -oP '(?<=\<title\>).*(?=\<\/title\>)' "blog/$1.html"; }
|
||||
htmlline() {
|
||||
printf "<a href=\"/blog/$1\">\ $(blogtitle $1)</a>\
|
||||
<span>$(blogdate $1)</span><br>\n"
|
||||
}
|
||||
|
||||
# set file dates properly
|
||||
for i in $bloglist; do
|
||||
if $(touch -cd "$(blogdate $i)T00:00:00" /tmp/file); then
|
||||
touch -amt "$(blogdate $i | sed 's/\///g')0000" "blog/$i.html"
|
||||
fi
|
||||
done
|
||||
|
||||
#
|
||||
# Start modifing our files
|
||||
#
|
||||
|
||||
# delete old bloglist
|
||||
sed -i -n '1,/.*<!-- b script marker blog -->/p;/.*<!-- e script marker blog -->/,$p' index.html
|
||||
sed -i -n '1,/.*<!-- b script marker blog -->/p;/.*<!-- e script marker blog -->/,$p' blog.html
|
||||
|
||||
# top 5 blogs
|
||||
for i in $top5; do
|
||||
line=$(htmlline $i)
|
||||
# add new bloglist
|
||||
sed -i "/.*<!-- e script marker blog -->/i $line" index.html
|
||||
done
|
||||
|
||||
# generate the full blog list
|
||||
for i in $bloglist; do
|
||||
line=$(htmlline $i)
|
||||
# add new bloglist
|
||||
sed -i "/.*<!-- e script marker blog -->/i $line" blog.html
|
||||
done
|
||||
@ -5,6 +5,8 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- prevent darkreader extension from messing with our already dark site -->
|
||||
<meta name="darkreader-lock" />
|
||||
</head>
|
||||
<body style="background-color: #161617;">
|
||||
<div id="master">
|
||||
@ -38,17 +40,15 @@
|
||||
</hgroup>
|
||||
<p>My best repos are</p>
|
||||
<ul>
|
||||
<li><a href="https://git.squi.bid/eat-it">eat it</a> -
|
||||
<li><a href="https://git.squi.bid/squibid/wiz">wiz</a> - An idle event
|
||||
manager for Wayland. Written in C!</li>
|
||||
<li><a href="https://git.squi.bid/squibid/eat-it">eat it</a> -
|
||||
Eat It is a <a href="https://mpv.io", title="Mpv's Website">Mpv</a>
|
||||
package manager writter in <a href="https://lua.org",
|
||||
package manager written in <a href="https://lua.org",
|
||||
title="Lua's Website">Lua</a> with the intent of making Mpv
|
||||
scripts easier to update and use.</li>
|
||||
<li><a href="https://git.squi.bid/coreutils">coreutils</a> -
|
||||
My simple posix (if I can do that) complient core utils witten in
|
||||
<a href="https://www.iso-9899.info/wiki/The_Standard",
|
||||
title="C ISO standard">C</a> :)</li>
|
||||
</ul>
|
||||
<p><a href="https://git.squi.bid">more...</a></p>
|
||||
<p><a href="https://git.squi.bid/squibid">more...</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right">
|
||||
@ -60,9 +60,7 @@
|
||||
</p>
|
||||
</hgroup>
|
||||
<p id="blogpreview">
|
||||
<!-- b script marker blog -->
|
||||
If this is here I forgot to generate the blog list.
|
||||
<!-- e script marker blog -->
|
||||
<?php include('misc/tools.php'); blog_entries("blog", 5); ?>
|
||||
</p>
|
||||
<a href="/blog">more...</a>
|
||||
</div>
|
||||
23
misc/404.html
Normal file
23
misc/404.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Squibid's Site - 404</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: var(--cyan);
|
||||
font-family: sans-serif;
|
||||
font-size: 404px;
|
||||
width: 100vw;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="background-color: #161617;">
|
||||
<h1><a href="/">whoops</a></h1>
|
||||
</body>
|
||||
</html>
|
||||
27
misc/tools.php
Normal file
27
misc/tools.php
Normal file
@ -0,0 +1,27 @@
|
||||
<?php
|
||||
function blog_entries($path = "blog", $limit = false) {
|
||||
$files = scandir($path."/");
|
||||
$entries = [];
|
||||
$i = 0;
|
||||
|
||||
foreach ($files as $file) {
|
||||
if (is_dir($path.'/'.$file) && $file[0] != ".") {
|
||||
$tags = get_meta_tags($path.'/'.$file.'/index.html');
|
||||
$entries[$i][0] = preg_replace("/\//", "", $tags["date"]);
|
||||
$entries[$i][1] = $file;
|
||||
$entries[$i][2] = $tags["date"];
|
||||
$i++;
|
||||
}
|
||||
}
|
||||
rsort($entries);
|
||||
for ($i = 0; $i < count($entries); $i++) {
|
||||
if ($limit && $i > $limit - 1)
|
||||
break;
|
||||
$file = $entries[$i][1];
|
||||
$age = $entries[$i][2];
|
||||
printf('<a href=/%s/%s>%s</a><span>%s</span><br>',
|
||||
$path, $file, str_replace("-", " ", $file),
|
||||
$age ? $age : "¯\_(ツ)_/¯");
|
||||
}
|
||||
}
|
||||
?>
|
||||
BIN
pics/squibid.png
Normal file
BIN
pics/squibid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
43
style.css
43
style.css
@ -1,5 +1,38 @@
|
||||
/* root */
|
||||
:root {
|
||||
--lr-width: 45%;
|
||||
|
||||
/* mellow theme colors */
|
||||
--bg: #161617;
|
||||
--fg: #c9c7cd;
|
||||
--bg-dark: #131314;
|
||||
--black: #27272a;
|
||||
--red: #f5a191;
|
||||
--green: #90b99f;
|
||||
--yellow: #e6b99d;
|
||||
--blue: #aca1cf;
|
||||
--magenta: #e29eca;
|
||||
--cyan: #ea83a5;
|
||||
--white: #c1c0d4;
|
||||
--bright_black: #353539;
|
||||
--bright_red: #ffae9f;
|
||||
--bright_green: #9dc6ac;
|
||||
--bright_yellow: #f0c5a9;
|
||||
--bright_blue: #b9aeda;
|
||||
--bright_magenta: #ecaad6;
|
||||
--bright_cyan: #f591b2;
|
||||
--bright_white: #cac9dd;
|
||||
--gray01: #1b1b1d;
|
||||
--gray02: #2a2a2d;
|
||||
--gray03: #3e3e43;
|
||||
--gray04: #57575f;
|
||||
--gray05: #757581;
|
||||
--gray06: #9998a8;
|
||||
--gray07: #c1c0d4;
|
||||
}
|
||||
|
||||
html, body {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* desktop mode */
|
||||
@ -35,6 +68,12 @@ html, body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
body[id=blog] {
|
||||
background-color: var(--bg);
|
||||
display: unset !important;
|
||||
max-width: 80ch;
|
||||
margin: auto;
|
||||
}
|
||||
div#master header {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
@ -42,7 +81,7 @@ div#master header {
|
||||
div#group hgroup {
|
||||
text-align: center;
|
||||
}
|
||||
#font, p, ul, ol {
|
||||
#font, p, ul, ol, h1, h2, h3, h4, h5 {
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
@ -58,7 +97,7 @@ p#blogpreview span {
|
||||
a {
|
||||
font-family: sans-serif;
|
||||
text-decoration: none;
|
||||
color: #ea83a5;
|
||||
color: var(--cyan);
|
||||
}
|
||||
a:hover, a:active {
|
||||
font-style: italic;
|
||||
|
||||
Reference in New Issue
Block a user