reverse proxy for the pages.near.org blog

next.config.js

@@ -192,10 +192,6 @@ const nextConfig = {
       source: '/api/analytics/:path*',
       destination: 'https://near.dataplane.rudderstack.com/:path*',
     },
-    {
-      source: '/blog/:path*',
-      destination: '/blog/:path*/index.html',
-    },
   ],
   headers: async () => [
     {

src/pages/blog/[[...pages]].tsx

@@ -5,27 +5,43 @@ import { useDefaultLayout } from '@/hooks/useLayout';
 import type { NextPageWithLayout } from '@/utils/types';
 
 export const getServerSideProps = (async ({ resolvedUrl }) => {
-  const blogParts = resolvedUrl.split('blog/');
-  const blog_branch = 'https://near.org' === process.env.NEXT_PUBLIC_HOSTNAME ? 'main' : 'develop';
-  let title = 'index.html';
-  if (blogParts[1] !== title) {
-    title = `${blogParts[1].substring(0, blogParts[1].indexOf('/'))}/index.html`;
-  }
-  const res = await fetch(
-    `https://raw.githubusercontent.com/near/nearorg_marketing/${blog_branch}/public/blog/${title}`,
-  ).catch((e) => {
+  const remoteUrl = `https://pages.near.org${resolvedUrl}`;
+  const res = await fetch(remoteUrl).catch((e) => {
     throw e;
   });
 
-  const __html = await (await res.blob()).text();
+  const html = await (await res.blob()).text();
 
-  return { props: { bloghtml: { __html } } };
+  const replacedHtml = replaceAll(html);
+
+  return { props: { bloghtml: { __html: replacedHtml } } };
 }) satisfies GetServerSideProps<{ bloghtml: any }>;
 
+function searchAndReplace(content: string, searchString: string, replacementString: string): string {
+  const regex = new RegExp(searchString, 'g');
+  return content.replace(regex, replacementString);
+}
+
+function replaceAll(bloghtml: string): string {
+  bloghtml = searchAndReplace(bloghtml, '\\/wp\\-content', 'https://pages.near.org/wp-content');
+  bloghtml = searchAndReplace(bloghtml, 'https:\\/\\/pages\\.near\\.org\\/', '/');
+  bloghtml = searchAndReplace(bloghtml, '="\\/wp\\-content', '="https://pages.near.org/wp-content');
+  bloghtml = searchAndReplace(bloghtml, '="\\/wp\\-includes', '="https://pages.near.org/wp-includes');
+  bloghtml = searchAndReplace(bloghtml, '\\?paged=', 'page/');
+  bloghtml = searchAndReplace(
+    bloghtml,
+    '=https:\\/\\/s3\\-eu\\-west\\-2\\.amazonaws\\.com\\/lawcom\\-prod\\-storage\\-11jsxou24uy7q\\/uploads\\/2022\\/07\\/Digital\\-Assets\\-Consultation\\-Paper\\-Law\\-Commission\\-1\\.pdf',
+    '',
+  );
+
+  return bloghtml;
+}
+
 const StaticBlogPage: NextPageWithLayout = (props) => {
   const onBlogLinkClick = useCallback((event: any) => {
     const url = event.target.href;
     if (url) {
+      // keeps /blog links from opening in a new window
       event.preventDefault();
       window.location = url;
     }
@@ -34,12 +50,24 @@ const StaticBlogPage: NextPageWithLayout = (props) => {
   useEffect(() => {
     //this query fetches almost all links, except the clickable elements that are children of a tags
     // like document.querySelectorAll("h3[class^='headline_type-4']")
-    document.querySelectorAll("a[href^='/blog").forEach((element) => {
+    document.querySelectorAll("a[href^='/blog']").forEach((element) => {
       element.addEventListener('click', onBlogLinkClick);
     });
 
+    // Remove the footer element
+    const footerElement = document.querySelector('.gateway-page-container .near-global-footer');
+    if (footerElement) {
+      footerElement.remove();
+    }
+
+    // Remove the top nav element (only shows up on `/blog/tag/*` pages)
+    const topNavElement = document.querySelector('.gateway-page-container nr-subnav');
+    if (topNavElement) {
+      topNavElement.remove();
+    }
+
     return () => {
-      document.querySelectorAll("a[href^='/blog").forEach((element) => {
+      document.querySelectorAll("a[href^='/blog']").forEach((element) => {
         element.removeEventListener('click', onBlogLinkClick);
       });
     };