hhy5277 / fiddly

Create beautiful and simple HTML pages from your Readme.md files

Fiddly

Create beautiful and simple HTML pages from your Readme.md files

• 🛠 No config
• 👩‍💻 Code Highlighting
• 💯Emoji Support
• ✨Creates Static files (only JS is prism)
• 🏳️‍🌈 Pretty Pages
• 🦄 Customizable
• 🇳🇱 CodeSandbox and iframe Support

yarn add fiddly --dev

npm install fiddly --save-dev

Usage

{
  ...
  "scripts": {
    "build:demo": "fiddly",
    ....
  }

Deploy automatically to netlify 🎉

This Readme on Netlify

This Readme with white theme

Usage with npx

If you just want a quick fancy HTML page from the Readme but don't care about running this in continuous deployment you can also use npx to run it as a one time thing.

  npx fiddly

By running this in the root folder you will also get a public folder

Options

Options are placed in a .fiddly.config.json or as a "fiddly" key in package.json and it contains the following options:

Option	Default	Description
file	Readme.md, readme.md, or README.md	Your Readme.md name
name	name in package.json	The project name that is in the title and the header
logo	''	The project logo that is in the header
description	description in package.json	The project description for metaTags
noHeader	false	Show no header and just the markdown content
darkTheme	false	Dark theme ofc 🎉
favicon	''	Favicon url or local path
dist	public	To what folder to render your HTML
styles	{}	Styles to apply to the page. Object or path to css/scss file
additionalFiles	[]	Any other pages to create. It expects an array of paths of markdown files

Example of styles

For styles you can either use a style object like so and that will override the default styles applied. Like so:

{
  "styles": {
    "h1": {
      "color": "blue",
      "backgroundColor": "red"
    }
  }
}

Another option is to give the path to a local css or scss file that will be the last one added. In this case you need to override any specificity issues. You cab by using the #fiddly id. Example:

body {
  background: #fff;
}

#fiddly {
  h1 {
    text-transform: uppercase;
  }
}

HTML in Markdown

If you have any HTML in your markdown that has children that are markdown, for example a div like this:

<div align="center">
  [![Hello](./image)](https://link.url)
</div>

In order for fiddly to render the inner contents as markdown you will need to add data-markdown="1" to the surrounding element like so:

<div align="center" data-markdown="1">
  [![Hello](./image)](https://link.url)
</div>

This is not needed for anything without children like images or <br> tags.

You can see the issue regarding showdown here

Images

Any images linked in your markdown that are local will be copied to your public folder. If some image is not found it will be ignored.

Github Corner

The Github corner comes from the repository url in your package.json. If none is present it will not be shown.

TODO

• Deploy using magic to GH Pages too
• Support Multiple pages (if this exists in the config create several HTML files with a header and links to each page)
• Allow users to input a css file to override the styles instead of all the styles in a json
• Use sass so that the user can use sass too
• Make All Contributors look nice
• Allow option to change prism theme
• Optimize images on copy
• Have tests with cypress to make sure page looks okay
• Have more tests and find way to mock the input file in it

Acknowledgements

• Base styles from medium.css
• Logo from OpenMoji

Contributors

Sara Vieira 💻 🎨 🤔	Bruno Scheufler 💻	Siddharth Kshetrapal 💻	Jamon Holmgren 💻	Timothy 💻

License

MIT - see LICENSE