Merge branch 'master' of https://github.com/thecodingwizard/usaco-guide

docs/Content Documentation.md

@@ -70,7 +70,11 @@ prerequisites:
 ...
 ```
 
-## 4. MDX and Custom Components
+## 4. Table of Contents
+
+A table of contents will be auto-generated based off of the headings in the Markdown. Keep this in mind when formatting your module.
+
+## 5. MDX and Custom Components
 
 We're using [MDX](https://mdxjs.com/), a superset of Markdown. HTML and React components are supported, so it is possible to add interactivity / custom components to each module.
 
@@ -145,7 +149,7 @@ when writing solutions to problems.
 ```
 <Warning title="Insert Title Here">
 
-**Markdown is Supported!!**
+Fun fact: the title attribute is optional.
 
 </Warning>
 ```
@@ -162,20 +166,20 @@ Fun fact: the title attribute is optional.
 
 ### Problem Lists
 
-todo document this... Relevant files are `content/models.ts` and `src/components/markdown/Problems.tsx`. Hopefully, the existing mdx files can help you out...
-
 Problem constructor:
 
 ```typescript
-constructor(
-  public source: string,
-  public name: string,
-  public id: string,
-  public difficulty?: 'Intro' | 'Easy' | 'Normal' | 'Hard' | 'Very Hard',
-  public starred?: boolean,
-  public tags?: string[],
-  public sketch?: string,
-)
+class Problem {
+  constructor(
+    public source: string,
+    public name: string,
+    public id: string,
+    public difficulty?: 'Intro' | 'Easy' | 'Normal' | 'Hard' | 'Very Hard',
+    public starred?: boolean,
+    public tags?: string[],
+    public sketch?: string,
+  ) {}
+}
 ```
 
 Example usage:
@@ -247,8 +251,33 @@ stub
 
 ### Language-Specific Content
 
-stub
+```mdx
+<LanguageSection>
+<CPPSection>
+
+# A heading that only appears in C++
+
+CPP content goes here, note the newlines!
+
+</CPPSection>
+<JavaSection>
+
+Java content goes here!
+
+</JavaSection>
+<PySection />
+</LanguageSection>
+```
+
+In the example above, nothing will be rendered for Python.
 
 ### Incomplete Section
 
-stub
+```mdx
+<IncompleteSection>
+
+- this list is optional and can be used to specify what is missing
+- missing 32-bit integer explanation
+
+</IncompleteSection>
+```

src/components/markdown/ResourcesList.tsx

@@ -5,29 +5,20 @@ import { useContext } from 'react';
 import UserDataContext from '../../context/UserDataContext';
 
 export function ResourcesList(props) {
-  const embedded = props.embedded;
   return (
     <div className="flex flex-col mb-4">
       <div
-        className={`overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 -my-2 py-2 ${
-          embedded ? 'mb-2' : ''
-        }`}
+        className={`overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 -my-2 py-2`}
       >
         <div
-          className={`align-middle inline-block min-w-full overflow-hidden shadow ${
-            !embedded && 'rounded-lg border border-purple-400'
-          }`}
+          className={`align-middle inline-block min-w-full overflow-hidden shadow rounded-lg border border-purple-400`}
         >
           <table className="min-w-full">
             <thead>
               <tr>
                 <th
                   colSpan={4}
-                  className={`px-4 sm:px-6 border-b text-left font-medium uppercase ${
-                    embedded
-                      ? 'text-sm py-2 border-gray-200 bg-gray-50 text-gray-500'
-                      : 'py-3 border-purple-200 bg-purple-50 text-purple-500'
-                  }`}
+                  className={`px-4 sm:px-6 border-b text-left font-medium uppercase py-3 border-purple-200 bg-purple-50 text-purple-500`}
                 >
                   Resources{props.title ? `: ${props.title}` : ''}
                 </th>