feat: Implement mdx

This commit is contained in:
dfireBird
2020-08-08 16:47:43 +05:30
parent 7e3565e78a
commit abf609d09f
14 changed files with 1735 additions and 1448 deletions
+5 -5
View File
@@ -1,7 +1,7 @@
import { graphql } from "gatsby"
import React, { Fragment } from "react"
import cx from "classnames"
import { MarkdownRemark } from "../../generated/graphql"
import { Mdx } from "../../generated/graphql"
import { ComponentQuery } from "../../typings"
import { Markdown } from "../components/Markdown"
import { SEO } from "../components/SEO"
@@ -9,7 +9,7 @@ import { PageContent } from "../components/PageContent"
import { HeaderBarebone } from "../components/HeaderBarebone"
import { buildToc } from "../utils"
function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
function AboutPage({ data }: ComponentQuery<{ md: Mdx }>) {
const { md } = data
const toc = buildToc(md.headings!)
@@ -22,15 +22,15 @@ function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
className={cx({ shifted: toc.length })}
/>
<PageContent content={<Markdown content={md.html!} />} toc={toc} />
<PageContent content={<Markdown content={md.body!} />} toc={toc} />
</Fragment>
)
}
export const query = graphql`
query AboutPage {
md: markdownRemark(frontmatter: { path: { eq: "/about" } }) {
html
md: mdx(frontmatter: { path: { eq: "/about" } }) {
body
headings {
depth
value
+5 -5
View File
@@ -1,7 +1,7 @@
import { graphql } from "gatsby"
import React, { Fragment } from "react"
import cx from "classnames"
import { MarkdownRemark } from "../../generated/graphql"
import { Mdx } from "../../generated/graphql"
import { ComponentQuery } from "../../typings"
import { HeaderBarebone } from "../components/HeaderBarebone"
import { Markdown } from "../components/Markdown"
@@ -9,7 +9,7 @@ import { PageContent } from "../components/PageContent"
import { SEO } from "../components/SEO"
import { buildToc } from "../utils"
function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
function RulesPage({ data }: ComponentQuery<{ md: Mdx }>) {
const { md } = data
const toc = buildToc(md.headings!)
@@ -19,15 +19,15 @@ function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
<SEO title="Rules" />
<HeaderBarebone title="Rules" className={cx({ shifted: toc.length })} />
<PageContent content={<Markdown content={md.html!} />} toc={toc} />
<PageContent content={<Markdown content={md.body!} />} toc={toc} />
</Fragment>
)
}
export const query = graphql`
query RulesPage {
md: markdownRemark(frontmatter: { path: { eq: "/rules" } }) {
html
md: mdx(frontmatter: { path: { eq: "/rules" } }) {
body
headings {
depth
value