Skip to content

Commit 9036301

Browse files
mikesurowiecmikesurowiec
committed
feat: add CommunityExamples, enable /discussions
1 parent 52f2ebf commit 9036301

8 files changed

Lines changed: 185 additions & 32 deletions

File tree

‎components/RepoCard.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
type Props = {
2+
repo: {
3+
repo: string
4+
description: string
5+
}
6+
href?: string
7+
}
8+
export const RepoCard = ({ repo, href }: Props) => {
9+
return (
10+
<a
11+
className="Box d-flex height-full color-shadow-medium hover-shadow-large no-underline color-text-primary p-4"
12+
href={href || `https://github.com/${repo.repo}`}
13+
>
14+
<div className="flex-shrink-0 mr-3">
15+
<img
16+
src={`https://github.com/${repo.repo.split('/')[0]}.png`}
17+
alt={repo.repo}
18+
className="avatar avatar-8"
19+
/>
20+
</div>
21+
<div className="flex-auto">
22+
<h4>{repo.repo}</h4>
23+
<p className="mt-1 color-text-tertiary">{repo.description}</p>
24+
</div>
25+
</a>
26+
)
27+
}

‎components/context/ProductLandingContext.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,10 @@ export type ProductLandingContextT = {
2929
// popular: Array<FeaturedLink>
3030
// guideCards: Array<FeaturedLink>
3131
// }
32-
guideCards?: Array<FeaturedLink>
33-
productUserExamples?: Array<{ username: string; description: string }>
34-
featuredArticles?: Array<{
32+
guideCards: Array<FeaturedLink>
33+
productUserExamples: Array<{ username: string; description: string }>
34+
productCommunityExamples: Array<{ repo: string; description: string }>
35+
featuredArticles: Array<{
3536
label: string // Guides
3637
viewAllHref?: string // If provided, adds a "View All ->" to the header
3738
articles: Array<FeaturedLink>
@@ -69,6 +70,9 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
6970
]),
7071
whatsNewChangelog: req.context.whatsNewChangelog,
7172
changelogUrl: req.context.changelogUrl,
73+
74+
productCommunityExamples: req.context.productCommunityExamples || [],
75+
7276
productUserExamples: (req.context.productUserExamples || []).map(
7377
({ user, description }: any) => ({
7478
username: user,

‎components/landing/CommunityExamples.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useState } from 'react'
2+
import { ArrowRightIcon } from '@primer/octicons-react'
3+
4+
import { useProductLandingContext } from 'components/context/ProductLandingContext'
5+
import { useTranslation } from 'components/hooks/useTranslation'
6+
import { RepoCard } from 'components/RepoCard'
7+
8+
export const CommunityExamples = () => {
9+
const { productCommunityExamples } = useProductLandingContext()
10+
const { t } = useTranslation('product_landing')
11+
const [numVisible, setNumVisible] = useState(6)
12+
13+
if (!productCommunityExamples) {
14+
return null
15+
}
16+
17+
return (
18+
<div>
19+
<div className="d-flex flex-wrap gutter">
20+
{productCommunityExamples.slice(0, numVisible).map((repo, i) => {
21+
return (
22+
<div key={repo.repo} className="col-12 col-xl-4 col-lg-6 mb-4">
23+
<RepoCard repo={repo} />
24+
</div>
25+
)
26+
})}
27+
</div>
28+
{numVisible < productCommunityExamples.length && (
29+
<button
30+
className="btn btn-outline float-right"
31+
onClick={() => setNumVisible(productCommunityExamples.length)}
32+
>
33+
{t('show_more')} <ArrowRightIcon />
34+
</button>
35+
)}
36+
{/* <div className="js-filter-card-no-results d-none py-4 text-center color-text-secondary font-mktg">
37+
<div className="mb-3">
38+
<SearchIcon size={24} />{' '}
39+
</div>
40+
<h3 className="text-normal">
41+
{t('sorry')} <strong className="js-filter-card-value"></strong>
42+
</h3>
43+
<p className="my-3 f4">
44+
{t('no_example')} <br /> {t('try_another')}
45+
</p>
46+
<a href="https://github.com/github/docs/blob/main/data/variables/discussions_community_examples.yml">
47+
{t('add_your_community')} <ArrowRightIcon />
48+
</a>
49+
</div> */}
50+
</div>
51+
)
52+
}

‎components/landing/FeaturedArticles.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ export const FeaturedArticles = () => {
2020
<div className="d-lg-flex gutter my-6 py-6">
2121
{featuredArticles.map((section, i) => {
2222
return (
23-
<div className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}>
23+
<div
24+
key={section.label}
25+
className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}
26+
>
2427
<ArticleList
2528
title={section.label}
2629
viewAllHref={section.viewAllHref}

‎components/landing/SponsorsExamples.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,9 @@ export const SponsorsExamples = () => {
1616
return (
1717
<div>
1818
<div className="d-flex flex-wrap gutter">
19-
{productUserExamples.map((user, i) => {
20-
if (i > 5) {
21-
return null
22-
}
19+
{productUserExamples.slice(0, 6).map((user) => {
2320
return (
24-
<div
25-
key={user.username}
26-
className="col-12 col-xl-4 col-lg-6 mb-4 js-filter-card"
27-
data-repo={user.username}
28-
data-description={user.description}
29-
>
21+
<div key={user.username} className="col-12 col-xl-4 col-lg-6 mb-4">
3022
<UserCard href={`https://github.com/sponsors/${user.username}`} user={user} />
3123
</div>
3224
)

‎middleware/render-page.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const renderWithNext = FEATURE_NEXTJS
3030
? [
3131
'/en/rest',
3232
'/en/sponsors',
33+
'/en/discussions',
3334
'/ja/sponsors'
3435
]
3536
: []

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

Lines changed: 90 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,95 @@
1-
import { ExampleComponent } from 'components/ExampleComponent'
1+
import { GetServerSideProps } from 'next'
22

3-
const CategoryPage = () => {
3+
import {
4+
MainContextT,
5+
MainContext,
6+
getMainContextFromRequest,
7+
} from 'components/context/MainContext'
8+
import { DefaultLayout } from 'components/DefaultLayout'
9+
import {
10+
getProductLandingContextFromRequest,
11+
ProductLandingContextT,
12+
ProductLandingContext,
13+
useProductLandingContext,
14+
} from 'components/context/ProductLandingContext'
15+
16+
import { LandingHero } from 'components/landing/LandingHero'
17+
import { FeaturedArticles } from 'components/landing/FeaturedArticles'
18+
import { GuideCards } from 'components/landing/GuideCards'
19+
import { SponsorsExamples } from 'components/landing/SponsorsExamples'
20+
import { CommunityExamples } from 'components/landing/CommunityExamples'
21+
import { LandingSection } from 'components/landing/LandingSection'
22+
import { useTranslation } from 'components/hooks/useTranslation'
23+
24+
type Props = {
25+
mainContext: MainContextT
26+
productLandingContext: ProductLandingContextT
27+
}
28+
const ProductPage = ({ mainContext, productLandingContext }: Props) => {
429
return (
5-
<div className="p-4">
6-
<h1>Sample category page</h1>
7-
<ExampleComponent />
8-
</div>
30+
<MainContext.Provider value={mainContext}>
31+
<ProductLandingContext.Provider value={productLandingContext}>
32+
<ProductPageInner />
33+
</ProductLandingContext.Provider>
34+
</MainContext.Provider>
935
)
1036
}
1137

12-
export default CategoryPage
38+
const ProductPageInner = () => {
39+
const { guideCards, productUserExamples, productCommunityExamples } = useProductLandingContext()
40+
const { t } = useTranslation('product_landing')
41+
42+
return (
43+
<DefaultLayout>
44+
<LandingSection className="pt-3">
45+
<LandingHero />
46+
</LandingSection>
47+
48+
<LandingSection>
49+
<FeaturedArticles />
50+
</LandingSection>
51+
52+
{/* {% if productCodeExamples %}
53+
{% include code-examples %}
54+
{% endif %}
55+
*/}
56+
57+
{productCommunityExamples.length > 0 && (
58+
<LandingSection title={t('communities_using_discussions')} className="my-6">
59+
<CommunityExamples />
60+
</LandingSection>
61+
)}
62+
63+
{productUserExamples.length > 0 && (
64+
<LandingSection title={t('sponsor_community')} className="my-6">
65+
<SponsorsExamples />
66+
</LandingSection>
67+
)}
68+
69+
{guideCards.length > 0 && (
70+
<div className="bg-guides-gradient py-6">
71+
<LandingSection title={t('guides')} className="my-6">
72+
<GuideCards />
73+
</LandingSection>
74+
</div>
75+
)}
76+
77+
{/* <PageSection title="All GitHub Sponsors Docs">
78+
<SiteTreeGrid />
79+
</PageSection> */}
80+
</DefaultLayout>
81+
)
82+
}
83+
84+
export default ProductPage
85+
86+
export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
87+
const req = context.req as any
88+
89+
return {
90+
props: {
91+
mainContext: getMainContextFromRequest(req),
92+
productLandingContext: getProductLandingContextFromRequest(req),
93+
},
94+
}
95+
}

‎pages/[versionId]/sponsors.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -48,22 +48,13 @@ const SponsorsPageInner = () => {
4848
<FeaturedArticles />
4949
</LandingSection>
5050

51-
{/* {% if productCodeExamples %}
52-
{% include code-examples %}
53-
{% endif %}
54-
55-
{% if productCommunityExamples %}
56-
{% include community-examples %}
57-
{% endif %}
58-
*/}
59-
60-
{productUserExamples && (
51+
{productUserExamples.length > 0 && (
6152
<LandingSection title={t('sponsor_community')} className="my-6">
6253
<SponsorsExamples />
6354
</LandingSection>
6455
)}
6556

66-
{guideCards && (
57+
{guideCards.length > 0 && (
6758
<div className="bg-guides-gradient py-6">
6859
<LandingSection title={t('guides')} className="my-6">
6960
<GuideCards />

0 commit comments

Comments
 (0)