@silexlabs/silex-dashboard 1.0.2 → 1.0.4

package/.silex-client.js

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

package/.silex.js

@@ -0,0 +1,78 @@
+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')
+const { withCache } = require('@silexlabs/silex/dist/plugins/server/plugins/server/Cache')
+const { ServerEvent } = require('@silexlabs/silex').events
+
+const { ConnectorType } = require('@silexlabs/silex/dist/server/types')
+const FtpConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/FtpConnector').default
+const GitlabConnector = require('@silexlabs/silex/dist/plugins/server/plugins/server/GitlabConnector').default
+const {FsStorage} = require('@silexlabs/silex/dist/server/server/connectors/FsStorage')
+const {FsHosting} = require('@silexlabs/silex/dist/server/server/connectors/FsHosting')
+
+module.exports = async function(config, options) {
+  // Defaults
+  const opts = {
+    defaultLanguage: 'en',
+    rootPath: join(__dirname, '_site'),
+    ...options,
+  }
+
+  config.addHostingConnector([
+    new FsHosting(config, {
+      path: process.env.SILEX_FS_ROOT,
+    }),
+    new FtpConnector(config, {
+      type: ConnectorType.HOSTING,
+    }),
+  ])
+
+  //config.addStorageConnector([
+  //  //new FsStorage(config, {
+  //  //  path: process.env.SILEX_FS_ROOT,
+  //  //}),
+  //  new FtpConnector(config, {
+  //    type: ConnectorType.STORAGE,
+  //  }),
+  //  new GitlabConnector(config, {
+  //    clientId: process.env.GITLAB_CLIENT_ID,
+  //    clientSecret: process.env.GITLAB_CLIENT_SECRET,
+  //  }),
+  //])
+
+  // Detect language from browser
+  const languages = JSON.parse(await fs.readFile(join(__dirname, '_data/languages.json')))
+
+  // Serve the dashboard and the editor
+  config.on(ServerEvent.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
+    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()
+    console.log('dashboard route /', {opts})
+    editorRouter.use('/', (req, res, next) => {
+      console.log('dashboard route / called', req.path, req.query.id, req.locale)
+      if (req.path === '/' && !req.query.id) res.redirect(`/${req.locale}/`)
+      else next()
+    })
+    app.use(editorRouter)
+  })
+}

package/_data/api-translations.json

@@ -7,7 +7,15 @@
         "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",
+        "Login failed": "Error, login failed.",
+        "Logout": "Logout",
+        "Logging out": "Logging out",
+        "Back to home": "< Back",
+        "Welcome to Silex": "Welcome to Silex",
+        "Please login to continue": "Please login to continue"
     },
     "fr": {
         "Failed to fetch websites": "Erreur, impossible de récupérer la liste des sites",
@@ -17,6 +25,14 @@
         "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é",
+        "Login failed": "Erreur, impossible de se connecter.",
+        "Logout": "Déconnexion",
+        "Logging out": "Déconnexion en cours",
+        "Back to home": "< Retour",
+        "Welcome to Silex": "Bienvenue sur Silex",
+        "Please login to continue": "Merci de vous connecter pour continuer"
     }
 }

package/_includes/api-connectors.js.html

@@ -0,0 +1,86 @@
+<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,
+    logout,
+  } = api
+
+  const App = {
+    data() {
+      return {
+        connectors: [],
+        error: null,
+        message: null,
+        loading: true,
+        lastConnector: null,
+      }
+    },
+    mounted() {
+      this.init()
+      window.addEventListener('message', (event) => {
+        if(event.data && event.data.type === 'login') {
+          this.loginResult(event.data)
+        }
+      })
+    },
+
+    methods: {
+      async init() {
+        try {
+          this.loading = true
+          console.log('init')
+          this.connectors = await connectorList({type: ConnectorType.STORAGE})
+          console.log('connectors', this.connectors)
+          this.loading = false
+        } catch (error) {
+          console.error(error)
+          this.error = error
+          this.loading = false
+        }
+      },
+      openLogin(connector) {
+        this.lastConnector = connector
+        const nonOAuthUrl = `${constants.API_PATH}${constants.API_CONNECTOR_PATH}${constants.API_CONNECTOR_LOGIN}?connectorId=${connector.connectorId}&type=${connector.type}`
+        console.log('openLogin', connector.oauthUrl, nonOAuthUrl)
+        window.open(connector.oauthUrl || nonOAuthUrl, '_blank')
+      },
+      loginResult(data) {
+        console.log('loginResult', data)
+        if(data.error) {
+          this.error = data.error
+          this.message = `{{ api-translations[lang]["Login failed"] }} ${data.message}`
+        } else {
+          window.location.href = '/'
+        }
+      },
+      async logout() {
+        try {
+          this.message = '{{ api-translations[lang]["Logging out"] }}'
+          await logout({type: ConnectorType.STORAGE, connectorId: this.lastConnector.connectorId})
+          this.loggedIn = false
+          this.user = null
+          this.websites = []
+          this.loading = false
+          this.message = ''
+          this.error = false
+        } catch (error) {
+          console.error(error)
+          this.error = error
+          this.message = error.message
+          this.loading = false
+        }
+      },
+    },
+  };
+
+  // Start vue app
+  createApp(App).mount('.app');
+})
+</script>

package/_includes/api-websites.js.html

@@ -0,0 +1,149 @@
+<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 || error.httpStatusCode === 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,
+        })
+        window.location.reload()
+      },
+
+      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,99 @@
+
+      <!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"
+            
+            
+            ><A
+            id="ixzhcr" href="/"
+            class="button button-bar__item--secondary "
+            
+            
+            >{{ api-translations[lang]["Back to home"] }}</A><div
+            id="imgx81"
+            
+            
+            
+            ><H1
+            
+            
+            
+            
+            >{{ api-translations[lang]["Welcome to Silex"] }}</H1><div
+            
+            class="subtitle "
+            
+            
+            >{{ api-translations[lang]["Please login to continue"] }}</div><div
+            id="in62y2"
+            class="button-bar "
+            
+            
+            ><A
+            id="isqe61" href="https://"
+            class="h-space button-bar__item--main button-bar_item button big-button "
+            v-if="!loading" v-for="(connector, index) in connectors" :key="index" :style="{ backgroundColor: connector.background, color: connector.color }" @click="openLogin(connector)"
+            
+            ><div
+            id="i87asw"
+            
+            v-text="connector.displayName"
+            
+            >Insert your text here</div></A></div><div
+            id="i9msnk"
+            
+            v-if="error" v-html="message"
+            
+            >Insert your text here</div><div
+            id="i6akll"
+            class="button button--tertiary "
+            v-if="error" @click="logout()"
+            
+            >{{ api-translations[lang]["Logout"] }}</div></div></body>
+      </html>
+