Skip to content

Commit cabb8b9

Browse files
mrozillamrozilla
committed
Finish mdx-frontmatter
2 parents 5277618 + efb281c commit cabb8b9

File tree

10 files changed

+312
-242
lines changed

10 files changed

+312
-242
lines changed

‎gatsby/onCreateNode.js‎

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,56 +5,65 @@
55
// TODO: finalise for merge into gatsby-plugin-mdx
66
const mdx = require('@mdx-js/mdx');
77
const babel = require('@babel/core');
8-
const deepMap = require('deep-map');
8+
const mapObject = require('map-obj');
9+
10+
// ─────────────────────────────────────────────────────────────────────────────
11+
// helpers
12+
// ─────────────────────────────────────────────────────────────────────────────
13+
14+
function mapObjectWithArrays(obj, func) {
15+
if (Array.isArray(obj)) {
16+
return obj.map((item) => mapObject(item, func, { deep: true }));
17+
}
18+
return mapObject(obj, func, { deep: true });
19+
}
20+
21+
function mdxify(key, value) {
22+
if (key === 'markdown' || key === 'mdx') {
23+
const mdxed = mdx.sync(value);
24+
const babeled = babel.transform(mdxed, {
25+
configFile: false,
26+
// plugins: [instance.plugin, objRestSpread, htmlAttrToJSXAttr],
27+
presets: [
28+
require('@babel/preset-react'),
29+
[
30+
require('@babel/preset-env'),
31+
{
32+
useBuiltIns: 'entry',
33+
corejs: 2,
34+
modules: 'false',
35+
},
36+
],
37+
],
38+
});
39+
const replaced = babeled.code
40+
.replace(/export\s*default\s*function\s*MDXContent\s*/, 'return function MDXContent')
41+
.replace(/export\s*{\s*MDXContent\s+as\s+default\s*};?/, 'return MDXContent;');
42+
43+
return [key, replaced];
44+
}
45+
46+
return [key, value];
47+
}
948

1049
// ─────────────────────────────────────────────────────────────────────────────
1150
// component
1251
// ─────────────────────────────────────────────────────────────────────────────
1352

1453
exports.onCreateNode = ({ node, getNode, actions: { createNodeField } }) => {
1554
if (node.internal.type === 'Mdx') {
55+
// create {fields: sourceName} based on file's folder
1656
const parent = getNode(node.parent);
17-
18-
// TODO: finalise for merge into gatsby-mdx/fork
19-
deepMap(
20-
node.frontmatter,
21-
(value, key) => {
22-
if (key === 'markdown' || key === 'mdx') {
23-
const mdxed = mdx.sync(value);
24-
const babeled = babel.transform(mdxed, {
25-
configFile: false,
26-
// plugins: [instance.plugin, objRestSpread, htmlAttrToJSXAttr],
27-
presets: [
28-
require('@babel/preset-react'),
29-
[
30-
require('@babel/preset-env'),
31-
{
32-
useBuiltIns: 'entry',
33-
corejs: 2,
34-
modules: 'false',
35-
},
36-
],
37-
],
38-
});
39-
const replaced = babeled.code
40-
.replace(/export\s*default\s*function\s*MDXContent\s*/, 'return function MDXContent')
41-
.replace(/export\s*{\s*MDXContent\s+as\s+default\s*};?/, 'return MDXContent;')
42-
.replace(/\nexport /g, '\n');
43-
44-
return replaced;
45-
}
46-
47-
return value;
48-
},
49-
{ inPlace: true },
50-
);
51-
5257
if (parent.internal.type === 'File') {
5358
createNodeField({
5459
node,
5560
name: 'sourceName',
5661
value: parent.sourceInstanceName,
5762
});
5863
}
64+
65+
// TODO: finalise for merge into gatsby-mdx/fork
66+
// eslint-disable-next-line no-param-reassign
67+
node.frontmatter = mapObjectWithArrays(node.frontmatter, mdxify);
5968
}
6069
};

‎package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,23 @@
1010
"dependencies": {
1111
"@mdx-js/mdx": "^1.5.1",
1212
"@mdx-js/react": "^1.5.1",
13-
"gatsby": "2.15.35",
14-
"gatsby-plugin-google-analytics": "2.1.21",
15-
"gatsby-plugin-manifest": "2.2.21",
16-
"gatsby-plugin-mdx": "^1.0.50",
17-
"gatsby-plugin-netlify": "2.1.19",
18-
"gatsby-plugin-netlify-cms": "^4.1.23",
19-
"gatsby-plugin-offline": "3.0.14",
20-
"gatsby-plugin-react-helmet": "3.1.11",
13+
"gatsby": "2.16.1",
14+
"gatsby-plugin-google-analytics": "2.1.23",
15+
"gatsby-plugin-manifest": "2.2.23",
16+
"gatsby-plugin-mdx": "^1.0.52",
17+
"gatsby-plugin-netlify": "2.1.21",
18+
"gatsby-plugin-netlify-cms": "^4.1.25",
19+
"gatsby-plugin-offline": "3.0.16",
20+
"gatsby-plugin-react-helmet": "3.1.13",
2121
"gatsby-plugin-robots-txt": "^1.5.0",
22-
"gatsby-plugin-sharp": "2.2.29",
23-
"gatsby-plugin-sitemap": "2.2.17",
24-
"gatsby-plugin-styled-components": "3.1.9",
25-
"gatsby-remark-images": "3.1.26",
26-
"gatsby-source-filesystem": "2.1.31",
27-
"gatsby-transformer-sharp": "^2.2.21",
22+
"gatsby-plugin-sharp": "2.2.31",
23+
"gatsby-plugin-sitemap": "2.2.19",
24+
"gatsby-plugin-styled-components": "3.1.11",
25+
"gatsby-remark-images": "3.1.28",
26+
"gatsby-source-filesystem": "2.1.33",
27+
"gatsby-transformer-sharp": "^2.2.23",
2828
"lodash": "^4.17.15",
29+
"map-obj": "^4.1.0",
2930
"netlify-cms-app": "^2.9.8-beta.4",
3031
"netlify-cms-backend-fs": "0.4.4",
3132
"prop-types": "^15.7.2",
@@ -43,7 +44,6 @@
4344
"@babel/preset-react": "^7.6.3",
4445
"babel-eslint": "^10.0.3",
4546
"babel-plugin-styled-components": "^1.10.6",
46-
"deep-map": "^2.0.0",
4747
"eslint": "^6.5.1",
4848
"eslint-config-airbnb": "^18.0.1",
4949
"eslint-import-resolver-alias": "^1.1.2",

‎src/components/interactive/Button.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -165,16 +165,6 @@ const StyledButton = styled.button`
165165
166166
return null;
167167
}};
168-
169-
${({ grouped }) => grouped
170-
&& css`
171-
&:not(:last-of-type) {
172-
margin: 0 0 1rem;
173-
@media screen and (min-width: 600px) {
174-
margin: 0 1rem 0 0;
175-
}
176-
}
177-
`};
178168
`;
179169

180170
// ─────────────────────────────────────────────────────────────────────────────

‎src/components/layout/Nav.js‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,10 @@ Nav.List.Item = styled.li`
4646
font-weight: 700;
4747
letter-spacing: 0.05em;
4848
49+
& > ${Nav.List} {
50+
padding: 0 0 0 var(--width-outside);
51+
}
52+
4953
@media screen and (min-width: 900px) {
5054
display: flex;
5155
align-items: center;
@@ -68,6 +72,7 @@ Nav.List.Item = styled.li`
6872
6973
& > ${Nav.List} {
7074
visibility: visible;
75+
padding: 0;
7176
7277
background: var(--color-inverse);
7378
box-shadow: 0 0.5rem 1rem hsla(var(--hsl-text), 0.1);
@@ -86,27 +91,27 @@ Nav.Toggle = styled.input`
8691
outline: none;
8792
8893
position: absolute;
89-
padding: 2rem;
9094
9195
cursor: pointer;
9296
font-size: 2rem;
9397
line-height: 1;
9498
color: var(--color-primary);
9599
96-
&:checked {
97-
transform: rotate(90deg);
98-
opacity: 0.25;
100+
&::after {
101+
content: '☰';
102+
display: block;
103+
}
99104
105+
&:checked {
100106
& ~ ${Nav.List} {
101107
visibility: visible;
102108
height: auto;
103-
104-
padding: 0 0 2rem 2rem;
105109
}
106-
}
107110
108-
&::after {
109-
content: '☰';
111+
&::after {
112+
transform: rotate(90deg);
113+
opacity: 0.25;
114+
}
110115
}
111116
112117
@media screen and (min-width: 900px) {

‎src/containers/general/DarkModeContainer.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,12 @@ export default function DarkModeContainer({ ...rest }) {
3131
},
3232
};
3333

34-
document.documentElement.style.setProperty('--hsl-text', hsl[theme].text);
35-
document.documentElement.style.setProperty('--hsl-bg', hsl[theme].bg);
36-
document.documentElement.style.setProperty('--hsl-dark', hsl[theme].dark);
37-
document.documentElement.style.setProperty('--hsl-inverse', hsl[theme].inverse);
34+
const selectedTheme = hsl[theme] || hsl.light;
35+
36+
document.documentElement.style.setProperty('--hsl-text', selectedTheme.text);
37+
document.documentElement.style.setProperty('--hsl-bg', selectedTheme.bg);
38+
document.documentElement.style.setProperty('--hsl-dark', selectedTheme.dark);
39+
document.documentElement.style.setProperty('--hsl-inverse', selectedTheme.inverse);
3840
}, [theme]);
3941

4042
return (

‎src/containers/general/HeaderContainer.js‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,13 @@ export default function HeaderContainer() {
5858
5959
background: var(--color-inverse);
6060
box-shadow: inset 0 -2px hsla(var(--hsl-text), 0.05);
61-
62-
padding: 0 var(--width-outside);
6361
`}
6462
>
65-
<Nav>
63+
<Nav
64+
css={`
65+
padding: 0 var(--width-outside);
66+
`}
67+
>
6668
<Link
6769
to="/"
6870
css={`
@@ -75,13 +77,15 @@ export default function HeaderContainer() {
7577
</Link>
7678
<Nav.Toggle
7779
css={`
78-
top: 2.5rem;
79-
right: -2rem;
80+
right: 0;
81+
padding: 2.5rem 2rem;
8082
`}
8183
/>
8284
<Nav.List
8385
css={`
84-
justify-self: end;
86+
@media screen and (min-width: 900px) {
87+
justify-self: end;
88+
}
8589
`}
8690
>
8791
{header?.frontmatter?.links.map((item) => {
@@ -93,9 +97,8 @@ export default function HeaderContainer() {
9397
look="tertiary"
9498
css={`
9599
display: block;
96-
padding: 1rem;
97-
98-
@media screen and (min-width: 1200px) {
100+
padding: 1rem 0;
101+
@media screen and (min-width: 900px) {
99102
padding: 3.5rem 2rem;
100103
}
101104
`}
@@ -112,11 +115,13 @@ export default function HeaderContainer() {
112115
<Nav.List.Item
113116
key={item.url}
114117
css={`
115-
padding: 3rem 0;
116-
118+
padding: 1rem 0;
117119
& > a {
118120
padding: 1rem 3rem;
119121
}
122+
@media screen and (min-width: 900px) {
123+
padding: 3rem 1rem;
124+
}
120125
`}
121126
>
122127
<Button as={Link} to={item.url} look={item.look}>
@@ -133,23 +138,23 @@ export default function HeaderContainer() {
133138
tabIndex="0"
134139
css={`
135140
outline: none;
136-
padding: 1rem;
141+
padding: 1rem 0;
137142
138143
&:hover {
139144
color: var(--color-primary);
140145
}
141-
142-
@media screen and (min-width: 1200px) {
143-
padding: 3.5rem 2rem;
146+
@media screen and (min-width: 900px) {
147+
padding: 3.5rem 1rem;
144148
}
145149
`}
146150
>
147151
{item.title}
148152
</H2>
149153
<Nav.Toggle
150154
css={`
151-
top: -1rem;
155+
top: 0;
152156
right: -2rem;
157+
padding: 1.5rem 2rem;
153158
`}
154159
/>
155160
<Nav.List>
@@ -160,10 +165,11 @@ export default function HeaderContainer() {
160165
look="tertiary"
161166
css={`
162167
display: block;
163-
padding: 1rem;
168+
padding: 1rem 0;
169+
width: 100%;
164170
165171
@media screen and (min-width: 1200px) {
166-
padding: 1rem 4rem;
172+
padding: 1rem 2rem;
167173
}
168174
`}
169175
>

‎src/containers/web/LogosContainer.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const fragment = graphql`
2121
subtitle
2222
mdx
2323
logos {
24-
name
24+
title
2525
url
2626
image {
2727
src {
@@ -129,21 +129,21 @@ export default function LogosContainer({ title, subtitle, mdx, logos }) {
129129
}
130130

131131
LogosContainer.propTypes = {
132-
title: string,
132+
title: string,
133133
subtitle: string,
134-
mdx: string,
135-
logos: arrayOf(
134+
mdx: string,
135+
logos: arrayOf(
136136
shape({
137137
name: string,
138-
url: string,
138+
url: string,
139139
// image:
140140
}),
141141
),
142142
};
143143

144144
LogosContainer.defaultProps = {
145-
title: '',
145+
title: '',
146146
subtitle: '',
147-
mdx: '',
148-
logos: [],
147+
mdx: '',
148+
logos: [],
149149
};

‎src/content/cms/menus/header.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ links:
2020
- text: Log in
2121
type: button
2222
url: /login/
23-
look: tertiary
23+
look: secondary
2424
- text: Sign up
2525
type: button
2626
url: /signup/

0 commit comments

Comments
 (0)