a/usaco-guide
Archived
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

migrate remaining files from .js to .ts

Browse source
This commit is contained in:
Nathan Wang 2020-06-21 16:09:50 -07:00
parent 5516bd4575
commit f427567790
15 changed files with 220 additions and 207 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
content/ordering.js → content/ordering.ts
View file

89
gatsby-browser.js
View file

@ -1,86 +1,3 @@
import './src/styles/main.css';
import React from 'react';
import { MDXProvider } from '@mdx-js/react';
const SpoilerComponent = ({ children, title }) => {
const [show, setShow] = React.useState(false);
return (
<div className={`border border-gray-200 rounded-md`}>
<p
className="p-4 flex items-start"
onClick={e => setShow(!show)}
style={{ marginBottom: 0 }}
>
{show && (
<svg
className="h-6 w-6 text-gray-500 mr-4"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
)}
{!show && (
<svg
className="h-6 w-6 text-gray-500 mr-4"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
)}
{title}
</p>
{show && <div className="p-4 pt-0 spoiler-body">{children}</div>}
</div>
);
};
const components = {
wrapper: ({ excerptOnly = false, children }) => {
if (excerptOnly) {
for (let child of children) {
if (child.props.originalType === 'module-excerpt') return child;
}
return null;
}
return children;
},
'module-excerpt': props => <div {...props} />,
spoiler: SpoilerComponent,
'info-block': ({ children }) => (
<div className="rounded-md bg-blue-50 p-4 info-block mb-4">
<div className="flex">
<div className="flex-shrink-0">
<svg
className="h-5 w-5 text-blue-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">{children}</div>
</div>
</div>
),
};
export const wrapRootElement = ({ element }) => (
<MDXProvider components={components}>{element}</MDXProvider>
);
// This file shouldn't be necessary, but for some reason Gatsby is not loading
// gatsby-browser.tsx (note the "x") properly...
module.exports = require('./gatsby-browser.tsx');

86
gatsby-browser.tsx Normal file
View file

@ -0,0 +1,86 @@
import './src/styles/main.css';
import * as React from 'react';
import { MDXProvider } from '@mdx-js/react';
const SpoilerComponent = ({ children, title }) => {
const [show, setShow] = React.useState(false);
return (
<div className={`border border-gray-200 rounded-md`}>
<p
className="p-4 flex items-start"
onClick={e => setShow(!show)}
style={{ marginBottom: 0 }}
>
{show && (
<svg
className="h-6 w-6 text-gray-500 mr-4"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
)}
{!show && (
<svg
className="h-6 w-6 text-gray-500 mr-4"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clipRule="evenodd"
/>
</svg>
)}
{title}
</p>
{show && <div className="p-4 pt-0 spoiler-body">{children}</div>}
</div>
);
};
const components = {
wrapper: ({ excerptOnly = false, children }) => {
if (excerptOnly) {
for (let child of children) {
if (child.props.originalType === 'module-excerpt') return child;
}
return null;
}
return children;
},
'module-excerpt': props => <div {...props} />,
spoiler: SpoilerComponent,
'info-block': ({ children }) => (
<div className="rounded-md bg-blue-50 p-4 info-block mb-4">
<div className="flex">
<div className="flex-shrink-0">
<svg
className="h-5 w-5 text-blue-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
</div>
<div className="ml-3">{children}</div>
</div>
</div>
),
};
export const wrapRootElement = ({ element }) => (
<MDXProvider components={components}>{element}</MDXProvider>
);

90
gatsby-config.js
View file

@ -1,85 +1,7 @@
const resolveConfig = require('tailwindcss/resolveConfig');
const tailwindConfig = require('./tailwind.config.js');
// We register the TypeScript evaluator in gatsby-config so we don't need to do
// it in any other .js file. It automatically reads TypeScript config from
// tsconfig.json.
require('ts-node').register();
const fullConfig = resolveConfig(tailwindConfig);
module.exports = {
siteMetadata: {
title: `USACO Guide`,
description: `A collection of curated, high-quality resources to take you from Bronze to Platinum.`,
author: `@usacoteam`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content`,
name: `content`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
`gatsby-remark-autolink-headers`,
{
resolve: 'gatsby-remark-custom-blocks',
options: {
blocks: {
info: {
containerElement: 'info-block',
title: 'optional',
},
},
},
},
{
resolve: `gatsby-remark-katex`,
options: {
// Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
strict: `ignore`,
},
},
{
resolve: `gatsby-remark-prismjs`,
options: {
noInlineHighlight: true,
},
},
],
plugins: [`gatsby-remark-autolink-headers`],
},
},
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require(`tailwindcss`)(tailwindConfig),
require(`autoprefixer`),
...(process.env.NODE_ENV === `production`
? [require(`cssnano`)]
: []),
],
},
},
`gatsby-plugin-react-helmet`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
// {
// resolve: `gatsby-plugin-manifest`,
// options: {
// name: `gatsby-starter-default`,
// short_name: `starter`,
// start_url: `/`,
// background_color: `#663399`,
// theme_color: `#663399`,
// display: `minimal-ui`,
// // icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
// },
// },
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
};
// Use a TypeScript version of gatsby-config.js.
module.exports = require('./gatsby-config.ts');

76
gatsby-config.ts Normal file
View file

@ -0,0 +1,76 @@
export const siteMetadata = {
title: `USACO Guide`,
description: `A collection of curated, high-quality resources to take you from Bronze to Platinum.`,
author: `@usacoteam`,
};
export const plugins = [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content`,
name: `content`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
`gatsby-remark-autolink-headers`,
{
resolve: 'gatsby-remark-custom-blocks',
options: {
blocks: {
info: {
containerElement: 'info-block',
title: 'optional',
},
},
},
},
{
resolve: `gatsby-remark-katex`,
options: {
// Add any KaTeX options from https://github.com/KaTeX/KaTeX/blob/master/docs/options.md here
strict: `ignore`,
},
},
{
resolve: `gatsby-remark-prismjs`,
options: {
noInlineHighlight: true,
},
},
],
plugins: [`gatsby-remark-autolink-headers`],
},
},
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require(`tailwindcss`),
require(`autoprefixer`),
...(process.env.NODE_ENV === `production` ? [require(`cssnano`)] : []),
],
},
},
`gatsby-plugin-react-helmet`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
// {
// resolve: `gatsby-plugin-manifest`,
// options: {
// name: `gatsby-starter-default`,
// short_name: `starter`,
// start_url: `/`,
// background_color: `#663399`,
// theme_color: `#663399`,
// display: `minimal-ui`,
// // icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
// },
// },
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
];

2
gatsby-node.js
View file

@ -1,2 +0,0 @@
require = require('esm')(module);
module.exports = require('./gatsby-node.esm.js');

4
gatsby-node.esm.js → gatsby-node.ts
View file

@ -1,6 +1,6 @@
import ModuleOrdering, { divisions } from './content/ordering';
exports.createPages = async ({ actions, graphql, reporter }) => {
exports.createPages = async ({ actions }) => {
const { createPage } = actions;
// Generate Module Pages //
@ -28,7 +28,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
// Generate Syllabus Pages //
const syllabusTemplate = require.resolve(
`./src/templates/syllabusTemplate.js`
`./src/templates/syllabusTemplate.tsx`
);
divisions.forEach(division => {
createPage({

4
package.json
View file

@ -33,7 +33,9 @@
"react-transition-group": "^4.4.1",
"rehype-react": "^6.0.0",
"remark": "^12.0.0",
"tailwindcss": "^1.4.6"
"tailwindcss": "^1.4.6",
"ts-node": "^8.10.2",
"typescript": "^3.9.5"
},
"devDependencies": {
"husky": "^4.2.5",

2
src/components/Markdown.js → src/components/Markdown.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import '../styles/markdown.css';
import 'katex/dist/katex.min.css';

2
src/components/SyllabusModule.js → src/components/SyllabusModule.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import { Link } from 'gatsby';
const CompletedCheck = () => (

18
src/components/seo.js → src/components/seo.tsx
View file

@ -5,12 +5,11 @@
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from 'react';
import PropTypes from 'prop-types';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import { useStaticQuery, graphql } from 'gatsby';
function SEO({ description, lang, meta, title }) {
function SEO({ description = '', lang = 'en', meta = [], title }) {
const { site } = useStaticQuery(
graphql`
query {
@ -73,17 +72,4 @@ function SEO({ description, lang, meta, title }) {
);
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
};
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
};
export default SEO;

12
src/html.js → src/html.tsx
View file

@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import * as React from 'react';
export default function HTML(props) {
return (
@ -25,12 +24,3 @@ export default function HTML(props) {
</html>
);
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
};

4
src/templates/syllabusTemplate.js → src/templates/syllabusTemplate.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import * as React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
@ -50,7 +50,7 @@ export default function Template(props) {
const color = colors[selectedDivision];
const module = getModule(allModules, selectedDivision);
// for purgecss, we have to list all the classes that are dynamically generated...
// for PurgeCSS, we have to list all the classes that are dynamically generated...
/*
bg-blue-500 hover:bg-blue-50 hover:text-blue-600 focus:shadow-outline-blue
bg-pink-500 hover:bg-pink-50 hover:text-pink-600 focus:shadow-outline-pink

0
src/utils.js → src/utils.ts
View file

38
yarn.lock
View file

@ -2432,6 +2432,11 @@ are-we-there-yet@~1.1.2:
delegates "^1.0.0"
readable-stream "^2.0.6"
arg@^4.1.0:
version "4.1.3"
resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
argparse@^1.0.7:
version "1.0.10"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@ -4912,6 +4917,11 @@ diff-sequences@^25.2.6:
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
diff@^4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
diffie-hellman@^5.0.0:
version "5.0.3"
resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@ -9588,6 +9598,11 @@ make-dir@^3.0.0:
dependencies:
semver "^6.0.0"
make-error@^1.1.1:
version "1.3.6"
resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
map-cache@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
@ -13417,7 +13432,7 @@ source-map-resolve@^0.5.0:
source-map-url "^0.4.0"
urix "^0.1.0"
source-map-support@~0.5.12:
source-map-support@^0.5.17, source-map-support@~0.5.12:
version "0.5.19"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@ -14365,6 +14380,17 @@ ts-invariant@^0.4.0:
dependencies:
tslib "^1.9.3"
ts-node@^8.10.2:
version "8.10.2"
resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.10.2.tgz#eee03764633b1234ddd37f8db9ec10b75ec7fb8d"
integrity sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==
dependencies:
arg "^4.1.0"
diff "^4.0.1"
make-error "^1.1.1"
source-map-support "^0.5.17"
yn "3.1.1"
ts-pnp@^1.1.6:
version "1.2.0"
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
@ -14471,6 +14497,11 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
typescript@^3.9.5:
version "3.9.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
ua-parser-js@^0.7.18:
version "0.7.21"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
@ -15736,6 +15767,11 @@ yeast@0.1.2:
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk=
yn@3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
yoga-layout-prebuilt@^1.9.3:
version "1.9.6"
resolved "https://registry.yarnpkg.com/yoga-layout-prebuilt/-/yoga-layout-prebuilt-1.9.6.tgz#98dde95bbf8e6e12835876e9305f1e995c4bb801"