Merge branch 'dev' into contributorsJsonBug

Author: wackerow

src/components/PageMetadata.tsx

@@ -4,12 +4,7 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 
-import { DEFAULT_LOCALE, SITE_URL } from "@/lib/constants"
-
-import ogImageDapps from "@/public/doge-computer.png"
-import ogImageDevelopers from "@/public/enterprise-eth.png"
-import ogImageDefault from "@/public/home/hero.png"
-import ogImageUpgrades from "@/public/upgrades/upgrade_doge.png"
+import { SITE_URL } from "@/lib/constants"
 
 type NameMeta = {
   name: string
@@ -44,33 +39,38 @@ const PageMetadata: React.FC<IProps> = ({
   const desc = description || t("site-description")
   const siteTitle = t("site-title")
   const fullTitle = `${title} | ${siteTitle}`
+  const origin = process.env.NEXT_PUBLIC_SITE_URL || SITE_URL // TODO: Remove .env var usage after launch
+
+  // Remove any query params (?) or hash links (#)
+  const path = asPath.replace(/[\?\#].*/, "")
+  const slug = path.split("/")
 
   /* Set canonical URL w/ language path to avoid duplicate content */
   /* e.g. set ethereum.org/about/ to ethereum.org/en/about/ */
-  const canonical = canonicalUrl || join(SITE_URL, DEFAULT_LOCALE, asPath)
-  const url = locale ? join(SITE_URL, locale, asPath) : canonical
+  const url = new URL(join(locale!, path), origin).href
+  const canonical = canonicalUrl || url
 
   /* Set fallback ogImage based on path */
-  let ogImage = ogImageDefault.src
+  let ogImage = "/home/hero.png"
 
-  if (asPath.includes("/developers/")) {
-    ogImage = ogImageDevelopers.src
+  if (slug.includes("developers")) {
+    ogImage = "/enterprise-eth.png"
   }
 
-  if (asPath.includes("/dapps/")) {
-    ogImage = ogImageDapps.src
+  if (slug.includes("dapps")) {
+    ogImage = "/doge-computer.png"
   }
 
-  if (asPath.includes("/roadmap/")) {
-    ogImage = ogImageUpgrades.src
+  if (slug.includes("roadmap")) {
+    ogImage = "/upgrades/upgrade_doge.png"
   }
 
   if (image) {
     ogImage = image
   }
 
-  const ogImageUrl = join(SITE_URL, ogImage)
-  const metadata: Array<Meta> = [
+  const ogImageUrl = new URL(ogImage, origin).href
+  const metadata: Meta[] = [
     { name: `description`, content: desc },
     { name: `image`, content: ogImageUrl },
     { property: `og:title`, content: fullTitle },

src/components/ReleaseBanner.tsx

@@ -48,11 +48,12 @@ const HeroContainer = (props: ChildOnlyProp) => (
     mb={{ base: 8, lg: 0 }}
     maxH={{ base: "100%", lg: "none" }}
     {...props}
+    justify="space-between"
   />
 )
 
 const TitleCard = (props: ChildOnlyProp) => (
-  <Flex p={8} direction="column" justify="flex-start" {...props} />
+  <Flex w="full" p={8} direction="column" justify="flex-start" {...props} />
 )
 
 // Roadmap layout components
@@ -140,11 +141,6 @@ export const RoadmapLayout: React.FC<IProps> = ({
         />
       ) : (
         <HeroContainer>
-          <Flex
-            w="full"
-            flexDirection={{ base: "column", lg: "row" }}
-            justify="space-between"
-          >
             <TitleCard>
               {/* TODO: Double check this slug works */}
               <Breadcrumbs slug={slug} mb="8" />
@@ -186,12 +182,11 @@ export const RoadmapLayout: React.FC<IProps> = ({
                 src={frontmatter.image}
                 alt={frontmatter.alt ?? ""}
                 style={{ objectFit: "contain" }}
-                width={700}
+                width={1504}
                 height={345}
                 priority
               />
             </Center>
-          </Flex>
         </HeroContainer>
       )}
       <Page>

src/layouts/Roadmap.tsx

@@ -10,6 +10,7 @@ import Contributors from "@/components/Contributors"
 import EnergyConsumptionChart from "@/components/EnergyConsumptionChart"
 import FeedbackCard from "@/components/FeedbackCard"
 import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
+import { HubHero } from "@/components/Hero"
 import NetworkUpgradeSummary from "@/components/History/NetworkUpgradeSummary"
 import Link from "@/components/Link"
 import Logo from "@/components/Logo"
@@ -29,9 +30,12 @@ import TranslationChartImage from "@/components/TranslationChartImage"
 import UpcomingEventsList from "@/components/UpcomingEventsList"
 
 import { getLocaleTimestamp } from "@/lib/utils/time"
+import { isLangRightToLeft } from "@/lib/utils/translations"
 
 import { CONTENT_DIR } from "@/lib/constants"
 
+import GuideHeroImage from "@/public/heroes/guides-hub-hero.jpg"
+
 const Heading1 = (props: HeadingProps) => (
   <MdHeading1 fontSize={{ base: "2.5rem", md: "5xl" }} {...props} />
 )
@@ -101,43 +105,58 @@ export const StaticLayout: React.FC<IProps> = ({
         p={8}
         pt={{ base: 8, lg: 16 }}
       >
-        <Box
-          as="article"
-          maxW="container.md"
-          w="full"
-          sx={{
-            ".featured": {
-              ps: 4,
-              ms: -4,
-              borderInlineStart: "1px dotted",
-              borderInlineStartColor: "primary.base",
-            },
+        <Box>
+          {slug === "/guides/" ? (
+            <HubHero
+              heroImg={GuideHeroImage}
+              header={frontmatter.title}
+              title={""}
+              description={frontmatter.description}
+            />
+          ) : (
+            <>
+              <Breadcrumbs slug={slug} mb="8" />
+              <Text
+                color="text200"
+                dir={isLangRightToLeft(locale as Lang) ? "rtl" : "ltr"}
+              >
+                <Translation id="page-last-updated" />:{" "}
+                {getLocaleTimestamp(locale as Lang, lastUpdatedDate!)}
+              </Text>
+            </>
+          )}
+
+          <Box
+            as="article"
+            maxW="container.md"
+            w="full"
+            sx={{
+              ".featured": {
+                ps: 4,
+                ms: -4,
+                borderInlineStart: "1px dotted",
+                borderInlineStartColor: "primary.base",
+              },
 
-            ".citation": {
-              p: {
-                color: "text200",
+              ".citation": {
+                p: {
+                  color: "text200",
+                },
               },
-            },
-          }}
-        >
-          <Breadcrumbs slug={slug} mb="8" />
-          <Text
-            color="text200"
+            }}
           >
-            <Translation id="page-last-updated" />:{" "}
-            {getLocaleTimestamp(locale as Lang, lastUpdatedDate!)}
-          </Text>
-          <TableOfContents
-            position="relative"
-            zIndex={2}
-            items={tocItems}
-            isMobile
-            maxDepth={frontmatter.sidebarDepth || 2}
-            hideEditButton={!!frontmatter.hideEditButton}
-          />
-          {children}
+            <TableOfContents
+              position="relative"
+              zIndex={2}
+              items={tocItems}
+              isMobile
+              maxDepth={frontmatter.sidebarDepth || 2}
+              hideEditButton={!!frontmatter.hideEditButton}
+            />
+            {children}
 
-          <FeedbackCard isArticle />
+            <FeedbackCard isArticle />
+          </Box>
         </Box>
         <TableOfContents
           editPath={absoluteEditPath}

src/layouts/Static.tsx

@@ -78,7 +78,6 @@
     "./src/components/Morpher.tsx",
     "./src/components/OrderedList.tsx",
     "./src/components/ProductList.tsx",
-    "./src/components/ReleaseBanner.tsx",
     "./src/components/RollupProductDevDoc.tsx",
     "./src/components/Search/SearchButton.tsx",
     "./src/components/Search/SearchModal.tsx",