@silexlabs/silex-dashboard 1.0.41 → 1.0.44

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@silexlabs/silex-dashboard",
-  "version": "1.0.41",
+  "version": "1.0.44",
   "description": "Dashboard for Silex v3",
-  "main": ".silex.js",
+  "main": "silex/server-config.js",
   "scripts": {
-    "start": "silex --server-config `pwd`/.silex.js --cors-url * --fs-root `pwd`/_silex --client-config `pwd`/.silex-client.js --debug",
-    "build": "eleventy",
-    "serve": "eleventy --serve"
+    "start": "concurrently --kill-others \"$npm_execpath run silex:dev\" \"$npm_execpath run 11ty:dev\" \"$npm_execpath run tina:dev\"",
+    "build": "start-server-and-test tina:dev http://localhost:4001 11ty:build",
+    "silex:dev": "silex --cors-url * --fs-root `pwd`/silex/websites --fs-hosting-root `pwd`/templates --server-config `pwd`/silex/server-config.js --client-config `pwd`/silex/client-config.js --debug",
+    "11ty:dev": "npm run 11ty:build -- --serve",
+    "11ty:build": "eleventy --config=./11ty/eleventy.config.mjs",
+    "tina:dev": "tinacms dev",
+    "tina:build": "tinacms build"
   },
   "repository": {
     "type": "git",
@@ -23,13 +27,18 @@
   },
   "homepage": "https://github.com/silexlabs/silex-dashboard#readme",
   "devDependencies": {
-    "@11ty/eleventy": "^2.0.1",
-    "@silexlabs/silex": "^3.0.0-alpha.122"
+    "@11ty/eleventy": "^3.0.0-alpha.5",
+    "@silexlabs/silex": "^3.0.0-alpha.151",
+    "@silexlabs/silex-cms": "^0.0.112",
+    "@tinacms/cli": "^1.5.43",
+    "@types/node": "^20.12.7",
+    "concurrently": "^8.2.2",
+    "start-server-and-test": "^2.0.3"
   },
   "dependencies": {
     "locale": "^0.1.0",
     "node_modules-path": "^2.0.7",
     "serve-static": "^1.15.0",
-    "vue": "^3.3.7"
+    "vue": "^3.4.23"
   }
 }

package/silex/client-config.js

@@ -0,0 +1,24 @@
+import SilexCms from './js/silex-cms/client.js'
+
+export default async function (config, options) {
+  // Defaults
+  const opts = {
+    ...options,
+  }
+  config.addPlugin(SilexCms, {
+    dataSources: [{
+      id: 'tina',
+      type: 'graphql',
+      name: 'Tina (Local Files)',
+      url: 'http://localhost:4001/graphql',
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    }],
+    imagePlugin: false,
+    i18nPlugin: true,
+    cacheBuster: false,
+    fetchPlugin: false,
+  })
+}

package/{.silex.js → silex/server-config.js}

@@ -26,12 +26,6 @@ module.exports = async function(config, options) {
     ...options,
   }
 
-  config.setHostingConnectors([
-    new FsHosting(config, {
-      path: process.env.SILEX_FS_ROOT,
-    }),
-  ])
-
   //config.addStorageConnector([
   //  //new FsStorage(config, {
   //  //  path: process.env.SILEX_FS_ROOT,
@@ -48,19 +42,17 @@ module.exports = async function(config, options) {
   // Serve vue from node_modules
   config.addPlugin(StaticPlugin, {
     routes: [{
-      path: nodeModules('vue') + '/vue/dist',
-      route: '/js',
-    }, {
-      path: nodeModules('@silexlabs/silex') + '/@silexlabs/silex/dist/plugins/client/plugins/client/',
-      route: '/js',
-    }, {
-      path: nodeModules('lit-html') + '/lit-html/',
-      route: '/js/lit-html/',
+      route: '/js/silex-cms/',
+      path: node_modules('@silexlabs/silex-cms') + '/@silexlabs/silex-cms/dist/',
     }],
   })
 
   // Detect language from browser
-  const languages = JSON.parse(await fs.readFile(join(__dirname, '_data/languages.json')))
+  // List of languages from collections/languages/*.json
+  const languages = []
+  for (const file of await fs.readdir(join(__dirname, '..', 'collections/languages'))) {
+    languages.push(JSON.parse(await fs.readFile(join(__dirname, '..', 'collections/languages', file))))
+  }
 
   // Serve the dashboard and the editor
   config.on(ServerEvent.STARTUP_START, ({app}) => {
@@ -79,7 +71,7 @@ module.exports = async function(config, options) {
     // 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')))
+    router.use('/', express.static(join(__dirname, '..', '_site')))
 
     // Serve the editor when the ?id param is present in the URL
     const editorRouter = express.Router()

package/templates/connectors-en.11tydata.mjs

@@ -0,0 +1,56 @@
+
+
+export default async function (configData) {
+  const data = {
+    ...configData,
+    lang: 'en',
+  }
+  const result = {}
+  try {
+  result['tina'] = (await (await fetch(`http://localhost:4001/graphql`, {
+
+  headers: {
+    'Content-Type': `application/json`,
+  },
+  method: 'POST',
+  body: JSON.stringify({
+    query: `query {
+__typename
+connectorsConnection {
+  __typename
+  edges {
+    __typename
+    node {
+      __typename
+      subtitle
+      help
+      recommended
+      advanced_users
+      connectors {
+        __typename
+        background_color
+        color
+        auth_url
+        description
+        icon
+        text
+
+      }
+      lang
+
+    }
+
+  }
+
+}
+
+}`,
+  })
+  })).json()).data
+} catch (e) {
+  console.error('11ty plugin for Silex: error fetching graphql data', e, 'tina', 'http://localhost:4001/graphql')
+  throw e
+}
+  return result
+}
+  

package/templates/connectors-en.html

@@ -0,0 +1,440 @@
+---
+permalink: "/{{ lang }}/connectors/"
+lang: "en"
+collection: "Connectors"
+
+---
+<!DOCTYPE html>
+<html lang="">
+<head>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="/css/connectors-61bd21c2345101e48cc530cacf3afc0156ce7e089fcef3a34f853a537f0c55f2.css" />
+<!--  font google -->
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
+{% render "alternate.liquid" languages: languages lang: lang page: page %}
+<style>
+  .before-js > * {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .5s ease;
+  }
+  .before-js[data-gjs-type] > *, /* This is only inside the editor, .before-js needs to be on the body */
+  .after-js > * {
+    visibility: visible;
+    opacity: 1;
+  }
+  .before-js:before {
+    content: 'Loading';
+    position: absolute;
+    top: 49%;
+    left: 49%;
+  }
+  .before-js[data-gjs-type]:before, /* This is only inside the editor, .before-js needs to be on the body */
+  .after-js:before {
+    content: none;
+  }
+  /*BTNS*/
+  .button, .pointer {
+    cursor: pointer!important}
+  .button{
+    min-width:110px;
+  }
+  /*BTNS*/
+  a {
+    text-decoration: none;
+    color:#8873FE;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+  .uppercase  {
+    text-transform: uppercase;
+  }
+  .underline:hover{
+    text-decoration: underline;
+    text-decoration-thickness: from-font;
+    text-underline-position: under;
+  }
+  /*footer position*/
+  .main-min-height {
+    min-height: calc(100vh - 560px);
+  }
+  /*footer position*/
+  /*label*/
+  ::placeholder {
+    color: #8873FE;
+  }
+  input:focus {
+    border: 2px solid #9977FE;
+    background-color:#ffffff;
+  }
+  :focus {
+    outline: none;
+  }
+  /*label*/
+  .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;
+    }
+  }
+  /*FX ANIMATIONS*/
+  /*scale-round-inside_pour-BTN*/
+  .fx-scale-round {
+    position:relative;
+    z-index: 10;
+    overflow: hidden;
+  }
+  .fx-scale-round::after {
+    content: "";
+    background: #ffffff;
+    position: absolute;
+    z-index: -1;
+    border-radius: 50%;
+    left: -50%;
+    right: -50%;
+    top: -100%;
+    bottom: -100%;
+    transform: scale(0, 0);
+    transform-origin: center bottom;
+    transition: all 0.3s ease-out;
+  }
+  .fx-scale-round:hover {
+    transform-origin: center bottom;
+    transform: scale(1.1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  .fx-scale-round:hover::after {
+    transform: scale(1, 1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  /*scale-round-inside_pour-BTN*/
+  /*scale*/
+  .fx-scale:hover  {
+    transform-origin: center bottom;
+    transform: scale(1.1);
+    transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
+  }
+  /*flash*/
+  .fx-flash:hover {
+    animation: flash-in .25s ;
+  }
+  /*flash-in animation*/
+  @keyframes flash-in{
+    0% {
+      opacity:.25;
+    }
+    100% {
+      opacity:1;
+    }
+  }
+  /*flash-in animation*/
+  /*FX ANIMATIONS*/
+</style>
+<script src="/js/vue.global.prod.js"></script>
+<script src="/js/main.js"></script>
+<script type="module">
+          console.log('xxxxxx')
+const CONNECTORS_PATH = '/connectors/'
+window.addEventListener('load', function() {
+          console.log('xxxxxx')
+  const { createApp } = Vue;
+  const { api, constants, types } = silex;
+  const {
+    ConnectorType,
+  } = types
+  const {
+    setServerUrl,
+    getUser,
+    logout,
+    websiteDelete,
+    websiteDuplicate,
+    websiteList,
+    websiteCreate,
+    websiteMetaWrite,
+  } = api
+  function toSafeId(name) {
+    return name.replace(/[/\\?%*:|"<>]/g, '_')
+  }
+
+  const App = {
+    data() {
+      return {
+        websites: [],
+        newWebsiteName: '',
+        showCreationForm: false,
+        error: null,
+        message: null,
+        loggedIn: false,
+        loading: true,
+        storage: null,
+        user: null,
+        showMenu: false,
+        empty: false,
+      }
+    },
+    mounted() {
+      this.init()
+    },
+
+    methods: {
+      async init() {
+        try {
+          // Init Silex server path
+          // Go up one level because of the language prefix
+          setServerUrl(window.location.origin)
+          // Start
+          const user = await getUser({type: ConnectorType.STORAGE})
+          // Escape single quotes in the picture URL and decode the picture URL
+          user.picture = decodeURIComponent(user.picture).replace(/'/g, "\\'")
+          if(user) {
+            this.user = user
+            this.loggedIn = true
+            this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+            this.empty = this.websites.length === 0
+            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 = `{{ api-translations[lang]["Failed to start dashboard"] }} - ${error.message}`
+            this.message = ''
+          }
+        }
+      },
+
+      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}`, '_self')
+      },
+
+      async logout() {
+        await logout({
+          type: ConnectorType.STORAGE,
+          connectorId: this.user.storage.connectorId,
+        })
+        window.location.reload()
+      },
+
+      async createWebsite() {
+        try {
+          if (!this.newWebsiteName) throw new Error('{{ api-translations[lang]["You need to provide a website name"] }}')
+          this.loading = true
+          const websiteId = toSafeId(this.newWebsiteName)
+          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.error = ''
+          this.newWebsiteName = ''
+          this.showCreationForm = false;
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.empty = this.websites.length === 0
+          this.loading = false
+          return result
+        } catch (error) {
+          this.loading = false
+          console.error(error)
+          this.error = `{{ api-translations[lang]["Failed to create website"] }} - ${error.message}`
+          this.message = ''
+        }
+      },
+
+      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.error = ''
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.empty = this.websites.length === 0
+          this.loading = false
+          return result
+        } catch (error) {
+          this.loading = false
+          this.error = `{{ api-translations[lang]["Failed to delete website"] }} - ${error.message}`
+          this.message = ''
+        }
+      },
+
+      async duplicateWebsite(websiteId) {
+        this.loading = true
+        try {
+          await websiteDuplicate({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
+          this.error = ''
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.message = '{{ api-translations[lang]["Website duplicated successfully"] }}'
+          this.empty = this.websites.length === 0
+          this.loading = false
+        } catch (error) {
+          this.loading = false
+          this.error = `{{ api-translations[lang]["Failed to duplicate website"] }} - ${error.message}`
+          this.message = ''
+        }
+      },
+
+      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.error = ''
+          this.websites = await websiteList({connectorId: this.user.storage.connectorId})
+          this.empty = this.websites.length === 0
+          this.loading = false
+          return result
+        } catch (error) {
+          this.loading = false
+          this.error = `{{ api-translations[lang]["Failed to rename website"] }} - ${error.message}`
+          this.message = ''
+        }
+      },
+    },
+  };
+  // Prepare elements for vue
+  document.querySelectorAll('[v-text], [v-html]')
+  .forEach(el => el.innerText = '')
+
+  // Create the app
+  const app = createApp(App);
+
+  // Suppress "v-text will override element children" warning
+  app.config.compilerOptions.directiveTransforms = {
+    text: false,
+  }
+
+  // Mount the app
+  app.mount('.app');
+
+
+  // Remove loading
+  setTimeout(() => {
+    document.querySelector('.before-js').classList.add('after-js')
+  }, 100)
+})
+</script>
+
+<title>Silex Dashboard</title>
+<link rel="icon" href="/assets/favicon-32x32.png" />
+<meta name="og:title" property="og:title" content="Silex Dashboard"/>
+<link href="https://www.googleapis.com" rel="preconnect" ><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin ><link href="https://www.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" ></head>
+<body id="i2hcfw" class="body app before-js"><A id="ixzhcr" href="/" class="button button-bar__item--secondary">{{ api-translations[lang]["Back to home"] }}</A><div id="imawg3" class="bg-silex-purpel">{% liquid
+    assign var_imgx81_241 = tina.connectorsConnection.edges | where: "node.lang", page.lang | first
+	assign var_imgx81_242 = var_imgx81_241.node
+    assign state_imgx81-1985_imgx81-7uhkrqd2giq = var_imgx81_242
+  %}<div id="imgx81" class=""><div id="iikf0s" class="box box_login"><div id="ie0dxn" class="text-centered"><img id="ior0hl" src="/assets/logo-silex.svg"/><p id="it2175" class="subtitle-16">{% liquid
+    assign var_it2175_195 = state_imgx81-1985_imgx81-7uhkrqd2giq.subtitle
+    echo var_it2175_195
+  %}</p><div id="ilq8ui" class="text-centered">{% liquid
+    assign var_ilq8ui_196 = state_imgx81-1985_imgx81-7uhkrqd2giq.help
+    echo var_ilq8ui_196
+  %}</div></div><h3 id="iqc1xf" class="margin-top">{% liquid
+    assign var_iqc1xf_197 = state_imgx81-1985_imgx81-7uhkrqd2giq.recommended
+    echo var_iqc1xf_197
+  %}</h3><div id="in62y2">{% liquid
+    assign var_isqe61_218 = state_imgx81-1985_imgx81-7uhkrqd2giq.connectors
+    %}
+    {% for state_isqe61-589___data in var_isqe61_218 %}
+  {% liquid
+    assign var_isqe61_216 = forloop.index0
+	assign var_isqe61_217 = "0"
+    %}
+    {% if var_isqe61_216 <= var_isqe61_217 %}
+  <div id="isqe61" class="">{% liquid
+    assign var_i0vhjr_211 = state_isqe61-589___data.background_color
+    assign state_i0vhjr-6879_i0vhjr-uop2xr4ta4 = var_i0vhjr_211
+  %}
+{% liquid
+    assign var_i0vhjr_212 = state_isqe61-589___data.color
+    assign state_i0vhjr-6879_i0vhjr-q0yr34th38p = var_i0vhjr_212
+  %}<a id="i0vhjr" href="{% liquid
+    assign var_i0vhjr_213 = state_isqe61-589___data.auth_url
+    echo var_i0vhjr_213
+  %}" class="connector__card" data-style="{% liquid
+    assign var_i0vhjr_214 = "background: " | append: state_i0vhjr-6879_i0vhjr-uop2xr4ta4 | append: "; color: " | append: state_i0vhjr-6879_i0vhjr-q0yr34th38p | append: ";"
+    echo var_i0vhjr_214
+  %}" title="{% liquid
+    assign var_i0vhjr_215 = state_isqe61-589___data.description | strip_html
+    echo var_i0vhjr_215
+  %}"><div id="io3lid" class="button-bar__item__icon">{% liquid
+    assign var_io3lid_209 = state_isqe61-589___data.icon
+    echo var_io3lid_209
+  %}</div><div id="i87asw" class="connector__description">{% liquid
+    assign var_i87asw_210 = state_isqe61-589___data.text
+    echo var_i87asw_210
+  %}</div></a></div>{% endif %}{% endfor %}</div><h3 id="i8w75b" class="margin-30">{% liquid
+    assign var_i8w75b_219 = state_imgx81-1985_imgx81-7uhkrqd2giq.advanced_users
+    echo var_i8w75b_219
+  %}</h3><div id="igp4xl">{% liquid
+    assign var_id9k25_240 = state_imgx81-1985_imgx81-7uhkrqd2giq.connectors
+    %}
+    {% for state_isqe61-589___data in var_id9k25_240 %}
+  {% liquid
+    assign var_id9k25_238 = forloop.index0
+	assign var_id9k25_239 = "0"
+    %}
+    {% if var_id9k25_238 > var_id9k25_239 %}
+  <div id="id9k25" href="" class="">{% liquid
+    assign var_irgt6z_233 = state_isqe61-589___data.background_color
+    assign state_i0vhjr-6879_i0vhjr-uop2xr4ta4 = var_irgt6z_233
+  %}
+{% liquid
+    assign var_irgt6z_234 = state_isqe61-589___data.color
+    assign state_i0vhjr-6879_i0vhjr-q0yr34th38p = var_irgt6z_234
+  %}<a href="{% liquid
+    assign var_irgt6z_235 = state_isqe61-589___data.auth_url
+    echo var_irgt6z_235
+  %}" id="irgt6z" class="connector__card" data-style="{% liquid
+    assign var_irgt6z_236 = "background: " | append: state_i0vhjr-6879_i0vhjr-uop2xr4ta4 | append: "; color: " | append: state_i0vhjr-6879_i0vhjr-q0yr34th38p | append: ";"
+    echo var_irgt6z_236
+  %}" title="{% liquid
+    assign var_irgt6z_237 = state_isqe61-589___data.description | strip_html
+    echo var_irgt6z_237
+  %}"><div class="button-bar__item__icon">{% liquid
+    assign var_iwt3h3_231 = state_isqe61-589___data.icon
+    echo var_iwt3h3_231
+  %}</div><div class="connector__description">{% liquid
+    assign var_incxlr_232 = state_isqe61-589___data.text
+    echo var_incxlr_232
+  %}</div></a></div>{% endif %}{% endfor %}</div><div id="i3cney" class="button-bar"><a id="iacshy" class="button big-button connector__card" v-if="!loading" :key="index" :style="{ backgroundColor: connector.background, color: connector.color }" v-for="(connector, index) in connectors" v-on-click="openLogin(connector)"><div id="iiwn36"><div class="button-bar__item__icon" :style="`background: url('${connector.icon}'); background-repeat: no-repeat; background-size: contain;`"></div><div id="if4gvb" class="" v-text="connector.displayName">Name<br/></div></div><div id="isndui">This connector is about blablabla<br/></div></a></div></div><div id="i9msnk" class="text-white top-space-20" v-if="error" v-text="message" :test="message">Insert your text here</div><div id="i6akll" class="button button--tertiary text-centered" v-if="error" v-on:click="logout()">{{ api-translations[lang]["Logout"] }}</div></div></div></body>
+</html>

package/templates/connectors-fr.11tydata.mjs

@@ -0,0 +1,56 @@
+
+
+export default async function (configData) {
+  const data = {
+    ...configData,
+    lang: 'fr',
+  }
+  const result = {}
+  try {
+  result['tina'] = (await (await fetch(`http://localhost:4001/graphql`, {
+
+  headers: {
+    'Content-Type': `application/json`,
+  },
+  method: 'POST',
+  body: JSON.stringify({
+    query: `query {
+__typename
+connectorsConnection {
+  __typename
+  edges {
+    __typename
+    node {
+      __typename
+      subtitle
+      help
+      recommended
+      advanced_users
+      connectors {
+        __typename
+        background_color
+        color
+        auth_url
+        description
+        icon
+        text
+
+      }
+      lang
+
+    }
+
+  }
+
+}
+
+}`,
+  })
+  })).json()).data
+} catch (e) {
+  console.error('11ty plugin for Silex: error fetching graphql data', e, 'tina', 'http://localhost:4001/graphql')
+  throw e
+}
+  return result
+}
+