Initial release (home page only)

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["emotion"]
+}

.eslintignore

@@ -0,0 +1 @@
+out

.eslintrc

@@ -0,0 +1,40 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "jsx-a11y/anchor-has-content": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/accessible-emoji": "off",
+    "jsx-a11y/iframe-has-title": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/no-unescaped-entities": 0
+  },
+  "overrides": [
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]
+}

.gitignore

@@ -1,4 +1,5 @@
 out
+tmp
 
 # Logs
 logs

.nvmrc

@@ -0,0 +1 @@
+v13.0.1

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

.svgrrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  template({ template }, _, { componentName, jsx }) {
+    const typeScriptTpl = template.smart({ plugins: ['typescript'] })
+    return typeScriptTpl.ast`
+    import React from 'react';
+    const ${componentName} = (props: React.SVGProps<SVGSVGElement>) => ${jsx};
+    export default ${componentName};
+  `
+  }
+}

README.md

@@ -0,0 +1,7 @@
+# [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
+
+## License & Credits
+
+- For emojis, I’m using [Twemoji](https://github.com/twitter/twemoji) by Twitter (CC-BY 4.0 license).
+- The text for this course is licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/).
+- Everything else is licensed under the [MIT](docs/license-non-text.txt) license.

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,13 @@
+const path = require('path')
+
+const config = {
+  webpack(config) {
+    config.resolve.alias = Object.assign({}, config.resolve.alias, {
+      src: path.resolve(__dirname, 'src')
+    })
+
+    return config
+  }
+}
+
+module.exports = config

package.json

@@ -1,13 +1,46 @@
 {
   "private": true,
+  "engines": {
+    "node": "13.x"
+  },
   "dependencies": {
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
+    "color": "^3.1.2",
+    "luxon": "^1.21.1",
     "next": "^9.1.3",
+    "prism-react-renderer": "^1.0.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0"
   },
   "scripts": {
     "dev": "next",
     "build": "next build && next export",
-    "start": "next start"
+    "start": "next start",
+    "tsc": "tsc",
+    "eslint": "eslint --ext .js,.ts,.tsx .",
+    "eslint:fix": "eslint --ext .js,.ts,.tsx --fix .",
+    "svgr": "svgr --ext tsx --no-svgo --no-dimensions -d ."
+  },
+  "devDependencies": {
+    "@svgr/cli": "^4.3.3",
+    "@types/color": "^3.0.0",
+    "@types/luxon": "^1.15.2",
+    "@types/node": "^12.12.7",
+    "@types/prettier": "^1.18.3",
+    "@types/react": "^16.9.5",
+    "@types/react-dom": "^16.9.4",
+    "@typescript-eslint/eslint-plugin": "^2.6.1",
+    "@typescript-eslint/parser": "^2.6.1",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-emotion": "^10.0.23",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.4.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "2.2.0",
+    "prettier": "^1.19.1",
+    "typescript": "^3.7.2"
   }
 }

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/components/BubbleQuotes.tsx

@@ -0,0 +1,74 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import Emoji, { emojiToComponent } from 'src/components/Emoji'
+import useTheme from 'src/hooks/useTheme'
+
+interface BubbleQuoteProps {
+  type: keyof typeof emojiToComponent
+  children: React.ReactNode
+}
+
+type Size = 'md' | 'lg'
+
+const BubbleQuotes = ({
+  quotes,
+  size = 'md'
+}: {
+  quotes: readonly BubbleQuoteProps[]
+  size?: Size
+}) => {
+  const { ns, spaces, radii, colors, fontSizes, lineHeights } = useTheme()
+  return (
+    <div
+      css={css`
+        margin-top: ${spaces(1.75, true)};
+        margin-bottom: ${spaces(1.75, true)};
+        ${ns} {
+          font-size: ${size === 'lg' ? fontSizes(1.2) : fontSizes(1)};
+          line-height: ${size === 'lg' ? lineHeights(1.5) : lineHeights(1.6)};
+        }
+      `}
+    >
+      {quotes.map(({ type, children }, index) => (
+        <div
+          key={`${type}${index}`}
+          css={css`
+            margin: 0 0 ${spaces(1, true)};
+            display: flex;
+          `}
+        >
+          <div
+            css={css`
+              font-size: ${size === 'lg' ? fontSizes(2) : fontSizes(1)};
+              margin-right: ${size === 'lg' ? spaces(0.5) : spaces(0.25)};
+              padding-top: ${spaces(0.5)};
+
+              ${ns} {
+                padding-top: ${spaces(0)};
+                margin-right: ${size === 'lg' ? spaces(1) : spaces(0.75)};
+                font-size: ${size === 'lg' ? fontSizes(4) : fontSizes(1)};
+              }
+            `}
+          >
+            <Emoji type={type} />
+          </div>
+          <div
+            css={css`
+              background: ${colors('lightYellow1')};
+              padding: ${spaces(1, true)} ${spaces(1, true)} 0;
+              border-radius: ${radii(0.5)};
+
+              ${ns} {
+                padding: ${spaces(1, true)} ${spaces(1, true)} 0;
+              }
+            `}
+          >
+            {children}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default BubbleQuotes

src/components/Container.tsx

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { css, jsx, SerializedStyles } from '@emotion/core'
+import { allMaxWidths } from 'src/lib/theme/maxWidths'
+import { allSpaces } from 'src/lib/theme/spaces'
+import useTheme from 'src/hooks/useTheme'
+
+export interface ContainerProps {
+  children: React.ReactNode
+  Component: React.ComponentType | string
+  size: keyof typeof allMaxWidths
+  horizontalPadding: keyof typeof allSpaces
+  cssOverrides?: SerializedStyles
+}
+
+const Container = ({
+  children,
+  Component,
+  size,
+  horizontalPadding,
+  cssOverrides
+}: ContainerProps) => {
+  const { maxWidths, spaces } = useTheme()
+  return (
+    <Component
+      css={[
+        css`
+          max-width: ${maxWidths(size)};
+          margin: 0 auto;
+          padding: 0 ${spaces(horizontalPadding)};
+        `,
+        cssOverrides
+      ]}
+    >
+      {children}
+    </Component>
+  )
+}
+
+Container.defaultProps = {
+  Component: 'div',
+  size: 'md',
+  horizontalPadding: 0.75
+}
+
+export default Container

src/components/ContentTags/P.tsx

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import useTheme from 'src/hooks/useTheme'
+
+export const P = (props: JSX.IntrinsicElements['p']) => {
+  const { spaces } = useTheme()
+  return (
+    <p
+      {...props}
+      css={[
+        css`
+          margin: 0 0 ${spaces(1, true)};
+        `
+      ]}
+    />
+  )
+}

src/components/ContentTags/index.tsx

@@ -0,0 +1 @@
+export { P } from 'src/components/ContentTags/P'

src/components/Emoji/Bird.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+const SvgBird = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <path
+      fill="#FFAC33"
+      d="M8.916 12.88c-.111 1.652 1.768 3.126-.712 2.959-2.48-.167-7.836-2.533-7.768-3.53s3.708-2.757 6.188-2.59c2.48.166 2.404 1.508 2.292 3.161zm20.122 16.049c-.202-.032-.392.015-.564.095-2.325.232-3.225-1.885-3.225-1.885-.439-.336-.981-2.009-1.589-1.215l.187 1.402c.187 1.402 2.57 3.224 2.57 3.224l-1.215 1.589c-.336.439-.252 1.066.187 1.402.439.336 1.066.252 1.402-.187l.673-.88-.039.249c-.087.546.285 1.058.831 1.145.546.087 1.058-.285 1.145-.831l.47-2.963c.085-.546-.287-1.058-.833-1.145zm-6.278.623c-.196-.058-.39-.037-.572.018-2.335-.082-2.944-2.3-2.944-2.3-.39-.392-.703-2.123-1.412-1.417l-.003 1.414c-.003 1.414 2.115 3.539 2.115 3.539l-1.417 1.412c-.392.39-.393 1.023-.003 1.414.39.392 1.023.393 1.414.003l.785-.782-.073.242c-.159.529.141 1.086.67 1.246.529.159 1.087-.141 1.246-.67l.862-2.873c.162-.53-.138-1.087-.668-1.246z"
+    />
+    <path
+      fill="#DD2E44"
+      d="M35.009 6.729c-.383-.17-.758-.057-1.05.244-.054.056-4.225 6.306-14.532 4.944-.34-.045 3.139 11.968 3.199 11.962.124-.014 3.07-.368 6.14-2.553 2.818-2.005 6.284-5.991 6.797-13.598.028-.418-.171-.828-.554-.999z"
+    />
+    <path
+      fill="#DD2E44"
+      d="M34.477 21.108c-.204-.336-.59-.56-.979-.471-1.293.295-3.197.543-4.53.453-6.357-.428-9.361-4.129-9.392-4.16-.275-.282.466 11.552.816 11.576 9.194.62 13.862-6.027 14.057-6.31.222-.326.233-.751.028-1.088z"
+    />
+    <path
+      fill="#DD2E44"
+      d="M24.586 19.016c-.371 5.51 1.316 9.861-4.194 9.489-5.51-.371-10.145-4.92-9.774-10.431s14.34-4.568 13.968.942z"
+    />
+    <path
+      fill="#DD2E44"
+      d="M23.257 12.412c-.353 5.235-3.922 9.257-9.156 8.904-5.235-.353-9.193-4.882-8.84-10.117.353-5.235 4.832-8.444 10.067-8.091 4.001.269 8.24 4.683 7.929 9.304z"
+    />
+    <circle fill="#292F33" cx={10.67} cy={8.989} r={2} />
+    <path
+      fill="#A0041E"
+      d="M18.179 16.645s7.63 5.648 12.387-4.459c.396-.842 1.685.793.099 4.162s-8.175 6.44-12.04 1.536c-.815-1.035-.446-1.239-.446-1.239z"
+    />
+    <path
+      fill="#DD2E44"
+      d="M15.327 3.107s6.246.254 7.798-.477.136 2.932-3.262 3.789-4.536-3.312-4.536-3.312z"
+    />
+    <path
+      fill="#DD2E44"
+      d="M17.428 5.788s4.501.136 6.054-.594.136 2.932-3.262 3.789c-3.399.857-2.792-3.195-2.792-3.195z"
+    />
+  </svg>
+)
+
+export default SvgBird