antwarjs / antwar

A static site generator built with React and Webpack.
https://antwar.js.org/
MIT License
460 stars 35 forks source link

Allow partial references to Markdown #117

Closed bebraw closed 7 years ago

bebraw commented 7 years ago

To quote @webdesserts:

@bebraw I feel in this particular case, since there is only one paragraph per section, there wouldn't be that much of a gain (I do prefer the markdown syntax for anchor links). However, I see why this would be something we would want to solve for antwar users in general.

I think react-in-markdown would work just fine. Another solution might be to have a way to write prose for multiple sections of a page in a single markdown file. So the markdown file might looks like:

---what---

## What?

Antwar is a blog aware static site engine built with React and Webpack.
It's fast, extensible and friendly.

---why---

## Why?

The world needed a site engine that was easy to extend and a pleasure
to work with.

---callToAction---

## Sounds Cool. Can I Try It?

Check out our [getting started][1] guide. If you have questions or
want to check out the code, have a look at the [Github repo][2].

[1]: /docs/getting-started/
[2]: https://github.com/antwarjs/antwar

You could then maybe import those sections separately. Similar to how you would with CSS Modules

const SiteIndex = ({ page }) => (
  <div className={classes.siteIndex}>
    <Hero />
    <article className={classes.introduction}>
      <div className={classes.container}>
        <div className={classes.inform}>
          <section>
            <Markdown page={page.what} />
          </section>
          <section>
             <Markdown page={page.why} />
          </section>
        </div>
      </div>
      <section className={classes.callToAction}>
        <div className={classes.container}>
          <Markdown page={page.callToAction} />
          <div className={classes.actions}>
            <a className={classes.button} href="/docs/getting-started/">Get Started</a>
            <a className={classes.button} href="https://github.com/antwarjs/antwar">View the Source</a>
          </div>
        </div>
      </section>
    </article>
  </div>
);

I think the benefit of markdown is being able to focus on the prose without worrying about the layout and this type of solution might cater to that. Also syntax highlighting and other markdown editor tools would most likely just work (a quick check shows syntax highlighting working in my editor even with the added annotations). This might also work more naturally with third-party themes. The ideal in my mind being that you download/install a theme and then just have to edit a few markdown & config files to make the site yours.

bebraw commented 7 years ago

It's possible to implement this on top of Antwar now. I've done what's needed for images on the official site. The idea is exactly the same here. You just push require through webpack and that's it.