feat: add DefaultLayout, add to sponsors landing page

blueboxes · May 5, 2021 · 34dcba5 · 34dcba5
1 parent d9c336f
commit 34dcba5
Show file tree

Hide file tree

Showing 10 changed files with 249 additions and 7 deletions.
diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
@@ -0,0 +1,43 @@
+import cx from 'classnames'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useMainContext } from './context/MainContext'
+
+export type BreadcrumbT = {
+  title: string
+  documentType?: string
+  href?: string
+}
+
+type Props = {}
+export const Breadcrumbs = (props: Props) => {
+  const router = useRouter()
+  const pathWithLocale = `/${router.locale}${router.asPath}`
+  const { breadcrumbs } = useMainContext()
+  const items = Object.entries(breadcrumbs || {})
+
+  return (
+    <nav className="breadcrumbs f5" aria-label="Breadcrumb">
+      {items.map(([_, breadcrumb]) => {
+        const title = `${breadcrumb.documentType}: ${breadcrumb.title}`
+        return !breadcrumb.href ? (
+          <span key={title} title={title}>
+            {breadcrumb.title}
+          </span>
+        ) : (
+          <Link key={title} href={breadcrumb.href}>
+            <a
+              title={title}
+              className={cx(
+                'd-inline-block',
+                pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+              )}
+            >
+              {breadcrumb.title}
+            </a>
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}
diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
@@ -0,0 +1,35 @@
+import Head from 'next/head'
+
+// import { Sidebar } from 'components/Sidebar'
+// import { SmallFooter } from 'components/SmallFooter'
+// import { ScrollButton } from 'components/ScrollButton'
+// import { SupportSection } from 'components/SupportSection'
+// import { Header } from 'components/Header'
+import { DeprecationBanner } from 'components/DeprecationBanner'
+import { useMainContext } from 'components/context/MainContext'
+
+type Props = { children?: React.ReactNode }
+export const DefaultLayout = (props: Props) => {
+  const { builtAssets, expose } = useMainContext()
+  return (
+    <div className="d-lg-flex">
+      <Head>
+        <link rel="stylesheet" href={builtAssets.main.css} />
+        <script id="expose" type="application/json" dangerouslySetInnerHTML={{ __html: expose }} />
+        <script src={builtAssets.main.js} />
+      </Head>
+      {/* <Sidebar /> */}
+
+      <main className="width-full">
+        {/* <Header /> */}
+        <DeprecationBanner />
+
+        {props.children}
+
+        {/* <SupportSection />
+        <SmallFooter />
+        <ScrollButton /> */}
+      </main>
+    </div>
+  )
+}
diff --git a/components/DeprecationBanner.tsx b/components/DeprecationBanner.tsx
@@ -0,0 +1,40 @@
+import { useMainContext } from './context/MainContext'
+import { useCurrentVersion } from './useCurrentVersion'
+
+export const DeprecationBanner = () => {
+  const { data, enterpriseServerReleases } = useMainContext()
+  const { currentVersion } = useCurrentVersion()
+
+  if (!currentVersion.includes(enterpriseServerReleases.oldestSupported)) {
+    return null
+  }
+
+  const message = enterpriseServerReleases.isOldestReleaseDeprecated
+    ? data.reusables.enterprise_deprecation.version_was_deprecated
+    : data.reusables.enterprise_deprecation.version_will_be_deprecated
+
+  return (
+    <div className="deprecation-banner border rounded-1 mb-2 color-bg-warning p-3 color-border-warning f5">
+      <p>
+        <b>
+          <span dangerouslySetInnerHTML={{ __html: message }} />
+          {' '}
+          <span
+            data-date={enterpriseServerReleases.nextDeprecationDate}
+            data-format="%B %d, %Y"
+            title={enterpriseServerReleases.nextDeprecationDate}
+          >
+            {enterpriseServerReleases.nextDeprecationDate}
+          </span>
+          .
+        </b>
+        {' '}
+        <span
+          dangerouslySetInnerHTML={{
+            __html: data.reusables.enterprise_deprecation.deprecation_details,
+          }}
+        />
+      </p>
+    </div>
+  )
+}
diff --git a/components/context/MainContext.tsx b/components/context/MainContext.tsx
@@ -0,0 +1,72 @@
+import { createContext, useContext } from 'react'
+
+import type { BreadcrumbT } from 'components/Breadcrumbs'
+
+type ProductT = {
+  external: boolean
+  href: string
+  id: string
+  name: string
+}
+type DataT = {
+  ui: Record<string, Record<string, string>>
+  reusables: {
+    enterprise_deprecation: {
+      version_was_deprecated: string
+      version_will_be_deprecated: string
+      deprecation_details: string
+      isOldestReleaseDeprecated: boolean
+    }
+  }
+}
+type EnterpriseServerReleases = {
+  isOldestReleaseDeprecated: boolean
+  oldestSupported: string
+  nextDeprecationDate: string
+}
+export type MainContextT = {
+  breadcrumbs?: Record<string, BreadcrumbT>
+  builtAssets: { main: { css: string; js: string } }
+  expose: string
+  activeProducts: Array<ProductT>
+  currentProduct: ProductT
+  currentLayoutName: string
+  data: DataT
+  airGap?: boolean
+  currentCategory?: string
+  relativePath?: string
+  enterpriseServerReleases: EnterpriseServerReleases
+}
+
+export const getMainContextFromRequest = (req: any): MainContextT => {
+  return {
+    builtAssets: req.context.builtAssets,
+    expose: req.context.expose,
+    breadcrumbs: req.context.breadcrumbs,
+    activeProducts: req.context.activeProducts,
+    currentProduct: req.context.productMap[req.context.currentProduct],
+    currentLayoutName: req.context.currentLayoutName,
+    data: {
+      ui: req.context.site.data.ui,
+      reusables: {
+        enterprise_deprecation: req.context.site.data.reusables.enterprise_deprecation,
+      },
+    },
+    airGap: req.context.AIRGAP || false,
+    currentCategory: req.context.currentCategory || '',
+    relativePath: req.context.page.relativePath,
+    enterpriseServerReleases: req.context.enterpriseServerReleases,
+  }
+}
+
+export const MainContext = createContext<MainContextT | null>(null)
+
+export const useMainContext = (): MainContextT => {
+  const context = useContext(MainContext)
+
+  if (!context) {
+    throw new Error('"useMainContext" may only be used inside "MainContext.Provider"')
+  }
+
+  return context
+}
diff --git a/components/useCurrentVersion.tsx b/components/useCurrentVersion.tsx
@@ -0,0 +1,12 @@
+import { useRouter } from 'next/router'
+
+type VersionInfo = {
+  currentVersion: string;
+  isEnterprise: boolean;
+};
+const DEFAULT_VERSION = 'free-pro-team@latest'
+export const useCurrentVersion = (): VersionInfo => {
+  const router = useRouter()
+  const currentVersion = (router.query.versionId as string) || DEFAULT_VERSION
+  return { currentVersion, isEnterprise: currentVersion.includes('enterprise') };
+};
diff --git a/middleware/render-page.js b/middleware/render-page.js
@@ -28,7 +28,9 @@ const cacheableQueries = ['learn']
 
 const renderWithNext = FEATURE_NEXTJS
   ? [
-      '/en/rest'
+      '/en/rest',
+      '/en/sponsors',
+      '/ja/sponsors',
     ]
   : []
 

diff --git a/next.config.js b/next.config.js
@@ -1,16 +1,17 @@
 const { productIds } = require('./lib/all-products')
+const languages = require('./lib/languages')
 
 module.exports = {
   i18n: {
-    locales: ['en', 'ja'],
+    locales: Object.values(languages).map(({ code }) => code),
     defaultLocale: 'en'
   },
   async rewrites () {
-    const defaultVersionId = 'free-pro-team@latest'
+    const DEFAULT_VERSION = 'free-pro-team@latest'
     return productIds.map((productId) => {
       return {
         source: `/${productId}/:path*`,
-        destination: `/${defaultVersionId}/${productId}/:path*`
+        destination: `/${DEFAULT_VERSION}/${productId}/:path*`
       }
     })
   }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "browser-date-formatter": "^3.0.3",
     "change-case": "^3.1.0",
     "cheerio": "^1.0.0-rc.3",
+    "classnames": "^2.3.1",
     "compression": "^1.7.4",
     "connect-datadog": "0.0.9",
     "connect-slashes": "^1.4.0",

diff --git a/pages/[versionId]/sponsors.tsx b/pages/[versionId]/sponsors.tsx
@@ -0,0 +1,31 @@
+import { GetServerSideProps } from 'next'
+
+import {
+  MainContextT,
+  MainContext,
+  getMainContextFromRequest,
+} from 'components/context/MainContext'
+import { DefaultLayout } from 'components/DefaultLayout'
+
+type Props = {
+  mainContext: MainContextT
+}
+const SponsorsPage = ({ mainContext }: Props) => {
+  return (
+    <MainContext.Provider value={mainContext}>
+      <DefaultLayout>Sponsors page</DefaultLayout>
+    </MainContext.Provider>
+  )
+}
+
+export default SponsorsPage
+
+export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
+  const req = context.req as any
+
+  return {
+    props: {
+      mainContext: getMainContextFromRequest(req),
+    },
+  }
+}