Skip to content

Commit 34dcba5

Browse files
mikesurowiecmikesurowiec
committed
feat: add DefaultLayout, add to sponsors landing page
1 parent d9c336f commit 34dcba5

10 files changed

Lines changed: 249 additions & 7 deletions

File tree

‎components/Breadcrumbs.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import cx from 'classnames'
2+
import Link from 'next/link'
3+
import { useRouter } from 'next/router'
4+
import { useMainContext } from './context/MainContext'
5+
6+
export type BreadcrumbT = {
7+
title: string
8+
documentType?: string
9+
href?: string
10+
}
11+
12+
type Props = {}
13+
export const Breadcrumbs = (props: Props) => {
14+
const router = useRouter()
15+
const pathWithLocale = `/${router.locale}${router.asPath}`
16+
const { breadcrumbs } = useMainContext()
17+
const items = Object.entries(breadcrumbs || {})
18+
19+
return (
20+
<nav className="breadcrumbs f5" aria-label="Breadcrumb">
21+
{items.map(([_, breadcrumb]) => {
22+
const title = `${breadcrumb.documentType}: ${breadcrumb.title}`
23+
return !breadcrumb.href ? (
24+
<span key={title} title={title}>
25+
{breadcrumb.title}
26+
</span>
27+
) : (
28+
<Link key={title} href={breadcrumb.href}>
29+
<a
30+
title={title}
31+
className={cx(
32+
'd-inline-block',
33+
pathWithLocale === breadcrumb.href && 'color-text-tertiary'
34+
)}
35+
>
36+
{breadcrumb.title}
37+
</a>
38+
</Link>
39+
)
40+
})}
41+
</nav>
42+
)
43+
}

‎components/DefaultLayout.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Head from 'next/head'
2+
3+
// import { Sidebar } from 'components/Sidebar'
4+
// import { SmallFooter } from 'components/SmallFooter'
5+
// import { ScrollButton } from 'components/ScrollButton'
6+
// import { SupportSection } from 'components/SupportSection'
7+
// import { Header } from 'components/Header'
8+
import { DeprecationBanner } from 'components/DeprecationBanner'
9+
import { useMainContext } from 'components/context/MainContext'
10+
11+
type Props = { children?: React.ReactNode }
12+
export const DefaultLayout = (props: Props) => {
13+
const { builtAssets, expose } = useMainContext()
14+
return (
15+
<div className="d-lg-flex">
16+
<Head>
17+
<link rel="stylesheet" href={builtAssets.main.css} />
18+
<script id="expose" type="application/json" dangerouslySetInnerHTML={{ __html: expose }} />
19+
<script src={builtAssets.main.js} />
20+
</Head>
21+
{/* <Sidebar /> */}
22+
23+
<main className="width-full">
24+
{/* <Header /> */}
25+
<DeprecationBanner />
26+
27+
{props.children}
28+
29+
{/* <SupportSection />
30+
<SmallFooter />
31+
<ScrollButton /> */}
32+
</main>
33+
</div>
34+
)
35+
}

‎components/DeprecationBanner.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useMainContext } from './context/MainContext'
2+
import { useCurrentVersion } from './useCurrentVersion'
3+
4+
export const DeprecationBanner = () => {
5+
const { data, enterpriseServerReleases } = useMainContext()
6+
const { currentVersion } = useCurrentVersion()
7+
8+
if (!currentVersion.includes(enterpriseServerReleases.oldestSupported)) {
9+
return null
10+
}
11+
12+
const message = enterpriseServerReleases.isOldestReleaseDeprecated
13+
? data.reusables.enterprise_deprecation.version_was_deprecated
14+
: data.reusables.enterprise_deprecation.version_will_be_deprecated
15+
16+
return (
17+
<div className="deprecation-banner border rounded-1 mb-2 color-bg-warning p-3 color-border-warning f5">
18+
<p>
19+
<b>
20+
<span dangerouslySetInnerHTML={{ __html: message }} />
21+
{' '}
22+
<span
23+
data-date={enterpriseServerReleases.nextDeprecationDate}
24+
data-format="%B %d, %Y"
25+
title={enterpriseServerReleases.nextDeprecationDate}
26+
>
27+
{enterpriseServerReleases.nextDeprecationDate}
28+
</span>
29+
.
30+
</b>
31+
{' '}
32+
<span
33+
dangerouslySetInnerHTML={{
34+
__html: data.reusables.enterprise_deprecation.deprecation_details,
35+
}}
36+
/>
37+
</p>
38+
</div>
39+
)
40+
}

‎components/context/MainContext.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { createContext, useContext } from 'react'
2+
3+
import type { BreadcrumbT } from 'components/Breadcrumbs'
4+
5+
type ProductT = {
6+
external: boolean
7+
href: string
8+
id: string
9+
name: string
10+
}
11+
type DataT = {
12+
ui: Record<string, Record<string, string>>
13+
reusables: {
14+
enterprise_deprecation: {
15+
version_was_deprecated: string
16+
version_will_be_deprecated: string
17+
deprecation_details: string
18+
isOldestReleaseDeprecated: boolean
19+
}
20+
}
21+
}
22+
type EnterpriseServerReleases = {
23+
isOldestReleaseDeprecated: boolean
24+
oldestSupported: string
25+
nextDeprecationDate: string
26+
}
27+
export type MainContextT = {
28+
breadcrumbs?: Record<string, BreadcrumbT>
29+
builtAssets: { main: { css: string; js: string } }
30+
expose: string
31+
activeProducts: Array<ProductT>
32+
currentProduct: ProductT
33+
currentLayoutName: string
34+
data: DataT
35+
airGap?: boolean
36+
currentCategory?: string
37+
relativePath?: string
38+
enterpriseServerReleases: EnterpriseServerReleases
39+
}
40+
41+
export const getMainContextFromRequest = (req: any): MainContextT => {
42+
return {
43+
builtAssets: req.context.builtAssets,
44+
expose: req.context.expose,
45+
breadcrumbs: req.context.breadcrumbs,
46+
activeProducts: req.context.activeProducts,
47+
currentProduct: req.context.productMap[req.context.currentProduct],
48+
currentLayoutName: req.context.currentLayoutName,
49+
data: {
50+
ui: req.context.site.data.ui,
51+
reusables: {
52+
enterprise_deprecation: req.context.site.data.reusables.enterprise_deprecation,
53+
},
54+
},
55+
airGap: req.context.AIRGAP || false,
56+
currentCategory: req.context.currentCategory || '',
57+
relativePath: req.context.page.relativePath,
58+
enterpriseServerReleases: req.context.enterpriseServerReleases,
59+
}
60+
}
61+
62+
export const MainContext = createContext<MainContextT | null>(null)
63+
64+
export const useMainContext = (): MainContextT => {
65+
const context = useContext(MainContext)
66+
67+
if (!context) {
68+
throw new Error('"useMainContext" may only be used inside "MainContext.Provider"')
69+
}
70+
71+
return context
72+
}

‎components/useCurrentVersion.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { useRouter } from 'next/router'
2+
3+
type VersionInfo = {
4+
currentVersion: string;
5+
isEnterprise: boolean;
6+
};
7+
const DEFAULT_VERSION = 'free-pro-team@latest'
8+
export const useCurrentVersion = (): VersionInfo => {
9+
const router = useRouter()
10+
const currentVersion = (router.query.versionId as string) || DEFAULT_VERSION
11+
return { currentVersion, isEnterprise: currentVersion.includes('enterprise') };
12+
};

‎middleware/render-page.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ const cacheableQueries = ['learn']
2828

2929
const renderWithNext = FEATURE_NEXTJS
3030
? [
31-
'/en/rest'
31+
'/en/rest',
32+
'/en/sponsors',
33+
'/ja/sponsors',
3234
]
3335
: []
3436

‎next.config.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
const { productIds } = require('./lib/all-products')
2+
const languages = require('./lib/languages')
23

34
module.exports = {
45
i18n: {
5-
locales: ['en', 'ja'],
6+
locales: Object.values(languages).map(({ code }) => code),
67
defaultLocale: 'en'
78
},
89
async rewrites () {
9-
const defaultVersionId = 'free-pro-team@latest'
10+
const DEFAULT_VERSION = 'free-pro-team@latest'
1011
return productIds.map((productId) => {
1112
return {
1213
source: `/${productId}/:path*`,
13-
destination: `/${defaultVersionId}/${productId}/:path*`
14+
destination: `/${DEFAULT_VERSION}/${productId}/:path*`
1415
}
1516
})
1617
}

‎package-lock.json‎

Lines changed: 8 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"browser-date-formatter": "^3.0.3",
3232
"change-case": "^3.1.0",
3333
"cheerio": "^1.0.0-rc.3",
34+
"classnames": "^2.3.1",
3435
"compression": "^1.7.4",
3536
"connect-datadog": "0.0.9",
3637
"connect-slashes": "^1.4.0",

‎pages/[versionId]/sponsors.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { GetServerSideProps } from 'next'
2+
3+
import {
4+
MainContextT,
5+
MainContext,
6+
getMainContextFromRequest,
7+
} from 'components/context/MainContext'
8+
import { DefaultLayout } from 'components/DefaultLayout'
9+
10+
type Props = {
11+
mainContext: MainContextT
12+
}
13+
const SponsorsPage = ({ mainContext }: Props) => {
14+
return (
15+
<MainContext.Provider value={mainContext}>
16+
<DefaultLayout>Sponsors page</DefaultLayout>
17+
</MainContext.Provider>
18+
)
19+
}
20+
21+
export default SponsorsPage
22+
23+
export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
24+
const req = context.req as any
25+
26+
return {
27+
props: {
28+
mainContext: getMainContextFromRequest(req),
29+
},
30+
}
31+
}

0 commit comments

Comments
 (0)