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

9
api/collections/general.yml
View File

@ -34,10 +34,9 @@ meta:
- lastname
- companyName
entryViewFields:
tabsSection:
meta:
expand: meta
expand: media
tabs:
- name: general
meta:
@ -237,11 +236,15 @@ meta:
- name: id
type: string
meta:
editableWhileCreating: true
label: { de: "Technischer Name / ID", en: "Technical name / ID" }
helperText:
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!"
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!"
- name: file
type: file
meta:
label: { de: "", en: "" }
label: { de: "Datei", en: "File" }
- name: copyright
meta:
label: { de: "Copyright", en: "Copyright" }

1
api/collections/navigation.yml
View File

@ -204,3 +204,4 @@ indexes:
key:
- ident
- 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> => {
const c = await api<Content[]>("content", { limit: 1, filter: { path } })
export const getContent = async (path: string, lang: string): Promise<Content> => {
const c = await api<Content[]>("content", {
limit: 1,
filter: { path: path.replace("/" + lang, ""), locale: lang },
})
if (c?.data?.length) {
return c.data[0]
}

34
src/components/App.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { Router, Route } from "svelte-routing"
import { scrollToTop } from "svelte-scrollto"
import { location } from "../store"
import { generalInfo, location } from "../store"
import Home from "./routes/Home.svelte"
import Content from "./routes/Content.svelte"
@ -10,6 +10,7 @@
import Footer from "./widgets/Footer.svelte"
export let url = ""
if (url) {
// ssr
let l = url.split("?")
@ -22,13 +23,40 @@
}
// scroll to top on new site
location.subscribe((l) => {
if (l.push) scrollToTop()
location.subscribe((location) => {
if (location.push) scrollToTop()
})
if (typeof window !== "undefined") console.log("App initialized")
</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 />
<div>

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

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

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

@ -6,20 +6,45 @@
import GoogleMaps from "../widgets/GoogleMaps.svelte"
import ScrollTo from "../widgets/ScrollTo.svelte"
import ContactForm from "../widgets/ContactForm.svelte"
import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
let expandedForm: string = "recipe"
</script>
<svelte:head>
<!-- <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(' ', '')}" />
<meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
{/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}" />
</svelte:head>
{/if}
{#if $generalInfo?.media?.favicon}
<link rel="shortcut icon" type="image/x-icon" href="{$generalInfo?.media?.favicon.src}" />
{/if}
</svelte:head> -->
<section class="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<GeneralMediaImage id="test1" />
</div>
</div>
<div class="row nospace">
<div class="col-md-6">
<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 Icon from "mdi-svelte"
import { mdiMenu } from "@mdi/js"
// import { generalInfo } from "../../store"
import { links } from "svelte-routing"
import { navigations } from "../../store"
import LanguageChooser from "./LanguageChooser.svelte"
export let ident = "main"
let navigation: Navigation
@ -21,6 +22,8 @@
}
</script>
<LanguageChooser />
{#if navigation}
<nav class="{ident}" use:links>
{#each navigation?.items || [] as item}
@ -36,7 +39,7 @@
{item.settings.title}
</a>
{:else}
<a href="{item.settings.page}">
<a href="/{navigation.locale}{item.settings.page}">
{item.settings.title}
</a>
{/if}
@ -67,7 +70,7 @@
</div>
{:else}
<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}
</a>
</div>

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

@ -1,6 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte"
import GeneralMediaImage from "./GeneralMediaImage.svelte"
const dispatch = createEventDispatcher()
</script>
@ -14,7 +16,7 @@
})
}}"
>
<!-- <img src="img/icon/contact.svg" alt="" /> -->
<GeneralMediaImage id="contact" />
</a>
</div>
<div class="circle-contact">
@ -26,12 +28,12 @@
})
}}"
>
<!-- <img src="img/icon/recipe.svg" alt="" /> -->
<GeneralMediaImage id="recipe" />
</a>
</div>
<div class="circle-top">
<a href="/#">
<!-- <img src="img/icon/chevron-up.svg" alt="" /> -->
<GeneralMediaImage id="up" />
</a>
</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 {
@ -96,13 +63,3 @@ ul {
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/top-section";
@import "components/forms";
@import "components/language-chooser";
@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 */
img,
picture {
width: 100%;
max-width: 100%;
display: block;
}

19
src/store.ts
View File

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

2
types/global.d.ts vendored
View File

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