forked from cms/tibi-svelte-starter
init
This commit is contained in:
parent
2ee7f650db
commit
0aca310a5e
5
scripts/init.sh
Executable file
5
scripts/init.sh
Executable file
@ -0,0 +1,5 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
files=`find .drone.yml api src -type f -name "config*" -or -name "*drone*"`
|
||||||
|
|
||||||
|
grep -E "__.*__" $files | grep -v TIMESTAMP
|
||||||
165
src/api.ts
Normal file
165
src/api.ts
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
import { apiBaseURL } from "./config"
|
||||||
|
import * as sentry from "./sentry"
|
||||||
|
import * as SSR from "../api/hooks/lib/utils.js"
|
||||||
|
|
||||||
|
// [MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)
|
||||||
|
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>(
|
||||||
|
endpoint: string,
|
||||||
|
options?: {
|
||||||
|
method?: string
|
||||||
|
filter?: any
|
||||||
|
sort?: string
|
||||||
|
limit?: number
|
||||||
|
offset?: number
|
||||||
|
projection?: string
|
||||||
|
headers?: {
|
||||||
|
[key: string]: string
|
||||||
|
}
|
||||||
|
params?: {
|
||||||
|
[key: string]: string
|
||||||
|
}
|
||||||
|
}
|
||||||
|
): Promise<{ data: T; count: number }> => {
|
||||||
|
if (typeof window === "undefined") {
|
||||||
|
// ssr
|
||||||
|
// @ts-ignore
|
||||||
|
return context.ssrFetch(endpoint, options)
|
||||||
|
}
|
||||||
|
|
||||||
|
// try ssr cache
|
||||||
|
const key = SSR.obj2str({ endpoint, options })
|
||||||
|
// @ts-ignore
|
||||||
|
if (window.__SSR_CACHE__) {
|
||||||
|
// @ts-ignore
|
||||||
|
const ssrVal = window.__SSR_CACHE__[key]
|
||||||
|
console.log("SSR:", key, ssrVal)
|
||||||
|
if (ssrVal) {
|
||||||
|
return ssrVal
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let 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 span = sentry.currentTransaction()?.startChild({
|
||||||
|
op: "fetch",
|
||||||
|
description: method + " " + url,
|
||||||
|
data: Object.assign({}, options, { url }),
|
||||||
|
})
|
||||||
|
const trace_id = span?.toTraceparent()
|
||||||
|
if (trace_id) {
|
||||||
|
headers["sentry-trace"] = trace_id
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await _fetch(url, {
|
||||||
|
method,
|
||||||
|
mode: "cors",
|
||||||
|
headers,
|
||||||
|
})
|
||||||
|
|
||||||
|
span?.finish()
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
let data = (await response?.json()) || null
|
||||||
|
|
||||||
|
if (response?.status < 200 || response?.status >= 400)
|
||||||
|
throw { response, data }
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
return { data, count: response?.headers?.get("x-results-count") || 0 }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getContent = async (path: string): Promise<Content> => {
|
||||||
|
const c = await api<Content[]>("content", { limit: 1, filter: { path } })
|
||||||
|
if (c?.data?.length) {
|
||||||
|
return c.data[0]
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
@ -1,5 +1,17 @@
|
|||||||
<h1>__PROJECT_TITLE__</h1>
|
<h1>__PROJECT_TITLE__</h1>
|
||||||
|
|
||||||
|
<div use:links>
|
||||||
|
<a href="/test1">1</a>
|
||||||
|
<a href="/test2">2</a>
|
||||||
|
<a href="/test3">3</a>
|
||||||
|
<a href="/test4">4</a>
|
||||||
|
<Router url="{url}">
|
||||||
|
<Route path="/*path" let:params>
|
||||||
|
<Content path="/{params.path}" />
|
||||||
|
</Route>
|
||||||
|
</Router>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
h1 {
|
h1 {
|
||||||
color: red;
|
color: red;
|
||||||
@ -7,8 +19,10 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script lang="typescript">
|
<script lang="typescript">
|
||||||
|
import { Router, Route, links } from "svelte-routing"
|
||||||
import { scrollToTop } from "svelte-scrollto"
|
import { scrollToTop } from "svelte-scrollto"
|
||||||
import { location } from "../store"
|
import { location } from "../store"
|
||||||
|
import Content from "./Content.svelte"
|
||||||
|
|
||||||
export let url = ""
|
export let url = ""
|
||||||
if (url) {
|
if (url) {
|
||||||
|
|||||||
5
src/components/Content.svelte
Normal file
5
src/components/Content.svelte
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<h2>{path}</h2>
|
||||||
|
|
||||||
|
<script lang="typescript">
|
||||||
|
export let path: string
|
||||||
|
</script>
|
||||||
105
src/components/ContentBlocks.svelte
Normal file
105
src/components/ContentBlocks.svelte
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
{#if blocks?.length}
|
||||||
|
<section class="section_padding">
|
||||||
|
<div class="container">
|
||||||
|
{#each blocks as box, idx}
|
||||||
|
<!-- Teaserbox -->
|
||||||
|
<div class="row center_row">
|
||||||
|
{#if box.images?.length && (box.layout == 1 || box.layout == 3)}
|
||||||
|
<div class="col-md-{box.layout < 3 ? 6 : 12}">
|
||||||
|
<img
|
||||||
|
loading="lazy"
|
||||||
|
src="{imageBase + box.images[0].file.src}"
|
||||||
|
alt="{box.images[0].label || ''}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if box.text || box.title || (box.button_text && box.button_url)}
|
||||||
|
<div class="col-md-{box.layout < 3 ? 6 : 12}">
|
||||||
|
{#if box.subtitle}
|
||||||
|
<div class="subline">{box.subtitle}</div>
|
||||||
|
{/if}
|
||||||
|
{#if box.title}
|
||||||
|
{#if accordeon == true}
|
||||||
|
<h2
|
||||||
|
class="h2_nooffset acc_trigger"
|
||||||
|
class:active="{activeAccordeons[idx]}"
|
||||||
|
on:click="{() => {
|
||||||
|
activeAccordeons[idx] = !activeAccordeons[idx]
|
||||||
|
}}"
|
||||||
|
>
|
||||||
|
{box.title}
|
||||||
|
<span class="icon">\/</span>
|
||||||
|
</h2>
|
||||||
|
{:else}
|
||||||
|
<h2 class="h2_nooffset">{box.title}</h2>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
<div
|
||||||
|
class="boxText"
|
||||||
|
class:hideText="{accordeon && box.title && !activeAccordeons[idx]}"
|
||||||
|
>
|
||||||
|
{@html box.text}
|
||||||
|
{#if box.button_text && box.button_url}
|
||||||
|
<a
|
||||||
|
href="{box.button_url}"
|
||||||
|
class="btn btn_blue"
|
||||||
|
>{box.button_text}</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if box.images?.length && (box.layout == 2 || box.layout == 4)}
|
||||||
|
<div class="col-md-{box.layout < 3 ? 6 : 12}">
|
||||||
|
<img
|
||||||
|
loading="lazy"
|
||||||
|
src="{imageBase + box.images[0].file.src}"
|
||||||
|
alt="{box.images[0].label || ''}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.acc_trigger {
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: solid 1px #ccc;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
.icon {
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 30px;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hideText {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="typescript">
|
||||||
|
export let blocks: ContentBlock[]
|
||||||
|
export let imageBase: string
|
||||||
|
|
||||||
|
export let accordeon = false
|
||||||
|
|
||||||
|
let activeAccordeons: {
|
||||||
|
[key: number]: boolean
|
||||||
|
} = {}
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user