feat(landing): add ministories and roadmap and mermaid

This commit is contained in:
Daniel Thompson-Yvetot
2019-09-18 23:24:03 +02:00
parent 2fef0f2ce9
commit e8f890cc78
18 changed files with 2946 additions and 244 deletions

View File

@@ -14,13 +14,17 @@
},
"dependencies": {
"@quasar/extras": "^1.3.1",
"quasar": "^1.1.0"
"markdown-it-textual-uml": "^0.1.2",
"mermaid": "^8.2.6",
"quasar": "^1.1.1"
},
"devDependencies": {
"@quasar/app": "^1.0.6",
"@quasar/app": "^1.1.0",
"@quasar/quasar-app-extension-colorize": "^1.0.0-alpha.1",
"@quasar/quasar-app-extension-icon-genie": "1.0.1",
"@quasar/quasar-app-extension-qactivity": "^1.0.0-beta.3",
"@quasar/quasar-app-extension-qmarkdown": "^1.0.0-beta.20",
"@quasar/quasar-app-extension-qmediaplayer": "^1.0.13",
"@quasar/quasar-app-extension-qpublish": "^1.0.0-alpha.7",
"@quasar/quasar-app-extension-qribbon": "^1.0.0-beta.6",
"@vue/eslint-config-standard": "^4.0.0",

View File

@@ -6,6 +6,7 @@ module.exports = function (ctx) {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
boot: [
'mermaid'
],
css: [
@@ -17,7 +18,7 @@ module.exports = function (ctx) {
// 'mdi-v3',
// 'fontawesome-v5',
// 'eva-icons',
// 'themify',
'themify',
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
'roboto-font', // optional, you are not bound to it
@@ -34,10 +35,12 @@ module.exports = function (ctx) {
'QCard',
'QCardSection',
'QCardActions',
'QDialog',
'QExpansionItem',
'QLayout',
'QHeader',
'QDrawer',
'QFooter',
'QPageContainer',
'QPage',
'QToolbar',
@@ -59,7 +62,8 @@ module.exports = function (ctx) {
'QBtnDropdown',
'QChip',
'QCarousel',
'QCarouselSlide'
'QCarouselSlide',
'QParallax'
],
directives: [

View File

@@ -23,5 +23,7 @@
}
}
},
"@quasar/colorize": {}
"@quasar/colorize": {},
"@quasar/qmediaplayer": {},
"@quasar/qactivity": {}
}

View File

@@ -0,0 +1,13 @@
import mermaid from 'mermaid'
mermaid.initialize({
startOnLoad: true,
theme: 'neutral',
fontFamily: 'Roboto'
})
export default ({ Vue }) => {
Vue.prototype.$mermaid = mermaid
}
export { mermaid }

View File

@@ -8,16 +8,16 @@
<img src="statics/tauri-wordmark.png" class="tauri-name scroll-determined" style="cursor:pointer">
</router-link>
<div v-if="buttons" class="row" style="margin-top:90px">
<q-btn dense size="small" to="/docs/quickstart" class="btn" label="Quick Start" no-caps color="warning" text-color="black"/>
<q-btn dense size="small" to="/docs/patterns" class="btn" label="Patterns" no-caps color="warning" text-color="black"/>
<q-btn v-if="showDocs" dense size="small" to="/docs" class="btn" label="Docs" no-caps color="warning" text-color="black"/>
<q-btn dense size="small" to="/docs/quickstart" class="btn" label="Quick Start" no-caps color="yellow-2" text-color="black"/>
<q-btn dense size="small" to="/docs/patterns" class="btn" label="Patterns" no-caps color="yellow-2" text-color="black"/>
<q-btn v-if="showDocs" dense size="small" to="/docs" class="btn" label="Docs" no-caps color="yellow-2" text-color="black"/>
</div>
<div v-else class="absolute-right" style="margin:18px 30px 0 0;">
<q-btn-dropdown dense color="warning" label="Docs" no-caps text-color="black" class="q-mr-lg">
<q-list color="warning" >
<q-item clickable v-close-popup to="/docs" v-if="showDocs">
<div v-else class="absolute-right" style="margin:18px 35px 0 0;">
<q-btn-dropdown dense color="yellow-2" :label="current" no-caps text-color="black" class="q-mr-lg">
<q-list color="yellow-2" >
<q-item clickable v-close-popup to="/docs" v-if="showDocs" @click="current='Docs'">
<q-item-section>
<q-item-label>DOCS</q-item-label>
<q-item-label>Docs</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup to="/docs/quickstart">
@@ -40,7 +40,7 @@
</div>
</div>
</q-page-sticky>
<main class="flex flex-start justify-center inset-shadow">
<main class="flex flex-start justify-center">
<div class="q-pa-sm col-12-sm col-10-md col-8-lg" style="max-width: 1024px; width: 100%;">
<slot></slot>
</div>
@@ -54,6 +54,7 @@ export default {
data () {
return {
buttons: true,
current: 'Menu',
height: 270,
heightName: 140,
heightPic: 250,
@@ -141,7 +142,7 @@ export default {
background-repeat no-repeat
background-size contain
position absolute
left 0
left -5px
top 5px
height 250px
width 250px

View File

@@ -1,5 +1,5 @@
<template>
<q-layout view="hHh lpR fFr">
<q-layout view="hHh lpR ffr">
<q-btn
flat
dense
@@ -8,7 +8,7 @@
aria-label="Menu"
color="cyan-1"
class="fixed-right"
style="margin:15px 5px 0 0;z-index:1000001"
style="margin:16px 12px 0 0;z-index:1000001"
>
<q-icon name="menu" />
</q-btn>
@@ -78,6 +78,15 @@
</q-scroll-area>
<div class="absolute-bottom full-width text-center bg-cyan-1">
<q-separator></q-separator>
<q-card class="q-ma-md col-md-3 col-sm-5 q-mt-sm bg-cyan-1" flat bordered v-for="(item, index) in actions" :key="index">
<q-icon :name="item.icon" class="float-left q-pa-lg q-ma-xs text-h5" style="margin: 11px 5px -1px 10px"></q-icon>
<q-card-section>
{{ item.claim }}
</q-card-section>
<q-card-actions align="center">
<q-btn color="yellow-2" text-color="black" :to="item.btnTarget" :label="item.btnLabel"></q-btn>
</q-card-actions>
</q-card>
<div class="q-pa-sm" style="font-size:0.9em">
Tauri is an Open Source Project<br/>
<a href="https://github.com/tauri-apps/tauri" target="_blank" rel="noreferrer">GitHub</a>
@@ -92,6 +101,17 @@
<q-page-container>
<router-view />
</q-page-container>
<div class="full-width text-center bg-cyan-1">
<q-separator></q-separator>
<div class="row q-pa-sm" style="font-size:0.9em">
<div class="col-6 col-md-4 col-sm-3" dense>
<q-item to="/contact" class="text-center" dense>Email</q-item>
<q-item to="/contact" class="text-center" dense>Discord</q-item>
<q-item to="/contact" class="text-center" dense>Github</q-item>
</div>
</div>
</div>
</q-layout>
</template>
@@ -138,9 +158,10 @@ export default {
}
},
scrollPage (el) {
console.log(el)
const target = getScrollTarget(el)
const offset = el.offsetTop - 50
const current = window.pageYOffset || document.documentElement.scrollTop
let offset = el.offsetTop - 50
if (current <= 50) offset = el.offsetTop - 250
setScrollPosition(target, offset, 500)
}
}

View File

@@ -0,0 +1,35 @@
## Consumption Paradigms
Its not about optimizing for the individual developer, but for the team. Tauri is not opinionated about what framework your web-interface is built with, and offers you easily configurable options.
This combination of power, safety and usability are why we chose Rust to be the default binding for Tauri. It is our intention to provide the most safe and performant native app experience (for devs and app consumers), out of the box.
To this end, we have spent a great deal of time creating an especially secure localhost-free backend for the security conscious application-artisans. This means that your app does not use a localhost server, as is generally the case with cordova apps. This also has the positive side effect, that less code is needed and the final binaries are smaller.
### For new projects
If you are making a greenfield project, you can literally choose anything that compiles to JS (soon WASM will also be supported).
### For existing projects
While it may seem at first glance complex, the fact that Tauri is framework agnostic and polyglot makes it very flexible. Chances are good that you already have a working legacy (or not so legacy) system that just doesn't warrant a completely new architecting - so you shouldn't have to retool in order to
::: tip
This means that legacy systems can be relatively trivially given a [brownfield development](https://en.wikipedia.org/wiki/Brownfield_(software_development)) treatment. :star:
:::
## Sustainability
This is a
### Open Source
To the extent
### Organizational Structure
Tauri apps is governed by the community and work is done in the context of public working groups. Each working group has a dedicated channel on the Discord server as well as a Team on GitHub. Other than that, each WG is free to use whatever type of organizational model it chooses.
The current working groups are:
- WG Governance & Guidance
- WG Tech
- WG Education
- WG Media
- WG Security
With the exception of the security working group, which is by invite only and convenes privately, all other working groups are public and open to any and all participants.
Please visit [this repository](https://github.com/tauri-apps/governance-and-guidance) to get more information.

View File

@@ -0,0 +1,17 @@
The Tauri API
```
whitelist: { // all whitelist values are default:false
all: false, // use this flag to enable all API features
answer: false, // enable rust to direct the UI
bridge: false, // enable Quasar Bridge
event: false, // enable binding to message
execute: false, // enable application execution
listFiles: false, // list files in a directory
open: false, // open link in a browser
readBinaryFile: false, // read binary file from local filesystem
readTextFile: false, // read text file from local filesystem
setTitle: false, // set the window title
writeFile: false // write file to local filesystem
},
```

View File

@@ -0,0 +1,6 @@
## Donations and Sponsoring
::: info Support Open Source
At the moment the best way to support the development of Tauri is to visit our [Open Collective](https://opencollective.com/tauri) page and make a donation. :heart:
If you are interested in sponsoring Tauri and want to accelerate the development of specific components, we encourage you to reach out to the team.

View File

@@ -1,3 +1,72 @@
## Patterns
# Introduction
There are many ways to use Tauri, and on this page we have collected 4 major patterns.
## Cloudish
The Cloudish recipe is a pattern for maximum flexibility and app performance.
### Features
- ships with a rust-based localhost server
- works out of the box
- can utilize CSP for extra security
### Best When
- starting out building Tauri apps if you have never used Rust before.
### Pros
- easy to use
- best WebAPI compliance
### Cons:
- hard to secure against Man in the Machine attacks
- gives you an easy excuse not to learn Rust
## Trollbridge
The Trollbridge recipe is a pattern for the highest degree of operational security.
### Features
- render UI securely at bootstrap
- promise based message passing
- RW access to filesystem
- STDOUT access to other binaries
- extensible with Rust functions
- whitelist for functional codegen
- runtime message salting- fASLR & AoT Compiling
### Best When
- you are paranoid about security but still need the power of Rust.
### Pros
- highly configurable and infinitely extensible
### Cons
- rust skills virtually required
## Cloudbridge
The Cloudbridge combines the flexibility of a localhost and the security of the bridge.
### Features
- all bridge features
- all localhost features
### Best When
- your project is complex and you need all the power available.
### Pros
- best of both worlds
### Cons
- rust skills helpful
- complexity can make it challenging to keep your application from becoming bloated
## Hermit
The Hermit recipe is a pattern for ultimate application isolation where all logic is self-contained.
### Features
- render UI securely at bootstrap
- no communication with Rust
- CSP blocks all external resources
- fASLR & AoT Compiling
### Best When
- you want to limit interaction with anything outside of the scope of the user interface like for a game.
### Pros
- safest possible distribution target
### Cons
- limited device interaction

View File

@@ -1,5 +1,5 @@
## Test Drive
Assuming you have cargo and rust installed. If not, see below/
This assumes you have git, node 10LTS, yarn, rust and cargo installed. If not, see below.
```
$ git clone https://github.com/tauri-apps/smoke-tests
@@ -9,8 +9,6 @@ $ cargo install --path node_modules/@tauri-apps/tauri/tools/rust/cargo-tauri-bun
$ yarn tauri build
```
After tauri has compiled its rust resources, look in the `src-tauri/target/release/bundle`.
## Add Rust and Build Toolchain

View File

View File

@@ -1,17 +1,7 @@
## Technical Details
The current user interface in Tauri apps leverages Cocoa/WebKit on macOS, gtk-webkit2 on Linux and MSHTML (IE10/11) or Webkit via EdgeHTML / Chakra on Windows. **Tauri** is based on the MIT licensed prior work known as [webview](https://github.com/zserge/webview) and [web-view]().
## Organizational Structure
Tauri apps is governed by the community and work is done in the context of public working groups. Each working group has a dedicated channel on the Discord server as well as a Team on GitHub. Other than that, each WG is free to use whatever type of organizational model it chooses.
The current working groups are:
- WG Governance & Guidance
- WG Tech
- WG Education
- WG Media
- WG Security
With the exception of the security working group, which is by invite only and convenes privately, all other working groups are public and open to any and all participants.
## Roadmap

View File

View File

@@ -13,7 +13,7 @@
>
<q-carousel-slide v-for="(slideItem) in slides" v-bind:key="slideItem.id" :name="slideItem.title" class="column no-wrap" :img-src="slideItem.img" @mouseover="credits = true" @mouseleave="credits = false">
<div class="text-h3 text-weight-thin bg-amber-3 absolute-left q-pa-md text-center" style="width:300px;opacity:0.8;padding-top:220px;"> {{ slideItem.title }}</div>
<h6 class="q-pa-sm bg-yellow-2 full-width text-center" style="margin:270px -25px 0 0!important;z-index:1;font-size:1.2em">
<h6 class="q-pa-sm bg-yellow-1 full-width text-center" style="margin:270px -25px 0 0!important;z-index:1;font-size:1.2em; border-radius:4px;">
{{ slideItem.text }}
</h6>
<q-btn v-if="credits" size="xs" dense class="absolute-top-right q-ma-lg" style="width:180px;z-index:1" color="blue-grey-9" text-color="white" type="a" :href="`https://unsplash.com/${slideItem.unsplashLink}`">
@@ -21,12 +21,64 @@
</q-btn>
</q-carousel-slide>
</q-carousel>
<q-markdown>
## Introduction
Tauri is a framework agnostic toolchain for building highly secure native apps that have tiny binaries and are very fast. You can use any frontend-framework to build apps with it, and it can be integrated into any CI pipeline.
Tauri helps you to build tiny, blazing fast binaries for all major desktop platforms. Whether you are just starting out making apps for your meetup or regularly crunch terabyte datasets, we are absolutely confident that you will love using Tauri as much as we love making and maintaining it.
</q-markdown>
<div id="Quicklinks" class="row full-width wrap justify-center items-center content-center items-start q-mt-xl">
<q-card class="q-ma-md col-md-3 col-sm-5 q-mt-sm bg-cyan-1" flat bordered v-for="(item, index) in actions" :key="index">
<q-icon :name="item.icon" class="float-left q-pa-lg q-ma-xs text-h5" style="margin: 11px 5px -1px 10px"></q-icon>
<q-card-section>
{{ item.claim }}
</q-card-section>
<q-card-actions align="center">
<q-btn color="yellow-2" text-color="black" :to="item.btnTarget" :label="item.btnLabel"></q-btn>
</q-card-actions>
</q-card>
</div>
<!-- roadmap -->
<q-card id="Roadmap" class="q-ma-xl full-width bg-cyan-1" flat bordered>
<q-card-section class="justify-center items-center content-center text-center">
<div style="position:absolute;top:130px;left:30px;width:5px;height:20px;background:#E0F7FA;z-index:2"></div>
<div style="position:absolute;bottom:50px;left:30px;width:5px;height:20px;background:#E0F7FA;z-index:2"></div>
<q-activity
dense
bar-color="rgba(0,0,0,0.2)"
bar-width="3px"
bar-distance="15px"
style="margin-top:110px"
>
<q-activity-item
v-for="(item, index) in timeline"
:key="index"
:icon="item.icon"
:icon-color="item.iconColor"
:icon-text-color="item.iconTextColor"
icon-size="2.5em"
icon-font-size="0.55em"
style="padding-bottom:5px;padding-top:5px;margin-left:-9px;"
>
<q-item class="inline-block vertical-middle text-left">
<q-item-section>
<q-item-label class="text-weight-bold">{{ item.label }}</q-item-label>
<q-item-label caption lines="2">{{ item.caption }}</q-item-label>
</q-item-section>
</q-item>
<q-chip dense color="yellow-1" class="vertical-middle side-text">
{{ item.time }}
</q-chip>
</q-activity-item>
</q-activity>
<span class="text-weight-light">Notice: This roadmap is subject to change at any time.</span>
<q-parallax
:height="130"
src="statics/images/skycave.jpg"
class="full-width"
style="position:absolute;top:0;left:0;"
/>
<div style="position:absolute;left:0;top:0;right:0;height:130px;background: linear-gradient(0deg, rgba(224,247,250,1) 5%, rgba(224,247,250,0.9) 30%, rgba(224,247,250,0.7) 60%, rgba(224,247,250,0.45) 80%, rgba(224,247,250,0) 100%);z-index:10"></div>
<h2 class="text-weight-thin" style="position:absolute;top:-4px;z-index:100;left:10px; right:10px;margin:auto;text-shadow:0 0 5px white,0 0 2px white; color:#253239">ROADMAP</h2>
</q-card-section>
</q-card>
<q-markdown :src="markdown" toc @data="onToc" />
<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
<q-btn fab icon="keyboard_arrow_up" color="primary" />
</q-page-scroller>
@@ -35,8 +87,7 @@ Tauri helps you to build tiny, blazing fast binaries for all major desktop platf
<script>
import Hero from '../components/Hero'
import markdown from '../markdown/tauri.md'
import json from '../json/tauri.json'
import markdown from '../markdown/landing.md'
export default {
name: 'PageIndex',
@@ -47,18 +98,12 @@ export default {
data () {
return {
bundle: false,
mermTex: '',
slide: 'AGNOSTIC',
credits: false,
markdown: markdown,
json: json,
slides: [
{
title: 'AGNOSTIC',
text: 'compatibility with any front-end framework means you don\'t have to change your stack.',
img: 'statics/images/vegetables.jpg',
unsplashLink: '@freestockpro',
unsplashName: 'Alexandr Podvalny'
},
{
title: 'SECURITY',
text: 'is the Tauri-Team\'s biggest priority and drives our innovation.',
@@ -84,42 +129,218 @@ export default {
title: 'RELIABILITY',
text: 'of the underlying code base is why critical libraries have been forked.',
img: 'statics/images/bigben.jpg',
unsplashLink: '@@louisk_',
unsplashLink: '@louisk_',
unsplashName: 'Louis. K'
},
{
title: 'AGNOSTIC',
text: 'compatibility with any front-end framework means you don\'t have to change your stack.',
img: 'statics/images/vegetables.jpg',
unsplashLink: '@freestockpro',
unsplashName: 'Alexandr Podvalny'
},
{
title: 'FLOSS',
text: 'licensing is possible with Tauri, but impossible with Chromium consumers, like Electron.',
text: 'licensing is possible with Tauri, but not with Chromium consumers, like Electron.',
img: 'statics/images/boat.jpg',
unsplashLink: '@jplenio',
unsplashName: 'Johannes Plenio'
}
],
actions: [
{
icon: 'ti-lock',
claim: 'Tauri is a polyglot toolchain for building more secure native apps with both tiny and fast binaries.',
btnLabel: 'Get Setup!',
btnTarget: '/docs/quickstart'
},
{
icon: 'ti-settings',
claim: 'Tauri lets you use any frontend-framework to build apps, and it can be integrated into any pipeline.',
btnLabel: 'Learn How!',
btnTarget: '/docs/examples'
},
{
icon: 'ti-package',
claim: 'Tauri helps you build and bundle binaries for all major desktop platforms (and mobile soon).',
btnLabel: 'Ship It!',
btnTarget: '/docs/bundler'
},
{
icon: 'ti-layout-grid2',
claim: 'Tauri has 4 design patterns to help you customize your project in line with how you want it to work.',
btnLabel: 'Discover!',
btnTarget: '/docs/patterns'
},
{
icon: 'ti-shield',
claim: 'With security features baked in and additional tools available, you will be safer than ever.',
btnLabel: 'Be Safer!',
btnTarget: '/docs/security'
},
{
icon: 'ti-gift',
claim: 'As a sustainable FLOSS project, we do our best to mitigate bus-factor and are open to everyone.',
btnLabel: 'Join Us!',
btnTarget: '/docs/governance'
}
],
timeline: [
{
icon: 'ti-target',
iconColor: 'blue',
iconTextColor: 'white',
label: 'CLI',
caption: 'Generate, develop and build Tauri apps from the command line.',
time: 'Q4 2019'
},
{
icon: 'ti-crown',
iconColor: 'blue',
iconTextColor: 'white',
label: 'API',
caption: 'Finalize, audit, write documentation and create examples for the smoke-tests.',
time: 'Q4 2019'
},
{
icon: 'ti-pulse',
iconColor: 'blue',
iconTextColor: 'white',
label: 'Testing & CI',
caption: 'Implement CI with testing and bundle-pipeline validation.',
time: 'Q4 2019'
},
{
icon: 'ti-layers-alt',
iconColor: 'blue',
iconTextColor: 'white',
label: 'Desktop Bundler',
caption: 'Bundle for all major desktops from native systems.',
time: 'Q4 2019'
},
{
icon: 'ti-flag-alt',
iconColor: 'red',
iconTextColor: 'white',
label: 'Alpha Release',
caption: 'Mostly stable on desktop, edge cases and bugs acceptable.',
time: 'Q4 2019'
},
{
icon: 'ti-layers',
iconColor: 'blue',
iconTextColor: 'white',
label: 'Mobile Bundler',
caption: 'Bundle to all major mobile device operating systems.',
time: 'Q4 2019'
},
{
icon: 'ti-bolt',
iconColor: 'blue',
iconTextColor: 'white',
label: 'WASM Bundler',
caption: 'Manufacture WASM bundler for use in websites.',
time: 'Q1 2020'
},
{
icon: 'ti-control-shuffle',
iconColor: 'blue',
iconTextColor: 'white',
label: 'Cross Compiler',
caption: 'Generate bundled binaries from select operating system environments.',
time: 'Q1 2020'
},
{
icon: 'ti-panel',
iconColor: 'blue',
iconTextColor: 'white',
label: 'App Tray',
caption: 'Desktop Cross-platform Icon Tray.',
time: 'Q1 2020'
},
{
icon: 'ti-flag-alt',
iconColor: 'red',
iconTextColor: 'white',
label: 'Beta Release',
caption: 'Mostly stable on Desktop & Mobile.',
time: 'Q1 2020'
},
{
icon: 'ti-direction-alt',
iconColor: 'blue',
iconTextColor: 'white',
label: 'Alternative Renderer',
caption: 'Candidate presentation for Webview Alternatives, including GL windowing.',
time: 'Q2 2020'
},
{
icon: 'ti-slice',
iconColor: 'blue',
iconTextColor: 'white',
label: 'Tauri-Frida',
caption: 'A decompiler and threat analyzer for Tauri Apps, using Frida.',
time: 'Q3 2020'
},
{
icon: 'ti-flag-alt',
iconColor: 'red',
iconTextColor: 'white',
label: 'Stable Release',
caption: 'Stable on On all Platforms.',
time: 'Q3 2020'
},
{
icon: 'ti-world',
iconColor: 'blue',
iconTextColor: 'white',
label: 'Other Bindings',
caption: 'Go, Nim, Python, C++? All possible with a stable API.',
time: 'Q1 2021'
},
{
icon: 'ti-help',
iconColor: 'blue',
iconTextColor: 'white',
label: 'The Future',
caption: 'Something missing? Got a great idea? We want you to help us make it happen.',
time: 'No end in sight'
}
]
}
},
computed: {
toc:
{
get () {
return this.$store.state.common.toc
},
set (toc) {
// console.log('toc:', toc)
this.$store.commit('common/toc', toc)
}
toc: {
get () {
return this.$store.state.common.toc
},
set (toc) {
this.$store.commit('common/toc', toc)
}
}
},
methods: {
onToc (toc) {
// add anything not picked uip by the markdown processor
toc.push({ id: 'Tauri-API', label: 'Tauri API', level: 1, children: Array(0) })
toc.push({ id: 'Donate', label: 'Donate', level: 1, children: Array(0) })
toc.unshift({ id: 'Roadmap', label: 'Roadmap', level: 2, children: Array(0) })
toc.unshift({ id: 'Quicklinks', label: 'Quick Links', level: 2, children: Array(0) })
this.toc = toc
},
extendMarkdown (md) {
md.use(this.mermaid)
},
mermaid (md, options) {
md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
const token = tokens[idx]
const code = token.content.trim()
return `<div class="mermaid">\n${code}\n</div>\n`
}
}
}
}
</script>
<style lang="stylus">
#Donations-and-Sponsoring
text-align: center
i.themify-icon.ti-star::before
margin-top -4px!important
</style>

View File

@@ -17,7 +17,8 @@ const routes = [
children: [
{ path: '', component: () => import('pages/Index.vue') },
{ path: '/docs/quickstart', component: () => import('pages/Quickstart.vue') },
{ path: '/docs/patterns', component: () => import('pages/Patterns.vue') }
{ path: '/docs/patterns', component: () => import('pages/Patterns.vue') },
{ path: '/docs/examples', component: () => import('pages/Examples.vue') }
]
}
]

File diff suppressed because it is too large Load Diff