Skip to content

Commit 57e93aa

Browse files
feedthejimfeedthejim
committed
cleanup mdx dic
1 parent da986d3 commit 57e93aa

File tree

4 files changed

+66
-159
lines changed

4 files changed

+66
-159
lines changed

‎src/components/MDX/InlineToc.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use client';
22

33
import Link from 'next/link';
4-
import {HTMLAttributes, useContext, useMemo} from 'react';
4+
import {useContext, useMemo} from 'react';
55
import {Toc, TocContext, TocItem} from './TocContext';
6+
import {UL, LI} from './Primitives';
67

78
type NestedTocRoot = {
89
item: null;
@@ -44,13 +45,6 @@ export function InlineToc() {
4445
return <InlineTocItem items={root.children} />;
4546
}
4647

47-
const LI = (p: HTMLAttributes<HTMLLIElement>) => (
48-
<li className="leading-relaxed mb-1" {...p} />
49-
);
50-
const UL = (p: HTMLAttributes<HTMLUListElement>) => (
51-
<ul className="ms-6 my-3 list-disc" {...p} />
52-
);
53-
5448
function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
5549
return (
5650
<UL>

‎src/components/MDX/LanguageList.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use client';
2+
3+
import Link from 'next/link';
4+
import React from 'react';
5+
import {finishedTranslations} from 'utils/finishedTranslations';
6+
import {LanguagesContext} from './LanguagesContext';
7+
import {UL, LI} from './Primitives';
8+
9+
type TranslationProgress = 'complete' | 'in-progress';
10+
11+
export function LanguageList({progress}: {progress: TranslationProgress}) {
12+
const allLanguages = React.useContext(LanguagesContext) ?? [];
13+
const languages = allLanguages
14+
.filter(
15+
({code}) =>
16+
code !== 'en' &&
17+
(progress === 'complete'
18+
? finishedTranslations.includes(code)
19+
: !finishedTranslations.includes(code))
20+
)
21+
.sort((a, b) => a.enName.localeCompare(b.enName));
22+
return (
23+
<UL>
24+
{languages.map(({code, name, enName}) => {
25+
return (
26+
<LI key={code}>
27+
<Link href={`https://${code}.react.dev/`}>
28+
{enName} ({name})
29+
</Link>{' '}
30+
&mdash;{' '}
31+
<Link href={`https://github.com/reactjs/${code}.react.dev`}>
32+
Contribute
33+
</Link>
34+
</LI>
35+
);
36+
})}
37+
</UL>
38+
);
39+
}

‎src/components/MDX/MDXComponents.tsx‎

Lines changed: 2 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,13 @@ import YouWillLearnCard from './YouWillLearnCard';
3131
import {Challenges, Hint, Solution} from './Challenges';
3232
import {IconNavArrow} from '../Icon/IconNavArrow';
3333
import ButtonLink from 'components/ButtonLink';
34-
3534
import {TeamMember} from './TeamMember';
36-
import {LanguagesContext} from './LanguagesContext';
37-
import {finishedTranslations} from 'utils/finishedTranslations';
38-
3935
import ErrorDecoder from './ErrorDecoder';
4036
import {IconCanary} from '../Icon/IconCanary';
4137
import {InlineToc} from './InlineToc';
4238
import {Illustration, IllustrationBlock} from './Illustration';
39+
import {LanguageList} from './LanguageList';
40+
import {Divider, LI, OL, P, Strong, UL} from './Primitives';
4341

4442
function CodeStep({children, step}: {children: any; step: number}) {
4543
return (
@@ -63,27 +61,6 @@ function CodeStep({children, step}: {children: any; step: number}) {
6361
);
6462
}
6563

66-
const P = (p: HTMLAttributes<HTMLParagraphElement>) => (
67-
<p className="whitespace-pre-wrap my-4" {...p} />
68-
);
69-
70-
const Strong = (strong: HTMLAttributes<HTMLElement>) => (
71-
<strong className="font-bold" {...strong} />
72-
);
73-
74-
const OL = (p: HTMLAttributes<HTMLOListElement>) => (
75-
<ol className="ms-6 my-3 list-decimal" {...p} />
76-
);
77-
const LI = (p: HTMLAttributes<HTMLLIElement>) => (
78-
<li className="leading-relaxed mb-1" {...p} />
79-
);
80-
const UL = (p: HTMLAttributes<HTMLUListElement>) => (
81-
<ul className="ms-6 my-3 list-disc" {...p} />
82-
);
83-
84-
const Divider = () => (
85-
<hr className="my-6 block border-b border-t-0 border-border dark:border-border-dark" />
86-
);
8764
const Wip = ({children}: {children: React.ReactNode}) => (
8865
<ExpandableCallout type="wip">{children}</ExpandableCallout>
8966
);
@@ -235,132 +212,6 @@ function Recipes(props: any) {
235212
return <Challenges {...props} isRecipes={true} />;
236213
}
237214

238-
// const IllustrationContext = React.createContext<{
239-
// isInBlock?: boolean;
240-
// }>({
241-
// isInBlock: false,
242-
// });
243-
244-
// function Illustration({
245-
// caption,
246-
// src,
247-
// alt,
248-
// author,
249-
// authorLink,
250-
// }: {
251-
// caption: string;
252-
// src: string;
253-
// alt: string;
254-
// author: string;
255-
// authorLink: string;
256-
// }) {
257-
// const {isInBlock} = React.useContext(IllustrationContext);
258-
259-
// return (
260-
// <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
261-
// <figure className="my-8 flex justify-center">
262-
// <img
263-
// src={src}
264-
// alt={alt}
265-
// style={{maxHeight: 300}}
266-
// className="rounded-lg"
267-
// />
268-
// {caption ? (
269-
// <figcaption className="text-center leading-tight mt-4">
270-
// {caption}
271-
// </figcaption>
272-
// ) : null}
273-
// </figure>
274-
// {!isInBlock && <AuthorCredit author={author} authorLink={authorLink} />}
275-
// </div>
276-
// );
277-
// }
278-
279-
const isInBlockTrue = {isInBlock: true};
280-
281-
// function IllustrationBlock({
282-
// sequential,
283-
// author,
284-
// authorLink,
285-
// children,
286-
// }: {
287-
// author: string;
288-
// authorLink: string;
289-
// sequential: boolean;
290-
// children: any;
291-
// }) {
292-
// const imageInfos = Children.toArray(children).map(
293-
// (child: any) => child.props
294-
// );
295-
// const images = imageInfos.map((info, index) => (
296-
// <figure key={index}>
297-
// <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
298-
// <img
299-
// className="text-primary"
300-
// src={info.src}
301-
// alt={info.alt}
302-
// height={info.height}
303-
// />
304-
// </div>
305-
// {info.caption ? (
306-
// <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">
307-
// {info.caption}
308-
// </figcaption>
309-
// ) : null}
310-
// </figure>
311-
// ));
312-
// return (
313-
// <IllustrationContext.Provider value={isInBlockTrue}>
314-
// <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
315-
// {sequential ? (
316-
// <ol className="mdx-illustration-block flex">
317-
// {images.map((x: any, i: number) => (
318-
// <li className="flex-1" key={i}>
319-
// {x}
320-
// </li>
321-
// ))}
322-
// </ol>
323-
// ) : (
324-
// <div className="mdx-illustration-block">{images}</div>
325-
// )}
326-
// <AuthorCredit author={author} authorLink={authorLink} />
327-
// </div>
328-
// </IllustrationContext.Provider>
329-
// );
330-
// }
331-
332-
type TranslationProgress = 'complete' | 'in-progress';
333-
334-
function LanguageList({progress}: {progress: TranslationProgress}) {
335-
const allLanguages = React.useContext(LanguagesContext) ?? [];
336-
const languages = allLanguages
337-
.filter(
338-
({code}) =>
339-
code !== 'en' &&
340-
(progress === 'complete'
341-
? finishedTranslations.includes(code)
342-
: !finishedTranslations.includes(code))
343-
)
344-
.sort((a, b) => a.enName.localeCompare(b.enName));
345-
return (
346-
<UL>
347-
{languages.map(({code, name, enName}) => {
348-
return (
349-
<LI key={code}>
350-
<Link href={`https://${code}.react.dev/`}>
351-
{enName} ({name})
352-
</Link>{' '}
353-
&mdash;{' '}
354-
<Link href={`https://github.com/reactjs/${code}.react.dev`}>
355-
Contribute
356-
</Link>
357-
</LI>
358-
);
359-
})}
360-
</UL>
361-
);
362-
}
363-
364215
function YouTubeIframe(props: any) {
365216
return (
366217
<div className="relative h-0 overflow-hidden pt-[56.25%]">

‎src/components/MDX/Primitives.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {HTMLAttributes} from 'react';
2+
3+
export const P = (p: HTMLAttributes<HTMLParagraphElement>) => (
4+
<p className="whitespace-pre-wrap my-4" {...p} />
5+
);
6+
7+
export const Strong = (strong: HTMLAttributes<HTMLElement>) => (
8+
<strong className="font-bold" {...strong} />
9+
);
10+
11+
export const OL = (p: HTMLAttributes<HTMLOListElement>) => (
12+
<ol className="ms-6 my-3 list-decimal" {...p} />
13+
);
14+
export const LI = (p: HTMLAttributes<HTMLLIElement>) => (
15+
<li className="leading-relaxed mb-1" {...p} />
16+
);
17+
export const UL = (p: HTMLAttributes<HTMLUListElement>) => (
18+
<ul className="ms-6 my-3 list-disc" {...p} />
19+
);
20+
21+
export const Divider = () => (
22+
<hr className="my-6 block border-b border-t-0 border-border dark:border-border-dark" />
23+
);

0 commit comments

Comments
 (0)