feat: add netlify partial component (#2134)

* feat: add netlify partial component

* chore: update fallback CMS partials API endpoint

* feat: update blog link to netlify

* feat: add redirect for linked blog posts

* chore: update blog links to relative links

* feat: move blog url to env

* feat: remove blog route

* chore: update blog links

* chore: remove old blog code

* chore: update default blog url

* feat: add netlify partials css

.github/workflows/website.yml

@@ -112,6 +112,7 @@ jobs:
           SENTRY_ORG: protocol-labs-it
           SENTRY_PROJECT: frontend
           SENTRY_URL: https://sentry.io/
+          NEXT_PUBLIC_BLOG_URL: https://blog.nft.storage
         run: yarn build:website
       - name: Website - Deploy
         run: npx wrangler pages publish --project-name nft-storage --branch main ./packages/website/out

packages/website/README.md

@@ -31,7 +31,7 @@ To add a new FAQ, add an entry to the `faqContent` object in `lib/faqContent.js`
 
 ### Blog
 
-Blog post content lives in [`posts`](./posts/). To create a new blog post, create a new Markdown in that folder, with a YAML "front matter" block to define some metadata. You can copy an existing post to get an idea of the metadata format.
+Blog posts are managed at blog.nft.storage, a separate application managed by Netlify.
 
 ### ToS
 

packages/website/components/navbar.js

@@ -11,6 +11,9 @@ import { getMagic } from '../lib/magic.js'
 import { useQueryClient } from 'react-query'
 import Logo from '../components/logo'
 import { useUser } from 'lib/user.js'
+import constants from 'lib/constants'
+
+const BLOG_URL = constants.BLOG_URL
 
 /**
  * Navbar Component
@@ -95,8 +98,7 @@ export default function Navbar({ bgColor = 'bg-nsorange', logo, user }) {
       },
       {
         link: {
-          pathname: '/blog',
-          query: version ? { version } : null,
+          pathname: BLOG_URL,
         },
         name: 'Blog',
       },

packages/website/components/netlifyPartial.js

@@ -0,0 +1,64 @@
+import { MDXRemote } from 'next-mdx-remote'
+import { useState, useEffect } from 'react'
+import Loading from './loading'
+
+/**
+ * @typedef {Object} NetlifyPartialProps
+ * @prop {string} [route]
+ * @prop {string} [className]
+ * @prop {JSX.Element} [fallback]
+ */
+
+/**
+ *
+ * @param {NetlifyPartialProps} props
+ * @returns {JSX.Element}
+ */
+export default function NetlifyPartial({ route, className, fallback }) {
+  /** @type [any, null | any] */
+  const [content, setContent] = useState()
+  const [error, setError] = useState(false)
+  useEffect(() => {
+    // TODO: Update fallback when we have the blog in production.
+    const host =
+      process.env.NEXT_PUBLIC_NETLIFY_CMS_ENDPOINT || 'https://blog.nft.storage'
+    fetch(`${host}/api/partials/${route}`)
+      .then(async (response) => {
+        return await response.text()
+      })
+      .then((text) => {
+        const obj = JSON.parse(text)
+        setContent(obj.props.partial.content)
+      })
+      .catch((e) => {
+        setError(e)
+      })
+  }, [route])
+
+  if (error) {
+    if (fallback) {
+      return <div className={className}>{fallback}</div>
+    }
+    return (
+      <div className={className}>
+        <p>An unexpected error occured.</p>
+      </div>
+    )
+  }
+
+  if (!content) {
+    return (
+      <div className={className}>
+        <Loading />
+      </div>
+    )
+  }
+
+  return (
+    content && (
+      <div className={className}>
+        <MDXRemote {...content} />
+      </div>
+    )
+  )
+}

packages/website/lib/constants.js

@@ -1,5 +1,8 @@
 let API = /** @type {string} **/ process.env.NEXT_PUBLIC_API || ''
 let MAGIC_TOKEN = /** @type {string} **/ process.env.NEXT_PUBLIC_MAGIC || ''
+const BLOG_URL =
+  /** @type {string} **/ process.env.NEXT_PUBLIC_BLOG_URL ||
+  'https://blog.nft.storage'
 export const NFT_PORT_ENDPOINT =
   /** @type {string} **/ process.env.NEXT_PUBLIC_NFT_PORT_ENDPOINT ||
   'https://api.nftport.xyz/v0/reports/uris'
@@ -38,6 +41,7 @@ export default {
   AUTHENTICATED_ROUTES,
   API: API,
   MAGIC_TOKEN: MAGIC_TOKEN,
+  BLOG_URL: BLOG_URL,
   NFT_PORT_ENDPOINT: NFT_PORT_ENDPOINT,
   NFT_PORT_API_KEY: NFT_PORT_API_KEY,
 }

packages/website/lib/countly.js

@@ -24,7 +24,6 @@ export const events = {
   // Other custom action events
   LOGIN_CLICK: 'loginClick',
   LOGOUT_CLICK: 'logoutClick',
-  BLOG_SUBSCRIBE_CLICK: 'blogSubscribeClick',
   FILE_UPLOAD_CLICK: 'fileUploadClick',
   FILE_DELETE_CLICK: 'fileDeleteClick',
   FILES_NAVIGATION_CLICK: 'filesNavigationClick',
@@ -41,9 +40,6 @@ export const ui = {
   HOME_GET_STARTED: 'home/get-started',
   NAVBAR: 'navbar',
   LOGIN: 'login',
-  BLOG_CARD: 'blog/card',
-  BLOG_POST: 'blog/post',
-  BLOG_SUBSCRIBE: 'blog/subscribe',
   FILES: 'files',
   NEW_FILE: 'new-file',
   NEW_TOKEN: 'new-token',

packages/website/next.config.js

@@ -25,6 +25,15 @@ const nextConfig = withBundleAnalyzer({
   images: {
     loader: 'custom',
   },
+  redirects: async function () {
+    return [
+      {
+        source: '/blog/post/:path*',
+        destination: `${process.env.NEXT_PUBLIC_BLOG_URL}/posts/:path*`,
+        permanent: false,
+      },
+    ]
+  },
   exportPathMap: async function () {
     return {
       '/ipfs-404.html': { page: '/404' },