WIP: Documentation site using component-docs

.eslintignore

@@ -8,3 +8,4 @@ build/
 node_modules/
 vendor/
 examples/
+docs-public/

.gitignore

@@ -1,3 +1,6 @@
+# Generated files
+docs-public
+
 ### OS Junk ###
 .DS_Store
 *~

.prettierrc

@@ -1,4 +1,5 @@
 {
+  "arrowParens": "always",
   "trailingComma": "es5",
   "singleQuote": true
 }

component-docs.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+
+// pages structure and order
+const pages = [
+  'docs/HOME.mdx',
+  'docs/GET_STARTED.md',
+  'docs/BASICS.md',
+  'docs/BENEFITS.md',
+  '---',
+  'docs/API.md',
+  'docs/CONFIGURATION.md',
+  'docs/CLI.md',
+  'docs/BUNDLERS_INTEGRATION.md',
+  'docs/LINTING.md',
+  'docs/CRITICAL_CSS.md',
+  'docs/DYNAMIC_STYLES.md',
+  'docs/THEMING.md',
+  'docs/HOW_IT_WORKS.md',
+  '---',
+  'docs/2.0_MIGRATION_GUIDE.md',
+];
+
+const extMap = {
+  md: 'md',
+  mdx: 'mdx',
+  js: 'component',
+};
+
+module.exports = {
+  port: 3031,
+  root: path.resolve(__dirname),
+  assets: ['website/assets'],
+  logo: '/assets/linaria-logo-colored.svg',
+  output: 'docs-public',
+  pages: pages.map((page) => {
+    if (page === '---') return { type: 'separator' };
+
+    return {
+      type: extMap[path.extname(page).substr(1)],
+      file: path.resolve(__dirname, page),
+    };
+  }),
+  title: '[title] - Linaria Documentation',
+};

docs/2.0_MIGRATION_GUIDE.md

@@ -1,3 +1,7 @@
+---
+title: 2.0 Migration Guide
+---
+
 # `2.0` Migration Guide
 
 ## Breaking changes

docs/API.md

@@ -1,3 +1,7 @@
+---
+title: API reference
+---
+
 # API
 
 Linaria exposes a core `css` method alongside with small, but just enough amount of helpers. Inside `linaria` module you can find following methods:

docs/BASICS.md

@@ -1,3 +1,7 @@
+---
+title: Basics
+---
+
 # Basics
 
 ## Basic syntax

docs/BENEFITS.md

@@ -1,3 +1,7 @@
+---
+title: Benefits
+---
+
 # Why use Linaria
 
 ## Advantages over regular CSS

docs/BUNDLERS_INTEGRATION.md

@@ -1,3 +1,8 @@
+---
+title: Bundlers integrations
+link: bundlers-integration
+---
+
 # Bundlers Integration
 
 ## Jump To

docs/CLI.md

@@ -1,3 +1,7 @@
+---
+title: Command line
+---
+
 # CLI
 
 Linaria CLI allows you to extract CSS from your source files using a command line.

docs/CONFIGURATION.md

@@ -1,3 +1,7 @@
+---
+title: Configuration
+---
+
 # Configuration
 
 Linaria can be customized using a JavaScript, JSON or YAML file. This can be in form of:

docs/CRITICAL_CSS.md

@@ -1,3 +1,8 @@
+---
+title: Critical CSS extraction
+link: critical-css
+---
+
 # Critical CSS extraction
 
 Since Linaria extracts the CSS statically at build time, you don't need to setup a server rendering. Usually, critical CSS extraction will be automatic if you are code splitting your code and using something like [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) for webpack to generate your CSS files.

docs/DYNAMIC_STYLES.md

@@ -1,3 +1,8 @@
+---
+title: Dynamic styles
+link: dynamic-styles
+---
+
 # Dynamic styles with `css` tag
 
 Sometimes we have some styles based on component's props or state, or dynamic in some way. If you use the `styled` helper with React, this is automatically handled using CSS custom properties. But we cannot do the same for `css` tags since they aren't linked to any component, and so we don't have access to state and props. However, there are some approaches to tackle this, each with their own limitations.

docs/GET_STARTED.md

@@ -0,0 +1,39 @@
+---
+title: Get started
+link: get-started
+---
+
+# Get started
+
+## Installation
+
+```sh
+npm install linaria
+```
+
+or
+
+```sh
+yarn add linaria
+```
+
+## Setup
+
+Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:
+
+- [webpack](/bundlers-integration#webpack)
+- [Rollup](/bundlers-integration#rollup)
+
+Optionally, add the `linaria/babel` preset to your Babel configuration at the end of the presets list to avoid errors when importing the components in your server code or tests:
+
+```json
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "linaria/babel"
+  ]
+}
+```
+
+See [Configuration](/configuration) to customize how Linaria processes your files.

docs/HOME.mdx

@@ -0,0 +1,15 @@
+export const meta = {
+  title: 'Home',
+  description: 'This is the homepage.',
+  link: 'index',
+};
+
+import { Link } from 'component-docs/components'
+import Button from './components/Button'
+
+# Zero-Runtime CSS in JS
+
+Linaria lets you write CSS in JS and get real CSS files during build. Use dynamic prop based styles with the React bindings and have them transpiled to CSS variables automatically. Great productivity with source maps and linting support.
+
+<Button as={Link} to="get-started" primary>Get Started</Button>
+<Button as='a' href="https://github.com/callstack/linaria/" target="_blank">GitHub</Button>

docs/HOW_IT_WORKS.md

@@ -1,3 +1,8 @@
+---
+title: How it works
+link: how-it-works
+---
+
 # How it works
 
 Linaria consists of 2 parts:

docs/LINTING.md

@@ -1,3 +1,7 @@
+---
+title: Linting
+---
+
 # Linting
 
 ## stylelint

docs/THEMING.md

@@ -1,3 +1,7 @@
+---
+title: Theming
+---
+
 # Theming
 
 There are several approaches you can use for theming. Depending on the browser support and requirements, you can pick the approach that suits you the best.

docs/components/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": ["off"]
+  }
+}

docs/components/Button.js

@@ -0,0 +1,47 @@
+/* @flow */
+
+import * as React from 'react';
+import { styled } from 'linaria/react';
+
+type Props = {
+  as?: React$ElementType,
+  primary: boolean,
+  children?: React.Node,
+};
+
+const PRIMARY_COLOR = '#f15f79';
+
+const Button: React.ComponentType<Props> = styled.button`
+  display: inline-block;
+  appearance: none;
+  margin: 12px 8px;
+  min-width: 120px;
+  white-space: nowrap;
+  font-size: inherit;
+  font-weight: 600;
+  text-align: center;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 2px solid ${PRIMARY_COLOR};
+  background-color: ${(props: Props) =>
+    props.primary ? PRIMARY_COLOR : 'transparent'};
+  color: ${(props: Props) => (props.primary ? '#fff' : PRIMARY_COLOR)};
+  cursor: pointer;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: ${PRIMARY_COLOR};
+    color: #fff;
+  }
+
+  &:first-of-type {
+    margin-left: 0;
+  }
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+`;
+
+export default Button;

package.json

@@ -39,6 +39,7 @@
     "test": "jest",
     "test:dts": "dtslint --localTs node_modules/typescript/lib types",
     "add-contributor": "all-contributors add",
+    "build:docs": "component-docs build",
     "build:lib": "NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --ignore '**/__tests__/**,**/__integration-tests__/**,**/__fixtures__/**' --source-maps --delete-dir-on-start",
     "build:esm": "babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --ignore '**/__tests__/**,**/__integration-tests__/**,**/__fixtures__/**' --source-maps --delete-dir-on-start",
     "build": "yarn build:lib && yarn build:esm",
@@ -47,6 +48,7 @@
     "prepare": "yarn build && yarn build:declarations",
     "release": "release-it",
     "website": "yarn --cwd website",
+    "docs": "component-docs serve",
     "bootstrap": "yarn && yarn website install"
   },
   "publishConfig": {
@@ -81,6 +83,7 @@
     "babel-jest": "^24.5.0",
     "codecov": "^3.2.0",
     "commitlint": "^8.3.5",
+    "component-docs": "0.23.0",
     "dedent": "^0.7.0",
     "del-cli": "^1.1.0",
     "dtslint": "^0.9.8",

website/src/server.js

@@ -5,7 +5,7 @@ import 'ignore-styles';
 import fs from 'fs';
 import path from 'path';
 import crypto from 'crypto';
-import { collect } from 'linaria/server'; // eslint-disable-line import/no-unresolved
+import { collect } from 'linaria/server'; // eslint-disable-line import/no-extraneous-dependencies
 import Koa from 'koa';
 import Router from 'koa-router';
 import compress from 'koa-compress';