Skip to content

Commit 0a3ca31

Browse files
AryanJ-NYCAryanJ-NYC
authored
Merge pull request #2 from AryanJ-NYC/develop
Develop
2 parents 561421a + 369f796 commit 0a3ca31

File tree

23 files changed

+9821
-1696
lines changed

23 files changed

+9821
-1696
lines changed

‎.docz/app/components/Layout.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { Fragment } from 'react'
2+
import PropTypes from 'prop-types'
3+
import { useStaticQuery, graphql } from 'gatsby'
4+
import { AsyncRoute, useComponents } from 'docz'
5+
import { MDXProvider } from '@mdx-js/react'
6+
7+
import Theme from 'docz-theme-default'
8+
9+
import { Link } from './Link'
10+
import SEO from './Seo'
11+
12+
const query = graphql`
13+
query Layout {
14+
doczDb {
15+
id
16+
db
17+
}
18+
}
19+
`
20+
21+
const Route = ({ children, ...props }) => {
22+
const components = useComponents()
23+
const NotFound = components.NotFound
24+
if (!props.entry) return <NotFound />
25+
26+
return (
27+
<MDXProvider components={components}>
28+
<AsyncRoute
29+
{...props}
30+
asyncComponent={() => <Fragment>{children}</Fragment>}
31+
/>
32+
</MDXProvider>
33+
)
34+
}
35+
36+
const parseDatabase = data => {
37+
try {
38+
return JSON.parse(data.doczDb.db)
39+
} catch (err) {
40+
return {}
41+
}
42+
}
43+
44+
const Layout = ({ children, ...defaultProps }) => {
45+
const { pageContext: ctx } = defaultProps
46+
const data = useStaticQuery(query)
47+
const db = parseDatabase(data)
48+
const entry =
49+
db.entries && db.entries.find(entry => entry.filepath === ctx.filepath)
50+
51+
return (
52+
<Fragment>
53+
{entry && <SEO title={entry.value.name} />}
54+
<Theme db={db} linkComponent={Link}>
55+
<Route {...defaultProps} entry={entry}>
56+
{children}
57+
</Route>
58+
</Theme>
59+
</Fragment>
60+
)
61+
}
62+
63+
Layout.propTypes = {
64+
color: PropTypes.string,
65+
children: PropTypes.node.isRequired,
66+
}
67+
68+
export default Layout

‎.docz/app/components/Link.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
import { Link as BaseLink } from 'gatsby'
3+
4+
export const Link = props => (
5+
<BaseLink
6+
{...props}
7+
getProps={({ isCurrent, ...customProps }) =>
8+
isCurrent ? { className: `${props.className} active` } : null
9+
}
10+
/>
11+
)

‎.docz/app/components/Seo.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import Helmet from 'react-helmet'
4+
import { StaticQuery, graphql } from 'gatsby'
5+
6+
function SEO({ description, lang, meta, keywords, title }) {
7+
return (
8+
<StaticQuery
9+
query={detailsQuery}
10+
render={data => {
11+
const db = JSON.parse(data.doczDb.db)
12+
const metaDescription = description || db.config.title
13+
14+
return (
15+
<Helmet
16+
htmlAttributes={{ lang }}
17+
title={title}
18+
titleTemplate={`%s | ${db.config.title}`}
19+
meta={[
20+
{
21+
name: `description`,
22+
content: metaDescription,
23+
},
24+
{
25+
property: `og:title`,
26+
content: title,
27+
},
28+
{
29+
property: `og:description`,
30+
content: metaDescription,
31+
},
32+
{
33+
property: `og:type`,
34+
content: `website`,
35+
},
36+
{
37+
name: `twitter:card`,
38+
content: `summary`,
39+
},
40+
{
41+
name: `twitter:title`,
42+
content: title,
43+
},
44+
{
45+
name: `twitter:description`,
46+
content: metaDescription,
47+
},
48+
]
49+
.concat(
50+
keywords.length > 0
51+
? {
52+
name: `keywords`,
53+
content: keywords.join(`, `),
54+
}
55+
: []
56+
)
57+
.concat(meta)}
58+
/>
59+
)
60+
}}
61+
/>
62+
)
63+
}
64+
65+
SEO.defaultProps = {
66+
lang: `en`,
67+
meta: [],
68+
keywords: [],
69+
}
70+
71+
SEO.propTypes = {
72+
description: PropTypes.string,
73+
lang: PropTypes.string,
74+
meta: PropTypes.array,
75+
keywords: PropTypes.arrayOf(PropTypes.string),
76+
title: PropTypes.string.isRequired,
77+
}
78+
79+
export default SEO
80+
81+
const detailsQuery = graphql`
82+
query DefaultSEOQuery {
83+
doczDb {
84+
id
85+
db
86+
}
87+
}
88+
`

‎.docz/app/db.json‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
{
2+
"config": {
3+
"title": "React And Typescript",
4+
"description": "React and TypeScript: The Unofficial Documentation",
5+
"menu": [
6+
"Home",
7+
"Installation",
8+
"Examples",
9+
[
10+
"Functional Components"
11+
]
12+
],
13+
"version": "0.1.0",
14+
"repository": "https://github.com/AryanJ-NYC/reactandtypescript.dev",
15+
"native": false,
16+
"codeSandbox": true,
17+
"themeConfig": {
18+
"colors": {
19+
"primary": "#294E80"
20+
}
21+
},
22+
"separator": "-"
23+
},
24+
"props": [],
25+
"entries": [
26+
{
27+
"key": "src/pages/index.mdx",
28+
"value": {
29+
"name": "Home",
30+
"route": "/",
31+
"id": "522b7407e210088f3588b943aec44115",
32+
"filepath": "src/pages/index.mdx",
33+
"link": "https://github.com/AryanJ-NYC/reactandtypescript.dev/edit/master/src/pages/index.mdx",
34+
"slug": "src-pages-index",
35+
"menu": "",
36+
"headings": [
37+
{
38+
"slug": "home",
39+
"depth": 1,
40+
"value": "Home"
41+
},
42+
{
43+
"slug": "hi-people",
44+
"depth": 1,
45+
"value": "Hi people"
46+
}
47+
]
48+
}
49+
},
50+
{
51+
"key": "src/pages/examples/functional-components.mdx",
52+
"value": {
53+
"name": "Functional Components",
54+
"route": "/installation/functional-components",
55+
"menu": "Examples",
56+
"id": "239d719d23ca72118284e4bfa416e18f",
57+
"filepath": "src/pages/examples/functional-components.mdx",
58+
"link": "https://github.com/AryanJ-NYC/reactandtypescript.dev/edit/master/src/pages/examples/functional-components.mdx",
59+
"slug": "src-pages-examples-functional-components",
60+
"headings": [
61+
{
62+
"slug": "functional-components",
63+
"depth": 1,
64+
"value": "Functional Components"
65+
}
66+
]
67+
}
68+
},
69+
{
70+
"key": "src/pages/installation/gatsby.mdx",
71+
"value": {
72+
"name": "Gatsby",
73+
"route": "/installation/gatsby",
74+
"menu": "Installation",
75+
"id": "564fc0dc9ce695d4d297e27fac07047b",
76+
"filepath": "src/pages/installation/gatsby.mdx",
77+
"link": "https://github.com/AryanJ-NYC/reactandtypescript.dev/edit/master/src/pages/installation/gatsby.mdx",
78+
"slug": "src-pages-installation-gatsby",
79+
"headings": [
80+
{
81+
"slug": "gatsby",
82+
"depth": 1,
83+
"value": "Gatsby"
84+
}
85+
]
86+
}
87+
},
88+
{
89+
"key": "src/pages/installation/create-react-app.mdx",
90+
"value": {
91+
"name": "Create React App",
92+
"route": "/installation/create-react-app",
93+
"menu": "Installation",
94+
"id": "8597a27a9e6601a9049b781e8e0e4b73",
95+
"filepath": "src/pages/installation/create-react-app.mdx",
96+
"link": "https://github.com/AryanJ-NYC/reactandtypescript.dev/edit/master/src/pages/installation/create-react-app.mdx",
97+
"slug": "src-pages-installation-create-react-app",
98+
"headings": [
99+
{
100+
"slug": "create-react-app",
101+
"depth": 1,
102+
"value": "Create React App"
103+
},
104+
{
105+
"slug": "create-a-new-app-with-typescript",
106+
"depth": 2,
107+
"value": "Create a New App with TypeScript"
108+
},
109+
{
110+
"slug": "using-npm",
111+
"depth": 3,
112+
"value": "Using NPM"
113+
},
114+
{
115+
"slug": "using-yarn",
116+
"depth": 3,
117+
"value": "Using Yarn"
118+
},
119+
{
120+
"slug": "add-typescript-to-an-existing-create-react-app-application",
121+
"depth": 2,
122+
"value": "Add TypeScript to an Existing Create React App Application"
123+
}
124+
]
125+
}
126+
},
127+
{
128+
"key": "src/pages/installation/zeit-next-js.mdx",
129+
"value": {
130+
"name": "Zeit Next.js",
131+
"route": "/installation/zeit-next-js",
132+
"menu": "Installation",
133+
"id": "aa24e7b540a30970bc1e16d589856ee5",
134+
"filepath": "src/pages/installation/zeit-next-js.mdx",
135+
"link": "https://github.com/AryanJ-NYC/reactandtypescript.dev/edit/master/src/pages/installation/zeit-next-js.mdx",
136+
"slug": "src-pages-installation-zeit-next-js",
137+
"headings": [
138+
{
139+
"slug": "zeit-nextjs",
140+
"depth": 1,
141+
"value": "Zeit Next.js"
142+
}
143+
]
144+
}
145+
}
146+
]
147+
}

‎.docz/app/imports.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export const imports = {
2+
'src/pages/index.mdx': () =>
3+
import(
4+
/* webpackPrefetch: true, webpackChunkName: "src-pages-index" */ 'src/pages/index.mdx'
5+
),
6+
'src/pages/examples/functional-components.mdx': () =>
7+
import(
8+
/* webpackPrefetch: true, webpackChunkName: "src-pages-examples-functional-components" */ 'src/pages/examples/functional-components.mdx'
9+
),
10+
'src/pages/installation/gatsby.mdx': () =>
11+
import(
12+
/* webpackPrefetch: true, webpackChunkName: "src-pages-installation-gatsby" */ 'src/pages/installation/gatsby.mdx'
13+
),
14+
'src/pages/installation/create-react-app.mdx': () =>
15+
import(
16+
/* webpackPrefetch: true, webpackChunkName: "src-pages-installation-create-react-app" */ 'src/pages/installation/create-react-app.mdx'
17+
),
18+
'src/pages/installation/zeit-next-js.mdx': () =>
19+
import(
20+
/* webpackPrefetch: true, webpackChunkName: "src-pages-installation-zeit-next-js" */ 'src/pages/installation/zeit-next-js.mdx'
21+
),
22+
}

‎doczrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
menu: ['Home', 'Installation', 'Examples', ['Functional Components']],
3+
themeConfig: {
4+
colors: { primary: '#294E80' },
5+
},
6+
};

‎gatsby-config.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
const proxy = require('http-proxy-middleware');
22

33
module.exports = {
4+
__experimentalThemes: [
5+
{
6+
resolve: 'gatsby-theme-docz',
7+
options: {
8+
mdPlugins: [require('remark-external-links')],
9+
},
10+
},
11+
],
412
developMiddleware: app => {
513
app.use(
614
'/.netlify/functions/',
@@ -19,6 +27,7 @@ module.exports = {
1927
},
2028
plugins: [
2129
`gatsby-plugin-react-helmet`,
30+
'gatsby-plugin-typescript',
2231
{
2332
resolve: `gatsby-source-filesystem`,
2433
options: {
@@ -34,8 +43,8 @@ module.exports = {
3443
name: `react-and-typescript`,
3544
short_name: `react-and-typescript`,
3645
start_url: `/`,
37-
background_color: `#663399`,
38-
theme_color: `#663399`,
46+
background_color: `#294E80`,
47+
theme_color: `#294E80`,
3948
display: `minimal-ui`,
4049
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
4150
},

0 commit comments

Comments
 (0)