Bump deps

package.json

@@ -25,32 +25,34 @@
   },
   "homepage": "https://github.com/carbonplan/blog#readme",
   "dependencies": {
-    "@carbonplan/charts": "^2.7.0",
-    "@carbonplan/colormaps": "^3.0.1",
-    "@carbonplan/components": "^11.8.1",
-    "@carbonplan/icons": "^1.0.0",
-    "@carbonplan/layouts": "^2.4.3",
-    "@carbonplan/maps": "^1.2.0",
-    "@carbonplan/prism": "^1.1.0",
-    "@carbonplan/theme": "^7.0.0",
+    "@carbonplan/charts": "^3.0.0",
+    "@carbonplan/colormaps": "^4.0.0",
+    "@carbonplan/components": "^12.0.0",
+    "@carbonplan/icons": "^2.0.0",
+    "@carbonplan/layouts": "^3.0.0",
+    "@carbonplan/maps": "^3.0.0",
+    "@carbonplan/prism": "^2.0.0",
+    "@carbonplan/theme": "^8.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
-    "@next/mdx": "^10.2.3",
-    "@theme-ui/color": "^0.13.1",
+    "@mdx-js/loader": "^2.1.5",
+    "@mdx-js/react": "^2.1.5",
+    "@next/mdx": "^12.3.1",
+    "@theme-ui/color": "^0.15.3",
+    "@theme-ui/mdx": "^0.15.3",
     "d3-array": "^3.1.1",
     "d3-format": "^3.1.0",
     "d3-geo": "^3.0.1",
     "gray-matter": "^4.0.3",
     "ndarray": "^1.0.19",
     "next": "^12.0.7",
-    "next-mdx-remote": "^3.0.8",
-    "react": "^17.0.2",
+    "next-mdx-remote": "^4.1.0",
+    "react": "^18.2.0",
     "react-animate-height": "^2.0.23",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "rehype-slug": "^4.0.1",
-    "theme-ui": "^0.13.1",
+    "remark-mdx-code-meta": "^2.0.0",
+    "theme-ui": "^0.15.3",
     "topojson-client": "^3.1.0",
     "zarr-js": "^1.0.0"
   },

pages/blog/[id].js

@@ -2,9 +2,10 @@ import fs from 'fs'
 import matter from 'gray-matter'
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
+import remarkMdxCodeMeta from 'remark-mdx-code-meta'
 import path from 'path'
 import { useMDXComponents } from '@mdx-js/react'
-
+import { useThemedStylesWithMdx } from '@theme-ui/mdx'
 import { Box } from 'theme-ui'
 import { Post } from '@carbonplan/layouts'
 import {
@@ -15,14 +16,13 @@ import {
   FigureCaption,
   TableCaption,
 } from '@carbonplan/components'
-import { Code, Pre } from '@carbonplan/prism'
+import { Code } from '@carbonplan/prism'
 
 import { postMetadata, POSTS_PATH } from '../../utils/mdx'
 import { pageComponents } from '../../components/mdx'
 
 const COMPONENTS = {
-  code: Code,
-  pre: Pre,
+  pre: Code,
   blockquote: Blockquote,
   Box,
   ...Colors,
@@ -33,7 +33,7 @@ const COMPONENTS = {
 }
 
 const PostPage = ({ id, source, frontMatter, number }) => {
-  const components = useMDXComponents()
+  const components = useThemedStylesWithMdx(useMDXComponents())
 
   return (
     <Post meta={frontMatter} number={number}>
@@ -59,7 +59,7 @@ export const getStaticProps = async ({ params }) => {
   const mdxSource = await serialize(content, {
     // Optionally pass remark/rehype plugins
     mdxOptions: {
-      remarkPlugins: [],
+      remarkPlugins: [remarkMdxCodeMeta],
       rehypePlugins: [],
     },
     scope: data,

posts/climate-trace-release.md

@@ -23,21 +23,7 @@ For the initial release of the Climate TRACE platform we used established method
   <Map />
   <FigureCaption>
     Cumulative emissions from forests (2001 - 2020). Pixels are 1º x 1º. Open
-    the{' '}
-    <Link
-      sx={{
-        color: 'secondary',
-        '@media (hover: hover) and (pointer: fine)': {
-          '&:hover': {
-            color: 'primary',
-          },
-        },
-      }}
-      href='/research/forest-carbon'
-    >
-      interactive
-    </Link>{' '}
-    version to explore more.
+    the [interactive](/research/forest-carbon) version to explore more.
   </FigureCaption>
 </Figure>
 

posts/cloud-downscaling-pipelines.md

@@ -51,7 +51,7 @@ While prefect has some [built-in caching](https://docs-v1.prefect.io/core/concep
 
 We initially worked around Prefect's lack of caching support for Xarray objects by using [xpersist](https://xpersist.readthedocs.io/en/latest/how-to/use-xpersist-with-prefect.html), a Python package that extends prefect’s caching functionality with Zarr support, using code similar to the following example:
 
-```python theme=sunrise
+```python theme="sunrise"
 from xpersist import XpersistResult
 from prefect import task
 import xarray as xr
@@ -78,7 +78,7 @@ After experimenting with xpersist, we resolved our caching issues using a simple
 
 The pseudocode below shows how this custom caching mechanism worked:
 
-```python theme=sunrise
+```python theme="sunrise"
 @task
 def compute_expensive_result(input_path):
 
@@ -108,7 +108,7 @@ Verifying the integrity of Zarr stores was a significant challenge. For context,
 
 As a method for confirming whether we were missing chunks, we first considered checking whether the `.zmetadata` file had been written. While this reliably indicates if the store exists, it does not guarantee that all chunks have been written. To add an additional layer of validation, we developed a mechanism to check for discrepancies between Zarr's initialized chunks and the chunks written to disk. The function for this validation is shown below.
 
-```python theme=sunrise
+```python theme="sunrise"
 def validate_zarr_store(target, raise_on_error=True):
     """Validate a Zarr store.
     Parameters
@@ -176,7 +176,7 @@ Dask is a widely used Python framework for parallel computing. It integrates wit
 
 Our downscaling pipeline required regridding certain datasets at different spatial resolutions. We turned to [xESMF](https://pangeo-xesmf.readthedocs.io/en/latest/), which is a Python wrapper for the Fortran-based [ESMF](https://earthsystemmodeling.org/docs/release/ESMF_5_2_0/ESMF_refdoc/node2.html). While this library worked for our purposes, we encountered issues when combined with Dask’s parallelism. Specifically, using xESMF in a multi-threaded setting resulted in an intermittent, opaque error:
 
-```python theme=sunrise
+```python theme="sunrise"
 ValueError: ESMC_GridCreateNoPeriDim() failed with rc = 545.
 Please check the log files (named "*ESMF_LogFile").
 ```

posts/maps-library-release.md

@@ -74,7 +74,7 @@ const colormap = useColormap('warm')
   <Raster
     colormap={colormap}
     clim={[-20,30]}
-    source={bucket + 'v1/demo/2d/tavg'}
+    source={bucket + 'v2/demo/2d/tavg'}
     variable={'​​tavg'}
   />
 </Map>
@@ -106,7 +106,7 @@ With the same component, we can just as easily render a 4D map where the third d
 <Raster
   colormap={colormap}
   clim={clim}
-  source={bucket + 'v1/demo/4d/tavg-prec-month'}
+  source={bucket + 'v2/demo/4d/tavg-prec-month'}
   variable={'climate'}
   selector={{ band, month }}
 />
@@ -122,7 +122,7 @@ In more advanced settings, we might want more control over rendering, including
 <Raster
   colormap={colormap}
   clim={[-20, 30]}
-  source={bucket + 'v1/demo/3d/tavg-month'}
+  source={bucket + 'v2/demo/3d/tavg-month'}
   variable={'tavg'}
   selector={{ month: [1, 2] }}
   frag={`

posts/maps-library-release/maps-demo-2d.js

@@ -31,7 +31,7 @@ const MapDemo2d = () => {
         <Raster
           colormap={colormap}
           clim={[-20, 30]}
-          source={bucket + 'v1/demo/2d/tavg'}
+          source={bucket + 'v2/demo/2d/tavg'}
           variable={'tavg'}
           dimensions={['y', 'x']}
         />

posts/maps-library-release/maps-demo-4d.js

@@ -48,7 +48,7 @@ const MapDemo4d = () => {
             <Raster
               colormap={colormap}
               clim={CLIMS[band]}
-              source={bucket + 'v1/demo/4d/tavg-prec-month'}
+              source={bucket + 'v2/demo/4d/tavg-prec-month'}
               variable={'climate'}
               dimensions={['band', 'month', 'y', 'x']}
               selector={{ band, month }}

posts/soil-protocols-added.md

@@ -81,22 +81,14 @@ Combining the new analysis with our results from before, we can look at all the
 <Figure>
   <ScoreSummary />
   <FigureCaption>
-    Summary table of our results. Each protocol is a row. The{' '}
-    <Box as='span' sx={{ color: 'orange' }}>
-      *
-    </Box>{' '}
+    Summary table of our results. Each protocol is a row. The <Orange>*</Orange>{' '}
     indicates new additions. The first four columns show scores along four
     individual metrics (each on a scale from 1 to 3) and the final column shows
-    the overall rating (on a scale from 1 to 5). For more details, check out the{' '}
-    <Link
-      href='/research/soil-protocols'
-      sx={{ color: 'secondary', '&:hover': { color: 'primary' } }}
-    >
-      interactive version
-    </Link>{' '}
-    of this table. Abbreviations: Grazing (G), Compost (C), Cropping (Cr),
-    Improved Agriculture (IA), Sustainable Agriculture (SA), Fire + Grazing
-    (FG), Austrailia (Aus), Alberta (Alb)
+    the overall rating (on a scale from 1 to 5). For more details, check out the
+    [interactive version](/research/soil-protocols) of this table.
+    Abbreviations: Grazing (G), Compost (C), Cropping (Cr), Improved Agriculture
+    (IA), Sustainable Agriculture (SA), Fire + Grazing (FG), Australia (Aus),
+    Alberta (Alb)
   </FigureCaption>
 </Figure>