Import node package:

npm install fxtext-react

Usage:

//App.jsx
...
import FxArticle from 'fxtext-react'

export default function() {
  //this will retrieve the article available at fxhash.xyz/article/example 
  const [slug, setSlug] = useState('example')

  return (
    <div>
      <FxArticle slug='{slug}' />
    </div>
  )
  ...
}

Support is currently limited to Markdown Text, Images, Code, Tables, and Lists.

Support missing, but on the roadmap, includes: Tezos content pointers, Video embeds, Youtube and Spotify embeds, LaTeX math

The Article contains the article's , , and ``.

To style in CSS, the respective class names live under the fx-article container as fx-article-title, fx-article-desc, and fx-article-body

To keep things lighter, I've left out any highlighting for code blocks. If you'd like, highlight.js is my recommended solution for highlighting syntax.

---

Examples

Image(file):

Image(url):

Table:

Header	HeaderB
Content	ContentB

Video(file):

Video(youtube)

Spotify Embed:

Tezos Content(Currently Unsupported):

::tezos-storage-pointer[]{contract="KT1EfsNuqwLAWDd3o4pvfUx1CAh5GMdTrRvr" path="token_metadata::147967"}

List:

• item
• item
• item

const myFunction = () => {
  return(        
        <div className="article-container">
            <h1>{article.title}</h1>
            <h3>{article.description}</h3>
            <br></br>
            <Markdown className='article'>{article.body}</Markdown>
        </div>
    )
}

Math(LaTeX):

$$
E = mc^ 2
$$

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::22785" data_spec="FX-GEN-DATA-002"}

This article is hosted on my website using this very component: chrismccully.com/blog

50% of this article's proceeds are donated to Girls Who Code