jashton/vintagecoding.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling, navigation bar, theming, article lists, page routing.

Browse Source
This commit is contained in:
Joshua Ashton
2025-03-20 19:54:37 -06:00
parent 5af0547864
commit c0fc9e9d00
28 changed files with 489 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
articles.php
+28
View File
@@ -0,0 +1,28 @@
<?php
require_once 'functions/init.php';
require_once 'functions/functions.php';
include_once 'components/head.php';
include_once 'functions/article_functions.php';
// TODO: Move to a grid, where the left hand column is either a search and filtering system, or...Table of Contents?
// Default view, it'll show articles by recency
if (!isset($_GET['article_id']) && !isset($_GET['tag'])) {
$ids = article_ids_by_recency();
foreach ($ids as $id) {
echo article_card($id);
}
} else if (isset($_GET['article_id'])) {
echo article_page_from_markdown($_GET['article_id']);
} else if (isset($_GET['tag'])) {
$ids = article_ids_by_tag($_GET['tag']);
foreach ($ids as $id) {
echo article_card($id);
}
}
include_once 'components/foot.php';
components/foot.php
-1
View File
@@ -1,4 +1,3 @@
<foot></foot>
</body>
</html>
components/head.php
+15 -2
View File
@@ -3,8 +3,21 @@
<head>
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/text.css" rel="stylesheet" type="text/css">
<link href="css/images.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://nerdfonts.com/assets/css/webfont.css">
<?php
if ($_SESSION['theme'] == 'dark') {
echo '
<link href="css/dark.css" rel="stylesheet" type="text/css">
';
} elseif ($_SESSION['theme'] == 'light') {
echo '
<link href="css/light.css" rel="stylesheet" type="text/css">
';
}
?>
<script src="js/theme-toggle.js"></script>
</head>
<body>
<?php include 'nav.php'; ?>
components/nav.php
+28
View File
@@ -0,0 +1,28 @@
<?php
$current_page = $_SERVER['SCRIPT_NAME'];
$nav = '
<nav>
<div class="row_no_margin">
<div class="site_navigation">
<ul>
<li><a href="/index.php"' . ($current_page == '/index.php' ? ' class="underline"' : '') . '>Home</a></li>
<li><a href="/articles.php"' . ($current_page == '/articles.php' ? ' class="underline"' : '') . '>Articles</a></li>
</ul>
</div>
<form method="post">
';
$theme_toggle = '';
if ($_SESSION['theme'] == 'dark')
$theme_toggle = 'light';
else
$theme_toggle = 'dark';
$nav .= '
<button id="theme-toggle" value="' . $theme_toggle . '" name="theme" onchange="this.form.submit()"><i class="nf ' . ($theme_toggle == 'dark' ? 'nf-oct-moon' : 'nf-oct-sun') . '"></i></button>
</form>
</div>
</nav>
';
echo $nav;
article.php → compose.php
-3
View File
@@ -1,10 +1,7 @@
<?php
require_once 'functions/init.php';
require_once 'functions/functions.php';
include_once 'components/head.php';
include_once 'functions/article_functions.php';
echo article_page_from_markdown($_GET['article_id']);
include_once 'components/foot.php';
css/base.css
+139 -8
View File
@@ -1,24 +1,123 @@
@font-face {
font-family: 'Hack Nerd Font Mono';
src: url('/home/violet/documents/development/vintagecoding.net/resources/HackNerdFontMono-Regular.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
* {
padding: 0;
margin: 0;
}
body {
background-color: black;
body {}
h1,
h2,
h3,
h4,
h5,
p,
small,
a {
font-family: 'HackNerdFontMono', Hack, sans-serif;
padding: 0;
margin: 0;
}
h1 {
font-size: 5vw;
}
h2 {
font-size: 4vw;
}
h3 {
font-size: 3vw;
}
h4 {
font-size: 2vw;
}
h5 {
font-size: 1vw;
}
p {
font-size: .75vw;
}
small {
font-size: .5vw;
}
a.fill_div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
nav {
padding: 0;
margin: 0px 30px 15px 30px;
}
nav ul {
padding: 0;
margin: 0;
width: 100%;
}
nav ul li {
display: inline-block;
}
nav ul li a {
font-size: 2vw;
font-weight: 800;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
padding: 15px;
}
nav form {
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
code {
padding: 1px;
border-radius: 4px;
}
.line {
height: 1px;
width: 100%;
background-color: white;
border-top: 1px solid white;
margin-top: 5px;
margin-bottom: 5px;
}
.row_no_margin {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0;
}
.row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0px 15px 0px;
}
@@ -29,11 +128,10 @@ body {
.article_card {
margin: 0 auto;
margin-top: 15%;
margin-top: 50px;
padding: 18px;
height: max-content;
width: 60%;
border: 5px solid white;
border-radius: 18px;
display: flex;
@@ -65,7 +163,6 @@ body {
padding: 15px;
text-decoration: none;
border: 2px solid #00FF41;
color: white;
border-radius: 9px;
}
@@ -74,7 +171,6 @@ body {
padding: 10px;
border-radius: 18px;
border: 2px solid #008F11;
color: white;
text-decoration: none;
}
@@ -87,7 +183,42 @@ body {
justify-content: center;
}
.card_profile_picture {
height: 64px;
width: auto;
border-radius: 50%;
}
.underline {
text-decoration: underline;
}
#theme-toggle {
width: 32px;
height: 32px;
border: none;
background: none;
font-size: 1.5vw;
}
.article {
width: 50%;
margin: 0 auto;
}
.article ul li {
margin-left: 50px;
}
@media (max-width: 980px) {
h1 {
font-size: 4vw;
}
p {
font-size: 2vw;
}
.card {
margin: 75% auto;
}
css/dark.css
+47
View File
@@ -0,0 +1,47 @@
body {
background-color: black;
}
h1,
h2,
h3,
h4,
h5,
p,
small,
a {
color: white;
}
nav {
border-bottom: 3px solid white;
}
code {
background-color: #2F2F2F;
}
.line {
background-color: white;
border-top: 1px solid white;
}
.article_card {
border: 5px solid white;
}
.button {
color: white;
}
.tag {
color: white;
}
#theme-toggle {
color: white;
}
.article ul li {
color: white;
}
css/images.css
-5
View File
@@ -1,5 +0,0 @@
.card_profile_picture {
height: 64px;
width: auto;
border-radius: 50%;
}
css/light.css
+64
View File
@@ -0,0 +1,64 @@
body {
background-color: white;
}
h1 {
color: black;
}
h2 {
color: black;
}
h3 {
color: black;
}
h4 {
color: black;
}
h5 {
color: black;
}
p {
color: black;
}
small {
color: black;
}
nav {
border-bottom: 3px solid black;
}
nav ul li a {
color: black;
}
.line {
background-color: black;
border-top: 1px solid black;
}
.article_card {
border: 5px solid black;
}
.button {
color: black;
}
.tag {
color: black;
}
#theme-toggle {
color: black;
}
.article ul li {
color: black;
}
css/text.css
-47
View File
@@ -1,47 +0,0 @@
h1 {
font-size: 6vw;
color: white;
}
h2 {
font-size: 5vw;
}
h3 {
font-size: 4vw;
}
h4 {
font-size: 3vw;
color: white;
}
h5 {
font-size: 2vw;
}
p {
font-size: 1vw;
color: white;
}
small {
color: white;
}
a.fill_div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
@media (max-width: 980px) {
h1 {
font-size: 4vw;
}
p {
font-size: 2vw;
}
}
functions/article_functions.php
+40 -11
View File
@@ -1,20 +1,46 @@
<?php
require 'db_functions.php';
function article_ids_by_recency()
{
$query = 'SELECT article_id FROM article ORDER BY published_at DESC;';
$results = query_db_one_or_more_results($query);
$ids = [];
while ($row = mysqli_fetch_array($results))
$ids[] = $row['article_id'];
return $ids;
}
function article_ids_by_tag($tag_id)
{
$query = 'SELECT article_id FROM article_tags INNER JOIN tags ON article_tags.tag_id = tags.tag_id WHERE tag = "' . $tag_id . '";';
$results = query_db_one_or_more_results($query);
$ids = [];
while ($row = mysqli_fetch_array($results))
$ids[] = $row['article_id'];
return $ids;
}
/*
* Reads the markdown file for a given article and generates the HTML for it.
*/
function article_page_from_markdown($article_id)
{
$query = 'SELECT * FROM articles WHERE article_id = ' . $article_id . ';';
$query = 'SELECT * FROM article WHERE article_id = ' . $article_id . ';';
$article = query_db_one_result($query);
$markdown = read_file_one_string($_ENV['ARTICLES_PATH'] . $article_id . '/' . $article['markdown_file_path']);
$markdown = read_file_one_string($_ENV['ARTICLES_PATH'] . $article_id . '/article.md');
// Instantiate Parsedown
$parsedown = new Parsedown();
// Example usage
$html = $parsedown->text($markdown);
$html = '<div class="article">';
$html .= $parsedown->text($markdown);
$html .= '</div>';
return $html;
}
@@ -24,17 +50,20 @@ function article_page_from_markdown($article_id)
*/
function article_card($article_id)
{
$article_query = 'SELECT * FROM articles WHERE article_id = ' . $article_id . ';';
$article_query = 'SELECT * FROM article WHERE article_id = ' . $article_id . ';';
$article = query_db_one_result($article_query);
$article_tags_query = 'SELECT tag FROM article_tags INNER JOIN tags ON article_tags.tag_id = tags.tag_id WHERE article_id = ' . $article_id . ';';
$tags_results = query_db_one_or_more_results($article_tags_query);
$tags_html = '<div class="tag_row">';
$tags_html = '';
if ($tags_results != null) {
$tags_html .= '<div class="tag_row">';
while ($row = mysqli_fetch_array($tags_results))
$tags_html .= '<a href="/article.php?tag=' . $row['tag'] . '" class="tag">#' . $row['tag'] . '</a>';
while ($row = mysqli_fetch_array($tags_results))
$tags_html .= '<a href="/articles.php?tag=' . $row['tag'] . '" class="tag">#' . $row['tag'] . '</a>';
$tags_html .= '</div>';
$tags_html .= '</div>';
}
$author_query = 'SELECT username, profile_picture FROM user WHERE user_id = ' . $article['author_id'] . ';';
$author = query_db_one_result($author_query);
@@ -56,7 +85,7 @@ function article_card($article_id)
<div class="line"></div>
<p>' . $article['excerpt'] . '</p>
<div class="row">
<a href="/article.php?article_id=' . $article['article_id'] . '" class="button">Read More</a>
<a href="/articles.php?article_id=' . $article['article_id'] . '" class="button">Read More</a>
<div class="tag_box">' . $tags_html . '</div>
</div>
</div>
functions/init.php
+10 -1
View File
@@ -1,4 +1,5 @@
<?php
session_start();
// Initialize Composer.
require_once 'vendor/autoload.php';
@@ -8,4 +9,12 @@ $dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../');
$dotenv->safeLoad();
// Set SESSION variable.
$_SESSION['initialized'] = true;
if (!isset($_SESSION['initialized'])) {
$_SESSION['initialized'] = true;
$_SESSION['theme'] = 'dark';
}
if ($_SESSION['initialized'] && isset($_POST['theme'])) {
$_SESSION['theme'] = $_POST['theme'];
unset($_POST['theme']);
}
index.php
-3
View File
@@ -8,7 +8,4 @@ require_once 'functions/functions.php';
include_once 'components/head.php';
include_once 'functions/article_functions.php';
echo article_card(1);
include_once 'components/foot.php';
resources/HackNerdFont-Bold.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFont-BoldItalic.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFont-Italic.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFont-Regular.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontMono-Bold.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontMono-BoldItalic.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontMono-Italic.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontMono-Regular.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontPropo-Bold.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontPropo-BoldItalic.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontPropo-Italic.ttf
BIN
View File
Binary file not shown.
resources/HackNerdFontPropo-Regular.ttf
BIN
View File
Binary file not shown.
resources/LICENSE.md
+45
View File
@@ -0,0 +1,45 @@
The work in the Hack project is Copyright 2018 Source Foundry Authors and licensed under the MIT License
The work in the DejaVu project was committed to the public domain.
Bitstream Vera Sans Mono Copyright 2003 Bitstream Inc. and licensed under the Bitstream Vera License with Reserved Font Names "Bitstream" and "Vera"
### MIT License
Copyright (c) 2018 Source Foundry Authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
### BITSTREAM VERA LICENSE
Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera is a trademark of Bitstream, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license ("Fonts") and associated documentation files (the "Font Software"), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions:
The above copyright and trademark notices and this permission notice shall be included in all copies of one or more of the Font Software typefaces.
The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing either the words "Bitstream" or the word "Vera".
This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the "Bitstream Vera" names.
The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself.
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
Except as contained in this notice, the names of Gnome, the Gnome Foundation, and Bitstream Inc., shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Font Software without prior written authorization from the Gnome Foundation or Bitstream Inc., respectively. For further information, contact: fonts at gnome dot org.
resources/README.md
+48
View File
@@ -0,0 +1,48 @@
# Nerd Fonts
This is an archived font from the Nerd Fonts release v3.3.0.
For more information see:
* https://github.com/ryanoasis/nerd-fonts/
* https://github.com/ryanoasis/nerd-fonts/releases/latest/
# Hack
A typeface designed for source code.
For more information have a look at the upstream website: https://github.com/source-foundry/Hack
Version: 3.003
## Which font?
### TL;DR
* Pick your font family:
* If you are limited to monospaced fonts (because of your terminal, etc) then pick a font with `Nerd Font Mono` (or `NFM`).
* If you want to have bigger icons (usually around 1.5 normal letters wide) pick a font without `Mono` i.e. `Nerd Font` (or `NF`). Most terminals support this, but ymmv.
* If you work in a proportional context (GUI elements or edit a presentation etc) pick a font with `Nerd Font Propo` (or `NFP`).
### Ligatures
Ligatures are generally preserved in the patched fonts.
Nerd Fonts `v2.0.0` had no ligatures in the `Nerd Font Mono` fonts, this has been dropped with `v2.1.0`.
If you have a ligature-aware terminal and don't want ligatures you can (usually) disable them in the terminal settings.
### Explanation
Once you narrow down your font choice of family (`Droid Sans`, `Inconsolata`, etc) and style (`bold`, `italic`, etc) you have 2 main choices:
#### `Option 1: Download already patched font`
* For a stable version download a font package from the [release page](https://github.com/ryanoasis/nerd-fonts/releases)
* Or download the development version from the folders here
#### `Option 2: Patch your own font`
* Patch your own variations with the various options provided by the font patcher (i.e. not include all symbols for smaller font size)
For more information see: [The FAQ](https://github.com/ryanoasis/nerd-fonts/wiki/FAQ-and-Troubleshooting#which-font)
[SIL-RFN]:http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web_fonts_and_RFNs#14cbfd4a
scripts/init.sql
+25 -14
View File
@@ -6,17 +6,11 @@ CREATE TABLE roles (
role VARCHAR(16) NOT NULL
);
INSERT INTO roles (role)
VALUES ('owner'), ('admin'), ('contributor'), ('reader');
CREATE TABLE tags (
tag_id INT PRIMARY KEY AUTO_INCREMENT,
tag VARCHAR(16) NOT NULL
);
INSERT INTO tags (tag)
VALUES ('linux'), ('web-dev'), ('raspberry-pi'), ('self-hosting');
CREATE TABLE user (
user_id INT PRIMARY KEY,
username VARCHAR(32) NOT NULL UNIQUE,
@@ -30,11 +24,10 @@ CREATE TABLE user (
FOREIGN KEY (role_id) REFERENCES roles (role_id)
);
CREATE TABLE articles (
CREATE TABLE article (
article_id INT PRIMARY KEY AUTO_INCREMENT,
author_id INT NOT NULL,
markdown_file_path VARCHAR(256) NOT NULL UNIQUE,
title VARCHAR(64) NOT NULL,
title VARCHAR(26) NOT NULL,
slug VARCHAR(32),
read_count INT DEFAULT 0,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
@@ -46,9 +39,27 @@ CREATE TABLE articles (
);
CREATE TABLE article_tags (
article_id INT NOT NULL,
tag_id INT NOT NULL,
PRIMARY KEY (article_id, tag_id),
FOREIGN KEY (article_id) REFERENCES articles(article_id),
FOREIGN KEY (tag_id) REFERENCES tags(tag_id)
article_id INT NOT NULL,
tag_id INT NOT NULL,
PRIMARY KEY (article_id, tag_id),
FOREIGN KEY (article_id) REFERENCES article(article_id),
FOREIGN KEY (tag_id) REFERENCES tags(tag_id)
);
INSERT INTO roles (role)
VALUES ('owner'), ('admin'), ('contributor'), ('reader');
INSERT INTO tags (tag)
VALUES ('linux'), ('web-dev'), ('raspberry-pi'), ('self-hosting'), ('devlog'), ('testing');
INSERT INTO user (user_id, username, email, password_hash, role_id, profile_picture)
VALUES (2025, 'quaxlyqueen', 'me@joshashton.dev', 'changeme', 1, '2025.jpg');
INSERT INTO article (author_id, title, excerpt, published_at)
VALUES (2025, 'Building vintagecoding.net', 'This site is intended to be a platform for exposing, celebrating, and sharing the style of Vintage Coding. Topics from hardware to software and kernel to web, this site aims to cover it all.', CURRENT_TIMESTAMP);
INSERT INTO article (author_id, title, excerpt, published_at)
VALUES (2025, 'Testing vintagecoding.net', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a mauris sit amet dui pellentesque sodales. Pellentesque non viverra leo, et congue metus.', CURRENT_TIMESTAMP);
INSERT INTO article_tags (article_id, tag_id) VALUES (1, 2), (1, 4), (1, 5);
INSERT INTO article_tags (article_id, tag_id) VALUES (2, 2), (2, 6);