antwarjs / antwar

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

Figure out how to integrate JavaScript #71

Closed bebraw closed 7 years ago

bebraw commented 9 years ago

I would love to develop a nice looking site for reactabular on top of Antwar. For this to happen, though, we would need some nice way to implement those interactive React bits. I'm not sure of an exact design yet. Maybe we could start with Markdown and hooks. Something like this:

> ## Demonstration
> The demo below shows basic features of Reactabular. Besides usual pagination, sorting and filtering by search it is possible to modify various fields by clicking them. In addition you may edit rows by hitting the arrow at the end of each. `x` will remove the row in question.
> ...

<include: full_table.jsx>

...

More text

...

In practice the content would go to multiple pages. At minimum I'm going to need some sort of injection mechanism for this to work.

pe3 commented 9 years ago

Do you mean embedding React-widgets by writing "react-literals" in the middle of md-files? It would be great if one could also give parameters for the widget throught the md-file.

bebraw commented 9 years ago

Do you mean embedding React-widgets by writing "react-literals" in the middle of md-files? It would be great if one could also give parameters for the widget throught the md-file.

Yeah. An include would inject a DOM element for a widget to hook into. On JS side it would then render to that (Markdown outputs a DOM node using some convention).

Parameter passing is a good idea. It would simply go through props in this case.

bebraw commented 7 years ago

Done. You can handle this through Interactive elements that point to React bits that are then pushed to a bundle. See webpack.js.org for an example.

The same idea could be used for markdown embeds but that's to be resolved later.

pe3 commented 7 years ago

:clap: :clap: :clap: