Skip to content

Commit e1eebba

Browse files
jason-roundtreejason-roundtree
committed
Add prism styling of code blocks
1 parent 5ab8673 commit e1eebba

File tree

10 files changed

+191
-8
lines changed

10 files changed

+191
-8
lines changed

‎studio/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
],
1616
"dependencies": {
1717
"@sanity/base": "^1.149.16",
18+
"@sanity/code-input": "^1.149.16",
1819
"@sanity/components": "^1.149.16",
1920
"@sanity/core": "^1.149.17",
2021
"@sanity/default-layout": "^1.149.16",

‎studio/sanity.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"@sanity/components",
1313
"@sanity/default-layout",
1414
"@sanity/default-login",
15-
"@sanity/desk-tool"
15+
"@sanity/desk-tool",
16+
"@sanity/code-input"
1617
],
1718
"env": {
1819
"development": {

‎studio/schemas/section.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,16 @@ export default {
5151
to: [{ type: 'external_link' }]
5252
}]
5353
},
54+
{
55+
title: 'List Order',
56+
name: 'list_order',
57+
type: 'number',
58+
validation: Rule => Rule.integer(),
59+
validation: Rule => Rule.positive(),
60+
// validation: Rule => Rule.custom(orderNum => {
61+
// return orderNum > 3 ? true : 'Another section is already assigned to this order number.'
62+
// // orderNumUnique(orderNum) ? true : 'Another section is already assigned to this order number.'
63+
// })
64+
}
5465
]
5566
}

‎studio/schemas/subsection.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ export default {
1919
name: 'code_samples',
2020
type: 'text'
2121
},
22+
{
23+
title: 'Code',
24+
name: 'code',
25+
type: 'code'
26+
},
2227
{
2328
title: 'Syntax',
2429
name: 'syntax',

‎studio/yarn.lock

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -902,6 +902,14 @@
902902
make-error "^1.3.0"
903903
object-assign "^4.1.1"
904904

905+
"@sanity/code-input@^1.149.16":
906+
version "1.149.16"
907+
resolved "https://registry.npmjs.org/@sanity/code-input/-/code-input-1.149.16.tgz#f3a815c096e209ee1c6b138b87fe5aa86bd480c9"
908+
dependencies:
909+
lodash "^4.17.15"
910+
react-ace "^5.0.1"
911+
react-icons "^2.2.7"
912+
905913
"@sanity/components@^1.149.16":
906914
version "1.149.16"
907915
resolved "https://registry.npmjs.org/@sanity/components/-/components-1.149.16.tgz#0691eb8053928009e5e3743f8ff979fb4fd35df4"
@@ -1866,6 +1874,10 @@ brace-expansion@^1.1.7:
18661874
balanced-match "^1.0.0"
18671875
concat-map "0.0.1"
18681876

1877+
brace@^0.11.0:
1878+
version "0.11.1"
1879+
resolved "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
1880+
18691881
braces@^2.3.1, braces@^2.3.2:
18701882
version "2.3.2"
18711883
resolved "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -4719,6 +4731,10 @@ lodash.foreach@^3.0.3:
47194731
lodash._bindcallback "^3.0.0"
47204732
lodash.isarray "^3.0.0"
47214733

4734+
lodash.get@^4.4.2:
4735+
version "4.4.2"
4736+
resolved "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
4737+
47224738
lodash.isarguments@^3.0.0:
47234739
version "3.1.0"
47244740
resolved "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -4727,6 +4743,10 @@ lodash.isarray@^3.0.0:
47274743
version "3.0.4"
47284744
resolved "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
47294745

4746+
lodash.isequal@^4.1.1:
4747+
version "4.5.0"
4748+
resolved "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
4749+
47304750
lodash.isplainobject@^4.0.0:
47314751
version "4.0.6"
47324752
resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
@@ -6360,6 +6380,15 @@ [email protected]:
63606380
iconv-lite "0.4.24"
63616381
unpipe "1.0.0"
63626382

6383+
react-ace@^5.0.1:
6384+
version "5.10.0"
6385+
resolved "https://registry.npmjs.org/react-ace/-/react-ace-5.10.0.tgz#e328b37ac52759f700be5afdb86ada2f5ec84c5e"
6386+
dependencies:
6387+
brace "^0.11.0"
6388+
lodash.get "^4.4.2"
6389+
lodash.isequal "^4.1.1"
6390+
prop-types "^15.5.8"
6391+
63636392
react-animate-height@^2.0.6:
63646393
version "2.0.21"
63656394
resolved "https://registry.npmjs.org/react-animate-height/-/react-animate-height-2.0.21.tgz#da9223eb0e74457d52f72da477c8626550df2ce6"

‎web/components/DescriptiveItem.js

Lines changed: 48 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,33 @@
11
import React from 'react'
2+
import Highlight, { defaultProps } from 'prism-react-renderer'
3+
import styled from 'styled-components'
4+
import duotoneLight from 'prism-react-renderer/themes/duotoneLight'
5+
6+
// TODO: fix text overflow
7+
const Pre = styled.pre`
8+
font-family: 'Courier Prime', monospace;
9+
font-size: .9em;
10+
overflow: auto;
11+
text-align: left;
12+
/* margin: 1em 0; */
13+
padding: 0.5em;
14+
& .token-line {
15+
line-height: 1.4em;
16+
height: 1.3em;
17+
}
18+
`
19+
const LineNo = styled.span`
20+
display: inline-block;
21+
padding-right: 1em;
22+
user-select: none;
23+
opacity: 0.5;
24+
`
25+
// const Line = styled.div`
26+
// display: table-row;
27+
// `
28+
// const LineContent = styled.span`
29+
// display: table-cell;
30+
// `
231

332
export default function DescriptiveItem({ section }) {
433
console.log('DescriptiveItem props: ', section)
@@ -18,11 +47,25 @@ export default function DescriptiveItem({ section }) {
1847
)}
1948

2049
{secData.code && (
21-
<pre>
22-
<code className="language-js">
23-
{secData.code}
24-
</code>
25-
</pre>
50+
<Highlight
51+
{...defaultProps}
52+
code={secData.code.code}
53+
theme={duotoneLight}
54+
language="jsx"
55+
>
56+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
57+
<Pre className={className} style={style}>
58+
{tokens.map((line, i) => (
59+
<div {...getLineProps({line, key: i})}>
60+
<LineNo>{i + 1}</LineNo>
61+
{line.map((token, key) => (
62+
<span {...getTokenProps({token, key})} />
63+
))}
64+
</div>
65+
))}
66+
</Pre>
67+
)}
68+
</Highlight>
2669
)}
2770

2871
{secData.external_links.length > 0 && (

‎web/package-lock.json

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

‎web/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@
1717
"gatsby": "^2.20.12",
1818
"gatsby-plugin-typography": "^2.4.1",
1919
"gatsby-source-sanity": "^5.0.6",
20+
"prism-react-renderer": "^1.1.1",
2021
"react": "^16.12.0",
2122
"react-dom": "^16.12.0",
2223
"react-typography": "^0.16.19",
24+
"styled-components": "^5.1.1",
2325
"typography": "^0.16.19",
2426
"typography-theme-fairy-gates": "^0.16.19"
2527
},

‎web/src/pages/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,13 @@ export const query = graphql`
5252
_type
5353
name
5454
description
55-
code_samples
5655
syntax
5756
subsection_active
57+
code {
58+
_type
59+
code
60+
language
61+
}
5862
external_links {
5963
_id
6064
_type

‎web/src/styles/global.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44

55
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600&display=swap');
66

7+
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
8+
79
* {
810
padding: 0;
911
margin: 0;
1012
box-sizing: border-box;
11-
font-family: 'Barlow', sans-serif;
1213
}
1314

1415
body {
1516
background-color: rgb(255, 253, 240);
17+
font-family: 'Barlow', sans-serif;
1618
}
1719

1820
#layout {
@@ -218,6 +220,10 @@ kbd {
218220
font-size: .9em;
219221
}
220222

223+
/* pre {
224+
font-family: 'Courier Prime', monospace;
225+
} */
226+
221227
footer {
222228
height: 100px;
223229
margin: 40px 0 0;

0 commit comments

Comments
 (0)