Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 09:15:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement mdx

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Markdown/index.tsx
+4 -2
View File
@@ -14,6 +14,7 @@ import "prismjs/components/prism-python"
import "prismjs/components/prism-yaml"
import "prismjs/plugins/line-numbers/prism-line-numbers.css"
import React, { FC, useEffect } from "react"
import { MDXRenderer } from "gatsby-plugin-mdx"
import * as SC from "./styles"
interface IMarkdownProps {
@@ -30,8 +31,9 @@ export const Markdown: FC<IMarkdownProps> = ({ content, ...restProps }) => {
}, [])
return (
<SC.MarkdownWrapper
dangerouslySetInnerHTML={{ __html: content }}
{...restProps}
/>
>
<MDXRenderer>{content}</MDXRenderer>
</SC.MarkdownWrapper>
)
}
src/components/ResourcesHomeContent/index.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import * as SC from "./styles"
interface IResourcesHomeContent extends HTMLAttributes<HTMLDivElement> {
language: string
html: any
body: any
}
export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
@@ -20,7 +20,7 @@ export const ResourcesHomeContent: FC<IResourcesHomeContent> = (props) => {
<ResourcesList relativeDirectory={props.language} />
<SC.Box>
<SC.Title>Extra resources</SC.Title>
<Markdown content={props.html} />
<Markdown content={props.body} />
</SC.Box>
<Footer />
</>
src/components/ResourcesList/index.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const ALL_RESOURCES = graphql`
node {
relativePath
relativeDirectory
childMarkdownRemark {
childMdx {
frontmatter {
authors
title
src/components/ResourcesSidebar/index.tsx
+2 -2
View File
@@ -18,7 +18,7 @@ const ALL_RESOURCES = graphql`
edges {
node {
relativePath
childMarkdownRemark {
childMdx {
frontmatter {
authors
title
@@ -31,7 +31,7 @@ const ALL_RESOURCES = graphql`
edges {
node {
relativePath
childMarkdownRemark {
childMdx {
frontmatter {
authors
title
src/pages/about.tsx
+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
src/pages/rules.tsx
+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
src/templates/archive.tsx
+4 -4
View File
@@ -9,7 +9,7 @@ import { PageContent } from "../components/PageContent"
// @todo maybe find alternative type for data
const Archive: FC<any> = ({ data }) => {
const { relativePath, ctime } = data.file
const { html, excerpt, timeToRead } = data.file.post
const { body, excerpt, timeToRead } = data.file.post
const title = humanize(relativePath)
@@ -24,7 +24,7 @@ const Archive: FC<any> = ({ data }) => {
timeToRead={timeToRead}
shifted={false}
/>
<PageContent content={<Markdown content={html} />} />
<PageContent content={<Markdown content={body} />} />
</Fragment>
)
}
@@ -36,8 +36,8 @@ export const query = graphql`
file(relativePath: { eq: $file }) {
relativePath
ctime
post: childMarkdownRemark {
html
post: childMdx {
body
excerpt
timeToRead
}
src/templates/resourceHome.tsx
+4 -4
View File
@@ -10,7 +10,7 @@ import useSidebar from "../hooks/useSidebar"
const ResourceHome: FC<any> = ({ data, pageContext }) => {
const { current: language } = useSidebar()
const { relativePath } = data.file
const { html, excerpt, fields, frontmatter, timeToRead } = data.file.post
const { body, excerpt, fields, frontmatter, timeToRead } = data.file.post
const shiftLayout = Boolean(
frontmatter.recommended_reading || frontmatter.external_resources
@@ -34,7 +34,7 @@ const ResourceHome: FC<any> = ({ data, pageContext }) => {
/>
<PageContent
content={
<ResourcesHomeContent language={pageContext.language} html={html} />
<ResourcesHomeContent language={pageContext.language} body={body} />
}
recommendedReading={frontmatter.recommended_reading}
externalResources={frontmatter.external_resources}
@@ -53,8 +53,8 @@ export const query = graphql`
base: { eq: "intro.md" }
) {
relativePath
post: childMarkdownRemark {
html
post: childMdx {
body
excerpt
fields {
authors {
src/templates/resourcePage.tsx
+4 -4
View File
@@ -14,7 +14,7 @@ const ResourcePage: FC<any> = ({ data }) => {
const { current: language } = useSidebar()
const { relativePath } = data.file
const {
html,
body,
headings,
excerpt,
fields,
@@ -49,7 +49,7 @@ const ResourcePage: FC<any> = ({ data }) => {
<PageContent
content={
<>
<Markdown content={html} />
<Markdown content={body} />
<Footer />
</>
}
@@ -67,8 +67,8 @@ export const query = graphql`
query ResourcePage($file: String!) {
file(relativePath: { eq: $file }) {
relativePath
post: childMarkdownRemark {
html
post: childMdx {
body
headings {
depth
value
src/types/index.d.ts
Vendored
+1 -1
View File
@@ -23,7 +23,7 @@ export interface IFileResourceQuery {
node: {
relativePath: string
relativeDirectory: string
childMarkdownRemark: {
childMdx: {
frontmatter: {
author: string
date: string
src/utils/index.ts
+2 -2
View File
@@ -5,7 +5,7 @@ import pipe from "ramda/es/pipe"
import sort from "ramda/es/sort"
import { IFile, IFileOrFolder, IFolder, ITocItem } from "../types"
import { MarkdownRemark } from "../../generated/graphql"
import { Mdx } from "../../generated/graphql"
const slugger = new GithubSlugger()
@@ -141,7 +141,7 @@ export function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] {
return [current, ...join(remaining)]
}
export function buildToc(headings: MarkdownRemark["headings"]): ITocItem[] {
export function buildToc(headings: Mdx["headings"]): ITocItem[] {
if (!headings) {
return []
}