Create new developer page

MetaMask · Nov 10, 2023 · 84c2195 · 84c2195
1 parent f26566c
commit 84c2195
Show file tree

Hide file tree

Showing 41 changed files with 2,087 additions and 172 deletions.
diff --git a/fetchDataSSR.js b/fetchDataSSR.js
@@ -0,0 +1,97 @@
+const axios = require('axios')
+
+async function fetchDevChangeLog(token) {
+  const convertDate = dateString => {
+    if (!dateString) return
+    const options = { month: 'short', day: 'numeric', year: 'numeric' }
+    let date = new Date(dateString)
+    return date.toLocaleDateString('en-US', options)
+  }
+
+  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
+  const changeLogData = Promise.allSettled([
+    axios.get(
+      'https://api.github.com/repos/MetaMask/metamask-sdk/releases/latest'
+    ),
+    axios.get(
+      'https://api.github.com/repos/MetaMask/snaps/releases/latest'
+    ),
+    axios.get(
+      'https://raw.githubusercontent.com/Consensys/doc.zk-evm/main/docs/build-on-linea/linea-version/index.mdx'
+    ),
+    axios.get(
+      'https://raw.githubusercontent.com/Consensys/infura-sdk/main/CHANGELOG.md'
+    )
+  ]).then(response => {
+    const data = []
+    const siteData = [
+      {
+        title: 'MetaMask SDK',
+        type: 'metamask',
+        url: 'https://github.com/MetaMask/metamask-sdk/releases'
+      },
+      {
+        title: 'MetaMask Snaps',
+        type: 'metamask',
+        url: 'https://github.com/MetaMask/snaps/releases'
+      },
+      {
+        title: 'Linea',
+        type: 'linea',
+        url: 'https://docs.linea.build/build-on-linea/linea-version'
+      },
+      {
+        title: 'Infura SDK',
+        type: 'infura-sdk',
+        url: 'https://github.com/Consensys/infura-sdk/blob/main/CHANGELOG.md'
+      }
+    ]
+    response.forEach((site, index) => {
+      if (site.status === 'fulfilled' && site.value?.status === 200) {
+        switch (index) {
+          case 0:
+          case 1:
+            data.push({
+              title: siteData[index].title,
+              version: site.value.data.tag_name,
+              content: site.value.data.body,
+              date: convertDate(site.value.data.created_at),
+              type: siteData[index].type,
+              url: siteData[index].url
+            })
+            break;
+          case 2:
+            const text2 = site.value.data
+            const match2 = text2?.match(/## Linea([\s\S]+?)## Linea/)
+            if (match2 && match2[1]) {
+              data.push({
+                title: siteData[index].title,
+                content: match2[1],
+                type: siteData[index].type,
+                url: siteData[index].url
+              })
+            }
+            break;
+          case 3:
+            const text = site.value.data
+            const match = text?.match(/####([\s\S]+?)####/)
+            if (match && match[0]) {
+              data.push({
+                title: siteData[index].title,
+                content: match[0],
+                type: siteData[index].type,
+                url: siteData[index].url
+              })
+            }
+            break;
+          default:
+            break;
+        }
+      }
+    })
+    return data;
+  })
+  return changeLogData;
+}
+
+module.exports.fetchDevChangeLog = fetchDevChangeLog
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -2,6 +2,7 @@ const path = require('path')
 const { getNewsUrl } = require(`./src/lib/utils/news`)
 const { buildSitemap } = require(`./src/lib/utils/sitemap`)
 const { minimatch } = require('minimatch')
+const { fetchDevChangeLog } = require('./fetchDataSSR')
 
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage, createRedirect } = actions
@@ -16,6 +17,7 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     }
   `)
+  const devChangelogData = await fetchDevChangeLog(process.env.GH_TOKEN)
 
   redirects.data?.allRedirects.nodes.forEach(r =>
     createRedirect({
@@ -90,6 +92,7 @@ exports.createPages = async ({ graphql, actions }) => {
             themeColor
             isFaqLayout
             h2FontSize
+            widerContainer
           }
         }
       }
@@ -111,6 +114,7 @@ exports.createPages = async ({ graphql, actions }) => {
             header,
             themeColor,
             isFaqLayout,
+            widerContainer,
             h2FontSize,
           } = p.node
           const { contentful_id: footerId = '' } = footer || {}
@@ -153,6 +157,7 @@ exports.createPages = async ({ graphql, actions }) => {
             return
           }
 
+          const extraData = slug === "/developer/" ? devChangelogData : null
           createPage({
             path: slug, // slug validation in Contentful CMS
             component: path.resolve(`./src/templates/ContentfulLayout.js`),
@@ -166,6 +171,8 @@ exports.createPages = async ({ graphql, actions }) => {
               pathBuild: slug,
               isFaqLayout,
               h2FontSize,
+              widerContainer,
+              extraData,
             },
           })
         })

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "author": "MetaMask • A ConsenSys Formation",
   "license": "MIT",
   "scripts": {
-    "develop": "gatsby develop",
+    "dev": "gatsby develop",
     "build": "gatsby build",
     "deploy": "yarn build && touch public/.nojekyll && touch public/CNAME && echo \"metamask.io\" >> public/CNAME",
     "build:dev": "ACTIVE_ENV=development gatsby build",
@@ -68,6 +68,7 @@
     "react-hubspot-form": "^1.3.7",
     "react-markdown": "^8.0.7",
     "react-responsive": "^9.0.0-beta.4",
+    "react-slick": "^0.29.0",
     "react-toastify": "^5.4.0",
     "reactjs-popup": "^2.0.5",
     "rehype-raw": "^6.1.1",

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -126,7 +126,7 @@ const ButtonWrapper = styled(Link)`
       ? `
   background: transparent !important;
   color: #fff;
-  border: 2px solid #fff;
+  border: 1px solid #fff;
   transition: background-color 300ms ease, border 300ms ease, color 300ms ease;
   @media (min-width: ${theme.device.miniDesktop}){
     &:hover {
@@ -142,7 +142,7 @@ const ButtonWrapper = styled(Link)`
       ? `
     background: transparent !important;
     color: ${theme.button.primary.bg};
-    border: 2px solid ${theme.button.primary.bg};
+    border: 1px solid ${theme.button.primary.bg};
     @media (min-width: ${theme.device.miniDesktop}){
       &:hover {
         border-color: ${theme.button.primary.bgHover};

diff --git a/src/components/CTA.js b/src/components/CTA.js
@@ -41,6 +41,7 @@ const CTA = props => {
     buttonSecondary,
     socialLink,
     previewMode = false,
+    showCaretRight,
   } = props
 
   const [keyBrowser, setKeyBrowser] = React.useState('chrome')
@@ -75,6 +76,7 @@ const CTA = props => {
   }
   const handleCustomClick = e => {
     if (hubSpotForm) {
+      e.preventDefault()
       setShowPopup(true)
       return
     }
@@ -173,6 +175,9 @@ const CTA = props => {
         color={color}
         $typeLayout={typeLayout}
         onClick={handleCustomClick}
+        className={classnames({
+          'link-with-caret': showCaretRight,
+        })}
       >
         {socialLink ? <SocialIcon name={socialLink} /> : null}
         <LinkTitle

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -11,6 +11,8 @@ import CardFeatureHorizontal from './Card/CardFeatureHorizontal'
 import CardHorizontal from './Card/CardHorizontal'
 import CardHorizontalReverse from './Card/CardHorizontalReverse'
 import CardSnapsCategory from './Card/CardSnapsCategory'
+import CardDevBuilding from './Card/CardDevBuilding'
+import CardDevTutorial from './Card/CardDevTutorial'
 import CardNews from './Card/CardNews'
 import ContextClientSide from '../Context/ContextClientSide'
 import { contentfulModuleToComponent } from '../lib/utils/moduleToComponent'
@@ -65,6 +67,10 @@ const StyledCard = props => {
     case 'snaps-category':
       // code block
       return <CardSnapsCategory {...props} isDarkMode={isDarkMode} />
+    case 'dev-building':
+      return <CardDevBuilding {...props} isDarkMode={isDarkMode} />
+    case 'dev-tutorial':
+      return <CardDevTutorial {...props} isDarkMode={isDarkMode} />
     default:
     // code block
   }
@@ -108,7 +114,11 @@ const StyledCard = props => {
           <Inner isCtaType={isCtaType}>
             <InnerContent isCtaType={isCtaType}>
               {title ? (
-                <Title isCtaType={isCtaType} isEventType={isEventType}>
+                <Title
+                  isCtaType={isCtaType}
+                  isEventType={isEventType}
+                  className="title"
+                >
                   {title}
                 </Title>
               ) : null}
@@ -208,6 +218,21 @@ const CardInner = styled(Link)`
     border: 2px solid #037DD6;
   }
 
+  .card-dev-explore & {
+    border: 1px solid #e3e3e3;
+    border-radius: 12px;
+    padding: 20px;
+    height: 100%;
+    background-color: ${({ theme }) => theme.white};
+    body.dark-mode & {
+      background-color: ${({ theme }) => theme.dark};
+    }
+
+    .title {
+      margin-bottom: 8px;
+    }
+  }
+
   .theme-dark & {
     color: #222222 !important;
 
@@ -330,6 +355,10 @@ const ImageWrapper = styled.div`
     height: 31px;
   }
 
+  .image-height-64 & {
+    height: 64px;
+  }
+
   @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
     .image-height-31 & {
       height: 62px;