Improve some more stuff

content/quickfacts-1/index.md

@@ -73,21 +73,102 @@ To collect input items, a node goes through its input slots in decreasing priori
 
 To distribute the items, a node goes through its output slots in decreasing priority and puts as many items as possible in that slot.
 
-# Running it manually
+## Constraints
+The idea with constraints is basically to have some logic formula that constraints the items and their rates along an edge.
+So for example if an inserter has a filter configured, its constraints will only allow the specific items as configured by the filter.
+Another example is an assembly machine, which will impose constraints on anything going into it, to only be the items that it needs for the recipe.
 
+Constraints can then be propogated and combined upstream, so that an inserter going into an assembly machine also only selects the items that can actually go into that machine.
+For propogation, the constraints will be combined by either an intersection or a union.
+For example an inserter will perform an intersection, because it can only accept things that fit its specific configuration and any downstream configuration.
+But a belt will perform a union, because might have constraints coming from inserters taking from them and downstream belts so the items can take either path.
+Basically the constraints for every edge will be combined using an intersection with the constraints of the node itself, and then all downstream edge constraints will be combined using a union to form the final upstream constraint.
+
+# Examples
+
+## Belt Line with one slower belt
 {% carousel() %}
 
 {% carousel_item() %}
-First - 1
+Initial configuration
+{% mermaid() %}
+flowchart LR
+    Src
+    T1
+    T2
+    T3
+    Output
+
+    Src -->|x <= 20| T1
+    T1 -->|x <= 20| T2
+    T2 -->|x <= 10| T3
+    T3 -->|x <= 20| Output
 {% end %}
-{% carousel_item() %}
-Second - 2
 {% end %}
+
 {% carousel_item() %}
-Third - 3
+Raw Constraint Propogation
+{% mermaid() %}
+flowchart LR
+    Src
+    T1
+    T2
+    T3
+    Output
+
+    Src -->|x <= 20 && x <= 20 && x <= 10 && x <= 20| T1
+    T1 -->|x <= 20 && x <= 10 && x <= 20| T2
+    T2 -->|x <= 10 && x <= 20| T3
+    T3 -->|x <= 20| Output
 {% end %}
+{% end %}
+
 {% carousel_item() %}
-Fourth - 4
+Simplified Constraint Propogation
+{% mermaid() %}
+flowchart LR
+    Src
+    T1
+    T2
+    T3
+    Output
+
+    Src -->|x <= 10| T1
+    T1 -->|x <= 10| T2
+    T2 -->|x <= 10| T3
+    T3 -->|x <= 20| Output
+{% end %}
 {% end %}
 
 {% end %}
+
+## TMP
+{% carousel() %}
+{% carousel_item() %}
+Initial Configuration
+{% mermaid() %}
+flowchart TD
+    Src
+    T1
+    Splitter
+    T2
+    T3
+    Output1
+    Output2
+
+    Src --> T1
+    T1 --> Splitter
+    Splitter --> T2
+    Splitter --> T3
+    T2 --> Output1
+    T3 --> Output2
+{% end %}
+{% end %}
+
+{% carousel_item() %}
+Raw Propogation
+{% end %}
+
+{% end %}
+
+# Conclusion

templates/shortcodes/carousel.html

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