Browse Source

made code snippet component

pull/3/head
remorses 1 year ago
parent
commit
616b68461f
6 changed files with 211 additions and 84 deletions
  1. +3
    -1
      landing-blocks/package.json
  2. +86
    -0
      landing-blocks/src/CodeSnippet.tsx
  3. +2
    -0
      landing-blocks/src/index.tsx
  4. +1
    -0
      website/package.json
  5. +90
    -83
      website/pages/demos/prisma.tsx
  6. +29
    -0
      yarn.lock

+ 3
- 1
landing-blocks/package.json View File

@ -55,9 +55,11 @@
"intersection-observer": "^0.7.0",
"lodash.get": "^4.4.2",
"lodash.merge": "^4.6.2",
"prism-react-renderer": "^1.1.0",
"react-icons": "^3.9.0",
"react-mailchimp-subscribe": "^2.1.0",
"react-script-hook": "^1.0.17",
"react-twitter-embed": "^3.0.3"
"react-twitter-embed": "^3.0.3",
"react-typical": "^0.1.3"
}
}

+ 86
- 0
landing-blocks/src/CodeSnippet.tsx View File

@ -0,0 +1,86 @@
import { useColorMode, Box, Stack, BoxProps, StackProps } from '@chakra-ui/core'
import React, { ReactNode, Fragment } from 'react'
import Color from 'color-js'
import { Text } from '@chakra-ui/core'
import { PageContainer, PageContainerProps } from './layout'
import Typist from 'react-typist'
import Highlight, { defaultProps, Language } from 'prism-react-renderer'
import { PrismTheme } from 'prism-react-renderer'
// import lightTheme from 'prism-react-renderer/themes/nightOwlLight'
import darkPrismTheme from 'prism-react-renderer/themes/github'
export type CodeSnippetProps = {
language: Language
code: string
isTyping?: boolean
dark?: boolean
theme?: PrismTheme
} & StackProps
export const CodeSnippet = ({
code,
language,
isTyping,
theme = darkPrismTheme,
dark,
...rest
}: CodeSnippetProps) => {
const lineNoColor = dark ? '#fff' : '#000'
const bg = dark ? 'black' : 'white'
const lineNumberW = getLineNoWidth(code)
return (
<Highlight theme={theme} {...defaultProps} code={code} language={language}>
{({ className, style: _style, tokens, getLineProps, getTokenProps }) => {
const {background: _, backgroundColor: __, ...style } = _style
const lines = tokens.map((line, i) => (
<div key={i} {...getLineProps({ line, key: i })}>
<Box
w={lineNumberW}
mr='1.5em'
color={lineNoColor}
as='span'
opacity={0.4}
>
{String(i + 1)}
</Box>
{line.map((token, key) => (
<span
key={key}
{...getTokenProps({ token, key })}
/>
))}
</div>
))
return (
<Box
as='pre'
bg={bg}
minW='300px'
minH='200px'
className={className}
overflow='hidden'
borderRadius='10px'
p='20px'
style={{ ...style }}
{...rest}
>
{isTyping ? <Typist>{lines}</Typist> : lines}
</Box>
)
}}
</Highlight>
)
}
function getLineNoWidth(code) {
return (
0.5 + // Start with a base value
code
.split(/\r\n|\r|\n/) // Split by newlines
.length // Get number of lines
.toString().length * // Get number of digits
// Reduce by 30%
0.7
)
}

+ 2
- 0
landing-blocks/src/index.tsx View File

@ -33,6 +33,8 @@ export type { TestimonialsTweetsProps } from './TestimonialsTweets'
// atoms
export { Heading } from './Heading'
export { CodeSnippet } from './CodeSnippet'
export type { CodeSnippetProps } from './CodeSnippet'
export { Shape } from './Shape'
export { EmailForm, MailchimpForm } from './EmailForm'
export type { EmailFormProps } from './EmailForm'

+ 1
- 0
website/package.json View File

@ -26,6 +26,7 @@
"next": "^9.4.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-highlight": "^0.12.0",
"react-icons": "latest"
},
"devDependencies": {

+ 90
- 83
website/pages/demos/prisma.tsx View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { Fragment } from 'react'
import Head from 'next/head'
import {
Hero,
@ -17,8 +17,10 @@ import {
Pricing,
TestimonialsTweets,
EmailForm,
CodeSnippet,
} from 'landing-blocks/src'
import Typist from 'react-typist'
import Highlight from 'react-highlight'
import { GradientCurtains } from 'landing-blocks/src/decorations'
import { Image, Stack } from '@chakra-ui/core'
@ -36,93 +38,98 @@ await prisma.users.create({
})`
const Page = () => (
<LandingProvider primary='#48BB79'>
<Stack spacing='60px' bg='#252D3B'>
<NavBar
dark
logo={
<Image width='120px' stroke='#000' src='/prisma/logo.svg' />
}
navs={[
<a>Features</a>,
<a>Use Cases</a>,
<a>Pricing</a>,
<a>About Us</a>,
<a>Login</a>,
]}
/>
<Hero
bullet='INTRODUCING PRISMA 2.0'
dark
heading={
<Heading maxW='600px' fontSize='50px'>
Modern Database Access for TypeScript & Node.js
</Heading>
}
subheading='Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript & Node.js.'
// image={<img width='500px' src='/prisma/hero.png' />}
cta={<Button>Try Prisma in 5 minutes</Button>}
fingerprint='Already using prisma? Sign in'
<Fragment>
<Head>
<link
rel='stylesheet'
href='node_modules/highlight.js/styles/atom-one-dark.css'
/>
<Box>
<Stack
mb='-60px'
spacing='100px'
justify='center'
direction='row'
align='center'
>
<Box position='relative' height='300px' width='400px'>
<Stack color='black'>
<Box pl='70px' pt='40px' as='pre' zIndex={2}>
<Typist>{heroCode}</Typist>
</Box>
</Stack>
</Head>
<LandingProvider primary='#48BB79'>
<Stack spacing='60px' bg='#252D3B'>
<NavBar
dark
logo={
<Image
width='120px'
stroke='#000'
src='/prisma/logo.svg'
/>
}
navs={[
<a>Features</a>,
<a>Use Cases</a>,
<a>Pricing</a>,
<a>About Us</a>,
<a>Login</a>,
]}
/>
<Hero
bullet='INTRODUCING PRISMA 2.0'
dark
heading={
<Heading maxW='600px' fontSize='50px'>
Modern Database Access for TypeScript & Node.js
</Heading>
}
subheading='Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript & Node.js.'
// image={<img width='500px' src='/prisma/hero.png' />}
cta={<Button>Try Prisma in 5 minutes</Button>}
fingerprint='Already using prisma? Sign in'
/>
<Box>
<Stack
mb='-60px'
spacing='100px'
justify='center'
direction='row'
align='center'
>
<CodeSnippet
isTyping
minWidth='400px'
minH='300px'
code={heroCode}
language='javascript'
/>
<Image
borderRadius='10px'
top='0'
position='absolute'
src='/prisma/editor.png'
height='300px'
width='100%'
src='/prisma/databaseresult.png'
/>
</Box>
<Image
borderRadius='10px'
height='300px'
src='/prisma/databaseresult.png'
/>
</Stack>
</Box>
</Stack>
<Feature
heading='Unleash your team’s creative potential with Blocks'
subheading='prisma Blocks give you a creative palette of app-like functionality that you can mix and match to create the perfect workflow for your team.'
image={<img src='/prisma/feature1.jpg' width='500px' />}
flip
/>
</Stack>
</Box>
</Stack>
<Feature
heading='Unleash your team’s creative potential with Blocks'
subheading='prisma Blocks give you a creative palette of app-like functionality that you can mix and match to create the perfect workflow for your team.'
image={<img src='/prisma/feature1.jpg' width='500px' />}
flip
/>
<Footer
businessName='Prismic'
columns={{
Developers: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
Company: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
Product: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
}}
/>
</LandingProvider>
<Footer
businessName='Prismic'
columns={{
Developers: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
Company: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
Product: [
<a>Quickstart</a>,
<a>Documentation</a>,
<a>Samples</a>,
],
}}
/>
</LandingProvider>
</Fragment>
)
export default Page

+ 29
- 0
yarn.lock View File

@ -1118,6 +1118,11 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@camwiegert/typical@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@camwiegert/typical/-/typical-0.1.1.tgz#c75d3b658e2f542d113c3e266389794c7dc45d6d"
integrity sha512-4xAtH3F3uJ8boe9IPahdYFCBELmyOBwHGAn0rDO6C1rx0TuZb5f4UqfuiOQF7YiMJGCOsUIW7LyucMNnVQYsRg==
"@chakra-ui/core@0.x", "@chakra-ui/core@^0.7.0":
version "0.7.0"
resolved "https://registry.yarnpkg.com/@chakra-ui/core/-/core-0.7.0.tgz#5066201cecacc6c48993c8d655f5d85f5da10c2e"
@ -4175,6 +4180,11 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
highlight.js@^9.11.0:
version "9.18.1"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -6191,6 +6201,11 @@ prism-react-renderer@^1.0.1, prism-react-renderer@^1.0.2:
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.0.2.tgz#3bb9a6a42f76fc049b03266298c7068fdd4b7ea9"
integrity sha512-0++pJyRfu4v2OxI/Us/5RLui9ESDkTiLkVCtKuPZYdpB8UQWJpnJQhPrWab053XtsKW3oM0sD69uJ6N9exm1Ag==
prism-react-renderer@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.0.tgz#6fe1b33f1de1b23afbdb07663d135f9026eef4ad"
integrity sha512-WZAw+mBoxk1qZDD1h1WOg0BVHgyk9zqbuIBFNgP+Z71i515jGL0WZIN1FIF8EgOyh06x8Rr7HAUXxsRsoUZKyg==
private@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@ -6423,6 +6438,13 @@ react-frame-component@^4.1.1:
resolved "https://registry.yarnpkg.com/react-frame-component/-/react-frame-component-4.1.1.tgz#ea8f7c518ef6b5ad72146dd1f648752369826894"
integrity sha512-NfJp90AvYA1R6+uSYafQ+n+UM2HjHqi4WGHeprVXa6quU9d8o6ZFRzQ36uemY82dlkZFzf2jigFx6E4UzNFajA==
react-highlight@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/react-highlight/-/react-highlight-0.12.0.tgz#34de986a0bfdf228904d0c269b69538d95b35802"
integrity sha512-j04EWbYOFM0PryhF5Vvl0FDa/dD3M6q0Sl+nFN9kTvWQ9hFkfISNNs85+ssL4TSkDM+4pQTpMdxlDRi8yfIxjw==
dependencies:
highlight.js "^9.11.0"
react-icons@^3.9.0, react-icons@latest:
version "3.9.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.9.0.tgz#89a00f20a0e02e6bfd899977eaf46eb4624239d5"
@ -6513,6 +6535,13 @@ react-twitter-embed@^3.0.3:
react-proptype-conditional-require "^1.0.4"
scriptjs "^2.5.9"
react-typical@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/react-typical/-/react-typical-0.1.3.tgz#c56e607a8e435b6f8a23eb5eaaf00768e35be06d"
integrity sha512-VynIYVQvAZ1Nco4C+QNEqR17STGK/xw6Dc1zNj/LuYm8fISw1Qp3q9n3hv6O3iQDLD0OWwdWKHun5oj6mCMB4A==
dependencies:
"@camwiegert/typical" "^0.1.1"
react-typist@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/react-typist/-/react-typist-2.0.5.tgz#9830395a73a03e6368e1392ecb98edaa3a648e44"

Loading…
Cancel
Save