Merge pull request #5 from HowyoungZhou/dev

Fix Inline Code; Fix Images; Optimize Style

example/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "gatsby": "^5.11.0",
     "gatsby-source-filesystem": "^5.11.0",
-    "gatsby-theme-blog-ocean": "1.0.0",
+    "gatsby-theme-blog-ocean": "1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

example/posts/en/markdown-test.md

@@ -124,6 +124,10 @@ Ad amet irure est magna id mollit Lorem in do duis enim. Excepteur velit nisi ma
 
 Et fugiat ad nisi amet magna labore do cillum fugiat occaecat cillum Lorem proident. In sint dolor ullamco ad do adipisicing amet id excepteur Lorem aliquip sit irure veniam laborum duis cillum. Aliqua occaecat minim cillum deserunt magna sunt laboris do do irure ea nostrud consequat ut voluptate ex.
 
+```
+ls -la
+```
+
 ```go
 package main
 
@@ -147,6 +151,8 @@ Ex amet id ex aliquip id do laborum excepteur exercitation elit sint commodo occ
 
 # Inline elements
 
+![gatsby](../../assets/img.jpg)
+
 Sint ea anim ipsum ad commodo cupidatat do **exercitation** incididunt et minim ad labore sunt. Minim deserunt labore laboris velit nulla incididunt ipsum nulla. Ullamco ad laborum ea qui et anim in laboris exercitation tempor sit officia laborum reprehenderit culpa velit quis. **Consequat commodo** reprehenderit duis irure esse esse exercitation minim enim Lorem dolore duis irure. Nisi Lorem reprehenderit ea amet excepteur dolor excepteur magna labore proident voluptate ipsum. Reprehenderit ex esse deserunt aliqua ea officia mollit Lorem nulla magna enim. Et ad ipsum labore enim ipsum **cupidatat consequat**. Commodo non ea cupidatat magna deserunt dolore ipsum velit nulla elit veniam nulla eiusmod proident officia.
 
 ![Super wide](http://placekitten.com/1280/800)

gatsby-theme-blog-ocean/gatsby-config.mjs

@@ -57,7 +57,7 @@ export default (options) => {
               resolve: `gatsby-remark-images`,
               options: {
                 maxWidth: maxImageWidth,
-                linkImagesToOriginal: false,
+                linkImagesToOriginal: true,
               },
             },
             { resolve: `gatsby-remark-copy-linked-files` },

gatsby-theme-blog-ocean/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-blog-ocean",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A blog theme for Gatsby.",
   "repository": "https://github.com/HowyoungZhou/gatsby-theme-blog-ocean.git",
   "author": "Howyoung <howyoung3@gmail.com>",

gatsby-theme-blog-ocean/src/components/code-block.tsx

@@ -1,4 +1,5 @@
-import {Highlight, Language, PrismTheme } from 'prism-react-renderer';
+import { styled } from '@mui/material';
+import { Highlight, Language, PrismTheme } from 'prism-react-renderer';
 import React from 'react';
 
 export interface CodeBlockProps {
@@ -8,7 +9,7 @@ export interface CodeBlockProps {
   theme?: PrismTheme;
 }
 
-export default function CodeBlock({ children, className, theme, style: outerStyle }: CodeBlockProps) {
+export default function CodeBlock({ children, className, theme, sx }: CodeBlockProps) {
   const lang = className?.match(/language-(?<lang>.*)/)?.groups?.lang || '';
 
   return (
@@ -17,17 +18,23 @@ export default function CodeBlock({ children, className, theme, style: outerStyl
       language={lang as Language}
       theme={theme}
     >
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <code className={className} style={{ display: 'block', ...style, ...outerStyle }}>
-          {tokens.map((line, i) => (
-            <div key={i} {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span key={key} {...getTokenProps({ token, key })} />
-              ))}
-            </div>
-          ))}
-        </code>
-      )}
+      {({ className, style, tokens, getLineProps, getTokenProps }) => {
+        const Code = React.useMemo(() => styled('code')({
+          display: 'block',
+          ...style,
+        }), [style]);
+        return (
+          <Code className={className} sx={sx}>
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </Code>
+        )
+      }}
     </Highlight>
   )
 }

gatsby-theme-blog-ocean/src/templates/components.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '@mui/material';
+import { styled, useTheme } from '@mui/material';
 import Checkbox from '@mui/material/Checkbox';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
@@ -9,33 +9,35 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import { Link } from "gatsby-material-ui-components";
-import {themes} from 'prism-react-renderer';
+import { themes } from 'prism-react-renderer';
 import React, { memo } from 'react';
 import CodeBlock from '../components/code-block';
 
+const Img = styled('img')({ maxWidth: '100%' });
+
 const components = {
   p: (() => {
-    const Paragraph = props => <Typography {...props} style={{ margin: '8px 0' }} />;
+    const Paragraph = props => <Typography {...props} sx={{ my: 1 }} />;
     return memo(Paragraph);
   })(),
   h1: (() => {
-    const H1 = props => <Typography {...props} component="h1" variant="h3" style={{ margin: '24px 0 8px' }} />;
+    const H1 = props => <Typography {...props} component="h1" variant="h3" sx={{ mt: 3, mb: 1 }} />;
     return memo(H1);
   })(),
   h2: (() => {
-    const H2 = props => <Typography {...props} component="h2" variant="h4" style={{ margin: '24px 0 8px' }} />;
+    const H2 = props => <Typography {...props} component="h2" variant="h4" sx={{ mt: 3, mb: 1 }} />;
     return memo(H2);
   })(),
   h3: (() => {
-    const H3 = props => <Typography {...props} component="h3" variant="h5" style={{ margin: '24px 0 8px' }} />;
+    const H3 = props => <Typography {...props} component="h3" variant="h5" sx={{ mt: 3, mb: 1 }} />;
     return memo(H3);
   })(),
   h4: (() => {
-    const H4 = props => <Typography {...props} component="h4" variant="h6" style={{ margin: '16px 0 8px' }} />;
+    const H4 = props => <Typography {...props} component="h4" variant="h6" sx={{ mt: 2, mb: 1 }} />;
     return memo(H4);
   })(),
   h5: (() => {
-    const H5 = props => <Typography {...props} component="h5" variant="subtitle2" style={{ margin: '16px 0 8px' }} />;
+    const H5 = props => <Typography {...props} component="h5" variant="subtitle2" sx={{ mt: 2, mb: 1 }} />;
     return memo(H5);
   })(),
   h6: (() => {
@@ -46,17 +48,17 @@ const components = {
     const Blockquote = props => {
       const theme = useTheme();
       return (
-        <Paper style={{ borderLeft: `5px solid ${theme.palette.primary.light}`, padding: '4px 24px', margin: '16px 0' }} {...props} />
+        <Paper sx={{ borderLeft: `5px solid ${theme.palette.primary.light}`, py: 0.5, px: 3, my: 2 }} {...props} />
       )
     };
     return memo(Blockquote);
   })(),
   ul: (() => {
-    const Ul = props => <Typography {...props} component="ul" style={{ paddingLeft: 30 }} />;
+    const Ul = props => <Typography {...props} component="ul" />;
     return memo(Ul);
   })(),
   ol: (() => {
-    const Ol = props => <Typography {...props} component="ol" style={{ marginTop: 0, marginBottom: 16 }} />;
+    const Ol = props => <Typography {...props} component="ol" />;
     return memo(Ol);
   })(),
   li: (() => {
@@ -94,25 +96,18 @@ const components = {
   code: (() => {
     const CodeBlk = props => {
       const theme = useTheme();
-      return (
+      return props.children.includes('\n') ? (
         <CodeBlock
           {...props}
-          style={{ padding: 20, overflowX: 'auto', borderRadius: 5 }}
+          sx={{ padding: 2, overflowX: 'auto', borderRadius: 1 }}
           theme={theme.palette.mode === 'light' ? themes.github : themes.dracula}
         />
+      ) : (
+        <Typography {...props} component="code" sx={{ color: theme.palette.secondary.main, fontFamily: 'monospace' }} />
       );
     };
     return memo(CodeBlk);
   })(),
-  inlineCode: (() => {
-    const InlineCode = props => {
-      const theme = useTheme();
-      return (
-        <Typography {...props} component="code" style={{ color: theme.palette.secondary.main }} />
-      );
-    };
-    return memo(InlineCode);
-  })(),
   hr: Divider,
   input: (() => {
     const Input = props => {
@@ -132,6 +127,10 @@ const components = {
     const ALink = props => <Link {...props} />;
     return memo(ALink);
   })(),
+  img: (() => {
+    const Image = props => <Img {...props} alt={props.alt || ""} title={props.alt || ""} />;
+    return memo(Image);
+  })(),
 };
 
 export default components;

yarn.lock

@@ -8675,7 +8675,7 @@ __metadata:
   dependencies:
     gatsby: ^5.11.0
     gatsby-source-filesystem: ^5.11.0
-    gatsby-theme-blog-ocean: 1.0.0
+    gatsby-theme-blog-ocean: 1.0.1
     react: ^18.2.0
     react-dom: ^18.2.0
   languageName: unknown
@@ -9874,7 +9874,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"gatsby-theme-blog-ocean@1.0.0, gatsby-theme-blog-ocean@workspace:gatsby-theme-blog-ocean":
+"gatsby-theme-blog-ocean@1.0.1, gatsby-theme-blog-ocean@workspace:gatsby-theme-blog-ocean":
   version: 0.0.0-use.local
   resolution: "gatsby-theme-blog-ocean@workspace:gatsby-theme-blog-ocean"
   dependencies: