---
title: "Markbook Internal"
path: "Markbook Internal"
---

{%hackmd @RintarouTW/About %}

# Markbook Internal

<center>
<img class="icon" width="64" height="64" src="https://rintaroutw.github.io/gatsby-markbook/markbook.svg"/>
</center>

## Demo Site
https://markbook.netlify.com/

[](https://app.netlify.com/sites/markbook/deploys)

## Open Source

<img class="icon" height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg"/>

https://github.com/RintarouTW/gatsby-markbook

## Layout

<center>

graph {
  HTML -- head, body
  head -- "MathLoader(KaTeX)"
  body -- "(Root)<div id=__gatsby />" -- Layout
  Layout -- Header, main, footer
  
}

</center>

## Source

html.js
: constumized to load KaTeX and it's extensions.

custom.css
: override theme styles. (loaded from `gatsby-browser.js`)

---

### `/pages/`

`*.md` and `*.mdx`
: Markdown files as data source

index.js
: Main Page to list all markdown files as pages. Also support filter by keyword.

About.js
: The About page. (links below the header was implmented in `/component/header.js`)

---

### `/components/`

layout.js
: modified to support KaTeX rendering.

header.js
: header of the site pages.

geogebra.js
: support `<GeoGeBra />` component which load the GeoGeBra applet once and used for the whole site. Include service worker implemented. (`/static/sw.js`)

~~latexPage.js~~
: (JSX component) not used anymore.

---

### `/templates/`

blog-post.js
: how the page constructed from markdown(`.md`/`.mdx`) to `.html`.

typography.js
: Choose theme and some basic styles overrides

## Transfer to Markbook

- `graphviz` to `dot`
- remove `=` and `!` from code block header
- make sure $\LaTeX$ delimiter `$$` are seperated lines.
- remove non standard $\LaTeX$ commands which are not unsupported by KaTeX yet. ex: `\style`, `\begin{equation}`, etc.
- remove some unsupported markdown extension commands, ex: ``

## Markbook's work-around for math

不靠 `gatsby-remark-katex` 和 `remark-mathjax`，直接改以 `remark-math` 實作。

直接用 remark-math 替換 $$ 為 <span class="math math-inine"> 與 <div class="math math-display">
再用 katex 直接去 render 即可。 SSR 對 server loading 太大了。

issue: 因為是個別 render, gdef 會失效。

### related plugins

[remark-math](https://github.com/remarkjs/remark-math)
remark-katex
[remark-mathjax](https://github.com/hanai/gatsby-remark-mathjax)
gatsby-remark-katex

## TODO

- [x] favicon & icons
- [x] google analytics
- [ ] further theme customization within typography
- [x] gatsby-remark-responsive-iframe
npm install --save gatsby-remark-responsive-iframe
- [x] MDX : Markdown + JSX, build time only. seems very powerful.
- [x] Geogebra Components
- [x] Geogebra Service Worker
- [x] MDX to support both .md and .mdx (all bug fixed)
- [x] Enable Offline support
- [x] for MDX support, [nex] should be removed, somehow mdx still check the data inside latex.
work-around: use `remark-math` and render with katex directly.
- [x] SEO support for .md and .mdx pages (where frontmater could override the page title)
- [ ] setHeadComponents instead of html.js hardcoded? (optional)
- [ ] Documentation - Usage Examples
- [ ] frontmatter - path & tags
- [ ] use frontmatter path as links(slug) instead of title
- [x] prevent double render of katex in .md
- [ ] replace ` KaTeX ` with `$\KaTeX$`
- [x] use flexbox for layout

## Issues

- [x] Helmet won't work for *.mdx* in production mode, but works well in dev mode. mdx did something really weird. for *.md* works great in both production and dev modes.
- [ ] graphviz require manually centered.

###### tags: `markbook` `gatsby` `latex` `graphviz`