docs: searchable documentation & seo (#911)

* create search field

* search trigger, show field on interaction

* update deps, fix emitter

* crop out html, filtered search, i18h, layout

* i18n

* catch crtl f

* create combindes result store

* fix search query, remove store

* fixed search on side

* fix preload

* improve mobile layout, assets

* layout optimisations

* header

* doc nav bar, mobile, new dashboard

* toolbar

* fix modal

* z-index issue, header

* hl param

* fix lang switch, nav

* home, sub section, 18n, layout, assets

* develope, docs sublinks

* update home, mobile first

* fix language switcher

* add home seo

* fix flex search, dashboard

* seo embed, fix docs dropdown

* mouse navigation in search

* jsonld

* seo

* fix link

* rm section if none

* rm unused segment

* update lock

* remove combined slug

* Apply suggestions from code review

Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner
2020-11-04 20:02:17 +01:00
committed by GitHub
parent 202aae4954
commit 1fc4034373
35 changed files with 1493 additions and 1562 deletions

View File

@@ -1,32 +1,42 @@
<script context="module">
export async function preload({params}) {
const {lang, slug} = params;
const sections = await this.fetch(`${slug}.json`).then(r => r.json());
const tags = [];
return { sections, slug, tags };
const {docs, seo} = await this.fetch(`${slug}.json`).then(r => r.json());
return { sections: docs, seo, slug };
}
</script>
<script>
import DocsHeader from '../components/DocsHeader.svelte';
import manifest from '../../static/manifest.json';
import Docs from "../components/Docs.svelte";
export let slug;
export let sections;
export let seo;
import { onMount } from 'svelte';
export let tags;
import { initPhotoSwipeFromDOM } from '../utils/photoswipe.js';
import SearchSelector from '../components/SearchSelector.svelte';
onMount(() => {
initPhotoSwipeFromDOM('.zitadel-gallery');
});
</script>
<style>
@media (min-width: 832px) {
:global(main) {
padding: 0 !important;
}
}
</style>
<svelte:head>
<title>{manifest.name}{slug}</title>
{#each tags as { name, content }, i}
<meta name={name} content={content} />
{/each}
{ @html seo}
</svelte:head>
<Docs {sections} project="zitadel/site" dir="{slug}"/>
<DocsHeader {slug}></DocsHeader>
<Docs {sections} project="zitadel/site" dir="{slug}"/>
<!-- <SearchSelector></SearchSelector> -->