Workaround for MoOx/phenomic#732.

cssnano · Nov 2, 2016 · c05dcd3 · c05dcd3
1 parent 2ad9e47
commit c05dcd3
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 36 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ _webpackOutput
 
 *.bundle.js
 docs/content/changelog.md
+docs/content/optimisations
diff --git a/docs/scripts/createOptimisations.js b/docs/scripts/createOptimisations.js
@@ -0,0 +1,29 @@
+const fs = require('fs');
+const path = require('path');
+const toml = require('toml');
+const camel = require('camelcase');
+
+const metadata = toml.parse(fs.readFileSync(path.join(__dirname, '..', '..', 'metadata.toml'), 'utf-8'));
+
+metadata.modules.forEach(module => {
+    module.shortName = camel(module.name.replace('postcss', ''));
+});
+
+metadata.modules.forEach(module => {
+    const shortName = module.shortName;
+    const title = module.safe === false ? `${shortName} (unsafe)` : shortName;
+    const content = `---
+title: "${title}"
+layout: Optimisation
+identifier: ${shortName}
+---
+
+${module.longDescription}
+`;
+
+    fs.writeFile(path.join(__dirname, `../content/optimisations/${shortName}.md`), content, err => {
+        if (err) {
+            throw err;
+        }
+    });
+});
diff --git a/docs/web_modules/app/routes.js b/docs/web_modules/app/routes.js
@@ -2,7 +2,6 @@ import React, {Component, PropTypes} from "react";
 import {Route} from "react-router";
 import {PageContainer as PhenomicPageContainer} from 'phenomic';
 import LayoutContainer from "../LayoutContainer";
-import OptimisationContainer from "../layouts/Optimisations/show";
 import * as layouts from '../layouts';
 
 class PageContainer extends Component {
@@ -29,10 +28,6 @@ class PageContainer extends Component {
 
 export default (
   <Route component={LayoutContainer}>
-    <Route
-        path="/optimisations/:optimisation"
-        component={OptimisationContainer}
-    />
     <Route
         path="*"
         component={PageContainer}

diff --git a/docs/web_modules/layouts/Optimisations/show.js b/docs/web_modules/layouts/Optimisations/show.js
@@ -1,52 +1,29 @@
-import React, {PropTypes, Component} from "react";
+import React, {Component, PropTypes} from "react";
 import BasicPage from "../BasicPage";
-import PageError from '../PageError';
 import {content} from '../Page/index.css';
-import DangerousMarkdown from '../../DangerousMarkdown';
 import CssExample from '../../CssExample';
 import {example} from '../../CssExample/index.css';
 
-export default class OptimisationsContainer extends Component {
+export default class Optimisation extends Component {
     static contextTypes = {
         metadata: PropTypes.object.isRequired
     };
 
     static propTypes = {
+        head: PropTypes.object,
         params: PropTypes.object,
     };
 
     render () {
-        const {optimisation} = this.props.params;
+        const {identifier} = this.props.head;
         const {modules} = this.context.metadata;
-        const module = modules.filter(m => m.shortName.toLowerCase() === optimisation.toLowerCase());
-
-        if (!module[0]) {
-            return (<PageError />);
-        }
+        const module = modules.find(m => m.shortName.toLowerCase() === identifier.toLowerCase());
 
         const {
-            shortName,
-            safe,
             inputExample,
             outputExample,
-            longDescription,
             source,
-        } = module[0];
-
-        let title = shortName;
-
-        if (safe === false) {
-            title += ` (unsafe)`;
-        }
-
-        const params = {
-            __filename: `optimisations/${shortName}.md`,
-            __url: `optimisations/${shortName}`,
-            head: {
-                title,
-            },
-            body: '',
-        };
+        } = module;
 
         let demo = null;
         if (inputExample && outputExample) {
@@ -58,9 +35,8 @@ export default class OptimisationsContainer extends Component {
 
         return (
             <div>
-                <BasicPage {...params} className={content}></BasicPage>
+                <BasicPage className={content} { ...this.props} />
                 <div className={content}>
-                    <DangerousMarkdown>{longDescription}</DangerousMarkdown>
                     {demo}
                     <p><a href={source}>View on GitHub</a></p>
                 </div>

diff --git a/docs/web_modules/layouts/index.js b/docs/web_modules/layouts/index.js
@@ -2,6 +2,7 @@ export BasicPage from './BasicPage';
 export Blog from './Blog';
 export CoverPage from './CoverPage';
 export Homepage from './Homepage';
+export Optimisation from './Optimisations/show';
 export Optimisations from './Optimisations';
 export Page from './Page';
 export PageError from './PageError';