Set up docs site

.pre-commit-config.yaml

@@ -3,6 +3,9 @@ repos:
     rev: 'v2.6.1'
     hooks:
       - id: prettier
+        additional_dependencies:
+          - '[email protected]'
+          - '@carbonplan/[email protected]'
         language_version: system
         files: "\\.(\
           css|less|scss\
@@ -18,6 +21,9 @@ repos:
     rev: 'v2.6.1'
     hooks:
       - id: prettier
+        additional_dependencies:
+          - '[email protected]'
+          - '@carbonplan/[email protected]'
         language_version: system
         name: prettier-markdown
         entry: prettier --write --parser mdx

docs/components/contents.js

@@ -0,0 +1,4 @@
+export const contents = {
+  'Getting Started': ['Data'],
+  Reference: ['Map', 'Raster', 'RegionPicker', 'Fill', 'Line'],
+}

docs/components/examples/loading-demo.js

@@ -0,0 +1,90 @@
+import { useThemeUI, Box, Flex } from 'theme-ui'
+import { useState } from 'react'
+import { Badge } from '@carbonplan/components'
+import { Map, Raster, Fill, Line } from '@carbonplan/maps'
+import { useThemedColormap } from '@carbonplan/colormaps'
+import Zoom from './zoom'
+
+const bucket = 'https://storage.googleapis.com/carbonplan-maps/'
+
+const LoadingDemo = ({ map = true, raster = false }) => {
+  const { theme } = useThemeUI()
+  const colormap = useThemedColormap('warm')
+  const [loading, setLoading] = useState(false)
+  const [metadataLoading, setMetadataLoading] = useState(false)
+  const [chunkLoading, setChunkLoading] = useState(false)
+
+  const loadingProps = {
+    setLoading,
+    setMetadataLoading,
+    setChunkLoading,
+  }
+  let mapProps = {}
+  let rasterProps = {}
+  if (map) {
+    mapProps = loadingProps
+  } else if (raster) {
+    rasterProps = loadingProps
+  }
+
+  return (
+    <Box>
+      <Box
+        as='figure'
+        sx={{
+          my: [6, 6, 6, 7],
+          width: '100%',
+          height: ['300px', '400px', '400px', '500px'],
+          border: 'solid',
+          borderColor: 'muted',
+          borderWidth: '1px',
+          borderRadius: '1px',
+        }}
+      >
+        <Map {...mapProps}>
+          <Fill
+            color={theme.rawColors.background}
+            source={bucket + 'basemaps/ocean'}
+            variable={'ocean'}
+          />
+          <Line
+            color={theme.rawColors.primary}
+            source={bucket + 'basemaps/land'}
+            variable={'land'}
+          />
+          <Raster
+            colormap={colormap}
+            clim={[-20, 30]}
+            source={bucket + 'v2/demo/2d/tavg'}
+            variable={'tavg'}
+            {...rasterProps}
+          />
+          <Flex
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              flexDirection: 'column',
+              m: 2,
+              fontFamily: 'mono',
+              letterSpacing: '0.05em',
+              //   textTransform: 'uppercase',
+            }}
+          >
+            <Box>
+              loading: <Badge>{String(loading)}</Badge>
+            </Box>
+            <Box>
+              metadata loading: <Badge>{String(metadataLoading)}</Badge>
+            </Box>
+            <Box>
+              chunk loading: <Badge>{String(chunkLoading)}</Badge>
+            </Box>
+          </Flex>
+          <Zoom />
+        </Map>
+      </Box>
+    </Box>
+  )
+}
+
+export default LoadingDemo

docs/components/examples/map-demo-2d.js

@@ -0,0 +1,48 @@
+import { useThemeUI, Box } from 'theme-ui'
+import { Map, Raster, Fill, Line } from '@carbonplan/maps'
+import { useThemedColormap } from '@carbonplan/colormaps'
+import Zoom from './zoom'
+
+const bucket = 'https://storage.googleapis.com/carbonplan-maps/'
+
+const MapDemo2d = () => {
+  const { theme } = useThemeUI()
+  const colormap = useThemedColormap('warm')
+
+  return (
+    <Box
+      as='figure'
+      sx={{
+        my: [6, 6, 6, 7],
+        width: '100%',
+        height: ['300px', '400px', '400px', '500px'],
+        border: 'solid',
+        borderColor: 'muted',
+        borderWidth: '1px',
+        borderRadius: '1px',
+      }}
+    >
+      <Map>
+        <Fill
+          color={theme.rawColors.background}
+          source={bucket + 'basemaps/ocean'}
+          variable={'ocean'}
+        />
+        <Line
+          color={theme.rawColors.primary}
+          source={bucket + 'basemaps/land'}
+          variable={'land'}
+        />
+        <Raster
+          colormap={colormap}
+          clim={[-20, 30]}
+          source={bucket + 'v2/demo/2d/tavg'}
+          variable={'tavg'}
+        />
+        <Zoom />
+      </Map>
+    </Box>
+  )
+}
+
+export default MapDemo2d

docs/components/examples/region-demo.js

@@ -0,0 +1,117 @@
+import { useThemeUI, Box, Flex } from 'theme-ui'
+import { useState } from 'react'
+import { Map, Raster, Fill, Line, RegionPicker } from '@carbonplan/maps'
+import { useThemedColormap } from '@carbonplan/colormaps'
+import { Code } from '@carbonplan/prism'
+import { Toggle } from '@carbonplan/components'
+import Zoom from './zoom'
+
+const bucket = 'https://storage.googleapis.com/carbonplan-maps/'
+
+const formatData = (data) => {
+  if (!data) {
+    return String(data)
+  }
+
+  if (!data.value) {
+    return String(data)
+  }
+
+  return `
+{
+  value: {
+  coordinates: {
+    lat: (${data.value.coordinates.lat.length}) [${data.value.coordinates.lat
+    .slice(0, 2)
+    .join(', ')}, ...],
+    lon: (${data.value.coordinates.lon.length}) [${data.value.coordinates.lon
+    .slice(0, 2)
+    .join(', ')}, ...],
+  },
+  dimensions: ['lat', 'lon'],
+  tavg: (${data.value.tavg.length}) [${data.value.tavg
+    .slice(0, 2)
+    .join(', ')}, ...],
+}
+`
+}
+
+const RegionDemo = ({ showToggle = false, showData = false }) => {
+  const { theme } = useThemeUI()
+  const [data, setData] = useState(null)
+  const [toggled, setToggled] = useState(!showToggle)
+  const colormap = useThemedColormap('warm')
+
+  return (
+    <Box>
+      <Box
+        as='figure'
+        sx={{
+          my: [6, 6, 6, 7],
+          width: '100%',
+          height: ['300px', '400px', '400px', '500px'],
+          border: 'solid',
+          borderColor: 'muted',
+          borderWidth: '1px',
+          borderRadius: '1px',
+        }}
+      >
+        <Map>
+          {toggled && (
+            <RegionPicker
+              color={theme.colors.primary}
+              backgroundColor={theme.colors.background}
+              fontFamily={theme.fonts.mono}
+              fontSize={'14px'}
+              maxRadius={2000}
+            />
+          )}
+          <Fill
+            color={theme.rawColors.background}
+            source={bucket + 'basemaps/ocean'}
+            variable={'ocean'}
+          />
+          <Line
+            color={theme.rawColors.primary}
+            source={bucket + 'basemaps/land'}
+            variable={'land'}
+          />
+          <Raster
+            colormap={colormap}
+            clim={[-20, 30]}
+            source={bucket + 'v2/demo/2d/tavg'}
+            variable={'tavg'}
+            regionOptions={{ setData }}
+          />
+
+          {showToggle && (
+            <Box sx={{ position: 'absolute', bottom: 0, float: 'left', m: 2 }}>
+              <Flex sx={{ gap: 3 }}>
+                <Toggle
+                  sx={{ display: 'block' }}
+                  value={toggled}
+                  onClick={() => setToggled((prev) => !prev)}
+                />
+                <Box
+                  sx={{
+                    fontFamily: 'mono',
+                    letterSpacing: 'mono',
+                    textTransform: 'uppercase',
+                    color: 'primary',
+                  }}
+                >
+                  Region picker
+                </Box>
+              </Flex>
+            </Box>
+          )}
+
+          <Zoom />
+        </Map>
+      </Box>
+      {showData && <Code>{formatData(data)}</Code>}
+    </Box>
+  )
+}
+
+export default RegionDemo

docs/components/examples/zoom.js

@@ -0,0 +1,67 @@
+import { Box } from '@theme-ui/components'
+import { useMapbox } from '@carbonplan/maps'
+const Zoom = () => {
+  const { map } = useMapbox()
+
+  return (
+    <Box sx={{ position: 'absolute', bottom: '10px', right: '20px' }}>
+      <Box
+        as='button'
+        aria-label='Zoom out'
+        onClick={() => {
+          map.zoomOut()
+        }}
+        sx={{
+          color: 'primary',
+          border: 'none',
+          bg: 'transparent',
+          m: [0],
+          p: [0],
+          cursor: 'pointer',
+          textTransform: 'uppercase',
+          fontFamily: 'body',
+          letterSpacing: 'smallcaps',
+          mr: [3],
+          fontSize: [5, 5, 5, 6],
+          transition: 'color 0.15s',
+          '@media (hover: hover) and (pointer: fine)': {
+            '&:hover': {
+              color: 'secondary',
+            },
+          },
+        }}
+      >
+        -
+      </Box>
+      <Box
+        as='button'
+        aria-label='Zoom in'
+        onClick={() => {
+          map.zoomIn()
+        }}
+        sx={{
+          color: 'primary',
+          border: 'none',
+          bg: 'transparent',
+          m: [0],
+          p: [0],
+          cursor: 'pointer',
+          textTransform: 'uppercase',
+          fontFamily: 'body',
+          letterSpacing: 'smallcaps',
+          fontSize: [5, 5, 5, 6],
+          transition: 'color 0.15s',
+          '@media (hover: hover) and (pointer: fine)': {
+            '&:hover': {
+              color: 'secondary',
+            },
+          },
+        }}
+      >
+        +
+      </Box>
+    </Box>
+  )
+}
+
+export default Zoom

docs/components/section.js

@@ -0,0 +1,26 @@
+import { MDXProvider } from '@mdx-js/react'
+import { NavSection } from '@carbonplan/layouts'
+import { Code, Pre } from '@carbonplan/prism'
+import { contents } from './contents'
+
+const components = {
+  code: Code,
+  pre: Pre,
+}
+
+const Section = ({ children, name }) => {
+  return (
+    <MDXProvider components={components}>
+      <NavSection
+        name={name}
+        menu={{ contents, prefix: '/maps' }}
+        title={`${name[0].toUpperCase() + name.slice(1)} – CarbonPlan`}
+        description={'TK'}
+      >
+        {children}
+      </NavSection>
+    </MDXProvider>
+  )
+}
+
+export default Section