moved prism files into src root

cmd/build.js

@@ -10,8 +10,9 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
-// ignore sass file requires when building static pages
+// ignore style file requires when building static pages
 require.extensions['.scss'] = (module) => module.exports = '';
+require.extensions['.css'] = (module) => module.exports = '';
 
 const config = {
     entry: './src/index.js',
@@ -30,7 +31,7 @@ const config = {
                 },
             },
         }, {
-            test: /\.scss$/,
+            test: /\.s?css$/,
             use: ExtractTextPlugin.extract({
                 use: [{
                     loader: 'css-loader',

src/index.js

@@ -1,5 +1,8 @@
 require('./style.scss');
 
+require('./prism.scss');
+require('./prism.js');
+
 const app = require('./app');
 const pages = require('./pages');
 

src/pages/modules/index.js

@@ -314,6 +314,12 @@ module.exports = () => () => (
             ['p.copy', {}, [
                 'The "view.build" module is a responsible for adding the build blob to the app. This build function is responsible for taking the output of the builder and transforming it into valid vdom, or throwing a syntax error. This also means it needs to be able to "unroll" components and initiate their updates using the "sync" event.',
             ]],
+            [Codeblock, {}, [`
+                const buildBlob = (element, queue) => {
+                    // ...
+                    return vdom;
+                };
+            `]],
         ]],
         ['div.section', {}, [
             [ModuleTitle, {}, [
@@ -322,6 +328,17 @@ module.exports = () => () => (
             ['p.copy', {}, [
                 'The "view.dom" module adds both the "draw" and the "update" blobs to the app. This is the only module (except "router") which should be aware of the browser and the document.',
             ]],
+            [Codeblock, {}, [`
+                const drawBlob = (target, buildOutput) => {
+                    // ...
+                    return buildOutput;
+                };
+
+                const updateBlob = (target, buildOutput, address, view, identity) => {
+                    // ...
+                    return view;
+                };
+            `]],
         ]],
         ['div.section', {}, [
             [ModuleTitle, {}, [
@@ -330,6 +347,15 @@ module.exports = () => () => (
             ['p.copy', {}, [
                 'The "view.string" module also adds the "draw" and "update" blobs, but makes them render to a safe html string.',
             ]],
+            [Codeblock, {}, [`
+                const toString = (target, vdom) => {
+                    target.innerHTML = magicallyStringify(vdom);
+                    return vdom;
+                };
+
+                const drawBlob = toString;
+                const updateBlob = toString;
+            `]],
         ]],
         ['div.section', {}, [
             [ModuleTitle, {}, [

src/res/prism/prism.css → src/prism.scss

@@ -1,5 +1,6 @@
 pre[class*="language-"] {
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    color: rgba(255, 255, 204, 0.8);
     background: #330030;
     word-spacing: normal;
     padding: 1.3em 1.5em;
@@ -12,27 +13,20 @@ pre[class*="language-"] {
     text-align: left;
     margin: 1.5em 0;
     overflow: auto;
+    hyphens: none;
     cursor: text;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
     tab-size: 4;
 
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-}
+    &::selection,
+    *::selection {
+        background: rgb(139, 53, 132);
+    }
 
-pre[class*="language-"]::selection,
-pre[class*="language-"] *::selection {
-    background: rgb(139, 53, 132);
+    span {
+        color: rgba(255, 255, 255, 0.6);
+    }
 }
 
-pre[class*="language-"] span {
-    color: rgba(255, 255, 255, 0.6);
-}
-pre[class*="language-"],
 .token.boolean {
     color: rgba(255, 255, 204, 0.8);
 }
@@ -43,7 +37,7 @@ pre[class*="language-"],
     color: rgb(255, 255, 204);
 }
 
-/* markdown */
+// markdown
 .token.deleted {
     color: #ff2c5a;
 }

src/template.html

@@ -20,8 +20,6 @@
 <body>
     <div class="wrapper">{{content}}</div>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800">
-    <link rel="stylesheet" href="/res/prism/prism.css" />
-    <script src="/res/prism/prism.js"></script>
     <script src="/index.js"></script>
 </body>
 </html>