diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..e217066 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,11 @@ +{ + "extends": "standard", + "globals": { + "test": true, + "expect": true + }, + "rules": { + "space-before-function-paren": 0, + "indent": 0 + } +} diff --git a/.fiddly.config.json b/.fiddly.config.json index fc1101a..047f5cf 100644 --- a/.fiddly.config.json +++ b/.fiddly.config.json @@ -1,6 +1,4 @@ { - "name": "Fiddly", "logo": "https://rawcdn.githack.com/SaraVieira/fiddly/6738c1458270f72effd8126a3090a6e5dbe9a0a6/logo.png", - "description": "Create beautiful and simple HTML pages from your Readme.md files", "darkTheme": true } diff --git a/.gitignore b/.gitignore index c59d503..8e195f1 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ coverage yarn.lock public package.lock +.eslintcache diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..61d3af6 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,14 @@ +{ + "semi": false, + "overrides": [ + { + "files": "*.md", + "options": { + "printWidth": 70, + "useTabs": false, + "trailingComma": "none", + "proseWrap": "never" + } + } + ] +} \ No newline at end of file diff --git a/package.json b/package.json index 7beb0da..879e84e 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,17 @@ { "name": "fiddly", + "description": "Create beautiful and simple HTML pages from your Readme.md files", "version": "0.0.1", - "description": "fiddly CLI", - "private": true, "bin": { "fiddly": "bin/fiddly" }, "scripts": { - "format": "prettier --write **/*.{js,json} && standard --fix", - "lint": "standard", + "format": "prettier --write \"src/**/*.js\"", + "lint": "eslint . --cache --fix", + "pretest": "npm run lint", "test": "jest", + "posttest": "npm run format", "watch": "jest --watch", - "snapupdate": "jest --updateSnapshot", "coverage": "jest --coverage", "build": "./bin/fiddly" }, @@ -33,6 +33,12 @@ "to-css": "^1.2.1" }, "devDependencies": { + "eslint": "^5.11.0", + "eslint-config-standard": "^12.0.0", + "eslint-plugin-import": "^2.14.0", + "eslint-plugin-node": "^8.0.0", + "eslint-plugin-promise": "^4.0.1", + "eslint-plugin-standard": "^4.0.0", "jest": "^23.6.0", "prettier": "^1.12.1", "standard": "^12.0.1" @@ -40,6 +46,10 @@ "jest": { "testEnvironment": "node" }, + "repository": { + "type": "git", + "url": "https://github.com/SaraVieira/fiddly" + }, "standard": { "env": [ "jest" diff --git a/src/cli.js b/src/cli.js index b39b7e8..d5b8dea 100644 --- a/src/cli.js +++ b/src/cli.js @@ -3,7 +3,7 @@ const { build } = require('gluegun') /** * Create the cli and kick it off */ -async function run (argv) { +async function run(argv) { // create a CLI runtime const cli = build() .brand('fiddly') diff --git a/src/commands/css/css.css b/src/commands/css/css.css index 4c023e9..15c8ddb 100644 --- a/src/commands/css/css.css +++ b/src/commands/css/css.css @@ -80,6 +80,10 @@ header { margin: 20px 0; } +header h1 { + text-transform: capitalize; +} + h1 { font-family: "Playfair Display", serif; font-size: 48px; diff --git a/src/commands/fiddly.js b/src/commands/fiddly.js index 5593b54..7988f3f 100644 --- a/src/commands/fiddly.js +++ b/src/commands/fiddly.js @@ -2,6 +2,10 @@ const showdown = require('showdown') var toCss = require('to-css') const CleanCSS = require('clean-css') const createHTML = require('create-html') +const corner = require('../utils/githubCorner') +const capitalize = require('../utils/capitalize') +const fiddlyImports = require('../utils/fiddlyImports.js') +const header = require('../utils/header.js') showdown.extension('header-anchors', function() { var ancTpl = @@ -30,25 +34,16 @@ module.exports = { name: 'fiddly', run: async toolbox => { const { - parameters, - template: { generate }, print: { info, success }, filesystem } = toolbox const options = filesystem.read(`${process.cwd()}/.fiddly.config.json`, 'json') || {} const dist = options.dist || 'public' + const packageJSON = + filesystem.read(`${process.cwd()}/package.json`, 'json') || {} // CSS - - const styleString = style => - Object.entries(style).reduce((styleString, [propName, propValue]) => { - propName = propName.replace( - /([A-Z])/g, - matches => `-${matches[0].toLowerCase()}` - ) - return `${styleString}${propName}:${propValue};` - }, '') const css = filesystem.read(`${__dirname}/css/css.css`).concat( toCss(options.styles, { selector: s => `#fiddly ${s}`, @@ -62,38 +57,25 @@ module.exports = { ) // HTML - const name = options.file || 'Readme' || 'readme' || 'README' - const markdown = filesystem.read(`${process.cwd()}/${name}.md`) - - const header = - options && !options.noHeader - ? `
${options.name ? `

${options.name}

` : ''}${ - options.logo - ? `` - : '' - }
` - : '' + const file = options.file || 'Readme' || 'readme' || 'README' + const markdown = filesystem.read(`${process.cwd()}/${file}.md`) + const description = options.description || packageJSON.description + const name = options.name || packageJSON.name var html = createHTML({ - title: options.name, - css: [ - 'https://rawcdn.githack.com/yegor256/tacit/42137b0c4369dbc6616aef1b286cda5aff467314/tacit-css-1.3.5.min.css', - 'style.css', - 'https://unpkg.com/prismjs@1.15.0/themes/prism.css' - ], + title: capitalize(name), + css: fiddlyImports.css, scriptAsync: true, - script: [ - 'https://unpkg.com/prismjs@1.15.0/prism.js', - 'https://unpkg.com/prismjs@1.15.0/components/prism-json.min.js', - 'https://unpkg.com/prismjs@1.15.0/components/prism-bash.min.js' - ], + script: fiddlyImports.js, lang: 'en', - head: ``, + head: ``, body: `
${header}${converter.makeHtml( + }">
${ + packageJSON.repository + ? corner(packageJSON.repository.url, options.darkTheme) + : '' + }${header(options, name)}${converter.makeHtml( markdown )}
`, favicon: options.favicon || null diff --git a/src/utils/capitalize.js b/src/utils/capitalize.js new file mode 100644 index 0000000..1392b20 --- /dev/null +++ b/src/utils/capitalize.js @@ -0,0 +1 @@ +module.exports = string => string.charAt(0).toUpperCase() + string.slice(1) diff --git a/src/utils/fiddlyImports.js b/src/utils/fiddlyImports.js new file mode 100644 index 0000000..3382b56 --- /dev/null +++ b/src/utils/fiddlyImports.js @@ -0,0 +1,11 @@ +exports.css = [ + 'https://rawcdn.githack.com/yegor256/tacit/42137b0c4369dbc6616aef1b286cda5aff467314/tacit-css-1.3.5.min.css', + 'style.css', + 'https://unpkg.com/prismjs@1.15.0/themes/prism.css' +] + +exports.js = [ + 'https://unpkg.com/prismjs@1.15.0/prism.js', + 'https://unpkg.com/prismjs@1.15.0/components/prism-json.min.js', + 'https://unpkg.com/prismjs@1.15.0/components/prism-bash.min.js' +] diff --git a/src/utils/githubCorner.js b/src/utils/githubCorner.js new file mode 100644 index 0000000..c6eb47e --- /dev/null +++ b/src/utils/githubCorner.js @@ -0,0 +1,8 @@ +module.exports = (url, dark) => { + const corners = { + light: ``, + dark: `` + } + + return dark ? corners.dark : corners.light +} diff --git a/src/utils/header.js b/src/utils/header.js new file mode 100644 index 0000000..59fb77d --- /dev/null +++ b/src/utils/header.js @@ -0,0 +1,9 @@ +module.exports = (options, name) => { + return options && !options.noHeader + ? `
${name ? `

${name}

` : ''}${ + options.logo + ? `` + : '' + }
` + : '' +}