wip not reactive highlighting

.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,6 +1,7 @@
 <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';
 
@@ -210,6 +211,7 @@ function selectServices(bundleId, services) {
   </div>
 
   <h2>Auto-generated configuration.nix file</h2>
+  <NixPreview />
   <pre class="nix-code">
     <code>
 { pkgs, ... }:
@@ -246,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>
+