search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.5k stars 2.27k forks source link

Markdown Support #2274

Closed LandonSchropp closed 5 years ago

LandonSchropp commented 6 years ago

🙋 Feature Request

I'd love to see markdown added to Parcel.

🤔 Expected Behavior

Ideally, I could create files with a .md extension, run parcel serve source/posts/*.md and I'd be done.

I'd also expect to be able to specify some kind of layout file for my Markdown. Most static site generators I've seen use front matter for this:

---
layout: ../layouts/layout.html
tags: awesome, blog
date: 2018-11-10
---

# My Awesome Blog Post

...

😯 Current Behavior

Currently, this doesn't seem to be supported in Parcel core. There are two plugins, parcel-plugin-markdown and parcel-plugin-md, but they don't really work how I'd expect them to.

💁 Possible Solution

I think it makes a ton of sense to add markdown support to Parcel directly.

🔦 Context

I really want to build a small static blog with Parcel. However, without Markdown support, this is extremely hard to do. Creating blogs that can be hosted on places like GitHub pages is very handy, and will be even more so once GitHub Actions launches to the public.

💻 Examples

The Parcel website repository uses a different generator to handle its Markdown.

kirillrogovoy commented 5 years ago

Hi,

I think it's a cool idea for Parcel to treat Markdown files as entry points.

It could compile Markdown into HTML and then do whatever it does to HTML. I think it's not going to be hard to implement.

However, you mentioned layouts and front matter. In my opinion, Parcel shouldn't invent its own templating system for Markdown, so we'd have to use an existing solution.

@LandonSchropp Can you think of an existing tool that already does that — wraps a compiled Markdown file into an HTML template and forwards the attributes from the front matter to that template?

@DeMoorJasper If such a tool as described above existed and seemed to be actively maintained, so you think it's a good idea to build it into Parcel?

kirillrogovoy commented 5 years ago

I couldn't find something like that by myself. 🤷‍♂️

Maybe we could indeed use a templating language like Pug or Mustache. With Mustache, a layout would look like this:

<html>
  <head>
    <title>{{title}}</title>
  </head>
  <body>
    <div class="blog-post">
      {{{markdown_content}}}
    </div>
  </body>
</html>

Markdown file:

---
title: "How to be"
layout: "./layout.html"
---

regular *markdown* here
LandonSchropp commented 5 years ago

@kirillrogovoy Sorry, I missed your previous question. I don't know of any tools that do this currently with Parcel. Outside of Parcel, it's pretty common in the static site generator world.

Here's an example from Jekyll and here's one from Middleman.

In my current project, I use Gulp to extract the front matter, compile the markdown to HTML, inject the template and then recompile in the templating language.

gulp.src('source/html/posts/*', { base: 'source/html/' })
  .pipe(plumber())
  .pipe(frontMatter({ property: 'data', remove: true }))
  .pipe(data(file => ({
    ...file.data,
    date: new Date(file.path.match(/(\d{4}-\d{2}-\d{2})/)[1])
  })))
  .pipe(rename(path => path.basename = path.basename.replace(/(\d{4}-\d{2}-\d{2})-/, '')))
  .pipe(markdown())
  .pipe(header("{% extends 'layouts/post.njk' %}{% block article %}"))
  .pipe(footer("{% endblock %}"))  
  .pipe(nunjucksRender({ path: [ "source/html" ] }))
  .pipe(gulp.dest('build'))
kirillrogovoy commented 5 years ago

I see.

I'm going to hack together some experimental version of that keeping it as simple as possible.

mischnic commented 5 years ago

Markdown support was added by https://github.com/parcel-bundler/parcel/pull/2538 in version 1.12.0. If you want to see some other feature (like front-matter) to be supported, please open a dedicated issue.