Merge pull request #40 from charliewilco/now

Now v2

.travis.yml

@@ -10,16 +10,3 @@ script:
  - yarn workspace postcss-gzip build
  - yarn workspace obsidian.css build
  - yarn workspace obsidian-documentation build
-before_deploy: yarn global add now
-deploy:
- - provider: script # Run a custom deployment script which we will define below
- script: yarn workspace obsidian-documentation deploy:ci
- skip_cleanup: true
- on:
- all_branches: true
- master: false
- - provider: script
- script: yarn workspace obsidian-documentation deploy:token
- skip_cleanup: true
- on:
- master: true

documentation/components/branches.tsx

@@ -10,18 +10,19 @@ export interface TrunkState {
 // React.Component<any, any> | React.SFC<any>
 
 export interface TrunkProps {
- navigation: new (props: any) => React.Component<any> | React.SFC<any>,
+ navigation: React.ComponentType<any>
 }
 
-export interface BranchProps {
- component: new (props: any) => React.Component<any> | React.SFC<any>,
- render: new (props: any) => React.Component<any> | React.SFC<any>
+export interface BranchProps<V = any> {
+ component?: React.ComponentType<any>;
+ render?: (props: Context & V) => React.ReactNode;
 }
 
 export interface NavActions {
  goDirectToPosition: (position: number) => void;
  goToPrevious: () => void;
  goToNext: () => void;
+ position: number;
 }
 
 export interface Context extends TrunkState, NavActions {}
@@ -84,7 +85,7 @@ export class Trunk extends React.Component<TrunkProps, TrunkState> {
  }
 }
 
-export class Branch extends React.Component<BranchProps, void> {
+export class Branch extends React.Component<BranchProps, any> {
  render() {
  const { component: Cx, render, ...props } = this.props;
 

documentation/components/layout.tsx

@@ -19,7 +19,7 @@ export interface ILayoutProps {
  children: React.ReactNode;
 }
 
-export default class Layout extends React.Component<ILayoutProps, void> {
+export default class Layout extends React.Component<ILayoutProps, {}> {
  static displayName = 'UILayout';
 
  static defaultProps = {

documentation/components/markdown-map.tsx

@@ -0,0 +1,22 @@
+import Prism from 'react-prism';
+import 'prismjs';
+import 'prism-themes/themes/prism-base16-ateliersulphurpool.light.css';
+import {
+ ModuleTable,
+ ModuleSubHeading,
+ ModuleHeading,
+ ModuleContent,
+ ModuleList,
+ ModuleNumberedList,
+ ModuleListItem,
+ ModuleElements
+} from './module';
+
+export const h3: React.SFC<ModuleElements> = props => <ModuleHeading {...props} />;
+export const h4: React.SFC<ModuleElements> = props => <ModuleSubHeading {...props} />;
+export const code: React.SFC<ModuleElements> = props => <Prism {...props} />;
+export const p: React.SFC<ModuleElements> = props => <ModuleContent {...props} />;
+export const table: React.SFC<ModuleElements> = props => <ModuleTable {...props} />;
+export const ul: React.SFC<ModuleElements> = props => <ModuleList {...props} />;
+export const ol: React.SFC<ModuleElements> = props => <ModuleNumberedList {...props} />;
+export const li: React.SFC<ModuleElements> = props => <ModuleListItem {...props} />;

documentation/components/module.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-interface ModuleElements {
+export interface ModuleElements {
  children: React.ReactNode
 }
 
@@ -31,14 +31,21 @@ export const ModuleContent: React.SFC<ModuleElements> = ({ children }) => (
 );
 
 
+interface MDXProps {
+ LayoutProps: {
+ [key: string]: any;
+ }
+}
+
+
 interface IModuleProps {
  title: string,
- component: new (props: any) => React.Component;
+ component: React.ComponentType<MDXProps>
 }
 
 export const Module: React.SFC<IModuleProps> = ({ title, component: Cx }) => (
  <section className="Pane u-mb4 u-pt3 u-px3 u-pb4">
  <ModuleHeading>{title}</ModuleHeading>
  <Cx LayoutProps={{ className: 'Pane' }} />
  </section>
-);
+);

documentation/components/navigation.tsx

@@ -1,7 +1,16 @@
 import Link from 'next/link';
 import { withRouter } from 'next/router';
 
-export const pages = [
+interface NavigationPage {
+ name: string;
+ href: string; 
+}
+
+interface ILinkProps extends NavigationPage {
+ active: string;
+}
+
+export const pages: NavigationPage[] = [
  {
  name: 'Settings',
  href: '/settings'
@@ -34,7 +43,7 @@ export const pages = [
  }
 ];
 
-export const subpages = [
+export const subpages: NavigationPage[] = [
  {
  name: 'Usage',
  href: '/usage'
@@ -53,47 +62,50 @@ export const subpages = [
  }
 ];
 
-export const ActiveSubLink = withRouter(({ router: { route }, name, href }) => (
- <Link href={href}>
- <a className={route === href ? 'u-w700' : ''}>{name}</a>
- </Link>
-));
 
-export const ActiveLink = withRouter(({ router: { route }, name, href }) => (
+const ActiveSubLink: React.SFC<ILinkProps> = ({ active, name, href }) => (
  <Link href={href}>
- <a
- className={
- route === href
- ? 'NavList__link u-px2 u-py3 active'
- : 'NavList__link u-px2 u-py3'
- }>
- {name}
- </a>
+ <a className={active === href ? 'u-w700' : ''}>{name}</a>
  </Link>
-));
+);
+
+const ActiveLink: React.SFC<ILinkProps> = ({ active, name, href }) => {
+ return (
+ <Link href={href}>
+ <a
+ className={
+ active === href
+ ? 'NavList__link u-px2 u-py3 active'
+ : 'NavList__link u-px2 u-py3'
+ }>
+ {name}
+ </a>
+ </Link>
+ );
+};
 
-export const MoreContentNav = () => (
+export const MoreContentNav = withRouter(({ router: { route } }) => (
  <nav className="u-px2 u-center">
  <hr className="Rule" />
  <h4 className="h6 u-mb3">Further Reading</h4>
  <ul className="SubNavList u-w400">
- {subpages.map((page, idx) => (
+ {subpages.map(({ name, href }, idx) => (
  <li className="u-inbl u-mx2" key={idx}>
- <ActiveSubLink {...page} />
+ <ActiveSubLink active={route} name={name} href={href} />
  </li>
  ))}
  </ul>
  </nav>
-);
+));
 
-export const Nav = () => (
+export const Nav = withRouter(({ router: { route } }) => (
  <nav className="NavList u-bg--offwhite u-mb5">
  <ul className="NavList__items u-w400">
- {pages.map((page, idx) => (
+ {pages.map(({ name, href }, idx) => (
  <li className="NavList__item u-mr3" key={idx}>
- <ActiveLink {...page} />
+ <ActiveLink active={route} name={name} href={href} />
  </li>
  ))}
  </ul>
  </nav>
-);
+));

documentation/components/snippet.tsx

@@ -20,7 +20,7 @@ export const NavButton: React.SFC<INavButton> = ({ active, children, onClick })
 );
 
 
-export class TabbedNavigation extends React.Component<NavActions, void> {
+export class TabbedNavigation extends React.Component<NavActions, {}> {
  render() {
  const { position, goDirectToPosition } = this.props
  return (
@@ -42,7 +42,7 @@ export class TabbedNavigation extends React.Component<NavActions, void> {
 }
 
 interface ISnippet {
- component: new (props: any) => React.Component,
+ component: React.ComponentType<any>,
  snippet: string
 }
 

documentation/next.config.js

@@ -1,24 +1,43 @@
-const withTypescript = require('@zeit/next-typescript');
-const withMDX = require('@zeit/next-mdx')({
- extension: /\.mdx?$/
-});
-
-const withCSS = require('@zeit/next-css');
+const { PHASE_PRODUCTION_SERVER } =
+ process.env.NODE_ENV === 'development'
+  ? {}
+ : !process.env.NOW_REGION
+ ? require('next/constants')
+ : require('next-server/constants');
 
 const raw = {
  test: /\.txt$/,
  use: 'raw-loader'
 };
 
-module.exports = withTypescript(
- withCSS(
- withMDX({
+const webpack = config => {
+ config.module.rules.push(raw);
+ return config;
+};
+
+module.exports = (phase, { defaultConfig }) => {
+ if (phase === PHASE_PRODUCTION_SERVER) {
+ // Config used to run in production.
+
+ return {
  pageExtensions: ['js', 'jsx', 'mdx'],
- webpack(config) {
- config.module.rules.push(raw);
+ webpack
+ };
+ }
+ // ✅ Put the require call here.
+
+ const withCSS = require('@zeit/next-css');
+ const withTypescript = require('@zeit/next-typescript');
+ const withMDX = require('@zeit/next-mdx')({
+ extension: /\.mdx?$/
+ });
 
- return config;
- }
- })
- )
-);
+ return withTypescript(
+ withCSS(
+ withMDX({
+ pageExtensions: ['js', 'jsx', 'mdx'],
+ webpack
+ })
+ )
+ );
+};

documentation/package.json

@@ -1,17 +1,12 @@
 {
- "name": "obsidian-documentation",
+ "name": "obsidian-docs",
  "private": true,
  "version": "3.0.0-0",
  "scripts": {
  "start": "next start",
  "dev": "next dev",
  "build": "next build",
- "deploy:ci": "now --token $NOW_TOKEN",
- "deploy:token": "now --token $NOW_TOKEN && now alias --token $NOW_TOKEN",
- "deploy": "now && now alias"
- },
- "now": {
- "alias": "obsidian.charlespeters.net"
+ "types": "tsc --noEmit"
  },
  "babel": {
  "presets": ["next/babel", "@zeit/next-typescript/babel"]

documentation/tsconfig.json

@@ -2,9 +2,10 @@
  "compileOnSave": false,
  "compilerOptions": {
  "target": "esnext",
- "module": "esnext",
+ "module": "commonjs",
  "jsx": "preserve",
  "allowJs": true,
+ "resolveJsonModule": true,
  "moduleResolution": "node",
  "allowSyntheticDefaultImports": true,
  "noUnusedLocals": true,

now.json

@@ -0,0 +1,7 @@
+{
+ "version": 2,
+ "name": "obsidian-documentation",
+ "alias": "obsidian.charlespeters.net",
+ "builds": [{ "src": "documentation/next.config.js", "use": "@now/next" }],
+ "routes": [{ "src": "/(.*)", "dest": "/documentation/$1" }]
+}