add resources table
This commit is contained in:
parent
0d1c98bd40
commit
ea840b2ea3
5 changed files with 100 additions and 12 deletions
|
@ -60,6 +60,11 @@ Usually, at least one problem from every gold division contest involves some sor
|
|||
|
||||
The following tutorials serve as an introduction into the mindset of DP.
|
||||
|
||||
<resources>
|
||||
<resource source="CPH" title="CPH 7" starred>Great introduction that covers most classical problems</resource>
|
||||
<resource source="Topcoder" title="DP from Novice to Advanced">great for all skill levels</resource>
|
||||
</resources>
|
||||
|
||||
- CPH 7
|
||||
- great introduction that covers most classical problems
|
||||
- [Topcoder DP](https://www.topcoder.com/community/competitive-programming/tutorials/dynamic-programming-from-novice-to-advanced/)
|
||||
|
|
|
@ -4,6 +4,10 @@ import { MDXProvider } from '@mdx-js/react';
|
|||
import { ProblemsListComponent } from './src/components/markdown/Problems';
|
||||
import CodeBlock from './src/components/markdown/CodeBlock';
|
||||
import SpoilerComponent from './src/components/markdown/SpoilerComponent';
|
||||
import {
|
||||
ResourceComponent,
|
||||
ResourcesListComponent,
|
||||
} from './src/components/markdown/Resources';
|
||||
|
||||
const components = {
|
||||
'module-excerpt': props => <div {...props} />,
|
||||
|
@ -87,6 +91,8 @@ const components = {
|
|||
</div>
|
||||
),
|
||||
'problems-list': ProblemsListComponent,
|
||||
resources: ResourcesListComponent,
|
||||
resource: ResourceComponent,
|
||||
code: CodeBlock,
|
||||
inlineCode: props => (
|
||||
<code
|
||||
|
|
20
src/components/Dots.tsx
Normal file
20
src/components/Dots.tsx
Normal file
|
@ -0,0 +1,20 @@
|
|||
import * as React from 'react';
|
||||
|
||||
export default function Dots({ count, color, totalCount }) {
|
||||
const emptyCircle = 'text-gray-300';
|
||||
return (
|
||||
<>
|
||||
{new Array(totalCount).fill(null).map((_, idx) => (
|
||||
<svg
|
||||
className={`-ml-1 mr-1.5 h-2.5 w-2.5 ${
|
||||
idx >= count ? emptyCircle : color
|
||||
}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 8 8"
|
||||
>
|
||||
<circle cx="4" cy="4" r="3" />
|
||||
</svg>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
63
src/components/markdown/Resources.tsx
Normal file
63
src/components/markdown/Resources.tsx
Normal file
|
@ -0,0 +1,63 @@
|
|||
import * as React from 'react';
|
||||
import Dots from '../Dots';
|
||||
|
||||
export function ResourcesListComponent(props) {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
||||
<div className="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Source
|
||||
</th>
|
||||
<th className="py-3 border-b border-gray-200 bg-gray-50 w-6" />
|
||||
<th className="pl-3 pr-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Resource Name
|
||||
</th>
|
||||
<th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
|
||||
Notes
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-alternating-stripes">
|
||||
{props.children}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ResourceComponent(props) {
|
||||
const url =
|
||||
props.source === 'CPH' && !props.url
|
||||
? 'https://cses.fi/book/book.pdf'
|
||||
: props.url;
|
||||
return (
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
|
||||
{props.source}
|
||||
</td>
|
||||
<td className="py-4 whitespace-no-wrap text-sm leading-5 text-gray-500 w-6">
|
||||
{props.starred && (
|
||||
<svg
|
||||
className="h-6 w-6 text-blue-700"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
|
||||
</svg>
|
||||
)}
|
||||
</td>
|
||||
<td className="pl-3 pr-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
|
||||
<a href={url}>{props.title}</a>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
|
||||
{props.children}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
|
@ -17,6 +17,7 @@ import SEO from '../components/seo';
|
|||
// @ts-ignore
|
||||
import logo from '../assets/logo.svg';
|
||||
import { ModuleFrequency, ModuleInfo, ModuleLinkInfo } from '../module';
|
||||
import Dots from '../components/Dots';
|
||||
|
||||
const renderPrerequisite = prerequisite => {
|
||||
return <li key={prerequisite}>{prerequisite}</li>;
|
||||
|
@ -310,7 +311,6 @@ const Frequency = ({ frequency }: { frequency: ModuleFrequency }) => {
|
|||
'Somewhat Frequent',
|
||||
'Very Frequent (historically ~ once per contest)',
|
||||
];
|
||||
const emptyCircle = 'text-gray-300';
|
||||
|
||||
return (
|
||||
<span
|
||||
|
@ -318,17 +318,11 @@ const Frequency = ({ frequency }: { frequency: ModuleFrequency }) => {
|
|||
textColors[frequency - 1]
|
||||
}`}
|
||||
>
|
||||
{new Array(4).fill(null).map((_, idx) => (
|
||||
<svg
|
||||
className={`-ml-1 mr-1.5 h-2.5 w-2.5 ${
|
||||
idx >= frequency ? emptyCircle : circleColors[frequency - 1]
|
||||
}`}
|
||||
fill="currentColor"
|
||||
viewBox="0 0 8 8"
|
||||
>
|
||||
<circle cx="4" cy="4" r="3" />
|
||||
</svg>
|
||||
))}
|
||||
<Dots
|
||||
count={frequency}
|
||||
totalCount={4}
|
||||
color={circleColors[frequency - 1]}
|
||||
/>
|
||||
{labels[frequency - 1]}
|
||||
</span>
|
||||
);
|
||||
|
|
Reference in a new issue