docs: add website (#65)

.eslintrc.json

@@ -48,6 +48,16 @@
         "import/no-unresolved": 0,
         "import/extensions": 0
       }
+    },
+    {
+      "files": ["**/website/**/*.js"],
+      "rules": {
+        "react/jsx-filename-extension": 0,
+        "react/no-multi-comp": 0,
+        "react/prefer-stateless-function": 0,
+        "import/no-extraneous-dependencies": 0,
+        "import/no-unresolved": 0
+      }
     }
   ]
 }

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img width="500" src="./assets/logos/nebula.png" alt="nebula.js logo" />
+  <img width="500" src="./docs/assets/logos/nebula.png" alt="nebula.js logo" />
 </p>
 <p align="center">A new star on the rise</p>
 
@@ -13,7 +13,7 @@ It consists of three parts:
 - `supernova`: A JavaScript API for consuming and visualizing QIX data.
 - `cli`: Tools to help you create, develop and build a `supernova`.
 
-![nebula-overview](assets/nebula-overview.png)
+![nebula-overview](docs/assets/nebula-overview.png)
 
 ## Roadmap
 

docs/README.md

@@ -0,0 +1,14 @@
+---
+id: introduction
+title: Introduction
+---
+
+## What is nebula.js?
+
+`nebula.js` is a collection of JavaScript libraries and APIs that helps developers integrate visualizations and mashups on top of Qlik's Associative Engine.
+
+It consists of three parts:
+
+- `nucleus`: A product and framework agnostic JavaScript library for building mashups.
+- `supernova`: A JavaScript API for consuming and visualizing QIX data.
+- `cli`: Tools to help you create, develop and build a `supernova`.

website/README.md

@@ -0,0 +1,9 @@
+# nebula.js website
+
+The website is generated using [docusaurus](https://docusaurus.io/).
+
+The documentation itself is located in [../docs](../docs).
+
+## Using Docusaurus
+
+Run `npm start` to start a server which will host the website at `localhost:3000`.

website/core/Footer.js

@@ -0,0 +1,64 @@
+const React = require('react');
+
+class Footer extends React.Component {
+  docUrl(doc, language) {
+    const { baseUrl, docsUrl } = this.props.config;
+    const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
+    const langPart = `${language ? `${language}/` : ''}`;
+    return `${baseUrl}${docsPart}${langPart}${doc}`;
+  }
+
+  pageUrl(doc, language) {
+    const { baseUrl } = this.props.config;
+    return baseUrl + (language ? `${language}/` : '') + doc;
+  }
+
+  imgUrl(img) {
+    const { baseUrl } = this.props.config;
+    return `${baseUrl}img/${img}`;
+  }
+
+  render() {
+    return (
+      <footer className="nav-footer" id="footer">
+        <section className="sitemap">
+          <div />
+          <div>
+            <h5>Docs</h5>
+            <a href={this.docUrl('introduction.html', this.props.language)}>
+              Getting Started
+            </a>
+          </div>
+          <div>
+            <h5>Links</h5>
+            <a href="http://qlikbranch-slack-invite.herokuapp.com/">
+              <i className="fa fa-slack" />
+              Slack
+            </a>
+            <a href={this.props.config.repoUrl}>
+              <i className="fa fa-github" />
+              GitHub
+            </a>
+          </div>
+          <div />
+        </section>
+        <a
+          href="https://github.com/qlik-oss/"
+          rel="noopener noreferrer"
+          target="_blank"
+          className="qlikOpenSource"
+        >
+          <img
+            src={this.imgUrl('QlikLogo-White.png')}
+            alt="Qlik Open Source"
+            width="170"
+            height="85"
+          />
+        </a>
+        <section className="copyright">{this.props.config.copyright}</section>
+      </footer>
+    );
+  }
+}
+
+module.exports = Footer;

website/package.json

@@ -0,0 +1,14 @@
+{
+  "scripts": {
+    "examples": "docusaurus-examples",
+    "start": "docusaurus-start",
+    "build": "docusaurus-build",
+    "publish-gh-pages": "docusaurus-publish",
+    "write-translations": "docusaurus-write-translations",
+    "version": "docusaurus-version",
+    "rename-version": "docusaurus-rename-version"
+  },
+  "devDependencies": {
+    "docusaurus": "^1.11.1"
+  }
+}

website/pages/en/index.js

@@ -0,0 +1,46 @@
+const React = require('react');
+
+const CompLibrary = require('../../core/CompLibrary.js');
+
+const {
+  // MarkdownBlock,
+  Container,
+  GridBlock,
+} = CompLibrary;
+
+class Index extends React.Component {
+  render() {
+    // const { config: siteConfig, language = '' } = this.props;
+    // const { baseUrl } = siteConfig;
+
+    const Block = props => (
+      <Container
+        padding={['bottom', 'top']}
+        id={props.id}
+        background={props.background}
+      >
+        <GridBlock
+          align="center"
+          contents={props.children}
+          layout={props.layout}
+        />
+      </Container>
+    );
+
+    return (
+      <div>
+        <div className="mainContainer">
+          <Block>
+            {[
+              {
+                title: 'Under construction',
+              },
+            ]}
+          </Block>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = Index;

website/sidebars.json

@@ -0,0 +1,5 @@
+{
+  "docs": {
+    "Introduction": ["introduction"]
+  }
+}

website/siteConfig.js

@@ -0,0 +1,74 @@
+const siteConfig = {
+  title: 'nebula.js', // Title for your website.
+  tagline: 'A new star on the rise',
+  url: 'https://nebulajs.netlify.com', // Your website URL
+  baseUrl: '/', // Base URL for your project */
+
+  // Used for publishing and more
+  projectName: 'nebula.js',
+  organizationName: 'qlik-oss',
+
+  // For no header links in the top nav bar -> headerLinks: [],
+  headerLinks: [
+    // { doc: 'introduction', label: 'Introduction' },
+  ],
+
+  /* path to images for header/footer */
+  headerIcon: 'docs/assets/logos/nebula_white.svg',
+  disableHeaderTitle: true,
+  footerIcon: 'docs/assets/logos/nebula_white.svg',
+  favicon: 'img/favicon.svg',
+
+  /* Colors for website */
+  colors: {
+    primaryColor: '#91298C',
+    secondaryColor: '#0f0',
+  },
+
+  /* Custom fonts for website */
+  /*
+  fonts: {
+    myFont: [
+      "Times New Roman",
+      "Serif"
+    ],
+    myOtherFont: [
+      "-apple-system",
+      "system-ui"
+    ]
+  },
+  */
+
+  // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
+  copyright: `Copyright © ${new Date().getFullYear()} QlikTech International AB`,
+
+  highlight: {
+    // Highlight.js theme to use for syntax highlighting in code blocks.
+    theme: 'default',
+  },
+
+  // Add custom scripts here that would be placed in <script> tags.
+  scripts: ['https://buttons.github.io/buttons.js'],
+
+  // On page navigation for the current documentation page.
+  onPageNav: 'separate',
+  // No .html extensions for paths.
+  cleanUrl: true,
+
+  // Open Graph and Twitter card images.
+  // ogImage: 'img/.svg',
+  // twitterImage: 'img/.svg',
+
+  // Show documentation's last contributor's name.
+  // enableUpdateBy: true,
+
+  // Show documentation's last update time.
+  // enableUpdateTime: true,
+
+  // You may provide arbitrary config keys to be used as needed by your
+  // template. For example, if you need your repo's URL...
+  repoUrl: 'https://github.com/qlik-oss/nebula.js',
+  editUrl: 'https://github.com/qlik-oss/nebula.js/edit/master/docs/',
+};
+
+module.exports = siteConfig;

website/static/css/custom.css

@@ -0,0 +1,27 @@
+/* your custom css */
+
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+}
+
+@media only screen and (min-width: 1024px) {
+}
+
+@media only screen and (max-width: 1023px) {
+}
+
+@media only screen and (min-width: 1400px) {
+}
+
+@media only screen and (min-width: 1500px) {
+}
+
+#footer .qlikOpenSource {
+  margin: 1em auto;
+  width: 200px;
+  display: block;
+  opacity: 0.6;
+}
+
+#footer .qlikOpenSource:hover {
+  opacity: 0.9;
+}

website/static/img/favicon.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="589px" height="127px" viewBox="0 0 589 127" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="nebula-wordmark" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Group" fill="#91298C">
+        <path d="M531.19548,97.6954798 L524.39548,97.6954798 C522.39548,97.6954798 520.99548,96.1954798 520.99548,94.2954798 L520.99548,83.7954798 C520.99548,76.2954798 514.89548,70.1954798 507.39548,70.1954798 C468.201507,70.1954798 448.00452,70.1954798 446.80452,70.1954798 L439.90452,70.1954798 C438.10452,70.1954798 436.60452,68.6954798 436.60452,66.7954798 L436.64548,59.7954798 C436.64548,57.9954798 438.14548,56.3954798 439.94548,56.3954798 L507.39548,56.3954798 C522.39548,56.3954798 534.69548,68.6954798 534.69548,83.7954798 L534.69548,94.2954798 C534.59548,96.1954798 533.19548,97.6954798 531.19548,97.6954798 Z" id="Shape-Copy-6" fill-rule="nonzero" transform="translate(485.650000, 77.045480) rotate(-270.000000) translate(-485.650000, -77.045480) "></path>
+        <path d="M65.1,96.2 L58.3,96.2 C56.3,96.2 54.9,94.7 54.9,92.8 L54.9,55.3 C54.9,47.8 48.8,41.7 41.3,41.7 L14,41.7 L14,92.8 C14,94.8 12.4,96.2 10.6,96.2 L3.7,96.2 C1.9,96.2 0.4,94.7 0.4,92.8 L0.4,31.3 C0.4,29.5 1.9,27.9 3.7,27.9 L41.3,27.9 C56.3,27.9 68.6,40.2 68.6,55.3 L68.6,92.8 C68.5,94.7 67.1,96.2 65.1,96.2 Z" id="Shape" fill-rule="nonzero"></path>
+        <path d="M495.652179,5.32907052e-14 L503.3,5.2846616e-14 C504.956854,5.25422568e-14 506.3,1.34314575 506.3,3 L506.3,11 C506.3,12.6568542 504.956854,14 503.3,14 L495.652179,14 C493.995325,14 492.652179,12.6568542 492.652179,11 L492.652179,3 C492.652179,1.34314575 493.995325,5.35950644e-14 495.652179,5.32907052e-14 Z" id="Rectangle"></path>
+        <path d="M393.104323,68.8956768 L386.500316,68.8956768 C384.500316,68.8956768 383.100316,67.3956768 383.100316,65.4956768 L383.100316,54.9956768 C383.100316,47.4956768 377.000316,41.3956768 369.500316,41.3956768 L304.013111,41.3956768 C302.213111,41.3956768 300.713111,39.8956768 300.713111,37.9956768 L300.695677,30.9956768 C300.695677,29.1956768 302.195677,27.5956768 303.995677,27.5956768 L369.500316,27.5956768 C384.500316,27.5956768 396.604323,39.8956768 396.604323,54.9956768 L396.604323,65.4956768 C396.504323,67.3956768 395.104323,68.8956768 393.104323,68.8956768 Z" id="Shape-Copy" fill-rule="nonzero" transform="translate(348.650000, 48.245677) scale(-1, 1) rotate(-270.000000) translate(-348.650000, -48.245677) "></path>
+        <path d="M147,96.2 L109.5,96.2 C94.5,96.2 82.2,83.9 82.2,68.9 L82.2,55.3 C82.2,40.2 94.5,27.9 109.5,27.9 L123.1,27.9 C138.1,27.9 150.4,40.2 150.4,55.3 L150.4,65.5 C150.4,67.5 148.9,68.9 147,68.9 L95.9,68.9 C95.9,76.4 102,82.5 109.5,82.5 L147,82.5 C149,82.5 150.4,84 150.4,85.9 L150.4,92.7 C150.5,94.7 149,96.2 147,96.2 Z M123.2,41.6 L109.6,41.6 C102.1,41.6 96,47.7 96,55.2 L136.9,55.2 C136.8,47.8 130.7,41.6 123.2,41.6 Z" id="Shape" fill-rule="nonzero"></path>
+        <path d="M205.1,96.2 L167.5,96.2 C165.7,96.2 164.2,94.7 164.2,92.8 L164.2,4 C164.2,2 165.7,0.6 167.5,0.6 L174.4,0.6 C176.2,0.6 177.8,2.1 177.8,4 L177.8,27.8 L205.1,27.8 C220.1,27.8 232.4,40.1 232.4,55.2 L232.4,68.8 C232.4,83.9 220.1,96.2 205.1,96.2 Z M218.7,55.3 C218.7,47.8 212.6,41.7 205.1,41.7 L177.8,41.7 L177.8,82.6 L205.1,82.6 C212.6,82.6 218.7,76.5 218.7,69 L218.7,55.3 Z" id="Shape" fill-rule="nonzero"></path>
+        <path d="M310.9,96.2 L273.4,96.2 C258.4,96.2 246.1,83.9 246.1,68.9 L246.1,31.3 C246.1,29.5 247.6,27.9 249.4,27.9 L256.3,27.9 C258.1,27.9 259.7,29.5 259.7,31.3 L259.7,68.9 C259.7,76.4 265.8,82.5 273.3,82.5 L300.6,82.5 L300.6,31.3 C300.6,29.5 302.1,27.9 304,27.9 L310.8,27.9 C312.8,27.9 314.2,29.5 314.2,31.3 L314.2,92.7 C314.3,94.7 312.8,96.2 310.9,96.2 Z" id="Shape" fill-rule="nonzero"></path>
+        <path d="M447.7,96.2 L403.4,96.2 C392.1,96.2 383,87.1 383,75.7 C383,64.4 392.1,55.3 403.4,55.3 L437.5,55.3 C437.5,47.8 431.4,41.7 423.9,41.7 L400,41.7 C398.2,41.7 396.7,40.1 396.7,38.3 L396.7,31.4 C396.7,29.6 398.2,28 400,28 L423.9,28 C438.9,28 451.2,40.3 451.2,55.4 L451.2,92.9 C451.1,94.7 449.7,96.2 447.7,96.2 Z M437.5,68.9 L403.4,68.9 C399.6,68.9 396.6,71.8 396.6,75.7 C396.6,79.6 399.5,82.6 403.4,82.6 L437.5,82.6 L437.5,68.9 Z" id="Shape" fill-rule="nonzero"></path>
+        <path d="M533.8,55 L533.8,55.655205 L523.4,61.5461303 C521.6,61.5461303 520,60.0461303 520,58.2461303 L520,54.75 C520,39.75 532.3,27.5 547.4,27.5 L571.25,27.5 C573.15,27.6 574.65,29 574.65,31 L574.65,37.8 C574.65,39.8 573.15,41.2 571.25,41.2 L547.4,41.2 C539.9,41.2 533.8,47.3 533.8,54.8 L533.8,55 L567.8,55 C579.1,55 588.2,64.1 588.2,75.4 C588.2,86.8 579.1,95.9 567.8,95.9 L523.5,95.9 C521.5,95.9 520.1,94.4 520,92.6 C520,89.9245649 520,87.5569801 520,85.4972456 C520,83.8641607 521.16336,82.3362151 523.5,82.3362151 C525.83664,82.3362151 566.134763,82.3 567.8,82.3 C569.76885,82.3 574.6,80.9630614 574.6,75.4 C574.6,69.8369386 569.694672,68.6179406 567.8,68.6073356 C565.905328,68.5967305 523.5,68.6073356 523.5,68.6073356 C521.372145,68.5967305 520,67.4156747 520,65.4640241 C520,63.0887757 520,60.6088339 520,58.0241986 C520,56.4596977 521.368131,55 523.5,55 L533.8,55 Z" id="Path-Copy-3" fill-rule="nonzero"></path>
+        <path d="M468,82.5 L475.647821,82.5 C477.304675,82.5 478.647821,83.8431458 478.647821,85.5 L478.647821,93.1 C478.647821,94.7568542 477.304675,96.1 475.647821,96.1 L468,96.1 C466.343146,96.1 465,94.7568542 465,93.1 L465,85.5 C465,83.8431458 466.343146,82.5 468,82.5 Z" id="Rectangle-Copy"></path>
+    </g>
+  </g>
+</svg>