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

content/5_Gold/DP.mdx

@@ -61,6 +61,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/)

gatsby-browser.tsx

@@ -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

src/components/Dots.tsx

@@ -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>
+      ))}
+    </>
+  );
+}

src/components/markdown/Resources.tsx

@@ -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>
+  );
+}

src/templates/moduleTemplate.tsx

@@ -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>;
@@ -313,24 +314,17 @@ const Frequency = ({ frequency }: { frequency: ModuleFrequency }) => {
     'Somewhat Frequent',
     'Very Frequent (historically ~ once per contest)',
   ];
-  const emptyCircle = 'text-gray-300';
 
   return (
     <span
       className={`inline-flex items-center font-medium ${textColors[frequency]}`}
     >
-      {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]
-          }`}
-          fill="currentColor"
-          viewBox="0 0 8 8"
-        >
-          <circle cx="4" cy="4" r="3" />
-        </svg>
-      ))}
-      {labels[frequency]}
+      <Dots
+        count={frequency}
+        totalCount={4}
+        color={circleColors[frequency - 1]}
+      />
+      {labels[frequency - 1]}
     </span>
   );
 };