npm - @silexlabs/silex-dashboard - Versions diffs - 1.5.0-canary.1 → 1.5.0-canary.3 - Mend

@silexlabs/silex-dashboard 1.5.0-canary.1 → 1.5.0-canary.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/templates/fork-en.html ADDED Viewed

@@ -0,0 +1,412 @@
+---
+permalink: "/{{lang}}/fork/"
+lang: "en"
+collection: "Fork"
+---
+<!DOCTYPE html>
+<html lang="">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="generator" content="Silex v3.6.0-canary.2">
+<link rel="stylesheet" href="/css/fork-00fcb49f686e5d4a6d23a3c77ebc1563a99581e1fb3f270c6204538ab3d02f94.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;
+  }
+  details {
+	max-height: 2em;
+    display: block;
+    overflow: hidden;
+    transition: max-height .75s ease;
+  }
+  details[open] {
+    max-height: 40em;
+  }
+  /*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">
+const params = new URLSearchParams(window.location.search)
+const CONNECTORS_PATH = '/connectors/'
+const GITLAB_REPO = params.get('gitlabUrl')
+const REDIRECT_PATH = `/fork/?gitlabUrl=${ GITLAB_REPO }`
+window.addEventListener('load', () => {
+  const { createApp } = Vue
+  const { api, types } = silex
+  const { ConnectorType } = types
+  const { setServerUrl, getUser, logout } = api
+  const App = {
+    data() {
+      return {
+        loading: true,
+        loggedIn: false,
+        user: null,
+        message: '',
+        error: '',
+      }
+    },
+    async mounted() {
+      await this.init()
+      await this.initForkFromUrl()
+    },
+    methods: {
+      async init() {
+        try {
+          setServerUrl(window.location.origin)
+          const user = await getUser({ type: ConnectorType.STORAGE })
+          if (!user) {
+            this.openLogin()
+            return
+          }
+          user.picture = decodeURIComponent(user.picture).replace(/'/g, "\\'")
+          this.user = user
+          this.loggedIn = true
+          this.loading = false
+        } catch (error) {
+          this.loading = false
+          if (error.code === 401 || error.httpStatusCode === 401) {
+            this.openLogin()
+          } else {
+            this.updateStatus(error.message)
+          }
+        }
+      },
+      async initForkFromUrl() {
+        if (!GITLAB_REPO || !this.loggedIn) return
+        await this.forkWebsite(GITLAB_REPO)
+      },
+      async forkWebsite(gitlabUrl) {
+        try {
+          this.showLoading()
+          this.updateStatus('Cloning repository...')
+          const response = await fetch('/api/website/fork', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ gitlabUrl }),
+          })
+          if (response.status === 401) {
+            this.openLogin()
+            return
+          }
+          if (!response.ok) {
+            let message = ''
+            try {
+              const body = await response.text()
+              message = JSON.parse(body).message
+            } catch (e) {}
+            console.error('ERROR:', {response, message})
+            throw new Error(
+              message
+				? `${message}\n\n(Error ${response.status})`
+                : `API ${response.status} ${response.statusText}`
+            )
+          }
+          const data = await response.json()
+          const websiteId = data.websiteId || data.id
+          this.updateStatus('Project ready')
+          this.showSuccess()
+          setTimeout(() => {
+            this.openEditor(websiteId)
+          }, 1500)
+        } catch (error) {
+          this.updateStatus(error.message || 'Fork failed')
+        }
+      },
+      updateStatus(message) {
+        this.message = message.replace(/\n/g, '<br>')
+        //const el = document.querySelector('.fork-status-title')
+        //if (el) el.textContent = message
+        //console.log('updateStatus', {message, el})
+      },
+      showLoading() {
+        document.querySelector('.fork-loading')?.style.setProperty('display', 'block')
+        document.querySelector('.fork-success')?.style.setProperty('display', 'none')
+        document.querySelector('.fork-error')?.style.setProperty('display', 'none')
+      },
+      showSuccess() {
+        document.querySelector('.fork-loading')?.style.setProperty('display', 'none')
+        document.querySelector('.fork-success')?.style.setProperty('display', 'block')
+      },
+      showError(message) {
+        throw new Error('Useless method, pls remove')
+        this.error = message
+        document.querySelector('.fork-loading')?.style.setProperty('display', 'none')
+        document.querySelector('.fork-error')?.style.setProperty('display', 'block')
+        const msg = document.querySelector('.error-message')
+        if (msg) msg.textContent = message
+        const backBtn = document.querySelector('.error-back-btn')
+        if (backBtn) {
+          backBtn.onclick = () => this.openLogin()
+        }
+        console.log({message, msg, backBtn})
+      },
+      openEditor(id) {
+        const params = new URLSearchParams(window.location.search)
+        const lang = params.get('lang') || 'en'
+        window.location.href =
+          `/?id=${id}&lang=${lang}&connectorId=${this.user.storage.connectorId}&forked=${GITLAB_REPO}`
+      },
+      openLogin() {
+        const path = `/{{lang}}${CONNECTORS_PATH}?redirect=/{{lang}}${REDIRECT_PATH}`
+        if (window.location.pathname !== path) {
+          window.location.href = path
+        }
+      },
+      async logout() {
+        await logout({
+          type: ConnectorType.STORAGE,
+          connectorId: this.user.storage.connectorId,
+        })
+        window.location.reload()
+      },
+    },
+  }
+  document
+    .querySelectorAll('[v-text], [v-html]')
+    .forEach(el => (el.innerText = ''))
+  const app = createApp(App)
+  app.mount('.app')
+  setTimeout(() => {
+    document.querySelector('.before-js')?.classList.add('after-js')
+  }, 100)
+})
+</script>
+<title>{% liquid
+    assign var_ik0i-2_393 = tina.homeConnection.edges | where: "",  | first
+	assign var_ik0i-2_394 = var_ik0i-2_393.node.title
+    echo var_ik0i-2_394
+  %}</title>
+<link rel="icon" href="/assets/favicon-32x32.png" />
+<meta name="og:title" property="og:title" content="Silex Dashboard"/>
+<link href="https://fonts.googleapis.com" rel="preconnect" ><link href="https://fonts.googleapis.com/css2" rel="preconnect" crossorigin ><link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" ></head>
+{% liquid
+    assign var_ik0i-2_390 = tina.settingsConnection.edges | where: "node.lang", page.lang | first
+    assign state_ik0i-958_ik0i-e8l061o7k5 = var_ik0i-2_390
+  %}
+{% liquid
+    assign var_ik0i-2_391 = tina.forkConnection.edges | where: "node.lang", page.lang | first
+	assign var_ik0i-2_392 = var_ik0i-2_391.node
+    assign state_ik0i-958_ik0i-24xejc2n0xy = var_ik0i-2_392
+  %}<body id="ik0i-2" class="body loading app before-js"><HEADER id="igrg-2" class="menu-bar"><A href="/" id="igvu43-2"><img id="iel80b-2-2-2" src="/assets/picto-silex@3x.png" class="nav__logo"/></A><NAV id="i9jq-2" class="nav">{% liquid
+    assign var_iels-2_373 = tina.settingsConnection.edges | where: "node.lang", page.lang | first
+	assign var_iels-2_374 = var_iels-2_373.node.nav
+    %}
+    {% for state_iels-228___data in var_iels-2_374 %}
+  <a href="{% liquid
+    assign var_iels-2_375 = state_iels-228___data.url
+    echo var_iels-2_375
+  %}" id="iels-2" class="nav__item uppercase fx-flash nav_item--active" target="{% liquid
+    assign var_iels-2_376 = state_iels-228___data.target
+    echo var_iels-2_376
+  %}">{% liquid
+    assign var_iels-2_372 = state_iels-228___data.label
+    echo var_iels-2_372
+  %}</a>{% endfor %}</NAV>{% liquid
+    assign var_i2red7-2_379 = tina.languagesConnection.edges
+    %}
+    {% for state_i2red7-8291___data in var_i2red7-2_379 %}
+  <div id="i2red7-2" class="lang"><a href="{% liquid
+    assign var_iciz-2_378 = state_i2red7-8291___data.node.permalink
+    echo var_iciz-2_378
+  %}" id="iciz-2" class="lang__item nav__item uppercase">{% liquid
+    assign var_iciz-2_377 = state_i2red7-8291___data.node.label
+    echo var_iciz-2_377
+  %}</a></div>{% endfor %}<div id="i24ew-2" class="user__wrapper pointer" v-if="user" v-on:click="showMenu = !showMenu"><div id="i5xsbd-2" class="user-icon__wrapper" v-if="user" v-show="!showMenu || user.storage.disableLogout"><div id="i5wlbq-2" class="user-icon__image" v-if="user" v-show="!showMenu || user.storage.disableLogout" :style="{ backgroundImage: `url('${user?.picture}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'contain', }"></div></div><div id="ic9eoa-2" class="" v-show="showMenu && !user.storage.disableLogout" v-on:click="logout"><div id="igv1rf-2" class="nav__item">Logout</div></div></div></HEADER><HEADER id="iy8ax3-2" class="bg-silex-purpel"><div id="iisz8f-2" class="section-top text-centered text-white"><h1 id="ic31o-2" class="title-40" v-if="!empty">{% liquid
+    assign var_ic31o-2_380 = state_ik0i-958_ik0i-24xejc2n0xy.hero_title
+    echo var_ic31o-2_380
+  %}</h1><p id="iyex8-2" class="subtitle-16" v-if="!empty">{% liquid
+    assign var_iyex8-2_381 = state_ik0i-958_ik0i-24xejc2n0xy.hero_subtitle
+    echo var_iyex8-2_381
+  %}</p></div></HEADER><MAIN id="iz63r-2" class="padding-normal main-min-height website-max-width margin-80-centered"><div id="i7ej6j-2" class="flex-between box-message text-white" v-if="error"><h3 id="iv0eyi-2" class="box-message-text" v-html="error">Insert your text here</h3><div id="i4656n-2" class="pointer button-bar__item--link text-white" v-on:click="error = null">{% liquid
+    assign var_i4656n-2_382 = state_ik0i-958_ik0i-24xejc2n0xy.message_dismiss
+    echo var_i4656n-2_382
+  %}</div></div><div id="ilteie-2" class="flex-between box-message text-white" v-if="message"><h3 id="i2d31v-2" class="box-message-text" v-html="message">Insert your text here</h3><div id="i2urco-2" class="rounded pointer button-bar__item--link text-white" v-on:click="message = null">{% liquid
+    assign var_i2urco-2_383 = state_ik0i-958_ik0i-24xejc2n0xy.message_dismiss
+    echo var_i2urco-2_383
+  %}</div></div></MAIN><FOOTER id="ilzpl-2" class="footer">{% liquid
+    assign var_isucae-2_389 = state_ik0i-958_ik0i-e8l061o7k5.node.footer_links
+    %}
+    {% for state_isucae-3308___data in var_isucae-2_389 %}
+  <div id="isucae-2" style="min-height:100px;" class="footer__column"><h3 href="" id="ipa5zg-2" class="footer__item">{% liquid
+    assign var_ipa5zg-2_384 = state_isucae-3308___data.title
+    echo var_ipa5zg-2_384
+  %}</h3>{% liquid
+    assign var_i0cyhf_386 = state_isucae-3308___data.columns
+    %}
+    {% for state_i2u9h4-2642___data in var_i0cyhf_386 %}
+  <a href="{% liquid
+    assign var_i0cyhf_387 = state_i2u9h4-2642___data.url
+    echo var_i0cyhf_387
+  %}" id="i0cyhf" class="footer__item" target="{% liquid
+    assign var_i0cyhf_388 = state_i2u9h4-2642___data.target
+    echo var_i0cyhf_388
+  %}">{% liquid
+    assign var_i0cyhf_385 = state_i2u9h4-2642___data.label
+    echo var_i0cyhf_385
+  %}</a>{% endfor %}</div>{% endfor %}</FOOTER></body>
+</html>

package/templates/fork-fr.11tydata.mjs ADDED Viewed

@@ -0,0 +1,117 @@
+export default async function (configData) {
+  const data = {
+    ...configData,
+    lang: 'fr',
+  }
+  const result = {}
+  try {
+  const response = await fetch(`http://localhost:4001/graphql`, {
+  headers: {
+    'Content-Type': `application/json`,
+  },
+  method: 'POST',
+  body: JSON.stringify({
+    query: `query {
+__typename
+homeConnection {
+  __typename
+  edges {
+    __typename
+    node {
+      __typename
+      title
+    }
+  }
+}
+settingsConnection {
+  __typename
+  edges {
+    __typename
+    node {
+      __typename
+      nav {
+        __typename
+        label
+        url
+        target
+      }
+      footer_links {
+        __typename
+        title
+        columns {
+          __typename
+          label
+          url
+          target
+        }
+      }
+      lang
+    }
+  }
+}
+forkConnection {
+  __typename
+  edges {
+    __typename
+    node {
+      __typename
+      hero_title
+      hero_subtitle
+      lang
+    }
+  }
+}
+languagesConnection {
+  __typename
+  edges {
+    __typename
+    node {
+      __typename
+      label
+      permalink
+    }
+  }
+}
+}`,
+  })
+  })
+  if (!response.ok) {
+    throw new Error(`Error fetching graphql data: HTTP status code ${response.status}, HTTP status text: ${response.statusText}`)
+  }
+  const json = await response.json()
+  if (json.errors) {
+    throw new Error(`GraphQL error: \
+> ${json.errors.map(e => e.message).join('\
+> ')}`)
+  }
+  result['tina'] = json.data
+} catch (e) {
+  console.error('11ty plugin for Silex: error fetching graphql data', e, 'tina', 'http://localhost:4001/graphql')
+  throw e
+}
+  return result
+}