youtube and images can now have captions and tweaking inline code

Riverscapes · Dec 13, 2023 · d285f67 · d285f67
1 parent f4c8491
commit d285f67
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 34 deletions.
diff --git a/.yarn/versions/772fdd83.yml b/.yarn/versions/772fdd83.yml
@@ -0,0 +1,2 @@
+undecided:
+  - "@riverscapes/developer-site"
diff --git a/sites/devsite/content/page/demo.mdx b/sites/devsite/content/page/demo.mdx
@@ -205,7 +205,7 @@ If you need a bit more control you can use the `<RSStaticImage />` HTML syntax.
 ```
 <RSStaticImage src='/images/demoStatic.jpg' to='../about-us' caption="This is a simple caption" style={{border: "20px solid orange"}}/>
 
-- **No Wrapping (advanced mode)**: You can add a `noWrap` attribute to remove all the fitting, centering and img wrapping. If you use this you will be left with the equivalent of a single unwrapped `<img />` tag. As you can see though, this is not necessarily going to play nice with our theme.
+- **No Wrapping (advanced mode)**: You can add a `noWrap` attribute to remove all the fitting, centering and img wrapping. If you use this you will be left with the equivalent of a single unwrapped `<img />` tag. As you can see though, this is not necessarily going to play nice with our theme. ***NOTE: IF YOU USE NOWRAP IT WILL IGNORE THE `caption` ATTRIBUTE.***
 
 
 ```typescript
@@ -287,13 +287,13 @@ Paragraph3 Elit labore aliquip exercitation dolor voluptate reprehenderit occaec
 
 ## Youtube embeds
 
-We have a custom component for youtube embedding
+We have a custom component for youtube embedding. There is an optional `caption` attribute that will add a caption to the video.
 
 ```tsx
-<Youtube embedId="1hPxGmTGarM" />
+<Youtube embedId="1hPxGmTGarM" caption="This is a simple caption" />
 ```
 
-<Youtube embedId="1hPxGmTGarM" />
+<Youtube embedId="1hPxGmTGarM" caption="This is a simple caption"/>
 
 
 You can also embed using the `<iframe />` from youtube but it's not as nice AND you should rename the attributes to be camelCase from `frameborder` to `frameBorder` and `allowfullscreen` to `allowFullScreen` or you get browser console warnings:

diff --git a/theme/package.json b/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@riverscapes/gatsby-theme",
   "description": "Riverscapes website powered by Gatsby and Markdown",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

diff --git a/theme/src/components/MDXErrorBoundary.tsx b/theme/src/components/MDXErrorBoundary.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { Typography, Alert, AlertTitle, Box } from '@mui/material'
-import 'prismjs/themes/prism-dark.css'
 import log from 'loglevel'
 
 interface ErrorBoundaryProps {

diff --git a/theme/src/components/MDXRender.tsx b/theme/src/components/MDXRender.tsx
@@ -164,7 +164,27 @@ const MDXRender: React.FC<React.PropsWithChildren> = ({ children }) => {
           ),
         }}
       >
-        {children}
+        <Box
+          // Any last-minute style injection can happen here
+          sx={{
+            // Inline code blocks need some tweaking from what prismjs gives us
+            '& code.language-text': {
+              color: '#555577',
+              fontSize: '0.9em',
+              fontFamily: '"JetBrains Mono", "Courier New", sans-serif',
+              background: '#44444444',
+              border: '1px solid #2a2a2a',
+              px: 1,
+              mx: 0.5,
+              py: 0.2,
+              borderRadius: 1,
+              textShadow: 'none',
+              boxShadow: 'none',
+            },
+          }}
+        >
+          {children}
+        </Box>
       </MDXProvider>
     </MDXErrorBoundary>
   )

diff --git a/theme/src/components/RSStaticImage.tsx b/theme/src/components/RSStaticImage.tsx
@@ -5,7 +5,7 @@
 import React from 'react'
 import { withPrefix } from 'gatsby'
 import { RSLink } from './RSLink'
-import { Box, Stack, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 
 type RSStaticImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   src: string

diff --git a/theme/src/components/YoutubeEmbed.tsx b/theme/src/components/YoutubeEmbed.tsx
@@ -1,35 +1,43 @@
 import React from 'react'
-import { Box } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 
 interface YoutubeEmbedProps {
   embedId: string
+  caption?: string
 }
 
-export const YoutubeEmbed: React.FC<YoutubeEmbedProps> = ({ embedId }) => {
+export const YoutubeEmbed: React.FC<YoutubeEmbedProps> = ({ embedId, caption }) => {
   return (
-    <Box
-      sx={{
-        overflow: 'hidden',
-        pb: '56.25%',
-        position: 'relative',
-        height: 0,
-        '&>iframe': {
-          left: 0,
-          top: 0,
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-        },
-      }}
-    >
-      <iframe
-        width="853"
-        height="480"
-        src={`https://www.youtube.com/embed/${embedId}`}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
-        title="Embedded youtube"
-      />
-    </Box>
+    <Stack>
+      <Box
+        sx={{
+          overflow: 'hidden',
+          pb: '56.25%',
+          position: 'relative',
+          height: 0,
+          '&>iframe': {
+            left: 0,
+            top: 0,
+            height: '100%',
+            width: '100%',
+            position: 'absolute',
+          },
+        }}
+      >
+        <iframe
+          width="853"
+          height="480"
+          src={`https://www.youtube.com/embed/${embedId}`}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          title="Embedded youtube"
+        />
+      </Box>
+      {caption && (
+        <Typography variant="caption" style={{ textAlign: 'center', width: '100%' }}>
+          {caption}
+        </Typography>
+      )}
+    </Stack>
   )
 }