wip not reactive highlighting

.forgejo/workflows/artifact.yaml

@@ -1,22 +0,0 @@
-name: "create artifact with nixin website"
-on:
-  push:
-    branches:
-      - prod
-jobs:
-  build:
-    name: Build and upload artefact of website
-    runs-on: debian-latest
-    steps:
-      - name: checkout repository
-        uses: actions/checkout@v4
-      - name: npm ci
-        run: npm ci
-      - name: vitepress build
-        run: npm run docs:build
-      - name: create artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: nixin-website.zip
-          path: |
-            .vitepress/dist

.gitignore

@@ -1,7 +1,6 @@
 .DS_Store
 *.qcow2
+result
+node_modules
 cache
 dist
-node_modules
-out
-result

.vitepress/config.mts

@@ -1,58 +1,55 @@
-import { defineConfig } from "vitepress";
+import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "NixiN",
   description: "A webUI to configure NixOS machines",
-  base: "/",
+  base: '/',
   head: [
-    [
-      "link",
-      { rel: "shortcut icon", href: "logo-nixin.svg", type: "image/svg" },
-    ],
+    ['link', { rel: 'shortcut icon', href: 'logo-nixin.svg', type: 'image/svg' }]
   ],
   lastUpdated: true,
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     footer: {
-      message: "Handcrafted with ❤️ by the DistriLab",
-      copyright: "Copyleft © 2024-present the DistriLab - AGPL3 licence",
+      message: 'Handcrafted with ❤️ by the DistriLab',
+      copyright: 'Copyleft © 2024-present the DistriLab - AGPL3 licence'
     },
-    logo: "/logo-nixin.svg",
+    logo: '/logo-nixin.svg',
     nav: [
-      { text: "Home", link: "/" },
-      { text: "Documentation", link: "/about" },
-      { text: "Generate my configuration", link: "configure" },
+      { text: 'Home', link: '/' },
+      { text: 'Documentation', link: '/about' },
+      { text: 'Generate my configuration', link: 'configure' },
     ],
     search: {
-      provider: "local",
+      provider: 'local'
     },
     sidebar: [
       {
-        text: "The NixiN Project",
+        text: 'The NixiN Project',
         items: [
-          { text: "About", link: "/about" },
-          { text: "Technical principles", link: "/technical-principles" },
-          { text: "Roadmap", link: "/roadmap" },
-        ],
+          { text: 'About', link: '/about' },
+          { text: 'Technical principles', link: '/technical-principles' },
+          { text: 'Roadmap', link: '/roadmap' },
+        ]
       },
       {
-        text: "Getting started",
+        text: 'Getting started',
         items: [
-          { text: "Local installation", link: "/installation" },
-          { text: "Build virtual machine", link: "/build-virtual-machine" },
-        ],
-      },
+          { text: 'Local installation', link: '/installation' },
+          { text: 'Build virtual machine', link: '/build-virtual-machine' },
+        ]
+      }
     ],
 
     socialLinks: [
-      { icon: "github", link: "https://git.distrilab.fr/NixiN" },
+      { icon: 'github', link: 'https://git.distrilab.fr/NixiN' }
       //{ icon: 'mastodon', link: 'https://mastodon.cc/@mrflos' }
-    ],
+    ]
   },
 
-  ignoreDeadLinks: [
+  ignoreDeadLinks:[
     // ignore all localhost links
     /^https?:\/\/localhost/,
-  ],
-});
+   ]
+})

.vitepress/theme/custom.css

@@ -57,3 +57,7 @@
   margin: 1em 0;
   white-space: pre-wrap;
 }
+
+.nix-preview .shiki {
+  padding: 0.5em;
+}

components/ConfigForm.vue

@@ -1,13 +1,15 @@
 <script setup>
 import NixCode from "./NixCode.vue"
 import NixForm from "./NixForm.vue"
+import NixPreview from "./NixPreview.vue"
 import { provide, ref } from 'vue'
+import { listTz, clientTz } from 'timezone-select-js';
 
 const availableLanguages = {
   'en_US.UTF-8': 'English',
   'fr_FR.UTF-8': 'Francais'
 }
-const availableTimezones = Intl.supportedValuesOf('timeZone') 
+const availableTimezones = listTz() 
 let nixin = {
   netconf: 'autoconfig',
   networkingHostname: '',
@@ -71,7 +73,7 @@ let nixin = {
     }],
   bundles: [],
   services: [],
-  timezone: 'UTC',
+  timezone: 'Europe/Belfast', // default to UTC but could be found with clientTz(),
   locale: 'en_US.UTF-8',
   operatingUser: 'operator',
   operatingUserPassword: 'CHANGE ME !!!',
@@ -195,7 +197,7 @@ function selectServices(bundleId, services) {
     <div class="form-cell">
      <label>Timezone</label>
      <select v-model="nixin.timezone">
-       <option v-for="tz in availableTimezones" :selected="nixin.timezone === tz" v-bind:value="tz">{{ tz }}</option>
+       <option v-for="tz in availableTimezones" :selected="nixin.timezone === tz.value" v-bind:value="tz.value">{{ tz.label }}</option>
      </select>
     </div>
   </div>
@@ -209,6 +211,7 @@ function selectServices(bundleId, services) {
   </div>
 
   <h2>Auto-generated configuration.nix file</h2>
+  <NixPreview />
   <pre class="nix-code">
     <code>
 { pkgs, ... }:
@@ -245,7 +248,7 @@ function selectServices(bundleId, services) {
       commands = [
         { 
           command = "ALL" ;
-          options= [ "NOPASSWD" ]; # "SETENV" # Adding the following could be a good idea
+          options= [ "NOPASSWD" ];
         }
       ];
     }

components/NixPreview.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { createHighlighterCoreSync } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import nix from 'shiki/langs/nix.mjs'
+import nord from 'shiki/themes/nord.mjs'
+import { inject, toRaw } from 'vue'
+
+let nixin = inject('nixin')
+let n = toRaw(nixin)._rawValue
+const shiki = createHighlighterCoreSync({
+  themes: [nord],
+  langs: [nix],
+  engine: createJavaScriptRegexEngine()
+})
+let html = shiki.codeToHtml(`{ pkgs, ... }:
+
+{
+  networking.hosts = {
+      "127.0.0.1" = [ "${ n.networkingHostname }.${ n.networkingDomain}" ];
+  };
+
+  networking.hostName = "${ n.networkingHostname }";
+  networking.domain = "${ n.networkingDomain }";
+  networking.firewall = {
+    allowedTCPPorts = [
+      80
+      443
+    ];
+  };
+
+  time.timeZone = "${ n.timezone }";
+  i18n.defaultLocale = "${ n.locale }";
+<div v-for="(service) in nixin.services" :key="service">
+<NixCode :service="service"/>
+</div>
+
+  users.users.${ n.operatingUser } = {
+      isNormalUser = true;
+      extraGroups = [ "wheel" ];
+      initialPassword = "${ n.operatingUserPassword }";
+  };
+
+  security.sudo.extraRules= [
+    {
+      users = [ "${ n.operatingUser }" ];
+      commands = [
+        { 
+          command = "ALL" ;
+          options= [ "NOPASSWD" ];
+        }
+      ];
+    }
+  ];
+
+  security.acme.defaults.email = "contact@nixin.local";
+  security.acme.acceptTerms = true;
+
+  services.nginx = {
+    enable = true;
+
+    # Use recommended settings
+    recommendedGzipSettings = true;
+    recommendedOptimisation = true;
+    recommendedProxySettings = true;
+    recommendedTlsSettings = true;
+
+    # Only allow PFS-enabled ciphers with AES256
+    sslCiphers = "AES256+EECDH:AES256+EDH:!aNULL";
+
+  };
+
+  environment.systemPackages = with pkgs; [
+    git
+    wget
+    tmux
+    mosh
+    htop
+  ];  
+
+  system.stateVersion = "24.05";
+}
+`, { lang: 'nix', theme: 'nord' })
+</script>
+
+<template>
+  <div class="nix-preview" v-html="html" />
+</template>
+ 

how-to-run-a-vm-with-nat-bridged-network.md

@@ -1,47 +0,0 @@
-create a bridge configuration file, /tmp/virbro.xml :  
-```xml
-<network>
-  <name>default</name>
-  <uuid>9014424a-8422-40ec-94d1-9f593b98cb7a</uuid>
-  <forward mode="nat"/>
-  <bridge name="virbr0" stp="on" delay="0"/>
-  <mac address="52:54:00:ed:60:11"/>
-  <ip address="192.168.122.1" netmask="255.255.255.0">
-    <dhcp>
-      <range start="192.168.122.2" end="192.168.122.254"/>
-    </dhcp>
-  </ip>
-</network>
-```
-
-apply bridge configuration :  
-```sh
-virsh net-define /tmp/virbr0.xml
-virsh net-start virbr0
-```
-
-optionnaly, make it to auto start :  
-```sh
-virsh net-autostart virbr0
-```
-
-
-copy the VM start script 
-```sh
-cp /nix/store/iim2hsbfj7kbxfygn741ica52fka6xk3-nixos-vm/bin/run-hedgedoc-vm ./run-vm-2
-```
-
-change network options : 
-```sh
-<     -net nic,netdev=user.0,model=virtio -netdev user,id=user.0,"$QEMU_NET_OPTS" \
----
->     -net nic,netdev=user.0,model=virtio -netdev bridge,br=virbr0,id=user.0,"$QEMU_NET_OPTS" \
-```
-
-
-
-run the VM : 
-```sh
-QEMU_NET_OPTS=helper=/run/wrappers/bin/qemu-bridge-helper ./run-vm-2
-```
-

inventory/nixin.nix

@@ -1,239 +0,0 @@
-{
-  pkgs,
-  config,
-  lib,
-  ...
-}:
-let
-  nixin-web = pkgs.stdenv.mkDerivation {
-    pname = "nixin-web";
-    version = "0.1-alpha";
-    src = pkgs.fetchzip {
-      url = "https://git.distrilab.fr/NixiN/nixin-web/actions/runs/85/artifacts/nixin-website.zip";
-      hash = "sha256-+cgWvbmjV9xckRCeRaj1dWqowBRbe/5497FcoZW+5ec=";
-      stripRoot = false;
-    };
-    dontConfigure = true;
-    dontBuild = true;
-    installPhase = ''
-      mkdir -p $out
-      cp -a -T $src $out
-    '';
-  };
-in
-{
-  networking.hosts = {
-    "127.0.0.1" = [ "nixin.chmok.net" ];
-  };
-
-  networking.hostName = "nixin";
-  networking.domain = "chmok.net";
-  networking.firewall = {
-    allowedUDPPorts = [
-      53 # forgejo-runner
-      8098 # wireguard
-    ];
-    allowedTCPPorts = [
-      22 # ssh
-      80 # http
-      443 # https
-    ];
-  };
-  networking.nameservers = [
-    "80.67.169.12"
-    "2001:910:800::12"
-    "80.67.169.40"
-    "2001:910:800::40"
-  ];
-  networking.wg-quick.interfaces = {
-    wg0 = {
-      address = [ "10.42.0.9/32" ];
-      privateKey = "2M0w52jHmX5AgPw4V7Kq1hoZaEWa7H6NBoPfy/RbanQ=";
-      peers = [
-        {
-          publicKey = "2MZzEGJzA3HrwkHf91TaKJEHwCNyVvsTLWoIYHrCxhY=";
-          presharedKey = "DjbQfcvrc1cfk0nQNGqak4QZr46MW9WEovNK170mg+A=";
-          allowedIPs = [ "10.42.0.0/24" ];
-          endpoint = "195.201.63.240:8098";
-          persistentKeepalive = 15;
-        }
-      ];
-    };
-  };
-
-  time.timeZone = "UTC";
-  i18n.defaultLocale = "en_US.UTF-8";
-
-  users.users.operator = {
-    isNormalUser = true;
-    extraGroups = [ "wheel" ];
-    initialPassword = "CHANGE ME !!!";
-  };
-
-  security.sudo.extraRules = [
-    {
-      users = [ "operator" ];
-      commands = [
-        {
-          command = "ALL";
-          options = [ "NOPASSWD" ]; # "SETENV" # Adding the following could be a good idea
-        }
-      ];
-    }
-  ];
-
-  services.forgejo = {
-    enable = true;
-    database.type = "postgres";
-    # Enable support for Git Large File Storage
-    lfs.enable = true;
-    settings = {
-      server = {
-        DOMAIN = "forge.chmok.net";
-        # You need to specify this to remove the port from URLs in the web UI.
-        ROOT_URL = "https://forge.chmok.net/";
-        HTTP_PORT = 3000;
-      };
-      # You can temporarily allow registration to create an admin user.
-      service.DISABLE_REGISTRATION = true;
-      # Add support for actions, based on act: https://github.com/nektos/act
-      actions = {
-        ENABLED = true;
-        DEFAULT_ACTIONS_URL = "github";
-      };
-      # Sending emails is completely optional
-      # You can send a test email from the web UI at:
-      # Profile Picture > Site Administration > Configuration > Mailer Configuration
-      mailer = {
-        ENABLED = true;
-        SMTP_ADDR = "mail.chmok.net";
-        FROM = "noreply@${config.services.forgejo.settings.server.DOMAIN}";
-        USER = "noreply@${config.services.forgejo.settings.server.DOMAIN}";
-        PASSWD = "CHANGE ME !!!";
-      };
-    };
-  };
-
-  virtualisation.containers.enable = true;
-  virtualisation.podman = {
-    enable = true;
-    # Create a `docker` alias for podman, to use it as a drop-in replacement
-    dockerCompat = true;
-    # Required for containers under podman-compose to be able to talk to each other.
-    defaultNetwork.settings.dns_enabled = true;
-  };
-
-  services.gitea-actions-runner = {
-    package = pkgs.forgejo-runner;
-    instances.default = {
-      enable = true;
-      name = "nixinrunner";
-      url = "https://forge.chmok.net";
-      token = "S3uBKr4HsnxILAVA40ikLCNdAdKYxqcIGoqH1ihA";
-      labels = [
-        # provide a debian base with nodejs for actions
-        "debian-latest:docker://node:20-bookworm"
-        # fake the ubuntu name, because node provides no ubuntu builds
-        "ubuntu-latest:docker://node:20-bookworm"
-        # nixos
-        "nixos:docker://nixos/nix:latest"
-        # provide native execution on the host
-        #"native:host"
-      ];
-    };
-  };
-
-  services.openssh.enable = true;
-  services.openssh.ports = [ 22 ];
-  services.openssh.settings = {
-    PermitRootLogin = "no";
-    PasswordAuthentication = false;
-    KbdInteractiveAuthentication = false;
-  };
-  security.acme.defaults.email = "contact@nixin.local";
-  security.acme.acceptTerms = true;
-
-  services.nginx = {
-    enable = true;
-
-    # Use recommended settings
-    recommendedGzipSettings = true;
-    recommendedOptimisation = true;
-    recommendedProxySettings = true;
-    recommendedTlsSettings = true;
-
-    # Only allow PFS-enabled ciphers with AES256
-    sslCiphers = "AES256+EECDH:AES256+EDH:!aNULL";
-
-    virtualHosts."forge.chmok.net" = {
-      extraConfig = ''
-        client_max_body_size 512M;
-      '';
-      forceSSL = true;
-      enableACME = true;
-      locations."/".proxyPass =
-        "http://localhost:${toString config.services.forgejo.settings.server.HTTP_PORT}";
-    };
-  };
-
-  systemd.services.forgejo.preStart =
-    let
-      forgejoCmd = "${lib.getExe config.services.forgejo.package}";
-      adminCmd = "${forgejoCmd} admin user";
-      pwd = "CHANGE ME !!!";
-      user = "operator";
-      mail = "root@forge.chmok.net";
-    in
-    ''
-        # create admin
-        ${adminCmd} create --admin --email "${mail}" --username ${user} --password "${pwd}" || true
-        ## uncomment this line to change an admin user which was already created
-        # ${adminCmd} change-password --username ${user} --password "${pwd}" || true
-
-        # link forgejo runner and forgejo
-        ${forgejoCmd} forgejo-cli actions register --keep-labels --name nixin-runner \
-      --secret 7c31591e8b67225a116d4a4519ea8e507e08f71f || true
-
-        # forgejo-runner create-runner-file --instance https://example.conf \
-        #  --secret 7c31591e8b67225a116d4a4519ea8e507e08f71f
-        # create nixin repository
-
-        # create password-store repository
-    '';
-
-  environment.systemPackages =
-    with pkgs;
-    let
-    in
-    #nixin-web = buildNpmPackage {
-    #  pname = "nixin-web";
-    #  version = "0.1-alpha";
-    #  src = fetchgit {
-    #    url = "https://git.distrilab.fr/NixiN/nixin-web";
-    #    rev = "30384e64854b04e1f51ba68c3874765e141e9fc1";
-    #    hash = "sha256-ERx6GX/qaiZXMzaLXuWTq4FxJ3RYy/LtkC2/kstF9nw=";
-    #  };
-    #  makeCacheWritable = true;
-    #  npmDepsHash = "sha256-0YIrAMbM1CtInq1XPs/5r8FhOzE7bKXMoN23vm/ihEA=";
-    #  npmBuildScript = "docs:build";
-    #};
-    #indication = "the code above keep stuck because vite and nixos are'nt friends";
-    [
-      nixin-web
-      git
-      wget
-      tmux
-      mosh
-      htop
-      neovim
-      pass
-    ];
-
-  services.nginx.virtualHosts."nixin.chmok.net" = {
-    forceSSL = true;
-    enableACME = true;
-    locations."/".root = ''${nixin-web}'';
-    locations."/".index = "index.html";
-  };
-  system.stateVersion = "24.05";
-}

package.json

@@ -13,5 +13,8 @@
   },
   "devDependencies": {
     "vitepress": "^1.3.3"
+  },
+  "dependencies": {
+    "timezone-select-js": "^2.0.1"
   }
 }