Rebuild hyperlink

package.json

@@ -37,6 +37,7 @@
     "lint:markdown": "markdownlint --config ./.markdownlint.json *.md ./src/content/**/*.md --ignore './src/content/**/_*.md'",
     "lint:social": "alex . -q",
     "lint:prose": "cp .proselintrc ~/ && proselint src/content",
+    "linkcheck": "hyperlink -r dist/index.html --canonicalroot https://webpack.js.org/ --skip support__ --skip sidecar.gitter.im --skip vimdoc.sourceforge.net --skip img.shields.io --todo external-redirect | tee master.tap | tap-spot",
     "sitemap": "cd dist && sitemap-static --prefix=https://webpack.js.org/ > sitemap.xml",
     "serve": "npm run build && sirv start ./dist --port 4000",
     "deploy": "gh-pages -d dist"
@@ -71,12 +72,12 @@
     "fontgen-loader": "git://github.com/EugeneHlushko/fontgen-loader.git#a26a73843900ca4b518853952b1fc3c816103512",
     "front-matter": "^2.3.0",
     "gh-pages": "^1.0.0",
+    "github": "^10.0.0",
     "html-webpack-plugin": "^2.30.1",
     "html-webpack-template": "^6.1.0",
-    "github": "^10.0.0",
     "http-server": "^0.10.0",
     "husky": "^1.0.0-rc.8",
-    "hyperlink": "^3.0.1",
+    "hyperlink": "github:Munter/hyperlink#070916d",
     "loader-utils": "^1.1.0",
     "lodash": "^4.17.4",
     "markdownlint": "^0.6.0",
@@ -106,7 +107,7 @@
     "sitemap-static": "^0.4.2",
     "static-site-generator-webpack-plugin": "^3.4.1",
     "style-loader": "^0.18.2",
-    "tap-parser": "^6.0.1",
+    "tap-spot": "^1.1.1",
     "through2": "^2.0.3",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "webpack": "^3.10.0",

src/components/Link/Link.jsx

@@ -11,7 +11,7 @@ export default ({
   if ( url ) to = url;
 
   if ( to.startsWith('http') || to.startsWith('//') )
-    return <a href={ to } target="_blank" { ...props } />;
+    return <a href={ to } target="_blank" rel="noopener" { ...props } />;
 
   else return <Link to={ to } { ...props } />;
 };

src/components/Markdown/Markdown.scss

@@ -26,7 +26,7 @@
       color: inherit;
     }
 
-    a {
+    a[aria-hidden="true"] {
       margin-left: 8px;
       font-size: 0.8em;
       height: 1em;
@@ -35,7 +35,7 @@
       transition: all 250ms;
     }
 
-    &:hover a {
+    &:hover a[aria-hidden="true"] {
       opacity: 1;
       visibility: visible;
     }

src/components/Navigation/Navigation.jsx

@@ -46,7 +46,7 @@ export default class Navigation extends React.Component {
                 className="navigation__languages"
                 items={[
                   { title: 'English', url: 'https://webpack.js.org/' },
-                  { lang: 'zh', title: '中文', url: 'https://doc.webpack-china.org/' }
+                  { lang: 'zh', title: '中文', url: 'https://webpack.docschina.org/' }
                 ]} />
             )
           }

src/components/NotificationBar/NotificationBar.jsx

@@ -20,7 +20,7 @@ class MessageBar extends React.Component {
         <Container className="notification-bar__inner">
           <p>
             Sponsor webpack and get apparel from the <a href="https://webpack.threadless.com">official shop</a> or get
-            stickers <a href="http://www.unixstickers.com/tag/webpack">here</a>! All proceeds go to our{' '}
+            stickers <a href="https://www.unixstickers.com/tag/webpack">here</a>! All proceeds go to our{' '}
             <a href="https://opencollective.com/webpack">open collective</a>!
           </p>
           {localStorageIsEnabled ? (

src/components/Organization/Organization.jsx

@@ -8,7 +8,7 @@ import './Organization.scss';
 
 const Organization = props => {
   return (
-    <Container className="organization page__content">
+    <Container className="organization page__content markdown">
       <h1>The Organization</h1>
 
       <p>The list below provides a brief overview of all commonly used projects in the webpack ecosystem.</p>

src/components/Organization/Organization.scss

@@ -3,6 +3,10 @@
 
 .organization {
   padding: 1.5em;
+
+  &__title > h4 {
+    margin-top: 0; // Overrides markdown scss
+  }
 }
 
 .organization__projects {

src/components/PageLinks/PageLinks.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import TrimEnd from 'lodash/trimEnd';
+import Url from 'url';
 import './PageLinks.scss';
 
+const baseURL = 'https://github.com/webpack/webpack.js.org/edit/master/';
+
 export default ({
   page = {},
   ...props
 }) => {
-  let baseURL = 'https://github.com/webpack/webpack.js.org/edit/master/src/content';
-  let indexPath = page.type === 'index' ? '/index' : '';
-  let mainPath = page.url.startsWith('/') ? page.url : `/${page.url}`;
-  let editLink = page.edit || baseURL + TrimEnd(mainPath, '/') + indexPath + '.md';
+  const editLink = page.edit || Url.resolve(baseURL, page.path);
 
   // TODO: Make sure we add `repo` / `edit` and address `type` (above)
   return (

src/components/SidebarItem/SidebarItem.jsx

@@ -89,6 +89,10 @@ export default class SidebarItem extends React.Component {
     if ( `/${currentPage}` === url ) {
       return `#${anchor.id}`;
 
-    } else return `${url}#${anchor.id}`;
+    } else if (!anchor.id) {
+      return url;
+    } else {
+      return `${url}#${anchor.id}`;
+    }
   }
 }

src/components/Site/Site.jsx

@@ -20,6 +20,8 @@ import Footer from '../Footer/Footer';
 import Page from '../Page/Page';
 import Gitter from '../Gitter/Gitter';
 import Vote from '../Vote/Vote';
+import Organization from '../Organization/Organization';
+import StarterKits from '../StarterKits/StarterKits';
 
 // Load Styling
 import '../../styles/index';
@@ -69,6 +71,9 @@ class Site extends React.Component {
             render={props => (
               <Container className="site__content">
                 <Switch>
+                  <Route path="/vote" component={Vote} />
+                  <Route path="/organization" component={Organization} />
+                  <Route path="/starter-kits" component={StarterKits} />
                   {pages.map(page => (
                     <Route
                       key={page.url}
@@ -97,7 +102,6 @@ class Site extends React.Component {
                       }}
                     />
                   ))}
-                  <Route path="/vote" component={Vote} />
                   <Route render={props => '404 Not Found'} />
                 </Switch>
               </Container>

src/components/StarterKits/StarterKits.jsx

@@ -11,7 +11,7 @@ import './StarterKits.scss';
 // to allow sorting and such.
 
 const StarterKits = props => (
-  <Container className="starter-kits page__content">
+  <Container className="starter-kits page__content markdown">
     <h1>Starter Kits</h1>
 
     <p>

src/components/Vote/Vote.jsx

@@ -5,7 +5,7 @@ import 'webpack.vote/dist/style.min.css';
 import './Vote.scss';
 
 const Vote = ({ section, page }) => (
-  <Container className="vote">
+  <Container className="vote markdown">
     <VoteApp
       development={ false } />
   </Container>

src/components/Vote/Vote.scss

@@ -3,9 +3,4 @@
 @import 'functions';
 
 .vote {
-  h1, h2, h3, h4, h5, h6 {
-    font-family: $font-stack-heading;
-    font-weight: 600;
-    color: getColor(fiord);
-  }
 }

src/content/concepts/modules.md

@@ -37,10 +37,10 @@ T> webpack 1 requires a specific loader to convert ES2015 `import`, however this
 webpack supports modules written in a variety of languages and preprocessors, via _loaders_. _Loaders_ describe to webpack **how** to process non-JavaScript _modules_ and include these _dependencies_ into your _bundles_.
 The webpack community has built _loaders_ for a wide variety of popular languages and language processors, including:
 
-* [CoffeeScript](http://coffeescript.org)
+* [CoffeeScript](https://coffeescript.org)
 * [TypeScript](https://www.typescriptlang.org)
 * [ESNext (Babel)](https://babeljs.io)
-* [Sass](http://sass-lang.com)
+* [Sass](https://sass-lang.com)
 * [Less](http://lesscss.org)
 * [Stylus](http://stylus-lang.com)
 

src/content/concepts/output.md

@@ -63,7 +63,7 @@ module.exports = {
   //...
   output: {
     path: '/home/proj/cdn/assets/[hash]',
-    publicPath: 'http://cdn.example.com/assets/[hash]/'
+    publicPath: 'https://cdn.example.com/assets/[hash]/'
   }
 };
 ```

src/content/configuration/configuration-languages.md

@@ -16,7 +16,7 @@ webpack accepts configuration files written in multiple programming and data lan
 
 ## TypeScript
 
-To write the webpack configuration in [TypeScript](http://www.typescriptlang.org/), you would first install the necessary dependencies:
+To write the webpack configuration in [TypeScript](https://www.typescriptlang.org/), you would first install the necessary dependencies:
 
 ``` bash
 npm install --save-dev typescript ts-node @types/node @types/webpack
@@ -90,7 +90,7 @@ __package.json__
 
 ## CoffeeScript
 
-Similarly, to use [CoffeeScript](http://coffeescript.org/), you would first install the necessary dependencies:
+Similarly, to use [CoffeeScript](https://coffeescript.org/), you would first install the necessary dependencies:
 
 ``` bash
 npm install --save-dev coffee-script

src/content/configuration/dev-server.md

@@ -978,7 +978,7 @@ webpack-dev-server --socket socket
 
 ## `devServer.staticOptions`
 
-It is possible to configure advanced options for serving static files from `contentBase`. See the [Express documentation](http://expressjs.com/en/4x/api.html#express.static) for the possible options. An example:
+It is possible to configure advanced options for serving static files from `contentBase`. See the [Express documentation](https://expressjs.com/en/4x/api.html#express.static) for the possible options. An example:
 
 ```js
 module.exports = {

src/content/configuration/resolve.md

@@ -388,7 +388,7 @@ T> Note that you can use alias here and other features familiar from resolve. Fo
 
 `array`
 
-The extensions/suffixes which that are used when resolving loaders. Since version two, we [strongly recommend](/guides/migrating#automatic-loader-module-name-extension-removed) using the full name, e.g. `example-loader`, as much as possible for clarity. However, if you really wanted to exclude the `-loader` bit, i.e. just use `example`, you can use this option to do so:
+The extensions/suffixes which that are used when resolving loaders. Since version two, we [strongly recommend](/migrate/3#automatic--loader-module-name-extension-removed) using the full name, e.g. `example-loader`, as much as possible for clarity. However, if you really wanted to exclude the `-loader` bit, i.e. just use `example`, you can use this option to do so:
 
 ```js
 module.exports = {

src/content/guides/getting-started.md

@@ -208,7 +208,7 @@ Open `index.html` in your browser and, if everything went right, you should see
 
 ## Modules
 
-The [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statements have been standardized in [ES2015](https://babeljs.io/learn-es2015/). Although they are not supported in most browsers yet, webpack does support them out of the box.
+The [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) statements have been standardized in [ES2015](https://babeljs.io/docs/en/learn/). Although they are not supported in most browsers yet, webpack does support them out of the box.
 
 Behind the scenes, webpack actually "transpiles" the code so that older browsers can also run it. If you inspect `dist/main.js`, you might be able to see how webpack does this, it's quite ingenious! Besides `import` and `export`, webpack supports various other module syntaxes as well, see [Module API](/api/module-methods) for more information.
 

src/content/guides/integrations.md

@@ -8,7 +8,7 @@ contributors:
   - skipjack
 ---
 
-Let's start by clearing up a common misconception. webpack is a module bundler like [Browserify](http://browserify.org/) or [Brunch](http://brunch.io/). It is _not a task runner_ like [Make](https://www.gnu.org/software/make/), [Grunt](https://gruntjs.com/), or [Gulp](https://gulpjs.com/). Task runners handle automation of common development tasks such as linting, building, or testing your project. Compared to bundlers, task runners have a higher level focus. You can still benefit from their higher level tooling while leaving the problem of bundling to webpack.
+Let's start by clearing up a common misconception. webpack is a module bundler like [Browserify](http://browserify.org/) or [Brunch](https://brunch.io/). It is _not a task runner_ like [Make](https://www.gnu.org/software/make/), [Grunt](https://gruntjs.com/), or [Gulp](https://gulpjs.com/). Task runners handle automation of common development tasks such as linting, building, or testing your project. Compared to bundlers, task runners have a higher level focus. You can still benefit from their higher level tooling while leaving the problem of bundling to webpack.
 
 Bundlers help you get your JavaScript and stylesheets ready for deployment, transforming them into a format that's suitable for the browser. For example, JavaScript can be [minified](/plugins/uglifyjs-webpack-plugin) or [split into chunks](/guides/code-splitting) and [lazy-loaded](/guides/lazy-loading) to improve performance. Bundling is one of the most important challenges in web development, and solving it well can remove a lot of pain from the process.
 
@@ -96,7 +96,7 @@ For more information, please visit the [repository](https://github.com/zinserjan
 
 ## Karma
 
-The [`karma-webpack`](https://github.com/webpack-contrib/karma-webpack) package allows you to use webpack to pre-process files in [Karma](http://karma-runner.github.io/1.0/index.html). It also makes use of [`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware) and allows passing configurations for both. A simple example may look something like this:
+The [`karma-webpack`](https://github.com/webpack-contrib/karma-webpack) package allows you to use webpack to pre-process files in [Karma](https://karma-runner.github.io/1.0/index.html). It also makes use of [`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware) and allows passing configurations for both. A simple example may look something like this:
 
 ``` bash
 npm install --save-dev webpack karma karma-webpack

src/content/guides/typescript.md

@@ -153,7 +153,7 @@ See the [devtool documentation](/configuration/devtool/) for more information.
 
 ## Using Third Party Libraries
 
-When installing third party libraries from npm, it is important to remember to install the typing definition for that library. These definitions can be found at [TypeSearch](http://microsoft.github.io/TypeSearch/).
+When installing third party libraries from npm, it is important to remember to install the typing definition for that library. These definitions can be found at [TypeSearch](https://microsoft.github.io/TypeSearch/).
 
 For example if we want to install lodash we can run the following command to get the typings for it:
 

src/content/plugins/define-plugin.md

@@ -93,6 +93,6 @@ Use a different service URL in production/development builds:
 
 ```javascript
 new webpack.DefinePlugin({
-  'SERVICE_URL': JSON.stringify('http://dev.example.com')
+  'SERVICE_URL': JSON.stringify('https://dev.example.com')
 });
 ```

src/content/plugins/source-map-dev-tool-plugin.md

@@ -64,7 +64,7 @@ Set a URL for source maps. Useful for hosting them on a host that requires autho
 
 ```js
 new webpack.SourceMapDevToolPlugin({
-  append: '\n//# sourceMappingURL=http://example.com/sourcemap/[url]',
+  append: '\n//# sourceMappingURL=https://example.com/sourcemap/[url]',
   filename: '[name].map'
 });
 ```

src/index.jsx

@@ -24,7 +24,7 @@ if (isClient) {
   let { pathname } = window.location;
   let trimmed = pathname.replace(/(.+)\/$/, '$1');
   let entryPage = findInContent(Content, item => item.url === trimmed);
-  let entryPath = entryPage.path.replace('src/content/', '');
+  let entryPath = entryPage && entryPage.path.replace('src/content/', '');
 
   import(`./content/${entryPath}`).then(entryModule => {
     render((

src/utilities/fetch-package-files.js

@@ -79,7 +79,7 @@ function fetchPackageFiles(options, cb) {
       .then(body => {
         // modify README to fit page structure in site
         if (body && file === 'README.md') {
-          body = processReadme(body);
+          body = processReadme(body, { source: url });
         }
 
         let title = pkg.name;

src/utilities/process-readme.js

@@ -1,4 +1,6 @@
-module.exports = function processREADME(body) {
+const url = require('url');
+
+module.exports = function processREADME(body, options = {}) {
   return body
     .replace(/[^]*?<div align="center">([^]*?)<\/div>/, (match, content) => {
       let parsed = content.match(/<p>([^]*?)<\/?p>/);
@@ -8,6 +10,10 @@ module.exports = function processREADME(body) {
     .replace(/<h1.*?>.+?<\/h1>/, '')
     .replace(/# .+/, '')
     .replace(/.*\n=+/, '')
+    // Replace local github links with absolute links to the github location
+    // EXAMPLE: [Contributing](./.github/CONTRIBUTING.md)
+    // EXAMPLE: [Contributing](CONTRIBUTING.md)
+    .replace(/\[([^\]]*)\]\(([^)]+)\)/g, (markdownLink, content, href) => `[${content}](${url.resolve(options.source, href)})`)
     // Modify links to keep them within the site
     .replace(/https?:\/\/github.com\/(webpack|webpack-contrib)\/([-A-za-z0-9]+-loader\/?)([)"])/g, '/loaders/$2/$3')
     .replace(/https?:\/\/github.com\/(webpack|webpack-contrib)\/([-A-za-z0-9]+-plugin\/?)([)"])/g, '/plugins/$2/$3')

webpack.prod.js

@@ -12,7 +12,12 @@ const contentTree = require('./src/_content.json');
 const common = require('./webpack.common.js');
 
 // content tree to path array
-const paths = flattenContentTree(contentTree);
+const paths = [
+  ...flattenContentTree(contentTree),
+  '/vote',
+  '/organization',
+  '/starter-kits'
+];
 
 // Prod only config
 const prod = {