andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-04 05:12:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update to current state (#1556)

Browse Source 
* fix: site folder

* fix: site folder
This commit is contained in:
Fabi
2021-04-08 12:35:33 +02:00
committed by GitHub
parent ba22f43e87
commit e1a930d535
72 changed files with 10613 additions and 2400 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Docs.svelte
+6 -1
View File
@@ -358,7 +358,11 @@
padding: 0.3rem 0.8rem 0.3rem;
margin: 0 0.2rem;
top: -0.1rem;
background: var(--back-api);
background: #2a2f45;
}
.content :global(p) :global(code) {
border: 1px solid #ffffff20;
}
.content :global(pre) :global(code) {
@@ -408,6 +412,7 @@
section :global(p) {
margin: 1em 0;
text-align: justify;
}
small {
site/src/components/Nav.svelte
+1 -1
View File
@@ -314,7 +314,7 @@
<header class:visible="{visible || open}">
<nav>
<a
rel="prefetch"
sapper:prefetch
href="."
class="home"
title="{title}"
site/src/components/NavItem.svelte
+2 -2
View File
@@ -11,8 +11,8 @@
<li><a href={external}><slot></slot></a></li>
{:else}
{#if prefetch}
<li class:active="{`${$current}` === segment || active }"><a rel="prefetch" sapper:prefetch href={segment}><i class="bars las la-bars"></i><slot></slot></a></li>
<li class:active="{`${$current}` === segment || active }"><a sapper:prefetch href={segment}><i class="bars las la-bars"></i><slot></slot></a></li>
{:else}
<li class:active="{`${$current}` === segment || active }"><a rel="prefetch" href={segment}><i class="bars las la-bars"></i><slot></slot></a></li>
<li class:active="{`${$current}` === segment || active }"><a sapper:prefetch href={segment}><i class="bars las la-bars"></i><slot></slot></a></li>
{/if}
{/if}
site/src/routes/_layout.svelte
+1 -2
View File
@@ -19,8 +19,7 @@
<Nav title="Zitadel docs" {segment} {page} logo="logos/zitadel-logo-light.svg">
<NavItem segment="start" prefetch>Get started</NavItem>
<NavItem segment="quickstarts">Quickstarts</NavItem>
<!-- <NavItem segment="guides">Guides</NavItem> -->
<NavItem segment="administrate" prefetch>Administrate</NavItem>
<NavItem segment="guides" prefetch>Guides</NavItem>
<NavItem segment="apis" prefetch>APIs</NavItem>
<NavItem segment="architecture" prefetch>Architecture</NavItem>
<NavItem segment="use" prefetch>Manual</NavItem>
site/src/routes/guides/_guides.js
+59
View File
@@ -0,0 +1,59 @@
import fs from 'fs';
import marked from 'marked';
import path from 'path';
import { SLUG_PRESERVE_UNICODE } from '../../../config';
import { highlight } from '../../utils/highlight';
import { extract_frontmatter, link_renderer } from '../../utils/markdown.js';
import { makeSlugProcessor } from '../../utils/slug';
const makeSlug = makeSlugProcessor(SLUG_PRESERVE_UNICODE);
export default function get_guides() {
return fs
.readdirSync('guides')
.map(file => {
if (path.extname(file) !== '.md') return;
const match = /^([0-9]+)-(.+)\.md$/.exec(file);
if (!match) throw new Error(`Invalid filename '${file}'`);
const [, order, slug] = match;
const markdown = fs.readFileSync(`guides/${file}`, 'utf-8');
const { content, metadata } = extract_frontmatter(markdown);
const renderer = new marked.Renderer();
renderer.link = link_renderer;
renderer.code = highlight;
renderer.heading = (text, level, rawtext) => {
const fragment = makeSlug(rawtext);
return `
<h${level}>
<span id="${fragment}" class="offset-anchor"></span>
<a href="guides#${fragment}" class="anchor" aria-hidden="true"></a>
${text}
</h${level}>`;
};
const answer = marked(
content.replace(/^\t+/gm, match => match.split('\t').join(' ')),
{ renderer }
);
const fragment = makeSlug(slug);
return {
fragment,
order,
answer,
metadata
};
})
.sort((a, b) => a.order - b.order);
}
site/src/routes/guides/index.json.js
+25
View File
@@ -0,0 +1,25 @@
import send from '@polka/send';
import get_guides from './_guides.js';
let json;
export function get(req, res) {
if (!json || process.env.NODE_ENV !== 'production') {
const qss = get_guides()
.map(qs => {
return {
fragment: qs.fragment,
answer: qs.answer,
metadata: qs.metadata
};
});
json = JSON.stringify(qss);
}
send(res, 200, json, {
'Content-Type': 'application/json',
'Cache-Control': `max-age=${5 * 60 * 1e3}` // 5 minutes
});
}
site/src/routes/guides/index.svelte
+166
View File
@@ -0,0 +1,166 @@
<script context="module">
export async function preload() {
const qss = await this.fetch(`guides.json`).then(r => r.json());
return { qss };
}
</script>
<script>
const description = "Guides ZITADEL";
export let qss;
</script>
<svelte:head>
<title>ZITADEL Guides</title>
<meta name="twitter:title" content="Guides ZITADEL">
<meta name="twitter:description" content={description}>
<meta name="Description" content={description}>
</svelte:head>
<div class='guides stretch'>
<h1>Guides ZITADEL</h1>
{#each qss as qs}
{#if qs.metadata.visible == 'true'}
<article class='guide'>
<div>
<p class="sub">{qs.metadata.subtitle}</p>
<h2>
<span id={qs.fragment} class="offset-anchor"></span>
<a class="anchor" sapper:prefetch href='guides#{qs.fragment}' title='{qs.title}'><i class="las la-link"></i></a>
{qs.metadata.title}
</h2>
<p>{@html qs.answer}</p>
<a class="link" href="{qs.fragment}" sapper:prefetch>Read Guide <i class="las la-arrow-right"></i></a>
<p class="info">{qs.metadata.date} • {qs.metadata.readingtime}</p>
</div>
<img src={qs.metadata.img} alt="article img" />
</article>
{/if}
{/each}
<p class="disclaimer">See also our Github page <a href="https://github.com/caos/zitadel" rel="external">ZITADEL </a> for questions regarding the sourcecode.</p></div>
<style>
.guides {
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
min-height: calc(100vh - var(--nav-h));
padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
max-width: var(--main-width);
margin: 0 auto 0 auto;
}
h2 {
position: relative;
display: inline-block;
color: white;
max-width: 18em;
font-size: var(--h3);
font-weight: 400;
margin: .5rem 0;
}
.guide {
margin: 3.2rem 0 1rem 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.guide .anchor {
position: absolute;
display: block;
background-size: 30px 30px;
width: 30px;
height: 30px;
left: -1.3em;
opacity: 0;
color: white;
transition: opacity 0.2s;
border: none !important;
}
h2:hover .anchor {
opacity: 1;
}
.guide img {
max-width: 150px;
max-height: 150px;
object-fit: contain;
padding: 20px;
border-radius: 4px;
}
.guide .sub {
font-size: 12px;
font-size: bold;
text-transform: uppercase;
color: var(--second);
margin: 0;
}
.guide .info {
font-size: 12px;
font-size: bold;
text-transform: uppercase;
color: var(--dark-text);
margin: 1rem 0 0 0;
}
.guide .link,
.guide .link i{
color: var(--prime);
text-decoration: none;
}
.guide:first-child {
margin: 0 0 2rem 0;
padding: 0 0 4rem 0;
border-bottom: var(--border-w) solid #6767785b; /* based on --second */
}
.guide:first-child h2 {
font-size: 4rem;
font-weight: 400;
color: var(--second);
}
.guide p {
font-size: var(--h5);
max-width: 30em;
color: var(--dark-text);
}
:global(.guides .guide ul) {
margin-left: 3.2rem;
}
.guides :global(.anchor) {
top: calc((var(--h3) - 24px) / 2);
}
.guide:last-child {
margin-bottom: 100px;
}
@media (max-width: 768px) {
.guide {
flex-direction: column-reverse;
margin-bottom: 50px;
}
.guide img {
max-height: 180px;
max-width: 180px;
padding-bottom: 10px;
}
.guides :global(.anchor) {
transform: scale(0.6);
opacity: 1;
left: -1.0em;
}
}
.disclaimer {
margin-top: 100px;
}
</style>
site/src/routes/index.svelte
+14 -11
View File
@@ -38,11 +38,8 @@
margin-bottom: 2rem;
}
.doc-container .doc .text{
top: 180px;
}
.doc-container .doc .text p{
max-width: 500px;
font-size: 15px;
}
@@ -56,6 +53,7 @@
text-transform: uppercase;
font-size: 12px;
margin: .5rem 0;
display: block;
}
.doc-container .doc .text .logo-cloud {
@@ -135,7 +133,6 @@
display: flex;
margin: 1rem;
flex: 1 0 auto;
max-height: 350px;
transition: box-shadow .2 ease;
}
@@ -206,22 +203,28 @@
<div class="sectionlinks">
<a class="link" href="angular">Single Page Applications (Angular)</a>
<a class="link" href="go">Serverside rendered Applications</a>
<a class="link" href="flutter">Native Applications (Flutter)</a>
<a class="link" href="oauth2-proxy">OAuth2 Proxy</a>
</div>
</div>
</div>
<div class="doc">
<div class="text">
<h4>Administration</h4>
<p>Learn how to manage your data and role associations in ZITADEL</p>
<a href="administrate">Learn more<i class="las la-arrow-right"></i></a>
<h4>Guides</h4>
<p>Read our guides on how to manage your data and role associations in ZITADEL and on what we recommend.</p>
<div class="logo-cloud">
<img src="logos/zitadel-logo-solo-darkdesign.svg" alt="zitadel" />
<img src="tech/oauth.svg" alt="oauth" />
</div>
<a href="guides">Learn more<i class="las la-arrow-right"></i></a>
<p class="section">In this section</p>
<div class="sectionlinks">
<a class="link" href="administrate#Organizations">Manage Organisations</a>
<a class="link" href="administrate#Projects">Manage Projects</a>
<a class="link" href="zitadel-organizations">ZITADEL Organizations</a>
<a class="link" href="zitadel-projects">ZITADEL Projects</a>
<a class="link" href="oauth-recommended-flows">Recommended OAuth Flows</a>
</div>
</div>
</div>
site/src/routes/quickstarts/index.svelte
+13 -1
View File
@@ -11,7 +11,7 @@
</script>
<svelte:head>
<title>Quickstarts ZITADEL</title>
<title>ZITADEL Quickstarts</title>
<meta name="twitter:title" content="Quickstarts ZITADEL">
<meta name="twitter:description" content={description}>
@@ -140,7 +140,19 @@
.quickstart:last-child {
margin-bottom: 100px;
}
@media (max-width: 768px) {
.quickstart {
flex-direction: column-reverse;
margin-bottom: 50px;
}
.quickstart img {
max-height: 180px;
max-width: 180px;
padding-bottom: 10px;
}
.quickstarts :global(.anchor) {
transform: scale(0.6);
opacity: 1;
site/src/service-worker.js
+1 -1
View File
@@ -1,6 +1,6 @@
// eslint-disable-next-line import/no-unresolved
import { files, shell, timestamp } from '@sapper/service-worker';
// eslint-disable-next-line import/no-unresolved
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by the bundler,