Skip to content

Commit b5812d2

Browse files
rogermparentrogermparent
committed
Revert "Refactor and simplify styles and templates (#33)"
This reverts commit 2bb4003.
1 parent 37b8a4f commit b5812d2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+2436
-1477
lines changed

‎packages/example/src/pages/index.tsx

+13-34
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,18 @@
11
import React from 'react'
2-
import cn from 'classnames'
3-
import { PageProps } from 'gatsby'
4-
import MainLayout from '@dvcorg/gatsby-theme-iterative/src/components/MainLayout'
5-
import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
2+
import { Link } from 'gatsby'
63

7-
export default function Home({ location }: PageProps) {
4+
export default function Home() {
85
return (
9-
<MainLayout location={location}>
10-
<div
11-
className={cn(
12-
'container',
13-
'mx-auto',
14-
'mt-14',
15-
'px-4',
16-
'py-14',
17-
'flex',
18-
'flex-col',
19-
'justify-center',
20-
'items-center'
21-
)}
22-
>
23-
<h1 className={cn('text-2xl', 'font-bold', 'text-center', 'mb-5')}>
24-
Gatsby Theme: Iterative
25-
</h1>
26-
<section className="text-lg">
27-
<p>
28-
Welcome to the documentation and example website for
29-
Iterative&apos;s website engine!
30-
</p>
31-
<p>
32-
This theme is primarily related to adding a documentation engine,
33-
which you can see <Link href="/doc">here!</Link>
34-
</p>
35-
</section>
36-
</div>
37-
</MainLayout>
6+
<div>
7+
<h1>Gatsby Theme: Iterative</h1>
8+
<p>
9+
Welcome to the documentation and example website for Iterative&apos;s
10+
website engine!
11+
</p>
12+
<p>
13+
This theme is primarily related to adding a documentation engine, which
14+
you can see <Link to="/doc">here!</Link>
15+
</p>
16+
</div>
3817
)
3918
}

‎packages/example/tailwind.config.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
const themeConfig = require('@dvcorg/gatsby-theme-iterative/tailwind.config')
2-
31
module.exports = {
4-
...themeConfig,
5-
content: [...themeConfig.content, './src/**/*'],
2+
content: ['./src/**/*.{js,jsx,ts,tsx}'],
63
theme: {
7-
...themeConfig.theme,
8-
fontFamily: {
9-
sans: ['Tahoma', 'Arial', 'sans-serif'],
10-
mono: ['Consolas', '"Liberation Mono"', 'Menlo', 'Courier', 'monospace']
11-
}
12-
}
4+
extend: {}
5+
},
6+
plugins: []
137
}

‎packages/gatsby-theme-iterative/config-defaults.js

-8
This file was deleted.

‎packages/gatsby-theme-iterative/config/postcss/media.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const screens: Record<string, number>
2+
export const customMedia: Record<string, string>

‎packages/gatsby-theme-iterative/config/postcss/media.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const screens = {
2+
giant: 1200,
3+
desktop: 1005,
4+
tablet: 768,
5+
phablet: 572,
6+
phone: 376
7+
}
8+
9+
module.exports = {
10+
screens,
11+
customMedia: {
12+
'--xxs-scr': `(max-width: ${screens.phone}px)`,
13+
'--xs-scr': `(max-width: ${screens.phablet}px)`,
14+
'--sm-scr': `(max-width: ${screens.tablet}px)`,
15+
'--md-scr': `(max-width: ${screens.desktop - 1}px)`,
16+
'--lg-scr': `(min-width: ${screens.desktop}px)`,
17+
'--xl-scr': `(min-width: ${screens.giant}px)`
18+
}
19+
}

‎packages/gatsby-theme-iterative/config/postcss/mixins.js

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
const { customMedia } = require('./media')
2+
3+
const focus = {
4+
'&:focus': {
5+
color: 'var(--color-orange)'
6+
}
7+
}
8+
9+
const active = {
10+
'&:active': {
11+
position: 'relative',
12+
top: '1px',
13+
left: '1px'
14+
}
15+
}
16+
17+
const hover = {
18+
'&:hover': {
19+
opacity: 0.7
20+
}
21+
}
22+
23+
module.exports = {
24+
mixins: {
25+
'h1-desktop': {
26+
'font-weight': '500',
27+
'font-size': '40px',
28+
'line-height': '60px'
29+
},
30+
'h1-mobile': {
31+
'font-weight': '500',
32+
'font-size': '30px',
33+
'line-height': '40px'
34+
},
35+
'h2-desktop': {
36+
'font-weight': '500',
37+
'font-size': '30px',
38+
'line-height': '40px'
39+
},
40+
'h2-mobile': {
41+
'font-weight': '500',
42+
'font-size': '25px',
43+
'line-height': '35px'
44+
},
45+
'h3-desktop': {
46+
'font-weight': '500',
47+
'font-size': '24px',
48+
'line-height': '34px'
49+
},
50+
'h3-mobile': {
51+
'font-weight': '500',
52+
'font-size': '20px',
53+
'line-height': '30px'
54+
},
55+
'text-desktop': {
56+
'font-size': '24px',
57+
'line-height': '34px'
58+
},
59+
'text-mobile': {
60+
'font-size': '20px',
61+
'line-height': '30px'
62+
},
63+
'text-diminished': {
64+
'font-size': '20px',
65+
'line-height': '30px'
66+
},
67+
'text-secondary': {
68+
'font-size': '16px',
69+
'line-height': '24px'
70+
},
71+
'button-big': {
72+
'font-size': '20px',
73+
'line-height': '30px'
74+
},
75+
'button-small': {
76+
'font-size': '16px',
77+
'line-height': '25px'
78+
},
79+
columns: {
80+
display: 'flex',
81+
'flex-direction': 'row',
82+
'flex-flow': 'wrap',
83+
'justify-content': 'space-between',
84+
85+
[`@media ${customMedia['--sm-scr']}`]: {
86+
'flex-direction': 'row'
87+
},
88+
89+
[`@media ${customMedia['--xs-scr']}`]: {
90+
'justify-content': 'center'
91+
}
92+
},
93+
column: {
94+
'flex-basis': '33.3%',
95+
96+
[`@media ${customMedia['--sm-scr']}`]: {
97+
'flex-basis': '50%'
98+
},
99+
100+
[`@media ${customMedia['--xs-scr']}`]: {
101+
'flex-basis': '100%'
102+
}
103+
},
104+
link: {
105+
'text-decoration': 'none',
106+
color: 'var(--color-blue)',
107+
...hover,
108+
...focus,
109+
...active
110+
},
111+
hover,
112+
focus,
113+
active
114+
}
115+
}

‎packages/gatsby-theme-iterative/createPages.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ const GithubSlugger = require('github-slugger')
33
const slugger = new GithubSlugger()
44
const SLUG_REGEXP = /\s+{#([a-z0-9-]*[a-z0-9]+)}\s*$/
55

6-
const path = require('path')
7-
86
const extractSlugFromTitle = title => {
97
// extracts expressions like {#too-many-files} from the end of a title
108
const meta = title.match(SLUG_REGEXP)
@@ -36,7 +34,7 @@ const parseHeadings = text => {
3634

3735
const createPages = async (
3836
{ graphql, actions },
39-
{ defaultTemplate, getTemplate, disable, docsPrefix }
37+
{ defaultTemplate, getTemplate, disable }
4038
) => {
4139
if (disable) return
4240
const docsResponse = await graphql(
@@ -75,13 +73,14 @@ const createPages = async (
7573
} = doc
7674
const headings = parseHeadings(rawMarkdownBody)
7775

78-
if (slug !== undefined) {
76+
if (slug) {
7977
actions.createPage({
8078
component: getTemplate(template, defaultTemplate),
81-
path: path.posix.join(docsPrefix, slug),
79+
path: slug,
8280
context: {
8381
id,
8482
slug,
83+
isDocs: true,
8584
headings
8685
}
8786
})

‎packages/gatsby-theme-iterative/gatsby-browser.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* eslint-env node */
2+
const PageWrapper = require('./src/components/PageWrapper').default
3+
exports.wrapPageElement = PageWrapper

‎packages/gatsby-theme-iterative/gatsby-config.js

+39-21
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,21 @@ const fs = require('fs')
33
const path = require('path')
44

55
const autoprefixer = require('autoprefixer')
6+
const customMedia = require('postcss-custom-media')
7+
const customProperties = require('postcss-custom-properties')
8+
const mixins = require('postcss-mixins')
9+
const colorMod = require('postcss-color-mod-function')
10+
11+
const mediaConfig = require('./config/postcss/media')
12+
const mixinsConfig = require('./config/postcss/mixins')
13+
14+
const defaultCssBase = path.join(
15+
__dirname,
16+
'src',
17+
'components',
18+
'Page',
19+
'base.css'
20+
)
621

722
const customYoutubeTransformer = require('./config/gatsby-remark-embedder/custom-yt-embedder')
823

@@ -16,20 +31,26 @@ require('./config/prismjs/dvctable')
1631

1732
const imageMaxWidth = 700
1833

19-
const defaults = require('./config-defaults')
20-
2134
module.exports = ({
2235
simpleLinkerTerms,
36+
cssBase = defaultCssBase,
37+
customMediaConfig = { importFrom: [mediaConfig] },
38+
customPropertiesConfig = {
39+
importFrom: [cssBase],
40+
disableDeprecationNotice: true
41+
},
42+
colorModConfig = {
43+
importFrom: [cssBase]
44+
},
2345
postCssPlugins = [
2446
require('tailwindcss/nesting')(require('postcss-nested')),
47+
customMedia(customMediaConfig),
48+
mixins(mixinsConfig),
49+
customProperties(customPropertiesConfig),
50+
colorMod(colorModConfig),
2551
autoprefixer,
2652
require('tailwindcss')
27-
],
28-
docsInstanceName = defaults.docsInstanceName,
29-
docsPath = defaults.docsPath,
30-
glossaryInstanceName = defaults.glossaryInstanceName,
31-
glossaryPath = defaults.glossaryPath,
32-
argsLinkerPath = defaults.argsLinkerPath
53+
]
3354
}) => ({
3455
plugins: [
3556
{
@@ -47,18 +68,11 @@ module.exports = ({
4768
},
4869
'gatsby-plugin-react-helmet',
4970
'gatsby-plugin-sitemap',
50-
glossaryInstanceName && {
51-
resolve: 'gatsby-source-filesystem',
52-
options: {
53-
name: glossaryInstanceName,
54-
path: glossaryPath
55-
}
56-
},
57-
docsInstanceName && {
71+
{
5872
resolve: 'gatsby-source-filesystem',
5973
options: {
60-
name: docsInstanceName,
61-
path: docsPath
74+
name: 'content',
75+
path: path.resolve('content')
6276
}
6377
},
6478
'gatsby-plugin-image',
@@ -83,7 +97,11 @@ module.exports = ({
8397
options: {
8498
icon: linkIcon,
8599
// Pathname can also be array of paths. eg: ['docs/command-reference;', 'docs/api']
86-
pathname: argsLinkerPath
100+
pathname: [
101+
'docs/command-reference',
102+
`docs/ref`,
103+
'docs/cli-reference'
104+
]
87105
}
88106
},
89107
{
@@ -151,10 +169,10 @@ module.exports = ({
151169
}
152170
}
153171
}
154-
].filter(Boolean),
172+
],
155173
siteMetadata: {
156174
author: 'Iterative',
157-
siteUrl: 'https://example.com',
175+
siteUrl: 'https://cml.dev',
158176
titleTemplate: ''
159177
}
160178
})

‎packages/gatsby-theme-iterative/gatsby-node.js

+4-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const path = require('path')
22
const { name: packageName } = require('./package.json')
3-
const defaults = require('./config-defaults')
43

54
const defaultGetTemplate = (template, defaultTemplate) =>
65
template
@@ -16,13 +15,7 @@ exports.pluginOptionsSchema = ({ Joi }) => {
1615
),
1716
remark: Joi.boolean().default(true),
1817
filesystem: Joi.boolean().default(true),
19-
glossaryDirectory: Joi.string().default(
20-
path.resolve('content', 'docs', 'user-guide', 'basic-concepts')
21-
),
22-
docsDirectory: Joi.string().default(path.resolve('content', 'docs')),
23-
glossaryInstanceName: Joi.string().default('iterative-glossary'),
24-
docsInstanceName: Joi.string().default('iterative-docs'),
25-
docsPrefix: Joi.string().default('doc'),
18+
glossaryDirectory: Joi.string().default('docs/user-guide/basic-concepts'),
2619
simpleLinkerTerms: Joi.array().items(
2720
Joi.object({
2821
matches: Joi.string(),
@@ -31,10 +24,9 @@ exports.pluginOptionsSchema = ({ Joi }) => {
3124
),
3225
cssBase: Joi.string(),
3326
customMediaConfig: Joi.object(),
34-
postCssPlugins: Joi.array(),
35-
argsLinkerPath: Joi.alternatives()
36-
.try(Joi.string(), Joi.array().items(Joi.string()))
37-
.default(defaults.argsLinkerPath)
27+
customPropertiesConfig: Joi.object(),
28+
colorModConfig: Joi.object(),
29+
postCssPlugins: Joi.array()
3830
})
3931
}
4032

0 commit comments

Comments
 (0)