https://github.com/marcloupias/mdfc-map-to-html
static site generator implementation package for md-file-converter
https://github.com/marcloupias/mdfc-map-to-html
markdown-to-html md-file-converter static-site static-site-generation static-site-generator
Last synced: 7 months ago
JSON representation
static site generator implementation package for md-file-converter
- Host: GitHub
- URL: https://github.com/marcloupias/mdfc-map-to-html
- Owner: MarcLoupias
- License: isc
- Created: 2019-02-13T09:30:17.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2022-12-30T17:48:41.000Z (almost 3 years ago)
- Last Synced: 2025-02-26T18:24:19.853Z (7 months ago)
- Topics: markdown-to-html, md-file-converter, static-site, static-site-generation, static-site-generator
- Language: HTML
- Homepage:
- Size: 1.4 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# mdfc-map-to-html
[](https://travis-ci.org/MarcLoupias/mdfc-map-to-html)
[](https://github.com/semantic-release/semantic-release)
[](https://conventionalcommits.org)
[](http://commitizen.github.io/cz-cli/)
[](http://badge.fury.io/js/mdfc-map-to-html)
An implementation package for [md-file-converter](https://www.npmjs.com/package/md-file-converter).
This implementation output super basic `.html` files.
Internals links insides markdown files should point to `.md` files. This impl handle the change to `.html`.
## installation
In the repository containing your markdown documents, add this package to devDependencies :
```bash
npm i -D mdfc-map-to-html
```
## usage
Invoke the CLI with the following :
```bash
node ./node_modules/.bin/mdfc convert 'mdfc-map-to-html' ''
```
`html` files will be created in the same directory as the markdown files.
If you want to create them in another directory you can add a `--dest` option with the destination path, for example :
```bash
node ./node_modules/.bin/mdfc convert 'mdfc-map-to-html' 'tests/actual-files/faq/**/*.md' --dest 'html-output/'
```
but the markdown structure will not be preserved, so be careful of `.md` file naming, each filename must be unique.
### css support
You can define custom css stylesheet injection with [front-matter](https://www.npmjs.com/package/front-matter) in your markdown files.
See [`tests/actual-files/css-support/test-news-with-css.md`](https://github.com/MarcLoupias/mdfc-map-to-html/blob/master/tests/actual-files/css-support/test-news-with-css.md) for example.
The idea is to define the stylesheet values in the front-matter to add it to the generated html during the mapping phase.
Your yaml could look like this :
```yaml
htmlHead:
links:
- href: mobile.css
rel: stylesheet
media: all
- href: print.css
rel: stylesheet
media: print
- href: desktop.css
rel: stylesheet
media: 'screen and (min-width: 600px)'
- href: favicon32.png
rel: icon
- href: favicon72.png
rel: apple-touch-icon-precomposed
sizes: 72x72
```
You can deal with favicon here also.
An `` tag is added to wrap the generated content inside the document ``.
A class name can be added to the `` tag, just add a `containerClass` property to the `htmlHead` property in the yaml like that :
```yaml
htmlHead:
containerClass: 'my-class'
links:
- href: mobile.css
rel: stylesheet
media: all
- href: print.css
rel: stylesheet
media: print
```
### `` support
Like css support, you can define your document `` with [front-matter](https://www.npmjs.com/package/front-matter) in your markdown files.
The html document `` is very important for [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization), choose it carefully.
To specify the `` value, add a title property in the front-matter like this :
```yaml
htmlHead:
title: 'git-sizer publié par GitHub'
```
If you don't, the `` tag value is set with the markdown file basename.
For example if your markdown file is named `my-article.md`, you will get `my-article`.
### `` tags support
Like css support, you can define your document `` with [front-matter](https://www.npmjs.com/package/front-matter) in your markdown files.
The idea is to define the meta tags values in the front-matter to add it to the generated html during the mapping phase.
Your yaml could look like this :
```yaml
htmlHead:
metaTags:
- name: description
content: 'my uber document'
- name: viewport
content: 'width=device-width, initial-scale=1, minimal-ui'
- property: 'og:type'
content: website
- httpEquiv: 'Expires'
content: '0'
```
The html `` tags are very important to manage for :
- [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) (see also [the Open Graph protocol](http://ogp.me/) and [this medium article](https://medium.freecodecamp.org/how-to-avoid-the-shaming-look-your-site-has-on-twitter-and-facebook-f2e8f4be568d))
- [viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) behavior (especially important for mobiles)
- ...
See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) for further information.
### `` tags support
Like css support, you can define your document `<script>` with [front-matter](https://www.npmjs.com/package/front-matter) in your markdown files.
Same as above your yaml could look like this :
```yaml
htmlHead:
scripts:
- src: 'my-script.js'
async: true
- src: 'http://cdn.domain.tld/dependency.js'
defer: true
crossorigin: 'anonymous'
- text: 'document.title = "a new title";'
```
and it will output at the end of `<head>` tag :
```html
<script src="my-script.js" async>document.title = "a new title";
```
See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) for further information.