feat(components): wip form components

.vitepress/theme/index.js

@@ -2,4 +2,20 @@
 import DefaultTheme from 'vitepress/theme'
 import './custom.css'
 
-export default DefaultTheme
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    const components = import.meta.glob('./components/*.vue', { eager: true })
+for (const path in components) {
+  mcomponents[path]().then((c) => {
+    console.log(path, c)
+  })
+}
+    Object.entries(components).forEach(([path, definition]) => {
+      const componentName = path.split('/').pop().replace(/\.\w+$/, '')
+      console.log(componentName)
+      app.component(componentName, definition.default)
+    })
+  }
+}

README.md

@@ -1,6 +1,5 @@
 # NixiN Web
 
-
 ## Building the web site
 npm run docs:build
 
@@ -21,4 +20,4 @@ if you forked this repository, you need to create the secrets needed by the depl
  - DEPLOY_USER : OS user to connect to production server 
  - DEPLOY_TARGET : sftp target where the web site has to be deployed, in the form of server.domain.tld:path
  - DEPLOY_SSH_PRIVATE_KEY : private ssh key used to authenticate with the server
-and configure the server witht the public key corresponding to DEPLOY_SSH_PRIVATE_KEY
+and configure the server with the public key corresponding to DEPLOY_SSH_PRIVATE_KEY

components/ConfigForm.vue

@@ -1,10 +1,16 @@
+<script setup>
+import NixCode from "./NixCode.vue"
+import NixForm from "./NixForm.vue"
+
+</script>
+
 <script>
 export default {
   beforeMount() {
-    this.availableServices.forEach((s, i) => {
+    this.availableServices.forEach((s) => {
       s.inBundle = []
     })
-    this.availableBundles.forEach((b, i) => {
+    this.availableBundles.forEach((b) => {
       b.services.forEach((s) => {
         this.availableServices.find(item => item.id === s).inBundle.push(b.id);
       })
@@ -108,8 +114,6 @@ export default {
 
 <template>
   <h2>Networking</h2>
-
-  <div class="form-row">
     <div class="form-cell">
       <strong>Choose your network configuration</strong>
       <label>
@@ -125,11 +129,9 @@ export default {
         router is set so that my local machine is accessible on the public network
       </label>
       <label>
-        <input type="radio" v-model="netconf" name="netconf" value="wireguard" @click="netconfHasBeenChanged">My server
-        can use a wireguard server i can configure
+        <input type="radio" v-model="netconf" name="netconf" value="wireguard" @click="netconfHasBeenChanged">My server can use a wireguard server i can configure
       </label>
     </div>
-  </div>
 
   <div class="form-row">
     <div class="form-cell">
@@ -150,7 +152,7 @@ export default {
   <div class="form-row">
     <div class="form-cell">
       <strong>Choose your usage bundles (multiple choices possible if your machine can handle it)</strong>
-      <div v-for="bundle in availableBundles">
+      <div v-for="bundle in availableBundles" :key="bundle">
         <label>
           <input type="checkbox" v-model="nixinBundles" :id="bundle.id" :value="bundle.id"
             @change="selectServices(bundle.id, bundle.services)" />
@@ -162,8 +164,9 @@ export default {
 
   <h2>Services</h2>
   <div v-if="nixinBundles.length === 0">👆 Choose any upper bundle to make associated services appear.</div>
-  <div v-for="service in availableServices">
+  <div v-for="service in availableServices" :key="service">
     <label v-if="service.inBundle && service.inBundle.some(ai => nixinBundles.includes(ai))">
+      <NixForm :service="service.id" />
       <input type="checkbox" v-model="nixinServices" :id="service.id" :value="service.id" />
       {{ service.name }}
     </label>
@@ -231,7 +234,9 @@ export default {
 
       time.timeZone = "{{ timezone }}";
       i18n.defaultLocale = "{{ locale }}";
-
+      <div v-for="(service) in nixinServices" :key="service">
+        <NixCode :service-name="service" />
+      </div>
       <div v-if="nixinServices.includes('gotosocial')">
         {
         services.gotosocial = {

components/DynamicComponent.vue

@@ -0,0 +1,18 @@
+<template>
+  <component :is="type"></component>
+</template>
+
+<script>
+  import * as components from './all'
+console.log(components)
+  export default {
+
+    components: {
+      ...components
+    },
+
+    props: {
+      type: { type: String, required: true }
+    },
+  }
+</script>

components/NixCode.vue

@@ -0,0 +1,7 @@
+<script setup>
+const props = defineProps(['service-name'])
+</script>
+
+<template>
+  nixcode {{ serviceName }}
+</template>

components/NixForm-forgejo.vue

@@ -0,0 +1,3 @@
+<template>
+  forgejo
+</template>

components/NixForm-forgejorunner.vue

@@ -0,0 +1,3 @@
+<template>
+  forgejo runner
+</template>

components/NixForm-hedgedoc.vue

@@ -0,0 +1,3 @@
+<template>
+  hedgedoc form
+</template>

components/NixForm-nextcloud.vue

@@ -0,0 +1,3 @@
+<template>
+  nextcloud form
+</template>

components/NixForm-nixin.vue

@@ -0,0 +1,3 @@
+<template>
+  nixin
+</template>

components/NixForm.vue

@@ -0,0 +1,12 @@
+<script setup>
+import {ref} from 'vue'
+import DynamicComponent from "./DynamicComponent.vue"
+
+const props = defineProps(['service'])
+let serviceComponent = 'NixForm'+props.service
+</script>
+
+<template>
+  <dynamic-component :type="serviceComponent" />
+</template>
+

components/all.js

@@ -0,0 +1,5 @@
+export { default as NixFormnextcloud } from './NixForm-nextcloud.vue'
+export { default as NixFormhedgedoc } from './NixForm-hedgedoc.vue'
+export { default as NixFormforgejo } from './NixForm-forgejo.vue'
+export { default as NixFormforgejorunner } from './NixForm-forgejorunner.vue'
+export { default as NixFormnixin } from './NixForm-nixin.vue'