Auto-publish on Wed 6 Aug 22:49:29 BST 2025
This commit is contained in:
@@ -3,214 +3,53 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<!-- 2025-08-06 Wed 15:20 -->
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>About Me</title>
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<style type="text/css">
|
||||
#content { max-width: 60em; margin: auto; }
|
||||
.title { text-align: center;
|
||||
margin-bottom: .2em; }
|
||||
.subtitle { text-align: center;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
margin-top:0; }
|
||||
.todo { font-family: monospace; color: red; }
|
||||
.done { font-family: monospace; color: green; }
|
||||
.priority { font-family: monospace; color: orange; }
|
||||
.tag { background-color: #eee; font-family: monospace;
|
||||
padding: 2px; font-size: 80%; font-weight: normal; }
|
||||
.timestamp { color: #bebebe; }
|
||||
.timestamp-kwd { color: #5f9ea0; }
|
||||
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
|
||||
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
|
||||
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
|
||||
.underline { text-decoration: underline; }
|
||||
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
|
||||
p.verse { margin-left: 3%; }
|
||||
pre {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 8pt;
|
||||
font-family: monospace;
|
||||
overflow: auto;
|
||||
margin: 1.2em;
|
||||
}
|
||||
pre.src {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
pre.src:before {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 12px;
|
||||
padding: 3px;
|
||||
color: #555;
|
||||
background-color: #f2f2f299;
|
||||
}
|
||||
pre.src:hover:before { display: inline; margin-top: 14px;}
|
||||
/* Languages per Org manual */
|
||||
pre.src-asymptote:before { content: 'Asymptote'; }
|
||||
pre.src-awk:before { content: 'Awk'; }
|
||||
pre.src-authinfo::before { content: 'Authinfo'; }
|
||||
pre.src-C:before { content: 'C'; }
|
||||
/* pre.src-C++ doesn't work in CSS */
|
||||
pre.src-clojure:before { content: 'Clojure'; }
|
||||
pre.src-css:before { content: 'CSS'; }
|
||||
pre.src-D:before { content: 'D'; }
|
||||
pre.src-ditaa:before { content: 'ditaa'; }
|
||||
pre.src-dot:before { content: 'Graphviz'; }
|
||||
pre.src-calc:before { content: 'Emacs Calc'; }
|
||||
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
|
||||
pre.src-fortran:before { content: 'Fortran'; }
|
||||
pre.src-gnuplot:before { content: 'gnuplot'; }
|
||||
pre.src-haskell:before { content: 'Haskell'; }
|
||||
pre.src-hledger:before { content: 'hledger'; }
|
||||
pre.src-java:before { content: 'Java'; }
|
||||
pre.src-js:before { content: 'Javascript'; }
|
||||
pre.src-latex:before { content: 'LaTeX'; }
|
||||
pre.src-ledger:before { content: 'Ledger'; }
|
||||
pre.src-lisp:before { content: 'Lisp'; }
|
||||
pre.src-lilypond:before { content: 'Lilypond'; }
|
||||
pre.src-lua:before { content: 'Lua'; }
|
||||
pre.src-matlab:before { content: 'MATLAB'; }
|
||||
pre.src-mscgen:before { content: 'Mscgen'; }
|
||||
pre.src-ocaml:before { content: 'Objective Caml'; }
|
||||
pre.src-octave:before { content: 'Octave'; }
|
||||
pre.src-org:before { content: 'Org mode'; }
|
||||
pre.src-oz:before { content: 'OZ'; }
|
||||
pre.src-plantuml:before { content: 'Plantuml'; }
|
||||
pre.src-processing:before { content: 'Processing.js'; }
|
||||
pre.src-python:before { content: 'Python'; }
|
||||
pre.src-R:before { content: 'R'; }
|
||||
pre.src-ruby:before { content: 'Ruby'; }
|
||||
pre.src-sass:before { content: 'Sass'; }
|
||||
pre.src-scheme:before { content: 'Scheme'; }
|
||||
pre.src-screen:before { content: 'Gnu Screen'; }
|
||||
pre.src-sed:before { content: 'Sed'; }
|
||||
pre.src-sh:before { content: 'shell'; }
|
||||
pre.src-sql:before { content: 'SQL'; }
|
||||
pre.src-sqlite:before { content: 'SQLite'; }
|
||||
/* additional languages in org.el's org-babel-load-languages alist */
|
||||
pre.src-forth:before { content: 'Forth'; }
|
||||
pre.src-io:before { content: 'IO'; }
|
||||
pre.src-J:before { content: 'J'; }
|
||||
pre.src-makefile:before { content: 'Makefile'; }
|
||||
pre.src-maxima:before { content: 'Maxima'; }
|
||||
pre.src-perl:before { content: 'Perl'; }
|
||||
pre.src-picolisp:before { content: 'Pico Lisp'; }
|
||||
pre.src-scala:before { content: 'Scala'; }
|
||||
pre.src-shell:before { content: 'Shell Script'; }
|
||||
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
|
||||
/* additional language identifiers per "defun org-babel-execute"
|
||||
in ob-*.el */
|
||||
pre.src-cpp:before { content: 'C++'; }
|
||||
pre.src-abc:before { content: 'ABC'; }
|
||||
pre.src-coq:before { content: 'Coq'; }
|
||||
pre.src-groovy:before { content: 'Groovy'; }
|
||||
/* additional language identifiers from org-babel-shell-names in
|
||||
ob-shell.el: ob-shell is the only babel language using a lambda to put
|
||||
the execution function name together. */
|
||||
pre.src-bash:before { content: 'bash'; }
|
||||
pre.src-csh:before { content: 'csh'; }
|
||||
pre.src-ash:before { content: 'ash'; }
|
||||
pre.src-dash:before { content: 'dash'; }
|
||||
pre.src-ksh:before { content: 'ksh'; }
|
||||
pre.src-mksh:before { content: 'mksh'; }
|
||||
pre.src-posh:before { content: 'posh'; }
|
||||
/* Additional Emacs modes also supported by the LaTeX listings package */
|
||||
pre.src-ada:before { content: 'Ada'; }
|
||||
pre.src-asm:before { content: 'Assembler'; }
|
||||
pre.src-caml:before { content: 'Caml'; }
|
||||
pre.src-delphi:before { content: 'Delphi'; }
|
||||
pre.src-html:before { content: 'HTML'; }
|
||||
pre.src-idl:before { content: 'IDL'; }
|
||||
pre.src-mercury:before { content: 'Mercury'; }
|
||||
pre.src-metapost:before { content: 'MetaPost'; }
|
||||
pre.src-modula-2:before { content: 'Modula-2'; }
|
||||
pre.src-pascal:before { content: 'Pascal'; }
|
||||
pre.src-ps:before { content: 'PostScript'; }
|
||||
pre.src-prolog:before { content: 'Prolog'; }
|
||||
pre.src-simula:before { content: 'Simula'; }
|
||||
pre.src-tcl:before { content: 'tcl'; }
|
||||
pre.src-tex:before { content: 'TeX'; }
|
||||
pre.src-plain-tex:before { content: 'Plain TeX'; }
|
||||
pre.src-verilog:before { content: 'Verilog'; }
|
||||
pre.src-vhdl:before { content: 'VHDL'; }
|
||||
pre.src-xml:before { content: 'XML'; }
|
||||
pre.src-nxml:before { content: 'XML'; }
|
||||
/* add a generic configuration mode; LaTeX export needs an additional
|
||||
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
|
||||
pre.src-conf:before { content: 'Configuration File'; }
|
||||
|
||||
table { border-collapse:collapse; }
|
||||
caption.t-above { caption-side: top; }
|
||||
caption.t-bottom { caption-side: bottom; }
|
||||
td, th { vertical-align:top; }
|
||||
th.org-right { text-align: center; }
|
||||
th.org-left { text-align: center; }
|
||||
th.org-center { text-align: center; }
|
||||
td.org-right { text-align: right; }
|
||||
td.org-left { text-align: left; }
|
||||
td.org-center { text-align: center; }
|
||||
dt { font-weight: bold; }
|
||||
.footpara { display: inline; }
|
||||
.footdef { margin-bottom: 1em; }
|
||||
.figure { padding: 1em; }
|
||||
.figure p { text-align: center; }
|
||||
.equation-container {
|
||||
display: table;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.equation {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.equation-label {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.inlinetask {
|
||||
padding: 10px;
|
||||
border: 2px solid gray;
|
||||
margin: 10px;
|
||||
background: #ffffcc;
|
||||
}
|
||||
#org-div-home-and-up
|
||||
{ text-align: right; font-size: 70%; white-space: nowrap; }
|
||||
textarea { overflow-x: auto; }
|
||||
.linenr { font-size: smaller }
|
||||
.code-highlighted { background-color: #ffff00; }
|
||||
.org-info-js_info-navigation { border-style: none; }
|
||||
#org-info-js_console-label
|
||||
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
|
||||
.org-info-js_search-highlight
|
||||
{ background-color: #ffff00; color: #000000; font-weight: bold; }
|
||||
.org-svg { }
|
||||
</style>
|
||||
<script src="script.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="theme-toggle.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<nav>
|
||||
<a href="/">Home | </a>
|
||||
<a href="/posts.html">Posts | </a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</nav>
|
||||
<div id="updated">Updated: 2025-08-06 Wed 19:16</div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<h1 class="title">About Me</h1>
|
||||
<div id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org204c1a9">1. About Me 👋</a></li>
|
||||
<li><a href="#org4767b62">2. Interests</a></li>
|
||||
<li><a href="#org660e33a">3. Back to Home</a></li>
|
||||
<li><a href="#org888323b">About Me 👋</a></li>
|
||||
<li><a href="#orgcae7033">Interests</a></li>
|
||||
<li><a href="#org0d97d11">Interests</a></li>
|
||||
<li><a href="#org8a60793">Interests</a></li>
|
||||
<li><a href="#orgfbd34d0">Interests</a></li>
|
||||
<li><a href="#org4268459">Interests</a></li>
|
||||
<li><a href="#orgc1d1f07">Interests</a></li>
|
||||
<li><a href="#org052f0b4">Interests</a></li>
|
||||
<li><a href="#org03fcf1c">Interests</a></li>
|
||||
<li><a href="#orgf6ad50c">Interests</a></li>
|
||||
<li><a href="#org8451fbb">Interests</a></li>
|
||||
<li><a href="#org5717ec5">Interests</a></li>
|
||||
<li><a href="#orgd29f821">Interests</a></li>
|
||||
<li><a href="#org34f3bda">Interests</a></li>
|
||||
<li><a href="#org1bc0895">Interests</a></li>
|
||||
<li><a href="#org59001d9">Interests</a></li>
|
||||
<li><a href="#org05ff6bf">Interests</a></li>
|
||||
<li><a href="#orge49945e">Back to Home</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org204c1a9" class="outline-2">
|
||||
<h2 id="org204c1a9"><span class="section-number-2">1.</span> About Me 👋</h2>
|
||||
<div class="outline-text-2" id="text-1">
|
||||
<div id="outline-container-org888323b" class="outline-2">
|
||||
<h2 id="org888323b">About Me 👋</h2>
|
||||
<div class="outline-text-2" id="text-org888323b">
|
||||
<p>
|
||||
I'm building a personal site using <b>Emacs</b>, <b>Org-mode</b>, and <b>Cloudflare Pages</b>.
|
||||
</p>
|
||||
@@ -220,9 +59,9 @@ I'm building a personal site using <b>Emacs</b>, <b>Org-mode</b>, and <b>Cloudfl
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org4767b62" class="outline-2">
|
||||
<h2 id="org4767b62"><span class="section-number-2">2.</span> Interests</h2>
|
||||
<div class="outline-text-2" id="text-2">
|
||||
<div id="outline-container-orgcae7033" class="outline-2">
|
||||
<h2 id="orgcae7033">Interests</h2>
|
||||
<div class="outline-text-2" id="text-orgcae7033">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
@@ -231,13 +70,184 @@ I'm building a personal site using <b>Emacs</b>, <b>Org-mode</b>, and <b>Cloudfl
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org660e33a" class="outline-2">
|
||||
<h2 id="org660e33a"><span class="section-number-2">3.</span> Back to <a href="index.html">Home</a></h2>
|
||||
<div id="outline-container-org0d97d11" class="outline-2">
|
||||
<h2 id="org0d97d11">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org0d97d11">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org8a60793" class="outline-2">
|
||||
<h2 id="org8a60793">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org8a60793">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgfbd34d0" class="outline-2">
|
||||
<h2 id="orgfbd34d0">Interests</h2>
|
||||
<div class="outline-text-2" id="text-orgfbd34d0">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org4268459" class="outline-2">
|
||||
<h2 id="org4268459">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org4268459">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgc1d1f07" class="outline-2">
|
||||
<h2 id="orgc1d1f07">Interests</h2>
|
||||
<div class="outline-text-2" id="text-orgc1d1f07">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org052f0b4" class="outline-2">
|
||||
<h2 id="org052f0b4">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org052f0b4">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org03fcf1c" class="outline-2">
|
||||
<h2 id="org03fcf1c">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org03fcf1c">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgf6ad50c" class="outline-2">
|
||||
<h2 id="orgf6ad50c">Interests</h2>
|
||||
<div class="outline-text-2" id="text-orgf6ad50c">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org8451fbb" class="outline-2">
|
||||
<h2 id="org8451fbb">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org8451fbb">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org5717ec5" class="outline-2">
|
||||
<h2 id="org5717ec5">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org5717ec5">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgd29f821" class="outline-2">
|
||||
<h2 id="orgd29f821">Interests</h2>
|
||||
<div class="outline-text-2" id="text-orgd29f821">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org34f3bda" class="outline-2">
|
||||
<h2 id="org34f3bda">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org34f3bda">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org1bc0895" class="outline-2">
|
||||
<h2 id="org1bc0895">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org1bc0895">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org59001d9" class="outline-2">
|
||||
<h2 id="org59001d9">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org59001d9">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org05ff6bf" class="outline-2">
|
||||
<h2 id="org05ff6bf">Interests</h2>
|
||||
<div class="outline-text-2" id="text-org05ff6bf">
|
||||
<ul class="org-ul">
|
||||
<li>Linux</li>
|
||||
<li>Open source</li>
|
||||
<li>Org mode</li>
|
||||
<li>Static sites</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orge49945e" class="outline-2">
|
||||
<h2 id="orge49945e">Back to <a href="index.html">Home</a></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<p class="date">Created: 2025-08-06 Wed 15:20</p>
|
||||
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
|
||||
<footer>
|
||||
<div class="copyright-container">
|
||||
<div class="copyright">
|
||||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||||
<div class="generated">
|
||||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
output/assets/org-roam-ui-graph.png
Normal file
BIN
output/assets/org-roam-ui-graph.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
63
output/contact.html
Normal file
63
output/contact.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Contact</title>
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<script src="script.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<nav>
|
||||
<a href="/">Home | </a>
|
||||
<a href="/posts.html">Posts | </a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</nav>
|
||||
<div id="updated">Updated: 2025-08-06 Wed 20:58</div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<h1 class="title">Contact</h1>
|
||||
<div id="outline-container-org31ae7b1" class="outline-2">
|
||||
<h2 id="org31ae7b1">Contact Using the Following:</h2>
|
||||
<div class="outline-text-2" id="text-org31ae7b1">
|
||||
<p>
|
||||
> LinkedIn: <b><a href="https://www.linkedin.com/in/zaine-ul-abideen-qayyum-801a53247/">LinkedIn</a></b>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
> GitHub: <b><a href="https://github.com/zainezq">Github</a></b>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
> Email:
|
||||
</p>
|
||||
|
||||
<ul class="org-ul">
|
||||
<li><b>zaineulabideen (at) outlook (dot) com</b></li>
|
||||
|
||||
<li><a href="mailto:zaineulabideen@outlook.com">zaineulabideen@outlook.com</a></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Thanks for visiting!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<footer>
|
||||
<div class="copyright-container">
|
||||
<div class="copyright">
|
||||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||||
<div class="generated">
|
||||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,216 +3,30 @@
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<!-- 2025-08-06 Wed 15:20 -->
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Welcome to My Org Website</title>
|
||||
<title>Zaine Qayyum</title>
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<style type="text/css">
|
||||
#content { max-width: 60em; margin: auto; }
|
||||
.title { text-align: center;
|
||||
margin-bottom: .2em; }
|
||||
.subtitle { text-align: center;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
margin-top:0; }
|
||||
.todo { font-family: monospace; color: red; }
|
||||
.done { font-family: monospace; color: green; }
|
||||
.priority { font-family: monospace; color: orange; }
|
||||
.tag { background-color: #eee; font-family: monospace;
|
||||
padding: 2px; font-size: 80%; font-weight: normal; }
|
||||
.timestamp { color: #bebebe; }
|
||||
.timestamp-kwd { color: #5f9ea0; }
|
||||
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
|
||||
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
|
||||
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
|
||||
.underline { text-decoration: underline; }
|
||||
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
|
||||
p.verse { margin-left: 3%; }
|
||||
pre {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 8pt;
|
||||
font-family: monospace;
|
||||
overflow: auto;
|
||||
margin: 1.2em;
|
||||
}
|
||||
pre.src {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
pre.src:before {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 12px;
|
||||
padding: 3px;
|
||||
color: #555;
|
||||
background-color: #f2f2f299;
|
||||
}
|
||||
pre.src:hover:before { display: inline; margin-top: 14px;}
|
||||
/* Languages per Org manual */
|
||||
pre.src-asymptote:before { content: 'Asymptote'; }
|
||||
pre.src-awk:before { content: 'Awk'; }
|
||||
pre.src-authinfo::before { content: 'Authinfo'; }
|
||||
pre.src-C:before { content: 'C'; }
|
||||
/* pre.src-C++ doesn't work in CSS */
|
||||
pre.src-clojure:before { content: 'Clojure'; }
|
||||
pre.src-css:before { content: 'CSS'; }
|
||||
pre.src-D:before { content: 'D'; }
|
||||
pre.src-ditaa:before { content: 'ditaa'; }
|
||||
pre.src-dot:before { content: 'Graphviz'; }
|
||||
pre.src-calc:before { content: 'Emacs Calc'; }
|
||||
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
|
||||
pre.src-fortran:before { content: 'Fortran'; }
|
||||
pre.src-gnuplot:before { content: 'gnuplot'; }
|
||||
pre.src-haskell:before { content: 'Haskell'; }
|
||||
pre.src-hledger:before { content: 'hledger'; }
|
||||
pre.src-java:before { content: 'Java'; }
|
||||
pre.src-js:before { content: 'Javascript'; }
|
||||
pre.src-latex:before { content: 'LaTeX'; }
|
||||
pre.src-ledger:before { content: 'Ledger'; }
|
||||
pre.src-lisp:before { content: 'Lisp'; }
|
||||
pre.src-lilypond:before { content: 'Lilypond'; }
|
||||
pre.src-lua:before { content: 'Lua'; }
|
||||
pre.src-matlab:before { content: 'MATLAB'; }
|
||||
pre.src-mscgen:before { content: 'Mscgen'; }
|
||||
pre.src-ocaml:before { content: 'Objective Caml'; }
|
||||
pre.src-octave:before { content: 'Octave'; }
|
||||
pre.src-org:before { content: 'Org mode'; }
|
||||
pre.src-oz:before { content: 'OZ'; }
|
||||
pre.src-plantuml:before { content: 'Plantuml'; }
|
||||
pre.src-processing:before { content: 'Processing.js'; }
|
||||
pre.src-python:before { content: 'Python'; }
|
||||
pre.src-R:before { content: 'R'; }
|
||||
pre.src-ruby:before { content: 'Ruby'; }
|
||||
pre.src-sass:before { content: 'Sass'; }
|
||||
pre.src-scheme:before { content: 'Scheme'; }
|
||||
pre.src-screen:before { content: 'Gnu Screen'; }
|
||||
pre.src-sed:before { content: 'Sed'; }
|
||||
pre.src-sh:before { content: 'shell'; }
|
||||
pre.src-sql:before { content: 'SQL'; }
|
||||
pre.src-sqlite:before { content: 'SQLite'; }
|
||||
/* additional languages in org.el's org-babel-load-languages alist */
|
||||
pre.src-forth:before { content: 'Forth'; }
|
||||
pre.src-io:before { content: 'IO'; }
|
||||
pre.src-J:before { content: 'J'; }
|
||||
pre.src-makefile:before { content: 'Makefile'; }
|
||||
pre.src-maxima:before { content: 'Maxima'; }
|
||||
pre.src-perl:before { content: 'Perl'; }
|
||||
pre.src-picolisp:before { content: 'Pico Lisp'; }
|
||||
pre.src-scala:before { content: 'Scala'; }
|
||||
pre.src-shell:before { content: 'Shell Script'; }
|
||||
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
|
||||
/* additional language identifiers per "defun org-babel-execute"
|
||||
in ob-*.el */
|
||||
pre.src-cpp:before { content: 'C++'; }
|
||||
pre.src-abc:before { content: 'ABC'; }
|
||||
pre.src-coq:before { content: 'Coq'; }
|
||||
pre.src-groovy:before { content: 'Groovy'; }
|
||||
/* additional language identifiers from org-babel-shell-names in
|
||||
ob-shell.el: ob-shell is the only babel language using a lambda to put
|
||||
the execution function name together. */
|
||||
pre.src-bash:before { content: 'bash'; }
|
||||
pre.src-csh:before { content: 'csh'; }
|
||||
pre.src-ash:before { content: 'ash'; }
|
||||
pre.src-dash:before { content: 'dash'; }
|
||||
pre.src-ksh:before { content: 'ksh'; }
|
||||
pre.src-mksh:before { content: 'mksh'; }
|
||||
pre.src-posh:before { content: 'posh'; }
|
||||
/* Additional Emacs modes also supported by the LaTeX listings package */
|
||||
pre.src-ada:before { content: 'Ada'; }
|
||||
pre.src-asm:before { content: 'Assembler'; }
|
||||
pre.src-caml:before { content: 'Caml'; }
|
||||
pre.src-delphi:before { content: 'Delphi'; }
|
||||
pre.src-html:before { content: 'HTML'; }
|
||||
pre.src-idl:before { content: 'IDL'; }
|
||||
pre.src-mercury:before { content: 'Mercury'; }
|
||||
pre.src-metapost:before { content: 'MetaPost'; }
|
||||
pre.src-modula-2:before { content: 'Modula-2'; }
|
||||
pre.src-pascal:before { content: 'Pascal'; }
|
||||
pre.src-ps:before { content: 'PostScript'; }
|
||||
pre.src-prolog:before { content: 'Prolog'; }
|
||||
pre.src-simula:before { content: 'Simula'; }
|
||||
pre.src-tcl:before { content: 'tcl'; }
|
||||
pre.src-tex:before { content: 'TeX'; }
|
||||
pre.src-plain-tex:before { content: 'Plain TeX'; }
|
||||
pre.src-verilog:before { content: 'Verilog'; }
|
||||
pre.src-vhdl:before { content: 'VHDL'; }
|
||||
pre.src-xml:before { content: 'XML'; }
|
||||
pre.src-nxml:before { content: 'XML'; }
|
||||
/* add a generic configuration mode; LaTeX export needs an additional
|
||||
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
|
||||
pre.src-conf:before { content: 'Configuration File'; }
|
||||
|
||||
table { border-collapse:collapse; }
|
||||
caption.t-above { caption-side: top; }
|
||||
caption.t-bottom { caption-side: bottom; }
|
||||
td, th { vertical-align:top; }
|
||||
th.org-right { text-align: center; }
|
||||
th.org-left { text-align: center; }
|
||||
th.org-center { text-align: center; }
|
||||
td.org-right { text-align: right; }
|
||||
td.org-left { text-align: left; }
|
||||
td.org-center { text-align: center; }
|
||||
dt { font-weight: bold; }
|
||||
.footpara { display: inline; }
|
||||
.footdef { margin-bottom: 1em; }
|
||||
.figure { padding: 1em; }
|
||||
.figure p { text-align: center; }
|
||||
.equation-container {
|
||||
display: table;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.equation {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.equation-label {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.inlinetask {
|
||||
padding: 10px;
|
||||
border: 2px solid gray;
|
||||
margin: 10px;
|
||||
background: #ffffcc;
|
||||
}
|
||||
#org-div-home-and-up
|
||||
{ text-align: right; font-size: 70%; white-space: nowrap; }
|
||||
textarea { overflow-x: auto; }
|
||||
.linenr { font-size: smaller }
|
||||
.code-highlighted { background-color: #ffff00; }
|
||||
.org-info-js_info-navigation { border-style: none; }
|
||||
#org-info-js_console-label
|
||||
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
|
||||
.org-info-js_search-highlight
|
||||
{ background-color: #ffff00; color: #000000; font-weight: bold; }
|
||||
.org-svg { }
|
||||
</style>
|
||||
<script src="script.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="theme-toggle.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<nav>
|
||||
<a href="/">Home | </a>
|
||||
<a href="/posts.html">Posts | </a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</nav>
|
||||
<div id="updated">Updated: 2025-08-06 Wed 22:37</div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<h1 class="title">Welcome to My Org Website</h1>
|
||||
<div id="table-of-contents" role="doc-toc">
|
||||
<h2>Table of Contents</h2>
|
||||
<div id="text-table-of-contents" role="doc-toc">
|
||||
<ul>
|
||||
<li><a href="#org7c2a7d1">1. Hello from Org Mode 🌱</a></li>
|
||||
<li><a href="#org59c1b41">2. Blog Posts</a></li>
|
||||
<li><a href="#org00055c8">3. Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org7c2a7d1" class="outline-2">
|
||||
<h2 id="org7c2a7d1"><span class="section-number-2">1.</span> Hello from Org Mode 🌱</h2>
|
||||
<div class="outline-text-2" id="text-1">
|
||||
<h1 class="title">Zaine Qayyum</h1>
|
||||
<div id="outline-container-org9a4027d" class="outline-2">
|
||||
<h2 id="org9a4027d">Welcome! 🌱</h2>
|
||||
<div class="outline-text-2" id="text-org9a4027d">
|
||||
<p>
|
||||
This is a simple homepage built with Emacs Org-mode and published using <code>org-publish</code>.
|
||||
This is a website built using Emacs Org-mode and published using <code>org-publish</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
@@ -221,33 +35,121 @@ Feel free to explore:
|
||||
|
||||
<ul class="org-ul">
|
||||
<li><a href="about.html">About Page</a></li>
|
||||
<li><a href="posts.html">Posts page</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org59c1b41" class="outline-2">
|
||||
<h2 id="org59c1b41"><span class="section-number-2">2.</span> Blog Posts</h2>
|
||||
<div class="outline-text-2" id="text-2">
|
||||
<div id="outline-container-orgda3c5e5" class="outline-2">
|
||||
<h2 id="orgda3c5e5">How to publish web pages using <code>org-publish</code></h2>
|
||||
<div class="outline-text-2" id="text-orgda3c5e5">
|
||||
<p>
|
||||
Here are some placeholder posts:
|
||||
This website is heavily inspired by some people who have decided to use <code>org-publish</code> as a way to convert <code>org</code> files into <code>html</code>. I came across a few that took the plunge and decided to migrate from platforms like Wordpress and instead opted for a more transparent, text-based workflow.
|
||||
</p>
|
||||
<ol class="org-ol">
|
||||
<li><a href="https://orgmode.org">Org Mode Official Site</a></li>
|
||||
<li><a href="about.html">Learn more about me</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org00055c8" class="outline-2">
|
||||
<h2 id="org00055c8"><span class="section-number-2">3.</span> Contact</h2>
|
||||
<div class="outline-text-2" id="text-3">
|
||||
|
||||
<p>
|
||||
Feel free to reach out on GitHub: <a href="https://github.com/yourusername">https://github.com/yourusername</a>
|
||||
There is a <a href="https://en.wikipedia.org/wiki/Unix_philosophy">Unix philosophy</a> that emphasises building simple and compact code that can be easily maintainable, and following this approach (do one thing well) aligns with this philosophy.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
So how does one go about publishing web pages through Emacs's <code>org-publish</code>? The answer is quite simple. You probably will need to have some familiarity with <code>elisp</code> although it's not a must.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The first thing we will want to do is edit our <code>init.el</code> file, which is the <b>initialization</b> file. In this file we want to add the following:
|
||||
</p>
|
||||
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-emacs-lisp">
|
||||
(<span style="font-weight: bold;">setq</span> org-publish-project-alist
|
||||
'((<span style="font-style: italic;">"org-notes"</span>
|
||||
<span style="font-weight: bold;">:base-directory</span> <span style="font-style: italic;">"~/web"</span>
|
||||
<span style="font-weight: bold;">:base-extension</span> <span style="font-style: italic;">"org"</span>
|
||||
<span style="font-weight: bold;">:publishing-directory</span> <span style="font-style: italic;">"~/web"</span>
|
||||
<span style="font-weight: bold;">:recursive</span> t
|
||||
<span style="font-weight: bold;">:publishing-function</span> org-html-publish-to-html
|
||||
<span style="font-weight: bold;">:with-author</span> nil
|
||||
<span style="font-weight: bold;">:with-creator</span> nil
|
||||
<span style="font-weight: bold;">:html-validation-link</span> nil
|
||||
<span style="font-weight: bold;">:with-toc</span> t
|
||||
<span style="font-weight: bold;">:section-numbers</span> t
|
||||
<span style="font-weight: bold;">:html-head</span> <span style="font-style: italic;">"<link rel=\"stylesheet\" href=\"style.css\" />"</span>
|
||||
)
|
||||
(<span style="font-style: italic;">"org-static"</span>
|
||||
<span style="font-weight: bold;">:base-directory</span> <span style="font-style: italic;">"~/web"</span>
|
||||
<span style="font-weight: bold;">:base-extension</span> <span style="font-style: italic;">"css</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">js</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">png</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">jpg</span><span style="font-weight: bold; font-style: italic;">\\</span><span style="font-weight: bold; font-style: italic;">|</span><span style="font-style: italic;">gif"</span>
|
||||
<span style="font-weight: bold;">:publishing-directory</span> <span style="font-style: italic;">"~/web/output"</span>
|
||||
<span style="font-weight: bold;">:recursive</span> t
|
||||
<span style="font-weight: bold;">:publishing-function</span> org-publish-attachment)
|
||||
(<span style="font-style: italic;">"website"</span> <span style="font-weight: bold;">:components</span> (<span style="font-style: italic;">"org-notes"</span> <span style="font-style: italic;">"org-static"</span>))))
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
What this snippet of code is doing is it is telling <code>org-publish</code> what <b><b>configurations</b></b> we want to use when we end up running the publish command. Under <code>~/web</code> is where we want to include our files. Let us take a simple example and create an <code>index.org</code> file:
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-emacs-lisp">
|
||||
#+TITLE: Website Name
|
||||
#+OPTIONS: toc:nil num:nil
|
||||
#+HTML_HEAD: <link rel=<span style="font-style: italic;">"stylesheet"</span> href=<span style="font-style: italic;">"style.css"</span>>
|
||||
|
||||
* Welcome!
|
||||
|
||||
This is a simple website
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
There are some metadata at the very top as we can see, these help us customise each page the way we want to. Here I disabled the Table of Contents and section numbers just for this file. We can also create a simple <code>styles.css</code> file in the same directory.
|
||||
After doing this, we can run the command:
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-emacs-lisp">
|
||||
M-x org-publish RET website
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
This will generate a html file inside the <code>~/web/output/</code> directory, and we can serve this file using any static site generation tools; I recommend python due to it's simplicity:
|
||||
</p>
|
||||
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-bash">
|
||||
<span style="font-weight: bold;">cd</span> ~/web/output
|
||||
python3 -m http.server 8000
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
And there we go! The files are now being hosted on <code>http://localhost:8000/</code> and we have a fully functioning workflow for converting org files into a static website.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-org202990f" class="outline-2">
|
||||
<h2 id="org202990f">Contact</h2>
|
||||
<div class="outline-text-2" id="text-org202990f">
|
||||
<p>
|
||||
Feel free to reach out on GitHub: <a href="https://github.com/zainezq">https://github.com/zainezq</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<p class="date">Created: 2025-08-06 Wed 15:20</p>
|
||||
<p class="validation"><a href="https://validator.w3.org/check?uri=referer">Validate</a></p>
|
||||
<footer>
|
||||
<div class="copyright-container">
|
||||
<div class="copyright">
|
||||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||||
<div class="generated">
|
||||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--fg: #000000;
|
||||
--link: #1a0dab;
|
||||
--heading: #004c99;
|
||||
--code-bg: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--bg: #121212;
|
||||
--fg: #e0e0e0;
|
||||
--link: #8ab4f8;
|
||||
--heading: #7baaf7;
|
||||
--code-bg: #1e1e1e;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
max-width: 700px;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
line-height: 1.6;
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background: var(--code-bg);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Toggle button */
|
||||
#theme-toggle {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 0.4em 0.8em;
|
||||
background: var(--code-bg);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--fg: #000000;
|
||||
--link: #1a0dab;
|
||||
--heading: #004c99;
|
||||
--code-bg: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--bg: #121212;
|
||||
--fg: #e0e0e0;
|
||||
--link: #8ab4f8;
|
||||
--heading: #7baaf7;
|
||||
--code-bg: #1e1e1e;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
max-width: 700px;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
line-height: 1.6;
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background: var(--code-bg);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Toggle button */
|
||||
#theme-toggle {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 0.4em 0.8em;
|
||||
background: var(--code-bg);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
function setTheme(mode) {
|
||||
if (mode === 'dark') {
|
||||
document.body.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const current = document.body.classList.contains('dark') ? 'dark' : 'light';
|
||||
setTheme(current === 'dark' ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const saved = localStorage.getItem('theme');
|
||||
|
||||
// Auto-detect system preference if no saved preference
|
||||
if (!saved) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
setTheme('dark');
|
||||
}
|
||||
} else if (saved === 'dark') {
|
||||
setTheme('dark');
|
||||
}
|
||||
|
||||
// Add the toggle button
|
||||
const button = document.createElement('button');
|
||||
button.id = 'theme-toggle';
|
||||
button.innerText = 'Toggle Theme';
|
||||
button.onclick = toggleTheme;
|
||||
document.body.appendChild(button);
|
||||
});
|
||||
55
output/posts.html
Normal file
55
output/posts.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Posts</title>
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<script src="script.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<nav>
|
||||
<a href="/">Home | </a>
|
||||
<a href="/posts.html">Posts | </a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</nav>
|
||||
<div id="updated">Updated: 2025-08-06 Wed 21:03</div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<h1 class="title">Posts</h1>
|
||||
<div id="outline-container-org8d2187a" class="outline-2">
|
||||
<h2 id="org8d2187a">Links</h2>
|
||||
<div class="outline-text-2" id="text-org8d2187a">
|
||||
</div>
|
||||
<div id="outline-container-orgb2587e0" class="outline-4">
|
||||
<h4 id="orgb2587e0"><a href="posts/posts-intro.html">Posts Introduction</a>   <span class="tag"><span class="intro">intro</span></span></h4>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="outline-container-org87b751f" class="outline-4">
|
||||
<h4 id="org87b751f"><a href="posts/zettelkasten.html">Zettelkasten Method</a>   <span class="tag"><span class="education">education</span></span></h4>
|
||||
<div class="outline-text-4" id="text-org87b751f">
|
||||
<p>
|
||||
<span class="timestamp-wrapper"><span class="timestamp"><2025-08-06 Wed></span></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<footer>
|
||||
<div class="copyright-container">
|
||||
<div class="copyright">
|
||||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||||
<div class="generated">
|
||||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
output/posts/post-lists.html
Normal file
41
output/posts/post-lists.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<!-- 2025-08-06 Wed 22:49 -->
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Sitemap for project org-posts</title>
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css" />
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<nav>
|
||||
<a href="/">Home | </a>
|
||||
<a href="/posts.html">Posts | </a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</nav>
|
||||
<div id="updated">Updated: 2025-08-06 Wed 22:49</div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<h1 class="title">Sitemap for project org-posts</h1>
|
||||
<ul class="org-ul">
|
||||
<li><a href="posts-intro.html">Posts Introduction</a></li>
|
||||
<li><a href="zettelkasten.html">Zettelkasten Method</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<footer>
|
||||
<div class="copyright-container">
|
||||
<div class="copyright">
|
||||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||||
<div class="generated">
|
||||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
82
output/posts/posts-intro.html
Normal file
82
output/posts/posts-intro.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<!-- 2025-08-06 Wed 22:49 -->
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Posts Introduction</title>
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<script src="script.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<nav>
|
||||
<a href="/">Home | </a>
|
||||
<a href="/posts.html">Posts | </a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</nav>
|
||||
<div id="updated">Updated: 2025-08-06 Wed 21:11</div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<h1 class="title">Posts Introduction</h1>
|
||||
<div id="outline-container-orgb040c14" class="outline-2">
|
||||
<h2 id="orgb040c14">Introduction</h2>
|
||||
<div class="outline-text-2" id="text-orgb040c14">
|
||||
<p>
|
||||
In this section you will find posts related to both technical and non-technical topics. As Einstein said: “If you can’t explain it simply you don’t understand it well enough”, thus the goal with these <code>posts</code> is to develop the skill of being able to deliver habitual high quality explanations as well as reinforcing the topic learnt.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Generally, for teachers, this is done by taking the time to develop their own capacity to explain key concepts simply. In some institutions, departmental CPD is well spent rehearsing ways to improve the ability to explain the more difficult material in a more simpler way.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
When we study a topic, we get a grasp of the thing we are trying to learn, and then later on one may realise that they didn't <i>actually</i> learn it. The context of this differs for every person, for some it may be in the field of medicine, others in the field of software development; we may find ourselves with a solution without knowing the <i>why</i>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Explaining topics is a fantastic method of learning, an <a href="https://hamatti.org/posts/explaining-it-helps-you-learn-it/">article</a> written by Juha-Matti Santala titled <b>Explaining it helps you learn it</b> says:
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
The act of teaching (and more accurately, the act of preparing to teach) forces us to discover the knowledge gaps, fill them and improve our communication skills to a level where we know enough to confidently, comfortably and successfully transfer that knowledge from our mind to another mind.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
The article further quotes Henrik Jernevad in whose <a href="https://henko.net/blog/if-you-cant-explain-it-you-dont-understand-it/">blog post</a> writes:
|
||||
</p>
|
||||
|
||||
<blockquote>
|
||||
<p>
|
||||
I think the magic comes when you need to put words to things. It is quite easy to have a vague picture of something in your mind without realizing how vague it actually is. Putting things in words exposes that vagueness.
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p>
|
||||
The final line <i>Putting things in words exposes that vagueness</i> is profound in the context of learning. In the pursuit of any academic discipline, we're often confronted with vagueness. Yet, it’s often through explaining a concept to someone else, using your own words, analogies, and diagrams, that one ends up <i>actually</i> understanding it.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class="timestamp-wrapper"><span class="timestamp"><2025-08-06 Wed></span></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<footer>
|
||||
<div class="copyright-container">
|
||||
<div class="copyright">
|
||||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||||
<div class="generated">
|
||||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
output/posts/zettelkasten.html
Normal file
41
output/posts/zettelkasten.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||||
<head>
|
||||
<!-- 2025-08-06 Wed 22:49 -->
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Zettelkasten Method</title>
|
||||
<meta name="generator" content="Org Mode" />
|
||||
<script src="script.js" defer></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="preamble" class="status">
|
||||
<nav>
|
||||
<a href="/">Home | </a>
|
||||
<a href="/posts.html">Posts | </a>
|
||||
<a href="/contact.html">Contact</a>
|
||||
</nav>
|
||||
<div id="updated">Updated: 2025-08-06 Wed 21:10</div>
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
<h1 class="title">Zettelkasten Method</h1>
|
||||
<p>
|
||||
Testing
|
||||
</p>
|
||||
</div>
|
||||
<div id="postamble" class="status">
|
||||
<footer>
|
||||
<div class="copyright-container">
|
||||
<div class="copyright">
|
||||
Copyright © 2022-2025 Zaine Qayyum. All rights reserved unless otherwise noted.</div></div>
|
||||
<div class="generated">
|
||||
Created with <a href="https://www.gnu.org/software/emacs/">Emacs</a> 30.1 (<a href="https://orgmode.org">Org</a> mode 9.7.11) on <a href="https://www.debian.org/">Debian</a> <a href="https://www.gnu.org">GNU</a>/<a href="https://www.kernel.org/">Linux</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
21
output/script.js
Normal file
21
output/script.js
Normal file
@@ -0,0 +1,21 @@
|
||||
|
||||
// COPY BUTTON:
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.querySelectorAll("pre.src").forEach(function (block) {
|
||||
const button = document.createElement("button");
|
||||
button.innerText = "Copy";
|
||||
button.className = "copy-btn";
|
||||
|
||||
// Append button inside <pre>
|
||||
block.appendChild(button);
|
||||
|
||||
button.addEventListener("click", function () {
|
||||
const text = block.innerText.replace(button.innerText, ""); // exclude button text
|
||||
navigator.clipboard.writeText(text.trim()).then(() => {
|
||||
button.innerText = "Copied!";
|
||||
setTimeout(() => (button.innerText = "Copy"), 1500);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,53 +6,92 @@
|
||||
--code-bg: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--bg: #121212;
|
||||
--fg: #e0e0e0;
|
||||
--link: #8ab4f8;
|
||||
--heading: #7baaf7;
|
||||
--code-bg: #1e1e1e;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
max-width: 700px;
|
||||
margin: 2rem auto;
|
||||
padding: 1rem;
|
||||
line-height: 1.6;
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
/* Headings (override org.css if needed) */
|
||||
h1, h2, h3 {
|
||||
color: var(--heading);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background: var(--code-bg);
|
||||
padding: 0.2em 0.4em;
|
||||
/* Copy button inside code blocks */
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 0.4em;
|
||||
right: 0.4em;
|
||||
background-color: var(--code-bg);
|
||||
color: var(--heading);
|
||||
border: 1px solid var(--heading);
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
padding: 0.2em 0.6em;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
/* Toggle button */
|
||||
#theme-toggle {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 0.4em 0.8em;
|
||||
background: var(--code-bg);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
.copy-btn:hover {
|
||||
background-color: var(--heading);
|
||||
color: var(--code-bg);
|
||||
}
|
||||
|
||||
/* Nav styling */
|
||||
nav {
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Footer styling */
|
||||
footer {
|
||||
color: var(--fg);
|
||||
padding: 1rem;
|
||||
margin-top: 2rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
|
||||
}
|
||||
#updated {
|
||||
font-size: 0.8rem;
|
||||
color: var(--fg);
|
||||
margin-bottom: 1rem;
|
||||
font-style: italic;
|
||||
}
|
||||
pre.src::before {
|
||||
content: none !important;
|
||||
}
|
||||
/* Container: <pre> */
|
||||
pre.src {
|
||||
padding: 1.5em 1em 1em 1em; /* top padding leaves space for button */
|
||||
font-family: "Fira Mono", "Courier New", monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap; /* wrap long lines */
|
||||
|
||||
}
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
function setTheme(mode) {
|
||||
if (mode === 'dark') {
|
||||
document.body.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
const current = document.body.classList.contains('dark') ? 'dark' : 'light';
|
||||
setTheme(current === 'dark' ? 'light' : 'dark');
|
||||
console.log("Testing");
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const saved = localStorage.getItem('theme');
|
||||
|
||||
// Auto-detect system preference if no saved preference
|
||||
if (!saved) {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
setTheme('dark');
|
||||
}
|
||||
} else if (saved === 'dark') {
|
||||
setTheme('dark');
|
||||
}
|
||||
|
||||
// Add the toggle button
|
||||
const button = document.createElement('button');
|
||||
button.id = 'theme-toggle';
|
||||
button.innerText = 'Toggle Theme';
|
||||
button.onclick = toggleTheme;
|
||||
document.body.appendChild(button);
|
||||
});
|
||||
Reference in New Issue
Block a user