add one-lang-only components (#3174)

Author: bqi343

CONTRIBUTING.md

@@ -1,4 +1,3 @@
 # Contributing
 
-Check the [Contributing module](https://usaco.guide/general/contributing)
-module.
+Check the [Contributing](https://usaco.guide/general/contributing) module.

content/1_General/Working_MDX.mdx

@@ -118,6 +118,9 @@ imported):
 - `<CPPSection>`
 - `<JavaSection>`
 - `<PySection>`
+- `<CPPOnly>`
+- `<JavaOnly>`
+- `<PyOnly>`
 - `<IncompleteSection>`
 - `<Asterisk>`
 - `<Quiz>`
@@ -557,6 +560,29 @@ Java code here
 <PySection />
 </LanguageSection>
 
+If you want to render content for only a single language, it is more convenient 
+to use `CPPOnly`, `JavaOnly`, or `PyOnly`:
+
+````
+<CPPOnly>
+#### A heading that only appears in C++
+
+```cpp
+C++ code here
+```
+
+</CPPOnly>
+````
+
+<CPPOnly>
+#### A heading that only appears in C++
+
+```cpp
+C++ code here
+```
+
+</CPPOnly>
+
 ### Quizzes
 
 ````

src/components/markdown/LanguageSection.tsx

@@ -4,23 +4,8 @@ import { LANGUAGE_LABELS } from '../../context/UserDataContext/properties/userLa
 import UserDataContext from '../../context/UserDataContext/UserDataContext';
 import Danger from './Danger';
 
-export const LanguageSection = (props: {
-  children?: React.ReactNode;
-}): JSX.Element => {
+const sectionFromLang = sections => {
   const { lang: userLang } = useContext(UserDataContext);
-
-  const sections = {};
-  React.Children.map(props.children, child => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const type = (child as any).type.name;
-    const typeToLang = {
-      CPPSection: 'cpp',
-      JavaSection: 'java',
-      PySection: 'py',
-    };
-    sections[typeToLang[type]] = child;
-  });
-
   if (userLang === 'showAll') {
     return (
       <>
@@ -77,6 +62,48 @@ export const LanguageSection = (props: {
   return sections[userLang];
 };
 
+export const LanguageSection = (props: {
+  children?: React.ReactNode;
+}): JSX.Element => {
+  const sections = {};
+  React.Children.map(props.children, child => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const type = (child as any).type.name;
+    const typeToLang = {
+      CPPSection: 'cpp',
+      JavaSection: 'java',
+      PySection: 'py',
+    };
+    sections[typeToLang[type]] = child;
+  });
+  return sectionFromLang(sections);
+};
+
+export const CPPOnly = (props: { children?: React.ReactNode }): JSX.Element => {
+  return sectionFromLang({
+    cpp: props.children,
+    java: <></>,
+    py: <></>,
+  });
+};
+export const JavaOnly = (props: {
+  children?: React.ReactNode;
+}): JSX.Element => {
+  return sectionFromLang({
+    cpp: <></>,
+    java: props.children,
+    py: <></>,
+  });
+};
+
+export const PyOnly = (props: { children?: React.ReactNode }): JSX.Element => {
+  return sectionFromLang({
+    cpp: <></>,
+    java: <></>,
+    py: props.children,
+  });
+};
+
 export const CPPSection = (props: {
   children?: React.ReactNode;
 }): JSX.Element => {

src/components/markdown/MDXComponents.tsx

@@ -6,9 +6,12 @@ import HTMLComponents from './HTMLComponents';
 import { IncompleteSection } from './IncompleteSection';
 import Info from './Info';
 import {
+  CPPOnly,
   CPPSection,
+  JavaOnly,
   JavaSection,
   LanguageSection,
+  PyOnly,
   PySection,
 } from './LanguageSection';
 import Optional from './Optional';
@@ -51,6 +54,9 @@ export const components = {
   DivisionList,
   Resource,
   TextTooltip,
+  CPPOnly,
+  JavaOnly,
+  PyOnly,
   LanguageSection,
   CPPSection,
   JavaSection,