Merge pull request #711 from primer/fix-storybook-again

shawnbot · web-flow · commit b5776cca83e9 · 2019-03-07T15:08:46.000-08:00
Fix storybook, post-sync
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -39,7 +39,7 @@ addParameters({
 })
 
 configure(() => {
-  const loadMarkdown = require.context('../src', true, /\.md$/)
+  const loadMarkdown = require.context('../pages/css', true, /\.md$/)
   for (const path of loadMarkdown.keys()) {
     loadMarkdown(path)
   }
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="https://unpkg.com/octicons@7.0.1/build/build.css">
+<link rel="stylesheet" href="https://unpkg.com/octicons@8.5.0/build/build.css">
 <script src="https://github.com/site/assets/styleguide.js" async></script>
diff --git a/.storybook/story-loader.js b/.storybook/story-loader.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-const {dirname} = require('path')
+const {basename, dirname, join} = require('path')
 const parseFromString = require('code-blocks/lib/fromString')
 
 module.exports = function storyLoader(markdown) {
@@ -15,11 +15,7 @@ module.exports = function storyLoader(markdown) {
 
   // strip the sourcePath from the beginning of the resourcePath
   const file = resourcePath.replace(`${sourcePath}/`, '')
-  // finally, remove "/README" or "/docs" from the path,
-  // then strip the ".md" filename extension
-  const path = dirname(file)
-    .replace(/(\/README|\/docs)/, '')
-    .replace(/\.md$/, '')
+  const path = join(dirname(file), basename(file, '.md'))
 
   const stories = storiesFromMarkdown(markdown, file)
   if (stories.length) {
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,10 +1,8 @@
 const {resolve} = require('path')
-const sourcePath = resolve(__dirname, '../src')
+const pagesPath = resolve(__dirname, '../pages/css')
 
 module.exports = ({config}) => {
-  const babel = config.module.rules.find(rule => {
-    return rule.test.test('test.js')
-  }).use[0]
+  const babel = config.module.rules[0].use[0]
 
   config.module.rules = config.module.rules.filter(rule => {
     return !rule.test.test('test.md')
@@ -13,20 +11,19 @@ module.exports = ({config}) => {
   config.module.rules.push(
     {
       test: /\.md$/,
-      include: sourcePath,
+      include: pagesPath,
       loaders: [
         babel,
         {
           loader: require.resolve('./story-loader'),
           options: {
-            sourcePath
+            sourcePath: pagesPath
           }
         }
       ]
     },
     {
       test: /\.scss$/,
-      include: sourcePath,
       loaders: [
         'style-loader',
         'css-loader',
diff --git a/package-lock.json b/package-lock.json
diff --git a/pages/css/getting-started/index.md b/pages/css/getting-started/index.md
@@ -77,14 +77,14 @@ $blue: #0000ff;
 
 Don't forget to add the compiled CSS to the `<head>` section of your page.
 
-```html dead
+```html inert=true
 <link href="path/to/style.css" rel="stylesheet">
 ```
 
 ## Using primer on a static site
 
 You won't need to install any node modules for a static site, you can use the built CSS. The best thing to do is to [download the built CSS](https://unpkg.com/primer/build/build.css) from the npm module and host it yourself. If that's not an option, you can include a CDN link in your html:
 
-```html dead
+```html inert=true
 <link href="https://unpkg.com/primer/build/build.css" rel="stylesheet">
 ```
diff --git a/pages/css/principles/html.md b/pages/css/principles/html.md
@@ -15,7 +15,7 @@ title: HTML
 * Avoid trailing slashes in self-closing elements. For example, `<br>`, `<hr>`, `<img>`, and `<input>`.
 * Don't set `tabindex` manually—rely on the browser to set the order.
 
-```html dead={true}
+```html inert=true
 <p class="line-note m-0" data-attribute="106">
   This is my paragraph of special text.
 </p>
@@ -25,7 +25,7 @@ title: HTML
 
 Many attributes don't require a value to be set, like `disabled` or `checked`, so don't set them.
 
-```html dead={true}
+```html inert=true
 <input type="text" disabled>
 
 <input type="checkbox" value="1" checked>
@@ -41,7 +41,7 @@ For more information, [read the WhatWG section](http://www.whatwg.org/specs/web-
 
 Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. For example:
 
-```html dead={true}
+```html inert=true
 <!-- Not so great -->
 <span class="avatar">
   <img src="https://github.com/github.png">
@@ -62,7 +62,7 @@ Whenever possible, avoid superfluous parent elements when writing HTML. Many tim
 
 Make use of `<thead>`, `<tfoot>`, `<tbody>`, and `<th>` tags (and `scope` attribute) when appropriate. (Note: `<tfoot>` goes above `<tbody>` for speed reasons. You want the browser to load the footer before a table full of data.)
 
-```html dead={true}
+```html inert=true
 <table summary="This is a chart of invoices for 2011.">
   <thead>
     <tr>

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ addParameters({`
`39`	`39`	`})`
`40`	`40`
`41`	`41`	`configure(() => {`
`42`		`- const loadMarkdown = require.context('../src', true, /\.md$/)`
	`42`	`+ const loadMarkdown = require.context('../pages/css', true, /\.md$/)`
`43`	`43`	`for (const path of loadMarkdown.keys()) {`
`44`	`44`	`loadMarkdown(path)`
`45`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-<link rel="stylesheet" href="https://unpkg.com/octicons@7.0.1/build/build.css">`
	`1`	`+<link rel="stylesheet" href="https://unpkg.com/octicons@8.5.0/build/build.css">`
`2`	`2`	`<script src="https://github.com/site/assets/styleguide.js" async></script>`
Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,8 @@`
`1`	`1`	`const {resolve} = require('path')`
`2`		`-const sourcePath = resolve(__dirname, '../src')`
	`2`	`+const pagesPath = resolve(__dirname, '../pages/css')`
`3`	`3`
`4`	`4`	`module.exports = ({config}) => {`
`5`		`- const babel = config.module.rules.find(rule => {`
`6`		`- return rule.test.test('test.js')`
`7`		`- }).use[0]`
	`5`	`+ const babel = config.module.rules[0].use[0]`
`8`	`6`
`9`	`7`	`config.module.rules = config.module.rules.filter(rule => {`
`10`	`8`	`return !rule.test.test('test.md')`
`@@ -13,20 +11,19 @@ module.exports = ({config}) => {`
`13`	`11`	`config.module.rules.push(`
`14`	`12`	`{`
`15`	`13`	`test: /\.md$/,`
`16`		`- include: sourcePath,`
	`14`	`+ include: pagesPath,`
`17`	`15`	`loaders: [`
`18`	`16`	`babel,`
`19`	`17`	`{`
`20`	`18`	`loader: require.resolve('./story-loader'),`
`21`	`19`	`options: {`
`22`		`- sourcePath`
	`20`	`+ sourcePath: pagesPath`
`23`	`21`	`}`
`24`	`22`	`}`
`25`	`23`	`]`
`26`	`24`	`},`
`27`	`25`	`{`
`28`	`26`	`test: /\.scss$/,`
`29`		`- include: sourcePath,`
`30`	`27`	`loaders: [`
`31`	`28`	`'style-loader',`
`32`	`29`	`'css-loader',`