Permalink
Browse files

Add the header hover links feature and add the relevant CSS

  • Loading branch information...
1 parent 618cff2 commit c3d37a2101cef779ed32b5b73e684342888e9e60 @mixu committed May 28, 2015
Showing with 816 additions and 31 deletions.
  1. +2 −1 bin/generate-md
  2. +20 −0 changelog.md
  3. +42 −0 layouts/bootstrap3/assets/css/pilcrow.css
  4. +1 −0 layouts/bootstrap3/page.html
  5. +47 −0 layouts/github/assets/css/pilcrow.css
  6. +1 −0 layouts/github/page.html
  7. +42 −0 layouts/jasonm23-dark/assets/pilcrow.css
  8. +2 −1 layouts/jasonm23-dark/page.html
  9. +42 −0 layouts/jasonm23-foghorn/assets/pilcrow.css
  10. +2 −1 layouts/jasonm23-foghorn/page.html
  11. +42 −0 layouts/jasonm23-markdown/assets/pilcrow.css
  12. +2 −1 layouts/jasonm23-markdown/page.html
  13. +42 −0 layouts/jasonm23-swiss/assets/pilcrow.css
  14. +2 −1 layouts/jasonm23-swiss/page.html
  15. +42 −0 layouts/markedapp-byword/assets/pilcrow.css
  16. +2 −1 layouts/markedapp-byword/page.html
  17. +42 −0 layouts/mixu-book/assets/pilcrow.css
  18. +1 −0 layouts/mixu-book/page.html
  19. +42 −0 layouts/mixu-bootstrap-2col/assets/css/pilcrow.css
  20. +1 −0 layouts/mixu-bootstrap-2col/page.html
  21. +42 −0 layouts/mixu-bootstrap/assets/css/pilcrow.css
  22. +1 −0 layouts/mixu-bootstrap/page.html
  23. +42 −0 layouts/mixu-gray/assets/css/pilcrow.css
  24. +1 −0 layouts/mixu-gray/page.html
  25. +42 −0 layouts/mixu-page/assets/css/pilcrow.css
  26. +2 −2 layouts/mixu-page/page.html
  27. +42 −0 layouts/mixu-radar/assets/css/pilcrow.css
  28. +2 −1 layouts/mixu-radar/page.html
  29. +42 −0 layouts/roryg-ghostwriter/assets/css/pilcrow.css
  30. +1 −0 layouts/roryg-ghostwriter/page.html
  31. +42 −0 layouts/thomasf-solarizedcssdark/assets/pilcrow.css
  32. +2 −1 layouts/thomasf-solarizedcssdark/page.html
  33. +42 −0 layouts/thomasf-solarizedcsslight/assets/pilcrow.css
  34. +2 −1 layouts/thomasf-solarizedcsslight/page.html
  35. +42 −0 layouts/witex/assets/css/pilcrow.css
  36. +2 −1 layouts/witex/page.html
  37. +23 −1 lib/pipeline.js
  38. +2 −2 package.json
  39. +23 −16 readme.md
View
@@ -8,13 +8,14 @@ var fs = require('fs'),
opts.options({
'layouts': { },
'help': { },
+ 'header-links': { 'default': true },
'layout': { },
'input': { },
'output': { },
'v': { },
'version': { }
})
- .boolean('layouts').boolean('help').boolean('v').boolean('version');
+ .boolean('layouts').boolean('help').boolean('v').boolean('version').boolean('header-links');
var argv = opts.parse(process.argv);
View
@@ -0,0 +1,20 @@
+## Changes in 2.3:
+
+- Added the new header hover links feature, along with the relevant CSS for each built in layout.
+- Added the `--no-header-links` flag.
+
+## Changes in 2.2:
+
+- Added support for Windows, thanks @AaronJan
+
+## Changes in 2.1:
+
+- Better single file handling, previously the output path was a bit wonky if you only had one file as the `--input` target.
+
+## Changes in 2.0:
+
+- `v2.0` is a major rewrite, with significant usability improvements; the core has been rewritten to use object mode streams via [pipe-iterators](https://github.com/mixu/pipe-iterators).
+- Deprecated `--command`, `{{styles}}`, `--template`, `--asset-dir`, `--partials`, `--helpers`, `--runner`. Most of this functionality can be easily replicated much more cleanly with the new features.
+- Improved highlighter support. Every built in layout now includes a default highlight.js CSS stylesheet and you no longer need to add extra CLI options to enable highlighting.
+- Layout partials and helpers have been renamed: `{{content}}` -> `{{> content}}`, `{{toc}}` -> `{{> toc}}`, `{{assetsRelative}}` -> `{{asset 'path'}}`
+- The default layout is now `github`, which looks a lot like Github readmes.
@@ -0,0 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+}
+
+h1:hover .header-link:before,
+h2:hover .header-link:before,
+h3:hover .header-link:before,
+h4:hover .header-link:before,
+h5:hover .header-link:before,
+h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+h1:hover .header-link,
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
@@ -4,6 +4,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{{title}}</title>
<link type="text/css" rel="stylesheet" href="{{asset 'css/bootstrap.min.css'}}"/>
+ <link type="text/css" rel="stylesheet" href="{{asset 'css/pilcrow.css'}}"/>
<link type="text/css" rel="stylesheet" href="{{asset 'css/hljs-github.min.css'}}"/>
</head>
<body>
@@ -0,0 +1,47 @@
+/* needed because the container has overflow: hidden, but the pilcrows overflow */
+.markdown-body {
+ padding-left: 30px;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+ position: relative;
+}
+
+.markdown-body h1:hover .header-link:before,
+.markdown-body h2:hover .header-link:before,
+.markdown-body h3:hover .header-link:before,
+.markdown-body h4:hover .header-link:before,
+.markdown-body h5:hover .header-link:before,
+.markdown-body h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.markdown-body .header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+.markdown-body h1:hover .header-link,
+.markdown-body h2:hover .header-link,
+.markdown-body h3:hover .header-link,
+.markdown-body h4:hover .header-link,
+.markdown-body h5:hover .header-link,
+.markdown-body h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>{{title}}</title>
<link type="text/css" rel="stylesheet" href="{{asset 'css/github-markdown.css'}}">
+ <link type="text/css" rel="stylesheet" href="{{asset 'css/pilcrow.css'}}">
<link type="text/css" rel="stylesheet" href="{{asset 'css/hljs-github.min.css'}}"/>
<style>
body {
@@ -0,0 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+}
+
+h1:hover .header-link:before,
+h2:hover .header-link:before,
+h3:hover .header-link:before,
+h4:hover .header-link:before,
+h5:hover .header-link:before,
+h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+h1:hover .header-link,
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
@@ -3,7 +3,8 @@
<head>
<title>{{title}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link href="{{asset 'style.css'}}" rel="stylesheet"></link>
+ <link type="text/css" rel="stylesheet" href="{{asset 'style.css'}}" />
+ <link type="text/css" rel="stylesheet" href="{{asset 'pilcrow.css'}}" />
<link type="text/css" rel="stylesheet" href="{{asset 'hljs-github.min.css'}}"/>
</head>
<body>
@@ -0,0 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+}
+
+h1:hover .header-link:before,
+h2:hover .header-link:before,
+h3:hover .header-link:before,
+h4:hover .header-link:before,
+h5:hover .header-link:before,
+h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+h1:hover .header-link,
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
@@ -3,7 +3,8 @@
<head>
<title>{{title}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link href="{{asset 'style.css'}}" rel="stylesheet"></link>
+ <link type="text/css" rel="stylesheet" href="{{asset 'style.css'}}" />
+ <link type="text/css" rel="stylesheet" href="{{asset 'pilcrow.css'}}" />
<link type="text/css" rel="stylesheet" href="{{asset 'hljs-github.min.css'}}"/>
</head>
<body>
@@ -0,0 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+}
+
+h1:hover .header-link:before,
+h2:hover .header-link:before,
+h3:hover .header-link:before,
+h4:hover .header-link:before,
+h5:hover .header-link:before,
+h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+h1:hover .header-link,
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
@@ -3,7 +3,8 @@
<head>
<title>{{title}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link href="{{asset 'style.css'}}" rel="stylesheet"></link>
+ <link type="text/css" rel="stylesheet" href="{{asset 'style.css'}}" />
+ <link type="text/css" rel="stylesheet" href="{{asset 'pilcrow.css'}}" />
<link type="text/css" rel="stylesheet" href="{{asset 'hljs-github.min.css'}}"/>
</head>
<body>
@@ -0,0 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+}
+
+h1:hover .header-link:before,
+h2:hover .header-link:before,
+h3:hover .header-link:before,
+h4:hover .header-link:before,
+h5:hover .header-link:before,
+h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+h1:hover .header-link,
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
@@ -3,7 +3,8 @@
<head>
<title>{{title}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link href="{{asset 'style.css'}}" rel="stylesheet"></link>
+ <link type="text/css" rel="stylesheet" href="{{asset 'style.css'}}" />
+ <link type="text/css" rel="stylesheet" href="{{asset 'pilcrow.css'}}" />
<link type="text/css" rel="stylesheet" href="{{asset 'hljs-github.min.css'}}"/>
</head>
<body>
@@ -0,0 +1,42 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ position: relative;
+}
+
+h1:hover .header-link:before,
+h2:hover .header-link:before,
+h3:hover .header-link:before,
+h4:hover .header-link:before,
+h5:hover .header-link:before,
+h6:hover .header-link:before {
+ content: "\00B6";/* pilcrow */
+ color: #888;
+ font-size: smaller;
+}
+
+.header-link {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+
+ position: absolute;
+ top: 0;
+ left: -0.7em;
+ display: block;
+ padding-right: 1em;
+}
+
+h1:hover .header-link,
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+ display: inline-block;
+ text-decoration: none;
+}
Oops, something went wrong.

0 comments on commit c3d37a2

Please sign in to comment.