Erik Vullings erikvullings

WSL2 Docker Swarm Setup Scripts

This repository contains PowerShell scripts to help configure and run a multi-node Docker Swarm cluster using WSL2 on Windows 11, without relying on Docker Desktop. If you need GPU access in your swarm, please read Tom Lankhort's gist.

These scripts automate:

Port forwarding using netsh (TCP and UDP)
Generation of config.toml for wsl2proxy
Service installation and startup of wsl2proxy
Docker Swarm initialization (manager)

Emoji component for mithril

A simple emoji component that you can add to your page. It converts a positive score to a happy green face and a negative score to a disappointed red face.

For a demo, see [here](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB08wgDQgDMBLGHVAbVADsBDAWwjU2zxFgHsrEumB6XgARE6AB3YAneALoCC49jIA6IOkXgALcSWUBuRVX38BAUTrsAVkQEBaASJqSB7AnZob9HKmCkQzlsAIAvALA+gICvhZEAIyoYeECygCyAMwADAAsGAAcAhkArFnZsGnW+QBMOXkpGOXWAJwAbAJNDY1gTdW1Lc2tGTXlPW1DfQNtbQBeSdnR2RgZAtnZ5bDWAOzdNY3W0VkLRdblafN5OTu5pSkH9Rjb-bWHjfOHc9llr9bZG9ut0YVnrUazVK0XKzRSGzqfyKQ1BAnKGWsKRu4K21kaW3h0VuYCRaORt0O2O2GNusAyewa2MG0QJUPyaXhGRBDIE0TSxwubPq+VuAnyryZjL+aQAwtkKhhGdkMtTFhlKgsvtLZicluUJnQdjc6ikUtTVpKLuN7nVWk0wKbhubes1TT0hvabT0JspcPFIpZynEqAlEiAkszOQIUgKcrAjQJGZ0nbao-zKm9Y9btpHSqMHs7SpGrZ0bZrkXMFmkI4n4zGBg7OoyjdZk3nU2X03cxlmymXc7bJklGmlsQs1hT5hGsvVrBh8vVomzohtck8FrMaozyq8oDVF7VYOVedK+Sk5ikQ09p6u+b3CRt8vDeSkkaOQ3M1mUbvUQ8dolBx5VLs8DTt8l5

Thermometer

A simple thermometer component that you can add to your page. It converts a Likert scale score to a fill percentage (0% is empty, 100% is full), and it varies the color between blue and red.

For a demo, see [Flems](https://flems.io/#0=N4IgtglgJlA2CmIBcB2AbAOgBwEYA0IAzvAgMYAu8UyIG5hIBhpATgPayzIDaADHrwC6BAGYQEDJN1AA7AIZhESWgAtyYLgVJsZlXTRABfPLIVLa9RiG274+5QHoHAAghgADmxblnYZyPY-AHJIchUWcSCAbgAdGTiIWxYROVJ4ZwAVFXgWMDZFShYAGQgAaxzyAEFycgiAIwBXSkJnYDjnZwA3OVgG+CRnGQawOpzYmQ6wOQAPAH4BoZGxuMM4m0IfLJy8gpyS8u8BsAwAMVTyLwBPAGF8zxk7cgAeLdz8+EL9iuraiEbmgB8zgAvM4ABQAShBQLaE38DRkFAgOmc7hyaV0cgA5vAMmwAEpyGQ4sFolgY8jY-qDYajFgQha0nKtdrOJzOEoPOQsVxJTywOTkZETEReMANAVIVnsljwQgSnygjbc8gANR6fWcAGpwXYoOreukALTOZXeA19KEAKnBZIpVLZzhwvF4ELirPWPjNao16VBRoAzLwomyXM7eABSD06DbOPUWv3OACsABZgx1Q85I+64bLyA0WBNvQntbqZPrfc4TcXfdbwTgq7b0Y8HWGXRCIeNVvFcx8CxNYRmuhB4AB3AZg4DOQW1QgDKfdQ14XwzEHJ5yGDdQ4Ew1lDz2o5uYnFrsGLzUuKbTOvh8Z7jPs26wLzOLEsORQEe6fyBZx1Q3OBcziylA94dAeIFrgAsoKKgYOwCJQGCpJHpSJ5tq6zg2gATEmSadmBzgHv+mqgjBYTwWwiHIQ2JooeSL

Highlighter

TypeScript highlighter that takes a data object, and applies a highlighting function to selected property values.

I needed to render a data object representing an article. Before rendering it to HTML, I wanted to mark certain parts of the text with a background color.

Create string or regex-based highlighters descriptions
Create a factory function that takes these highlighters and converts them to functions that will wrap matching text with an HTML mark element and background color. It returns a highlighter.
Use the highlighter to convert the original data object to a data object with the same shape, but where matching text is highlighted.

Probeer het uit op [flems.io](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB08wgDQgDMBLGHVAbVADsBDAWwjU2zxFgHsrEumB6AKn4ACAKIAPegAcYQ9gSEBXMESoBzIfAAWEIQAUAIgHkA0kICCugJJDIAJwBuRWBFw32C286Gb48SWFReXlUiLQUAIwwOOl4DE14odlgaeCIIO3sIW14AdyIAayJeC0sAWgAZJJS0jKyhfl4AHSpmiDFJdlt4IRVEWwIaL0tdJHZ8gGUIGk9NACV0hShu4GahIVt0jqpIVCEVqjW1qgU6ADF3KiRd47pwrIBuVcOweGn4a5O720eDw7oaMTjDgbD63B5PNajWABcy2Ww0ACeAB59odDuFbJxdgByABCZgA4tihAAfITYgByAHVccSyS9bCpVD80WscuxONIaCkwBwkBBdgymSzWfAEZIBeSaEgNmA6eSOi8+RB5dichBVNiRWj2ZyoNzsLR6IL4Iy1NrDnkAFb5ZUms3MiGHTQKIhgAD6VCW9uFTrW7AlVHC0yyrroiDFEp95r9QnCCg88CNdGjjt+aNUEAYEC4cHY-NTFrWtiQBHdkCmUDA7ELsfVWVUNEyydr6eepoNyfdmVs+U67xspt9bbWRCug4dRaEmb7kglUCQ7olngg0FbrOnWdXuZbE+HG-jibte5jI6E1vyu6Fp43Y5zqWIyVSkuvaY3AZzwY2tjDiHdY-XVkchSLJeU0Gh-CvIcb1ZSRMUcKhYDSY9XynRV4BQ6C31g+CVCQnNuRTE9sLRZwuExO93SgKBALRG4GHhGhLldJAmX-cdULrEDbDAiDeXzF8sKnaVZQrWxg2mdhwitOB4HY2jnVdMB6KyBS1jg9gEPwmgCD7LomTUoQyNNdhKJLQyGU7QiLOBQTJydABfAA+EUHJ+BzmmaARhHEDsEDADR2SEG4vgCghMToIQaE3ANTK4eomkQzgXiEDpenmTMxCEABeIRYkMSwKQAFUaRoAAoyv

Introduction

Click anywhere in the SVG grid and start a new line. Click again, and the line will be drawn. Try it out in the [playground](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB08wgDQgDMBLGHVAbVADsBDAWwjUwAt46o8RYB7KxPpiAC+uavUbosOfDz4QB6AgFcqCIrwAEsAE4QaiAJJztNNQDcIAcW1EkAZQBqlgBQB3VBqpK6AIwjbcDWYPL19-QJokJCJ4dVooAFEYBj4wAH4PR0skiBT4cgBdAEpMpyycvI1gAB0qDS1eMHgNMDMAcwA5Ow0AXg1qkFZ4AAdUAHox1ymMVwBmDG5tNrGAJgAGDbHWtoGAblr62SataCg7IgAvCF6NAEY1-bqGqmPXW3hmG9cNACoTqDOlwgj0OjWazAgRDarBunz+sFO5yujwOGgmGgAwrp9NcshpoLl5PBUUdmtsbkhuLBvESMDo9IgKkSus5tl1AgNtgMiiCWu0MJB4ABBeDwGw+JSIZwDN5ID4DQKyj5Ybh2MVEKhtZxFHmo7YCiDC0XiyUQaWDSHQ4l4IKW1gqtU2TXa3VPfVNACeMAwPlMAGs2tpuCokBjuFBFjcZcwYhA9rVUeisQzroHbKiCJHnDBmgAPG4PDT5gA8fSVzF2RY0AGo+giAUiIEUqqjQS9mlANdc+pTqXk6djGclmXZWe12f0QJ2qHGQK76vVpxADUb1RKpQNc7cFUWHernTreYuuyuRWvTeaPdubQM1tyjxol6fjUR12bNysd7m906tYfW4+J6CmeJobiAHqfjaEJQva8Cqvuf7zguT7AS+b7mk0QZ+rOHJTjB8A+FASizkhx4zs+55gZh3DYQAtOWO4DNepF8m0GA0MMwzyKGMZQEg2ZdkhQgJk8mbaBo2aGhoHoFpWMmlra+FyTWdaIkCzY1E8bbHEuFJUjSfADimTJ8Cy

A double range slider for mithril

You can specify the minimum and maximum value, the selected range ([min: number, max: number]), and an optional rangeMin distance between the two. A playground is available in [Flems](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfsxABfPDQZN0GeLgK9+EQegD0ygATF6ABx4AneGvp41wNQDFaCPQE8Awj219F8YwEF48XcQBGAV0RgasJqhLoOagDk9MTwLF5QEQDcADrUqRAAHjr6avDWWhBqALLE1EW0GWoAvGoU0dSoatS+9N4Qusb0FY3Nre0Auilp1JnZBqWIuoSWhQAiPL7eMABKtNQA5hAAylDESO3unoGZAkiBh15+ASapamrKAFQPxaWaLWoAbrRQvoUPyrdDKUei02rohndHs9yhk3vRPt9fmp-oCuhkQX1wYCoWottA4IgkGpdGtNsiAdQ7iSNhAAPyNEplCoQ+5PXGILRqMDEABeEGMAAF9tNfFADABGcmAsAc+lNUHtFk4xlwhE-QpteAAdwgii5+IQyCB1FVayJaLhxggGHWGFyPDUtA+PD2uRYhV8kF0+pgCFK60dxNJhR4hDUAFYALThwXC2iiiVSylBmmMuW9MFKtkAeWosBYwbUBeoSBg3pRyb4+eDcoAFNTNgzSjCAJTVAB8nxdSCGwlS6SyegM8hlanmixWwZ2e3ajQsVl0dgcOhG-AAPOOlhBVjTp-tdBcwJ2arW21VO8BATADA2IABRGCMfiNAASABUigAZLZaNYPiBPvALLXsaO6bAAktQWj+K+H6fpB0HwP+gHARABhomBEAITBajvl+2FIY+zioehpQAGqIlhUE4Xh8HUYRAHEVeaGGBU

Mithril Donut chart component

Creates a simple donut chart in mithril (v2.2.2) using TypeScript, including a legend and tooltips. A playground is provided in [flems](https://flems.io/#0=N4IgtglgJlA2CmIBcAWAbAOgMwEYA0IAzvAgMYAu8UyIG5hIBAZhAg0gNqgB2AhmIiS0AFuTCxGIUgHtulOTRABfPD36Da9STLnwFQgPQGABBDAAHaQCdyxsHmPBjAMV4VrATwDC0i7L22SsZMVr7GAOSQ5MJWrOEA3AA63MkQulZMbvDGACKyAK7kXsK8NgDKsBCk2cDJxvXGsLwARiRIxoTksdwA5kncDcYAbryw+fDt3PlgrVb9gzKw1u2d3X3JSsmp6ZnVuQVFJTYAguRdhI51DVC85LzteVOHpeQVVfAcALrzDWnc8FYAEq8KAQfKESbTWY-erSQoA4Gg8GQmYA-qbFLcHSdfZPYovdqudxWby+Sz-OQAHkehXxJzOVkIAD5jABeS4DBpDCDwADu7QAFE5budjEoAJRslm1TmDerY2xOG53Bx-BEgsGEBxwyhAjXgsVs4wixn9K5y4xGYxeUakfJNSjGcjSO6wYajcbmuUKp0u0YANQ92XZyt4GCsVHy1QFArcpAchEq1UlrJZceMAGoOkn4BgRmN4A4AAzis2yuVWm2wO0O7K8XpsL2DBC2TovY4N4PGIswuUt4x6KAdnoII09psNH2lUgQxzGKArLppHoOFiwWCLtYOJqtDcdJe9Bz58Yo2YOO1ge23CBDeCBgungFir5Gr69wahjBMawAUTcwgFRN3ilDkLQtKdOyNQCczzINLV9V173GSUACpjCwNBx3LMCB24IdIPZNsTkgrN6xHeAyxwhZZBxIjyGHBBESguiGOyABaYwAE4S2MNCAFlbmEDAAAUAEl4JwAAOLCqMnGjbEHVimPZAVFM

	services:
	traefik: # Your Traefik service name as defined in your compose file
	image: traefik:v3.3.6 # Use the specific version
	command:
	# Enable the API and Dashboard without TLS
	- --api.insecure=true
	# Listen on the 'web' entrypoint (HTTP) on the new internal port 8091
	- --entrypoints.web.address=:8091
	# Listen on the 'dashboard' entrypoint on the new internal port 8092
	- --entrypoints.dashboard.address=:8092

	import { registerPlugin } from 'mithril-ui-form';
	import { searchSelectPlugin } from './search-select-plugin';

	// Register plugin under the name `search_select` or any other name of your choosing.
	registerPlugin('search_select', searchSelectPlugin);