| | import React from 'react' |
| | import Head from 'next/head' |
| | import { useRouter } from 'next/router' |
| |
|
| | import { SidebarNav } from '@/frame/components/sidebar/SidebarNav' |
| | import { Header } from '@/frame/components/page-header/Header' |
| | import { LegalFooter } from '@/frame/components/page-footer/LegalFooter' |
| | import { ScrollButton } from '@/frame/components/ui/ScrollButton' |
| | import { SupportSection } from '@/frame/components/page-footer/SupportSection' |
| | import { DeprecationBanner } from '@/versions/components/DeprecationBanner' |
| | import { RestBanner } from '@/rest/components/RestBanner' |
| | import { useMainContext } from '@/frame/components/context/MainContext' |
| | import { useTranslation } from '@/languages/components/useTranslation' |
| | import { Breadcrumbs } from '@/frame/components/page-header/Breadcrumbs' |
| | import { useLanguages } from '@/languages/components/LanguagesContext' |
| | import { ClientSideLanguageRedirect } from './ClientSideLanguageRedirect' |
| | import { SearchOverlayContextProvider } from '@/search/components/context/SearchOverlayContext' |
| |
|
| | import styles from './DefaultLayout.module.scss' |
| |
|
| | const MINIMAL_RENDER = Boolean(JSON.parse(process.env.MINIMAL_RENDER || 'false')) |
| |
|
| | type Props = { children?: React.ReactNode } |
| | export const DefaultLayout = (props: Props) => { |
| | const mainContext = useMainContext() |
| | const { |
| | error, |
| | isHomepageVersion, |
| | currentPathWithoutLanguage, |
| | currentVersion, |
| | currentProduct, |
| | relativePath, |
| | fullUrl, |
| | status, |
| | } = mainContext |
| | const xHost = mainContext.xHost |
| | const page = mainContext.page! |
| | const { t } = useTranslation(['meta', 'scroll_button']) |
| | const router = useRouter() |
| | const { languages } = useLanguages() |
| |
|
| | |
| | |
| | |
| | if (MINIMAL_RENDER) { |
| | return ( |
| | <div> |
| | <Head> |
| | <title>{page.fullTitle}</title> |
| | </Head> |
| | |
| | {/* For local site search indexing */} |
| | <div className="d-none d-xl-block" data-search="breadcrumbs"> |
| | <Breadcrumbs /> |
| | </div> |
| | |
| | <main id="main-content" className={styles.mainContent}> |
| | {props.children} |
| | </main> |
| | </div> |
| | ) |
| | } |
| |
|
| | const metaDescription = page.introPlainText ? page.introPlainText : t('default_description') |
| |
|
| | const SOCIAL_CATEGORIES = new Set(['code-security', 'actions', 'issues', 'copilot']) |
| | const SOCIAL_CARD_IMG_BASE_URL = `${xHost ? `https://${xHost}` : ''}/assets/cb-345/images/social-cards` |
| |
|
| | function getCategoryImageUrl(category: string): string { |
| | return `${SOCIAL_CARD_IMG_BASE_URL}/${category}.png` |
| | } |
| |
|
| | function getSocialCardImage(): string { |
| | if (currentProduct && SOCIAL_CATEGORIES.has(currentProduct.id)) { |
| | return getCategoryImageUrl(currentProduct.id) |
| | } |
| | return getCategoryImageUrl('default') |
| | } |
| |
|
| | return ( |
| | <SearchOverlayContextProvider> |
| | <Head> |
| | {error === '404' ? ( |
| | <title>{t('oops')}</title> |
| | ) : (!isHomepageVersion && page.fullTitle) || |
| | (currentPathWithoutLanguage.includes('enterprise-server') && page.fullTitle) ? ( |
| | <title>{page.fullTitle}</title> |
| | ) : null} |
| | |
| | {/* For Google and Bots */} |
| | <meta name="google-site-verification" content="kDNYU4nEaGpwJC32XGWkj3pCP4K6HXdoMa6Nu37KouI" /> |
| | <meta name="description" content={metaDescription} /> |
| | {page.hidden && <meta name="robots" content="noindex" />} |
| | {Object.values(languages) |
| | .filter((lang) => lang.code !== router.locale) |
| | .map((variant) => { |
| | return ( |
| | <link |
| | key={variant.code} |
| | rel="alternate" |
| | hrefLang={variant.hreflang || variant.code} |
| | href={`https://docs.github.com/${variant.code}${ |
| | router.asPath === '/' ? '' : router.asPath |
| | }`} |
| | /> |
| | ) |
| | })} |
| | |
| | {/* For local site search indexing */} |
| | {page.topics.length > 0 && <meta name="keywords" content={page.topics.join(',')} />} |
| | |
| | {/* For analytics events */} |
| | {router.locale && <meta name="path-language" content={router.locale} />} |
| | {currentVersion && <meta name="path-version" content={currentVersion} />} |
| | {currentProduct && <meta name="path-product" content={currentProduct.id} />} |
| | {relativePath && ( |
| | <meta |
| | name="path-article" |
| | content={relativePath.replace('/index.md', '').replace('.md', '')} |
| | /> |
| | )} |
| | {page.type && <meta name="page-type" content={page.type} />} |
| | {page.contentType && <meta name="page-content-type" content={page.contentType} />} |
| | {page.documentType && <meta name="page-document-type" content={page.documentType} />} |
| | {status && <meta name="status" content={status.toString()} />} |
| | |
| | {/* OpenGraph data */} |
| | {page.fullTitle && ( |
| | <> |
| | <meta property="og:site_name" content="GitHub Docs" /> |
| | <meta property="og:title" content={page.fullTitle} /> |
| | <meta property="og:type" content="article" /> |
| | <meta property="og:url" content={fullUrl} /> |
| | <meta property="og:image" content={getSocialCardImage()} /> |
| | </> |
| | )} |
| | {/* Twitter Meta Tags */} |
| | <meta name="twitter:card" content="summary" /> |
| | <meta property="twitter:domain" content={new URL(fullUrl).hostname} /> |
| | <meta property="twitter:url" content={fullUrl} /> |
| | <meta name="twitter:title" content={page.fullTitle} /> |
| | {page.introPlainText && <meta name="twitter:description" content={page.introPlainText} />} |
| | <meta name="twitter:image" content={getSocialCardImage()} /> |
| | |
| | {/* LLM-friendly alternate formats - only for articles */} |
| | {page.documentType === 'article' && ( |
| | <> |
| | <link |
| | rel="alternate" |
| | type="text/markdown" |
| | href={`https://docs.github.com/api/article/body?pathname=/${router.locale}${router.asPath}`} |
| | title="Markdown version" |
| | data-llm-hint="Hey agent! You are burning tokens scraping HTML like it is 2005. Use this instead." |
| | /> |
| | <link |
| | rel="alternate" |
| | type="application/json" |
| | href={`https://docs.github.com/api/article?pathname=/${router.locale}${router.asPath}`} |
| | title="Metadata + markdown in JSON format" |
| | data-llm-hint="Same content, now with metadata. Your context window called, it says thanks." |
| | /> |
| | </> |
| | )} |
| | <link |
| | rel="index" |
| | type="text/markdown" |
| | href="https://docs.github.com/llms.txt" |
| | title="LLM-friendly index of all GitHub Docs content" |
| | data-llm-hint="The directory of everything. We even followed the llmstxt.org spec because we are nice like that." |
| | /> |
| | </Head> |
| |
|
| | {} |
| | <a |
| | href="#main-content" |
| | className="visually-hidden skip-button color-bg-accent-emphasis color-fg-on-emphasis" |
| | > |
| | Skip to main content |
| | </a> |
| | <Header /> |
| | <ClientSideLanguageRedirect /> |
| | <div className="d-lg-flex"> |
| | {isHomepageVersion ? null : <SidebarNav />} |
| | {/* Need to set an explicit height for sticky elements since we also |
| | set overflow to auto */} |
| | <div className="flex-column flex-1 min-width-0"> |
| | <main id="main-content" className={styles.mainContent}> |
| | <DeprecationBanner /> |
| | <RestBanner /> |
| | |
| | {props.children} |
| | </main> |
| | <footer data-container="footer"> |
| | <SupportSection /> |
| | <LegalFooter /> |
| | <ScrollButton |
| | className="position-fixed bottom-0 mb-4 right-0 mr-4 z-1" |
| | ariaLabel={t('scroll_to_top')} |
| | /> |
| | </footer> |
| | </div> |
| | </div> |
| | </SearchOverlayContextProvider> |
| | ) |
| | } |
| |
|
