Add blogpost for MediumFast

content/sv/blog/2025-09-19-switch-to-mediumfast.md

@@ -0,0 +1,30 @@
+---
+title: Övergång till MediumFast den 27 September!
+date: 2025-09-19
+---
+Meshtastic nätverket i Stockholm har vuxit kraftigt under de senaste två åren. Med över 200 daglit aktiva noder räcker inte längre Bandbrädden till även med optimerade inställningar, detta påverkar tillförligtligheten i meshen och flertalet medelanden når inte fram. 
+
+För att att få ett stabilare mesh där vi har möjlighet att fortsätta växa kommer vi gå över från LongFast till MediumFast modulation. Detta innebär bland annat:
+- **Snabbare meddelanden**: 3x kortare sändningstid
+- **Mindre kollisioner**: Färre störningar på och högre leveranssäkerhet
+- **Bättre batteritid**: Särskilt viktigt för solcellsdrivna noder
+- **Högre nodkapacitet**: Plats för fler noder i nätverket
+
+### Behöver jag göra något?
+**Ja**, du behöver manuellt uppdatera till MediumFast-preset under LoRa inställningarna. Detta fungerar även över RemoteAdmin för noder på svåråtkomliga platser.
+
+
+### Riskerar detta inte kortare räckvidd?
+MediumFast klarar en Signal to Noise Ratio på -15dBm till skillnad mot LongFasts -20dBm. Då vi har ett meshnätverk så är det anslutningen mellan närliggande noder som är viktigt. Stockholm är ett välanslutet mesh. Bilden nedan visar vilka anslutningar som klarar MediumFast givet nuvarande Noisefloor. I praktiken förväntar vi oss ännu bättre prestanda. Det finns dock ett fåtal noder som ligger långt bort eller har dåligt läge som riskerar att inte kunna nå meshen på MediumFast, men detta blir incitament till att fortsätta bygga ut meshen. Det viktiga är att MediumFast ger oss möjlighet att fortsätta växa, och med högre bandbredd och tillförlitlighet öppnar det upp för fler användningsområden.
+
+{{< image-compare left="/images/blog/2025-09-19-switch-to-mediumfast-lf.png" right="/images/blog/2025-09-19-switch-to-mediumfast-mf.png" left-alt="LongFast anslutningar" right-alt="MediumFast anslutningar" caption="Jämförelse mellan LongFast (vänster) och MediumFast (höger) anslutningar i Stockholm mesh. Dra reglaget för att se skillnaden." >}}
+
+### Andra europeiska städer som bytt
+Stockholm följer trenden från andra stora europeiska mesh-nätverk:
+- **Berlin**: [Bytte till MediumFast](https://www.reddit.com/r/meshtastic/comments/1kal6vv/berlin_is_switching_to_mediumfast/)
+- **Paris**: [Använder MediumFast](https://wiki.mesh-idf.fr/fr/carte/carte-du-mesh-idf)  
+- **Polen**: [Nationell kampanj för MediumFast](https://przejdznamediumfast.pl/)
+
+
+### Mer teknisk information
+För fler tekniska detaljer om MediumFast, läs Meshtastics officiella artikel: [Why Your Mesh Should Switch From LongFast](https://meshtastic.org/blog/why-your-mesh-should-switch-from-longfast/)

layouts/shortcodes/image-compare.html

@@ -0,0 +1,224 @@
+<!-- Image comparison slider shortcode -->
+<div class="image-compare-container" data-left-image="{{ .Get "left" }}" data-right-image="{{ .Get "right" }}">
+  <div class="image-compare">
+    <div class="image-compare-left">
+      <img src="{{ .Get "left" }}" alt="{{ .Get "left-alt" | default "Before image" }}" loading="lazy">
+    </div>
+    <div class="image-compare-right">
+      <img src="{{ .Get "right" }}" alt="{{ .Get "right-alt" | default "After image" }}" loading="lazy">
+    </div>
+    <div class="image-compare-slider">
+      <div class="image-compare-handle">
+        <div class="image-compare-handle-line"></div>
+        <div class="image-compare-handle-circle">
+          <span class="handle-arrow-left">‹</span>
+          <span class="handle-arrow-right">›</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  {{ if .Get "caption" }}
+  <p class="image-compare-caption">{{ .Get "caption" }}</p>
+  {{ end }}
+</div>
+
+<style>
+.image-compare-container {
+  margin: 2rem 0;
+  max-width: 100%;
+}
+
+.image-compare {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  user-select: none;
+  cursor: col-resize;
+}
+
+.image-compare-left,
+.image-compare-right {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.image-compare-left {
+  z-index: 1;
+}
+
+.image-compare-right {
+  z-index: 2;
+  clip-path: inset(0 0 0 50%);
+}
+
+.image-compare img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.image-compare-slider {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  background: white;
+  z-index: 3;
+  transform: translateX(-50%);
+  cursor: col-resize;
+}
+
+.image-compare-handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 4;
+}
+
+.image-compare-handle-line {
+  width: 2px;
+  height: 60px;
+  background: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.image-compare-handle-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid #007bff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  position: relative;
+  cursor: col-resize;
+}
+
+.handle-arrow-left,
+.handle-arrow-right {
+  font-size: 14px;
+  font-weight: bold;
+  color: #007bff;
+  position: absolute;
+}
+
+.handle-arrow-left {
+  left: 8px;
+}
+
+.handle-arrow-right {
+  right: 8px;
+}
+
+.image-compare-caption {
+  text-align: center;
+  font-style: italic;
+  color: #666;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .image-compare-handle-circle {
+    width: 35px;
+    height: 35px;
+  }
+  
+  .handle-arrow-left,
+  .handle-arrow-right {
+    font-size: 12px;
+  }
+  
+  .handle-arrow-left {
+    left: 6px;
+  }
+  
+  .handle-arrow-right {
+    right: 6px;
+  }
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const containers = document.querySelectorAll('.image-compare-container');
+  
+  containers.forEach(container => {
+    const compare = container.querySelector('.image-compare');
+    const leftImage = container.querySelector('.image-compare-left img');
+    const rightDiv = container.querySelector('.image-compare-right');
+    const slider = container.querySelector('.image-compare-slider');
+    let isResizing = false;
+
+    // Set initial height based on image aspect ratio
+    leftImage.addEventListener('load', function() {
+      const aspectRatio = this.naturalHeight / this.naturalWidth;
+      compare.style.paddingBottom = (aspectRatio * 100) + '%';
+      compare.style.height = '0';
+      compare.style.position = 'relative';
+    });
+
+    // Mouse events
+    function startResize(e) {
+      isResizing = true;
+      document.body.style.cursor = 'col-resize';
+      e.preventDefault();
+    }
+
+    function stopResize() {
+      isResizing = false;
+      document.body.style.cursor = 'default';
+    }
+
+    function handleResize(e) {
+      if (!isResizing) return;
+      
+      const rect = compare.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+      
+      slider.style.left = percentage + '%';
+      rightDiv.style.clipPath = `inset(0 0 0 ${percentage}%)`;
+    }
+
+    // Touch events for mobile
+    function handleTouchResize(e) {
+      if (!isResizing) return;
+      
+      const rect = compare.getBoundingClientRect();
+      const x = e.touches[0].clientX - rect.left;
+      const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+      
+      slider.style.left = percentage + '%';
+      rightDiv.style.clipPath = `inset(0 0 0 ${percentage}%)`;
+    }
+
+    // Event listeners
+    slider.addEventListener('mousedown', startResize);
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', stopResize);
+    
+    // Touch events
+    slider.addEventListener('touchstart', startResize);
+    document.addEventListener('touchmove', handleTouchResize);
+    document.addEventListener('touchend', stopResize);
+    
+    // Prevent image dragging
+    compare.addEventListener('dragstart', e => e.preventDefault());
+  });
+});
+</script>