Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(website): use chart image for OG tags
  • Loading branch information
plouc committed Dec 26, 2021
1 parent a597f17 commit 121491f
Show file tree
Hide file tree
Showing 55 changed files with 1,046 additions and 156 deletions.
7 changes: 3 additions & 4 deletions website/src/pages/area-bump/index.js
Expand Up @@ -2,7 +2,6 @@ import React from 'react'
import range from 'lodash/range'
import random from 'lodash/random'
import { useStaticQuery, graphql } from 'gatsby'
import { getSrc } from 'gatsby-plugin-image'
import { patternDotsDef, patternLinesDef } from '@nivo/core'
import { ResponsiveAreaBump, AreaBumpDefaultProps } from '@nivo/bump'
import { ComponentTemplate } from '../../components/components/ComponentTemplate'
Expand Down Expand Up @@ -104,14 +103,14 @@ const initialProperties = {
motionConfig: AreaBumpDefaultProps.motionConfig,
}

const Bump = () => {
const AreaBump = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/bump.png" }) {
image: file(absolutePath: { glob: "**/src/assets/captures/area-bump.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
Expand Down Expand Up @@ -154,4 +153,4 @@ const Bump = () => {
)
}

export default Bump
export default AreaBump
17 changes: 16 additions & 1 deletion website/src/pages/bar/api.js
Expand Up @@ -5,13 +5,28 @@ import { groups } from '../../data/components/bar/props'
import meta from '../../data/components/bar/meta.yml'
import mapper from '../../data/components/bar/mapper'
import { generateLightDataSet } from '../../data/components/bar/generator'
import { graphql, useStaticQuery } from 'gatsby'

const { data, keys } = generateLightDataSet()

const BarApi = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/bar.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<>
<Seo title="Bar HTTP API" keywords={[...meta.Bar.tags, 'HTTP API']} />
<Seo title="Bar HTTP API" image={image} keywords={[...meta.Bar.tags, 'HTTP API']} />
<ApiClient
componentName="Bar"
chartClass="bar"
Expand Down
16 changes: 16 additions & 0 deletions website/src/pages/bar/canvas.js
Expand Up @@ -5,6 +5,7 @@ import meta from '../../data/components/bar/meta.yml'
import { generateHeavyDataSet } from '../../data/components/bar/generator'
import mapper from '../../data/components/bar/mapper'
import { groups } from '../../data/components/bar/props'
import { graphql, useStaticQuery } from 'gatsby'

const Tooltip = data => {
/* return custom tooltip */
Expand Down Expand Up @@ -99,6 +100,20 @@ const initialProperties = {
}

const BarCanvas = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/bar-canvas.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<ComponentTemplate
name="BarCanvas"
Expand All @@ -116,6 +131,7 @@ const BarCanvas = () => {
})}
generateData={generateHeavyDataSet}
getTabData={data => data.data}
image={image}
>
{(properties, data, theme, logAction) => {
return (
Expand Down
16 changes: 16 additions & 0 deletions website/src/pages/bar/index.js
Expand Up @@ -6,6 +6,7 @@ import meta from '../../data/components/bar/meta.yml'
import { generateLightDataSet } from '../../data/components/bar/generator'
import mapper from '../../data/components/bar/mapper'
import { groups } from '../../data/components/bar/props'
import { graphql, useStaticQuery } from 'gatsby'

const Tooltip = () => {
/* return custom tooltip */
Expand Down Expand Up @@ -151,6 +152,20 @@ const initialProperties = {
}

const Bar = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/bar.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<ComponentTemplate
name="Bar"
Expand All @@ -169,6 +184,7 @@ const Bar = () => {
})}
generateData={generateLightDataSet}
getTabData={data => data.data}
image={image}
>
{(properties, data, theme, logAction) => {
return (
Expand Down
16 changes: 16 additions & 0 deletions website/src/pages/bullet/index.js
Expand Up @@ -5,6 +5,7 @@ import { generateBulletData } from '@nivo/generators'
import { ComponentTemplate } from '../../components/components/ComponentTemplate'
import meta from '../../data/components/bullet/meta.yml'
import { groups } from '../../data/components/bullet/props'
import { graphql, useStaticQuery } from 'gatsby'

const generateData = () => [
generateBulletData('temp.', shuffle([100, 120, 140])[0]),
Expand Down Expand Up @@ -46,6 +47,20 @@ const initialProperties = {
}

const Bullet = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/bullet.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<ComponentTemplate
name="Bullet"
Expand All @@ -57,6 +72,7 @@ const Bullet = () => {
initialProperties={initialProperties}
defaultProperties={defaultProps}
generateData={generateData}
image={image}
>
{(properties, data, theme, logAction) => {
return (
Expand Down
16 changes: 16 additions & 0 deletions website/src/pages/bump/index.js
Expand Up @@ -6,6 +6,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
import meta from '../../data/components/bump/meta.yml'
import { groups } from '../../data/components/bump/props'
import mapper from '../../data/components/bump/mapper'
import { graphql, useStaticQuery } from 'gatsby'

const generateData = () => {
const years = range(2000, 2005)
Expand Down Expand Up @@ -115,6 +116,20 @@ const initialProperties = {
}

const Bump = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/bump.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<ComponentTemplate
name="Bump"
Expand All @@ -127,6 +142,7 @@ const Bump = () => {
initialProperties={initialProperties}
propertiesMapper={mapper}
generateData={generateData}
image={image}
>
{(properties, data, theme, logAction) => {
return (
Expand Down
21 changes: 20 additions & 1 deletion website/src/pages/calendar/api.js
Expand Up @@ -5,16 +5,35 @@ import ApiClient from '../../components/components/api-client/ApiClient'
import mapper from '../../data/components/calendar/mapper'
import { groups } from '../../data/components/calendar/props'
import meta from '../../data/components/calendar/meta.yml'
import { graphql, useStaticQuery } from 'gatsby'

const from = new Date(2015, 3, 1)
const to = new Date(2018, 7, 12)
const generateData = () => generateDayCounts(from, to)
const data = generateData()

const CalendarApi = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<>
<Seo title="Calendar HTTP API" keywords={[...meta.Calendar.tags, 'HTTP API']} />
<Seo
title="Calendar HTTP API"
image={image}
keywords={[...meta.Calendar.tags, 'HTTP API']}
/>
<ApiClient
componentName="Calendar"
chartClass="calendar"
Expand Down
16 changes: 16 additions & 0 deletions website/src/pages/calendar/canvas.js
Expand Up @@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
import meta from '../../data/components/calendar/meta.yml'
import mapper from '../../data/components/calendar/mapper'
import { groups } from '../../data/components/calendar/props'
import { graphql, useStaticQuery } from 'gatsby'

const from = new Date(2013, 3, 1)
const to = new Date(2019, 7, 12)
Expand Down Expand Up @@ -67,6 +68,20 @@ const initialProperties = {
}

const CalendarCanvas = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<ComponentTemplate
name="CalendarCanvas"
Expand All @@ -83,6 +98,7 @@ const CalendarCanvas = () => {
tooltip: properties.tooltip ? Tooltip : undefined,
})}
generateData={generateData}
image={image}
>
{(properties, data, theme, logAction) => {
return (
Expand Down
16 changes: 16 additions & 0 deletions website/src/pages/calendar/index.js
Expand Up @@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
import meta from '../../data/components/calendar/meta.yml'
import mapper from '../../data/components/calendar/mapper'
import { groups } from '../../data/components/calendar/props'
import { graphql, useStaticQuery } from 'gatsby'

const Tooltip = data => {
/* return custom tooltip */
Expand Down Expand Up @@ -65,6 +66,20 @@ const initialProperties = {
}

const Calendar = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/calendar.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<ComponentTemplate
name="Calendar"
Expand All @@ -81,6 +96,7 @@ const Calendar = () => {
tooltip: properties.tooltip ? Tooltip : undefined,
})}
generateData={generateData}
image={image}
>
{(properties, data, theme, logAction) => {
return (
Expand Down
17 changes: 16 additions & 1 deletion website/src/pages/chord/api.js
Expand Up @@ -5,15 +5,30 @@ import ApiClient from '../../components/components/api-client/ApiClient'
import { groups } from '../../data/components/chord/props'
import mapper from '../../data/components/chord/mapper'
import meta from '../../data/components/chord/meta.yml'
import { graphql, useStaticQuery } from 'gatsby'

const MATRIX_SIZE = 5

const data = generateChordData({ size: MATRIX_SIZE })

const ChordApi = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/chord.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<>
<Seo title="Chord HTTP API" keywords={[...meta.Chord.tags, 'HTTP API']} />
<Seo title="Chord HTTP API" image={image} keywords={[...meta.Chord.tags, 'HTTP API']} />
<ApiClient
componentName="Chord"
chartClass="chord"
Expand Down
16 changes: 16 additions & 0 deletions website/src/pages/chord/canvas.js
Expand Up @@ -5,6 +5,7 @@ import { ComponentTemplate } from '../../components/components/ComponentTemplate
import meta from '../../data/components/chord/meta.yml'
import mapper from '../../data/components/chord/mapper'
import { groups } from '../../data/components/chord/props'
import { graphql, useStaticQuery } from 'gatsby'

const MATRIX_SIZE = 38

Expand Down Expand Up @@ -87,6 +88,20 @@ const initialProperties = {
const generateData = () => generateChordData({ size: MATRIX_SIZE })

const ChordCanvas = () => {
const {
image: {
childImageSharp: { gatsbyImageData: image },
},
} = useStaticQuery(graphql`
query {
image: file(absolutePath: { glob: "**/src/assets/captures/chord-canvas.png" }) {
childImageSharp {
gatsbyImageData(layout: FIXED, width: 900, quality: 100)
}
}
}
`)

return (
<ComponentTemplate
name="ChordCanvas"
Expand All @@ -105,6 +120,7 @@ const ChordCanvas = () => {
dataKey="matrix"
getDataSize={() => MATRIX_SIZE * MATRIX_SIZE + MATRIX_SIZE}
getTabData={data => data.matrix}
image={image}
>
{(properties, data, theme, logAction) => {
return (
Expand Down

0 comments on commit 121491f

Please sign in to comment.