/
docs.js
166 lines (155 loc) · 4.1 KB
/
docs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
import React, { Component } from 'react'
import Footer from '../components/footer'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import MDXRenderer from 'gatsby-mdx/mdx-renderer'
import styled, { injectGlobal } from 'react-emotion'
import { Layout, Link } from '$components'
import NextPrevious from '../components/NextPrevious'
import '../components/styles.css'
import config from '../../config'
import getSortedNavItems from '../sortNavItems'
injectGlobal`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Roboto",
"Roboto Light",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
font-size: 16px;
}
a {
transition: color 0.15s;
color: #663399;
}
`
const Edit = styled('div')`
padding: 1rem 1.5rem;
text-align: right;
a {
font-size: 14px;
font-weight: 500;
line-height: 1em;
text-decoration: none;
color: #555;
border: 1px solid rgb(211, 220, 228);
cursor: pointer;
border-radius: 3px;
transition: all 0.2s ease-out 0s;
text-decoration: none;
color: rgb(36, 42, 49);
background-color: rgb(255, 255, 255);
box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
height: 30px;
padding: 5px 16px;
&:hover {
background-color: rgb(245, 247, 249);
}
}
`
export default class MDXRuntimeTest extends Component {
render() {
const { data } = this.props
const {
allMdx,
mdx,
site: {
siteMetadata: { docsLocation, title },
},
} = data
const gitHub = require('../components/images/github.svg')
const nav = getSortedNavItems(allMdx).filter(x => !x.hasChildren)
// meta tags
const metaTitle = mdx.frontmatter.metaTitle
const metaDescription = mdx.frontmatter.metaDescription
let canonicalUrl = config.gatsby.siteUrl
canonicalUrl = config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl
canonicalUrl = canonicalUrl + mdx.fields.slug
return (
<Layout {...this.props}>
<Helmet>
{metaTitle ? <title>{metaTitle}</title> : null}
{metaTitle ? <meta name="title" content={metaTitle} /> : null}
{metaDescription ? <meta name="description" content={metaDescription} /> : null}
{metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
{metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
{metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
{metaDescription ? <meta property="twitter:description" content={metaDescription} /> : null}
<link rel="canonical" href={canonicalUrl} />
</Helmet>
<div className={'titleWrapper'}>
<h1 className={'title'}>{mdx.fields.title}</h1>
<Edit className={'mobileView'}>
<Link className={'gitBtn'} to={`${docsLocation}/${mdx.parent.relativePath}`}>
<img src={gitHub} alt={'Github logo'} /> Edit on GitHub
</Link>
</Edit>
</div>
<div className={'mainWrapper'}>
<MDXRenderer>{mdx.code.body}</MDXRenderer>
</div>
<div className={'addPaddTopBottom'}>
<NextPrevious mdx={mdx} nav={nav} />
</div>
<Footer />
</Layout>
)
}
}
export const pageQuery = graphql`
query($id: String!) {
site {
siteMetadata {
title
docsLocation
}
}
mdx(fields: { id: { eq: $id } }) {
fields {
id
title
slug
}
code {
body
}
tableOfContents
parent {
... on File {
relativePath
}
}
frontmatter {
metaTitle
}
}
allMdx {
edges {
node {
fields {
slug
title
filename {
name
}
}
}
}
}
}
`