@silexlabs/silex-dashboard 1.0.2 → 1.0.3

package/.silex-client.js

@@ -0,0 +1,27 @@
+import templatePlugin from '/node_modules/@silexlabs/silex/dist/plugins/client/plugins/client/template.js'
+import publishTo from '/node_modules/@silexlabs/silex/dist/plugins/client/plugins/client/publicationRenderer.js'
+
+export default async function(config, options) {
+  console.log('silex-client.js', templatePlugin)
+  // Defaults
+  const opts = {
+    ...options,
+  }
+  await config.addPlugin(templatePlugin)
+  await config.addPlugin(publishTo, {
+    publishTo: 'https://silex.me/publish',
+    css: {
+      frontMatter: true,
+      ext: '.css.liquid',
+      path: '../../pages'
+    },
+    html: {
+      frontMatter: false,
+      path: '../../_includes'
+    },
+    assets: {
+      path: '../../',
+      url: '/',
+    },
+  })
+}

package/{index.js → .silex.js}

@@ -1,13 +1,10 @@
 const fs = require('node:fs/promises')
 const { join } = require('node:path')
 const express = require('express')
+const node_modules = require('node_modules-path')
 const serveStatic = require('serve-static')
 const locale = require('locale')
-
-function withCache(req, res, next) {
-  res.header('Cache-Control', 'public,max-age=86400,immutable') // 24h
-  next()
-}
+const { withCache } = require('@silexlabs/silex/dist/plugins/server/plugins/server/Cache')
 
 module.exports = async function(config, options) {
   // Defaults
@@ -22,11 +19,22 @@ module.exports = async function(config, options) {
 
   // Serve the dashboard and the editor
   config.on('silex:startup:start', ({app}) => {
+    const router = express.Router()
+    app.use(router)
+
+    // Use cache
+    router.use(withCache)
+
+    // Localization populate req.locale
+    router.use(locale(languages.map(l => l.code), opts.defaultLanguage))
+
     // Serve the dashboard
-    const dashRouter = express.Router()
-    dashRouter.use(locale(languages.map(l => l.code), opts.defaultLanguage))
-    dashRouter.use('/', serveStatic(opts.rootPath))
-    app.use(withCache,  dashRouter)
+    router.use('/', serveStatic(opts.rootPath))
+
+    // Serve scripts
+    //router.use('/js/vue/', express.static(node_modules('vue') + '/vue'))
+    //router.use('/js/@silexlabs/silex/', express.static(node_modules('@silexlabs/silex') + '/@silexlabs/silex'))
+    router.use('/', express.static(join(__dirname, 'public')))
 
     // Serve the editor when the ?id param is present in the URL
     const editorRouter = express.Router()

package/_data/api-translations.json

@@ -7,7 +7,9 @@
         "Failed to create website": "Failed to create website",
         "Deleting a website? Are your sure? Really?": "Deleting a website? Are your sure? Really?",
         "Website deleted successfully": "Website deleted successfully",
-        "Failed to delete website": "Failed to delete website"
+        "Failed to delete website": "Failed to delete website",
+        "New name for this website": "New name for this website",
+        "Website renamed successfully": "Website renamed successfully"
     },
     "fr": {
         "Failed to fetch websites": "Erreur, impossible de récupérer la liste des sites",
@@ -17,6 +19,8 @@
         "Failed to create website": "Erreur, le site n\\'a pas été créé",
         "Deleting a website? Are your sure? Really?": "Etes vous sûr.e de vouloir supprimer définitivement ce site ?",
         "Website deleted successfully": "Le site a bien été effacé",
-        "Failed to delete website": "Erreur, le site n\\'a pas été effacé"
+        "Failed to delete website": "Erreur, le site n\\'a pas été effacé",
+        "New name for this website": "Nouveau nom",
+        "Website renamed successfully": "Changement de nom effectué"
     }
 }

package/_includes/api-connectors.js.html

@@ -0,0 +1,47 @@
+<script src="/node_modules/vue/dist/vue.global.js"></script>
+<script src="/js/main.js"></script>
+<script type="module">
+window.addEventListener('load', function() {
+  const { createApp } = Vue;
+  const { api, constants, types } = silex;
+  const {
+    ConnectorType,
+  } = types
+  const {
+    connectorList,
+  } = api
+
+  const App = {
+    data() {
+      return {
+        connectors: [],
+        error: null,
+        message: null,
+        loading: true,
+      }
+    },
+    mounted() {
+      this.init()
+    },
+
+    methods: {
+      async init() {
+        try {
+          this.loading = true
+          console.log('init')
+          this.connectors = await connectorList()
+          console.log('connectors', this.connectors)
+          this.loading = false
+        } catch (error) {
+          console.error(error)
+          this.error = error
+          this.loading = false
+        }
+      },
+    },
+  };
+
+  // Start vue app
+  createApp(App).mount('.app');
+})
+</script>

package/_includes/api-websites.js.html

@@ -0,0 +1,148 @@
+<script src="/node_modules/vue/dist/vue.global.js"></script>
+<script src="/js/main.js"></script>
+<script type="module">
+const CONNECTORS_PATH = '/connectors/'
+window.addEventListener('load', function() {
+  const { createApp } = Vue;
+  const { api, constants, types } = silex;
+  const {
+    ConnectorType,
+  } = types
+  const {
+    getUser,
+    logout,
+    websiteDelete,
+    websiteList,
+    websiteCreate,
+    websiteMetaWrite,
+  } = api
+
+  const App = {
+    data() {
+      return {
+        websites: [],
+        newWebsiteName: '',
+        showCreationForm: false,
+        error: null,
+        message: null,
+        loggedIn: false,
+        loading: true,
+        storage: null,
+        user: null,
+        showMenu: false,
+      }
+    },
+    mounted() {
+      this.init()
+    },
+
+    methods: {
+      async init() {
+        try {
+          // Debug
+          window.app = this
+          const user = await getUser({type: ConnectorType.STORAGE})
+          if(user) {
+            this.user = user
+            this.loggedIn = true
+            this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+            this.loading = false
+          } else {
+            this.openLogin()
+          }
+        } catch (error) {
+          console.error(error)
+          this.loading = false
+          if(error.code === 401) {
+            this.loggedIn = false
+            this.openLogin()
+          } else {
+            this.error = error
+          }
+        }
+      },
+
+      openLogin(id, lang) {
+        //throw new Error('debug')
+        const path = `/{{lang}}${CONNECTORS_PATH}`
+        console.log(window.location.pathname, window.location.path, path)
+        if(window.location.pathname === path) return
+        window.open(path, '_self')
+      },
+
+      openEditor(id, lang) {
+        window.open(`/?id=${id}&lang=${lang}&connectorId=${this.user.storage.connectorId}`, '_blank')
+      },
+
+      async logout() {
+        await logout({
+          type: ConnectorType.STORAGE,
+          connectorId: this.user.storage.connectorId,
+        })
+      },
+
+      async createWebsite() {
+        if (!this.newWebsiteName) throw new Error('{{ api-translations[lang]["You need to provide a website name"] }}')
+        this.loading = true
+        try {
+          const websiteId = this.newWebsiteName.replace(/[/\\?%*:|"<>]/g, '_')
+          const result = await websiteCreate({
+            websiteId,
+            data: {
+              name: this.newWebsiteName,
+              imageUrl: null,
+            },
+            connectorId: this.user.storage.connectorId
+          })
+          this.message = '{{ api-translations[lang]["Website created successfully"] }}'
+          this.newWebsiteName = ''
+          this.showCreationForm = false;
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.loading = false
+          return result
+        } catch (error) {
+          this.loading = false
+          console.error(error)
+          this.error = '{{ api-translations[lang]["Failed to create website"] }}'
+        }
+      },
+
+      async deleteWebsite(websiteId) {
+        const ok = confirm('{{ api-translations[lang]["Deleting a website? Are your sure? Really?"] }}')
+        if (!ok) return
+        this.loading = true
+        try {
+          const result = await websiteDelete({websiteId, connectorId: this.user.storage.connectorId})
+          this.message = '{{ api-translations[lang]["Website deleted successfully"] }}'
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.loading = false
+          return result
+        } catch (error) {
+          this.loading = false
+          this.error = '{{ api-translations[lang]["Failed to delete website"] }}'
+        }
+      },
+
+      async renameWebsite(websiteId) {
+        const website = this.websites.find(w => w.websiteId === websiteId)
+        const name = prompt('{{ api-translations[lang]["New name for this website"] }}', website.name)
+        if (!name) return
+        this.loading = true
+        try {
+          const result = await websiteMetaWrite({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
+          this.message = '{{ api-translations[lang]["Website renamed successfully"] }}'
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.loading = false
+          return result
+        } catch (error) {
+          this.loading = false
+          this.error = '{{ api-translations[lang]["Failed to delete website"] }}'
+        }
+      },
+    },
+  };
+
+  // Start vue app
+  createApp(App).mount('.app');
+})
+</script>

package/_includes/connectors.html

@@ -0,0 +1,74 @@
+
+      <!DOCTYPE html>
+      <html lang="">
+      <head>
+      <link rel="stylesheet" href="/css/connectors.css" />
+      {% render "alternate.liquid" languages: languages lang: lang page: page %}
+
+<style>
+.button { cursor: pointer; }
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.skeleton-anim:after {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  background: 
+    linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
+    linear-gradient(transparent, transparent),
+    radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
+    linear-gradient(transparent, transparent);  
+  background-repeat: no-repeat;
+  background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px; 
+  background-position: -315px 0, 0 0, 0px 190px, 50px 195px; 
+  animation: loading 1.5s infinite;
+}
+
+@keyframes loading {  
+  to {
+    background-position: 200% 0, 0 0, 0 190px, 50px 195px;
+  }
+}
+
+</style>
+      {% render "api-connectors.js.html" frontmatter: frontmatter page: page site: site api-translations: api-translations lang: lang %}
+
+      <title>{{ title }}</title>
+      <link rel="icon" href="" />
+      <meta property="description" content=""/>
+<meta property="og:title" content=""/>
+<meta property="og:description" content=""/>
+<meta property="og:image" content=""/>
+      </head>
+      <body
+            id="i2hcfw"
+            class=" app"
+            
+            
+            ><div
+            id="imgx81"
+            
+            
+            
+            ><div
+            id="in62y2"
+            
+            
+            
+            ><div
+            id="isqe61"
+            
+            v-if="!loading" v-for="(connector, index) in connectors" :key="index"
+            
+            ><div
+            id="i87asw"
+            
+            
+            
+            >Insert your text here</div></div></div></div></body>
+      </html>
+