Skip to content

Commit 4c45a96

Browse files
OctomergerOctomerger
authored
React: import necessary javascripts directly (github#20001) (github#7559)
1 parent 2288896 commit 4c45a96

11 files changed

Lines changed: 95 additions & 49 deletions

File tree

‎components/DefaultLayout.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useTranslation } from './hooks/useTranslation'
1111

1212
type Props = { children?: React.ReactNode }
1313
export const DefaultLayout = (props: Props) => {
14-
const { builtAssets, page, error, isHomepageVersion } = useMainContext()
14+
const { page, error, isHomepageVersion } = useMainContext()
1515
const { t } = useTranslation('errors')
1616
return (
1717
<div className="d-lg-flex">
@@ -22,8 +22,6 @@ export const DefaultLayout = (props: Props) => {
2222
<title>{page.fullTitle}</title>
2323
) : null}
2424

25-
<script src={builtAssets.main.js} />
26-
2725
{/* For Google and Bots */}
2826
{page.introPlainText && <meta name="description" content={page.introPlainText} />}
2927

‎components/PrintAction.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
3+
type Props = {
4+
children: React.ReactElement
5+
}
6+
export function PrintAction({ children }: Props) {
7+
const onClick = () => {
8+
try {
9+
document.execCommand('print', false)
10+
} catch (e) {
11+
window.print()
12+
}
13+
}
14+
15+
return React.cloneElement(React.Children.only(children), { onClick })
16+
}

‎components/article/ArticleTitle.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Tooltip } from '@primer/components'
22
import { PrinterIcon } from './PrinterIcon'
33

4+
import { PrintAction } from 'components/PrintAction'
5+
46
type Props = {
57
children: React.ReactNode
68
}
@@ -10,18 +12,11 @@ export const ArticleTitle = ({ children }: Props) => {
1012
<h1 className="my-4 border-bottom-0">{children}</h1>
1113
<div className="d-none d-lg-block ml-2">
1214
<Tooltip aria-label="Print this article" noDelay direction="n">
13-
<button
14-
className="btn-link Link--muted"
15-
onClick={() => {
16-
try {
17-
document.execCommand('print', false)
18-
} catch (e) {
19-
window.print()
20-
}
21-
}}
22-
>
23-
<PrinterIcon />
24-
</button>
15+
<PrintAction>
16+
<button className="btn-link Link--muted">
17+
<PrinterIcon />
18+
</button>
19+
</PrintAction>
2520
</Tooltip>
2621
</div>
2722
</div>

‎components/context/MainContext.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,6 @@ export type MainContextT = {
6868
maptopic?: BreadcrumbT
6969
article?: BreadcrumbT
7070
}
71-
builtAssets: { main: { js: string } }
7271
activeProducts: Array<ProductT>
7372
currentProduct?: ProductT
7473
currentLayoutName: string
@@ -112,7 +111,6 @@ export type MainContextT = {
112111

113112
export const getMainContextFromRequest = (req: any): MainContextT => {
114113
return {
115-
builtAssets: { main: { js: req.context.builtAssets.main.js } },
116114
breadcrumbs: req.context.breadcrumbs || {},
117115
activeProducts: req.context.activeProducts,
118116
currentProduct: req.context.productMap[req.context.currentProduct] || null,

‎components/release-notes/GHESReleaseNotePatch.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { PatchNotes } from './PatchNotes'
66
import { Link } from 'components/Link'
77
import { CurrentVersion, ReleaseNotePatch, GHESMessage } from './types'
88
import { useOnScreen } from 'components/hooks/useOnScreen'
9+
import { PrintAction } from 'components/PrintAction'
910

1011
type Props = {
1112
patch: ReleaseNotePatch
@@ -65,7 +66,9 @@ export function GHESReleaseNotePatch({
6566
</Link>
6667
)}
6768

68-
<button className="js-print btn-link ml-3 text-small text-bold">Print</button>
69+
<PrintAction>
70+
<button className="btn-link ml-3 text-small text-bold">Print</button>
71+
</PrintAction>
6972
</div>
7073

7174
<p className="color-text-secondary mt-1">{dayjs(patch.date).format('MMMM, DD, YYYY')}</p>

‎components/sublanding/LearningTrack.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ type Props = {
77
track: FeaturedTrack
88
}
99

10-
const MAX_VISIBLE_GUIDES = 4
10+
const DEFAULT_VISIBLE_GUIDES = 4
1111
export const LearningTrack = ({ track }: Props) => {
12-
const [visibleGuides, setVisibleGuides] = useState(track?.guides?.slice(0, 4))
12+
const [numVisible, setNumVisible] = useState(DEFAULT_VISIBLE_GUIDES)
1313
const showAll = () => {
14-
setVisibleGuides(track?.guides)
14+
setNumVisible(track?.guides?.length || 0)
1515
}
1616
const { t } = useTranslation('product_sublanding')
1717

1818
return (
1919
<div className="my-3 px-4 col-12 col-md-6 learning-track">
20-
<div className="Box js-show-more-container d-flex flex-column">
20+
<div className="Box d-flex flex-column">
2121
<div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
2222
<div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
2323
<div className="my-xl-0 mr-xl-3">
@@ -38,10 +38,11 @@ export const LearningTrack = ({ track }: Props) => {
3838
</span>
3939
</a>
4040
</div>
41-
{visibleGuides?.map((guide) => (
42-
<div>
41+
42+
{track?.guides?.slice(0, numVisible).map((guide) => (
43+
<div key={guide.href + track?.trackName}>
4344
<a
44-
className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item"
45+
className="Box-row d-flex flex-items-center color-text-primary no-underline"
4546
href={`${guide.href}?learn=${track?.trackName}`}
4647
>
4748
<div className="circle color-bg-tertiary d-inline-flex mr-4">
@@ -56,24 +57,25 @@ export const LearningTrack = ({ track }: Props) => {
5657
{t('guide_types')[guide.page?.type || '']}
5758
</div>
5859
</a>
59-
{track?.guides && track?.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
60-
<button
61-
className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
62-
onClick={showAll}
63-
>
64-
<div
65-
className="position-absolute left-0 right-0 py-5 fade-background-bottom"
66-
style={{ bottom: '50px' }}
67-
></div>
68-
<span>
69-
Show {track?.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
70-
</span>
71-
</button>
72-
) : (
73-
<div />
74-
)}
7560
</div>
7661
))}
62+
63+
{(track?.guides?.length || 0) > numVisible ? (
64+
<button
65+
className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12"
66+
onClick={showAll}
67+
>
68+
<div
69+
className="position-absolute left-0 right-0 py-5 fade-background-bottom"
70+
style={{ bottom: '50px' }}
71+
></div>
72+
<span>
73+
Show {(track?.guides?.length || 0) - numVisible} {t(`more_guides`)}
74+
</span>
75+
</button>
76+
) : (
77+
<div />
78+
)}
7779
</div>
7880
</div>
7981
)

‎javascripts/copy-code.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default () => {
1+
export default function copyCode() {
22
const buttons = Array.from(document.querySelectorAll('button.js-btn-copy'))
33

44
if (!buttons) return

‎javascripts/experiment.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import murmur from 'imurmurhash'
22
import { getUserEventsId, sendEvent, EventType } from './events'
3-
// import h from './hyperscript'
43

54
const TREATMENT = 'TREATMENT'
65
const CONTROL = 'CONTROL'

‎pages/[versionId]/[productId]/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
import { GetServerSideProps } from 'next'
22

3+
// "legacy" javascript needed to maintain existing functionality
4+
// typically operating on elements **within** an article.
5+
import copyCode from 'javascripts/copy-code'
6+
import displayPlatformSpecificContent from 'javascripts/display-platform-specific-content'
7+
import displayToolSpecificContent from 'javascripts/display-tool-specific-content'
8+
import localization from 'javascripts/localization'
9+
import toggleImages from 'javascripts/toggle-images'
10+
import wrapCodeTerms from 'javascripts/wrap-code-terms'
11+
312
import {
413
MainContextT,
514
MainContext,
@@ -32,6 +41,7 @@ import {
3241
TocLandingContext,
3342
TocLandingContextT,
3443
} from 'components/context/TocLandingContext'
44+
import { useEffect } from 'react'
3545

3646
type Props = {
3747
mainContext: MainContextT
@@ -49,6 +59,15 @@ const GlobalPage = ({
4959
}: Props) => {
5060
const { currentLayoutName, relativePath } = mainContext
5161

62+
useEffect(() => {
63+
copyCode()
64+
displayPlatformSpecificContent()
65+
displayToolSpecificContent()
66+
localization()
67+
toggleImages()
68+
wrapCodeTerms()
69+
}, [])
70+
5271
let content
5372
if (currentLayoutName === 'product-landing') {
5473
content = (

‎pages/[versionId]/graphql/overview/explorer.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,22 @@ import {
77
} from 'components/context/MainContext'
88
import { Breadcrumbs } from 'components/Breadcrumbs'
99
import { DefaultLayout } from 'components/DefaultLayout'
10+
import { useEffect, useRef } from 'react'
1011

1112
type Props = {
1213
mainContext: MainContextT
1314
graphqlExplorerUrl: string
1415
}
1516
export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props) {
1617
const { page, airGap } = mainContext
18+
const graphiqlRef = useRef<HTMLIFrameElement>(null)
19+
20+
useEffect(() => {
21+
if (typeof window !== 'undefined' && window.location.search) {
22+
graphiqlRef.current?.contentWindow?.postMessage(window.location.search, graphqlExplorerUrl)
23+
}
24+
}, [])
25+
1726
return (
1827
<MainContext.Provider value={mainContext}>
1928
<DefaultLayout>
@@ -33,12 +42,7 @@ export default function GQLExplorer({ mainContext, graphqlExplorerUrl }: Props)
3342
<p>GraphQL explorer is not available on this environment.</p>
3443
) : (
3544
/* eslint-disable-next-line jsx-a11y/iframe-has-title */
36-
<iframe
37-
id="graphiql"
38-
className="graphql-explorer"
39-
scrolling="no"
40-
src={graphqlExplorerUrl}
41-
>
45+
<iframe ref={graphiqlRef} id="graphiql" scrolling="no" src={graphqlExplorerUrl}>
4246
<p>You must have iframes enabled to use this feature.</p>
4347
</iframe>
4448
)}

0 commit comments

Comments
 (0)