Write some more about quickfacts

content/quickfacts-1/example.svg

@@ -0,0 +1,12 @@
+<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" id="test" onclick="hide()" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>

content/quickfacts-1/index.md

@@ -1,12 +1,81 @@
 +++
-title = "Quickfacts - Part 1"
-date = 2026-05-01
-description = "The first part of a series about my Quickfacts project"
+title = "Quickfacts - Part 1: The Mental Model"
+date = 2026-04-02
+description = "Building a Mental Model"
 draft = true
 
 [taxonomies]
 categories = ["Programming"]
 tags = ["Factorio", "Rust"]
+
+[extra]
+toc = true
 +++
 
+The first real entry in my series about my quickfacts project.
+For a small introduction, see the [intro blogpost](@/quickfacts-intro/index.md)
+
+<!-- more -->
+
+# Idea
+- Everything is a graph
+- Each Entity is a node in the graph
+    - What extra information to include
+- Each Edge represents that certain items can move from one node to the other
+    - Specify what items can move over the edge (for example because of filters)
+    - Outgoing and incoming priority
+    - Capacity ?
+    - What extra information to include
+
+# Interactions
+The Construction basically comes down to a large table mapping the different interactions between all the types of entities.
+
+## Belts
+For the purpose of my analysis, you can split a belt into the two sides, as they act independent of one another.
+
+### Belt-Belt
+Direct 1-to-1 connection, is the simplest and most common way two belts are connected.
+In this configuration you have 1 belt basically forwarding everything onto another belt, where each side of the source belt feeds into the corresponding side of the target belt.
+For example if you have a simple line of belts forming a long line, they are all direct 1-to-1 connected.
+
+Sideloading, is a more special case. This happens when the target belt already has another belt connected and now the new source belt is connected from the side (as the name suggests).
+In this configuration both sides of the source belt are going into one side of the target belt. 
+
+### Belt-Splitter
+The splitter can only accept direct 1-to-1 style connections going into it, from belts or the output of underground belts.
+
+The ouput of a splitter basically acts the same way as a normal belt would.
+
+### Belt-UndergroundBelt
+The input side of the underground supports direct 1-to-1 connections, if the other source belt is coming from the same direction (so no turn is being made).
+The input can also be sideloaded, however opposed to normal belt sideloading, only the upstream side of the source belt will feed into the target belt and the other side of the source belt will not be connected.
+
+The output again acts like a normal belt.
+
+### Belt-Direct output machines (miner, recycler, etc.)
+Sideloading
+
+TODO What to do if at the "head" of a beltline
+
+## Inserter
+### Inserter-Belt
 TODO
+
+# Running it manually
+
+{% carousel() %}
+
+{% carousel_item() %}
+First - 1
+{% end %}
+{% carousel_item() %}
+Second - 2
+{% end %}
+{% carousel_item() %}
+Third - 3
+{% end %}
+{% carousel_item() %}
+Fourth - 4
+{% end %}
+
+{% end %}

content/quickfacts-intro/index.md

@@ -1,23 +1,39 @@
 +++
 title = "Quickfacts - Intro"
-date = 2026-05-01
+date = 2026-04-01
 description = "An introduction to my Quickfacts project"
 draft = true
 
 [taxonomies]
 categories = ["Programming"]
 tags = ["Factorio", "Rust", "Quickfacts"]
+
+[extra]
+toc = true
 +++
 
-Quickfacts is a long ongoing hobby project of mine, with the aim of being able to analyze most factorio blueprints.
-The goal would be to have a website or application, which you can give most blueprints and it then can tell you things about how the blueprint will perform.
+A small introduction to my ongoing quickfacts project.
+A set of tools/progams to automatically analyze factorio blueprints, basically the LLVM of factorio.
+I have to no idea if this will ever work to a good degree or how far I will get, but I want to share this journey and document my ideas and approaches.
 
-## Analysis Goals
+<!-- more -->
+
+# Motivation
+I love playing factorio and I especially love optimizing my builds and going down the rabbit hole on analyzing blueprints.
+However given my interest in analysis of computer programs and formal methods, I thought why not combine them, because if you squint with your eyes these problems look very similar.
+
+At the end of this road, I would love to have a website, where I can paste a blueprint I am interested in, select/configure an analysis and then get the results.
+
+# Analysis Goals
 - Determine the output rate given a fixed input rates (and how much of the input is actually being consumed)
 - Check how well a belt-balancer works
 - Highlight bottlenecks in a setup
 
-## Known Limitations
+# Known Limitations
 - Any form of circuit networks/logic
 - Trains
 - Spoilage (for now)
+
+# Approach
+I am going to develop a rough mathematical/formal model for factorio and its' semantics.
+Then I hope to do something similar to data-flow analysis and essentially express all the logic and analysis as a set of mathematical steps/functions to apply.

templates/shortcodes/carousel.html

@@ -0,0 +1,126 @@
+<ul class="carousel">
+  {{ body | safe }}
+</ul>
+
+<style>
+.carousel {
+  width: 100%;
+  height: 300px;
+  padding: 20px;
+  display: flex;
+  gap: 4vw;
+
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+
+  /* this will hide the scrollbar in mozilla based browsers */
+  overflow: -moz-scrollbars-none;
+  scrollbar-width: none;
+  /* this will hide the scrollbar in internet explorers */
+  -ms-overflow-style: none;
+}
+/* this will hide the scrollbar in webkit based browsers - safari, chrome, etc */
+.carousel ul::-webkit-scrollbar { 
+  width: 0 !important;
+  display: none; 
+}
+
+.carousel>li {
+  list-style-type: none;
+  /* background-color: #eeeeee; */
+  /* border: 1px solid #dddddd; */
+  padding: 20px;
+
+  flex: 0 0 100%;
+
+  scroll-snap-align: center;
+}
+
+.carousel>li:nth-child(even) {
+  /* background-color: cyan; */
+}
+
+.carousel>li::after {
+  visibility: hidden;
+}
+
+.carousel::scroll-button(*) {
+  border: 0;
+  font-size: 2rem;
+  background: none;
+  color: white;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.carousel::scroll-button(*):hover,
+.carousel::scroll-button(*):focus {
+  opacity: 1;
+}
+
+.carousel::scroll-button(*):active {
+  translate: 1px 1px;
+}
+
+.carousel::scroll-button(*):disabled {
+  opacity: 0.2;
+  cursor: unset;
+}
+
+.carousel::scroll-button(left) {
+  content: "◄" / "Previous";
+}
+
+.carousel::scroll-button(right) {
+  content: "►" / "Next";
+}
+
+.carousel {
+  anchor-name: --my-carousel;
+}
+
+.carousel::scroll-button(*) {
+  position: absolute;
+  position-anchor: --my-carousel;
+}
+
+.carousel::scroll-button(left) {
+  right: calc(anchor(left) - 70px);
+  bottom: calc(anchor(bottom) + 10px);
+}
+
+.carousel::scroll-button(right) {
+  left: calc(anchor(right) - 70px);
+  bottom: calc(anchor(bottom) + 10px);
+}
+
+.carousel {
+  scroll-marker-group: after;
+}
+
+.carousel::scroll-marker-group {
+  position: absolute;
+  position-anchor: --my-carousel;
+  bottom: calc(anchor(bottom) + 10px);
+  justify-self: anchor-center;
+
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.carousel>li::scroll-marker {
+  content: attr(data-accName);
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  border: 2px solid white;
+  border-radius: 50%;
+  overflow: hidden;
+  text-indent: 16px;
+}
+
+.carousel>li::scroll-marker:target-current {
+  background-color: white;
+}
+</style>

templates/shortcodes/carousel_item.html

@@ -0,0 +1,3 @@
+<li>
+  {{ body | safe }}
+</li>

templates/shortcodes/svg.html

@@ -0,0 +1,2 @@
+{% set data = load_data(path=path) -%}
+{{ data | safe }}

zola.toml

@@ -23,6 +23,7 @@ index_format = "elasticlunr_json"
 
 [markdown]
 external_links_target_blank = true
+insert_anchor_links = "left"
 
 [markdown.highlighting]
 theme = "catppuccin-mocha"