Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SaraVieira/fiddly
Create beautiful and simple HTML pages from your Readme.md files
https://github.com/SaraVieira/fiddly
Last synced: about 2 months ago
JSON representation
Create beautiful and simple HTML pages from your Readme.md files
- Host: GitHub
- URL: https://github.com/SaraVieira/fiddly
- Owner: SaraVieira
- License: mit
- Created: 2018-12-23T20:40:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-04T19:09:36.000Z (over 1 year ago)
- Last Synced: 2024-10-15T23:43:20.961Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://fiddly.netlify.com
- Size: 915 KB
- Stars: 1,011
- Watchers: 12
- Forks: 39
- Open Issues: 5
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - fiddly - Create beautiful and simple HTML pages from your Readme.md files (JavaScript)
README
# 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
- 🖼 Image minification
- 🧠 Custom Meta Tags
- 🇳🇱 [CodeSandbox](https://codesandbox.io) and iframe Support
```bash
yarn add fiddly --dev
```
```bash
npm install fiddly --save-dev
```
## Usage
```json
{
...
"scripts": {
"build:demo": "fiddly",
....
}
```
Deploy automatically to netlify 🎉
[This Readme on Netlify](https://fiddly.netlify.com/)
[This Readme with white theme](https://5c2678b67b891f18dc5a2a42--fiddly.netlify.com/)
## 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.
```bash
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`.
It can contain 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 |
| shareCard | '' | URL to social media preview image for meta tags (recommended size: 1200x628, URL cannot be relative) |
| description | description in package.json | The project description for meta tags |
| homepage | null | The project homepage for meta tags |
| 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 |
| repo | null | Link to point the github corner |
| pathPrefix | Environment var PATH_PREFIX or '/' | Host your fiddly files at e.g. /my-fiddly-project |
| meta | [] | Any extra meta tags you would like |
| remoteStyles | [] | Array of any remote styles you want to include (eg: Google Fonts) |
| remoteScripts | [] | Array of any remote scripts you want to include (eg: Google Analytics) |
| deployment | {} | Deployment options for github pages. Accepts all options [here](https://github.com/tschaub/gh-pages#options) |
### Example of styles
For styles you can either use a style object like so and that will override the
default styles applied. Like so:
```json
{
"styles": {
"h1": {
"color": "blue",
"backgroundColor": "red"
}
}
}
```
Another option is to give the path to a local css or scss file.
In this case you need to override any specificity issues.
You can by using the `#fiddly` id.
Example:
```css
body {
background: #fff;
}
#fiddly {
h1 {
text-transform: uppercase;
}
}
```
## Meta Tags
To create any meta tags it uses an array system like so:
```json
"meta": [
{ "name": "description", "content": "A cool page" },
{ "property": "robots", "content": "robots.txt" }
]
```
This will create the following HTML:
```html
```
The first key on the object can have any name and will be applied as presented, the second one must have the name of content and will work as presented above.
## Images
Any images linked in your markdown that are local will be minified and copied to your dist folder.
If some image is not found it will be ignored.
## GitHub Corner
The GitHub corner comes from either the `repo` option in your `.fiddly.config.json`
or from the repository url in your `package.json`.
If none is present it will not be shown.
## Lint
Fiddly also exports a command to let you lint all the markdown files you specified.
You can run this by using the `lint` command
```json
"lint:md" : "fiddly lint"
```
## Deploy
Fiddly also exports a command to let you deploy your new site to GitHub pages
You can run this by using the `deploy` command
```json
"deploy" : "fiddly deploy"
```
Options for this can be passed in a `deployment` key in your config file.
All options can be found here: [https://github.com/tschaub/gh-pages#options](https://github.com/tschaub/gh-pages#options)
## Acknowledgements
- Base styles from [medium.css](https://github.com/lucagez/medium.css)
- Logo from [OpenMoji](http://www.openmoji.org/library.html?search=beautiful&emoji=2728)
## Contributors
| [
Sara Vieira](http://iamsaravieira.com)
[💻](https://github.com/SaraVieira/fiddly/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [
Bruno Scheufler](https://brunoscheufler.com)
[💻](https://github.com/SaraVieira/fiddly/commits?author=BrunoScheufler "Code") | [
Siddharth Kshetrapal](https://sid.studio)
[💻](https://github.com/SaraVieira/fiddly/commits?author=siddharthkp "Code") | [
Jamon Holmgren](https://jamonholmgren.com)
[💻](https://github.com/SaraVieira/fiddly/commits?author=jamonholmgren "Code") | [
Timothy](http://timothy.is)
[💻](https://github.com/SaraVieira/fiddly/commits?author=timothyis "Code") | [
Andrew Cherniavskii](https://github.com/cherniavskii)
[💻](https://github.com/SaraVieira/fiddly/commits?author=cherniavskii "Code") | [
timkolberger](https://github.com/TimKolberger)
[💻](https://github.com/SaraVieira/fiddly/commits?author=TimKolberger "Code") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
## License
MIT - see [LICENSE](https://github.com/SaraVieira/fiddly/blob/master/LICENSE.md)