Skip to content

Commit 1c2a3da

Browse files
jamespohalloranjamespohalloran
authored
Improve Performance (tinacms#1634)
* debug home page * rm middleware * empty page * img optimization * tweak img size * Lighter syntax highlight scripts * simplify google analytics * undo test changes * switch to prism on homepage * Use prismjs for syntax highlights * option to disable image optimization * env in build * fix code styling on homepage * Fix link on logo brands * update lock
1 parent e1bb7d1 commit 1c2a3da

24 files changed

+250
-256
lines changed

‎.github/workflows/nodejs.yml

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ env:
88
NEXT_PUBLIC_TINA_BRANCH: ${{ github.head_ref }}
99
NODE_OPTIONS: '--max_old_space_size=4096'
1010
TINA_SEARCH_TOKEN: ${{ secrets.TINA_SEARCH_TOKEN }}
11+
UNOPTIMIZED_IMAGES: 'true'
12+
1113
jobs:
1214
build:
1315
runs-on: ubuntu-latest

‎components/blocks/Features.tsx

+39-26
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { Actions } from './Actions'
22
import { Container } from './Container'
3-
import SyntaxHighlighter from 'react-syntax-highlighter'
3+
import { Prism } from '../styles/Prism'
44
import { tinaField } from 'tinacms/dist/react'
5+
import DocsRichText from '../styles/DocsRichText'
6+
import styled from 'styled-components'
57

68
export function FeatureBlock({ data, index }) {
79
const isReversed = index % 2 === 1
@@ -10,19 +12,22 @@ export function FeatureBlock({ data, index }) {
1012
<>
1113
<div
1214
key={'feature-' + index}
13-
className={`relative w-full flex flex-col-reverse items-center lg:justify-center lg:min-h-[70vh] gap-12 perspective ${isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'
14-
}`}
15+
className={`relative w-full flex flex-col-reverse items-center lg:justify-center lg:min-h-[70vh] gap-12 perspective ${
16+
isReversed ? 'lg:flex-row-reverse' : 'lg:flex-row'
17+
}`}
1518
>
1619
<div className="w-full lg:w-2/5 max-w-prose flex flex-col gap-6 lg:gap-8">
1720
{data.headline && (
18-
<h3 className="font-tuner inline-block text-3xl lg:text-5xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-balance"
21+
<h3
22+
className="font-tuner inline-block text-3xl lg:text-5xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-balance"
1923
data-tina-field={tinaField(data, 'headline')}
2024
>
2125
{data.headline}
2226
</h3>
2327
)}
2428
<hr className="!my-0" />
25-
<p className="text-lg lg:text-xl lg:leading-normal block bg-gradient-to-br from-blue-700 via-blue-900 to-blue-1000 bg-clip-text text-transparent -mb-2 max-w-prose text-balance"
29+
<p
30+
className="text-lg lg:text-xl lg:leading-normal block bg-gradient-to-br from-blue-700 via-blue-900 to-blue-1000 bg-clip-text text-transparent -mb-2 max-w-prose text-balance"
2631
data-tina-field={tinaField(data, 'text')}
2732
>
2833
{data.text}
@@ -31,18 +36,20 @@ export function FeatureBlock({ data, index }) {
3136
</div>
3237
{data.media && data.media[0] && (
3338
<div
34-
className={`w-full min-w-0 lg:w-1/2 ${isReversed ? 'pivot-reverse' : 'pivot'
35-
} ${(data.media[0].image || data.media[0].src) &&
39+
className={`w-full min-w-0 lg:w-1/2 ${
40+
isReversed ? 'pivot-reverse' : 'pivot'
41+
} ${
42+
(data.media[0].image || data.media[0].src) &&
3643
'rounded-lg shadow-panel overflow-hidden bg-gradient-to-br from-blue-800 via-blue-900 to-slate-900'
37-
}`}
44+
}`}
3845
>
3946
{data.media && data.media[0].image && (
4047
<img
4148
src={data.media[0].image}
4249
alt={data.headline}
4350
className="w-full h-auto"
44-
// width="1120px"
45-
// height="800px"
51+
// width="1120px"
52+
// height="800px"
4653
/>
4754
)}
4855
{data.media && data.media[0].src && (
@@ -56,28 +63,30 @@ export function FeatureBlock({ data, index }) {
5663
</div>
5764
)}
5865
<div
59-
className={`file relative ${data.media[0].file
60-
? 'rounded-lg rounded-tl-none'
61-
: 'rounded-lg'
62-
} overflow-hidden w-full text-blue-50 border-2 border-blue-800 bg-gradient-to-br from-blue-800 via-blue-900 to-blue-1000 shadow-panel`}
66+
className={`file relative ${
67+
data.media[0].file
68+
? 'rounded-lg rounded-tl-none'
69+
: 'rounded-lg'
70+
} overflow-hidden w-full text-blue-50 border-2 border-blue-800 bg-gradient-to-br from-blue-800 via-blue-900 to-blue-1000 shadow-panel`}
6371
style={{
6472
fontSize:
6573
1.25 * (data.media[0].scale ? data.media[0].scale : 1) +
6674
'em',
6775
}}
6876
>
69-
<SyntaxHighlighter
70-
language={
71-
data.media[0].language
72-
? data.media[0].language
73-
: 'javascript'
74-
}
75-
useInlineStyles={false}
76-
// wrapLines={true}
77-
// wrapLongLines={true}
78-
>
79-
{data.media[0].code}
80-
</SyntaxHighlighter>
77+
<CodeWrapper>
78+
<div className="[&>pre]:!bg-transparent [&>pre]:!border-none">
79+
<Prism
80+
lang={
81+
data.media[0].language
82+
? data.media[0].language
83+
: 'javascript'
84+
}
85+
theme="nightOwl"
86+
value={data.media[0].code}
87+
/>
88+
</div>
89+
</CodeWrapper>
8190
</div>
8291
</div>
8392
)}
@@ -193,3 +202,7 @@ export const FeatureVideo = ({ src, className = '' }) => {
193202
</video>
194203
)
195204
}
205+
206+
const CodeWrapper = styled.div`
207+
${DocsRichText}
208+
`

‎components/blocks/LogoGrid.template.ts

+13
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,19 @@ export const logoGridTemplate: TinaTemplate = {
3030
},
3131
fields: [
3232
{ name: 'name', label: 'Name', type: 'string' },
33+
{
34+
name: 'link',
35+
label: 'Link',
36+
type: 'string',
37+
ui: {
38+
validate: (val) => {
39+
// make sure value is https url
40+
if (!val?.startsWith('https://')) {
41+
return 'Must be a valid https url'
42+
}
43+
},
44+
},
45+
},
3346
{ name: 'logo', label: 'Logo Link', type: 'string' },
3447
{ name: 'size', label: 'Size', type: 'number' },
3548
],

‎components/blocks/Story.tsx

+18-12
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react'
22
import { useInView } from 'react-intersection-observer'
3-
import SyntaxHighlighter from 'react-syntax-highlighter'
43
import { Container } from './Container'
54
import { Actions } from './Actions'
6-
import type { TinaTemplate } from '@tinacms/cli'
5+
import { Prism } from '../styles/Prism'
6+
import styled from 'styled-components'
7+
import DocsRichText from 'components/styles/DocsRichText'
78

89
const features = [
910
{
@@ -228,16 +229,17 @@ const Pane = ({ data, position, ...props }) => {
228229
1.25 * (data.file.textScale ? data.file.textScale : 1) + 'em',
229230
}}
230231
>
231-
<SyntaxHighlighter
232-
language={
233-
data.file.language ? data.file.language : 'javascript'
234-
}
235-
useInlineStyles={false}
236-
// wrapLines={true}
237-
// wrapLongLines={true}
238-
>
239-
{data.file.code}
240-
</SyntaxHighlighter>
232+
<CodeWrapper>
233+
<div className="[&>pre]:!bg-transparent [&>pre]:!border-none">
234+
<Prism
235+
lang={
236+
data.file.language ? data.file.language : 'javascript'
237+
}
238+
theme="nightOwl"
239+
value={data.file.code}
240+
/>
241+
</div>
242+
</CodeWrapper>
241243
</div>
242244
</div>
243245
)}
@@ -504,3 +506,7 @@ export function StoryBlock({ data, index }) {
504506
</>
505507
)
506508
}
509+
510+
const CodeWrapper = styled.div`
511+
${DocsRichText}
512+
`

‎components/blocks/Testimonials.tsx

+20-12
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import React from 'react'
22
import { TinaMarkdown } from 'tinacms/dist/rich-text'
33
import { formatDate } from 'utils'
44
import { useTina, tinaField } from 'tinacms/dist/react'
5-
6-
5+
import Image from 'next/image'
76

87
const Testimonial = ({ data, ...props }) => {
98
const Elem = data.link ? 'a' : 'div'
109

1110
return (
1211
<Elem
13-
className={`group px-7 lg:px-8 py-6 lg:py-7 mb-6 break-inside-avoid rounded-md bg-gradient-to-b from-white to-white/30 shadow-[inset_0_0_0_1px_rgba(223,219,252,0.15),_0_0_1px_1px_rgba(223,219,252,0.5)] flex flex-col gap-5 text-gray-700 ${data.link
14-
? 'cursor-pointer hover:shadow-lg hover:bg-white hover:scale-[1.01] transition-all duration-150 ease-out'
15-
: ''
16-
}`}
12+
className={`group px-7 lg:px-8 py-6 lg:py-7 mb-6 break-inside-avoid rounded-md bg-gradient-to-b from-white to-white/30 shadow-[inset_0_0_0_1px_rgba(223,219,252,0.15),_0_0_1px_1px_rgba(223,219,252,0.5)] flex flex-col gap-5 text-gray-700 ${
13+
data.link
14+
? 'cursor-pointer hover:shadow-lg hover:bg-white hover:scale-[1.01] transition-all duration-150 ease-out'
15+
: ''
16+
}`}
1717
href={data.link}
1818
{...props}
1919
data-tina-field={tinaField(data, 'name')}
@@ -29,11 +29,14 @@ const Testimonial = ({ data, ...props }) => {
2929
<div className="flex gap-4 items-center">
3030
{data.avatar && (
3131
<div className="relative shrink-0 w-14 h-14 rounded-full shadow-[0_1px_3px_1px_rgba(66,_153,_225,0.3)] overflow-hidden">
32-
<img
33-
className={`block absolute w-full h-full top-0 left-0 object-fill ${data.link
34-
? 'group-hover:scale-105 transition-all duration-300 ease-in-out'
35-
: ''
36-
}`}
32+
<Image
33+
width={56}
34+
height={56}
35+
className={`block absolute w-full h-full top-0 left-0 object-fill ${
36+
data.link
37+
? 'group-hover:scale-105 transition-all duration-300 ease-in-out'
38+
: ''
39+
}`}
3740
src={data.avatar}
3841
/>
3942
<div className="block absolute w-full h-full top-0 left-0 rounded-full shadow-[inset_0_0_0_1px_rgba(66,_153,_225,_0.2)]"></div>
@@ -67,7 +70,12 @@ const Testimonial = ({ data, ...props }) => {
6770
export function TestimonialsBlock({ data, index }) {
6871
return (
6972
<>
70-
<h1 className={`font-tuner inline-block text-3xl lg:text-5xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-balance text-center mt-12`}>Loved by Developers</h1><section
73+
<h1
74+
className={`font-tuner inline-block text-3xl lg:text-5xl lg:leading-tight bg-gradient-to-br from-orange-400 via-orange-500 to-orange-600 bg-clip-text text-transparent text-balance text-center mt-12`}
75+
>
76+
Loved by Developers
77+
</h1>
78+
<section
7179
key={index}
7280
className={`relative px-8 py-12 lg:py-16 columns-md gap-6`}
7381
style={{

‎components/layout/MarkdownContent.tsx

+6-24
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ import rehypeRaw from 'rehype-raw'
44
// Need this to render tables
55
import remarkGfm from 'remark-gfm'
66

7-
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
8-
import CodeStyle from '../styles/Code'
7+
import { Prism } from '../styles/Prism'
98

109
import LinkSvg from '../../public/svg/link.svg'
1110
import styled from 'styled-components'
@@ -14,31 +13,12 @@ import * as shortcodeRenderers from '../../utils/shortcodes'
1413

1514
import GithubSlugger from 'github-slugger'
1615

17-
1816
interface MarkdownContentProps {
1917
content: string
2018
escapeHtml?: boolean // eq:false --> if the component needs to render html
2119
skipHtml?: boolean
2220
}
2321

24-
// export function WithCodeStyles({ language: tags, value, ...props }) {
25-
// const [language, ...other] = tags?.split(',') || []
26-
// const copy = other.includes('copy') || language === 'copy'
27-
// return (
28-
// <CodeWrapper>
29-
// <SyntaxHighlighter
30-
// {...props}
31-
// language={language}
32-
// style={CodeStyle}
33-
// PreTag="div"
34-
// >
35-
// {String(value).replace(/\n$/, '')}
36-
// </SyntaxHighlighter>
37-
// {copy ? <CopyCodeButton value={value} /> : null}
38-
// </CodeWrapper>
39-
// )
40-
// }
41-
4222
export const copyToClipboard = (text: string) => {
4323
const el = document.createElement('textarea')
4424
el.value = text
@@ -181,9 +161,11 @@ export function MarkdownContent({
181161
const match = /language-(\w+)/.exec(className || '') || props.lang
182162
return !inline && match ? (
183163
<CodeWrapper>
184-
<SyntaxHighlighter style={CodeStyle} language={match[1]}>
185-
{String(children).replace(/\n$/, '')}
186-
</SyntaxHighlighter>
164+
<Prism
165+
lang={match[1]}
166+
theme="nightOwl"
167+
value={String(children).replace(/\n$/, '')}
168+
/>
187169
</CodeWrapper>
188170
) : (
189171
<code className={className} {...props}>

‎components/styles/DocsRichText.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,6 @@ const DocsRichText = css`
262262
pre {
263263
background-color: var(--color-light);
264264
border: 1px solid var(--color-light-dark);
265-
text-shadow: white 0px 1px;
266265
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
267266
text-align: left;
268267
word-spacing: normal;

‎components/styles/Prism.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
import { Highlight, themes, Prism as rootPrism } from 'prism-react-renderer'
3+
4+
//import 'prismjs/components/prism-bash'
5+
;(typeof global !== 'undefined' ? global : window).Prism = rootPrism
6+
require('prismjs/components/prism-bash')
7+
require('prismjs/components/prism-diff')
8+
require('prismjs/components/prism-css')
9+
require('prismjs/components/prism-json')
10+
11+
export const Prism = (props: {
12+
value: string
13+
lang?: string
14+
theme?: keyof typeof themes
15+
}) => {
16+
return (
17+
<Highlight
18+
theme={themes[props.theme || 'github']}
19+
code={props.value}
20+
language={props.lang || ''}
21+
>
22+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
23+
<pre className={className} style={style}>
24+
{tokens.map((line, i) => (
25+
<div {...getLineProps({ line, key: i })}>
26+
{line.map((token, key) => (
27+
<span {...getTokenProps({ token, key })} />
28+
))}
29+
</div>
30+
))}
31+
</pre>
32+
)}
33+
</Highlight>
34+
)
35+
}

0 commit comments

Comments
 (0)