stuve-it
/
wiki-js-customization
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

imported styles from wiki

This commit is contained in:
Valentin Kolb 2024-03-14 19:13:52 +01:00
parent f5bc546a70
commit c8d6a8f21f
6 changed files with 377 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
js/template-engine.js Normal file
View File

@ -0,0 +1,124 @@
function extractSchemaDetails(str) {
// Regular expression with named capture groups for name and optional placeholder
const regex = /{{(?<name>[^:}]+)(?::(?<placeholder>[^:}]+))?}}/g
const results = []
let match
while ((match = regex.exec(str)) !== null) {
// check if the match is already in the results array
if (results.some((result) => result.name === match.groups.name)) {
continue
}
results.push({
name: match.groups.name,
placeholder: match.groups.placeholder || null, // If placeholder is undefined, null
input: null
})
}
return results
}
function replaceDivTextExceptSpan(div, newTextBefore) {
// Iterate over child nodes of the div
for (const node of div.childNodes) {
// Check if the node is a text node
if (node.nodeType === Node.TEXT_NODE) {
// Check the position of the text node to determine if it's before or after the span
if (node.nextSibling && node.nextSibling.tagName === 'SPAN') {
// Text node before the span
node.nodeValue = newTextBefore;
}
}
}
}
const main = () => {
// select every code block with class language-template
document.querySelectorAll('code.language-template').forEach((codeElement) => {
// get the code inside the block
const codeInnerText = codeElement.innerText
const id = Math.random().toString(36).substring(7)
const templateContainer = document.createElement('div')
templateContainer.id = id;
templateContainer.className = "template-container"
const title = document.createElement('div')
title.className = "template-title"
title.innerText = "Template"
templateContainer.appendChild(title)
const templateVars = extractSchemaDetails(codeInnerText)
const renderInputs = () => {
let newCode = codeInnerText
templateVars.forEach((variable) => {
const escapedPlaceholder = variable.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regexPattern = `{{${escapedPlaceholder}(?::[^}]+)?}}`; // Matches {{name}} or {{name:anything}}
const regex = new RegExp(regexPattern, 'g');
if (variable.input !== null && variable.input !== "") {
newCode = newCode.replace(regex, variable.input)
}
})
replaceDivTextExceptSpan(codeElement, newCode)
console.log(newCode)
}
// create input elements
templateVars.forEach((variable) => {
const inputDiv = document.createElement('div')
inputDiv.className = "template-input-div"
const label = document.createElement('label')
label.for = `${id}-${variable.name}`
label.innerText = variable.name
const input = document.createElement('input')
input.id = `${id}-${variable.name}`
input.placeholder = variable.placeholder || variable.name
input.value = null
input.className = "template-input"
input.addEventListener('input', e => {
variable.input = e.target.value
renderInputs()
})
inputDiv.appendChild(label)
inputDiv.appendChild(input)
templateContainer.appendChild(inputDiv)
console.log(variable.name, variable.placeholder)
})
const copyButton = document.createElement('button')
copyButton.className = "template-copy-button"
copyButton.innerText = "Copy"
copyButton.addEventListener('click', () => {
navigator.clipboard.writeText(codeElement.innerText.trim())
})
templateContainer.appendChild(copyButton)
// get parent element
const outerDiv = codeElement.parentElement.parentElement.parentElement
const codeBlock = codeElement.parentElement.parentElement
// insert the template container before the code block
outerDiv.insertBefore(templateContainer, codeElement.parentElement.parentElement)
templateContainer.appendChild(codeBlock)
})
}
window.boot.register("page-ready", () => {
main()
})

47
styles/boxes.css Normal file
View File

@ -0,0 +1,47 @@
.box-grau {
background-color: #697f85!important;
padding: 1rem!important;
border-radius: .6rem;
color: #fff!important;
margin: 1rem 0!important;
text-align: center!important
}
.box-blau {
background-color: #137da9!important;
padding: 1rem!important;
border-radius: .6rem;
color: #fff!important;
margin: 1rem 0!important;
text-align: center!important
}
.box-gruen {
background-color: #a4ba2e!important;
padding: 1rem!important;
border-radius: .6rem;
color: #fff!important;
margin: 1rem 0!important;
text-align: center!important
}
.is-info {
background-color: #49bbeb!important;
border-color: #137da9!important
}
.is-success {
background-color: #a4ba2e!important;
border-color: #6b7b1d!important
}
.is-warning {
background-color: #ffb74d!important;
border-color: #b33f00!important
}
.is-danger {
background-color: #e57373!important;
border-color: #b71c1c!important
}
.box > p,
.is-danger > p,
.is-info > p,
.is-success > p,
.is-warning > p {
color: #fff!important
}

4
styles/main.css
View File

@ -1,3 +1,5 @@
:root {
color: red;
--override_blue: rgb(74,187,235);
--override_green: rgb(164, 186, 46);
--override_gray: rgb(105, 127, 133);
}

56
styles/tables.css Normal file
View File

@ -0,0 +1,56 @@
table {
display: block;
border-collapse: collapse;
color: #697f85!important;
margin-left: 0!important;
margin-right: 0!important;
overflow-x: auto
}
tr {
border: none
}
th {
border: solid .5px #697f85!important;
border-bottom: solid 2px #697f85!important
}
td {
border: solid .5px #697f85!important
}
#bg-white {
color: #575756!important;
background-color: #fff!important
}
#stuve-gruen-text {
color: #6b7b1d!important
}
#stuve-grau-text {
color: #697f85!important
}
#stuve-blau-text {
color: #4abbeb!important
}
#stuve-gruen {
color: #fff!important;
background-color: #a4ba2e!important
}
#stuve-grau {
color: #fff!important;
background-color: #697f85!important
}
#stuve-blau {
color: #fff!important;
background-color: #4abbeb!important
}
#danger {
color: #fff!important;
background-color: red!important
}
#warning {
color: #fff!important;
background-color: orange!important
}
#success {
color: #fff!important;
background-color: green!important
}

41
styles/template-engine.css Normal file
View File

@ -0,0 +1,41 @@
.template-container {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
border-radius: 4px;
background-color: #fff;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px
}
.template-title {
font-size: 16px;
font-weight: 500
}
.template-input-div {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}
.template-input {
border: 1px solid #999;
border-radius: 4px;
padding: 10px;
margin-bottom: 4px;
width: 100%
}
.template-copy-button:hover {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
}
.template-copy-button:active {
background-color: #388e3c
}
.template-copy-button {
background-color: var(--override_green);
color: #fff;
border: none;
border-radius: 4px;
padding: 10px;
cursor: pointer;
transition: background-color .3s
}

106
styles/theme_override.css Normal file
View File

@ -0,0 +1,106 @@
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
a {
color: #137da9!important
}
.is-active,
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600!important;
color: #6b7b1d!important
}
h1::after,
h2::after,
h3::after,
h4::after,
h5::after,
h6::after {
background: linear-gradient(90deg,#6b7b1d,rgba(255,255,255,0))!important
}
.v-list-item--active {
color: #fff!important
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.headline.grey--text.text--darken-3 {
color: #697f85!important
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.caption.grey--text.text--darken-1 {
color: #697f85!important
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap header.v-sheet.theme--light.v-toolbar.v-toolbar--dense.v-toolbar--flat.grey.lighten-3 div.v-toolbar__content ul.v-breadcrumbs.breadcrumbs-nav.pl-0.theme--light button.v-icon.notranslate.v-icon--link.mdi.mdi-home.theme--light {
color: #137da9!important
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap main.v-main div.v-main__wrap div.container.grey.pa-0.container--fluid.lighten-4 div.row.no-gutters.align-content-center div.page-col-content.is-page-header.offset-lg-3.offset-xl-2.col.pl-4 div.headline.grey--text.text--darken-3 {
font-weight: 600!important;
color: #137da9!important;
text-transform: uppercase;
letter-spacing: .05rem!important
}
div.page-col-content:first-child > div:nth-child(2) {
font-weight: 600!important;
color: #137da9!important;
letter-spacing: .05rem!important
}
.v-application{
font-family: 'Overpass', sans-serif !important;
}
p {
color: #575756 !important;
}
/* dragons be here */
.v-application .primary {
background-color: var(--override_green) !important;
border-color: var(--override_green) !important;
}
.comments-header {
background-color: var(--override_green) !important;
}
.__bar-is-vertical {
background: rgba(255, 255, 255, 0) !important;
}
.nav-header {
background-color: var(--override_gray) !important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black {
background-color: var(--override_gray) !important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content {
background-color: var(--override_gray)!important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row {
background-color: var(--override_gray)!important;
}
.header {
background-color: var(--override_gray)!important;
}
.nav-header-inner {
background-color: var(--override_gray)!important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black {
background-color: var(--override_gray)!important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs7.md4 header.nav-header-inner.pr-4.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black {
background-color: var(--override_gray)!important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs5.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black.pl-3 {
background-color: var(--override_gray)!important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.xs7.md4 header.nav-header-inner.pr-4.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black div.v-toolbar__content button.v-btn.v-btn--flat.v-btn--icon.v-btn--round.v-btn--tile.theme--dark.v-size--default span.v-btn__content i.v-icon.notranslate.mdi.mdi-file-document-edit-outline.theme--dark.grey--text {
color: white !important;
}
.v-application .grey--text {
color: white !important;
}
html.mdz-no-backdropfilter body div#root div#app.v-application.v-application--is-ltr.theme--light.is-ltr div.v-application--wrap header.nav-header.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.v-app-bar.v-app-bar--clipped.v-app-bar--fixed.black div.v-toolbar__content div.layout.row div.flex.md4 header.nav-header-inner.v-sheet.theme--dark.v-toolbar.v-toolbar--flat.black div.v-toolbar__content div.v-input.v-input--hide-details.theme--dark.v-text-field.v-text-field--single-line.v-text-field--solo.v-text-field--solo-flat.v-text-field--is-booted.v-text-field--enclosed.v-text-field--rounded div.v-input__control div.v-input__slot {
background: var(--override_blue) !important;
}
.v-application .black {
background-color: var(--override_gray) !important;
}