Feature Demo: Building a Blog with Emacs Org and SvelteKit
Table of Contents
- 1. About
- 2. Where did all this text come from? orgMode
- 3. What's going on in the sidelines? hud
- 4. Features
- 5. Fancy text (sub- and superscripts)
- 6. Displaying GIFs
- 7. Interactive Data Visualizations
- 8. Software Architecture Diagrams
- 9. Code literateProgramming
- 10. Transclusion transclusion
- 11. Tags tag0 tag1
- 12. Links
- 13. Structured text (tables, lists, sub and superscripts)
- 14. Narrative features
- 15. Images
- 16. Styling
- 17. Adding footnotes
- 18. Iconography icons
- 19. socials
- 20. tldr
1. About
Figure 1: JPEG produced with DALL-E 4o
This page demonstrates the custom blogging framework used to build my technical diary: chiply.dev. This diary delivers a highly contextualized reading experience, with side-line components that enhance comprehension, navigation, and discovery of related content1.
This page serves as a test-print of my blog's features, as a sandbox for new ideas, and as a current 'state of the art' reference for what is possible with my blog setup.
Given that this page functions as a test-print – you will see progress tracking on some headings. Any heading with a DONE tag is a complete feature demo. Any heading with a TODO tag is a work in progress2.
This blog is built with Emacs Org Mode and Svelte/SvelteKit3.
Fellow bloggers and digital journalists will find this page useful as a reference for what is possible when building a blog with Org and SvelteKit, and all of the code used to build this site is accessible on the chiply.dev GitHub repository.
2. Where did all this text come from? orgMode
The articles you will find on this blog are entirely written with Emacs org-mode4, and then converted to HTML using the included org -> HTML exporter (ox). Each article on this blog is generated from exactly 1 source .org file, although there is the ability to compose articles from multiple .org files using Transclusion.
3. What's going on in the sidelines? hud
The central window (the place you are reading this text right now), displays the full article content, and you will see a sort of heads-up-display (HUD) on the tops and sides of the screen. This HUD contains information about the article you are reading and the specific part of the article you are currently reading5.
3.1. Why include HUD?
When you're reading a blog post, there's context (table of contents, footnotes, tags), explicit relationships (bibliography, social media links, post-to-post links, intra post-links), implicit relationships (related posts via tags, semantic content), and summarization (TLDR, minimap) that can better help you understand and navigate the content.
Most blogs ignore these important aspects of comprehension when delivering a firehose of information, and instead just dump a wall of text on the reader with no context or navigation aids.
We live in an age of information overload, and the rising effectiveness of knowledge graphs and LLMs have revealed to us that information is highly interconnected, and that these connections provide the key to distilling useful knowledge from a deluge of raw data. Using these tools daily, I am acutely aware of all the explicit and implicit connections that exist between pieces of information I scour on the internet, and a set of blog posts is no exception.
Posts within any blog are highly interconnected, and this interconnectedness is what allows us to build a rich understanding of the topics being discussed. To borrow terminology from graph theory, I like to think that the nodes (posts) provide self contained, narrative-style information on a cohesive topic, while the edges (connections between posts) allow for the construction of higher level understanding by linking related concepts together, both implicitly and explicitly.
What's more, information in my blog is highly connected to information outside of my blog (other blogs, social media, research papers, etc), and these connections are equally important to understanding the content.
To again borrow from the graph theory lexicon, I like to think of my blog as an ever-growing knowledge graph, which is embedded in the larger knowledge graph of the internet via explicit connections. As such, this blog can be used a discovery engine for finding related content, both within my blog and outside of it.
All side-line components reference a locaion inside of the article, and they autoupdate to reflect the current location in the article as you scroll through it (you will see this in action as you scroll through the page).
3.1.1. Components
Starting at the table of contents (on he left) and going anti-clockwise around the screen, here are the HUD components and their purpose:
3.1.1.1. Table of Contents
On the upper left side of the screen, you will see a table of contents. You can click on any section in the table of contents to jump to that section in the article.
3.1.1.2. Footnotes
On the lower left side of the screen, you will see footnotes. You can click on any footnote to jump to that footnote in the article. I love to levarage footnotes to expound upon a statement, because doing so inline can disrupt the narrative flow of the article.
3.1.1.3. References
At the bottom of the screen, you will see a bibliography. This is a list of both internal and external references used in the article, and is meant to give credit to the original sources of information, and to organize all external references in one place to serve as a kind of further reading list. The bibliography supports discoverability of related content, both within my blog and outside of it.
3.1.1.5. TLDR (too long didn't read)
None taken lol ššš š… I'm super verbose, and even if I wasn't, some topics are complex enough to warrant more words than anyone would be willing to read. Complex articles like this are kind of like reference materials for most folks. As a means of summarization, and as a means of helping readers navigate to the most relevant parts of the article, a TLDR component is included.
On the lower right side of the screen, you will see a TLDR (too long; didn't read) summary. This is a short summary of the article, and is meant to give you a quick overview of the article's content. You can click links in the TLDR to jump to content being referenced in the summary.
3.1.1.7. Minimap
On the far right side of the screen, you will see a minimap of the article you are reading. This is a small version of the article, and is meant to give you a quick overview of the article's structure. You can click on any section in the minimap to jump to that section in the article. This is useful for quickly gauging the size of he document, getting a birds-eye of the document structure, and for quickly navigating to different sections of the article.
I particularly like the minimap for when I can recall the visual piece of content I want to look at (eg - where was that pie chart again). I can find this extremely quickly in the minimap, and then click to jump to that section.
The minimap also provides a better sense of locale within the article, as you can see the content far above and far below your current location in the article.
3.1.1.8. Full text search
At the top right of the screen, you will see a search bar. You can use this search bar to search for any text in the article you are reading. This is useful for quickly finding specific information in the article, both by keyword and by phrase. This allows users to search for content related to a literal match or a semantic match with their input query.
3.1.1.10. Progrss bar
At the very top of the screen, you will see a progress bar. This bar fill from right to left displaying how far you have scrolled through the article you are reading. This is useful for gauging how much of the article you have read, and how much is left to read.
4. Features
NOTE the post up until this point has followed narrative structure.
The rest of this article describes and demonstrates the features of this technical diary. These are in no particular order – the rest of this document is long (20k+ words), and reads more like reference material than prose (thank goodness we have all the HUD in the sidelines to help us navigate this wall of text š).
5. Fancy text (sub- and superscripts)
5.1. latex math
To demonstrate, I'll enumerate some famous equations using LaTeX math syntax. These equations span various fields of mathematics and physics, from basic geometry to complex analysis, number theory, fluid dynamics, and general relativity.
- Pythagorean Theorem
\[ a^2 + b^2 = c^2 \]
- Quadratic Formula
\[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]
- Euler's Identity
\[ e^{i\pi} + 1 = 0 \]
- Gaussian Integral
\[ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} \]
- Taylor Series for e^x
\[ e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots \]
- Cauchy-Riemann Equations
\[ \frac{\partial u}{\partial x} = \frac{\partial v}{\partial y} \quad \text{and} \quad \frac{\partial u}{\partial y} = -\frac{\partial v}{\partial x} \]
- Fourier Transform
\[ \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} dx \]
- Riemann Zeta Function
\[ \zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s} = \prod_{p \text{ prime}} \frac{1}{1 - p^{-s}} \quad \text{for } \Re(s) > 1 \]
- Navier-Stokes Equation (incompressible flow)
\[ \rho \left( \frac{\partial \mathbf{v}}{\partial t} + (\mathbf{v} \cdot \nabla) \mathbf{v} \right) = -\nabla p + \mu \nabla^2 \mathbf{v} + \mathbf{f} \]
- Einstein Field Equations (General Relativity)
\[ R_{\mu\nu} - \frac{1}{2}g_{\mu\nu}R + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4}T_{\mu\nu} \]
5.2. TODO subscript and superscript
This is an example of subscript: H_{2}O, A_{i,j}. NOTE this isn't rendering properly due to a bug I need to fix in the org to html exporter.
6. Displaying GIFs
Here we demonstrate how GIFs can be displayed. These are useful for demonstrating usage of UI features, and also for entertainment value. Emacs has nice packages (like gif-screencast) that allow you to create GIF demonstrations of how to use your package, so I plan to use this feature for that. Also, GIFs can be used to spice up otherwise static content.
6.1. Local file
6.2. Remote file
These all come from graph GIPHY:
Note I am using a #+begin_export html in the org-document, as it let's me arrange images into arbitrary layouts using custom CSS. In this case, I'm using flexbox to create a grid of GIFs.
7. Interactive Data Visualizations
HTML charts are great for technical blogging. Personaly, I'm inspired by examples of digital journalism from the New York Times that use interactive charts to tell stories with data. The NYT builds these with D3.js, but plotly is a great alternative for people who don't want to code everything from scratch, and plotly is also built on top of D3.js. Plotly covers almost all chart types, and has great integration with python, R, and javascript, all concise languages which are excellent for demonsrtating the logic behind the data visualization in question. In fact, plotly beats D3 for this in my opinion, you wouldn't include D3 code in the blog as it is too verbose, whereas the plotly python APIs are concise (especially px).
Plotly is therefore my choice for adding interactive charts to my technical blog.
Here I demonstrate adding a plotly chart using org-babel and python. The code block below generates a plotly bar chart and saves it as an html file. The html file is then included in the blog using an iframe. Note there are probably better ways to do this, both from a viz generation and rendering perspective, but this is a good start, and unlocks ploty's full universe of chart types for my blog.
7.1. Bar chart
I'm leveraging utility functions that are defined in a custom python package – you'll see the import here
7.2. Dist Plot
7.3. Animattions
7.4. 3D charts
Note that I have not exported the plotly code here as there is a lot of it for the 9 3D charts below.
7.4.1. Output
7.5. TODO Arrangement
This doesn't show up in the webpage, but I can include html inline using #+begin_export html and #+end_export blocks in the org mode document. This is useful for insterting iframes (think previews of other websites, plotly charts, full webapps, etc…). html, js, and css can be included, here I'm using CSS grid too display iframes side my side.
8. Software Architecture Diagrams
Sometimes structure that needs to be described cannot be adequately represented using just text, tables, and lists. Diagrams are a great way to represent complex structures visually.
org-mermaid is a great extension to org-babel, that allows you to create mermaid diagrams-as-code within org-mode documents. ox then takes care of exporing the code, the output, or both.
The DAG is indespensible in most contexts, but espeically so in technical blogging. Being able to quickly and easily create diagrams to illustrate concepts is very useful, and the fact that I can maintain them with code is a dream.
Of course, you could use anything that outputs a chart (like diagrams), but mermaid is basically ubiquitous, so I try to use that as much as I can.
8.1. Diagram 1: Simple Microservices Architecture
8.2. Diagram 2: Event-Driven Architecture
8.3. Diagram 3: Cloud-Native Architecture with Kubernetes
8.4. Diagram 4: Global Multi-Region Architecture
9. Code literateProgramming
Rendering and executing code is a critical feature for technical blogging.
Because of org-mode's babel system, code blocks can be included in the document. These can be executed either as you write, or when the document is exported, and the results can be included in the output.
This process of writing code, output, and narrative text together is called literate programming, and is a powerful way to communicate technical concepts.
My main languages are bash, elisp, python, R, SQL, and javascript/TypeScript. Having a way to include code snippets that can be executed and have the results included in the document is very useful for technical blogging.
org-babel is very powerful and flexible, and you can think of it like a language-agnostic form of Jupyter Notebooks.
Here are a couple of useful examples.
9.1. bash
Here's an interesting bash script that implements the Sieve of Eratosthenes algorithm to find prime numbers and visualizes them with ASCII art6:
#!/bin/bash # Sieve of Eratosthenes with Simple Text Visualization # Finds all prime numbers up to a given limit and creates a visual representation LIMIT=100 echo "=== Sieve of Eratosthenes: Finding Primes up to $LIMIT ===" echo # Initialize array - 1 means potential prime, 0 means composite declare -a sieve for ((i=0; i<=LIMIT; i++)); do sieve[i]=1 done # 0 and 1 are not prime sieve[0]=0 sieve[1]=0 # Implement sieve algorithm for ((p=2; p*p<=LIMIT; p++)); do if [[ ${sieve[p]} -eq 1 ]]; then # Mark all multiples of p as composite for ((i=p*p; i<=LIMIT; i+=p)); do sieve[i]=0 done fi done # Collect primes and create visualization primes=() echo "Prime Visualization (P = prime, . = composite):" echo "+---------------------+" # Create visual grid (10 numbers per row, starting from 2) for ((row=0; row<10; row++)); do printf "| " for ((col=0; col<10; col++)); do num=$((row * 10 + col + 2)) if [[ $num -le $LIMIT ]]; then if [[ ${sieve[num]} -eq 1 ]]; then primes+=($num) printf "P " else printf ". " fi else printf " " fi done printf "|\n" done echo "+---------------------+" echo # Create a numbered reference grid with proper spacing echo "Number Reference Grid:" echo "+-------------------------------+" for ((row=0; row<10; row++)); do printf "| " for ((col=0; col<10; col++)); do num=$((row * 10 + col + 2)) if [[ $num -le $LIMIT ]]; then printf "%2d " $num else printf " " fi done printf "|\n" done echo "+-------------------------------+" echo # Statistics echo "PRIME STATISTICS:" echo " Total numbers checked: $LIMIT" echo " Primes found: ${#primes[@]}" density=$(echo "scale=1; ${#primes[@]}*100/$LIMIT" | bc -l 2>/dev/null || echo "25.0") echo " Density: ${density}%" echo # Show all primes in groups of 10 echo "All Primes Found:" printf " " for ((i=0; i<${#primes[@]}; i++)); do printf "%3d " ${primes[i]} if [[ $(((i+1) % 10)) -eq 0 ]]; then printf "\n " fi done echo echo # Find twin primes (primes that differ by 2) echo "Twin Prime Pairs (p, p+2):" printf " " count=0 for ((i=0; i<${#primes[@]}-1; i++)); do current=${primes[i]} next=${primes[i+1]} if [[ $((next - current)) -eq 2 ]]; then printf "(%d,%d) " $current $next ((count++)) if [[ $((count % 4)) -eq 0 ]]; then printf "\n " fi fi done echo echo " Found $count twin prime pairs" echo # Prime gaps analysis echo "Prime Gap Analysis:" max_gap=0 gap_start=0 gap_end=0 echo " Gaps larger than 4:" printf " " gap_count=0 for ((i=0; i<${#primes[@]}-1; i++)); do gap=$((${primes[i+1]} - ${primes[i]})) if [[ $gap -gt $max_gap ]]; then max_gap=$gap gap_start=${primes[i]} gap_end=${primes[i+1]} fi if [[ $gap -gt 4 ]]; then printf "%d->%d(gap:%d) " ${primes[i]} ${primes[i+1]} $gap ((gap_count++)) if [[ $((gap_count % 3)) -eq 0 ]]; then printf "\n " fi fi done echo echo " Largest gap: $max_gap (between $gap_start and $gap_end)" echo echo "Algorithm completed successfully!" echo "Time complexity: O(n log log n)" echo "Space complexity: O(n)"
=== Sieve of Eratosthenes: Finding Primes up to 100 ===
Prime Visualization (P = prime, . = composite):
+---------------------+
| P P . P . P . . . P |
| . P . . . P . P . . |
| . P . . . . . P . P |
| . . . . . P . . . P |
| . P . . . P . . . . |
| . P . . . . . P . P |
| . . . . . P . . . P |
| . P . . . . . P . . |
| . P . . . . . P . . |
| . . . . . P . . . |
+---------------------+
Number Reference Grid:
+-------------------------------+
| 2 3 4 5 6 7 8 9 10 11 |
| 12 13 14 15 16 17 18 19 20 21 |
| 22 23 24 25 26 27 28 29 30 31 |
| 32 33 34 35 36 37 38 39 40 41 |
| 42 43 44 45 46 47 48 49 50 51 |
| 52 53 54 55 56 57 58 59 60 61 |
| 62 63 64 65 66 67 68 69 70 71 |
| 72 73 74 75 76 77 78 79 80 81 |
| 82 83 84 85 86 87 88 89 90 91 |
| 92 93 94 95 96 97 98 99 100 |
+-------------------------------+
PRIME STATISTICS:
Total numbers checked: 100
Primes found: 25
Density: 25.0%
All Primes Found:
2 3 5 7 11 13 17 19 23 29
31 37 41 43 47 53 59 61 67 71
73 79 83 89 97
Twin Prime Pairs (p, p+2):
(3,5) (5,7) (11,13) (17,19)
(29,31) (41,43) (59,61) (71,73)
Found 8 twin prime pairs
Prime Gap Analysis:
Gaps larger than 4:
23->29(gap:6) 31->37(gap:6) 47->53(gap:6)
53->59(gap:6) 61->67(gap:6) 73->79(gap:6)
83->89(gap:6) 89->97(gap:8)
Largest gap: 8 (between 89 and 97)
Algorithm completed successfully!
Time complexity: O(n log log n)
Space complexity: O(n)
9.2. python
9.2.1. TODO (add language) using venv virtualEnvironments
Venvs are set in the .dir-locals.el file for this project. This allows different code blocks to use different virtual environments.
9.2.2. Code example
This is how you write code with python7
from dataclasses import dataclass from polyfactory.factories import DataclassFactory @dataclass class Person: name: str age: float height: float weight: float class PersonFactory(DataclassFactory[Person]): ... person_instance = PersonFactory.build() print(person_instance)
Person(name='JmjUtskpYrdRYTTbRirA', age=1728311337.84688, height=52.7746341086379, weight=-618160.650763342)
9.2.3. TODO using multiple venvs via session
Use case is actually comomon – demonosrating he difference between two versions of a library, demonstrating a dependency issue.
10. Transclusion transclusion
The subheading Demo heading is actually 'transcluded' text from another post on this blog. In other words, this is a verbatim section, from another article on this blog, that I have embedded visually here (you can verify this by going to that aricle and reading this same text here).
This is made possible by org-transclusion.
See the transclusion below - again, this heading is pulled straight out of
10.1. TODO transclusion styling
Transcluded sections are styled differently to signal to the user that a verbatim section from a separate article is being referenced.
12. Links
My blog's Raison d'ĆŖtre is to allow me to share knowledge with others. Links are a critical part of this, as they allow me to reference other content, both within my own blog and externally.
As such, my blog is aware of the different 'types' of links and visually distinguishes between them (nyi).
12.1. Link types
Note this list is incomprehensive, and defined by me, but it works for my purposes.
12.1.1. Intra-post links
It is possible and useful to link to different sections within a single post. This is done using standard org-mode link syntax.
Example: Why use tags?.
12.1.2. Inter-post links
I can link to other sections in the document.
Example: Post 1
12.1.3. External links
Note that external links appear in the bibliography section in the deskop version of the blog.
12.1.4. Pseudo links
Some things are clickable and open gates to other content, like the [[*** Tags][tags]] HUD component, the [[*** *Full text search*]], and the [[*** *Post navigation*]]. These are not really links, but they behave like links, so I style them as such.
Not everything clickable is style like a link – buttons, for example, are not styled like links. Headings, which are clickable to collapse/expand sections, are also not styled like links. The heuristic is that anything that could take you to anothe piece of conetnt gets styled like a link.
12.2. TODO Link styling
Internal links should be rendered differetly than external links as so the user knows ahead of time if a reference is within the blog or outside.
12.3. TODO Link previews
It is useful to see a preview of a link before clicking on it – maybe you're just curious what the page looks like, or more practically, maybe you want to quickly gleen the information from a popup withouot navigating away from the current page, disrupting your reading flow. Wikipedia's navigation popups are a great example of this feature in action, and google has something similar you can enable in chrome.
While useful, these only let you preview 1 degree out from you current address. What would be even more useful is a way to preview links recursively, so you could see the content of links within links, and so on. This would allow you to quickly navigate through a web of content without ever leaving the current page.
This is implemented here for all links – simply hover over any link to see a preview of the content.
13. Structured text (tables, lists, sub and superscripts)
13.1. tables
| Country | Population (millions) | Continent |
|---|---|---|
| China | 1420 | Asia |
| India | 1400 | Asia |
| USA | 332 | North America |
| Brazil | 215 | South America |
| Nigeria | 216 | Africa |
| Month | Sales ($) | Growth (%) |
|---|---|---|
| Jan | 12,000 | 5.0 |
| Feb | 14,050 | 17.1 |
| Mar | 13,500 | -3.9 |
| Apr | 15,200 | 12.6 |
| Feature | Svelte 5 Support | Notes |
|---|---|---|
| Reactivity | Yes | Automatic & simple |
| TypeScript Support | Yes | Built-in, first-class |
| Transitions | Yes | Easy to use animations |
| Stores | Yes | Simple shared state |
| Actions | Yes | Custom DOM behaviors |
13.1.1. TODO implement horizontal scrolling for when tables are too wide
13.2. lists
13.2.1. bullets
- one
- two
- two point one
- two point two
- three
- three point one
- three point two
13.2.2. numbers
- first
- second
- hello worrld
- second point two
13.2.3. formatting
- some bold text
- some italic text
- some underline text
- some
striketext - some
codetext - some
verbatimtext - some
*bold in code*text - some
/italic in verbatim/text - some
_underline in verbatim_text - some =~code in verbatim=~ text
- some
+strike in verbatim+text - some bold italic underline
strikecodeverbatimtext
13.2.3.1. TODO fix underline style
14. Narrative features
Org of course has many features for structuring content.
This entire document is written in org-mode outline format, with headings and subheadings. These levels of the hierarchy are rendered as different sized headings in the html output.
14.1. Text
14.1.1. Long paragraph
This is a long paragraph – note that it contains a footnote. This is a good test of the styling for footnotes – they should jump out, even when buried in text (not yet implemented). Here's some good old lorem ipsum:
lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim8 id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
14.1.2. Quote
org has features for verse, blockquote, and centering text. The html exporter I use doesn't style these, so I add rules to css to make them look different. Note that you can include links in quotes, which is nice for direct attribution.
This is some quote in a #+begin_quote block.
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past ---Tim Berners-Lee
Here's one of my favourite quotes – I think about this all the time. This is text in a #+BEGIN_VERSE block. It gets compiles as p.verse:
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away
---Antoine de Saint-ExupƩry
This is some text in a #+begin_center block. It gets compiles as p.org-center:
This text is centered.
This is some more regular text.
15. Images
15.1. DONE local file (png)
15.2. DONE remote file (svg)
(not rendered) In org mode, you can include captions and html attributes to change the size of the image
Figure 2: A remote image
16. Styling
Styling is applied mostly at the Svelte level, but org-mode does allow some inline styling options.
16.1. inline css
CSS can be included inline in the org file using the export block. This block doesn't render in the document as html markup, it becomes part of the document itself.
Here's the code I embedded in the org-document in a #+begin_export html block to style TODO items in pink monospace font:
<style> .todo { font-family: monospace; color: pink; } </style>
17. Adding footnotes
18. Iconography icons
Icons can be included inline. Here I'm using the file-icons github repo. You can see all the icons here.
20. tldr
This post is a living showcase of how the site is authored in Emacs Org and rendered with Svelte/SvelteKit. It explains the motivation, stack, and layout, starting with an overview of goals and use-cases in 1 and how each article is written in Org and exported to HTML in 2.
- The desktop reading experience includes a heads-up-display that follows your scroll position. For an orientation to all of those on-screen helpersātable of contents, progress bar, tags, TLDR, minimap, and moreāsee the walkthrough in 3; youāll also find a focused section on summaries at 20 and an implementation-focused note on the minimap under 3.1.1.7.
- Media and visual flourishes are straightforward to embed. Animated demos are covered in 6, inline icon sets in 18, and images (local and remote, with attributes and captions) in 15.
- Orgās text structuring tools are demonstrated with practical styling. Youāll find narrative primitives like quotes, verse, centering, and long-form paragraphs in 14 and 14.1āincluding examples at 14.1.2 and 14.1.1. For fine-grained presentation tweaks, see
[[*styling]]and its inline example in 16.1. If you need data-heavy layout, consult[[*structured text]]with concrete patterns in 13.1 and hierarchical bullets and numbering in 13.2. - Linking patterns are split by destination and intent. Internal cross-references and how they should be rendered distinctly are discussed in
[[*internal links]], while outbound references and their appearance in the bibliography are covered in 12.1.3 and the overview in 12. - Executable content is a first-class citizen. The section 9 explains using Org Babel for literate, reproducible snippets; concrete examples show shell output in 9.1 and a realistic Python factory demo in 9.2. For interactive, data-rich visuals, thereās a full pipeline from code to iframe in 7, and for diagramming in plain text, see the end-to-end flow in 8.
- Citation mechanics and reader aids are part of the writing workflow. The authoring and rendering approach to footnotes is shown in 17, while the compiled note list and references live in . Tags and their intended behaviors appear in 11, guiding how content will be grouped and discovered across posts.
- Finally, the post links to community and platform touchpoints so each article can be followed where it lives on the web; see 19.
Footnotes:
Both explicit relationships (like direct links from one post to another) and implicit relationships (like tags and semantic relationships) can be used to traverse the underlying content graph present in any wiki-style document system.
These TODO states are actually from org-mode. Note tha todo state change can be (and is in my configuration) being logged within the org document automatically, offering some ability to visualize progress over time of tasks defined wihin the document
Note I am using Svelte 5 and mostly Typescript for this project, so some syntax may be different than Svelte 3 and/or plain javascript examples you may find online.
This includes all the text, links, images, code blocks, footnotes, code, code outtput, and more. The benefits of using org-mode are beyond the scope of this demo, but you can read more about them here.
The sideline features only appear in the desktop version of the web app.
ASCII art works because I'm using a monospace bit-map font on my blog.
This is how to write code with python
new footnote
This is the footnote. lorem impsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
even more
More footnotes