Feature/add mdx

[dex157]

@bespoyasov я добавил 2 плагина для работы с markdown: remark-abbr и remark-sectionize.

Оба плагина нам полезны, но, к сожалению, оба плагина имеют баги 🤷🏼‍♂️

remark-abbr

Заменяет аббревиатуры для всего файла, пример из доков:

This plugin works on MDAST, a Markdown AST
implemented by [remark](https://github.com/remarkjs/remark)

*[MDAST]: Markdown Abstract Syntax Tree.
*[AST]: Abstract syntax tree

This would compile to the following HTML:

<p>This plugin works on <abbr title="Markdown Abstract Syntax Tree.">MDAST</abbr>, a Markdown <abbr title="Abstract syntax tree">AST</abbr>
implemented by <a href="https://github.com/remarkjs/remark">remark</a></p>

Плагин находит все аннотированные аббревиатуры и заменяет их тегом Abbr, который ты написал.

Баг заключается в том, что если аббревиатура идёт первым словом в параграфе, она не заменяется 😩

Сейчас проблема наблюдается в строке: ООП вызывает споры.

Workaround: не делать аббревиатуры первыми словами в предложении или заменять их jsx тегом <Abbr>.

remark-sectionize

Каждый раз когда плагин находит заголовок, он засовывает его и весь текст в <section>. Проблемы тут в том, что происходит некоторая путаница в секциях. Если У нас есть заголовок h1, после него текст, а после заколок h2 и опять текст, выходит такая матрёшка:

<section>
  <h1></h1>
  <p></p>
  ...
  <section>
    <h2></h2>
    <p></p>
  </section>
</section>

---

В целом обе проблемы не сказать что сильно мешают, и в целом с маркдауном писать код гораздо проще чем с jsx. В общем, предлагаю тебе запустить локально этот бранч и посмотреть какую вёрстку он генерирует. И после этого, помочь принять решение, берём всё это и движемся дальше на md, или остаёмся на jsx )

---

Есть еще нюанс, для каждого markdown файла mdx генерирует wrapper компонент, который можно настроить. Wrapper компонент один общий для всех. Можно настроить чтобы он всегда был main или article или section. Я пока оставил default вариант — div. Настраивается в опциях <MDXProvider>.

Кроме того, у каждого файла mdx можно указать свой Layout компонент, который тоже врапит его, выходит такая матрёшка:

<Wrapper> <!--- обязательно для всех mdx файлов, один тип на всех>
  <Layout> <!--- опционально для каждого mdx файла, разный тип для каждого>
    <MDX />
  </Layout>
</Wrapper>

[bespoyasov]

Думаю, для аббревиатур плагин стоит оставить. Текст можно переиначить, кажется, это менее затратно, чем писать нужные теги руками.

С матрёшкой секций трудно. По спецификации — это допустимо, на w3c даже есть примеры с такой структурой.

Меня в принципе не особо парит, что секция будет внутри другой секции. И у нас по большей части текст перед первым h2 относится к разделу в целом, поэтому снова нет проблем, что внутренние разделы выделенными выходят.

Плюс опять переиначить текст так, чтобы первые параграфы были «вводными» проще, чем набирть секции руками.

Так как у нас проект контентный, будет запарно руками следить за разметкой в jsx. Поэтому я за автоматизацию, пожалуй.

С Wrapper нам повезло, так как страницы одинаковые, у нас всегда в жтом месте контент, поэтому можем смело поставить main.

[dex157]

@bespoyasov закинул пару комитов, описал workaround. Поиграюсь со Wrapper и смержу тогда )

[dex157]

@bespoyasov, я нашёл способ победить проблемы с аббревиатурой, нужно в начале строчки просто поставить пробел.

Еще я подсмотрел как ребята из zeit написали свои доки и сделал как у них, вынес все что связанно с mdx в layout.

Смержил в мастер, след шаг — типограф и mobx-state-tree с тестами.