refactor(docs): Remove hugo docs infrastructure

.gitignore

@@ -17,13 +17,13 @@ docs/static/main.css*
 docs/static/intro.js*
 docs/static/intro.css*
 docs/public
-docs/content/docs/typescript-api/*
+docs/content/typescript-api/*
 docs/data/build.json
-!docs/content/docs/typescript-api/_index.md
-docs/content/docs/graphql-api/*
-!docs/content/docs/graphql-api/_index.md
-!docs/content/docs/graphql-api/shop/_index.md
-!docs/content/docs/graphql-api/admin/_index.md
+!docs/content/typescript-api/_index.md
+docs/content/graphql-api/*
+!docs/content/graphql-api/_index.md
+!docs/content/graphql-api/shop/_index.md
+!docs/content/graphql-api/admin/_index.md
 .vscode/
 yarn-error.log
 

docs/archetypes/default.md

@@ -1,6 +0,0 @@
----
-title: "{{ replace .Name "-" " " | title }}"
-date: {{ .Date }}
-draft: true
----
-

docs/archetypes/docs.md

@@ -1,4 +0,0 @@
----
-title: "{{ .Name | humanize | title }}"
-weight: 1
----

docs/assets/scripts/docs-formatting.ts

@@ -1,9 +0,0 @@
-export function formatDocs() {
-
-    Array.from(document.querySelectorAll('h3')).forEach(h1 => {
-        const nextSibling = h1.nextElementSibling;
-        if (nextSibling && nextSibling.classList.contains('member-info')) {
-            h1.classList.add('member-title');
-        }
-    });
-}

docs/assets/scripts/graphql-playground-widget.ts

@@ -1,148 +0,0 @@
-export function initGraphQlPlaygroundWidgets() {
-    Array.from(document.querySelectorAll('.graphql-playground-widget')).forEach(el => {
-        const playground = new GraphqlPlaygroundWidget(el as HTMLElement);
-        playground.init();
-    });
-}
-
-/**
- * A widget which lazily creates an iframe containing an instance of the graphql-playground app.
- *
- * The widget can contain one or more tabs with queries defined as below:
- *
- * @example
- * ```
- * <div class="graphql-playground-widget">
- *   <div class="graphql-playground-tab" data-name="Product List">
- *       query {
- *         products(options: { skip: 0 take: 3 }) {
- *           totalItems
- *           items {
- *             name
- *             variants {
- *               sku
- *               name
- *               price
- *             }
- *           }
- *         }
- *       }
- *   </div>
- * </div>
- * ```
- */
-export class GraphqlPlaygroundWidget {
-    private readonly endpoint = 'https://demo.vendure.io/shop-api';
-    private tabs: Array<{ name: string; query: string; }>;
-    private triggerYTop: number;
-    private triggerYBottom: number;
-    private activateTimer: any;
-    constructor(private targetElement: HTMLElement) {}
-
-    private scrollHandler = () => {
-        clearTimeout(this.activateTimer);
-        if (this.triggerYTop < window.scrollY && window.scrollY < this.triggerYBottom) {
-            this.activateTimer = setTimeout(() => this.activate(), 250);
-        }
-    }
-
-    init() {
-        const tabElements: HTMLElement[] = Array.from(this.targetElement.querySelectorAll('.graphql-playground-tab'));
-        this.tabs = tabElements.map(el => {
-            return {
-                name: el.dataset.name || 'Query',
-                query: this.removeLeadingWhitespace(el.innerHTML),
-            };
-        });
-        this.targetElement.innerHTML = this.loadingHtml;
-        this.triggerYTop = this.targetElement.offsetTop - window.innerHeight;
-        this.triggerYBottom = this.targetElement.offsetTop + window.innerHeight;
-        window.addEventListener('scroll', this.scrollHandler);
-        this.scrollHandler();
-    }
-
-    activate() {
-        this.targetElement.innerHTML = '';
-        window.removeEventListener('scroll', this.scrollHandler);
-        const iframe = document.createElement('iframe');
-        const html = this.generateIframeContent();
-        this.targetElement.appendChild(iframe);
-        if (iframe.contentWindow) {
-            iframe.contentWindow.document.open();
-            iframe.contentWindow.document.write(html);
-            iframe.contentWindow.document.close();
-        }
-    }
-
-    private removeLeadingWhitespace(s: string): string {
-        const matches = s.match(/^\s+/m);
-        if (!matches) {
-            return s;
-        }
-        const indent = matches[0].replace(/\n/, '');
-        return s.replace(new RegExp(`^${indent}`, 'gm'), '').trim();
-
-    }
-
-    private generateIframeContent(): string {
-        return this.wrapInHtmlDocument(`
-            <script>
-            window.addEventListener('load', function (event) {
-                GraphQLPlayground.init(document.getElementById('root'), {
-                    endpoint: '${this.endpoint}',
-                    settings: {
-                        'request.credentials': 'include',
-                    },
-                    tabs: [${this.generateTabsArray()}]
-                });
-            });
-            </script>
-        `);
-    }
-
-    private generateTabsArray() {
-        return this.tabs.map(tab => `
-            { endpoint: '${this.endpoint}', name: '${tab.name}', query: \`${tab.query}\` },
-        `);
-    }
-
-    private wrapInHtmlDocument(toWrap: string): string {
-        return `
-            <!DOCTYPE html>
-            <html>
-
-            <head>
-              <meta charset=utf-8/>
-              <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
-              <title>GraphQL Playground</title>
-              <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
-              <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
-            </head>
-
-            <body>
-            <div id="root">
-                <style>
-                  body {
-                    background-color: rgb(23, 42, 58);
-                    font-family: Open Sans, sans-serif;
-                    height: 90vh;
-                  }
-                  #root {
-                    height: 100%;
-                    width: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                  }
-                </style>
-            </div>
-            ${toWrap}
-            </body>
-            </html>`;
-    }
-
-    private loadingHtml = `<img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
-                    <div class="loading"> Loading
-                      <span class="title">GraphQL Playground</span>
-                    </div>`;
-}

docs/assets/scripts/icons.ts

@@ -1,13 +0,0 @@
-// import { ClarityIcons } from '@clr/icons';
-// import { ClrShapeLibrary } from '@clr/icons/shapes/essential-shapes';
-// import { ClrShapeCluster, ClrShapeTerminal } from '@clr/icons/shapes/technology-shapes';
-
-export function initIcons() {
-    // TODO: this is a no-op until this issue is fixed in Clarity: https://github.com/vmware/clarity/issues/2599
-    // Using the icons this way adds about 400k to the JS bundle(!!)
-   /* ClarityIcons.add({
-        library: ClrShapeLibrary,
-        cluster: ClrShapeCluster,
-        terminal: ClrShapeTerminal,
-    });*/
-}

docs/assets/scripts/intro/intro.ts

@@ -1,84 +0,0 @@
-import { Sequencer } from './sequencer';
-import { TerminalTyper } from './terminal-typer';
-
-// tslint:disable-next-line
-require('../../styles/intro/intro.scss');
-
-const container = document.querySelector('.intro-container');
-const textArea = document.querySelector('.vendure-intro .intro-text-area');
-const scene = document.querySelector('.vendure-intro .scene');
-const controls = document.querySelector('.vendure-intro .intro-controls');
-const title = document.querySelector('.vendure-intro .intro-title');
-const INTRO_VIEWED_KEY = 'v-intro-viewed';
-
-if (container && textArea && scene && controls && title) {
-    container.classList.add('visible');
-    const replayButton = controls.querySelector('#replay');
-    const terminalCommands = `$ @vendure/create\n` +
-        `$ start\n`;
-    const terminal = new TerminalTyper(textArea as HTMLDivElement, terminalCommands);
-    const onTransition = (className: string) => {
-        controls.querySelectorAll('button').forEach(button => button.classList.remove('active'));
-        const active = controls.querySelector(`#${className}-button`);
-        if (active) {
-            active.classList.add('active');
-        }
-        if (className === 'scene-6') {
-            window.localStorage.setItem(INTRO_VIEWED_KEY, 'true');
-            title.classList.add('visible');
-            if (replayButton) {
-                replayButton.classList.add('visible');
-            }
-        } else {
-            title.classList.remove('visible');
-        }
-    };
-    const sequencer = new Sequencer(scene as HTMLDivElement, terminal, onTransition);
-
-    const introViewed = !!window.localStorage.getItem(INTRO_VIEWED_KEY);
-    // const introViewed = false;
-    if (!introViewed) {
-        sequencer.play();
-    } else {
-        sequencer.jumpTo(6);
-    }
-
-    if (replayButton) {
-        replayButton.addEventListener('click', () => sequencer.play());
-    }
-
-    controls.addEventListener('click', event => {
-        const target = event.target as HTMLButtonElement;
-        const command = target.id;
-        if (command) {
-            switch (command) {
-                case 'replay':
-                    sequencer.play();
-                    break;
-                case 'scene-0-button':
-                    sequencer.jumpTo(0);
-                    break;
-                case 'scene-1-button':
-                    sequencer.jumpTo(1);
-                    break;
-                case 'scene-2-button':
-                    sequencer.jumpTo(2);
-                    break;
-                case 'scene-3-button':
-                    sequencer.jumpTo(3);
-                    break;
-                case 'scene-4-button':
-                    sequencer.jumpTo(4);
-                    break;
-                case 'scene-5-button':
-                    sequencer.jumpTo(5);
-                    break;
-                case 'scene-6-button':
-                    sequencer.jumpTo(6);
-                    break;
-                default:
-                    sequencer.jumpTo(0);
-            }
-        }
-    });
-}

docs/assets/scripts/intro/sequencer.ts

@@ -1,88 +0,0 @@
-import { TerminalTyper } from './terminal-typer';
-import Timer = NodeJS.Timer;
-
-export class Sequencer {
-
-    private readonly playTimer: { [name: string]: any; };
-    private readonly onTransition?: (className: string) => void;
-
-    constructor(private sceneElement: HTMLDivElement,
-                private terminal: TerminalTyper,
-                onTransitionFn?: (className: string) => void) {
-        this.sceneElement = sceneElement;
-        this.playTimer = {};
-        this.onTransition = onTransitionFn;
-    }
-
-    async play() {
-        Object.values(this.playTimer).forEach(k => clearTimeout(k));
-        await this.sleep('initial', 0);
-        this.scene0();
-        await this.sleep('start-typing', 1000);
-        this.scene1();
-        await this.sleep('zoom-out', 1500);
-        this.scene2();
-        await this.sleep('data-flow', 1200);
-        this.scene3();
-        await this.sleep('websites', 1000);
-        this.scene4();
-        await this.sleep('logo', 2000);
-        this.scene5();
-        await this.sleep('final', 1000);
-        this.scene6();
-    }
-
-    jumpTo(scene: 0 | 1 | 2 | 3 | 4 | 5 | 6) {
-        Object.values(this.playTimer).forEach(k => clearTimeout(k));
-        (this as any)['scene' + scene]();
-    }
-
-    private scene0() {
-        this.setScene('scene-0');
-        this.terminal.clear();
-    }
-
-    private scene1() {
-        this.setScene('scene-1');
-        this.terminal.start();
-    }
-
-    private scene2() {
-        this.setScene('scene-2');
-        this.terminal.fill();
-    }
-
-    private scene3() {
-        this.setScene('scene-3');
-        this.terminal.fill();
-    }
-
-    private scene4() {
-        this.setScene('scene-4');
-        this.terminal.fill();
-    }
-
-    private scene5() {
-        this.setScene('scene-5');
-        this.terminal.fill();
-    }
-
-    private scene6() {
-        this.setScene('scene-6');
-        this.terminal.fill();
-    }
-
-    private setScene(className: string) {
-        this.sceneElement.classList.value = `visible scene ${className}`;
-        if (typeof this.onTransition === 'function') {
-            this.onTransition(className);
-        }
-    }
-
-    private sleep(id: string, duration: number) {
-        clearTimeout(this.playTimer[id]);
-        return new Promise(resolve => {
-            this.playTimer[id] = setTimeout(resolve, duration);
-        });
-    }
-}

docs/assets/scripts/intro/terminal-typer.ts

@@ -1,51 +0,0 @@
-export class TerminalTyper {
-    private lines: string[];
-    private timer: number;
-
-    constructor(private terminalElement: HTMLElement, commands: string) {
-        this.terminalElement = terminalElement;
-        this.lines = commands.split('\n');
-    }
-
-    start() {
-        this.clear();
-        const terminalEl = this.terminalElement;
-        let pos = 0;
-        let currLine = 0;
-        const type = () => {
-            if (pos < this.lines[currLine].length) {
-                const char = this.lines[currLine][pos];
-                terminalEl.innerHTML = terminalEl.innerHTML + char;
-                pos++;
-            } else {
-                terminalEl.innerHTML = terminalEl.innerHTML + '<br>';
-                currLine++;
-                pos = 0;
-            }
-            if (this.lines[currLine] && pos <= this.lines[currLine].length) {
-                this.timer = window.setTimeout(type, pos === 0 ? 400 : 20);
-            }
-        };
-        type();
-    }
-
-    clear() {
-        window.clearTimeout(this.timer);
-        this.terminalElement.innerHTML = '';
-    }
-
-    fill() {
-        this.clear();
-        const terminalEl = this.terminalElement;
-        for (let currLine = 0; currLine < this.lines.length; currLine++) {
-            // tslint:disable-next-line
-            for (let pos = 0; pos < this.lines[currLine].length; pos++) {
-                const char = this.lines[currLine][pos];
-                terminalEl.innerHTML = terminalEl.innerHTML + char;
-            }
-            if (currLine < this.lines.length - 1) {
-                terminalEl.innerHTML = terminalEl.innerHTML + '<br>';
-            }
-        }
-    }
-}

docs/assets/scripts/main.ts

@@ -1,45 +0,0 @@
-import { formatDocs } from './docs-formatting';
-import { initGraphQlPlaygroundWidgets } from './graphql-playground-widget';
-import { initNavMenu } from './nav-menu';
-import { SearchWidget } from './search-widget';
-import { initTabs } from './tabs';
-import { TocHighlighter } from './toc-highlighter';
-import { initTopMenu } from './top-bar';
-
-// tslint:disable-next-line
-require('../styles/main.scss');
-
-document.addEventListener(
-    'DOMContentLoaded',
-    () => {
-        const topBar = document.querySelector('.top-bar');
-        if (topBar) {
-            const setTopBarClass = () => {
-                if (window.scrollY === 0) {
-                    topBar.classList.remove('floating');
-                } else {
-                    topBar.classList.add('floating');
-                }
-            };
-            window.addEventListener('scroll', setTopBarClass);
-            setTopBarClass();
-        }
-
-        const toc = document.querySelector('#TableOfContents') as HTMLDivElement;
-        const tocHighlighter = new TocHighlighter(toc);
-        tocHighlighter.highlight();
-
-        const searchInput = document.querySelector('#searchInput');
-        if (searchInput) {
-            const searchWidget = new SearchWidget(searchInput as HTMLInputElement);
-            const searchButton = document.querySelector('button.search-icon') as HTMLButtonElement;
-            searchButton.addEventListener('click', () => searchWidget.toggleActive());
-        }
-        initTabs();
-        initNavMenu();
-        initGraphQlPlaygroundWidgets();
-        formatDocs();
-        initTopMenu();
-    },
-    false,
-);

docs/assets/scripts/nav-menu.ts

@@ -1,21 +0,0 @@
-export function initNavMenu() {
-    const sections = document.querySelectorAll('nav li.section');
-    sections.forEach(makeExpandable);
-
-    const activeLink = document.querySelector('nav a.active');
-    if (activeLink) {
-        activeLink.scrollIntoView({ block: 'center' });
-    }
-}
-
-function makeExpandable(section: Element) {
-    const icon = section.querySelector('.section-icon');
-    const sublist = section.querySelector('ul');
-
-    if (icon && sublist) {
-        icon.addEventListener('click', () => {
-            icon.classList.toggle('expanded');
-            sublist.classList.toggle('expanded');
-        });
-    }
-}

docs/assets/scripts/search-widget.ts

@@ -1,210 +0,0 @@
-import fuzzy, { FilterResult } from 'fuzzy';
-
-type Section = 'guides' | 'config' | 'gql';
-interface IndexItem {
-    section: Section;
-    title: string;
-    parent: string;
-    headings: string[];
-    url: string;
-}
-
-interface DenormalizedItem {
-    section: Section;
-    title: string;
-    parent: string;
-    heading: string;
-    url: string;
-}
-
-const KeyCode = {
-    UP: 38,
-    DOWN: 40,
-    ENTER: 13,
-    ESCAPE: 27,
-};
-
-/**
- * This class implements the auto-suggest search box for searching the docs.
- */
-export class SearchWidget {
-
-    private readonly MAX_RESULTS = 7;
-    private searchIndex: Promise<DenormalizedItem[]> | undefined;
-    private results: Array<FilterResult<DenormalizedItem>> = [];
-    private selectedIndex = -1;
-    private autocompleteDiv: HTMLDivElement;
-    private wrapperDiv: HTMLDivElement;
-    private listElement: HTMLUListElement;
-
-    constructor(private inputElement: HTMLInputElement) {
-        this.attachAutocomplete();
-
-        inputElement.addEventListener('input', (e) => {
-            this.handleInput(e as KeyboardEvent);
-        });
-
-        inputElement.addEventListener('keydown', (e: KeyboardEvent) => {
-            switch (e.keyCode) {
-                case KeyCode.UP:
-                    this.selectedIndex = this.selectedIndex === 0 ? this.results.length - 1 : this.selectedIndex - 1;
-                    e.preventDefault();
-                    break;
-                case KeyCode.DOWN:
-                    this.selectedIndex = this.selectedIndex === (this.results.length - 1) ? 0 : this.selectedIndex + 1;
-                    e.preventDefault();
-                    break;
-                case KeyCode.ENTER:
-                    const selected = this.autocompleteDiv.querySelector('li.selected a') as HTMLAnchorElement;
-                    if (selected) {
-                        selected.click();
-                        this.results = [];
-                    }
-                    break;
-                case KeyCode.ESCAPE:
-                    this.results = [];
-                    this.inputElement.blur();
-                    break;
-            }
-            this.render();
-        });
-
-        this.wrapperDiv.addEventListener('click', () => {
-            this.results = [];
-            this.render();
-        });
-    }
-
-    toggleActive() {
-        this.wrapperDiv.classList.toggle('focus');
-        if (this.wrapperDiv.classList.contains('focus')) {
-            this.inputElement.focus();
-        }
-    }
-
-    /**
-     * Groups the results by section and renders as a list
-     */
-    private render() {
-        const sections: Section[] = ['guides', 'gql', 'config'];
-        let html = '';
-        let i = 0;
-        for (const sec of sections) {
-            const matches = this.results.filter(r => r.original.section === sec);
-            if (matches.length) {
-                const sectionName = sec === 'guides' ? 'Guides' : sec === 'gql' ? 'GraphQL API' : 'Configuration';
-                html += `<li class="section">${sectionName}</li>`;
-            }
-            html += matches.map((result) => {
-                const { section, title, parent, heading, url } = result.original;
-                const anchor = heading !== title ? '#' + this.headingToAnchor(heading) : '';
-                const inner = `<div class="title"><span class="parent">${parent}</span> › ${title}</div><div class="heading">${result.string}</div>`;
-                const selected = i === this.selectedIndex ? 'selected' : '';
-                i++;
-                return `<li class="${selected}"><a href="${url + anchor}">${inner}</a></li>`;
-            }).join('\n');
-        }
-
-        this.listElement.innerHTML = html;
-    }
-
-    private attachAutocomplete() {
-        this.autocompleteDiv = document.createElement('div');
-        this.autocompleteDiv.classList.add('autocomplete');
-        this.listElement = document.createElement('ul');
-        this.autocompleteDiv.appendChild(this.listElement);
-        this.wrapperDiv = document.createElement('div');
-        this.wrapperDiv.classList.add('autocomplete-wrapper');
-
-        const parent = this.inputElement.parentElement;
-        if (parent) {
-            parent.insertBefore(this.wrapperDiv, this.inputElement);
-            this.wrapperDiv.appendChild(this.inputElement);
-            this.wrapperDiv.appendChild(this.autocompleteDiv);
-        }
-    }
-
-    private async handleInput(e: KeyboardEvent) {
-        const term = (e.target as HTMLInputElement).value.trim();
-        this.results = term ? await this.getResults(term) : [];
-        this.selectedIndex = 0;
-        this.render();
-    }
-
-    private async getResults(term: string) {
-        const items = await this.getSearchIndex();
-        const results = fuzzy.filter(
-            term,
-            items,
-            {
-                pre: '<span class="hl">',
-                post: '</span>',
-                extract(input: DenormalizedItem): string {
-                    return input.heading;
-                },
-            },
-        );
-
-        if (this.MAX_RESULTS < results.length) {
-            // limit the maximum number of results from a particular
-            // section to prevent other possibly relevant results getting
-            // buried.
-            const guides = results.filter(r => r.original.section === 'guides');
-            const gql = results.filter(r => r.original.section === 'gql');
-            const config = results.filter(r => r.original.section === 'config');
-            let pool = [guides, gql, config].filter(p => p.length);
-            const balancedResults = [];
-            for (let i = 0; i < this.MAX_RESULTS; i ++) {
-                const next = pool[i % pool.length].shift();
-                if (next) {
-                    balancedResults.push(next);
-                }
-                pool = [guides, gql, config].filter(p => p.length);
-            }
-            return balancedResults;
-        }
-        return results;
-    }
-
-    private getSearchIndex(): Promise<DenormalizedItem[]> {
-        if (!this.searchIndex) {
-            // tslint:disable:no-eval
-            this.searchIndex = fetch('/searchindex/index.html')
-                .then(res => res.text())
-                .then(res => eval(res))
-                .then((items: IndexItem[]) => {
-                    const denormalized: DenormalizedItem[] = [];
-                    for (const { section, title, parent, headings, url } of items) {
-                        denormalized.push({
-                            section,
-                            title,
-                            parent,
-                            heading: title,
-                            url,
-                        });
-                        if (headings.length) {
-                            for (const heading of headings) {
-                                if (heading !== title) {
-                                    denormalized.push({
-                                        section,
-                                        title,
-                                        parent,
-                                        heading,
-                                        url,
-                                    });
-                                }
-                            }
-                        }
-                    }
-                    return denormalized;
-                });
-        }
-        return this.searchIndex;
-    }
-
-    private headingToAnchor(heading: string): string {
-        return heading.toLowerCase()
-            .replace(/\s/g, '-')
-            .replace(/[:]/g, '');
-    }
-}

docs/assets/scripts/tabs.ts

@@ -1,87 +0,0 @@
-type TabGroup = HTMLDivElement[];
-
-const TAB_CLASS = 'tab';
-const TAB_CONTROL_CLASS = 'tab-control';
-const TAB_CONTROL_WRAPPER_CLASS = 'tab-controls';
-const CONTAINER_CLASS = 'tab-container';
-const ACTIVE_CLASS = 'active';
-
-export function initTabs() {
-    const tabs = document.querySelectorAll<HTMLDivElement>(`.${TAB_CLASS}`);
-    const tabGroups = groupTabs(Array.from(tabs));
-    const containers = tabGroups.map(g => wrapTabGroup(g));
-    containers.forEach(container => {
-        container.addEventListener('click', e => {
-            const target = e.target as HTMLElement;
-            if (target.classList.contains(TAB_CONTROL_CLASS)) {
-                const tabId = target.dataset.id;
-                // deactivate all sibling tabs & controls
-                const tabsInGroup = Array.from(container.querySelectorAll(`.${TAB_CLASS}`));
-                const controlsInGroup = Array.from(container.querySelectorAll(`.${TAB_CONTROL_CLASS}`));
-                [...tabsInGroup, ...controlsInGroup].forEach(tab => tab.classList.remove(ACTIVE_CLASS));
-                // activate the newly selected tab & control
-                target.classList.add(ACTIVE_CLASS);
-                tabsInGroup.filter(t => t.id === tabId).forEach(tab => tab.classList.add(ACTIVE_CLASS));
-            }
-        });
-    });
-}
-
-/**
- * Groups sibling tabs together.
- */
-function groupTabs(tabs: HTMLDivElement[]): TabGroup[] {
-    const tabGroups: TabGroup[] = [];
-    const remainingTabs = tabs.slice();
-    let next: HTMLDivElement | undefined;
-    do {
-        next = remainingTabs.shift();
-        if (next) {
-            const group: TabGroup = [next];
-            let nextSibling = next.nextElementSibling;
-            while (nextSibling === remainingTabs[0]) {
-                if (nextSibling) {
-                    next = remainingTabs.shift();
-                    // tslint:disable-next-line:no-non-null-assertion
-                    group.push(next!);
-                }
-                // tslint:disable-next-line:no-non-null-assertion
-                nextSibling = next!.nextElementSibling;
-            }
-            tabGroups.push(group);
-        }
-    } while (next);
-    return tabGroups;
-}
-
-/**
- * Wrap the tabs of the group in a container div and add the tab controls
- */
-function wrapTabGroup(tabGroup: TabGroup): HTMLDivElement {
-    const tabControls = tabGroup.map(({ title }, i) => {
-        return `<button class="${TAB_CONTROL_CLASS} ${i === 0 ? ACTIVE_CLASS : ''}" data-id="${toId(title)}">${title}</button>`;
-    }).join('');
-    const wrapper = document.createElement('div');
-    wrapper.classList.add(CONTAINER_CLASS);
-    wrapper.innerHTML = `<div class="${TAB_CONTROL_WRAPPER_CLASS}">${tabControls}</div>`;
-
-    const parent = tabGroup[0].parentElement;
-    if (parent) {
-        parent.insertBefore(wrapper, tabGroup[0]);
-    }
-    tabGroup.forEach((tab, i) => {
-        tab.id = toId(tab.title);
-        if (i === 0) {
-            tab.classList.add(ACTIVE_CLASS);
-        }
-        wrapper.appendChild(tab);
-    });
-    return wrapper;
-}
-
-/**
- * Generate a normalized ID based on the title
- */
-function toId(title: string): string {
-    return 'tab-' + title.toLowerCase().replace(/[^a-zA-Z]/g, '-');
-}

docs/assets/scripts/toc-highlighter.ts

@@ -1,71 +0,0 @@
-/**
- * Highlights the current section in the table of contents when scrolling.
- */
-export class TocHighlighter {
-    constructor(private tocElement: HTMLElement) {}
-
-    highlight() {
-        const article = document.querySelector('article');
-        if (this.tocElement && article) {
-            const headers: HTMLHeadingElement[] = Array.from(
-                article.querySelectorAll('h1[id],h2[id],h3[id],h4[id]'),
-            );
-
-            window.addEventListener('scroll', (e) => {
-                this.highlightCurrentSection(headers);
-            });
-            this.highlightCurrentSection(headers);
-        }
-    }
-
-    private highlightCurrentSection(headers: HTMLElement[]) {
-        const locationHash = location.hash;
-        Array.from(this.tocElement.querySelectorAll('.active')).forEach((el) =>
-            el.classList.remove('active'),
-        );
-
-        // tslint:disable:prefer-for-of
-        for (let i = 0; i < headers.length; i++) {
-            const header = headers[i];
-            const nextHeader = headers[i + 1];
-            const id = header.getAttribute('id') as string;
-            if (
-                !nextHeader ||
-                (nextHeader && window.scrollY + window.innerHeight - 200 < nextHeader.offsetTop)
-            ) {
-                this.highlightItem(id);
-                return;
-            }
-
-            const isCurrentTarget = `#${id}` === locationHash;
-            const currentTargetOffset = isCurrentTarget ? 90 : 0;
-            if (header.offsetTop + currentTargetOffset >= window.scrollY) {
-                this.highlightItem(id);
-                return;
-            }
-        }
-    }
-
-    private highlightItem(id: string) {
-        const tocItem = this.tocElement.querySelector(`[href="#${id}"]`) as HTMLAnchorElement;
-        if (tocItem) {
-            tocItem.classList.add('active');
-
-            // ensure the highlighted item is scrolled into view in the TOC menu
-            const padding = 12;
-            const tocHeight = this.tocElement.offsetHeight;
-            const tocScrollTop = this.tocElement.scrollTop;
-            const outOfRangeTop = tocItem?.offsetTop < tocScrollTop + padding;
-            const outofRangeBottom = tocHeight + tocScrollTop < tocItem.offsetTop + padding;
-            if (outOfRangeTop) {
-                // console.log('¬TOP');
-                this.tocElement.scrollTo({ top: tocItem.offsetTop - tocItem.offsetHeight - padding });
-            }
-            if (outofRangeBottom) {
-                // console.log('$BOTTOm');
-                const delta = tocItem.offsetTop - (tocHeight + tocScrollTop);
-                this.tocElement.scrollTo({ top: tocScrollTop + delta + tocItem.offsetHeight + padding });
-            }
-        }
-    }
-}

docs/assets/scripts/top-bar.ts

@@ -1,27 +0,0 @@
-export function initTopMenu() {
-    const subMenus = document.querySelectorAll<HTMLDivElement>('.submenu');
-    subMenus.forEach(initSubMenu);
-}
-
-let close: () => void;
-
-function initSubMenu(subMenu: HTMLDivElement) {
-    const trigger = subMenu.querySelector('.trigger');
-    const overlay = subMenu.querySelector('.overlay');
-
-    trigger?.addEventListener('click', (e) => {
-        if (typeof close === 'function') {
-            close();
-        }
-        overlay?.classList.add('expanded');
-        e.preventDefault();
-        e.stopPropagation();
-        close = () => {
-            overlay?.classList.remove('expanded');
-            document.removeEventListener('click', close);
-            document.removeEventListener('scroll', close);
-        };
-        document.addEventListener('click', close);
-        document.addEventListener('scroll', close);
-    });
-}

docs/assets/scripts/typings.d.ts

@@ -1 +0,0 @@
-declare module '@webcomponents/custom-elements';

docs/assets/styles/_article.scss

@@ -1,16 +0,0 @@
-@import "variables";
-
-.article-toc {
-    #TableOfContents > ul {
-        list-style-type: none;
-        padding-left: 0;
-
-        > li > ul {
-            list-style-type: disc;
-            color: $gray-600;
-            > li {
-                margin-bottom: $padding-8;
-            }
-        }
-    }
-}

docs/assets/styles/_blog.scss

@@ -1,133 +0,0 @@
-@import "variables";
-
-.blog {
-    display: flex;
-    @media screen and (max-width: $md-breakpoint) {
-        display: block;
-    }
-
-    .book-toc {
-        flex: 1;
-    }
-}
-
-.posts-list {
-    min-height: 50vh;
-    padding: $padding-16 * 1.6;
-    min-width: $body-min-width;
-    max-width: $md-breakpoint;
-    margin: auto;
-
-    h2 {
-        font-family: $brand-font-face;
-        font-size: 2em;
-        font-weight: 400;
-    }
-    h5 {
-        margin-top: -24px;
-    }
-    .featured-image {
-        max-width: 100%;
-    }
-    p {
-        line-height: 1.4em;
-    }
-}
-
-.left-gutter {
-    flex: 1;
-}
-
-.blog-post {
-    max-width: $md-breakpoint;
-    flex: 2;
-    margin: auto;
-    padding: $padding-16 * 1.6;
-
-    header {
-        overflow: hidden;
-        padding-bottom: $padding-16;
-        border-bottom: 1px dashed $gray-300;
-        h1 {
-            font-family: $brand-font-face;
-            font-size: 3em;
-            font-weight: 400;
-            color: $brand-color;
-            margin-bottom: 12px;
-        }
-        @media screen and (max-width: $sm-breakpoint) {
-            h1 {
-                font-size: 2em;
-            }
-        }
-    }
-
-    .markdown > p:first-child {
-        font-size: 22px;
-        color: $gray-700;
-    }
-
-    figure {
-        img {
-            max-width: 100%;
-        }
-    }
-}
-
-.date-author {
-    display: flex;
-    align-items: center;
-
-    .avatar {
-        border-radius: 50%;
-        width: 50px;
-        height: 50px;
-    }
-    .details {
-        margin-left: 12px;
-    }
-    .name {
-        color: $gray-600;
-    }
-}
-
-.author-bio {
-    display: flex;
-    margin-top: 50px;
-    padding-top: 50px;
-    border-top: 1px dotted $gray-300;
-    .avatar {
-        border-radius: 50%;
-        width: 100px;
-        height: 100px;
-    }
-    .details {
-        margin-left: 24px;
-    }
-    .written-by {
-        font-size: $font-size-12;
-        text-transform: uppercase;
-        color: $gray-500;
-    }
-    .name {
-        font-family: $brand-font-face;
-        margin: 0 0 12px;
-    }
-    .bio {
-        color: $gray-700;
-        margin-bottom: 12px;
-    }
-    .links {
-        a {
-            margin-right: 12px;
-            opacity: 0.8;
-        }
-        a:hover {
-            opacity: 1;
-        }
-        img {
-            width: 24px;
-            height: 24px;
-        }
-    }
-}

docs/assets/styles/_breadcrumbs.scss

@@ -1,22 +0,0 @@
-@import "variables";
-
-ul.breadcrumbs {
-    list-style-type: none;
-    padding: 0;
-    font-size: 14px;
-    margin: 0;
-    li {
-        display: inline-block;
-        color: $gray-600;
-    }
-    li + li {
-        &:before {
-            content: '›';
-            margin: 0 3px;
-        }
-    }
-
-    @media all and (max-width: $sm-breakpoint){
-        font-size: 12px;
-    }
-}

docs/assets/styles/_graphql-playground-widget.scss

@@ -1,31 +0,0 @@
-.graphql-playground-widget {
-    width: 100%;
-    height: 80vh;
-    min-height: 600px;
-    background-color: #172b3a;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: transparent;
-
-    .loading {
-        font-size: 32px;
-        font-weight: 200;
-        color: rgba(255, 255, 255, .6);
-        margin-left: 20px;
-    }
-    img {
-        width: 78px;
-        height: 78px;
-    }
-    .title {
-        font-weight: 400;
-    }
-
-    iframe {
-        width: 100%;
-        height: 80vh;
-        min-height: 600px;
-        border: none;
-    }
-}

docs/assets/styles/_landing-page.scss

@@ -1,234 +0,0 @@
-@import "variables";
-
-@mixin texture-bg {
-    background-color: #1a1a1a;
-    box-shadow: inset 0px 0px 15px 8px rgba(0, 0, 0, 0.75);
-    background-image: url("/header-bg.png");
-    background-attachment: fixed;
-    background-blend-mode: darken;
-}
-
-.landing-page {
-
-    h2 {
-        font-family: $brand-font-face;
-        font-size: 3em;
-        font-weight: normal;
-        color: $brand-color;
-        @media screen and (max-width: $sm-breakpoint) {
-            font-size: 2em;
-        }
-    }
-
-    h3 {
-        font-family: $brand-font-face;
-        font-size: 2.5em;
-        font-weight: normal;
-        color: $gray-600;
-        @media screen and (max-width: $sm-breakpoint) {
-            font-size: 1.8em;
-        }
-    }
-
-    p.lead {
-        font-size: 1.4em;
-        font-weight: lighter;
-        line-height: 1.6em;
-        @media screen and (max-width: $sm-breakpoint) {
-            font-size: 1.2em;
-        }
-        strong {
-            font-weight: bold;
-        }
-    }
-
-    .content {
-        padding: 20px;
-        max-width: $container-max-width;
-        margin: auto;
-
-        a:link, a:visited {
-            color: darken($brand-color, 20%);
-        }
-
-        a:hover, a:active {
-            color: $brand-color;
-        }
-    }
-
-    .vimeo-player {
-        width: 100%;
-        height: 40vw;
-        max-height: 80vh;
-        margin-bottom: 30px;
-    }
-
-    .section-1 {
-        text-align: center;
-        color: $gray-300;
-        @include texture-bg;
-
-        .stack-logos {
-            display: flex;
-            align-items: center;
-            justify-content: space-evenly;
-            padding-bottom: 36px;
-
-            @media screen and (max-width: $sm-breakpoint) {
-                flex-wrap: wrap;
-            }
-
-            .stack-logo {
-                max-width: 200px;
-                margin: 0 12px;
-                height: 100px;
-                display: flex;
-                align-items: center;
-
-                @media screen and (max-width: $sm-breakpoint) {
-                    max-width: 100px;
-                }
-
-                img {
-                    max-height: 100%;
-                    max-width: 100%;
-                }
-            }
-            .ts-logo {
-                width: 200px;
-            }
-            .nest-logo {
-                filter: saturate(0%) brightness(2);
-            }
-        }
-    }
-
-    .section-2 {
-        background-color: $gray-100;
-    }
-
-    .features {
-        .feature {
-            display: flex;
-            align-items: center;
-
-            @media screen and (min-width: $sm-breakpoint) {
-                &:nth-child(even) {
-                    flex-direction: row-reverse;
-                }
-            }
-            @media screen and (max-width: $sm-breakpoint) {
-                flex-direction: column;
-            }
-            color: $gray-700;
-        }
-        .feature-copy {
-            padding: 0 16px;
-        }
-        .feature-image {
-            max-width: 100%;
-            min-width: 400px;
-            margin-top: 40px;
-            display: flex;
-            align-items: center;
-            @media screen and (max-width: $sm-breakpoint) {
-                min-width: 0;
-                flex-direction: column;
-            }
-            @media screen and (min-width: $lg-breakpoint) {
-                min-width: 600px;
-            }
-            img {
-                width: 100%;
-            }
-        }
-    }
-
-    .section-3 {
-        .features {
-            column-width: 600px;
-            margin: 0 auto;
-        }
-
-        ul.feature-list {
-            margin: 0;
-            padding: 0;
-            list-style-type: none;
-            font-size: 18px;
-            li {
-                color: $gray-700;
-                &:not(:first-child) {
-                    margin-top: 12px;
-                }
-                img {
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 6px;
-                }
-            }
-        }
-        small {
-        }
-    }
-
-    .section-4 {
-        .getting-started {
-            display: flex;
-            @media all and (max-width: $sm-breakpoint){
-                flex-direction: column;
-            }
-        }
-        .install-code {
-            width: 71vw;
-            margin: auto;
-            margin-bottom: $padding-16 * 2;
-        }
-        .install-code, .getting-started-link {
-            flex: 1;
-        }
-        .getting-started-link {
-            padding: 16px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-        }
-        .getting-started-button {
-            text-transform: uppercase;
-            font-size: 1.4em;
-            padding: 12px 24px;
-            background-color: $color-success;
-            box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.23);
-            white-space: nowrap;
-            border-radius: 4px;
-            transition: background-color 0.2s;
-            &:link, &:visited {
-                color: #ceeabe;
-            }
-            &:hover {
-                background-color: lighten($color-success, 4%);
-            }
-        }
-    }
-
-    @media all and (min-width: 600px) {
-        .hero {
-            padding: 100px;
-        }
-        .logo img {
-            max-width: 160px;
-        }
-        .logo h1 {
-            font-size: 5em;
-        }
-        .top-header {
-            flex-direction: row;
-        }
-        .subhead {
-            font-size: 2em;
-        }
-        .features {
-            flex-direction: row;
-        }
-    }
-}

docs/assets/styles/_markdown.scss

@@ -1,158 +0,0 @@
-@import 'variables';
-
-$block-border-radius: 4px;
-
-@mixin codelike {
-    display: inline-block;
-    border-radius: 3px;
-    font-family: 'Source Code Pro', monospace;
-    background-color: $gray-100;
-    border: 1px solid $gray-200;
-}
-
-.markdown {
-    line-height: 1.4;
-    @media all and (min-width: $sm-breakpoint) {
-        margin-left: 12px;
-    }
-
-    h1:first-of-type {
-        text-transform: capitalize;
-        font-weight: 500;
-        margin-top: 0;
-        margin-bottom: 0;
-        font-size: 2.8em;
-
-        @media all and (max-width: $sm-breakpoint){
-            font-size: 2em;
-        }
-    }
-
-    h1:not(:first-of-type) {
-        margin-top: 48px;
-        margin-left: -12px;
-        padding: 3px 12px;
-        @include codelike;
-    }
-
-    h2 {
-        margin-top: 60px;
-        margin-bottom: 6px;
-        font-size: 1.8em;
-    }
-
-    h3 {
-        margin-top: 48px;
-        font-size: 1.4em;
-    }
-
-    h3.member-title {
-        margin-top: 6px;
-        margin-left: 6px;
-        padding: 2px 6px;
-        @include codelike;
-    }
-
-    h4 {
-        margin-top: 32px;
-    }
-
-    h1, h2, h3, h4, h5 {
-        font-family: $brand-font-face;
-        font-weight: 400;
-        line-height: 1.25;
-
-        &[id]:target {
-            scroll-margin-top: 60px;
-            text-decoration: underline;
-        }
-    }
-
-    b, optgroup, strong {
-        font-weight: 700;
-    }
-
-    a {
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    li {
-        margin-bottom: 6px;
-    }
-
-    code:not([data-lang]) {
-        font-family: 'Source Code Pro', monospace;
-        padding: 0 $padding-4;
-        background: $gray-200;
-        color: $gray-700;
-        font-size: 0.9em;
-        border-radius: $block-border-radius;
-        border: 1px solid $gray-300;
-    }
-
-    a > code:not([data-lang]) {
-        color: $color-link;
-    }
-
-    pre:not(.chroma) {
-        padding: $padding-16;
-        background: $color-code-bg;
-        border-radius: $block-border-radius;
-        font-size: $font-size-14;
-        overflow-x: auto;
-
-        code {
-            color: $color-code-text;
-            background: none;
-            padding: none;
-        }
-    }
-
-    blockquote {
-        margin: 0;
-        padding: $padding-16 $padding-16 * 2;
-        position: relative;
-        // font-size: 22px;
-        color: $gray-700;
-        border-left: 2px solid $gray-300;
-
-        :first-child { margin-top: 0; }
-        :last-child { margin-bottom: 0; }
-
-        ::before {
-            content: '“';
-            position: absolute;
-            font-family: Georgia, 'Times New Roman', Times, serif;
-            font-size: 48px;
-            top: 0px;
-            left: 10px;
-            color: $gray-500;
-        }
-    }
-
-    table {
-        width: 100%;
-        th {
-            text-align: left;
-        }
-        td, th {
-            padding: $padding-4;
-        }
-        tr:nth-child(odd) td {
-            background-color: $gray-100;
-        }
-    }
-
-    figure {
-        margin: $padding-16 0;
-        figcaption p {
-            text-align: center;
-            font-size: $font-size-12;
-            margin-top: $padding-4;
-        }
-    }
-}

docs/assets/styles/_menu.scss

@@ -1,81 +0,0 @@
-.book-menu {
-    text-transform: capitalize;
-    padding-left: 12px;
-
-    nav ul {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-
-        li {
-            margin: 1em 0;
-        }
-
-        a {
-            display: block;
-        }
-
-        a:hover {
-            opacity: .5;
-        }
-
-        ul {
-            padding-left: $padding-16;
-        }
-    }
-
-    .section {
-        .section-link {
-            display: flex;
-            align-items: center;
-
-            .section-icon {
-                width: 12px;
-                height: 12px;
-                transform: rotateZ(90deg);
-                opacity: 0.5;
-                margin-left: -15px;
-                margin-right: 3px;
-                cursor: pointer;
-                transition: opacity 0.2s;
-
-                &:hover {
-                    opacity: 0.9;
-                }
-
-                &.expanded {
-                    transform: rotateZ(180deg);
-                }
-            }
-
-            a {
-                flex: 1;
-            }
-        }
-        > ul {
-            max-height: 0px;
-            overflow: hidden;
-
-            &.expanded {
-                max-height: initial;
-                > li:last-child {
-                    margin-bottom: 0;
-                }
-            }
-        }
-    }
-    .version {
-        text-transform: none;
-        font-size: 12px;
-        color: $gray-500;
-        border-top: 1px dotted $gray-300;
-        display: inline-block;
-        padding-top: 12px;
-        a {
-            color: $gray-500;
-        }
-        a:hover {
-            color: $gray-700;
-        }
-    }
-}

docs/assets/styles/_mixins.scss

@@ -1,25 +0,0 @@
-@import "variables";
-
-@mixin code-block {
-    padding: 12px;
-    font-size: 14px;
-    border-radius: 3px;
-    overflow-x: auto;
-    border: 1px solid $color-code-border;
-    color: $color-code-text;
-    background-color: $color-code-bg;
-    position: relative;
-
-    code {
-        font-family: 'Source Code Pro', monospace;
-    }
-}
-
-@mixin code-block-lang {
-    position: absolute;
-    right: 3px;
-    top: 0;
-    font-size: 12px;
-    color: $gray-400;
-    text-transform: uppercase;
-}

docs/assets/styles/_search-widget.scss

@@ -1,85 +0,0 @@
-@import "variables";
-
-.autocomplete-wrapper {
-    position: relative;
-    width: 200px;
-    @media all and (max-width: $sm-breakpoint){
-        width: 100%;
-        padding: 0 6px;
-        position: absolute;
-        left: 0;
-        top: 54px;
-        transform: translateY(-200px);
-        opacity: 0.5;
-        transition: opacity 0.3s, transform 0s;
-
-        .autocomplete {
-            display: none;
-        }
-        &.focus {
-            transform: translateY(0);
-            opacity: 1;
-            .autocomplete {
-                display: block;
-            }
-        }
-    }
-}
-
-.autocomplete {
-    position: absolute;
-    background-color: white;
-    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.52);
-    border-radius: 4px;
-    top: 35px;
-    right: 0;
-    max-height: 80vh;
-    width: 600px;
-    overflow: hidden;
-
-    @media all and (max-width: $sm-breakpoint){
-        width: 100%;
-    }
-
-    ul {
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-    }
-    li {
-        padding: 12px;
-        background-color: transparent;
-        transition: background-color 0.2s;
-        &:hover {
-            background-color: $gray-200;
-        }
-        &.section {
-            background-color: $gray-100;
-            color: $brand-color;
-            font-size: 12px;
-        }
-        &.selected {
-            background-color: $gray-200;
-        }
-        a {
-            display: flex;
-            align-items: center;
-        }
-        .title {
-            color: $gray-800;
-            width: 200px;
-            font-size: 12px;
-            margin-right: 6px;
-        }
-        .parent {
-            color: $gray-600;
-        }
-        .heading {
-            color: $gray-900;
-            .hl {
-                background-color: transparentize($brand-color, 0.85);
-                color: darken($brand-color, 40%);
-            }
-        }
-    }
-}

docs/assets/styles/_shortcodes.scss

@@ -1,156 +0,0 @@
-@import "variables";
-@import "mixins";
-
-/**
- Alert
- */
-.alert {
-    border: 1px solid;
-    border-radius: 2px;
-    padding: 0 18px;
-    margin-bottom: 12px;
-
-    &.primary { border-color: $color-default; background: transparentize($color-default, 0.9); }
-    &.danger { border-color: $color-danger; background: transparentize($color-danger, 0.9); }
-    &.warning { border-color: $color-warning; background: transparentize($color-warning, 0.9); }
-    &.success { border-color: $color-success; background: transparentize($color-success, 0.9); }
-}
-
-/**
- Member info for generated docs
- */
-.member-info {
-    display: flex;
-    align-items: center;
-    @media screen and (max-width: $sm-breakpoint) {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    margin-top: -16px;
-    margin-left: 8px;
-    font-size: $font-size-12;
-
-    .kind-label {
-        font-size: $font-size-12;
-        background-color: #eaf9f5;
-        color: #38979f;
-        border-radius: 4px;
-        padding: 0 6px;
-        margin-right: 12px;
-    }
-
-    .type, .default {
-        margin-right: 12px;
-        a:link, a:visited {
-            color: darken($brand-color, 20%);
-        }
-    }
-    .type {
-        code {
-        }
-    }
-    .label{
-        display: inline-block;
-        color: $gray-600;
-    }
-}
-
-/**
- Member description for generated docs
- */
-.member-description {
-    margin-top: 3px;
-    margin-left: 8px;
-    margin-bottom: 32px;
-}
-
-/**
- Info on the generated document
- */
-.generation-info {
-    font-size: $font-size-12;
-    margin-top: -18px;
-    border-top: 1px dashed $gray-400;
-    .label {
-        color: $gray-600;
-    }
-    .file {
-        margin-left: 12px;
-    }
-}
-
-/**
- GraphQL field list
- */
-.gql-fields {
-    @include code-block;
-    font-family: 'Oxygen Mono', monospace;
-    &::before {
-        content: 'sdl';
-        @include code-block-lang;
-    }
-    ul {
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-        font-family: 'Oxygen Mono', monospace;
-    }
-    em {
-        color: #776e71;
-    }
-    a:link, a:visited {
-        color: $brand-color;
-    }
-}
-
-/**
- GraphQL enum values
- */
-.gql-enum-values {
-    @include code-block;
-    &::before {
-        content: 'sdl';
-        @include code-block-lang;
-    }
-    max-height: 80vh;
-    overflow-y: auto;
-    ul {
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-        font-family: 'Oxygen Mono', monospace;
-    }
-    em {
-        color: #776e71;
-    }
-}
-
-/**
- Tabs
- */
-.tab-container {
-    border-left: 2px solid $gray-200;
-    padding-left: 6px;
-    margin-left: -8px;
-    margin-bottom: 32px;
-    .tab-controls {
-        button.tab-control {
-            color: $gray-600;
-            border: none;
-            padding: 3px 6px;
-            margin: 0 3px;
-            border-bottom: 2px solid transparent;
-            background: none;
-            &.active {
-                border-bottom-color: $brand-color;
-                color: $gray-700;
-            }
-        }
-    }
-    .tab {
-        display: none;
-        &.active {
-            display: block;
-        }
-    }
-}

docs/assets/styles/_syntax.scss

@@ -1,83 +0,0 @@
-@import "mixins";
-@import "variables";
-
-/**
- Styles for code block syntax highlighting. Extracted from the paraiso-dark theme and then modified.
- */
-
-pre.chroma {
-    @include code-block;
-
-    > code::before {
-        content: attr(data-lang);
-        @include code-block-lang;
-    }
-}
-
-$comment: $gray-500;
-$keyword: #3ed0bd;
-$decorator: #d0ba6f;
-$name: #86e6ff;
-
-/* Background */ .chroma { color: #e7e9db; background-color: #2f1e2e }
-/* Error */ .chroma .err { color: #ef6155 }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
-/* LineHighlight */ .chroma .hl { width: 100%;background-color: #26a9135c }
-/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* Keyword */ .chroma .k { color: $keyword }
-/* KeywordConstant */ .chroma .kc { color: $keyword }
-/* KeywordDeclaration */ .chroma .kd { color: $decorator }
-/* KeywordNamespace */ .chroma .kn { color: #5bc4bf }
-/* KeywordPseudo */ .chroma .kp { color: $keyword }
-/* KeywordReserved */ .chroma .kr { color: $keyword }
-/* KeywordType */ .chroma .kt { color: #fec418 }
-/* NameAttribute */ .chroma .na { color: #06b6ef }
-/* NameClass */ .chroma .nc { color: #fec418 }
-/* NameConstant */ .chroma .no { color: #ef6155 }
-/* NameDecorator */ .chroma .nd { color: #5bc4bf }
-/* NameException */ .chroma .ne { color: #ef6155 }
-/* NameFunction */ .chroma .nf { color: #06b6ef }
-/* NameNamespace */ .chroma .nn { color: #fec418 }
-/* NameOther */ .chroma .nx { color: $name }
-/* NameTag */ .chroma .nt { color: #5bc4bf }
-/* NameVariable */ .chroma .nv { color: #ef6155 }
-/* Literal */ .chroma .l { color: #f99b15 }
-/* LiteralDate */ .chroma .ld { color: #48b685 }
-/* LiteralString */ .chroma .s { color: #48b685 }
-/* LiteralStringAffix */ .chroma .sa { color: #48b685 }
-/* LiteralStringBacktick */ .chroma .sb { color: #48b685 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #48b685 }
-/* LiteralStringDoc */ .chroma .sd { color: $comment }
-/* LiteralStringDouble */ .chroma .s2 { color: #48b685 }
-/* LiteralStringEscape */ .chroma .se { color: #f99b15 }
-/* LiteralStringHeredoc */ .chroma .sh { color: #48b685 }
-/* LiteralStringInterpol */ .chroma .si { color: #f99b15 }
-/* LiteralStringOther */ .chroma .sx { color: #48b685 }
-/* LiteralStringRegex */ .chroma .sr { color: #48b685 }
-/* LiteralStringSingle */ .chroma .s1 { color: #48b685 }
-/* LiteralStringSymbol */ .chroma .ss { color: #48b685 }
-/* LiteralNumber */ .chroma .m { color: #f99b15 }
-/* LiteralNumberBin */ .chroma .mb { color: #f99b15 }
-/* LiteralNumberFloat */ .chroma .mf { color: #f99b15 }
-/* LiteralNumberHex */ .chroma .mh { color: #f99b15 }
-/* LiteralNumberInteger */ .chroma .mi { color: #f99b15 }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #f99b15 }
-/* LiteralNumberOct */ .chroma .mo { color: #f99b15 }
-/* Operator */ .chroma .o { color: #5bc4bf }
-/* OperatorWord */ .chroma .ow { color: #5bc4bf }
-/* Comment */ .chroma .c { color: $comment }
-/* CommentHashbang */ .chroma .ch { color: $comment }
-/* CommentMultiline */ .chroma .cm { color: $comment }
-/* CommentSingle */ .chroma .c1 { color: $comment }
-/* CommentSpecial */ .chroma .cs { color: $comment }
-/* CommentPreproc */ .chroma .cp { color: $comment }
-/* CommentPreprocFile */ .chroma .cpf { color: $comment }
-/* GenericDeleted */ .chroma .gd { color: #ef6155 }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericHeading */ .chroma .gh { font-weight: bold }
-/* GenericInserted */ .chroma .gi { color: #48b685 }
-/* GenericPrompt */ .chroma .gp { color: $comment; font-weight: bold }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #5bc4bf; font-weight: bold }

docs/assets/styles/_toc.scss

@@ -1,41 +0,0 @@
-@import "variables";
-
-aside.book-toc nav {
-    ul {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-
-        li {
-            margin: 1em 0;
-        }
-
-        a {
-            display: block;
-        }
-
-        a:hover {
-            opacity: .5;
-        }
-    }
-    & > ul {
-        & > li:first-child {
-            & > a { display: none; }
-        }
-        & > li > a {
-            font-weight: bold;
-        }
-        & > li > ul {
-            padding-left: $padding-16;
-            & > li > ul {
-                padding-left: $padding-16;
-                li {
-                    // margin: 0.5em 0;
-                    a {
-                        color: lighten(desaturate($color-link, 70%), 25%);
-                    }
-                }
-            }
-        }
-    }
-}

docs/assets/styles/_top-bar.scss

@@ -1,221 +0,0 @@
-@import 'variables';
-
-$top-bar-bg: #2a2929;
-
-.top-bar {
-    position: fixed;
-    padding: 0 24px;
-    background-color: $top-bar-bg;
-    width: 100%;
-    top: 0;
-    height: $top-bar-height;
-    transition: background-color 0.7s;
-    z-index: 10;
-    display: flex;
-    align-items: center;
-
-    .top-bar-content {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        max-width: $container-max-width;
-        margin: auto;
-    }
-
-    @media all and (max-width: $sm-breakpoint) {
-        padding: 12px;
-        font-size: $font-size-14;
-    }
-
-    &.landing-page {
-        background-color: transparent;
-        .right {
-            a:link,
-            a:visited {
-                color: $gray-700;
-            }
-            a:hover {
-                color: $gray-500;
-                text-decoration: none;
-            }
-        }
-        .submenu .trigger-icon {
-            filter: invert(0.3);
-        }
-
-        &.floating {
-            background-color: $top-bar-bg;
-
-            .submenu .trigger-icon {
-                filter: invert(0.8);
-            }
-
-            .right {
-                a:link,
-                a:visited {
-                    color: $gray-400;
-                }
-                a:hover {
-                    color: $gray-100;
-                    text-decoration: none;
-                }
-            }
-        }
-    }
-
-    .flex-spacer {
-        flex: 1;
-    }
-
-    .left {
-        display: flex;
-        align-items: center;
-    }
-
-    .logo {
-        img {
-            max-width: 32px;
-            margin-right: 12px;
-        }
-        display: flex;
-        align-items: end;
-        color: $brand-color;
-        font-size: 18px;
-        font-size: 24px;
-        letter-spacing: 0px;
-        font-weight: 600;
-
-        .logotype {
-            font-family: $brand-font-face;
-            display: inline-block;
-            margin-right: 12px;
-            @media all and (max-width: $sm-breakpoint) {
-                display: none;
-            }
-        }
-    }
-
-    .version-label {
-        display: inline-block;
-        background-color: #ffd400;
-        padding: 3px 6px;
-        border-radius: 3px;
-        font-size: 14px;
-        font-weight: bold;
-        text-transform: uppercase;
-        color: #736108;
-    }
-
-    .right {
-        display: flex;
-        a {
-            margin-left: 18px;
-        }
-        a:link,
-        a:visited {
-            color: $gray-400;
-        }
-        a:hover {
-            color: $gray-100;
-            text-decoration: none;
-        }
-        @media all and (max-width: $sm-breakpoint) {
-            text-align: right;
-            a {
-                margin-left: 12px;
-            }
-        }
-    }
-
-    .submenu {
-        position: relative;
-        .trigger {
-            display: flex;
-            align-items: flex-end;
-        }
-        .trigger-icon {
-            transform: rotateZ(180deg);
-            width: 12px;
-            height: 12px;
-            filter: invert(0.8);
-            margin-left: 3px;
-            margin-bottom: 2px;
-        }
-
-        .overlay {
-            position: absolute;
-            @media all and (max-width: $sm-breakpoint) {
-                top: 28px;
-            }
-            top: 34px;
-            right: 0;
-            border-radius: 2px;
-            visibility: hidden;
-            overflow: hidden;
-            height: 0;
-            background-color: $top-bar-bg;
-            padding: $padding-4;
-            box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, 0.21);
-            opacity: 0;
-            a:link,
-            a:visited {
-                margin: $padding-16 $padding-8;
-                color: $gray-400;
-            }
-            &.expanded {
-                visibility: visible;
-                height: auto;
-                opacity: 1;
-                transition: visibility 0s, opacity 0.2s;
-            }
-        }
-
-        .overlay a {
-            display: flex;
-            align-items: center;
-            // justify-content: space-between;
-            flex: 1;
-            .menu-icon {
-                width: 24px;
-                height: 24px;
-                filter: contrast(0);
-                margin-right: 12px;
-            }
-        }
-    }
-
-    .search-input {
-        display: flex;
-    }
-    #searchInput {
-        width: 100%;
-        border-radius: 3px;
-        border: 1px solid $gray-900;
-        padding: 6px 9px;
-        background-color: transparentize($gray-300, 0.2);
-        color: $gray-900;
-        transition: background-color 0.2s;
-        margin: 0;
-
-        &:focus {
-            background-color: $gray-300;
-        }
-        @media all and (max-width: $sm-breakpoint) {
-            background-color: $gray-300;
-        }
-    }
-    button.search-icon {
-        background-color: transparent;
-        padding: 0;
-        margin: 0;
-        border: none;
-        display: none;
-        img {
-            width: 24px;
-            height: 24px;
-        }
-        @media all and (max-width: $sm-breakpoint) {
-            display: block;
-        }
-    }
-}

docs/assets/styles/_utils.scss

@@ -1,51 +0,0 @@
-@import "variables";
-
-.flex {
-    display: flex;
-}
-
-.justify-start {
-    justify-content: flex-start;
-}
-
-.justify-end {
-    justify-content: flex-end;
-}
-
-.justify-center {
-    justify-content: center;
-}
-
-.justify-between {
-    justify-content: space-between;
-}
-
-.align-center {
-    align-items: center;
-}
-
-.mx-auto {
-    margin: 0 auto;
-}
-
-.hide {
-    display: none;
-}
-
-@mixin fixed {
-    position: fixed;
-    top: $top-bar-height;
-    bottom: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-@mixin dark-links {
-    a {
-        color: $nav-link-color;
-    }
-
-    a.active {
-        color: $color-link;
-    }
-}

docs/assets/styles/_variables.scss

@@ -1,56 +0,0 @@
-$padding-1: 1px;
-$padding-4: 0.25rem;
-$padding-8: 0.5rem;
-$padding-16: 1rem;
-
-$font-size-base: 16px;
-$font-size-12: 0.75rem;
-$font-size-14: 0.875rem;
-$font-size-16: 1rem;
-
-$brand-font-face: 'Didact Gothic', sans-serif;
-
-// Grayscale
-$white: #ffffff;
-$gray-100: #f8f9fa;
-$gray-200: #e9ecef;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #868e96;
-$gray-700: #495057;
-$gray-800: #343a40;
-$gray-900: #212529;
-$black: #000;
-
-$color-link: #087298;
-$color-visited-link: #1e6198;
-$brand-color: #13b7f3;
-$color-default: #0079B8;
-$color-danger: #e12200;
-$color-warning: #FF8400;
-$color-success: #2F8400;
-$color-code-bg: $gray-800;
-$color-code-border: $gray-900;
-$color-code-text: $gray-200;
-
-$body-background: white;
-$body-font-color: $gray-800;
-$body-font-weight: normal;
-$body-min-width: 15rem;
-
-$top-bar-height: 50px;
-
-$nav-background: $body-background;
-$nav-link-color: $gray-800;
-
-$header-height: 3.5rem;
-$menu-width: 18rem;
-$toc-width: 14rem;
-
-$container-min-width: $body-min-width;
-$container-max-width: 80rem;
-
-$sm-breakpoint: $menu-width + $body-min-width;
-$md-breakpoint: $sm-breakpoint + $toc-width;
-$lg-breakpoint: 1200px;

docs/assets/styles/intro/_admin-ui.scss

@@ -1,64 +0,0 @@
-@import "variables";
-
-.intro-admin-ui {
-    display: flex;
-    flex-direction: column;
-    padding: calc(0.05 * var(--width-unit));
-    width: calc(2 * var(--width-unit));
-    height: calc(2 * var(--width-unit));
-    transition: opacity $transition-duration * 2;
-    .intro-top-bar {
-        background-color: #494949;
-        color: #999;
-        height: calc(0.3 * var(--width-unit));
-        font-size: calc(0.2 * var(--width-unit));
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-transform: uppercase;
-        user-select: none;
-    }
-    .intro-content {
-        background-color: #fff;
-        flex: 1;
-        display: flex;
-
-        .intro-nav {
-            background-color: #ccc;
-            width: calc(0.3 * var(--width-unit));
-            padding: calc(0.05 * var(--width-unit));
-            margin: 0;
-            list-style-type: none;
-            li {
-                position: relative;
-                background-color: #999a9e;
-                height: calc(0.05 * var(--width-unit));
-                width: calc(0.15 * var(--width-unit));
-                margin-bottom: calc(0.08 * var(--width-unit));
-                border-radius: calc(0.01 * var(--width-unit));
-            }
-        }
-        .intro-list-view {
-            flex: 1;
-            padding: calc(0.05 * var(--width-unit));
-            margin: calc(0.05 * var(--width-unit));
-            list-style-type: none;
-            li {
-                position: relative;
-                background-color: #dedede;
-                height: calc(0.05 * var(--width-unit));
-                margin-bottom: calc(0.08 * var(--width-unit));
-                padding-left: calc(0.08 * var(--width-unit));
-                &:before {
-                    position: absolute;
-                    left: 0;
-                    content: '';
-                    background-color: #87a8dd;
-                    padding: 0;
-                    width: calc(0.1 * var(--width-unit));
-                    height: calc(0.05 * var(--width-unit));
-                }
-            }
-        }
-    }
-}

docs/assets/styles/intro/_cube.scss

@@ -1,120 +0,0 @@
-@import "variables";
-
-
-.cube {
-    width: calc(2 * var(--width-unit));
-    height: calc(2 * var(--width-unit));
-    transform-style: preserve-3d;
-    transition: transform $transition-duration, margin $transition-duration, width $transition-duration, height $transition-duration;
-}
-
-.cube1 {
-    transform: translateZ(calc(-1.75 * var(--width-unit)))
-     translateX(calc(.25 * var(--width-unit))) 
-     rotateY(45deg) ;
-    z-index: 1;
-} 
-
-.cube2 {
-    transform: rotateY(45deg);
-}
-
-.cube3 {
-    transform: translateZ(calc(-1.75 * var(--width-unit)))
-     translateX(calc(-.25 * var(--width-unit))) 
-     rotateY(45deg);
-}
-
-
-.cube__face--top {
-    background: var(--color-top);
-    border: var(--front-border-width) var(--border-style) var(--border-color) !important;
-}
-
-.cube1 .cube__face--left {
-    background-color: var(--color-left);
-    border: var(--front-border-width) var(--border-style) var(--border-color);
-}
-
-.cube1 .cube__face--front {
-    background-color: var(--color-shadow);
-    border: var(--front-border-width) var(--border-style) var(--border-color);
-}
-
-.cube2 .cube__face--left {
-    background-color: var(--color-left);
-    border: var(--front-border-width) var(--border-style) var(--border-color);
-}
-
-.cube2 .cube__face--front {
-    background-color: var(--color-right);
-    border: var(--front-border-width) var(--border-style) var(--border-color);
-}
-
-.cube3 .cube__face--front {
-    background-color: var(--color-right);
-    border: var(--front-border-width) var(--border-style) var(--border-color);
-}
-
-.cube3 .cube__face--left {
-    background-color: var(--color-shadow);
-    border: var(--front-border-width) var(--border-style) var(--border-color);
-}
-
-.cube {
-    &.show-front {
-        transform: translateZ(calc(-1 * var(--width-unit))) rotateY( 0deg);
-    }
-
-    &.show-right {
-        transform: translateZ(calc(-1 * var(--width-unit))) rotateY( -90deg);
-    }
-
-    &.show-back {
-        transform: translateZ(calc(-1 * var(--width-unit))) rotateY(-180deg);
-    }
-
-    &.show-left {
-        transform: translateZ(calc(-1 * var(--width-unit))) rotateY( 90deg);
-    }
-
-    &.show-top {
-        transform: translateZ(calc(-1 * var(--width-unit))) rotateX( -90deg);
-    }
-
-    &.show-bottom {
-        transform: translateZ(calc(-1 * var(--width-unit))) rotateX( 90deg);
-    }
-}
-
-.cube__face {
-    position: absolute;
-    width: calc(2 * var(--width-unit));
-    height: calc(2 * var(--width-unit));
-    border: var(--border-width) var(--border-style) var(--border-color);
-    transition: background-color $transition-duration;
-    --projection: 1;
-    &.cube__face--front {
-        transform: rotateY( 0deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    
-    &.cube__face--right { 
-        transform: rotateY( 90deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    
-    &.cube__face--back {
-        transform: rotateY(180deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    
-    &.cube__face--left {
-        transform: rotateY(-90deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    
-    &.cube__face--top { 
-        transform: rotateX( 90deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    
-    &.cube__face--bottom {
-        transform: rotateX(-90deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-}

docs/assets/styles/intro/_data-flow.scss

@@ -1,42 +0,0 @@
-@import "variables";
-
-.data-flow-left, .data-flow-right {
-    background-color: $brand-color;
-    width: 0;
-    height: calc(0.05 * var(--width-unit));
-    position: absolute;
-    top: calc(0.95 * var(--width-unit));
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQYV2MU3v75PwMDA8NbT15GEM1IugAAWIwQBUszJIoAAAAASUVORK5CYII=) repeat;
-}
-.data-flow-left {
-    left: 0;
-    animation: flowLeft;
-    animation-duration: 0.3s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-}
-.data-flow-right {
-    right: 0;
-    animation: flowRight;
-    animation-duration: 0.3s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-}
-
-@keyframes flowLeft {
-    0% {
-        background-position-x: 0;
-    }
-    100% {
-        background-position-x: -4px;
-    }
-}
-
-@keyframes flowRight {
-    0% {
-        background-position-x: 0;
-    }
-    100% {
-        background-position-x: 4px;
-    }
-}

docs/assets/styles/intro/_storefront.scss

@@ -1,68 +0,0 @@
-@import "variables";
-
-.vendure-intro {
-    .intro-storefront {
-        display: flex;
-        flex-direction: column;
-        padding: calc(0.05 * var(--width-unit));
-        width: calc(2 * var(--width-unit));
-        height: calc(2 * var(--width-unit));
-        transition: opacity $transition-duration;
-
-        .intro-top-bar {
-            background-color: #494949;
-            color: #999;
-            height: calc(0.3 * var(--width-unit));
-            font-size: calc(0.2 * var(--width-unit));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-transform: uppercase;
-            user-select: none;
-        }
-
-        .intro-content {
-            background-color: #fff;
-            flex: 1;
-            margin: 0;
-            padding: 0;
-            list-style-type: none;
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            grid-template-rows: 1fr 1fr;
-            grid-gap: calc(0.05 * var(--width-unit));
-            padding: calc(0.05 * var(--width-unit));
-
-            li {
-                position: relative;
-                background-color: #c0c1c7;
-                height: 100%;
-                width: 100%;
-                margin-bottom: calc(0.08 * var(--width-unit));
-                border-radius: calc(0.01 * var(--width-unit));
-
-                &:before {
-                    content: '';
-                    position: absolute;
-                    background-color: #e2e4ee;
-                    background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgb(231, 228, 228) 100%);
-                    width: calc(0.5 * var(--width-unit));
-                    height: calc(0.5 * var(--width-unit));
-                    top: calc(0.03 * var(--width-unit));
-                    left: calc(0.03 * var(--width-unit));
-                }
-
-                &:after {
-                    content: '';
-                    position: absolute;
-                    background-color: #2a82bea1;
-                    width: calc(0.2 * var(--width-unit));
-                    height: calc(0.1 * var(--width-unit));
-                    bottom: calc(0.05 * var(--width-unit));
-                    right: calc(0.03 * var(--width-unit));
-                    border-radius: calc(0.01 * var(--width-unit));
-                }
-            }
-        }
-    }
-}

docs/assets/styles/intro/_terminal.scss

@@ -1,72 +0,0 @@
-@import "variables";
-
-$terminal-easing: cubic-bezier(.17,.67,.26,1.54);
-
-.intro-terminal {
-    position: absolute;
-    color: #e5e5e5;
-    display: flex;
-    flex-direction: column;
-    background-color: $terminal-color;
-    font-family: "Courier New", Courier, monospace;
-    font-size: calc(0.1 * var(--width-unit));
-    width: calc(2 * var(--width-unit));
-    height: calc(2 * var(--width-unit));
-    top: 0;
-    left: 0;
-    transition: all $transition-duration;
-    transition-timing-function: $terminal-easing;
-    border-radius: calc(0.03 * var(--width-unit));
-}
-
-@mixin dot($color) {
-    width: calc(0.07 * var(--width-unit));
-    height: calc(0.07 * var(--width-unit));
-    background-color: $color;
-    border-radius: 50%;
-}
-
-.intro-terminal-controls {
-    position: relative;
-    margin-left: calc(0.15 * var(--width-unit));
-    margin-top: calc(0.05 * var(--width-unit));
-    @include dot(#ffbd2e);
-    transition: margin $transition-duration, width $transition-duration, height $transition-duration;
-    transition-timing-function: $terminal-easing;
-    &:before {
-        position: absolute;
-        left: calc(-0.10 * var(--width-unit));
-        content: '';
-        @include dot(#ff5f56);
-        transition: width $transition-duration, height $transition-duration, left $transition-duration;
-        transition-timing-function: $terminal-easing;
-    }
-    &:after {
-        position: absolute;
-        left: calc(0.10 * var(--width-unit));
-        content: '';
-        @include dot(#27c93f);
-        transition: width $transition-duration, height $transition-duration, left $transition-duration;
-        transition-timing-function: $terminal-easing;
-    }
-}
-
-.intro-text-area {
-    padding: calc(0.2 * var(--width-unit)) calc(0.09 * var(--width-unit));
-    padding-bottom: 0;
-    transition: padding $transition-duration;
-    transition-timing-function: $terminal-easing;
-}
-
-.intro-gql-logo {
-    display: flex;
-    justify-content: center;
-   
-    img {
-        width: calc(1 * var(--width-unit));
-        height: calc(1 * var(--width-unit));
-        transform: translateY(calc(-0.2 * var(--width-unit)));
-        transition: transform 1s ease-out;
-    }
-    opacity: 0;
-}

docs/assets/styles/intro/_variables.scss

@@ -1,4 +0,0 @@
-$transition-duration: 0.5s;
-$terminal-color: #333;
-$brand-color: #13b7f3;
-$shadow: 0px 6px 15px -2px rgba(50, 50, 50, 0.7);

docs/assets/styles/intro/intro.scss

@@ -1,516 +0,0 @@
-@import "../variables";
-@import "variables";
-@import "terminal";
-@import "storefront";
-@import "admin-ui";
-@import "cube";
-@import "data-flow";
-
-.vendure-intro {
-    --color-top: #17c1ff;
-    --color-left: #30c6fd;
-    --color-right: #13b7f3;
-    --color-shadow: rgba(94, 94, 94, 0);
-    --width-unit: 9vw;
-    --border-width: calc(.0 * var(--width-unit));
-    --border-style: dashed;
-    --front-border-width: 0;
-    --border-color: rgb(95, 95, 95);
-
-    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 56%, #d7d8d1 100%);
-    margin: 0;
-    overflow: hidden;
-    box-sizing: border-box;
-    height: 100vh;
-    padding-top: 10vh;
-    transition: padding-top 0.2s;
-
-    @media all and (max-width: $sm-breakpoint) {
-        padding-top: 10vh;
-    }
-    @media all and (min-height: 1000px) {
-        padding-top: 5vh;
-    }
-    @media all and (min-width: $lg-breakpoint) {
-        // --width-unit: 10vh;
-    }
-}
-
-.intro-container {
-    max-width: $container-max-width;
-    margin: auto;
-    position: relative;
-    transition: opacity 1s;
-    opacity: 0;
-
-    &.visible {
-        opacity: 1;
-    }
-}
-
-.scene {
-    perspective: calc(10 * var(--width-unit));
-    transform-style: preserve-3d;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 40vw;
-    transform: rotateX(-45deg);
-    transition: transform $transition-duration, perspective $transition-duration;
-    font-family: sans-serif;
-    @media all and (min-height: 1000px) {
-        height: 50vw;
-    }
-
-}
-
-.intro-title {
-    top: 18vw;
-    right: 36px;
-    position: absolute;
-    text-align: right;
-    max-width: $lg-breakpoint;
-    margin: auto;
-    opacity: 0;
-    transform: translateY(-20px);
-    visibility: hidden;
-    transition: visibility 0s, opacity 2s, transform 2.5s ease-out;
-
-    &.visible {
-        opacity: 1;
-        transform: translateY(0);
-        visibility: visible;
-    }
-
-    a:link, a:visited {
-        color: $color-link;
-        text-decoration: none;
-    }
-
-    a:hover {
-        color: $color-link;
-    }
-
-    h1 {
-        color: $brand-color;
-        font-size: calc(0.9 * var(--width-unit));
-        margin: 0 0 15px;
-        font-family: $brand-font-face;
-    }
-
-    .subhead {
-        max-width: calc(4 * var(--width-unit));
-        font-size: calc(0.3 * var(--width-unit));
-        color: desaturate($brand-color, 50%);
-        margin: auto;
-    }
-    .more-icon {
-        width: calc(1 * var(--width-unit));
-        transform: rotateZ(180deg);
-        opacity: 0.1;
-    }
-    @media all and (min-width: $lg-breakpoint) {
-        h1 {
-            font-size: 6em;
-        }
-        .subhead {
-            font-size: 2em;
-        }
-        .more-icon {
-            width: 7em;
-        };
-    }
-    @media all and (min-height: 1000px) {
-        top: 26vw;
-    }
-    @media all and (max-width: $sm-breakpoint) {
-        top: 60vw;
-        right: 0;
-        text-align: center;
-        padding: 0 24px;
-        h1 {
-            font-size: 4em;
-        }
-        .subhead {
-            font-size: 1.5em;
-            max-width: 100%;
-        }
-    }
-}
-
-.intro-controls {
-    z-index: 1;
-    text-align: center;
-
-    .jump {
-
-        button {
-            border-radius: 50%;
-            border: 1px;
-            padding: 0;
-            background-color: $gray-100;
-            width: 16px;
-            height: 16px;
-            transition: background-color 0.8s;
-            &.active {
-                background-color: $gray-200;
-            }
-        }
-    }
-
-    button#replay {
-        border: none;
-        background: none;
-        opacity: 0;
-        transition: opacity 4s;
-        &.visible {
-            opacity: 0.3;
-        }
-    }
-}
-
-.intro-gql-logo {
-    filter: saturate(0%);
-}
-
-/*
- * Makes the cubes aligned in a row
- */
-@mixin aligned {
-    &.scene {
-        transform: rotateX(0);
-    }
-    .cube {
-        transform: rotateY(0);
-        margin: calc(0.5 * var(--width-unit));
-    }
-    .cube__face {
-        background-color: transparent;
-    }
-    .cube__face--front {
-        background-color: $terminal-color;
-        box-shadow: $shadow;
-    }
-}
-
-@mixin focus-terminal {
-    .cube1, .cube3 {
-        max-width: 0px;
-        .cube__face {
-            background-color: transparent;
-            box-shadow: 0px 6px 15px -2px transparent;
-        }
-    }
-    .cube2 {
-        .cube__face {
-            background-color: transparent;
-            box-shadow: 0px 6px 15px -2px transparent;
-        }
-    }
-    .intro-terminal {
-        font-size: calc(0.24 * var(--width-unit));
-        width: calc(4 * var(--width-unit));
-        height: calc(4 * var(--width-unit));
-        top: calc(-1 * var(--width-unit));
-        left: calc(-1 * var(--width-unit));
-        box-shadow: $shadow;
-    }
-    .intro-text-area {
-        padding: calc(0.4 * var(--width-unit)) calc(0.18 * var(--width-unit));
-    }
-    .intro-terminal-controls {
-        position: relative;
-        margin-left: calc(0.21 * var(--width-unit));
-        margin-top: calc(0.07 * var(--width-unit));
-        width: calc(0.1 * var(--width-unit));
-        height: calc(0.1 * var(--width-unit));
-        &:before {
-            left: calc(-0.15 * var(--width-unit));
-            width: calc(0.1 * var(--width-unit));
-            height: calc(0.1 * var(--width-unit));
-        }
-        &:after {
-            left: calc(0.15 * var(--width-unit));
-            width: calc(0.1 * var(--width-unit));
-            height: calc(0.1 * var(--width-unit));
-        }
-    }
-}
-
-@mixin dataFlowing {
-    .data-flow-left {
-        width: calc(1 * var(--width-unit));
-        left: calc(-1 * var(--width-unit));
-        transition: width 0.5s 0.3s, left 0.5s 0.3s;
-    }
-    .data-flow-right {
-        width: calc(1 * var(--width-unit));
-        right: calc(-1 * var(--width-unit));
-        transition: width 0.5s 0.6s, right 0.5s 0.6s;
-    }
-    .cube1 {
-        .cube__face--front {
-            background-color: $brand-color;
-            transition: background-color 0.3s 0.8s;
-        }
-    }
-    .cube3 {
-        .cube__face--front {
-            background-color: $brand-color;
-            transition: background-color 0.3s 1.1s;
-        }
-    }
-    .intro-gql-logo {
-        opacity: 1;
-        transition: opacity 4.6s;
-        img {
-            transform: translateY(0);
-        }
-    }
-}
-
-.scene-0 {
-    @include aligned;
-    @include focus-terminal;
-    .intro-admin-ui, .intro-storefront {
-        opacity: 0;
-    }
-}
-
-.scene-1 {
-    @include aligned;
-    @include focus-terminal;
-    .intro-admin-ui, .intro-storefront {
-        opacity: 0;
-    }
-}
-
-.scene-2 {
-    @include aligned;
-    .intro-admin-ui, .intro-storefront {
-        opacity: 0;
-    }
-    .cube__face--front {
-        background-color: $terminal-color;
-    }
-    .cube1 {
-        .cube__face {
-            transition: background-color 0.8s 0s, box-shadow 0.5s 0s;
-        }
-    }
-    .cube2 {
-        .cube__face {
-            transition: background-color 0.8s 1s, box-shadow 0.5s 0.4s;
-        }
-    }
-    .cube3 {
-        .cube__face {
-            transition: background-color 0.8s 0.3s, box-shadow 0.5s 0.3s;
-        }
-    }
-}
-
-.scene-3 {
-    @include aligned;
-    @include dataFlowing;
-    .intro-admin-ui, .intro-storefront {
-        opacity: 0;
-    }
-}
-
-.scene-4 {
-    @include aligned;
-    @include dataFlowing;
-    .intro-admin-ui {
-        opacity: 1;
-        transition: opacity 0.8s 0.3s;
-    }
-    .intro-storefront {
-        opacity: 1;
-        transition: opacity 0.8s 0.5s;
-    }
-}
-
-.scene-5 {
-    .intro-admin-ui {
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-    .intro-storefront {
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-    .intro-gql-logo {
-        opacity: 1;
-    }
-    .intro-terminal {
-        opacity: 0;
-    }
-    .cube2, .cube3 {
-        .cube__face--front {
-            background-color: var(--color-right);
-        }
-    }
-    $cube-easing: cubic-bezier(.11,.73,.84,.55);
-    $cube-duration: 0.5s;
-    .cube1 {
-        .cube__face {
-            transition: transform $cube-duration, background-color 0.1s 0.1s;
-        }
-    }
-    .cube2 {
-        .cube__face {
-            transition: transform $cube-duration, background-color 0.3s 0.1s;
-        }
-    }
-    .cube3 {
-        .cube__face {
-            transition: transform $cube-duration, background-color 0.1s 0.1s;
-        }
-    }
-    .cube__face {
-        --projection: 1.3;
-        &.cube__face--front {
-            animation: projectFront;
-            animation-duration: $cube-duration;
-            animation-fill-mode: both;
-            animation-timing-function: $cube-easing;
-        }
-
-        &.cube__face--right {
-            transform: rotateY( 90deg) translateZ(calc(1 * var(--width-unit)));
-        }
-
-        &.cube__face--back {
-            transform: rotateY(180deg) translateZ(calc(1 * var(--width-unit)));
-        }
-
-        &.cube__face--left {
-            animation: projectLeft;
-            animation-duration: $cube-duration;
-            animation-fill-mode: both;
-            animation-timing-function: $cube-easing;
-        }
-
-        &.cube__face--top {
-            animation: projectTop;
-            animation-duration: $cube-duration;
-            animation-fill-mode: both;
-            animation-timing-function: $cube-easing;
-        }
-
-        &.cube__face--bottom {
-            transform: rotateX(-90deg) translateZ(calc(1 * var(--width-unit)));
-        }
-    }
-}
-
-.scene-6 {
-    @media all and (min-width: $sm-breakpoint) {
-        transform: rotateX(-45deg) translateX(calc(-2 * var(--width-unit)));
-    }
-    .cube {
-        transition: none;
-    }
-    .intro-admin-ui {
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-    .intro-storefront {
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-    .intro-gql-logo {
-        opacity: 1;
-    }
-    .intro-terminal {
-        opacity: 0;
-    }
-    .cube2, .cube3 {
-        .cube__face--front {
-            background-color: var(--color-right);
-        }
-    }
-    .cube__face {
-        transition: none;
-    }
-    $shimmerDuration: 8s;
-    $shimmerTiming: ease-in-out;
-    .cube1 {
-        .cube__face--top { animation: shimmerTop $shimmerDuration $shimmerTiming $shimmerDuration * 0.02 infinite; }
-        .cube__face--left { animation: shimmerLeft $shimmerDuration $shimmerTiming infinite; }
-    }
-    .cube2 {
-        .cube__face--top { animation: shimmerTop $shimmerDuration $shimmerTiming $shimmerDuration * 0.05 infinite; }
-        .cube__face--left { animation: shimmerLeft $shimmerDuration $shimmerTiming $shimmerDuration * 0.05 infinite; }
-        .cube__face--front { animation: shimmerRight $shimmerDuration $shimmerTiming $shimmerDuration * 0.082 infinite; }
-    }
-    .cube3 {
-        .cube__face--top { animation: shimmerTop $shimmerDuration $shimmerTiming $shimmerDuration * 0.1 infinite; }
-        .cube__face--front { animation: shimmerRight $shimmerDuration $shimmerTiming $shimmerDuration * 0.12 infinite; }
-    }
-}
-
-@keyframes projectFront {
-    0% {
-        transform: rotateY(0deg) translateZ(calc(1 * var(--width-unit)));
-    }
-    20% {
-        transform: rotateY(0deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    100% {
-        transform: rotateY(0deg) translateZ(calc(1 * var(--width-unit)));
-    }
-}
-
-@keyframes projectLeft {
-    0% {
-        transform: rotateY(-90deg) translateZ(calc(1 * var(--width-unit)));
-    }
-    20% {
-        transform: rotateY(-90deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    100% {
-        transform: rotateY(-90deg) translateZ(calc(1 * var(--width-unit)));
-    }
-}
-
-@keyframes projectTop {
-    0% {
-        transform: rotateX( 90deg) translateZ(calc(1 * var(--width-unit)));
-    }
-    20% {
-        transform: rotateX( 90deg) translateZ(calc(var(--projection) * var(--width-unit)));
-    }
-    100% {
-        transform: rotateX( 90deg) translateZ(calc(1 * var(--width-unit)));
-    }
-}
-
-@keyframes shimmerTop {
-    10% {
-        background-color: #99e9ff;
-    }
-    20% {
-        background-color: var(--color-top);
-    }
-
-}
-
-@keyframes shimmerLeft {
-    10% {
-        background-color: #99e4ff;;
-    }
-    20% {
-        background-color: var(--color-left);
-    }
-}
-
-@keyframes shimmerRight {
-    10% {
-        background-color: #40ccff;;
-    }
-    20% {
-        background-color: var(--color-right);
-    }
-}

docs/assets/styles/main.scss

@@ -1,298 +0,0 @@
-@import 'variables';
-@import 'markdown';
-@import 'utils';
-@import 'article';
-@import 'landing-page';
-@import 'top-bar';
-@import 'menu';
-@import 'shortcodes';
-@import 'syntax';
-@import 'search-widget';
-@import 'graphql-playground-widget';
-@import 'breadcrumbs';
-@import 'blog';
-@import 'toc';
-
-html {
-    font-size: $font-size-base;
-    letter-spacing: 0.33px;
-}
-
-html,
-body {
-    min-width: $body-min-width;
-    overflow-x: hidden;
-}
-
-body {
-    color: $body-font-color;
-    background: $body-background;
-    font-family: 'Open Sans', sans-serif;
-    font-weight: $body-font-weight;
-
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    box-sizing: border-box;
-    * {
-        box-sizing: inherit;
-    }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-    // font-weight: 400;
-}
-
-a {
-    text-decoration: none;
-    color: $color-link;
-
-    &:visited {
-        color: $color-visited-link;
-    }
-}
-
-img {
-    vertical-align: middle;
-}
-
-ul.pagination {
-    display: flex;
-    justify-content: center;
-    list-style-type: none;
-
-    .page-item a {
-        padding: $padding-8 $padding-16;
-        border: 1px solid $gray-200;
-        border-radius: 3px;
-    }
-    .page-item.active a {
-        background-color: $gray-200;
-    }
-    .page-item.disabled a {
-        color: $gray-500;
-    }
-    li + li {
-        margin-left: $padding-4;
-    }
-}
-
-.container {
-    min-width: $container-min-width;
-    max-width: $container-max-width;
-    margin: $top-bar-height auto 0;
-}
-
-ul.contents-list {
-    padding: 0;
-    list-style-type: none;
-    text-transform: capitalize;
-}
-
-.book-brand {
-    margin-top: 0;
-}
-
-.book-menu {
-    flex: 0 0 $menu-width;
-    font-size: $font-size-14;
-
-    nav {
-        width: $menu-width;
-        padding: $padding-16;
-
-        @include fixed;
-    }
-
-    @include dark-links;
-}
-
-.book-page {
-    min-width: $body-min-width;
-    min-height: 80vh;
-    flex: 1;
-    padding: $padding-16 * 1.6;
-    padding-right: 3px;
-
-    @media all and (max-width: $sm-breakpoint) {
-        padding: 6px;
-    }
-    figure {
-        img {
-            max-width: 100%;
-        }
-    }
-}
-
-.book-header {
-    margin-bottom: $padding-16;
-    display: none;
-}
-
-
-
-.book-toc {
-    flex: 0 0 $toc-width;
-    font-size: $font-size-12;
-
-    nav {
-        width: $toc-width;
-        padding: $padding-16;
-
-        @include fixed;
-    }
-
-    nav > ul > li {
-        margin: 0;
-    }
-    a.active {
-        font-weight: bold;
-        position: relative;
-        &::before {
-            content: '';
-            position: absolute;
-            left: -12px;
-            top: 3px;
-            display: block;
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background-color: $brand-color;
-            opacity: 0.5;
-        }
-    }
-}
-
-.book-git-footer {
-    display: flex;
-    margin-top: $padding-16;
-    font-size: $font-size-14;
-    align-items: baseline;
-
-    img {
-        width: $font-size-14;
-        vertical-align: bottom;
-    }
-}
-
-.book-footer {
-    height: 200px;
-    text-align: center;
-    color: $gray-600;
-    margin-top: 60px;
-    font-size: 12px;
-}
-
-.book-posts {
-    min-width: $body-min-width;
-    max-width: $md-breakpoint;
-    padding: $padding-16;
-
-    article {
-        padding-bottom: $padding-16;
-    }
-}
-
-.footer {
-    @include texture-bg;
-    padding: 30px 10px;
-    margin-top: 120px;
-    color: $gray-600;
-    position: relative;
-
-    .gh-link {
-        margin-left: 12px;
-    }
-
-    .footer-logo img {
-        width: 100px;
-        filter: saturate(0%);
-        opacity: 0.5;
-    }
-
-    .links {
-        margin-left: 12px;
-        margin-bottom: 60px;
-        ul {
-            font-size: 18px;
-            list-style-type: none;
-            padding-left: 0;
-            li {
-                margin: 12px 0;
-            }
-        }
-
-        img.link-icon {
-            width: 24px;
-            height: 24px;
-            margin-right: 6px;
-        }
-    }
-    .copyright {
-        font-size: 12px;
-        text-align: center;
-    }
-    a:link,
-    a:visited {
-        color: $gray-500;
-        transition: color 0.2s;
-    }
-    a:hover {
-        color: $gray-200;
-    }
-}
-
-// Responsive styles
-aside nav,
-.book-page,
-.markdown {
-    transition: 0.2s ease-in-out;
-    transition-property: transform, margin-left, opacity;
-    will-change: transform, margin-left;
-}
-
-@media screen and (max-width: $md-breakpoint) {
-    .book-toc {
-        display: none;
-    }
-    .left-gutter {
-        display: none;
-    }
-}
-
-@media screen and (max-width: $sm-breakpoint) {
-    .book-menu {
-        margin-left: -$menu-width;
-    }
-
-    .book-header {
-        display: flex;
-    }
-
-    #menu-control:checked + main {
-        .book-menu nav,
-        .book-page {
-            transform: translateX($menu-width);
-        }
-
-        .book-header label {
-            transform: rotate(90deg);
-        }
-
-        .markdown {
-            opacity: 0.25;
-        }
-    }
-}
-
-// Extra space for big screens
-@media screen and (min-width: $container-max-width) {
-    .book-menu nav {
-        padding-top: $padding-16;
-    }
-}

docs/config.toml

@@ -1,23 +0,0 @@
-baseURL = "https://www.vendure.io/"
-languageCode = "en-us"
-title = "Vendure E-commerce"
-googleAnalytics = "UA-133911942-1"
-pygmentsCodeFences = true
-pygmentsUseClasses = true
-enableGitInfo = true
-images = ["share-image.jpg"]
-disableKinds = [
-  "taxonomy",
-  "taxonomyTerm"
-]
-[params]
-    BookSection = "docs"
-[permalinks]
-    blog = "/blog/:year/:month/:slug/"
-[markup]
-  [markup.goldmark]
-    [markup.goldmark.renderer]
-      unsafe = true
-  [markup.tableOfContents]
-    endLevel = 3
-    startLevel = 1

docs/content/_index.md

@@ -1,6 +1,30 @@
 ---
-title: "Headless e-commerce with GraphQL, TypeScript and Node.js"
-images: 
-    - "./share-image.jpg"
+title: "Vendure Documentation"
 weight: 0
 ---
+
+# Vendure Documentation
+
+{{< alert "warning" >}}
+**Note**: Vendure is currently in beta and as such, the information and APIs documented here are subject to change.
+{{< /alert >}}
+
+## What is Vendure?
+
+Vendure is a headless e-commerce framework.
+
+* *Headless* is a term which means that it does not concern itself with rendering the HTML pages of a website. Rather, it exposes a GraphQL API which which can be *queried* for data ("Give me a list of available products") or issued with *mutation* instructions ("Add product '123' to the current order") by a *client application*. Thus the client is responsible for how the e-commerce "storefront" looks and how it works. Vendure is responsible for the rest.
+* Vendure is a *framework* in that it supplies core e-commerce functionality, but is open to further extension by the developer.
+
+## Who should use Vendure?
+
+Vendure is intended to be used by developers who wish to create a modern e-commerce solution. While we aim for a seamless and simple developer experience, Vendure is not aimed at non-technical users.
+
+## What technologies is Vendure built on?
+
+* Vendure is written in [TypeScript](https://www.typescriptlang.org/).
+* [Node.js](https://nodejs.org/en/) is the runtime platform.
+* The data layer is handled by [TypeORM](http://typeorm.io/), which is compatible with most popular relational databases.
+* [Nest](https://nestjs.com/) is used as the underlying architecture.
+* The API is [GraphQL](https://graphql.org/) powered by [Apollo Server](https://www.apollographql.com/docs/apollo-server/).
+* The Admin UI application is built with [Angular](https://angular.io/).

docs/content/article/faq.md

@@ -1,43 +0,0 @@
----
-title: "Vendure Frequently Asked Questions"
-weight: 0
-showtoc: true
---- 
- 
-## Vendure is still beta. Can I use it in production?
-
-Short answer: **yes**, Vendure can be (and is) used in production. However, there are a number of caveats which you must be aware of before deciding to use Vendure beta:
-
-1. Before Vendure reaches v1.0, breaking changes can and do occur with minor releases (e.g. between v0.10.0 and v0.11.0). These breaking changes are documented in the changelog entry that accompanies each release. Take a look at [the changelog](https://github.com/vendure-ecommerce/vendure/blob/master/CHANGELOG.md) to get a sense of the kinds of breaking changes that you can expect.
-2. Certain features which are planned for v1.0 are either not yet implemented, or are incomplete. The Roadmap section covers the main outstanding areas.
-3. As with any early-stage software, there will be edge-case bugs and rough edges that need finding and fixing. Be prepared to report issues and - if feasible - contribute to the ongoing development of the project.
-
-## When will Vendure come out of beta?
-
-Please see the [Vendure Roadmap]({{< relref "roadmap" >}}) for full details.
-
-## Can I use React/Vue/Gatsby/Next etc. with Vendure?
-
-**Yes**. Vendure is completely decoupled from the front-end storefront implementation. You are free to build your storefront using whatever technology you like.
-
-For example, there are already Vendure storefront projects built with Vue, React, Angular and Svelte.
-
-## Who is using Vendure?
-
-There are a number of Vendure projects under development at the moment. Based on community interactions, we know that Vendure is being used in both public B2C settings and enterprise B2B. We're collecting a list of production Vendure-powered sites in the [Built With Vendure](https://github.com/vendure-ecommerce/vendure/discussions/485) thread in our discussion forum.
-
-## Is enterprise support available?
-
-We're not yet offering general support packages, but if you are planning a Vendure-based project and are interested in consulting & code-review services from the core Vendure development team, please [get in touch](mailto:contact@vendure.io).
-
-## Is Vendure free to use?
-
-**Yes**. Vendure and all the core packages are licensed under the [MIT licence](https://github.com/vendure-ecommerce/vendure/blob/master/LICENSE). This means you are free to use Vendure without restriction, even as the basis of your own commercial product.
-
-## Does Vendure support multi-vendor / multi-tenant?
-
-**No**, out-of-the box Vendure does not support multi-vendor. We have a [Channels feature]({{< relref "channels" >}}) which allows a single vendor to define multiple sales channels. 
-
-Currently there is ongoing work by community contributors to put in place the internal infrastructure to support multi-vendor, but as of this writing (September 2020) it is not yet considered complete. It _would_ be possible to add multi-vendor support by way of a plugin, but bear in mind that this would entail a fair amount of custom development.
-
-

docs/content/article/roadmap.md

@@ -1,23 +0,0 @@
----
-title: "Vendure Roadmap"
-weight: 0
-showtoc: false
----
-
-## Vendure beta ➡ v1.0
-
-Vendure is soon to enter the v1.0-beta phase. At that point no more breaking changes are planned. Non-breaking features and fixes will then be added over a period of one to several months while we progress from beta to release candidate. At that point, the final v1.0 state will be released. This is currently planned for around April 2021.
-
- For an up-to-date overview of where we stand, refer to the [v1.0 milestone on GitHub](https://github.com/vendure-ecommerce/vendure/milestones/4).
-
-{{< alert "primary" >}}
-[Join our mailing list](https://mailchi.mp/17af21ad4b64/vendure-mailing-list) to be informed when the final v1.0 is released
-{{< /alert >}}
-
-## Post v1.0
-
-Once we hit v1.0, Vendure will continue to follow [Semantic Versioning](https://semver.org/). We'll aim for a steady cadence of major releases, perhaps every 6 months. Newer, breaking changes will be available via a `next` branch and release tag. 
-
-## Long-term
-
-Vendure is in this for the long-term. The project is backed by a successful UK-based retailer who have been in e-commerce for over 15 years. We plan to grow Vendure into the go-to solution for Node.js e-commerce with a solid, stable core and vibrant community. Post v1.0 we will be introducing a set of commercial plugins covering some more advanced use-cases. 

docs/content/blog/_index.md

@@ -1,7 +0,0 @@
----
-title: "Vendure Blog"
----
-
-# Not here!
-
-The blog posts are maintained in the `vendure-io` branch of this repo ;)

docs/content/docs/_index.md

@@ -1,30 +0,0 @@
----
-title: "Vendure Documentation"
-weight: 0
----
-
-# Vendure Documentation
-
-{{< alert "warning" >}}
-**Note**: Vendure is currently in beta and as such, the information and APIs documented here are subject to change.
-{{< /alert >}}
-
-## What is Vendure?
-
-Vendure is a headless e-commerce framework.
-
-* *Headless* is a term which means that it does not concern itself with rendering the HTML pages of a website. Rather, it exposes a GraphQL API which which can be *queried* for data ("Give me a list of available products") or issued with *mutation* instructions ("Add product '123' to the current order") by a *client application*. Thus the client is responsible for how the e-commerce "storefront" looks and how it works. Vendure is responsible for the rest.
-* Vendure is a *framework* in that it supplies core e-commerce functionality, but is open to further extension by the developer.
-
-## Who should use Vendure?
-
-Vendure is intended to be used by developers who wish to create a modern e-commerce solution. While we aim for a seamless and simple developer experience, Vendure is not aimed at non-technical users.
-
-## What technologies is Vendure built on?
-
-* Vendure is written in [TypeScript](https://www.typescriptlang.org/).
-* [Node.js](https://nodejs.org/en/) is the runtime platform.
-* The data layer is handled by [TypeORM](http://typeorm.io/), which is compatible with most popular relational databases.
-* [Nest](https://nestjs.com/) is used as the underlying architecture.
-* The API is [GraphQL](https://graphql.org/) powered by [Apollo Server](https://www.apollographql.com/docs/apollo-server/).
-* The Admin UI application is built with [Angular](https://angular.io/).