[v2] Docs update

website/src/components/HomepageFeatures.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageFeatures.module.css';
+
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate'; // i18n component
+
+const FeatureList = [
+  {
+    title: translate({id: "homepage.Features.Title1"}),
+    lightImage: '/img/desktop-application-app-dark.svg',
+    darkImage: '/img/desktop-application-app.svg',
+    description: translate({id: "homepage.Features.Description1"}),
+  },
+  {
+    title: translate({id: "homepage.Features.Title2"}),
+    lightImage: '/img/go_js.svg',
+    darkImage: '/img/go_js_dark.svg',
+    description: translate({id: "homepage.Features.Description2"}),
+  },
+  {
+    title: translate({id: "homepage.Features.Title3"}),
+    lightImage: '/img/Terminal-icon.svg',
+    darkImage: '/img/Terminal-icon-dark.svg',
+    description: translate({id: "homepage.Features.Description3"}),
+  },
+];
+
+function Feature({lightImage, darkImage, title, description}) {
+  const imageStyle = {
+    width: '25%',
+    margin: 'auto',
+    minHeight: '100px',
+  }
+
+  return (
+      <div className={clsx('col col--4')}>
+        <div className="text--center">
+          <ThemedImage
+              style={imageStyle}
+              alt="Docusaurus themed image"
+              sources={{
+                light: useBaseUrl(lightImage),
+                dark: useBaseUrl(darkImage),
+              }}
+          />
+        </div>
+        <div className="text--center padding-horiz--md">
+          <h3>{title}</h3>
+          <p>{description}</p>
+        </div>
+      </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+      <section className={styles.features}>
+        <div className="container">
+          <div className="row">
+            {FeatureList.map((props, idx) => (
+                <Feature key={idx} {...props} />
+            ))}
+          </div>
+        </div>
+      </section>
+  );
+}

website/src/components/HomepageFeatures.module.css

@@ -0,0 +1,11 @@
+.features {
+    display: flex;
+    align-items: center;
+    padding: 2rem 0;
+    width: 100%;
+}
+
+.featureSvg {
+    height: 200px;
+    width: 200px;
+}

website/src/components/brand.mdx

@@ -0,0 +1,11 @@
+import ThemedImage from '@theme/ThemedImage';
+
+export const Brand = ({children,brand}) => (
+    <ThemedImage
+        alt="{{brand}} logo"
+        sources={{
+            light: useBaseUrl('/img/icon-' + brand + '.svg'),
+            dark: useBaseUrl('/img/icon-' + brand + '-dark.svg'),
+        }}
+    />
+);

website/src/css/custom.css

@@ -0,0 +1,70 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+    --ifm-color-primary: #25c2a0;
+    --ifm-color-primary-dark: rgb(33, 175, 144);
+    --ifm-color-primary-darker: rgb(31, 165, 136);
+    --ifm-color-primary-darkest: rgb(26, 136, 112);
+    --ifm-color-primary-light: rgb(70, 203, 174);
+    --ifm-color-primary-lighter: rgb(102, 212, 189);
+    --ifm-color-primary-lightest: rgb(146, 224, 208);
+    --ifm-code-font-size: 95%;
+    --ifm-container-width-xl: 90%;
+}
+
+.docusaurus-highlight-code-line {
+    background-color: rgba(0, 0, 0, 0.1);
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme="dark"] .docusaurus-highlight-code-line {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* customs css */
+:root {
+    --ifm-color-primary: #df0000;
+    --ifm-color-primary-dark: rgb(156, 0, 0);
+    --ifm-color-primary-darker: rgb(120, 0, 0);
+    --ifm-color-primary-darkest: rgb(26, 136, 112);
+    --ifm-color-primary-light: rgb(70, 203, 174);
+    --ifm-color-primary-lighter: rgb(102, 212, 189);
+    --ifm-color-primary-lightest: rgb(146, 224, 208);
+    --ifm-code-font-size: 95%;
+    --ifm-button-color: white;
+    --ifm-container-width-xl: 85%;
+}
+
+.docusaurus-highlight-code-line {
+    background-color: rgba(0, 0, 0, 0.1);
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+}
+
+.prism-code {
+    counter-reset: line-number;
+}
+
+.prism-code.language-js .token-line::before,
+.prism-code.language-ts .token-line::before,
+.prism-code.language-go .token-line::before {
+    counter-increment: line-number;
+    content: counter(line-number);
+    margin-right: calc(var(--ifm-pre-padding) * 1.5);
+    text-align: right;
+    min-width: 1.5rem;
+    display: inline-block;
+    opacity: 0.3;
+    position: sticky;
+    left: var(--ifm-pre-padding);
+    border-right: 1px solid;
+    padding-right: 0.5rem;
+}

website/src/pages/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './index.module.css';
+import HomepageFeatures from '../components/HomepageFeatures';
+
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from "@docusaurus/core/lib/client/exports/useBaseUrl";
+import {translate} from '@docusaurus/Translate'; // i18n component
+
+function HomepageHeader() {
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <header className={clsx('hero', styles.heroBanner)}>
+            <div className="container">
+                <ThemedImage
+                    alt="Wails Logo"
+                    width="30%"
+                    sources={{
+                        light: useBaseUrl('/img/logo-light.svg'),
+                        dark: useBaseUrl('/img/logo-dark.svg'),
+                    }}
+                />
+                <p className="hero__subtitle">{translate({id: "homepage.Tagline"})}</p>
+                <div className={styles.buttons}>
+                    <Link
+                        className="button button--primary button--lg"
+                        to="/docs/gettingstarted/installation">
+                        {translate({id: "homepage.ButtonText"})}
+                    </Link>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default function Home() {
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <Layout
+            title={`The ${siteConfig.title} Project`}
+            description={translate({id: "homepage.Tagline"})}>
+            <HomepageHeader/>
+            <main>
+                <HomepageFeatures/>
+            </main>
+        </Layout>
+    );
+}

website/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+    padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+    .heroBanner {
+        padding: 2rem;
+    }
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

website/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.

website/src/pages/showcase/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+
+export default function MyReactPage() {
+    return (
+        <Layout>
+            <h1>My React page</h1>
+            <p>This is a React page</p>
+        </Layout>
+    );
+}