feat: use pre for code templates and add informations about template name

.vitepress/theme/custom.css

@@ -34,3 +34,19 @@
   width: 100%;
   display: block;
 }
+
+.dynamic-component.code:before {
+  content: attr(data-name);
+  position: absolute;
+  color: blue;
+  top: -1.4em;
+  left: 0em;
+  font-size: 0.8em;
+}
+.dynamic-component.code {
+  position: relative;
+  border: blue 1px dotted;
+  padding: 1em;
+  margin: 1em 0;
+  white-space: pre-wrap;
+}

components/DynamicComponent.vue

@@ -1,10 +1,9 @@
 <template>
-  <component :is="type"></component>
+  <component :is="type" class="dynamic-component" :class="type.split('-')[1]" :data-name="type.split('-')[2]"></component>
 </template>
 
 <script>
   let mod = []
-  
   // we autoload all components in form and nix-code folders
   let comp = import.meta.glob('./{form,nix-code}/*.vue', { eager: true })
   Object.entries(comp).forEach(([path, definition]) => {
@@ -20,7 +19,7 @@
     const componentName = c[3]+'-'+c[4].replace(/\.\w+$/, '')
     mod[componentName] = definition.default
   })
-  console.log(mod)
+   
   export default {
 
     components: {

components/nix-code/lemmy.vue

@@ -1,6 +1,6 @@
 <template>
-        let
-
+  <pre>
+let {
   # add nginx reverse proxy and ACME web certificate
   add_nginx = true;
   nginx_ports = [ 80 443 ];
@@ -27,8 +27,7 @@
 
   acmeDomain = lemmy.domain;
   nginxVhost = lemmy.domain;
-
-        in {
+} in {
 
     security.acme = lib.mkIf add_nginx {
     # TODO: change this to true if you accept
@@ -235,6 +234,6 @@
     };
     };
     }
-
+  </pre>
 </template>
 

components/nix-code/peertube.vue

@@ -1,4 +1,5 @@
 <template>
+  <pre>
 networking.extraHosts = ''
         127.0.0.1 peertube.local
         '';
@@ -56,5 +57,6 @@
         };
 
         };
+  </pre>
 </template>