aljaz/hacker-laws
1
1
Fork 0
mirror of https://github.com/dwmkerr/hacker-laws.git synced 2025-12-17 12:45:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: build a little better...

Browse Source
This commit is contained in:
Dave Kerr
2025-03-09 07:43:56 +00:00
parent 8142ce0a9f
commit 8bac32a000
14 changed files with 84 additions and 2916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
.github/pages/backup/index2.html vendored
View File

@@ -1,189 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hacker Laws</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
<style>
/* Soft pastel parchment background */
body {
background-color: #fdf6e3;
color: #333;
padding-top: 70px; /* to account for sticky navbar */
}
/* Navbar customization */
.navbar-custom {
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Header styling */
header h1 {
font-size: 2.5rem;
font-weight: bold;
}
header p.lead {
font-size: 1.25rem;
color: #555;
}
/* Law section container */
.law-section {
margin-bottom: 2rem;
padding: 1.5rem;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Social sharing icons */
.social-sharing a {
margin-right: 0.75rem;
font-size: 1.2rem;
color: #555;
text-decoration: none;
}
.social-sharing a:hover {
color: #000;
}
/* Back to top link styling */
.back-to-top a {
font-size: 0.9rem;
text-decoration: none;
color: #007bff;
}
.back-to-top a:hover {
text-decoration: underline;
}
</style>
</head>
<body id="top">
<!-- Sticky Navbar -->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#top">Hacker Laws</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-book"></i> Effective Shell</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-cup"></i> Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-brain"></i> Terminal AI</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-github"></i> GitHub</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="container my-4">
<h1>Hacker Laws</h1>
<p class="lead">Laws, Theories, Principles and Patterns that developers will find useful.</p>
</header>
<!-- Main Content -->
<main class="container">
<!-- Introduction Section -->
<section id="introduction" class="law-section">
<h2>Introduction</h2>
<p>There are lots of laws which people discuss when talking about development. This repository is a reference and overview of some of the most common ones. Please share and submit PRs!</p>
<p><strong>Note:</strong> This repo contains an explanation of some laws, principles and patterns, but does not <em>advocate</em> for any of them. Whether they should be applied will always be a matter of debate, and greatly dependent on what you are working on.</p>
<!-- Social Sharing Icons -->
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Share on LinkedIn"><i class="bi bi-linkedin"></i></a>
</div>
<!-- Back to Top Options (choose one) -->
<div class="back-to-top mt-2">
<a href="#top">↑ Top</a>
<!-- Alternative options:
<a href="#top">Back to Top</a>
<a href="#top">Return to Top</a>
<a href="#top">Go Up</a>
<a href="#top">Scroll Up</a>
-->
</div>
</section>
<!-- 90–9–1 Principle (1% Rule) Section -->
<section id="9091-principle" class="law-section">
<h2>90–9–1 Principle (1% Rule)</h2>
<p>The 90-9-1 principle suggests that within an internet community such as a wiki, 90% of participants only consume content, 9% edit or modify content and 1% of participants add content.</p>
<p>Real-world examples:</p>
<ul>
<li>A 2014 study of four digital health social networks found the top 1% created 73% of posts, the next 9% accounted for an average of ~25% and the remaining 90% accounted for an average of 2%.</li>
</ul>
<p>See Also: <a href="#the-pareto-principle-the-8020-rule">Pareto Principle</a></p>
<!-- Social Sharing Icons -->
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Share on LinkedIn"><i class="bi bi-linkedin"></i></a>
</div>
<!-- Back to Top Options -->
<div class="back-to-top mt-2">
<a href="#top">↑ Top</a>
</div>
</section>
<!-- 90–90 Rule Section -->
<section id="9090-rule" class="law-section">
<h2>90–90 Rule</h2>
<p>The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time.</p>
<p>This is a wry reinterpretation of the <a href="#the-pareto-principle-the-8020-rule">Pareto Principle</a> (or 80-20 rule) that highlights the real-world challenges of completing engineering work. This sentiment is also echoed in <a href="#hofstadters-law">Hofstadter's Law</a>.</p>
<!-- Social Sharing Icons -->
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Share on LinkedIn"><i class="bi bi-linkedin"></i></a>
</div>
<!-- Back to Top Options -->
<div class="back-to-top mt-2">
<a href="#top">↑ Top</a>
</div>
</section>
<!-- Additional law sections would follow the same structure -->
</main>
<!-- Footer -->
<footer class="container text-center my-4">
<p>&copy; 2025 Hacker Laws</p>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Optional: Smooth scrolling for in-page links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetElem = document.querySelector(this.getAttribute('href'));
if (targetElem) {
targetElem.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>

194
.github/pages/backup/index3.html vendored
View File

@@ -1,194 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hacker Laws</title>
<!-- Google Font for elegant serif fonts -->
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
<style>
/* Use an elegant serif font and a clean, minimal palette */
body {
font-family: 'Libre Baskerville', Georgia, serif;
background-color: #fff;
color: #333;
padding-top: 70px; /* account for sticky navbar */
}
.container {
max-width: 800px;
}
/* Simplified Navbar */
.navbar-custom {
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
}
.navbar-brand,
.nav-link {
font-weight: 700;
}
/* Centered, minimal header */
header {
text-align: center;
margin-bottom: 2rem;
}
header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
header p.lead {
font-size: 1.25rem;
color: #555;
}
/* Law section styling: simple borders instead of shadows */
.law-section {
margin-bottom: 2rem;
padding: 1.5rem;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
}
/* Social sharing icons remain the same */
.social-sharing a {
margin-right: 0.75rem;
font-size: 1.2rem;
color: #555;
text-decoration: none;
}
.social-sharing a:hover {
color: #000;
}
/* Back to top link styling */
.back-to-top a {
font-size: 0.9rem;
text-decoration: none;
color: #007bff;
}
.back-to-top a:hover {
text-decoration: underline;
}
</style>
</head>
<body id="top">
<!-- Sticky Navbar -->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#top">Hacker Laws</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-book"></i> Effective Shell</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-cup"></i> Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-brain"></i> Terminal AI</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-github"></i> GitHub</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="container my-4">
<h1>Hacker Laws</h1>
<p class="lead">Laws, Theories, Principles and Patterns that developers will find useful.</p>
</header>
<!-- Main Content -->
<main class="container">
<!-- Introduction Section -->
<section id="introduction" class="law-section">
<h2>Introduction</h2>
<p>There are lots of laws which people discuss when talking about development. This repository is a reference and overview of some of the most common ones. Please share and submit PRs!</p>
<p><strong>Note:</strong> This repo contains an explanation of some laws, principles and patterns, but does not <em>advocate</em> for any of them. Whether they should be applied will always be a matter of debate, and greatly dependent on what you are working on.</p>
<!-- Social Sharing Icons -->
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Share on LinkedIn"><i class="bi bi-linkedin"></i></a>
</div>
<!-- Back to Top -->
<div class="back-to-top mt-2">
<a href="#top">↑ Top</a>
</div>
</section>
<!-- 90–9–1 Principle (1% Rule) Section -->
<section id="9091-principle" class="law-section">
<h2>90–9–1 Principle (1% Rule)</h2>
<p>The 90-9-1 principle suggests that within an internet community such as a wiki, 90% of participants only consume content, 9% edit or modify content and 1% of participants add content.</p>
<p>Real-world examples:</p>
<ul>
<li>A 2014 study of four digital health social networks found the top 1% created 73% of posts, the next 9% accounted for an average of ~25% and the remaining 90% accounted for an average of 2%.</li>
</ul>
<p>See Also: <a href="#the-pareto-principle-the-8020-rule">Pareto Principle</a></p>
<!-- Social Sharing Icons -->
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Share on LinkedIn"><i class="bi bi-linkedin"></i></a>
</div>
<!-- Back to Top -->
<div class="back-to-top mt-2">
<a href="#top">↑ Top</a>
</div>
</section>
<!-- 90–90 Rule Section -->
<section id="9090-rule" class="law-section">
<h2>90–90 Rule</h2>
<p>The first 90 percent of the code accounts for the first 90 percent of the development time. The remaining 10 percent of the code accounts for the other 90 percent of the development time.</p>
<p>This is a wry reinterpretation of the <a href="#the-pareto-principle-the-8020-rule">Pareto Principle</a> (or 80-20 rule) that highlights the real-world challenges of completing engineering work. This sentiment is also echoed in <a href="#hofstadters-law">Hofstadter's Law</a>.</p>
<!-- Social Sharing Icons -->
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Share on LinkedIn"><i class="bi bi-linkedin"></i></a>
</div>
<!-- Back to Top -->
<div class="back-to-top mt-2">
<a href="#top">↑ Top</a>
</div>
</section>
</main>
<!-- Footer -->
<footer class="container text-center my-4">
<p>&copy; 2025 Hacker Laws</p>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Smooth scrolling for in-page links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetElem = document.querySelector(this.getAttribute('href'));
if (targetElem) {
targetElem.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>

0
.github/pages/backup/index4.html vendored
View File

62
.github/pages/generate_site.py vendored
View File

@@ -1,62 +0,0 @@
import argparse
import markdown
import os
from jinja2 import Environment, FileSystemLoader
# Read environment variables with defaults
TEMPLATE_FILE = os.getenv("TEMPLATE_FILE", "template.html")
MARKDOWN_FILE = os.getenv("MARKDOWN_FILE", "laws.md")
OUTPUT_FILE = os.getenv("OUTPUT_FILE", "output.html")
TEMPLATE_DIR = os.getenv("TEMPLATE_DIR", ".")
def load_template():
"""Load Jinja2 template from the specified directory."""
env = Environment(loader=FileSystemLoader(TEMPLATE_DIR))
return env.get_template(TEMPLATE_FILE)
def parse_markdown(md_file):
"""Parse a Markdown file and return structured law sections."""
with open(md_file, "r", encoding="utf-8") as f:
md_content = f.read()
sections = md_content.split("\n## ") # Split by Markdown headings
laws = []
for section in sections:
if section.strip():
lines = section.split("\n", 1)
title = lines[0].strip("# ").strip()
# Skip sections which do not need to be processed.
# print(f"found title: {title}")
# if "hacker-laws" in title:
# continue
content = markdown.markdown(lines[1] if len(lines) > 1 else "")
law_id = title.lower().replace(" ", "-")
laws.append({"title": title, "content": content, "id": law_id})
return laws
def generate_site():
"""Generate the static HTML file from Markdown and Jinja2 template."""
print(f"📝 Loading template from: {TEMPLATE_DIR}/{TEMPLATE_FILE}")
print(f"📖 Loading markdown from: {MARKDOWN_FILE}")
print(f"💾 Outputting HTML to: {OUTPUT_FILE}")
template = load_template()
laws = parse_markdown(MARKDOWN_FILE)
with open(OUTPUT_FILE, "w", encoding="utf-8") as f:
f.write(template.render(laws=laws))
print(f"✅ Static site generated: {OUTPUT_FILE}")
if __name__ == "__main__":
parser = argparse.ArgumentParser(description="Generate a static site from Markdown.")
parser.add_argument("--build", action="store_true", help="Build the static site.")
args = parser.parse_args()
if args.build:
generate_site()

24
.github/pages/ideas.md vendored
View File

@@ -0,0 +1,24 @@
https://mmistakes.github.io/so-simple-theme/
TODO
- heading link markdown anchor style
```
I'm going to paste two links. One is an index of blog posts, one is a specific blog post:
1. Index: https://mmistakes.github.io/so-simple-theme/
2. Specific: https://mmistakes.github.io/so-simple-theme/markup-syntax-highlighting/
We're going to take this and create a single page, with the markdown at the end of this message as the template. Requirements:
1. Simplify the top bar, sticky. Title is 'Hacker Laws', next button is 'Effective Shell [book icon]' then 'Sponsor [coffee icon]' then 'Terminal AI [brain icon]' then 'GitHub [github icon, this item right aligned]'
2. Use bootstrap and bootstrap icons so that we have a CSS starting point eg. for the grid
3. Use the social sharing icons below each 'law'
4. There is no need to link to any content pages - this is a single page
5. Below each law we need a 'back to top' button, choose 3-5 options so that I can pick the one I prefer, think about common patterns used to visually indicate 'go to top'
6. No need for disqus
7. Theme should be soft pastel colors, prefer a paper colored background perhaps very slightly yellow like parchment
8. No logo at the top, but Hacker Laws in slightly larger text with the subtitle
```

72
.github/pages/index.backup.html vendored
View File

@@ -1,72 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hacker Laws</title>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RGJ5TDHWY9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RGJ5TDHWY9');
</script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css">
</head>
<body id="top">
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#top">Hacker Laws</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">Effective Shell</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sponsor</a></li>
<li class="nav-item"><a class="nav-link" href="#">Terminal AI</a></li>
</ul>
</div>
</div>
</nav>
<header class="container">
<h1>Hacker Laws</h1>
<p class="lead">Laws, Theories, Principles and Patterns that developers will find useful.</p>
</header>
<main class="container">
<section id="introduction" class="law-section">
<h2>
Introduction
<a href="#introduction" class="anchor"><i class="bi bi-link-45deg"></i></a>
</h2>
<p>There are lots of laws which people discuss when talking about development...</p>
<blockquote>“Any code of your own that you haven’t looked at for six or more months might as well have been written by someone else.” – Eagleson's Law</blockquote>
<ul>
<li><a href="#">Law of Demeter</a></li>
<li><a href="#">Pareto Principle</a></li>
<li><a href="#">Hofstadter's Law</a></li>
</ul>
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Copy Link"><i class="bi bi-clipboard"></i></a>
</div>
<div class="back-to-top"><a href="#top">↑ Back to Top</a></div>
</section>
</main>
<footer class="container text-center my-4">
<p>&copy; 2025 Hacker Laws</p>
</footer>
</body>
</html>

1095
.github/pages/index.html vendored
View File

File diff suppressed because it is too large Load Diff

88
.github/pages/index.html.jinja vendored
View File

@@ -1,88 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hacker Laws</title>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RGJ5TDHWY9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RGJ5TDHWY9');
</script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css">
</head>
<body id="top">
<nav class="navbar navbar-expand-lg navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#top">Hacker Laws</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="#">Effective Shell</a></li>
<li class="nav-item"><a class="nav-link" href="#">Sponsor</a></li>
<li class="nav-item"><a class="nav-link" href="#">Terminal AI</a></li>
</ul>
</div>
</div>
</nav>
<header class="container">
<h1>Hacker Laws</h1>
<p class="lead">Laws, Theories, Principles and Patterns that developers will find useful.</p>
</header>
<main class="container">
<section id="introduction" class="law-section">
<h2>
Introduction
<a href="#introduction" class="anchor"><i class="bi bi-link-45deg"></i></a>
</h2>
<p>There are lots of laws which people discuss when talking about development...</p>
<blockquote>“Any code of your own that you haven’t looked at for six or more months might as well have been written by someone else.” – Eagleson's Law</blockquote>
<ul>
<li><a href="#">Law of Demeter</a></li>
<li><a href="#">Pareto Principle</a></li>
<li><a href="#">Hofstadter's Law</a></li>
</ul>
<div class="social-sharing">
<a href="#" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="#" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" title="Copy Link"><i class="bi bi-clipboard"></i></a>
</div>
<div class="back-to-top"><a href="#top">↑ Back to Top</a></div>
</section>
{% for law in laws %}
<section id="{{ law.id }}" class="law-section">
<h2>
{{ law.title }}
<a href="#{{ law.id }}" class="anchor"><i class="bi bi-link-45deg"></i></a>
</h2>
{{ law.content | safe }}
<div class="social-sharing">
<a href="https://twitter.com/share?url=#{{ law.id }}" title="Share on Twitter"><i class="bi bi-twitter"></i></a>
<a href="https://facebook.com/share?url=#{{ law.id }}" title="Share on Facebook"><i class="bi bi-facebook"></i></a>
<a href="#" onclick="navigator.clipboard.writeText(window.location.href + '#{{ law.id }}'); alert('Copied!');" title="Copy Link"><i class="bi bi-clipboard"></i></a>
</div>
<div class="back-to-top"><a href="#top">↑ Back to Top</a></div>
</section>
{% endfor %}
</main>
<footer class="container text-center my-4">
<p>&copy; 2025 Hacker Laws</p>
</footer>
</body>
</html>

36
.github/pages/makefile vendored
View File

@@ -1,36 +0,0 @@
SHELL := /bin/bash
TEMPLATE_FILE=index.html.jinja
MARKDOWN_FILE=../../README.md
OUTPUT_FILE=index.html
TEMPLATE_DIR=.
default: help
.PHONY: help
help: # Show help for each of the Makefile recipes.
@grep -E '^[a-zA-Z0-9 -]+:.*#' Makefile | sort | while read -r l; do printf "\033[1;32m$$(echo $$l | cut -f 1 -d':')\033[00m:$$(echo $$l | cut -f 2- -d'#')\n"; done
.PHONY: install
install: # 📦 install dependencies
@echo "📦 Installing dependencies..."
pip install -r requirements.txt
.PHONY: build
build: #🔨 building static site
@echo "🔨 Building static site..."
TEMPLATE_FILE=$(TEMPLATE_FILE) MARKDOWN_FILE=$(MARKDOWN_FILE) OUTPUT_FILE=$(OUTPUT_FILE) TEMPLATE_DIR=$(TEMPLATE_DIR) \
python generate_site.py --build
.PHONY: serve
serve: # 🚀 start local server
@echo "🚀 Starting local server at http://localhost:8000..."
python3 -m http.server 8000
.PHONY: watch
watch: # 👀 Watch for changes...
@echo "👀 Watching for changes..."
watchmedo shell-command --patterns="$(MARKDOWN_FILE);*.py" --command="make build" .
.PHONY: clean
clean: #🧹 Clean up generated files
@echo "🧹 Cleaning up generated files..."
rm -f $(OUTPUT)

3
.github/pages/requirements.txt vendored
View File

@@ -1,3 +0,0 @@
markdown
jinja2
watchdog

67
.github/pages/styles.css vendored
View File

@@ -1,67 +0,0 @@
body {
font-family: 'Inter', sans-serif;
background-color: #fff;
color: #333;
padding-top: 70px;
}
.container {
max-width: 800px;
}
.navbar-custom {
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
}
.navbar-brand, .nav-link {
font-weight: 700;
}
header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem 0;
border-bottom: 1px solid #e5e5e5;
}
h1, h2 {
font-family: 'Libre Baskerville', serif;
}
.law-section {
margin-bottom: 2rem;
padding: 1.5rem;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
position: relative;
}
.law-section h2 {
position: relative;
display: flex;
align-items: center;
}
.law-section h2 a.anchor {
text-decoration: none;
color: #999;
margin-left: 0.5rem;
visibility: hidden;
}
.law-section:hover h2 a.anchor {
visibility: visible;
}
a {
color: #0056b3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.social-sharing a {
margin-right: 0.75rem;
font-size: 1.2rem;
color: #555;
text-decoration: none;
}
.social-sharing a:hover {
color: #000;
}
.back-to-top {
margin-top: 1rem;
}

1095
.github/website/build/index.html vendored
View File

File diff suppressed because it is too large Load Diff

73
.github/website/generate.py vendored
View File

@@ -1,13 +1,14 @@
import argparse
import markdown
import os
import shutil
from jinja2 import Environment, FileSystemLoader
from bs4 import BeautifulSoup
# Read environment variables with defaults
TEMPLATE_FILE = os.getenv("TEMPLATE_FILE", "template.html")
MARKDOWN_FILE = os.getenv("MARKDOWN_FILE", "laws.md")
OUTPUT_FILE = os.getenv("OUTPUT_FILE", "output.html")
TEMPLATE_DIR = os.getenv("TEMPLATE_DIR", ".")
TEMPLATE_DIR = os.getenv("TEMPLATE_DIR", ".") # Directory where template is stored
def load_template():
@@ -27,10 +28,6 @@ def parse_markdown(md_file):
if section.strip():
lines = section.split("\n", 1)
title = lines[0].strip("# ").strip()
# Skip sections which do not need to be processed.
# print(f"found title: {title}")
# if "hacker-laws" in title:
# continue
content = markdown.markdown(lines[1] if len(lines) > 1 else "")
law_id = title.lower().replace(" ", "-")
laws.append({"title": title, "content": content, "id": law_id})
@@ -38,25 +35,73 @@ def parse_markdown(md_file):
return laws
def generate_site():
def extract_static_files(html_content, output_dir):
"""Extract linked CSS, JS, and image files and copy them to the output directory."""
soup = BeautifulSoup(html_content, "html.parser")
files_to_copy = []
# Extract <link> stylesheets
for link in soup.find_all("link", href=True):
href = link["href"]
if not href.startswith(("http", "//")): # Ignore external links
files_to_copy.append(href)
# Extract <script> files
for script in soup.find_all("script", src=True):
src = script["src"]
if not src.startswith(("http", "//")):
files_to_copy.append(src)
# Extract <img> files
for img in soup.find_all("img", src=True):
src = img["src"]
if not src.startswith(("http", "//")):
files_to_copy.append(src)
# Copy files to the output directory
for file_path in files_to_copy:
src_path = os.path.join(TEMPLATE_DIR, file_path)
dest_path = os.path.join(output_dir, file_path)
if os.path.exists(src_path): # Ensure file exists before copying
os.makedirs(os.path.dirname(dest_path), exist_ok=True)
shutil.copy2(src_path, dest_path)
print(f"📂 Copied: {src_path} → {dest_path}")
else:
print(f"⚠️ Warning: Missing file {src_path} (skipping)")
return files_to_copy
def generate_site(output_dir):
"""Generate the static HTML file from Markdown and Jinja2 template."""
print(f"📝 Loading template from: {TEMPLATE_DIR}/{TEMPLATE_FILE}")
print(f"📖 Loading markdown from: {MARKDOWN_FILE}")
print(f"💾 Outputting HTML to: {OUTPUT_FILE}")
print(f"💾 Outputting files to: {output_dir}")
template = load_template()
laws = parse_markdown(MARKDOWN_FILE)
with open(OUTPUT_FILE, "w", encoding="utf-8") as f:
f.write(template.render(laws=laws))
# Ensure output directory exists
os.makedirs(output_dir, exist_ok=True)
print(f"✅ Static site generated: {OUTPUT_FILE}")
# Render HTML
html_output = template.render(laws=laws)
# Save HTML to output directory
output_file = os.path.join(output_dir, "index.html")
with open(output_file, "w", encoding="utf-8") as f:
f.write(html_output)
print(f"✅ Static site generated: {output_file}")
# Copy static files (CSS, JS, images)
extract_static_files(html_output, output_dir)
if __name__ == "__main__":
parser = argparse.ArgumentParser(description="Generate a static site from Markdown.")
parser.add_argument("--build", action="store_true", help="Build the static site.")
parser.add_argument("-o", "--output-dir", default="build", help="Directory to save the generated site.")
args = parser.parse_args()
if args.build:
generate_site()
generate_site(args.output_dir)

2
.github/website/makefile vendored
View File

@@ -19,7 +19,7 @@ install: # 📦 install dependencies
build: #🔨 building static site
@echo "🔨 Building static site..."
TEMPLATE_FILE=$(TEMPLATE_FILE) MARKDOWN_FILE=$(MARKDOWN_FILE) OUTPUT_FILE=$(OUTPUT_FILE) TEMPLATE_DIR=$(TEMPLATE_DIR) \
python generate.py --build
python generate.py
.PHONY: serve
serve: # 🚀 start local server