Feat: Technical blog

docusaurus.config.js

@@ -1,7 +1,7 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-import remarkMath from 'remark-math';
-import rehypeKatex from 'rehype-katex';
+const math = require('remark-math');
+const katex = require('rehype-katex');
 
 const lightCodeTheme = require('prism-react-renderer/themes/github')
 const darkCodeTheme = require('prism-react-renderer/themes/dracula')
@@ -55,15 +55,22 @@ const config = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           routeBasePath: '/',
-          remarkPlugins: [remarkMath],
-          rehypePlugins: [rehypeKatex],
+          remarkPlugins: [math],
+          rehypePlugins: [katex],
           editUrl: `https://github.com/axieinfinity/ronin-documentation/edit/main`,
           editLocalizedFiles: false,
           editCurrentVersion: false,
           showLastUpdateTime: true,
         },
         blog: {
+          path: 'blog',
+          blogTitle: 'Technical blog',
+          blogDescription: 'Learn about the latest updates on Ronin',
+          routeBasePath: 'blog',
+          blogSidebarTitle: 'Technical blog',
           showReadingTime: true,
+          remarkPlugins: [math],
+          rehypePlugins: [katex],
         },
         theme: {
           customCss: require.resolve('./src/css/custom.scss'),
@@ -173,6 +180,12 @@ const config = {
             label: 'Bridge operators',
             to: 'bridge-operators',
           },
+          // Blog
+          {
+            label: 'Blog',
+            to: 'blog',
+            position: 'right',
+          },
           // Search
           {
             type: 'search',
@@ -194,11 +207,6 @@ const config = {
                 label: 'X',
                 href: 'https://twitter.com/ronin_network',
               },
-              {
-                type: 'link',
-                label: 'Blog',
-                href: 'https://roninchain.com/blog/',
-              },
             ],
           },
           {

package.json

@@ -31,8 +31,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-loadable": "^5.5.0",
-    "rehype-katex": "7",
-    "remark-math": "6",
+    "rehype-katex": "^7.0.0",
+    "remark-math": "^6.0.0",
     "sass": "^1.49.9",
     "webpack": "^5.80.0"
   },

src/components/homepage-features/Features.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 
-import BoxTickIcon from './box-tick.svg'
 import { Card } from './Card'
+import BlogIcon from './blog.svg'
+import BoxTickIcon from './box-tick.svg'
 import CoinIcon from './coins.svg'
 import AppsIcon from './apps.svg'
 import ListViewIcon from './list-view.svg'
@@ -53,6 +54,15 @@ const featureList = [
       title: 'Bridge operators',
     },
   },
+  {
+    title: 'Technical blog',
+    Icon: BlogIcon,
+    description: <>Stay up to date with the latest technical updates on Ronin.</>,
+    link: {
+      href: '/blog',
+      title: 'Technical blog',
+    },
+  },
 ]
 
 export const Features: React.FC = () => {

yarn.lock

@@ -8898,7 +8898,7 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
-rehype-katex@7:
+rehype-katex@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/rehype-katex/-/rehype-katex-7.0.0.tgz#f5e9e2825981175a7b0a4d58ed9816c33576dfed"
   integrity sha512-h8FPkGE00r2XKU+/acgqwWUlyzve1IiOKwsEkg4pDL3k48PiE0Pt+/uLtVHDVkN1yA4iurZN6UES8ivHVEQV6Q==
@@ -8968,7 +8968,7 @@ remark-gfm@^4.0.0:
     remark-stringify "^11.0.0"
     unified "^11.0.0"
 
-remark-math@6:
+remark-math@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/remark-math/-/remark-math-6.0.0.tgz#0acdf74675f1c195fea6efffa78582f7ed7fc0d7"
   integrity sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==