From 1b7286a7d5213962ca9ce7c05dccded91d1ff6ef Mon Sep 17 00:00:00 2001 From: Tom Raithel Date: Wed, 5 Apr 2017 09:06:18 +0200 Subject: [PATCH] Add formatter for code block - fixes #2 --- common/radar.js | 16 ++++++++++------ package.json | 1 + radar/2017-03-01/hal-hateoas.md | 17 +++++++---------- react/index.js | 0 styles/components/hljs.css | 2 ++ styles/components/markdown.css | 2 ++ tasks/build.js | 12 +----------- yarn.lock | 4 ++++ 8 files changed, 27 insertions(+), 27 deletions(-) delete mode 100644 react/index.js create mode 100644 styles/components/hljs.css diff --git a/common/radar.js b/common/radar.js index 6813b24..4b52966 100644 --- a/common/radar.js +++ b/common/radar.js @@ -2,12 +2,16 @@ import fs, { readFile, outputFile } from 'fs-extra'; import path from 'path'; import frontmatter from 'front-matter'; import marked from 'marked'; +import hljs from 'highlight.js'; import { radarPath, - distPath, getAllMarkdownFiles, } from './file'; +marked.setOptions({ + highlight: (code) => hljs.highlightAuto(code).value, +}); + export const createRadar = async (tree) => { const fileNames = (await getAllMarkdownFiles(radarPath())); const revisions = await createRevisionsFromFiles(fileNames); @@ -31,7 +35,7 @@ const checkAttributes = (fileName, attributes) => { if (attributes.quadrant && !quadrants.includes(attributes.quadrant)) { throw new Error(`Error: ${fileName} has an illegal value for 'quadrant' - must be one of ${quadrants}`); } -} +}; const createRevisionsFromFiles = (fileNames) => ( Promise.all(fileNames.map((fileName) => { @@ -52,7 +56,7 @@ const createRevisionsFromFiles = (fileNames) => ( }); }) })) -) +); const itemInfoFromFilename = (fileName) => { const [ @@ -72,7 +76,7 @@ const getAllReleases = (revisions) => ( } return allReleases; }, []).sort() -) +); // const createQuadrants = (revisions) => ( // revisions.reduce((quadrants, revision) => { @@ -104,7 +108,7 @@ const createItems = (revisions) => { return Object .values(itemMap) .sort((x, y) => (x.name > y.name ? 1 : -1)); -} +}; const addRevisionToItem = (item = { attributes: { @@ -152,4 +156,4 @@ const flagWithIsNew = (items, allReleases) => ( const isNewItem = (item, allReleases) => { return item.revisions.length > 1 && item.revisions[0].release === allReleases[allReleases.length-1] -} +}; diff --git a/package.json b/package.json index 6565873..a8a2f2b 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "css-mqpacker": "^5.0.1", "front-matter": "2.1.2", "fs-extra": "2.0.0", + "highlight.js": "9.10.0", "history": "4.5.1", "live-server": "1.2.0", "marked": "0.3.6", diff --git a/radar/2017-03-01/hal-hateoas.md b/radar/2017-03-01/hal-hateoas.md index df97423..cb718a3 100644 --- a/radar/2017-03-01/hal-hateoas.md +++ b/radar/2017-03-01/hal-hateoas.md @@ -8,16 +8,13 @@ Hypermedia As The Engine Of Application State or in short HATEOAS is a pattern t Let's assume we have a bank account and an action to deposit money on that account. Everything you need to know is that the account resource has an action for a deposit. The URL of that action can then fetched from the link attribute with the corresponding relation. -`` - -` 12345` - -` -25.00` - -` ` - -`` - +``` + + 12345 + -25.00 + + +``` Besides from HATEOAS there is an alternative implementation called Hypertext Application Language, in short HAL, which has much more features than the basic HATEOAS. diff --git a/react/index.js b/react/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/styles/components/hljs.css b/styles/components/hljs.css new file mode 100644 index 0000000..f7c11ee --- /dev/null +++ b/styles/components/hljs.css @@ -0,0 +1,2 @@ +/* copied from here: http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/darcula.min.css*/ +.hljs{display:block;overflow-x:auto;padding:0.5em;background:#2b2b2b}.hljs{color:#bababa}.hljs-strong,.hljs-emphasis{color:#a8a8a2}.hljs-bullet,.hljs-quote,.hljs-link,.hljs-number,.hljs-regexp,.hljs-literal{color:#6896ba}.hljs-code,.hljs-selector-class{color:#a6e22e}.hljs-emphasis{font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-attribute,.hljs-name,.hljs-variable{color:#cb7832}.hljs-params{color:#b9b9b9}.hljs-string{color:#6a8759}.hljs-subst,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-symbol,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-template-tag,.hljs-template-variable,.hljs-addition{color:#e0c46c}.hljs-comment,.hljs-deletion,.hljs-meta{color:#7f7f7f} \ No newline at end of file diff --git a/styles/components/markdown.css b/styles/components/markdown.css index 360861b..8d38b1b 100644 --- a/styles/components/markdown.css +++ b/styles/components/markdown.css @@ -46,6 +46,8 @@ pre { overflow-x: auto; + padding: 10px; + background: var(--color-gray-dark); -webkit-overflow-scrolling: touch; } } diff --git a/tasks/build.js b/tasks/build.js index 7ee7a74..90d8205 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -17,18 +17,8 @@ import { renderPage } from '../js/server'; save(pageHtml, `${pageName}.html`); }); - // pages.map((pageHtml) => { - // save(pageHtml, `${pageName}.html`) - // }); - // console.log(pages); - // outputRadar(radar); - - // const radarByQuadrants = groupByQuadrants(radar); - // createStatic(radar); - console.log('Built radar'); - // console.log(JSON.stringify(radar, null, 2)); } catch(e) { console.error('error:', e); } -})() +})(); diff --git a/yarn.lock b/yarn.lock index 85d725f..e617a09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1763,6 +1763,10 @@ hawk@~3.1.3: hoek "2.x.x" sntp "1.x.x" +highlight.js@9.10.0: + version "9.10.0" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.10.0.tgz#f9f0b14c0be00f0e4fb1e577b749fed9e6f52f55" + history@4.5.1: version "4.5.1" resolved "https://registry.yarnpkg.com/history/-/history-4.5.1.tgz#44935a51021e3b8e67ebac267a35675732aba569"