apairon/my-notes-viewer
1
0
Fork 0
forked from cms/tibi-svelte-starter
Code Issues Pull Requests Projects Releases Wiki Activity

Weitere Verbesserungen des Starter Projekts für neue Projekte.

Browse Source
This commit is contained in:
Mario Linz 2022-05-25 12:10:29 +02:00
parent 47fdee2396
commit 516c35dcb4
17 changed files with 398 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
api/collections/content.yml
View File

@ -24,14 +24,18 @@ meta:
mediaQuery: "(max-width:599px)" mediaQuery: "(max-width:599px)"
primaryText: path primaryText: path
columns: columns:
- name - source: path
- path twig: "{{locale}}{{path}}"
- source: locale
type: flag
# Desktop # Desktop
- type: table - type: table
mediaQuery: "(min-width:600px)" mediaQuery: "(min-width:600px)"
columns: columns:
- name - source: path
- path twig: "{{locale}}{{path}}"
- source: locale
type: flag
imageFilter: imageFilter:
xs: xs:
@ -102,6 +106,7 @@ hooks:
# Feldliste der Kollektion # Feldliste der Kollektion
fields: fields:
- !include fields/_locale.yml
- name: name - name: name
type: string type: string
meta: meta:

435
api/collections/general.yml
View File

@ -34,222 +34,225 @@ meta:
- lastname - lastname
- companyName - companyName
entryViewFields: tabsSection:
tabsSection: meta:
meta: expand: media
expand: meta tabs:
tabs: - name: general
- name: general meta:
meta: label: { de: "Allgemein", en: "General" }
label: { de: "Allgemein", en: "General" } fields:
fields: - name: public
- name: public type: boolean
type: boolean meta:
meta: defaultValue: true
defaultValue: true label:
label: de: Veröffentlicht
de: Veröffentlicht en: Public
en: Public helperText:
helperText: de: "Alle allgemeinen Informationen werden auf der Seite angezeigt."
de: "Alle allgemeinen Informationen werden auf der Seite angezeigt." en: "All general information are displayed on the page."
en: "All general information are displayed on the page." - name: meta
- name: meta meta:
meta: label: { de: "Meta", en: "Meta" }
label: { de: "Meta", en: "Meta" } fields:
fields: - name: meta
- name: meta type: object
type: object subFields:
subFields: - name: metaTitle
- name: metaTitle type: string
type: string meta:
meta: label: { de: "Titel der Webseite", en: "Page Title" }
label: { de: "Titel der Webseite", en: "Page Title" } - name: metaDescription
- name: metaDescription type: string
type: string meta:
meta: label: { de: "Beschreibung der Webseite", en: "Page Description" }
label: { de: "Beschreibung der Webseite", en: "Page Description" } - name: metaTagRobots
- name: metaTagRobots type: string[]
type: string[] meta:
meta: widget: chipArray
widget: chipArray label:
label: de: Robots
de: Robots en: Robots
en: Robots defaultValue: []
defaultValue: [] autocomplete: true
autocomplete: true choices:
choices: - { id: "noindex", name: "noindex" }
- { id: "noindex", name: "noindex" } - { id: "index", name: "index" }
- { id: "index", name: "index" } - { id: "follow", name: "follow" }
- { id: "follow", name: "follow" } - { id: "nofollow", name: "nofollow" }
- { id: "nofollow", name: "nofollow" } - { id: "noimageindex", name: "noimageindex" }
- { id: "noimageindex", name: "noimageindex" } - { id: "none", name: "none" }
- { id: "none", name: "none" } - { id: "noarchive", name: "noarchive" }
- { id: "noarchive", name: "noarchive" } - { id: "nocache", name: "nocache" }
- { id: "nocache", name: "nocache" } - { id: "nosnippet", name: "nosnippet" }
- { id: "nosnippet", name: "nosnippet" } - { id: "nnavailable_after", name: "nnavailable_after" }
- { id: "nnavailable_after", name: "nnavailable_after" } helperText:
helperText: de: "<strong>Noindex</strong>: Weist eine Suchmaschine an, eine Seite nicht zu indizieren.<br/><strong>index</strong>: Weist eine Suchmaschine an, eine Seite zu indizieren. Beachten Sie, dass Sie dieses Meta-Tag nicht hinzufügen müssen; es ist die Voreinstellung.<br/><strong>follow</strong>: Auch wenn die Seite nicht indexiert ist, sollte der Crawler allen Links auf einer Seite folgen und Eigenkapital an die verlinkten Seiten weitergeben.<br/><strong>nofollow</strong>: Weist einen Crawler an, keinen Links auf einer Seite zu folgen oder Link-Equity weiterzugeben.<br/><strong>noimageindex</strong>: Weist einen Crawler an, keine Bilder auf einer Seite zu indizieren.<br/><strong>none</strong>: Entspricht der gleichzeitigen Verwendung der noindex- und nofollow-Tags.<br/><strong>noarchive</strong>: Suchmaschinen sollten keinen zwischengespeicherten Link zu dieser Seite auf einem SERP anzeigen.<br/><strong>nocache</strong>: Wie noarchive, aber nur von Internet Explorer und Firefox verwendet.<br/><strong>nosnippet</strong>: Weist eine Suchmaschine an, kein Snippet dieser Seite (d. h. Meta-Beschreibung) dieser Seite auf einem SERP anzuzeigen.<br/><strong>nnavailable_after</strong>: Suchmaschinen sollen diese Seite nach einem bestimmten Datum nicht mehr indexieren.<br/>"
de: "<strong>Noindex</strong>: Weist eine Suchmaschine an, eine Seite nicht zu indizieren.<br/><strong>index</strong>: Weist eine Suchmaschine an, eine Seite zu indizieren. Beachten Sie, dass Sie dieses Meta-Tag nicht hinzufügen müssen; es ist die Voreinstellung.<br/><strong>follow</strong>: Auch wenn die Seite nicht indexiert ist, sollte der Crawler allen Links auf einer Seite folgen und Eigenkapital an die verlinkten Seiten weitergeben.<br/><strong>nofollow</strong>: Weist einen Crawler an, keinen Links auf einer Seite zu folgen oder Link-Equity weiterzugeben.<br/><strong>noimageindex</strong>: Weist einen Crawler an, keine Bilder auf einer Seite zu indizieren.<br/><strong>none</strong>: Entspricht der gleichzeitigen Verwendung der noindex- und nofollow-Tags.<br/><strong>noarchive</strong>: Suchmaschinen sollten keinen zwischengespeicherten Link zu dieser Seite auf einem SERP anzeigen.<br/><strong>nocache</strong>: Wie noarchive, aber nur von Internet Explorer und Firefox verwendet.<br/><strong>nosnippet</strong>: Weist eine Suchmaschine an, kein Snippet dieser Seite (d. h. Meta-Beschreibung) dieser Seite auf einem SERP anzuzeigen.<br/><strong>nnavailable_after</strong>: Suchmaschinen sollen diese Seite nach einem bestimmten Datum nicht mehr indexieren.<br/>" en: "<strong>Noindex</strong>: Tells a search engine not to index a page.<br/><strong>index</strong>: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.<br/><strong>follow</strong>: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.<br/><strong>nofollow</strong>: Tells a crawler not to follow any links on a page or pass along any link equity.<br/><strong>noimageindex</strong>: Tells a crawler not to index any images on a page.<br/><strong>none</strong>: Equivalent to using both the noindex and nofollow tags simultaneously.<br/><strong>noarchive</strong>: Search engines should not show a cached link to this page on a SERP.<br/><strong>nocache</strong>: Same as noarchive, but only used by Internet Explorer and Firefox.<br/><strong>nosnippet</strong>: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.<br/><strong>nnavailable_after</strong>: Search engines should no longer index this page after a particular date.<br/>"
en: "<strong>Noindex</strong>: Tells a search engine not to index a page.<br/><strong>index</strong>: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.<br/><strong>follow</strong>: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.<br/><strong>nofollow</strong>: Tells a crawler not to follow any links on a page or pass along any link equity.<br/><strong>noimageindex</strong>: Tells a crawler not to index any images on a page.<br/><strong>none</strong>: Equivalent to using both the noindex and nofollow tags simultaneously.<br/><strong>noarchive</strong>: Search engines should not show a cached link to this page on a SERP.<br/><strong>nocache</strong>: Same as noarchive, but only used by Internet Explorer and Firefox.<br/><strong>nosnippet</strong>: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.<br/><strong>nnavailable_after</strong>: Search engines should no longer index this page after a particular date.<br/>" - name: metaKeywords
- name: metaKeywords type: string
type: string meta:
meta: label: { de: "SEO / Schlüsselwörter", en: "SEO / Keywords" }
label: { de: "SEO / Schlüsselwörter", en: "SEO / Keywords" } helperText:
helperText: de: "Beispiel: Stichwort1, Stichwort2, Stichwort3"
de: "Beispiel: Stichwort1, Stichwort2, Stichwort3" en: "Example: keyword1, keyword2, keyword3"
en: "Example: keyword1, keyword2, keyword3" - name: person
- name: person meta:
meta: label: { de: "Person", en: "Person" }
label: { de: "Person", en: "Person" } fields:
fields: - name: person
- name: person type: object
type: object subFields:
subFields: - name: salutation
- name: salutation type: string
type: string meta:
meta: label: { de: "Anrede", en: "Salutation" }
label: { de: "Anrede", en: "Salutation" } - name: firstname
- name: firstname type: string
type: string meta:
meta: label: { de: "Vorname", en: "Firstname" }
label: { de: "Vorname", en: "Firstname" } - name: lastname
- name: lastname type: string
type: string meta:
meta: label: { de: "Nachname", en: "Lastname" }
label: { de: "Nachname", en: "Lastname" } - name: additional
- name: additional type: string
type: string meta:
meta: label: { de: "Zusatz", en: "Additional" }
label: { de: "Zusatz", en: "Additional" } - name: street
- name: street type: string
type: string meta:
meta: label: { de: "Straße", en: "Street" }
label: { de: "Straße", en: "Street" } - name: postcode
- name: postcode type: string
type: string meta:
meta: label: { de: "Postleitzahl", en: "Postcode" }
label: { de: "Postleitzahl", en: "Postcode" } - name: city
- name: city type: string
type: string meta:
meta: label: { de: "Ort", en: "City" }
label: { de: "Ort", en: "City" } - name: tel
- name: tel type: string
type: string meta:
meta: label: { de: "Telefonnummer", en: "Phone number" }
label: { de: "Telefonnummer", en: "Phone number" } - name: fax
- name: fax type: string
type: string meta:
meta: label: { de: "Faxnummer", en: "Fax number" }
label: { de: "Faxnummer", en: "Fax number" } - name: mobile
- name: mobile type: string
type: string meta:
meta: label: { de: "Handynummer", en: "Mobile number" }
label: { de: "Handynummer", en: "Mobile number" } - name: email
- name: email type: string
type: string meta:
meta: label: { de: "E-Mail", en: "E-Mail" }
label: { de: "E-Mail", en: "E-Mail" } - name: company
- name: company meta:
meta: label: { de: "Unternehmen", en: "Company" }
label: { de: "Unternehmen", en: "Company" } fields:
fields: - name: person
- name: person type: object
type: object subFields:
subFields: - name: companyName
- name: companyName type: string
type: string meta:
meta: label: { de: "Name des Unternehmens", en: "Company Name" }
label: { de: "Name des Unternehmens", en: "Company Name" } - name: companyWebUrl
- name: companyWebUrl type: string
type: string meta:
meta: label: { de: "URL zur Webseite", en: "Website URL" }
label: { de: "URL zur Webseite", en: "Website URL" } - name: companyAddresses
- name: companyAddresses type: object[]
type: object[] meta:
meta: label:
label: de: Adresse
de: Adresse en: Adresse
en: Adresse css:
css: subFields:
subFields: - name: street
- name: street type: string
type: string meta:
meta: label: { de: "Straße", en: "Street" }
label: { de: "Straße", en: "Street" } - name: houseNr
- name: houseNr type: string
type: string meta:
meta: label: { de: "Hausnummer", en: "House number" }
label: { de: "Hausnummer", en: "House number" } - name: postcode
- name: postcode type: string
type: string meta:
meta: label: { de: "PLZ", en: "ZIP" }
label: { de: "PLZ", en: "ZIP" } - name: city
- name: city type: string
type: string meta:
meta: label: { de: "Ort", en: "City" }
label: { de: "Ort", en: "City" } - name: tel
- name: tel type: string
type: string meta:
meta: label: { de: "Telefon", en: "Phone number" }
label: { de: "Telefon", en: "Phone number" } - name: fax
- name: fax type: string
type: string meta:
meta: label: { de: "Fax", en: "Fax" }
label: { de: "Fax", en: "Fax" } - name: email
- name: email type: string
type: string meta:
meta: label: { de: "E-Mail", en: "E-Mail" }
label: { de: "E-Mail", en: "E-Mail" } - name: media
- name: media meta:
meta: label: { de: "Medien", en: "Media" }
label: { de: "Medien", en: "Media" } fields:
fields: - name: media
- name: media type: object
type: object subFields:
subFields: - name: favicon
- name: favicon type: file
type: file meta:
meta: label: { de: "Favicon", en: "Favicon" }
label: { de: "Favicon", en: "Favicon" } helperText:
helperText: de: "Ein Favicon ist ein kleines Icon, Symbol oder Logo, das von Webbrowsern verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen."
de: "Ein Favicon ist ein kleines Icon, Symbol oder Logo, das von Webbrowsern verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen." en: "A favicon is a small icon, symbol, or logo used by web browsers to identify a website in a recognizable way."
en: "A favicon is a small icon, symbol, or logo used by web browsers to identify a website in a recognizable way." - name: brand
- name: brand type: file
type: file meta:
meta: label: { de: "Logo / Brand", en: "Logo / Brand" }
label: { de: "Logo / Brand", en: "Logo / Brand" } helperText:
helperText: de: "Logo der Seite"
de: "Logo der Seite" en: "Page Logo"
en: "Page Logo" - name: mediaFiles
- name: mediaFiles type: object[]
type: object[] meta:
meta: label: { de: "Dateien", en: "Files" }
label: { de: "Dateien", en: "Files" } subFields:
subFields: - name: title
- name: title type: string
type: string meta:
meta: label: { de: "Datei-Titel", en: "File Title" }
label: { de: "Datei-Titel", en: "File Title" } - name: alternateText
- name: alternateText type: string
type: string meta:
meta: label: { de: "Alternativer Text", en: "Alternate Text" }
label: { de: "Alternativer Text", en: "Alternate Text" } - name: id
- name: id type: string
type: string meta:
meta: editableWhileCreating: true
label: { de: "Technischer Name / ID", en: "Technical name / ID" } label: { de: "Technischer Name / ID", en: "Technical name / ID" }
- name: file helperText:
type: file de: "Achtung: Eine technische ID ist meist fest im Code der Seite verknüpft und darf, wenn sie einmal gesetzt wurde, nicht verändert werden!"
meta: en: "Attention: A technical ID is usually permanently linked in the code of the page and, once it has been set, must not be changed!"
label: { de: "", en: "" } - name: file
- name: copyright type: file
meta: meta:
label: { de: "Copyright", en: "Copyright" } label: { de: "Datei", en: "File" }
fields: - name: copyright
- name: copyrightText meta:
type: string label: { de: "Copyright", en: "Copyright" }
meta: fields:
label: { de: "Copyright Text", en: "Copyright Text" } - name: copyrightText
type: string
meta:
label: { de: "Copyright Text", en: "Copyright Text" }
imageFilter: imageFilter:
xs: xs:

1
api/collections/navigation.yml
View File

@ -204,3 +204,4 @@ indexes:
key: key:
- ident - ident
- locale - locale
- path

7
src/api.ts
View File

@ -186,8 +186,11 @@ export const sendEmail = async (type: string = "contactForm", data: any, noToken
}) })
} }
export const getContent = async (path: string): Promise<Content> => { export const getContent = async (path: string, lang: string): Promise<Content> => {
const c = await api<Content[]>("content", { limit: 1, filter: { path } }) const c = await api<Content[]>("content", {
limit: 1,
filter: { path: path.replace("/" + lang, ""), locale: lang },
})
if (c?.data?.length) { if (c?.data?.length) {
return c.data[0] return c.data[0]
} }

34
src/components/App.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { Router, Route } from "svelte-routing" import { Router, Route } from "svelte-routing"
import { scrollToTop } from "svelte-scrollto" import { scrollToTop } from "svelte-scrollto"
import { location } from "../store" import { generalInfo, location } from "../store"
import Home from "./routes/Home.svelte" import Home from "./routes/Home.svelte"
import Content from "./routes/Content.svelte" import Content from "./routes/Content.svelte"
@ -10,6 +10,7 @@
import Footer from "./widgets/Footer.svelte" import Footer from "./widgets/Footer.svelte"
export let url = "" export let url = ""
if (url) { if (url) {
// ssr // ssr
let l = url.split("?") let l = url.split("?")
@ -22,13 +23,40 @@
} }
// scroll to top on new site // scroll to top on new site
location.subscribe((l) => { location.subscribe((location) => {
if (l.push) scrollToTop() if (location.push) scrollToTop()
}) })
if (typeof window !== "undefined") console.log("App initialized") if (typeof window !== "undefined") console.log("App initialized")
</script> </script>
<svelte:head>
{#if $generalInfo?.meta?.metaTitle}
<title>{$generalInfo?.meta?.metaTitle}</title>
{/if}
{#if $generalInfo?.meta?.metaDescription}
<meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
{/if}
{#if $generalInfo?.meta?.metaKeywords}
<meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
{/if}
{#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
<meta
name="author"
content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
?.lastname
? $generalInfo?.person?.lastname
: ''}"
/>
{/if}
{#if $generalInfo?.meta?.metaTagRobots}
<meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
{/if}
{#if $generalInfo?.media?.favicon}
<link rel="shortcut icon" type="image/x-icon" href="{$generalInfo?.media?.favicon.src}" />
{/if}
</svelte:head>
<Header /> <Header />
<div> <div>

15
src/components/routes/Content.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { getContent } from "../../api" import { getContent } from "../../api"
// import { apiBaseURL } from "../../config" import { generalInfo, currentLang } from "../../store"
import { generalInfo } from "../../store"
export let path: string export let path: string
@ -10,7 +9,7 @@
function load() { function load() {
loading = true loading = true
getContent(path) getContent(path, $currentLang)
.then((c) => { .then((c) => {
content = c content = c
}) })
@ -24,10 +23,6 @@
<svelte:head> <svelte:head>
<title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title> <title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
<meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
<meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
<meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
<meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
</svelte:head> </svelte:head>
<div class="container"> <div class="container">
@ -37,12 +32,8 @@
<!-- Loader --> <!-- Loader -->
{:else if content} {:else if content}
{#each content.blocks || [] as b} {#each content.blocks || [] as b}
<h2>{b.title}</h2> {JSON.stringify(b)}
<div>{@html b.text}</div>
{/each} {/each}
{:else}
<h1>Seite nicht gefunden</h1>
<div>Pfad: {path}</div>
{/if} {/if}
</div> </div>
</div> </div>

39
src/components/routes/Home.svelte
View File

@ -6,20 +6,45 @@
import GoogleMaps from "../widgets/GoogleMaps.svelte" import GoogleMaps from "../widgets/GoogleMaps.svelte"
import ScrollTo from "../widgets/ScrollTo.svelte" import ScrollTo from "../widgets/ScrollTo.svelte"
import ContactForm from "../widgets/ContactForm.svelte" import ContactForm from "../widgets/ContactForm.svelte"
import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
let expandedForm: string = "recipe" let expandedForm: string = "recipe"
</script> </script>
<svelte:head> <!-- <svelte:head>
<title>{$generalInfo?.meta?.metaTitle}</title> {#if $generalInfo?.meta?.metaTitle}
<meta name="description" content="{$generalInfo?.meta?.metaDescription}" /> <title>{$generalInfo?.meta?.metaTitle}</title>
<meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" /> {/if}
<meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" /> {#if $generalInfo?.meta?.metaDescription}
<meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" /> <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
</svelte:head> {/if}
{#if $generalInfo?.meta?.metaKeywords}
<meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
{/if}
{#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
<meta
name="author"
content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
?.lastname
? $generalInfo?.person?.lastname
: ''}"
/>
{/if}
{#if $generalInfo?.meta?.metaTagRobots}
<meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
{/if}
{#if $generalInfo?.media?.favicon}
<link rel="shortcut icon" type="image/x-icon" href="{$generalInfo?.media?.favicon.src}" />
{/if}
</svelte:head> -->
<section class="contact"> <section class="contact">
<div class="container"> <div class="container">
<div class="row">
<div class="col-md-12">
<GeneralMediaImage id="test1" />
</div>
</div>
<div class="row nospace"> <div class="row nospace">
<div class="col-md-6"> <div class="col-md-6">
<ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" /> <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />

20
src/components/widgets/GeneralMediaImage.svelte Normal file
View File

@ -0,0 +1,20 @@
<script lang="ts">
import { generalInfo } from "../../store"
export let id: string = null
export let cssClass: string = ""
</script>
{#if id}
{#each $generalInfo?.media?.mediaFiles || [] as mediaFile}
{#if mediaFile.id === id && mediaFile.file}
{#if mediaFile.file.src.includes(";base64,")}
<img
src="{mediaFile.file.src}"
alt="{mediaFile.alternateText ? mediaFile.alternateText + ' - ' : ''}"
class="{cssClass}"
/>
{/if}
{/if}
{/each}
{/if}

30
src/components/widgets/LanguageChooser.svelte Normal file
View File

@ -0,0 +1,30 @@
<script lang="ts">
import { navigations, location, currentLang } from "../../store"
$: languages = []
$: if ($navigations?.length) {
$navigations.forEach((nav) => {
if (!languages.includes(nav.locale)) {
languages.push(nav.locale)
}
})
languages = languages
}
$: console.log($location)
</script>
<div class="language-chooser">
{#each languages as language}
<div
class="lang"
class:active="{$currentLang === language}"
on:click="{() => {
$currentLang = language
}}"
>
{language}
</div>
{/each}
</div>

9
src/components/widgets/Navigation.svelte
View File

@ -2,11 +2,12 @@
import * as animateScroll from "svelte-scrollto" import * as animateScroll from "svelte-scrollto"
import Icon from "mdi-svelte" import Icon from "mdi-svelte"
import { mdiMenu } from "@mdi/js" import { mdiMenu } from "@mdi/js"
// import { generalInfo } from "../../store"
import { links } from "svelte-routing" import { links } from "svelte-routing"
import { navigations } from "../../store" import { navigations } from "../../store"
import LanguageChooser from "./LanguageChooser.svelte"
export let ident = "main" export let ident = "main"
let navigation: Navigation let navigation: Navigation
@ -21,6 +22,8 @@
} }
</script> </script>
<LanguageChooser />
{#if navigation} {#if navigation}
<nav class="{ident}" use:links> <nav class="{ident}" use:links>
{#each navigation?.items || [] as item} {#each navigation?.items || [] as item}
@ -36,7 +39,7 @@
{item.settings.title} {item.settings.title}
</a> </a>
{:else} {:else}
<a href="{item.settings.page}"> <a href="/{navigation.locale}{item.settings.page}">
{item.settings.title} {item.settings.title}
</a> </a>
{/if} {/if}
@ -67,7 +70,7 @@
</div> </div>
{:else} {:else}
<div class="nav-item"> <div class="nav-item">
<a href="{item.settings.page}" on:click="{() => (showMobileNav = false)}"> <a href="/{navigation.locale}{item.settings.page}" on:click="{() => (showMobileNav = false)}">
{item.settings.title} {item.settings.title}
</a> </a>
</div> </div>

8
src/components/widgets/ScrollTo.svelte
View File

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import GeneralMediaImage from "./GeneralMediaImage.svelte"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
</script> </script>
@ -14,7 +16,7 @@
}) })
}}" }}"
> >
<!-- <img src="img/icon/contact.svg" alt="" /> --> <GeneralMediaImage id="contact" />
</a> </a>
</div> </div>
<div class="circle-contact"> <div class="circle-contact">
@ -26,12 +28,12 @@
}) })
}}" }}"
> >
<!-- <img src="img/icon/recipe.svg" alt="" /> --> <GeneralMediaImage id="recipe" />
</a> </a>
</div> </div>
<div class="circle-top"> <div class="circle-top">
<a href="/#"> <a href="/#">
<!-- <img src="img/icon/chevron-up.svg" alt="" /> --> <GeneralMediaImage id="up" />
</a> </a>
</div> </div>
</div> </div>

43
src/css/theme-2022/components/general.less
View File

@ -19,39 +19,6 @@ body {
} }
} }
// Body Images
.body-image-left {
position: absolute;
left: 0;
top: 80rem;
@media (max-width: 900px) {
top: 90rem;
}
}
// Lists
ul {
list-style-type: none;
padding-left: 15px;
li {
line-height: 30px;
padding-left: 0;
font-weight: 700;
&:before {
content: "\203A";
font-weight: 700;
position: absolute;
top: -1px;
left: -12px;
}
}
}
// Scroll To Top // Scroll To Top
.scroll-to-top { .scroll-to-top {
@ -96,13 +63,3 @@ ul {
right: -53px; right: -53px;
} }
} }
// Promotion
.promotion-image-wave-top {
height: 70px;
}
.promotion-image-wave-bottom {
height: 137px;
}

22
src/css/theme-2022/components/language-chooser.less Normal file
View File

@ -0,0 +1,22 @@
.language-chooser {
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px solid #ccc;
.lang {
border: 1px solid #ccc;
cursor: pointer;
&:hover {
background: #ccc;
color: black;
}
&.active {
background: #ccc;
color: black;
font-weight: 700;
}
}
}

1
src/css/theme-2022/main.less
View File

@ -53,5 +53,6 @@
@import "components/history"; @import "components/history";
@import "components/top-section"; @import "components/top-section";
@import "components/forms"; @import "components/forms";
@import "components/language-chooser";
@import "components/cc-bar"; @import "components/cc-bar";

1
src/css/theme-2022/reset.less
View File

@ -49,6 +49,7 @@ a:not([class]) {
/* Make images easier to work with */ /* Make images easier to work with */
img, img,
picture { picture {
width: 100%;
max-width: 100%; max-width: 100%;
display: block; display: block;
} }

19
src/store.ts
View File

@ -1,20 +1,25 @@
import { writable, get } from "svelte/store" import { writable, get } from "svelte/store"
import { getGeneralInformation, getArticles, getNavigations } from "./api" import { getGeneralInformation, getArticles, getNavigations } from "./api"
const initLoc = { // Localtion
const initialLocation = {
path: (typeof window !== "undefined" && window.location?.pathname) || "/", path: (typeof window !== "undefined" && window.location?.pathname) || "/",
search: (typeof window !== "undefined" && window.location?.search) || "", search: (typeof window !== "undefined" && window.location?.search) || "",
push: false, push: false,
pop: false, pop: false,
} }
export const location = writable(initialLocation)
export const location = writable(initLoc) // Current Language
const locale = { function langFromUrl(): string {
key: "de", if (new RegExp(`\/[a-zA-Z]*[-[a-zA-Z]*]{0,1}\/[a-zA-Z0-9-]*$`).test(get(location).path)) {
title: "Deutsch", return get(location)?.path.split("/")[1]
}
return "de"
} }
export const currentLocale = writable(locale) export const currentLang = writable<string>(langFromUrl())
// General Information // General Information
@ -43,7 +48,7 @@ const getAllNavigations = async (locale: Locale) => {
const list = await getNavigations(locale) const list = await getNavigations(locale)
navigations.set(list) navigations.set(list)
} }
getAllNavigations(locale) getAllNavigations({ key: get(currentLang) })
// Cookies - Webmakers Cookie Bar // Cookies - Webmakers Cookie Bar

2
types/global.d.ts vendored
View File

@ -117,7 +117,7 @@ interface NavigationItem {
interface Locale { interface Locale {
key: string key: string
title: string title?: string
} }
interface GeneralImage { interface GeneralImage {