coloring
All checks were successful
deploy to production / deploy (push) Successful in 42s

This commit is contained in:
Robin Grenzdörfer 2023-12-07 20:24:09 +00:00
parent f85efb3c38
commit fd5af432db
52 changed files with 638 additions and 328 deletions

1
.env
View File

@ -5,3 +5,4 @@ UID=100
GID=101 GID=101
RELEASE_ORG_SLUG=webmakers-gmbh RELEASE_ORG_SLUG=webmakers-gmbh
RELEASE_PROJECT_SLUG=fontis RELEASE_PROJECT_SLUG=fontis
START_SCRIPT=:ssr

View File

@ -29,6 +29,13 @@ hooks:
create: create:
type: javascript type: javascript
file: hooks/backups/post_create.js file: hooks/backups/post_create.js
return:
type: javascript
file: hooks/clear_cache.js
put:
return:
type: javascript
file: hooks/clear_cache.js
fields: fields:
- name: collectionName - name: collectionName

View File

@ -193,6 +193,16 @@ permissions:
put: true put: true
delete: true delete: true
hooks:
post:
return:
type: javascript
file: hooks/clear_cache.js
put:
return:
type: javascript
file: hooks/clear_cache.js
projections: projections:
navigation: navigation:
select: select:

View File

@ -111,6 +111,15 @@ permissions:
projections: projections:
dashboard: dashboard:
select: select:
hooks:
post:
return:
type: javascript
file: hooks/clear_cache.js
put:
return:
type: javascript
file: hooks/clear_cache.js
fields: fields:
- name: file - name: file

View File

@ -27,6 +27,15 @@ meta:
parent.selectEntry(entry) // Die Funktion selectEntry auf dem übergeordneten Objekt wird mit dem Eintrag als Argument aufgerufen. parent.selectEntry(entry) // Die Funktion selectEntry auf dem übergeordneten Objekt wird mit dem Eintrag als Argument aufgerufen.
} }
//!js //!js
hooks:
post:
return:
type: javascript
file: hooks/clear_cache.js
put:
return:
type: javascript
file: hooks/clear_cache.js
permissions: permissions:
public: public:

View File

@ -32,6 +32,15 @@ permissions:
post: false post: false
put: true put: true
delete: false delete: false
hooks:
post:
return:
type: javascript
file: hooks/clear_cache.js
put:
return:
type: javascript
file: hooks/clear_cache.js
fields: fields:
- name: tree - name: tree

View File

@ -7,6 +7,7 @@ meta:
label: { de: "SSR Dummy", en: "ssr dummy" } label: { de: "SSR Dummy", en: "ssr dummy" }
muiIcon: server muiIcon: server
rowIdentTpl: { twig: "{{ id }}" } rowIdentTpl: { twig: "{{ id }}" }
views: views:
- type: simpleList - type: simpleList
mediaQuery: "(max-width: 600px)" mediaQuery: "(max-width: 600px)"
@ -32,8 +33,6 @@ permissions:
post: false post: false
put: false put: false
delete: false delete: false
"token:${SSR_TOKEN}": "token:${SSR_TOKEN}":
methods: methods:
# only via url= # only via url=
@ -57,6 +56,7 @@ fields:
- name: path - name: path
type: string type: string
index: [single, unique] index: [single, unique]
- name: content - name: content
type: string type: string
meta: meta:

View File

@ -48,6 +48,7 @@ collections:
- !include collections/module.yml - !include collections/module.yml
- !include collections/medialib.yml - !include collections/medialib.yml
- !include collections/backups.yml - !include collections/backups.yml
- !include collections/ssr.yml
assets: assets:
- name: img - name: img

View File

@ -1 +1,2 @@
TOKEN=geheim TOKEN=geheim
SSR_TOKEN=owshwerNwoa

5
api/hooks/clear_cache.js Normal file
View File

@ -0,0 +1,5 @@
var utils = require("./lib/utils")
;(function () {
utils.clearSSRCache()
})()

View File

@ -4,7 +4,9 @@ const release = "tibi-docs.dirty"
if (release && typeof context !== "undefined") { if (release && typeof context !== "undefined") {
context.response.header("X-Release", release) context.response.header("X-Release", release)
} }
const apiClientBaseURL = "/api/"
module.exports = { module.exports = {
release, release,
apiClientBaseURL,
} }

View File

@ -1,21 +1,26 @@
const apiSsrBaseURL = "http://localhost:8080/api/v1/_/fontis_v2"
module.exports = { module.exports = {
apiSsrBaseURL,
ssrValidatePath: function (path) { ssrValidatePath: function (path) {
// validate if path ssr rendering is ok, -1 = NOTFOUND, 0 = NO SSR, 1 = SSR // validate if path ssr rendering is ok, -1 = NOTFOUND, 0 = NO SSR, 1 = SSR
// pe. use context.readCollection("product", {filter: {path: path}}) ... to validate dynamic urls // pe. use context.readCollection("product", {filter: {path: path}}) ... to validate dynamic urls
// / is de home // // / is de home
if (path == "/") return 1 // if (path == "/") return 1
// all other sites are in db
path = path?.replace(/^\//, "")
// // all other sites are in db
//path = path?.replace(/^\//, "")
console.log("PATH:", path)
// filter for path or alternativePaths // filter for path or alternativePaths
const resp = context.db.find("content", { const resp = context.db.find("page", {
filter: { filter: {
$or: [{ path }, { "alternativePaths.path": path }], $and: [{ path }],
}, },
selector: { _id: 1 }, selector: { _id: 1 },
}) })
console.log("RESP:", resp?.length)
if (resp && resp.length) { if (resp && resp.length) {
return 1 return 1
} }
@ -23,5 +28,5 @@ module.exports = {
// not found // not found
return -1 return -1
}, },
ssrAllowedAPIEndpoints: ["content", "medialib"], ssrPublishCheckCollections: ["page"],
} }

View File

@ -0,0 +1,36 @@
const { apiSsrBaseURL, ssrPublishCheckCollections } = require("../config")
/**
* api request via server, cache result in context.ssrCache
* should be elimated in client code via tree shaking
*
* @param {string} cacheKey
* @param {string} endpoint
* @param {ApiOptions} options
* @returns {ApiResult}
*/
function ssrRequest(cacheKey, endpoint, query, options) {
let url = endpoint + (query ? "?" + query : "")
// console.log("############ FETCHING ", apiSsrBaseURL + url)
const response = context.http.fetch(apiSsrBaseURL + "/" + url, {
method: options.method,
headers: options.headers,
})
const json = response.body.json()
const count = parseInt(response.headers["x-results-count"] || "0")
// json is go data structure and incompatible with js, so we need to convert it
const r = { data: JSON.parse(JSON.stringify(json)), count: count }
// @ts-ignore
context.ssrCache[cacheKey] = r
return r
}
module.exports = {
ssrRequest,
}

182
api/hooks/lib/ssr.js Normal file
View File

@ -0,0 +1,182 @@
const { apiClientBaseURL } = require("../config-client")
/**
* convert object to string
* @param {any} obj object
*/
function obj2str(obj) {
if (Array.isArray(obj)) {
return JSON.stringify(
obj.map(function (idx) {
return obj2str(idx)
})
)
} else if (typeof obj === "object" && obj !== null) {
var elements = Object.keys(obj)
.sort()
.map(function (key) {
var val = obj2str(obj[key])
if (val) {
return key + ":" + val
}
})
var elementsCleaned = []
for (var i = 0; i < elements.length; i++) {
if (elements[i]) elementsCleaned.push(elements[i])
}
return "{" + elementsCleaned.join("|") + "}"
}
if (obj) return obj
}
// fetch polyfill
// [MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)
const _f = function (
/** @type {string | URL} */ url,
/** @type {{ method?: any; credentials?: any; headers?: any; body?: any; }} */ options
) {
if (typeof XMLHttpRequest === "undefined") {
return Promise.resolve(null)
}
options = options || {}
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest()
const keys = []
const all = []
const headers = {}
const response = () => ({
ok: ((request.status / 100) | 0) == 2, // 200-299
statusText: request.statusText,
status: request.status,
url: request.responseURL,
text: () => Promise.resolve(request.responseText),
json: () => Promise.resolve(request.responseText).then(JSON.parse),
blob: () => Promise.resolve(new Blob([request.response])),
clone: response,
headers: {
// @ts-ignore
keys: () => keys,
// @ts-ignore
entries: () => all,
get: (n) => headers[n.toLowerCase()],
has: (n) => n.toLowerCase() in headers,
},
})
request.open(options.method || "get", url, true)
request.onload = () => {
request
.getAllResponseHeaders()
// @ts-ignore
.replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm, (m, key, value) => {
keys.push((key = key.toLowerCase()))
all.push([key, value])
headers[key] = headers[key] ? `${headers[key]},${value}` : value
})
resolve(response())
}
request.onerror = reject
request.withCredentials = options.credentials == "include"
for (const i in options.headers) {
request.setRequestHeader(i, options.headers[i])
}
request.send(options.body || null)
})
}
const _fetch = typeof fetch === "undefined" ? (typeof window === "undefined" ? _f : window.fetch || _f) : fetch
/**
* api request via client or server
* server function ssrRequest is called via context.ssrRequest, binded in ssr hook
*
* @param {string} endpoint
* @param {ApiOptions} options
* @param {any} body
* @returns {Promise<ApiResult<any>>}
*/
function apiRequest(endpoint, options, body) {
// TODO cache only for GET
// first check cache if on client
const cacheKey = obj2str({ endpoint: endpoint, options: options })
options.method = options?.method || "GET"
// @ts-ignore
if (typeof window !== "undefined" && window.__SSR_CACHE__ && options?.method === "GET") {
// @ts-ignore
const cache = window.__SSR_CACHE__[cacheKey]
console.log("SSR:", cacheKey, cache)
if (cache) {
return Promise.resolve(cache)
}
}
let method = options?.method || "GET"
let query = "&count=1"
if (options?.filter) query += "&filter=" + encodeURIComponent(JSON.stringify(options.filter))
if (options?.sort) query += "&sort=" + options.sort + "&sort=_id"
if (options?.limit) query += "&limit=" + options.limit
if (options?.offset) query += "&offset=" + options.offset
if (options?.projection) query += "&projection=" + options.projection
if (options?.lookup) query += "&lookup=" + options.lookup
if (options?.params) {
Object.keys(options.params).forEach((p) => {
query += "&" + p + "=" + encodeURIComponent(options.params[p])
})
}
let headers = {
"Content-Type": "application/json",
}
if (options?.headers) headers = { ...headers, ...options.headers }
if (typeof window === "undefined" && method === "GET") {
// server
// reference via context from get hook to tree shake in client
// @ts-ignore
const d = context.ssrRequest(cacheKey, endpoint, query, Object.assign({}, options, { method, headers }))
return d
} else {
// client
let url = endpoint + (query ? "?" + query : "")
console.log("URL:", url)
const requestOptions = {
method,
mode: "cors",
headers,
}
if (method === "POST" || method === "PUT") {
requestOptions.body = JSON.stringify(body)
}
return _fetch(apiClientBaseURL + url, requestOptions).then((response) => {
return response?.json().then((json) => {
if (response?.status < 200 || response?.status >= 400) {
return Promise.reject({ response, data: json })
}
return Promise.resolve({ data: json || null, count: response.headers?.get("x-results-count") || 0 })
})
})
}
}
module.exports = {
obj2str,
apiRequest,
}

View File

@ -1,16 +1,19 @@
const { ssrValidatePath, ssrAllowedAPIEndpoints } = require("../config") // TODO: add query string functionality to cache
const { ssrValidatePath } = require("../config")
const { log } = require("../lib/utils")
const { ssrRequest } = require("../lib/ssr-server.js")
const { obj2str, log } = require("../lib/utils")
;(function () { ;(function () {
/** @type {HookResponse} */ /** @type {HookResponse} */
var response = null let response = null
var request = context.request() const request = context.request()
var url = request.query("url") let url = request.query("url")
var noCache = request.query("noCache") const noCache = request.query("noCache")
// add sentry trace id to head // add sentry trace id to head
var trace_id = context.debug.sentryTraceId() const trace_id = context.debug.sentryTraceId()
function addSentryTrace(content) { function addSentryTrace(content) {
return content.replace("</head>", '<meta name="sentry-trace" content="' + trace_id + '" /></head>') return content.replace("</head>", '<meta name="sentry-trace" content="' + trace_id + '" /></head>')
} }
@ -18,7 +21,9 @@ const { obj2str, log } = require("../lib/utils")
if (url) { if (url) {
// comment will be printed to html later // comment will be printed to html later
var comment = "" let comment = ""
/** @type {Date} */ // @ts-ignore
context.ssrCacheValidUntil = null
url = url.split("?")[0] url = url.split("?")[0]
comment += "url: " + url comment += "url: " + url
@ -31,7 +36,8 @@ const { obj2str, log } = require("../lib/utils")
} }
// check if url is in cache // check if url is in cache
var cache = /** @type {Ssr[]} */ // @ts-ignore
const cache =
!noCache && !noCache &&
context.db.find("ssr", { context.db.find("ssr", {
filter: { filter: {
@ -40,6 +46,7 @@ const { obj2str, log } = require("../lib/utils")
}) })
if (cache && cache.length) { if (cache && cache.length) {
// use cache // use cache
context.response.header("X-SSR-Cache", "true")
throw { throw {
status: 200, status: 200,
log: false, log: false,
@ -48,84 +55,50 @@ const { obj2str, log } = require("../lib/utils")
} }
// validate url // validate url
var status = 200 let status = 200
var pNorender = false let pNorender = false
var pNotfound = false let pNotfound = false
var pR = ssrValidatePath(url) const pR = ssrValidatePath(url)
if (pR < 0) { if (pR < 0) {
pNotfound = true pNotfound = true
} else if (!pR) { } else if (!pR) {
pNorender = true pNorender = true
} }
var head = "" let head = ""
var html = "" let html = ""
var error = "" let error = ""
comment += ", path: " + url comment += ", path: " + url
var cacheIt = false let cacheIt = false
if (pNorender) { if (pNorender) {
html = "<!-- NO SSR RENDERING -->" html = "<!-- NO SSR RENDERING -->"
} else if (pNotfound) { } else if (pNotfound) {
status = 404 status = 404
html = "404 NOT FOUND" html = "404 NOT FOUND"
} else { } else {
// try rendering, if error output plain html
try {
// @ts-ignore // @ts-ignore
context.ssrCache = {} context.ssrCache = {}
// @ts-ignore // @ts-ignore
context.ssrFetch = function (endpoint, options) { context.ssrRequest = ssrRequest
var data
if (ssrAllowedAPIEndpoints.indexOf(endpoint) > -1) {
var _options = Object.assign({}, options)
if (_options.sort) _options.sort = [_options.sort]
// try rendering, if error output plain html
try { try {
/*console.log(
"SSR",
endpoint,
JSON.stringify(_options)
)*/
var goSlice = context.db.find(endpoint, _options || {})
// need to deep copy, so shift and delete on pure js is possible
data = JSON.parse(JSON.stringify(goSlice))
} catch (e) {
console.log("ERROR", JSON.stringify(e))
data = []
}
} else {
console.log("SSR forbidden", endpoint)
data = []
}
var count = (data && data.length) || 0
if (options && count == options.limit) {
// read count from db
count = context.db.count(endpoint, _options || {})
}
var r = { data: data, count: count }
// @ts-ignore
context.ssrCache[obj2str({ endpoint: endpoint, options: options })] = r
return r
}
// include App.svelte and render it // include App.svelte and render it
// @ts-ignore // @ts-ignore
var app = require("../lib/app.server")
var rendered = app.default.render({ // console.log("####### RENDERING ", url)
const app = require("../lib/app.server")
const rendered = app.default.render({
url: url, url: url,
}) })
head = rendered.head head = rendered.head
html = rendered.html html = rendered.html
// add ssrCache to head // add ssrCache to head, cache is built in ssr.js/apiRequest
head += head +=
"\n\n" + "\n\n" +
"<script>window.__SSR_CACHE__ = " + "<script>window.__SSR_CACHE__ = " +
@ -136,6 +109,7 @@ const { obj2str, log } = require("../lib/utils")
// status from webapp // status from webapp
// @ts-ignore // @ts-ignore
if (context.is404) { if (context.is404) {
// console.log("########## 404")
status = 404 status = 404
} else { } else {
cacheIt = true cacheIt = true
@ -149,7 +123,7 @@ const { obj2str, log } = require("../lib/utils")
} }
// read html template and replace placeholders // read html template and replace placeholders
var tpl = context.fs.readFile("templates/spa.html") let tpl = context.fs.readFile("templates/spa.html")
tpl = tpl.replace("<!--HEAD-->", head) tpl = tpl.replace("<!--HEAD-->", head)
tpl = tpl.replace("<!--HTML-->", html) tpl = tpl.replace("<!--HTML-->", html)
tpl = tpl.replace("<!--SSR.ERROR-->", error ? "<!--" + error + "-->" : "") tpl = tpl.replace("<!--SSR.ERROR-->", error ? "<!--" + error + "-->" : "")
@ -158,6 +132,7 @@ const { obj2str, log } = require("../lib/utils")
// save cache if adviced // save cache if adviced
if (cacheIt && !noCache) { if (cacheIt && !noCache) {
context.db.create("ssr", { context.db.create("ssr", {
// context.debug.dump("ssr", {
path: url, path: url,
content: tpl, content: tpl,
}) })
@ -171,7 +146,7 @@ const { obj2str, log } = require("../lib/utils")
} }
} else { } else {
// only admins are allowed to get without url parameter // only admins are allowed to get without url parameter
var auth = context.user.auth() const auth = context.user.auth()
if (!auth || auth.role !== 0) { if (!auth || auth.role !== 0) {
throw { throw {
status: 403, status: 403,

34
api/templates/spa.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Fontis</title>
<base href="/" />
<link rel="stylesheet" href="/dist/index.css?t=__TIMESTAMP__" />
<link rel="apple-touch-icon" sizes="180x180" href="/media/favicon/apple-touch-icon.png" type="image/x-icon" />
<link rel="icon" type="image/png" sizes="32x32" href="/media/favicon/favicon-32x32.png" type="image/x-icon" />
<link rel="icon" type="image/png" sizes="16x16" href="/media/favicon/favicon-16x16.png" type="image/x-icon" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#343a40" />
<meta name="apple-mobile-web-app-title" content="Fontis" />
<meta name="application-name" content="Fontis" />
<meta name="msapplication-TileColor" content="#343a40" />
<meta name="theme-color" content="#ffffff" />
<script type="text/javascript" src="svg-loader.min.js" async></script>
<!--HEAD-->
<!--PRELOAD-->
</head>
<body>
<div id="appContainer"><!--HTML--></div>
<script type="module" src="/dist/index.mjs?t=__TIMESTAMP__"></script>
<script nomodule src="/dist/index.es5.js?t=__TIMESTAMP__"></script>
</body>
<!--SSR.ERROR-->
<!--SSR.COMMENT-->
</html>

View File

@ -30,7 +30,7 @@ services:
- ./tmp/nonexistent:/nonexistent - ./tmp/nonexistent:/nonexistent
- ./tmp/.npm:/.npm - ./tmp/.npm:/.npm
working_dir: /data working_dir: /data
command: sh -c "yarn install && API_BASE=http://tibiserver:8080/api/v1/_/${TIBI_NAMESPACE} yarn start" command: sh -c "yarn install && API_BASE=http://tibiserver:8080/api/v1/_/${TIBI_NAMESPACE} yarn start${START_SCRIPT}"
expose: expose:
- 3000 - 3000
labels: labels:

View File

@ -1,3 +1,5 @@
const fs = require("fs")
const resolvePlugin = { const resolvePlugin = {
name: "resolvePlugin", name: "resolvePlugin",
setup(build) { setup(build) {
@ -68,7 +70,9 @@ const bsMiddleware = []
if (process.argv[2] == "start") { if (process.argv[2] == "start") {
const { createProxyMiddleware } = require("http-proxy-middleware") const { createProxyMiddleware } = require("http-proxy-middleware")
const apiBase = process.env.API_BASE || "http://localhost:8080/api/v1/_/" + process.env.NAMESPACE const dotEnv = fs.readFileSync(__dirname + "/.env", "utf8")
const TIBI_NAMESPACE = dotEnv.match(/TIBI_NAMESPACE=(.*)/)[1]
const apiBase = process.env.API_BASE || "http://localhost:8080/api/v1/_/" + TIBI_NAMESPACE
bsMiddleware.push( bsMiddleware.push(
createProxyMiddleware("/api", { createProxyMiddleware("/api", {
target: apiBase, target: apiBase,
@ -77,12 +81,39 @@ if (process.argv[2] == "start") {
logLevel: "debug", logLevel: "debug",
}) })
) )
// if SSR env variable is set
console.log(process.env, "=========================ENV")
if (process.env.SSR) {
// read api/config.yml.env and read SSR_TOKEN variable from it
const configEnv = fs.readFileSync(__dirname + "/api/config.yml.env", "utf8")
const SSR_TOKEN = configEnv.match(/SSR_TOKEN=(.*)/)[1]
// redirect all other requests to /api/ssr?token=owshwerNwoa&url=...
bsMiddleware.push(
createProxyMiddleware(
function (path, req) {
return !path.match(/\./)
},
{
target: apiBase,
changeOrigin: true,
logLevel: "debug",
pathRewrite: function (path, req) {
console.log(path)
return "/ssr?token=" + SSR_TOKEN + "&url=" + encodeURIComponent(path)
},
}
)
)
}
} }
module.exports = { module.exports = {
sveltePlugin: sveltePlugin, sveltePlugin: sveltePlugin,
resolvePlugin: resolvePlugin, resolvePlugin: resolvePlugin,
options: options, options: options,
distDir,
watch: { watch: {
path: [__dirname + "/" + frontendDir + "/src/**/*"], path: [__dirname + "/" + frontendDir + "/src/**/*"],
}, },
@ -103,7 +134,6 @@ module.exports = {
}), }),
], ],
}, },
ghostMode: false,
open: false, open: false,
// logLevel: "debug", // logLevel: "debug",
}, },

View File

@ -1,4 +1,3 @@
module.exports = config
const config = require("./esbuild.config.js") const config = require("./esbuild.config.js")
const svelteConfig = require("./svelte.config") const svelteConfig = require("./svelte.config")

View File

@ -1,7 +1,8 @@
AddType application/javascript .mjs AddType application/javascript .mjs
#DirectoryIndex index.html spa.html #DirectoryIndex spa.html
DirectoryIndex spa.html # notwendig, da sonst über normale url spa.html aufgerufen wird, muss nur datei name sei, der nicht existiert
DirectoryIndex noindex
<ifModule mod_rewrite.c> <ifModule mod_rewrite.c>
RewriteEngine On RewriteEngine On
@ -11,6 +12,8 @@ DirectoryIndex spa.html
RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-d
# leitet initale request an backend und nicht an spa.html weiter
RewriteRule (.*) /spa.html [QSA,L] RewriteRule ^/?(.*)$ http://tibi-server:8080/api/v1/_/fontis_v2/ssr?token=owshwerNwoa&url=/$1 [P,QSA,L]
# standardmäßig wegen deeplink aus google notwendig, da sonst 404
#RewriteRule (.*) /spa.html [QSA,L]
</ifModule> </ifModule>

View File

@ -1,3 +1,3 @@
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#000" d="M10 14h30v2H10zM15 24h25v2H15zM20 34h20v2H20z"/> <path fill="#343a40" d="M10 14h30v2H10zM15 24h25v2H15zM20 34h20v2H20z"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 177 B

After

Width:  |  Height:  |  Size: 180 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -1,5 +1,5 @@
<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="66" height="66" rx="33" fill="#000"/> <rect x="1" y="1" width="66" height="66" rx="33" fill="#343a40"/>
<path d="M44.91 39.965 34 29.066 23.09 39.965l-1.055-1.055L34 26.934 45.965 38.91l-1.055 1.055z" fill="#fff"/> <path d="M44.91 39.965 34 29.066 23.09 39.965l-1.055-1.055L34 26.934 45.965 38.91l-1.055 1.055z" fill="#fff"/>
<rect x="1" y="1" width="66" height="66" rx="33" stroke="#fff" stroke-width="2"/> <rect x="1" y="1" width="66" height="66" rx="33" stroke="#fff" stroke-width="2"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 371 B

After

Width:  |  Height:  |  Size: 374 B

View File

@ -1,3 +1,3 @@
<svg width="75" height="75" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="75" height="75" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M88 50c0 1.38-1.12 2.5-2.5 2.5H20.608l25.644 25.218a2.502 2.502 0 1 1-3.504 3.564L12.772 50.805a2.49 2.49 0 0 1-.758-2.07c.064-.6.342-1.16.786-1.57L42.748 16.718a2.5 2.5 0 1 1 3.504 3.564L20.608 47.5H85.5c1.38 0 2.5 1.12 2.5 2.5z" fill="#000" stroke="#000" stroke-width="10"/> <path d="M88 50c0 1.38-1.12 2.5-2.5 2.5H20.608l25.644 25.218a2.502 2.502 0 1 1-3.504 3.564L12.772 50.805a2.49 2.49 0 0 1-.758-2.07c.064-.6.342-1.16.786-1.57L42.748 16.718a2.5 2.5 0 1 1 3.504 3.564L20.608 47.5H85.5c1.38 0 2.5 1.12 2.5 2.5z" fill="#5b6e98" stroke="#5b6e98" stroke-width="10"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 395 B

After

Width:  |  Height:  |  Size: 401 B

View File

@ -1,3 +1,3 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.5 7.875h-6.125V5.25a.875.875 0 0 0-1.75 0v2.625h-19.25V5.25a.875.875 0 0 0-1.75 0v2.625H10.5A2.625 2.625 0 0 0 7.875 10.5v35a2.625 2.625 0 0 0 2.625 2.625h35a2.625 2.625 0 0 0 2.625-2.625v-35A2.625 2.625 0 0 0 45.5 7.875zm-35 1.75h6.125v2.625a.875.875 0 1 0 1.75 0V9.625h19.25v2.625a.875.875 0 1 0 1.75 0V9.625H45.5a.875.875 0 0 1 .875.875v7.875H9.625V10.5a.875.875 0 0 1 .875-.875zm35 36.75h-35a.875.875 0 0 1-.875-.875V20.125h36.75V45.5a.875.875 0 0 1-.875.875z" fill="#000"/> <path d="M45.5 7.875h-6.125V5.25a.875.875 0 0 0-1.75 0v2.625h-19.25V5.25a.875.875 0 0 0-1.75 0v2.625H10.5A2.625 2.625 0 0 0 7.875 10.5v35a2.625 2.625 0 0 0 2.625 2.625h35a2.625 2.625 0 0 0 2.625-2.625v-35A2.625 2.625 0 0 0 45.5 7.875zm-35 1.75h6.125v2.625a.875.875 0 1 0 1.75 0V9.625h19.25v2.625a.875.875 0 1 0 1.75 0V9.625H45.5a.875.875 0 0 1 .875.875v7.875H9.625V10.5a.875.875 0 0 1 .875-.875zm35 36.75h-35a.875.875 0 0 1-.875-.875V20.125h36.75V45.5a.875.875 0 0 1-.875.875z" fill="#343a40"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 599 B

After

Width:  |  Height:  |  Size: 602 B

View File

@ -1,6 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#kvekca80oa)"> <g clip-path="url(#kvekca80oa)">
<path d="m30.797 7.297 1.406 1.406L16.5 24.406.797 8.703l1.406-1.406L16.5 21.594 30.797 7.297z" fill="#000"/> <path d="m30.797 7.297 1.406 1.406L16.5 24.406.797 8.703l1.406-1.406L16.5 21.594 30.797 7.297z" fill="#343a40"/>
</g> </g>
<defs> <defs>
<clipPath id="kvekca80oa"> <clipPath id="kvekca80oa">

Before

Width:  |  Height:  |  Size: 421 B

After

Width:  |  Height:  |  Size: 424 B

View File

@ -1,4 +1,4 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.208 47.65a.875.875 0 0 0 .875-.874V11.958a.875.875 0 0 1 .875-.875h20.125v11.375a.875.875 0 0 0 .875.875h11.375v23.334a.875.875 0 0 0 1.75 0V22.458a.875.875 0 0 0-.256-.619L33.577 9.59a.875.875 0 0 0-.619-.256h-21a2.625 2.625 0 0 0-2.625 2.625v34.818c0 .232.256.618.256.618s.387.257.619.257zm23.625-35.33 9.262 9.263h-9.262V12.32z" fill="#000"/> <path d="M10.208 47.65a.875.875 0 0 0 .875-.874V11.958a.875.875 0 0 1 .875-.875h20.125v11.375a.875.875 0 0 0 .875.875h11.375v23.334a.875.875 0 0 0 1.75 0V22.458a.875.875 0 0 0-.256-.619L33.577 9.59a.875.875 0 0 0-.619-.256h-21a2.625 2.625 0 0 0-2.625 2.625v34.818c0 .232.256.618.256.618s.387.257.619.257zm23.625-35.33 9.262 9.263h-9.262V12.32z" fill="#343a40"/>
<path d="M10.102 48.523a2.625 2.625 0 0 1-.769-1.856h1.75a.875.875 0 0 0 .875.875h31.5a.875.875 0 0 0 .875-.875h1.75a2.625 2.625 0 0 1-2.625 2.625h-31.5a2.625 2.625 0 0 1-1.856-.77z" fill="#000"/> <path d="M10.102 48.523a2.625 2.625 0 0 1-.769-1.856h1.75a.875.875 0 0 0 .875.875h31.5a.875.875 0 0 0 .875-.875h1.75a2.625 2.625 0 0 1-2.625 2.625h-31.5a2.625 2.625 0 0 1-1.856-.77z" fill="#343a40"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 667 B

After

Width:  |  Height:  |  Size: 673 B

View File

@ -1,6 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#3k3057tu3a)"> <g clip-path="url(#3k3057tu3a)">
<path d="M31.047 23.953 16.5 9.422 1.953 23.953.547 22.547 16.5 6.578l15.953 15.969-1.406 1.406z" fill="#000"/> <path d="M31.047 23.953 16.5 9.422 1.953 23.953.547 22.547 16.5 6.578l15.953 15.969-1.406 1.406z" fill="#343a40"/>
</g> </g>
<defs> <defs>
<clipPath id="3k3057tu3a"> <clipPath id="3k3057tu3a">

Before

Width:  |  Height:  |  Size: 423 B

After

Width:  |  Height:  |  Size: 426 B

View File

@ -89,15 +89,17 @@
getPages() getPages()
getLibrary() getLibrary()
getModules() getModules()
console.log("TESTR")
let activeMenu = false let activeMenu = false
$: { $: {
if (typeof window !== "undefined") {
if (activeMenu) { if (activeMenu) {
document.body.classList.add("overflow") document.body.classList.add("overflow")
} else { } else {
document.body.classList.remove("overflow") document.body.classList.remove("overflow")
} }
} }
}
</script> </script>
<main class=""> <main class="">

View File

@ -1,121 +1,12 @@
import { apiBaseURL } from "./config" import { apiRequest } from "../../api/hooks/lib/ssr"
const _f = function (url, options): Promise<Response> {
if (typeof XMLHttpRequest === "undefined") {
return Promise.resolve(null)
}
options = options || {}
return new Promise((resolve, reject) => {
const request = new XMLHttpRequest()
const keys = []
const all = []
const headers = {}
const response = (): Response => ({
ok: ((request.status / 100) | 0) == 2, // 200-299
statusText: request.statusText,
status: request.status,
url: request.responseURL,
text: () => Promise.resolve(request.responseText),
json: () => Promise.resolve(request.responseText).then(JSON.parse),
blob: () => Promise.resolve(new Blob([request.response])),
clone: response,
headers: {
// @ts-ignore
keys: () => keys,
// @ts-ignore
entries: () => all,
get: (n) => headers[n.toLowerCase()],
has: (n) => n.toLowerCase() in headers,
},
})
request.open(options.method || "get", url, true)
request.onload = () => {
request
.getAllResponseHeaders()
// @ts-ignore
.replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm, (m, key, value) => {
keys.push((key = key.toLowerCase()))
all.push([key, value])
headers[key] = headers[key] ? `${headers[key]},${value}` : value
})
resolve(response())
}
request.onerror = reject
request.withCredentials = options.credentials == "include"
for (const i in options.headers) {
request.setRequestHeader(i, options.headers[i])
}
request.send(options.body || null)
})
}
const _fetch = typeof fetch === "undefined" ? (typeof window === "undefined" ? _f : window.fetch || _f) : fetch
export const api = async <T>( export const api = async <T>(
endpoint: string, endpoint: string,
options?: { options?: ApiOptions,
method?: string
filter?: any
sort?: string
limit?: number
offset?: number
projection?: string
headers?: {
[key: string]: string
}
params?: {
[key: string]: string
}
},
body?: any body?: any
): Promise<{ data: T; count: number } | any> => { ): Promise<{ data: T; count: number } | any> => {
if (typeof window === "undefined") { let data = await apiRequest(endpoint, options, body)
// ssr
// @ts-ignore // @ts-ignore
return context.ssrFetch(endpoint, options) console.log(data, "data")
} return data
let method = options?.method || "GET"
let query = "&count=1"
if (options?.filter) query += "&filter=" + encodeURIComponent(JSON.stringify(options.filter))
if (options?.sort) query += "&sort=" + options.sort + "&sort=_id"
if (options?.limit) query += "&limit=" + options.limit
if (options?.offset) query += "&offset=" + options.offset
if (options?.projection) query += "&projection=" + options.projection
if (options?.params) {
Object.keys(options.params).forEach((p) => {
query += "&" + p + "=" + encodeURIComponent(options.params[p])
})
}
let headers: any = {
"Content-Type": "application/json",
}
if (options?.headers) headers = { ...headers, ...options.headers }
let url = apiBaseURL + endpoint + (query ? "?" + query : "")
const requestOptions: any = {
method,
mode: "cors",
headers,
}
if (method === "POST" || method === "PUT") {
requestOptions.body = JSON.stringify(body)
}
let response = await _fetch(url, requestOptions)
if (response.status == 409 || response.status == 401) return response
let data = (await response?.json()) || null
// @ts-ignore
return { data }
} }

View File

@ -108,7 +108,7 @@ select {
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
width: 0px; width: 0px;
background: #000000; background: #343a40;
transition: width 0.5s ease-in; transition: width 0.5s ease-in;
} }
.fill:hover:after, .fill:hover:after,
@ -143,7 +143,7 @@ swiper-slide {
z-index: 10000; z-index: 10000;
left: 0px; left: 0px;
bottom: -10px; bottom: -10px;
background: #000000; background: @signal-color;
height: 5px; height: 5px;
width: 0; width: 0;
animation: underlineEffect 15s linear forwards; animation: underlineEffect 15s linear forwards;

View File

@ -1,7 +1,8 @@
@bg-color: #fff; @bg-color: #fff;
@bg-color-secondary: #000; @bg-color-secondary: #343a40;
@font-color: #000; @font-color: #343a40;
@font-color-secondary: #fff; @font-color-secondary: #fff;
@signal-color: #5b6e98;
@desktop_large:~ "only screen and (min-width: 1200px)"; @desktop_large:~ "only screen and (min-width: 1200px)";
@desktop:~ "only screen and (min-width: 1024px)"; @desktop:~ "only screen and (min-width: 1024px)";

View File

@ -22,6 +22,7 @@
nextpage = pages[nextIndex] nextpage = pages[nextIndex]
} }
let blackBg = false let blackBg = false
if (typeof window !== "undefined") {
setInterval(() => { setInterval(() => {
if (location.pathname == "/") { if (location.pathname == "/") {
blackBg = true blackBg = true
@ -37,8 +38,10 @@
showNext = true showNext = true
} }
}, 1000) }, 1000)
}
let showNext = true let showNext = true
$: { $: {
if (typeof window !== "undefined") {
if ($rerender) { if ($rerender) {
if (location.pathname != "/") { if (location.pathname != "/") {
getNextPage($navigation.pages) getNextPage($navigation.pages)
@ -50,6 +53,7 @@
showNext = true showNext = true
} }
} }
}
</script> </script>
<div class="footer" class:black-bg="{blackBg}"> <div class="footer" class:black-bg="{blackBg}">

View File

@ -27,15 +27,18 @@
Object.assign(swiper, params) Object.assign(swiper, params)
swiper.initialize() swiper.initialize()
if (typeof window !== "undefined") {
// Add the 'active' class to the h1 of the first slide // Add the 'active' class to the h1 of the first slide
const firstSlideH1 = document.querySelector(".swiper-slide-active .titles h1") const firstSlideH1 = document.querySelector(".swiper-slide-active .titles h1")
if (firstSlideH1) { if (firstSlideH1) {
firstSlideH1.classList.add("active") firstSlideH1.classList.add("active")
} }
} }
}
}) })
function handleSlideChange() { function handleSlideChange() {
if (typeof window !== "undefined") {
document.querySelectorAll(".titles h1").forEach((h1) => { document.querySelectorAll(".titles h1").forEach((h1) => {
h1.classList.remove("active") h1.classList.remove("active")
}) })
@ -47,6 +50,7 @@
} }
}, 600) }, 600)
} }
}
let teaser = teasers[0] let teaser = teasers[0]
</script> </script>
@ -135,6 +139,7 @@
line-height: 1; line-height: 1;
font-weight: 500; font-weight: 500;
position: relative; position: relative;
color: @signal-color;
} }
h2 { h2 {

View File

@ -26,9 +26,11 @@
export let i: number export let i: number
export let page: Page export let page: Page
export let personPage: boolean export let personPage: boolean
if (typeof window !== "undefined") {
window.addEventListener("popstate", function (event) { window.addEventListener("popstate", function (event) {
$rerender = $rerender + 1 $rerender = $rerender + 1
}) })
}
</script> </script>
{#if Object.keys(row).length} {#if Object.keys(row).length}
@ -140,6 +142,7 @@
h1 { h1 {
font-weight: 500; font-weight: 500;
font-size: 2rem; font-size: 2rem;
color: @signal-color;
} }
.top-header { .top-header {
img { img {

View File

@ -24,6 +24,7 @@
} }
onMount(() => { onMount(() => {
if (typeof window !== "undefined") {
if ($scrollToRowNr !== -1) { if ($scrollToRowNr !== -1) {
if (!$scrollToRowNr) { if (!$scrollToRowNr) {
$scrollToRowNr = -1 $scrollToRowNr = -1
@ -40,6 +41,7 @@
}) })
$scrollToRowNr = -1 $scrollToRowNr = -1
} }
}
}) })
$: { $: {

View File

@ -164,8 +164,8 @@
height: 1.8vw; height: 1.8vw;
max-height: 25px; max-height: 25px;
border-radius: 15px; border-radius: 15px;
border: 2px solid #4f4f4f; border: 2px solid @signal-color;
color: #4f4f4f; color: @signal-color;
background-color: @bg-color-secondary; background-color: @bg-color-secondary;
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -28,7 +28,7 @@
gap: 20px; gap: 20px;
.box { .box {
padding: 5px 10px; padding: 5px 10px;
background-color: @bg-color-secondary; background-color: @signal-color;
color: @font-color-secondary; color: @font-color-secondary;
font-weight: bold; font-weight: bold;
} }

View File

@ -6,7 +6,9 @@
export let opened = "" export let opened = ""
let jobOffers = pages.map((p) => p.jobOffer) let jobOffers = pages.map((p) => p.jobOffer)
onMount(() => { onMount(() => {
if (typeof window !== "undefined") {
opened = location.search.split("=").at(-1) opened = location.search.split("=").at(-1)
}
}) })
</script> </script>
@ -51,9 +53,9 @@
@import "../../assets/css/main.less"; @import "../../assets/css/main.less";
button { button {
margin-top: 20px; margin-top: 20px;
background-color: @bg-color-secondary; background-color: @signal-color;
color: @font-color-secondary; color: @font-color-secondary;
border: 2px solid @bg-color-secondary; border: 2px solid @signal-color;
padding: 2px 15px; padding: 2px 15px;
font-weight: bold; font-weight: bold;
} }

View File

@ -5,10 +5,12 @@
export let pageId: string export let pageId: string
console.log("YEY") console.log("YEY")
let active = -1 let active = -1
if (typeof window !== "undefined") {
setInterval(() => { setInterval(() => {
active += 1 active += 1
if (active == iconCycleSquare.boxes.length) active = 0 if (active == iconCycleSquare.boxes.length) active = 0
}, 1250) }, 1250)
}
</script> </script>
<div class="iconCycleSquares"> <div class="iconCycleSquares">
@ -17,8 +19,7 @@
<div class="content"> <div class="content">
<div class="icon"> <div class="icon">
<svg <svg
stroke="{i == active ? 'black' : 'white'}" stroke="{i == active ? '#5b6e98' : 'white'}"
fill="{i == active ? 'black' : 'white'}"
data-src="{apiBaseURL}medialib/{box?.icon}/{$mediaLibrary?.[box?.icon]?.file?.src}"></svg> data-src="{apiBaseURL}medialib/{box?.icon}/{$mediaLibrary?.[box?.icon]?.file?.src}"></svg>
</div> </div>
<div class="text"> <div class="text">
@ -43,8 +44,8 @@
font-size: 1rem; font-size: 1rem;
} }
.box { .box {
border: 4px solid @bg-color-secondary; border: 4px solid @signal-color;
background-color: @bg-color-secondary; background-color: @signal-color;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -52,7 +53,7 @@
padding: 10px; padding: 10px;
&.active { &.active {
background-color: @bg-color; background-color: @bg-color;
color: @font-color; color: #5b6e98;
} }
aspect-ratio: 1/1; aspect-ratio: 1/1;
width: calc((100% / 2) - 10px); width: calc((100% / 2) - 10px);

View File

@ -26,11 +26,12 @@
circles = circles circles = circles
}) })
let focused = -1 let focused = -1
if (typeof window !== "undefined") {
setInterval(() => { setInterval(() => {
focused += 1 focused += 1
if (focused == count) focused = 0 if (focused == count) focused = 0
const svgObject = document.getElementById("mySvgObject" + focused)
}, 1000) }, 1000)
}
</script> </script>
<div class="container"> <div class="container">
@ -52,8 +53,8 @@
<div class="icon"> <div class="icon">
<svg <svg
id="mySvgObject{i}" id="mySvgObject{i}"
stroke="{i == focused ? 'white' : 'black'}" stroke="{i == focused ? 'white' : '#5b6e98'}"
fill="{i == focused ? 'white' : 'black'}" fill="{i == focused ? 'white' : '#5b6e98'}"
data-src="{apiBaseURL}medialib/{iconCycleCircle?.boxes[i]?.icon}/{$mediaLibrary[ data-src="{apiBaseURL}medialib/{iconCycleCircle?.boxes[i]?.icon}/{$mediaLibrary[
iconCycleCircle?.boxes[i]?.icon iconCycleCircle?.boxes[i]?.icon
]?.file?.src}"></svg> ]?.file?.src}"></svg>
@ -111,7 +112,7 @@
width: 180px; width: 180px;
height: 180px; height: 180px;
margin: auto; margin: auto;
background: rgb(0, 0, 0); background: @signal-color;
border-radius: 50%; border-radius: 50%;
& > .content { & > .content {
font-weight: bold; font-weight: bold;
@ -130,8 +131,8 @@
width: 180px; width: 180px;
overflow: hidden; overflow: hidden;
height: 180px; height: 180px;
background: rgba(255, 255, 255, 0); background: @signal-color;
border: 4px solid @bg-color-secondary; border: 4px solid @signal-color;
z-index: 100; z-index: 100;
transform-origin: center; transform-origin: center;
border-radius: 50%; border-radius: 50%;
@ -182,7 +183,7 @@
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
background: rgb(0, 0, 0); background: @signal-color;
border-radius: 50%; border-radius: 50%;
top: -50%; top: -50%;
left: 0; left: 0;
@ -194,13 +195,13 @@
&.focused { &.focused {
background: @bg-color-secondary !important; background: @bg-color-secondary !important;
.number { .number {
color: @font-color !important; color: @signal-color !important;
} }
.content { .content {
color: @font-color-secondary !important; color: @font-color-secondary !important;
} }
.half { .half {
background: @bg-color-secondary !important; background: @signal-color !important;
&::before { &::before {
background: @bg-color !important; background: @bg-color !important;
} }

View File

@ -10,7 +10,7 @@
<style lang="less"> <style lang="less">
@import "../../assets/css/main.less"; @import "../../assets/css/main.less";
.more { .more {
background-color: @bg-color-secondary; background-color: @signal-color;
color: @font-color-secondary; color: @font-color-secondary;
border: none; border: none;
height: 36px; height: 36px;
@ -20,5 +20,9 @@
} }
.bright { .bright {
border: 2px solid @bg-color; border: 2px solid @bg-color;
background-color: @bg-color-secondary;
&:hover {
background-color: @signal-color;
}
} }
</style> </style>

View File

@ -54,7 +54,7 @@
height: 100px; height: 100px;
width: 365px; width: 365px;
z-index: 9; z-index: 9;
background-color: @bg-color-secondary; background-color: @signal-color;
} }
.description { .description {
position: relative; position: relative;

View File

@ -28,8 +28,8 @@
</div> </div>
<svg <svg
data-src="/media/arrow-r.svg" data-src="/media/arrow-r.svg"
stroke="{i == focused ? '#fff' : 'black'}" stroke="{i == focused ? '#fff' : '#343a40'}"
fill="{i == focused ? '#fff' : 'black'}" fill="{i == focused ? '#fff' : '#343a40'}"
style="z-index: 9999; position: relative;"></svg> style="z-index: 9999; position: relative;"></svg>
</button> </button>
{:else} {:else}
@ -89,9 +89,9 @@
} }
.page-ref { .page-ref {
background-color: @bg-color-secondary; background-color: @signal-color;
color: @font-color-secondary; color: @font-color-secondary;
border: 2px solid @bg-color-secondary; border: 2px solid @signal-color;
} }
} }
</style> </style>

View File

@ -81,7 +81,7 @@
} }
.text { .text {
width: 100%; width: 100%;
background-color: @bg-color-secondary; background-color: @signal-color;
color: @font-color-secondary; color: @font-color-secondary;
border: 2px solid @bg-color-secondary; border: 2px solid @bg-color-secondary;
padding: 2px 15px; padding: 2px 15px;

View File

@ -10,32 +10,42 @@
} }
const jumpDown = () => { const jumpDown = () => {
if (typeof window !== "undefined") {
// Jump down by 100vh // Jump down by 100vh
window.scrollTo({ top: window.innerHeight, behavior: "smooth" }) window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
} }
}
onMount(() => { onMount(() => {
if (typeof window !== "undefined") {
// Attach scroll event listener when component is mounted // Attach scroll event listener when component is mounted
window.addEventListener("scroll", checkScroll) window.addEventListener("scroll", checkScroll)
}
}) })
onDestroy(() => { onDestroy(() => {
if (typeof window !== "undefined") {
// Remove scroll event listener when component is destroyed // Remove scroll event listener when component is destroyed
window.removeEventListener("scroll", checkScroll) window.removeEventListener("scroll", checkScroll)
}
}) })
let force = true let force = true
if (typeof window !== "undefined") {
setInterval(() => { setInterval(() => {
if (location.pathname != "/") { if (location.pathname != "/") {
force = false force = false
} else force = true } else force = true
}, 1000) }, 1000)
}
$: { $: {
if (typeof window !== "undefined") {
if ($rerender) { if ($rerender) {
if (location.pathname != "/") { if (location.pathname != "/") {
force = false force = false
} else force = true } else force = true
} }
} }
}
</script> </script>
{#if showButton && force} {#if showButton && force}

View File

@ -9,18 +9,24 @@
} }
const scrollToTop = () => { const scrollToTop = () => {
if (typeof window !== "undefined") {
// Scroll smoothly to the top // Scroll smoothly to the top
window.scrollTo({ top: 0, behavior: "smooth" }) window.scrollTo({ top: 0, behavior: "smooth" })
} }
}
onMount(() => { onMount(() => {
if (typeof window !== "undefined") {
// Attach scroll event listener when component is mounted // Attach scroll event listener when component is mounted
window.addEventListener("scroll", checkScroll) window.addEventListener("scroll", checkScroll)
}
}) })
onDestroy(() => { onDestroy(() => {
if (typeof window !== "undefined") {
// Remove scroll event listener when component is destroyed // Remove scroll event listener when component is destroyed
window.removeEventListener("scroll", checkScroll) window.removeEventListener("scroll", checkScroll)
}
}) })
</script> </script>

View File

@ -31,7 +31,7 @@
min-width: 60px; min-width: 60px;
min-height: 100px; min-height: 100px;
padding: 10px; padding: 10px;
background-color: @bg-color-secondary; background-color: @signal-color;
color: @font-color-secondary; color: @font-color-secondary;
font-family: "LibreCaslonText"; font-family: "LibreCaslonText";
font-size: 1.7rem; font-size: 1.7rem;

View File

@ -2,5 +2,6 @@ import { api } from "../../api"
export async function loadNavigation(): Promise<Navigation[]> { export async function loadNavigation(): Promise<Navigation[]> {
let nav = await api<Navigation[]>("navigation", {}) let nav = await api<Navigation[]>("navigation", {})
console.log("NAV:", nav)
return nav.data return nav.data
} }

View File

@ -9,8 +9,10 @@
"scripts": { "scripts": {
"validate": "svelte-check && tsc --noEmit", "validate": "svelte-check && tsc --noEmit",
"dev": "node scripts/esbuild-wrapper.js watch", "dev": "node scripts/esbuild-wrapper.js watch",
"start": "NAMESPACE=renz_shop node scripts/esbuild-wrapper.js start", "start": "node scripts/esbuild-wrapper.js start",
"start:ssr": "SSR=1 node scripts/esbuild-wrapper.js start",
"build": "node scripts/esbuild-wrapper.js build", "build": "node scripts/esbuild-wrapper.js build",
"build:admin": "node scripts/esbuild-wrapper.js build esbuild.config.admin.js",
"build:legacy": "node scripts/esbuild-wrapper.js build esbuild.config.legacy.js && babel _temp/index.js -o _temp/index.babeled.js && esbuild _temp/index.babeled.js --outfile=frontend/dist/index.es5.js --target=es5 --bundle --minify --sourcemap", "build:legacy": "node scripts/esbuild-wrapper.js build esbuild.config.legacy.js && babel _temp/index.js -o _temp/index.babeled.js && esbuild _temp/index.babeled.js --outfile=frontend/dist/index.es5.js --target=es5 --bundle --minify --sourcemap",
"build:server": "node scripts/esbuild-wrapper.js build esbuild.config.server.js && babel _temp/app.server.js -o _temp/app.server.babeled.js && esbuild _temp/app.server.babeled.js --outfile=api/hooks/lib/app.server.js --target=es5 --bundle --sourcemap --platform=node", "build:server": "node scripts/esbuild-wrapper.js build esbuild.config.server.js && babel _temp/app.server.js -o _temp/app.server.babeled.js && esbuild _temp/app.server.babeled.js --outfile=api/hooks/lib/app.server.js --target=es5 --bundle --sourcemap --platform=node",
"build:test": "node scripts/esbuild-wrapper.js build esbuild.config.test.js && babel --config-file ./babel.config.test.json _temp/hook.test.js -o _temp/hook.test.babeled.js && esbuild _temp/hook.test.babeled.js --outfile=api/hooks/lib/hook.test.js --target=es5 --bundle --sourcemap --platform=node", "build:test": "node scripts/esbuild-wrapper.js build esbuild.config.test.js && babel --config-file ./babel.config.test.json _temp/hook.test.js -o _temp/hook.test.babeled.js && esbuild _temp/hook.test.babeled.js --outfile=api/hooks/lib/hook.test.js --target=es5 --bundle --sourcemap --platform=node",

27
types/global.d.ts vendored
View File

@ -3,10 +3,35 @@ interface FileField {
src: string src: string
type: string type: string
} }
interface Ssr {
id?: string
path: string
content: string
validUntil: any // go Time
}
interface Pages { interface Pages {
[key: string]: Page [key: string]: Page
} }
interface ApiResult<T> {
data: T
count: number
}
interface ApiOptions {
method?: string
filter?: any
sort?: string
lookup?: string
limit?: number
offset?: number
projection?: string
headers?: {
[key: string]: string
}
params?: {
[key: string]: string
}
}
interface Page { interface Page {
path: string path: string