Fix GitHub Pages assets and continue Hebrew translation

Author: Ravid-Levy

next.config.js

@@ -5,7 +5,32 @@
 /**
  * @type {import('next').NextConfig}
  **/
+// detect when we're building for GitHub Pages so we can set the
+// correct base path. the workflow sets GITHUB_REPOSITORY which looks
+// like "user/repo"; the repository name is used as the basePath.
+const isGitHubActions = process.env.GITHUB_ACTIONS === 'true';
+const repoName = isGitHubActions
+  ? '/' + process.env.GITHUB_REPOSITORY.split('/')[1]
+  : '';
+
 const nextConfig = {
+  // when exporting we need to tell Next.js to write to `out` and also
+  // make sure all asset references are prefixed with the base path
+  output: 'export',
+  basePath: repoName,
+  assetPrefix: repoName,
+  trailingSlash: true,
+  images: {
+    // Required for static export (GitHub Pages).
+    unoptimized: true,
+  },
+  env: {
+    // if we don't set this explicitly, the value would be empty at
+    // runtime in the browser. components that build their own
+    // `<img src="/…"/>` paths rely on this to know the correct prefix.
+    NEXT_PUBLIC_BASE_PATH: repoName,
+  },
+
   pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
   reactStrictMode: true,
   experimental: {
@@ -14,7 +39,6 @@ const nextConfig = {
     scrollRestoration: true,
     legacyBrowsers: false,
   },
-  env: {},
   webpack: (config, {dev, isServer, ...options}) => {
     if (process.env.ANALYZE) {
       const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

package.json

@@ -7,7 +7,7 @@
     "analyze": "ANALYZE=true next build",
     "dev": "next dev",
     "dev:remote-watch": "next-remote-watch ./src/content",
-    "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs",
+    "build": "next build && next export -o out && node --experimental-modules ./scripts/downloadFonts.mjs",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"",

src/components/Layout/HomeContent.js

@@ -632,39 +632,41 @@ function CTA({children, icon, href}) {
   );
 }
 
-const reactConf2021Cover = '/images/home/conf2021/cover.svg';
-const reactConf2019Cover = '/images/home/conf2019/cover.svg';
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
+const reactConf2021Cover = basePath + '/images/home/conf2021/cover.svg';
+const reactConf2019Cover = basePath + '/images/home/conf2019/cover.svg';
 const communityImages = [
   {
-    src: '/images/home/community/react_conf_fun.webp',
+    src: basePath + '/images/home/community/react_conf_fun.webp',
     alt: 'אנשים שרים קריוקי ב-React Conf',
   },
   {
-    src: '/images/home/community/react_india_sunil.webp',
+    src: basePath + '/images/home/community/react_india_sunil.webp',
     alt: 'Sunil Pai מרצה ב-React India',
   },
   {
-    src: '/images/home/community/react_conf_hallway.webp',
+    src: basePath + '/images/home/community/react_conf_hallway.webp',
     alt: 'שיחת מסדרון בין שני אנשים ב-React Conf',
   },
   {
-    src: '/images/home/community/react_india_hallway.webp',
+    src: basePath + '/images/home/community/react_india_hallway.webp',
     alt: 'שיחת מסדרון ב-React India',
   },
   {
-    src: '/images/home/community/react_conf_elizabet.webp',
+    src: basePath + '/images/home/community/react_conf_elizabet.webp',
     alt: 'Elizabet Oliveira מרצה ב-React Conf',
   },
   {
-    src: '/images/home/community/react_india_selfie.webp',
+    src: basePath + '/images/home/community/react_india_selfie.webp',
     alt: 'אנשים מצלמים סלפי קבוצתי ב-React India',
   },
   {
-    src: '/images/home/community/react_conf_nat.webp',
+    src: basePath + '/images/home/community/react_conf_nat.webp',
     alt: 'Nat Alison מרצה ב-React Conf',
   },
   {
-    src: '/images/home/community/react_india_team.webp',
+    src: basePath + '/images/home/community/react_india_team.webp',
     alt: 'מארגנים שמברכים את המשתתפים ב-React India',
   },
 ];
@@ -1000,35 +1002,35 @@ function Example3() {
       id: 'vids-0',
       title: 'React: The Documentary',
       description: 'סיפור המקור של React',
-      image: '/images/home/videos/documentary.webp',
+      image: basePath + '/images/home/videos/documentary.webp',
       url: 'https://www.youtube.com/watch?v=8pDqJVdNa44',
     },
     {
       id: 'vids-1',
       title: 'Rethinking Best Practices',
       description: 'Pete Hunt (2013)',
-      image: '/images/home/videos/rethinking.jpg',
+      image: basePath + '/images/home/videos/rethinking.jpg',
       url: 'https://www.youtube.com/watch?v=x7cQ3mrcKaY',
     },
     {
       id: 'vids-2',
       title: 'Introducing React Native',
       description: 'Tom Occhino (2015)',
-      image: '/images/home/videos/rn.jpg',
+      image: basePath + '/images/home/videos/rn.jpg',
       url: 'https://www.youtube.com/watch?v=KVZ-P-ZI6W4',
     },
     {
       id: 'vids-3',
       title: 'Introducing React Hooks',
       description: 'Sophie Alpert and Dan Abramov (2018)',
-      image: '/images/home/videos/hooks.jpg',
+      image: basePath + '/images/home/videos/hooks.jpg',
       url: 'https://www.youtube.com/watch?v=V-QO-KO90iQ',
     },
     {
       id: 'vids-4',
       title: 'היכרות עם Server Components',
       description: 'Dan Abramov and Lauren Tan (2020)',
-      image: '/images/home/videos/rsc.jpg',
+      image: basePath + '/images/home/videos/rsc.jpg',
       url: 'https://www.youtube.com/watch?v=TQQPAU21ZUw',
     },
   ];
@@ -2381,10 +2383,10 @@ function fetchTalks(confId) {
             url: 'https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1',
             image: {
               speakers: [
-                '/images/home/conf2021/andrew.jpg',
-                '/images/home/conf2021/lauren.jpg',
-                '/images/home/conf2021/juan.jpg',
-                '/images/home/conf2021/rick.jpg',
+                basePath + '/images/home/conf2021/andrew.jpg',
+                basePath + '/images/home/conf2021/lauren.jpg',
+                basePath + '/images/home/conf2021/juan.jpg',
+                basePath + '/images/home/conf2021/rick.jpg',
               ],
             },
           },
@@ -2394,7 +2396,7 @@ function fetchTalks(confId) {
             description: 'Shruti Kapoor',
             url: 'https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2',
             image: {
-              speakers: ['/images/home/conf2021/shruti.jpg'],
+              speakers: [basePath + '/images/home/conf2021/shruti.jpg'],
             },
           },
           {
@@ -2403,7 +2405,7 @@ function fetchTalks(confId) {
             description: 'Shaundai Person',
             url: 'https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3',
             image: {
-              speakers: ['/images/home/conf2021/shaundai.jpg'],
+              speakers: [basePath + '/images/home/conf2021/shaundai.jpg'],
             },
           },
           {

src/components/Layout/Page.tsx

@@ -114,7 +114,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         title={title}
         titleForTitleTag={meta.titleForTitleTag}
         isHomePage={isHomePage}
-        image={`/images/og-` + section + '.png'}
+        image={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/og-` + section + '.png'}
         searchOrder={searchOrder}
       />
       <SocialBanner />

src/components/MDX/Diagram.tsx

@@ -36,15 +36,15 @@ export function Diagram({
       {captionPosition === 'top' && <Caption text={children} />}
       <div className="dark-image">
         <Image
-          src={`/images/docs/diagrams/${name}.dark.png`}
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/docs/diagrams/${name}.dark.png`}
           alt={alt}
           height={height}
           width={width}
         />
       </div>
       <div className="light-image">
         <Image
-          src={`/images/docs/diagrams/${name}.png`}
+          src={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/docs/diagrams/${name}.png`}
           alt={alt}
           height={height}
           width={width}

src/components/MDX/MDXComponents.tsx

@@ -224,6 +224,8 @@ const IllustrationContext = React.createContext<{
   isInBlock: false,
 });
 
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
 function Illustration({
   caption,
   src,
@@ -238,12 +240,13 @@ function Illustration({
   authorLink: string;
 }) {
   const {isInBlock} = React.useContext(IllustrationContext);
+  const prefixedSrc = src.startsWith('/') ? basePath + src : src;
 
   return (
     <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
       <figure className="my-8 flex justify-center">
         <img
-          src={src}
+          src={prefixedSrc}
           alt={alt}
           style={{maxHeight: 300}}
           className="rounded-lg"
@@ -275,23 +278,26 @@ function IllustrationBlock({
   const imageInfos = Children.toArray(children).map(
     (child: any) => child.props
   );
-  const images = imageInfos.map((info, index) => (
-    <figure key={index}>
-      <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img
-          className="text-primary"
-          src={info.src}
-          alt={info.alt}
-          height={info.height}
-        />
-      </div>
-      {info.caption ? (
-        <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
-          {info.caption}
-        </figcaption>
-      ) : null}
-    </figure>
-  ));
+  const images = imageInfos.map((info, index) => {
+    const prefixed = info.src && info.src.startsWith('/') ? basePath + info.src : info.src;
+    return (
+      <figure key={index}>
+        <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
+          <img
+            className="text-primary"
+            src={prefixed}
+            alt={info.alt}
+            height={info.height}
+          />
+        </div>
+        {info.caption ? (
+          <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
+            {info.caption}
+          </figcaption>
+        ) : null}
+      </figure>
+    );
+  });
   return (
     <IllustrationContext.Provider value={isInBlockTrue}>
       <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">

src/components/Seo.tsx

@@ -39,7 +39,7 @@ export const Seo = withRouter(
   ({
     title,
     titleForTitleTag,
-    image = '/images/og-default.png',
+    image = (process.env.NEXT_PUBLIC_BASE_PATH || '') + '/images/og-default.png',
     router,
     children,
     isHomePage,

src/styles/index.css

@@ -639,7 +639,7 @@ ol.mdx-illustration-block {
   transform: translateY(-50%);
   width: 60px;
   height: 49px;
-  background: center / contain no-repeat url('/images/g_arrow.png');
+  background: center / contain no-repeat url("" + (process.env.NEXT_PUBLIC_BASE_PATH || '') + "/images/g_arrow.png");
 }
 .mdx-illustration-block li:first-child:after {
   content: ' ';

tailwind.config.js

@@ -53,8 +53,8 @@ module.exports = {
           'conic-gradient(from 90deg at -10% 100%, #BCC1CD 0deg, #BCC1CD 90deg, #FFFFFF 360deg)',
         'gradient-right':
           'conic-gradient(from -90deg at 110% 100%, #FFFFFF 0deg, #EBECF0 90deg, #EBECF0 360deg)',
-        'meta-gradient': "url('/images/meta-gradient.png')",
-        'meta-gradient-dark': "url('/images/meta-gradient-dark.png')",
+        'meta-gradient': "url('" + (process.env.NEXT_PUBLIC_BASE_PATH || '') + "/images/meta-gradient.png')",
+        'meta-gradient-dark': "url('" + (process.env.NEXT_PUBLIC_BASE_PATH || '') + "/images/meta-gradient-dark.png')",
       },
       maxWidth: {
         ...defaultTheme.maxWidth,