wip not reactive highlighting

.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>
+ 

package.json

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