Skip to content

Commit 04bff55

Browse files
jason-roundtreejason-roundtree
committed
Fix cms issue that was breaking Prism
1 parent 958962d commit 04bff55

File tree

9 files changed

+3619
-4719
lines changed

9 files changed

+3619
-4719
lines changed

‎studio/schemas/section.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,14 @@ export default {
2121
{
2222
title: 'Description',
2323
name: 'description',
24-
type: 'text',
25-
rows: 4
24+
type: 'array',
25+
of: [
26+
{
27+
type: 'block',
28+
of: [{ type: 'code_highlight' }]
29+
}
30+
],
31+
rows: 7
2632
},
2733
{
2834
title: 'Subsections',

‎studio/schemas/subsection.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@ export default {
1515
of: [
1616
{
1717
type: 'block',
18-
of: [
19-
{
20-
type: 'code_highlight'
21-
},
22-
]
18+
of: [{ type: 'code_highlight' }]
2319
}
2420
],
2521
rows: 7

‎web/gatsby-config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ module.exports = {
1919
options: {
2020
projectId: 'up6uy0tw',
2121
dataset: 'production',
22+
useCdn: false
2223
// a token with read permissions is required
2324
// if you have a private dataset
2425
// token: process.env.MY_SANITY_TOKEN,

‎web/package-lock.json‎

Lines changed: 3499 additions & 4642 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/src/components/DescriptiveItem.js‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
2-
import Highlight, { defaultProps } from 'prism-react-renderer'
32
import styled from 'styled-components'
4-
import duotoneLight from 'prism-react-renderer/themes/oceanicNext'
3+
import Highlight, { defaultProps } from 'prism-react-renderer'
4+
import codeTheme from 'prism-react-renderer/themes/oceanicNext'
5+
import formatDescription from '../../utils/formatDescription'
56

67
const Pre = styled.pre`
78
font-family: 'Inconsolata', monospace;
@@ -29,59 +30,58 @@ export default function DescriptiveItem({ section }) {
2930
return (
3031
<div>
3132
{section.subsections.map(secData => {
32-
// console.log('secData: ', secData)
33-
return (
34-
<div
35-
className="description_container"
36-
key={secData.name}
37-
>
38-
<h4>{secData.name}</h4>
33+
return (
34+
<div
35+
className="description_container"
36+
key={secData.name}
37+
>
38+
<h4>{secData.name}</h4>
3939

40-
{secData.description && (
41-
<p>{secData.description}</p>
42-
)}
40+
{secData._rawDescriptionBlock && (
41+
<p>{formatDescription(secData._rawDescriptionBlock[0])}</p>
42+
)}
4343

44-
{secData.code && (
45-
<Highlight
46-
{...defaultProps}
47-
code={secData.code.code}
48-
theme={duotoneLight}
49-
language="jsx"
50-
>
51-
{({ className, style, tokens, getLineProps, getTokenProps }) => (
52-
<Pre className={className} style={style}>
53-
{tokens.map((line, i) => (
54-
<div {...getLineProps({line, key: i})}>
55-
<LineNo>{i + 1}</LineNo>
56-
{line.map((token, key) => (
57-
<span {...getTokenProps({token, key})} />
58-
))}
59-
</div>
60-
))}
61-
</Pre>
62-
)}
63-
</Highlight>
64-
)}
44+
{secData.code && (
45+
<Highlight
46+
{...defaultProps}
47+
code={secData.code.code}
48+
theme={codeTheme}
49+
language={secData.code.language}
50+
>
51+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
52+
<Pre className={className} style={style}>
53+
{tokens.map((line, i) => (
54+
<div {...getLineProps({line, key: i})}>
55+
<LineNo>{i + 1}</LineNo>
56+
{line.map((token, key) => (
57+
<span {...getTokenProps({token, key})} />
58+
))}
59+
</div>
60+
))}
61+
</Pre>
62+
)}
63+
</Highlight>
64+
)}
6565

66-
{secData.external_links.length > 0 && (
67-
<ul>
68-
{secData.external_links.map(link => (
69-
<li key={link._id}>
70-
<a
71-
href={link.url}
72-
target="_blank"
73-
rel="noopener noreferrer"
74-
>
75-
{link.description}
76-
</a>
77-
</li>
78-
))}
79-
</ul>
80-
)}
81-
</div>
82-
)
83-
})
84-
}
66+
{secData.external_links.length > 0 && (
67+
<ul>
68+
{secData.external_links.map(link => (
69+
<li key={link._id}>
70+
<a
71+
href={link.url}
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
>
75+
{link.description}
76+
</a>
77+
</li>
78+
))}
79+
</ul>
80+
)}
81+
</div>
82+
)
83+
84+
})}
8585
</div>
8686
)
8787
}

‎web/src/components/HighlightInlineCode.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
4+
const InlineHighlight = styled.code`
5+
padding: 2px;
6+
background-color: rgb(230, 255, 255);
7+
border-radius: 3px;
8+
`
9+
10+
export default function HighlightInlineCode(props) {
11+
return (
12+
<InlineHighlight>
13+
{props.code}
14+
</InlineHighlight>
15+
)
16+
}

‎web/src/components/TopicSection.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react'
22
import ShortcutTable from './ShortcutTable'
33
import DescriptiveItem from './DescriptiveItem'
4+
import formatDescription from '../../utils/formatDescription'
45
// import styled from 'styled-components'
56

67
// const LinkList = styled.ul`
78
// margin-top: 15px;
89
// `
910

1011
export default function TopicSection(props) {
11-
console.log('TS props: ', props);
12+
// console.log('TS props: ', props);
1213
return (
1314
<section
1415
id={props.section.anchor_id}
@@ -24,10 +25,10 @@ export default function TopicSection(props) {
2425
{props.section.name}
2526
</h3>
2627

27-
{props.section.description && (
28-
<p className="section_description">
29-
{props.section.description}
30-
</p>
28+
{props.section._rawDescription && (
29+
<p className="section_description">
30+
{formatDescription(props.section._rawDescription[0])}
31+
</p>
3132
)}
3233

3334
<ul className="link_list">

‎web/src/pages/index.js‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export default function Index({ data }) {
145145

146146
export const query = graphql`
147147
{
148-
allSanitySection(sort: {fields: list_order}) {
148+
allSanitySection(sort: {fields: list_order}, filter: {section_active: {eq: true}}) {
149149
edges {
150150
node {
151151
_id
@@ -154,13 +154,20 @@ export const query = graphql`
154154
type
155155
_type
156156
name
157-
description
157+
_rawDescription(resolveReferences: {maxDepth: 10})
158+
list_order
159+
external_links {
160+
_id
161+
_type
162+
description
163+
url
164+
}
158165
subsections {
159166
... on SanityGeneralSubsection {
160167
_id
161168
_type
162169
name
163-
description
170+
_rawDescriptionBlock(resolveReferences: {maxDepth: 10})
164171
syntax
165172
subsection_active
166173
external_links {
@@ -169,7 +176,11 @@ export const query = graphql`
169176
description
170177
url
171178
}
172-
_rawDescriptionBlock(resolveReferences: {maxDepth: 10})
179+
code {
180+
_type
181+
code
182+
language
183+
}
173184
}
174185
... on SanityShortcutSubsection {
175186
id
@@ -181,17 +192,8 @@ export const query = graphql`
181192
notes
182193
}
183194
}
184-
list_order
185195
}
186196
}
187197
}
188-
# allSanityGeneralSubsection {
189-
# edges {
190-
# node {
191-
# id
192-
# _rawDescriptionBlock
193-
# }
194-
# }
195-
# }
196198
}
197199
`

‎web/utils/formatDescription.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import HighlightInlineCode from '../src/components/HighlightInlineCode'
3+
4+
export default function formatDescription(content) {
5+
const descriptionBlock = []
6+
content.children.forEach(inlineBlock => {
7+
// console.log('inlineBlock: ', inlineBlock)
8+
if (inlineBlock._type === 'code_highlight') {
9+
descriptionBlock.push(
10+
<HighlightInlineCode
11+
code={inlineBlock.inline_code_highlight}
12+
key={inlineBlock._key}
13+
/>
14+
)
15+
} else {
16+
descriptionBlock.push(inlineBlock.text)
17+
}
18+
})
19+
// console.log('descriptionBlock: ', descriptionBlock)
20+
return descriptionBlock
21+
}

0 commit comments

Comments
 (0)