update docs
This commit is contained in:
parent
be999da7ce
commit
cdf2d99a51
2 changed files with 47 additions and 27 deletions
|
@ -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>
|
||||
```
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in a new issue