@silexlabs/silex-dashboard
Version:
Dashboard for Silex v3
411 lines (381 loc) • 14.1 kB
HTML
---
permalink: "/{{lang}}/fork/"
lang: "fr"
collection: "Fork"
---
<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.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}
.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 lang = window.location.pathname.split('/')[1] || '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_773 = tina.homeConnection.edges | where: "", | first
assign var_ik0i-2_774 = var_ik0i-2_773.node.title
echo var_ik0i-2_774
%}</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_770 = tina.settingsConnection.edges | where: "node.lang", page.lang | first
assign state_ik0i-958_ik0i-e8l061o7k5 = var_ik0i-2_770
%}
{% liquid
assign var_ik0i-2_771 = tina.forkConnection.edges | where: "node.lang", page.lang | first
assign var_ik0i-2_772 = var_ik0i-2_771.node
assign state_ik0i-958_ik0i-24xejc2n0xy = var_ik0i-2_772
%}<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_753 = tina.settingsConnection.edges | where: "node.lang", page.lang | first
assign var_iels-2_754 = var_iels-2_753.node.nav
%}
{% for state_iels-228___data in var_iels-2_754 %}
<a href="{% liquid
assign var_iels-2_755 = state_iels-228___data.url
echo var_iels-2_755
%}" id="iels-2" class="nav__item uppercase fx-flash nav_item--active" target="{% liquid
assign var_iels-2_756 = state_iels-228___data.target
echo var_iels-2_756
%}">{% liquid
assign var_iels-2_752 = state_iels-228___data.label
echo var_iels-2_752
%}</a>{% endfor %}</NAV>{% liquid
assign var_i2red7-2_759 = tina.languagesConnection.edges
%}
{% for state_i2red7-8291___data in var_i2red7-2_759 %}
<div id="i2red7-2" class="lang"><a href="{% liquid
assign var_iciz-2_758 = state_i2red7-8291___data.node.permalink
echo var_iciz-2_758
%}" id="iciz-2" class="lang__item nav__item uppercase">{% liquid
assign var_iciz-2_757 = state_i2red7-8291___data.node.label
echo var_iciz-2_757
%}</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_760 = state_ik0i-958_ik0i-24xejc2n0xy.hero_title
echo var_ic31o-2_760
%}</h1><p id="iyex8-2" class="subtitle-16" v-if="!empty">{% liquid
assign var_iyex8-2_761 = state_ik0i-958_ik0i-24xejc2n0xy.hero_subtitle
echo var_iyex8-2_761
%}</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_762 = state_ik0i-958_ik0i-24xejc2n0xy.message_dismiss
echo var_i4656n-2_762
%}</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_763 = state_ik0i-958_ik0i-24xejc2n0xy.message_dismiss
echo var_i2urco-2_763
%}</div></div></MAIN><FOOTER id="ilzpl-2" class="footer">{% liquid
assign var_isucae-2_769 = state_ik0i-958_ik0i-e8l061o7k5.node.footer_links
%}
{% for state_isucae-3308___data in var_isucae-2_769 %}
<div id="isucae-2" style="min-height:100px;" class="footer__column"><h3 href="" id="ipa5zg-2" class="footer__item">{% liquid
assign var_ipa5zg-2_764 = state_isucae-3308___data.title
echo var_ipa5zg-2_764
%}</h3>{% liquid
assign var_i0cyhf_766 = state_isucae-3308___data.columns
%}
{% for state_i2u9h4-2642___data in var_i0cyhf_766 %}
<a href="{% liquid
assign var_i0cyhf_767 = state_i2u9h4-2642___data.url
echo var_i0cyhf_767
%}" id="i0cyhf" class="footer__item" target="{% liquid
assign var_i0cyhf_768 = state_i2u9h4-2642___data.target
echo var_i0cyhf_768
%}">{% liquid
assign var_i0cyhf_765 = state_i2u9h4-2642___data.label
echo var_i0cyhf_765
%}</a>{% endfor %}</div>{% endfor %}</FOOTER></body>
</html>