Skip to content

Commit 16113ed

Browse files
mrozillamrozilla
committed
Merge branch 'develop'
2 parents a78026f + cabb8b9 commit 16113ed

27 files changed

+893
-697
lines changed

‎gatsby/onCreateNode.js‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,68 @@
22
// import
33
// ─────────────────────────────────────────────────────────────────────────────
44

5-
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
6-
7-
// TODO: finalise for merge into gatsby-mdx/fork
5+
// TODO: finalise for merge into gatsby-plugin-mdx
86
const mdx = require('@mdx-js/mdx');
97
const babel = require('@babel/core');
10-
const deepMap = require('deep-map');
8+
const mapObject = require('map-obj');
119

1210
// ─────────────────────────────────────────────────────────────────────────────
13-
// component
11+
// helpers
1412
// ─────────────────────────────────────────────────────────────────────────────
1513

16-
exports.onCreateNode = ({ node, getNode, actions: { createNodeField } }) => {
17-
fmImagesToRelative(node); // transform Netlify CMS' absolute paths to relative for gatsby-image
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+
}
1820

19-
if (node.internal.type === 'Mdx') {
20-
const parent = getNode(node.parent);
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;');
2142

22-
// TODO: finalise for merge into gatsby-mdx/fork
23-
deepMap(
24-
node.frontmatter,
25-
(value, key) => {
26-
if (key === 'markdown' || key === 'mdx') {
27-
const mdxed = mdx.sync(value);
28-
const babeled = babel.transform(mdxed, {
29-
configFile: false,
30-
// plugins: [instance.plugin, objRestSpread, htmlAttrToJSXAttr],
31-
presets: [
32-
require('@babel/preset-react'),
33-
[
34-
require('@babel/preset-env'),
35-
{
36-
useBuiltIns: 'entry',
37-
corejs: 2,
38-
modules: 'false',
39-
},
40-
],
41-
],
42-
});
43-
const replaced = babeled.code
44-
.replace(/export\s*default\s*function\s*MDXContent\s*/, 'return function MDXContent')
45-
.replace(/export\s*{\s*MDXContent\s+as\s+default\s*};?/, 'return MDXContent;')
46-
.replace(/\nexport /g, '\n');
43+
return [key, replaced];
44+
}
4745

48-
return replaced;
49-
}
46+
return [key, value];
47+
}
5048

51-
return value;
52-
},
53-
{ inPlace: true },
54-
);
49+
// ─────────────────────────────────────────────────────────────────────────────
50+
// component
51+
// ─────────────────────────────────────────────────────────────────────────────
5552

53+
exports.onCreateNode = ({ node, getNode, actions: { createNodeField } }) => {
54+
if (node.internal.type === 'Mdx') {
55+
// create {fields: sourceName} based on file's folder
56+
const parent = getNode(node.parent);
5657
if (parent.internal.type === 'File') {
5758
createNodeField({
5859
node,
5960
name: 'sourceName',
6061
value: parent.sourceInstanceName,
6162
});
6263
}
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);
6368
}
6469
};

‎package.json‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,24 @@
1010
"dependencies": {
1111
"@mdx-js/mdx": "^1.5.1",
1212
"@mdx-js/react": "^1.5.1",
13-
"gatsby": "2.15.29",
14-
"gatsby-plugin-google-analytics": "2.1.20",
15-
"gatsby-plugin-manifest": "2.2.20",
16-
"gatsby-plugin-mdx": "^1.0.47",
17-
"gatsby-plugin-netlify": "2.1.17",
18-
"gatsby-plugin-netlify-cms": "^4.1.22",
19-
"gatsby-plugin-offline": "3.0.11",
20-
"gatsby-plugin-react-helmet": "3.1.10",
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.28",
23-
"gatsby-plugin-sitemap": "2.2.16",
24-
"gatsby-plugin-styled-components": "3.1.8",
25-
"gatsby-remark-images": "3.1.25",
26-
"gatsby-remark-relative-images": "^0.2.3",
27-
"gatsby-source-filesystem": "2.1.29",
28-
"gatsby-transformer-sharp": "^2.2.20",
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",
2928
"lodash": "^4.17.15",
30-
"netlify-cms-app": "^2.9.7",
29+
"map-obj": "^4.1.0",
30+
"netlify-cms-app": "^2.9.8-beta.4",
3131
"netlify-cms-backend-fs": "0.4.4",
3232
"prop-types": "^15.7.2",
3333
"react": "16.10.2",
@@ -38,13 +38,12 @@
3838
"zxcvbn": "^4.4.2"
3939
},
4040
"devDependencies": {
41-
"@babel/core": "^7.6.2",
41+
"@babel/core": "^7.6.4",
4242
"@babel/plugin-proposal-optional-chaining": "^7.6.0",
43-
"@babel/preset-env": "^7.6.2",
44-
"@babel/preset-react": "^7.0.0",
43+
"@babel/preset-env": "^7.6.3",
44+
"@babel/preset-react": "^7.6.3",
4545
"babel-eslint": "^10.0.3",
4646
"babel-plugin-styled-components": "^1.10.6",
47-
"deep-map": "^2.0.0",
4847
"eslint": "^6.5.1",
4948
"eslint-config-airbnb": "^18.0.1",
5049
"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
>

0 commit comments

Comments
 (0)