chibicode · chibicode · Nov 22, 2019 · Nov 22, 2019 · Nov 22, 2019 · Nov 22, 2019
diff --git a/README.md b/README.md
@@ -1,7 +1,21 @@
-# TypeScript for Beginner Programmers
+# [TypeScript for Beginner Programmers](https://ts.chibicode.com)
+
+### This is the repository for the TypeScript tutorial website called **[TypeScript for Beginner Programmers](https://ycombinator.chibicode.com/)**.
+
+<p>
+  <a href="https://ts.chibicode.com/"><img src="public/images/og-index.png" width="600" /></a>
+</p>
 
 ## 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](LICENSE-non-text.txt) license.
+- The text for this website 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](LICENSE-non-text.txt) license.
+
+## Author
+
+**Shu Uesugi**
+
+- Twitter: [@chibicode](https://twitter.com/chibicode)
+- [Website](https://chibicode.com)
+- Email: [shu@chibicode.com](mailto:shu@chibicode.com)
diff --git a/snippets/snippets/generics/bwyu.ts b/snippets/snippets/generics/bwyu.ts
@@ -0,0 +1,5 @@
+// Confused by generics code like this?
+function makePair<
+  F extends number | string,
+  S extends boolean | F
+>()
diff --git a/snippets/snippets/generics/cqrm.ts b/snippets/snippets/generics/cqrm.ts
@@ -0,0 +1,6 @@
+function makePair<F, S>() {
+  // Usage: Pass F for A and S for B
+  let pair: Pair<F, S>
+
+  // ...
+}
diff --git a/snippets/snippets/generics/gozc.ts b/snippets/snippets/generics/gozc.ts
@@ -0,0 +1,8 @@
+// Creates a (number, string) pair
+const { getPair, setPair } = makePair<
+  number,
+  string
+>()
+
+// Must pass (number, string)
+setPair(1, 'hello')
diff --git a/snippets/snippets/generics/jejx.ts b/snippets/snippets/generics/jejx.ts
@@ -0,0 +1,7 @@
+const { getPair, setPair } = makePair()
+
+setPair(1, 2)
+console.log(getPair())
+
+setPair(3, 4)
+console.log(getPair())
diff --git a/snippets/snippets/generics/kiyi.ts b/snippets/snippets/generics/kiyi.ts
diff --git a/snippets/snippets/generics/lldl.ts b/snippets/snippets/generics/lldl.ts
@@ -0,0 +1,6 @@
+// Extract into a generic interface
+// to make it reusable
+interface Pair<A, B> {
+  first: A
+  second: B
+}
diff --git a/snippets/snippets/generics/mroc.ts b/snippets/snippets/generics/mroc.ts
@@ -0,0 +1,11 @@
+class State<S> {
+  state: S
+
+  getState() {
+    return this.state
+  }
+
+  setState(x: S) {
+    this.state = x
+  }
+}
diff --git a/snippets/snippets/generics/mrub.ts b/snippets/snippets/generics/mrub.ts
@@ -0,0 +1,5 @@
+function makePair<F, S>() {
+  let pair: { first: F; second: S }
+
+  // ...
+}
diff --git a/snippets/snippets/generics/nbvo.ts b/snippets/snippets/generics/nbvo.ts
@@ -0,0 +1,4 @@
+function makePair<
+  F extends number | string = number,
+  S extends number | string = number
+>()
diff --git a/snippets/snippets/generics/pjcw.ts b/snippets/snippets/generics/pjcw.ts
@@ -1,4 +1,4 @@
-// Set default value of x
+// Set the default value of x
 function regularFunc(x = 2)
 
 // x will be 2 inside the function

diff --git a/snippets/snippets/generics/qgea.ts b/snippets/snippets/generics/qgea.ts
@@ -0,0 +1,6 @@
+// Extract into a generic type alias. It’s
+// basically identical to using an interface
+type Pair<A, B> = {
+  first: A
+  second: B
+}
diff --git a/snippets/snippets/generics/qgxj.ts b/snippets/snippets/generics/qgxj.ts
@@ -0,0 +1,5 @@
+// makeState() has 1 type parameter
+function makeState<S>()
+
+// makePair() has 2 type parameters
+function makePair<F, S>()
diff --git a/snippets/snippets/generics/qqic.ts b/snippets/snippets/generics/qqic.ts
@@ -1,7 +1,7 @@
 // Doesn't work because the created state…
 const numAndStrState = makeState()
 
-// Supports both numbers…
+// Allows both numbers…
 numAndStrState.setState(1)
 console.log(numAndStrState.getState())
 
@@ -10,4 +10,4 @@ numAndStrState.setState('foo')
 console.log(numAndStrState.getState())
 
 // This is NOT what we want. We want to create
-// a number-only state, and a string-only state.
+// a number-only state and a string-only state.
diff --git a/snippets/snippets/generics/rxdm.ts b/snippets/snippets/generics/rxdm.ts
@@ -0,0 +1,16 @@
+function makePair<F, S>() {
+  let pair: { first: F; second: S }
+
+  function getPair() {
+    return pair
+  }
+
+  function setPair(x: F, y: S) {
+    pair = {
+      first: x,
+      second: y
+    }
+  }
+
+  return { getPair, setPair }
+}
diff --git a/snippets/snippets/generics/thxf.ts b/snippets/snippets/generics/thxf.ts
@@ -1,4 +1,4 @@
-// Set default type of S as number
+// Set the default type of S as number
 function makeState<
   S extends number | string = number
 >()
diff --git a/snippets/snippets/generics/ugeb.ts b/snippets/snippets/generics/ugeb.ts
@@ -0,0 +1,18 @@
+function makePair() {
+  // Stores a pair of values
+  let pair: { first: number; second: number }
+
+  function getPair() {
+    return pair
+  }
+
+  // Stores x as first and y as second
+  function setPair(x: number, y: number) {
+    pair = {
+      first: x,
+      second: y
+    }
+  }
+
+  return { getPair, setPair }
+}
diff --git a/snippets/snippets/generics/xekh.ts b/snippets/snippets/generics/xekh.ts
@@ -0,0 +1,17 @@
+// The second parameter S must be either
+// boolean or whatever was specified for F
+function makePair<
+  F extends number | string,
+  S extends boolean | F
+>()
+
+// These will work
+makePair<number, boolean>()
+makePair<number, number>()
+makePair<string, boolean>()
+makePair<string, string>()
+
+// This will fail because the second
+// parameter must extend boolean | number,
+// but instead it’s string
+makePair<number, string>()
diff --git a/snippets/snippets/generics/zdbq.ts b/snippets/snippets/generics/zdbq.ts
@@ -0,0 +1,7 @@
+// Pass a type parameter on initialization
+const numState = new State<number>()
+
+numState.setState(1)
+
+// Prints 1
+console.log(numState.getState())
diff --git a/src/components/ContentTags/A.tsx b/src/components/ContentTags/A.tsx
@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import useTheme from 'src/hooks/useTheme'
+
+const A = (props: JSX.IntrinsicElements['a']) => {
+  const { colors } = useTheme()
+  return (
+    <a
+      {...props}
+      css={[
+        css`
+          &:hover {
+            background: ${colors('white85')};
+          }
+        `
+      ]}
+    />
+  )
+}
+
+export default A
diff --git a/src/components/ContentTags/Code.tsx b/src/components/ContentTags/Code.tsx
@@ -1,8 +1,12 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import useTheme from 'src/hooks/useTheme'
+import { allColors } from 'src/lib/theme/colors'
 
-const Code = (props: JSX.IntrinsicElements['code']) => {
+const Code = ({
+  color,
+  ...props
+}: JSX.IntrinsicElements['code'] & { color?: keyof typeof allColors }) => {
   const { colors } = useTheme()
   return (
     <code
@@ -11,7 +15,7 @@ const Code = (props: JSX.IntrinsicElements['code']) => {
         css`
           font-size: 0.9em;
           word-break: break-word;
-          background: ${colors('lightPink2')};
+          background: ${color ? colors(color) : colors('lightPink2')};
         `
       ]}
     />

diff --git a/src/components/ContentTags/index.tsx b/src/components/ContentTags/index.tsx
@@ -3,4 +3,5 @@ export { default as H3 } from 'src/components/ContentTags/H3'
 export { default as Code } from 'src/components/ContentTags/Code'
 export { default as Highlight } from 'src/components/ContentTags/Highlight'
 export { default as Hr } from 'src/components/ContentTags/Hr'
+export { default as A } from 'src/components/ContentTags/A'
 export { Ul, Ol, UlLi, OlLi } from 'src/components/ContentTags/List'
diff --git a/src/components/Emoji/SmilingCat.tsx b/src/components/Emoji/SmilingCat.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+const SvgSparkles = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <path
+      fill="#FFCC4D"
+      d="M35.734 19.929C35.375 16.66 35 15 34 13c0 0 3-9 1-12.7-.674-1.246-7.404 1.688-10 3.7 0 0-4-.998-7-.998S11 4 11 4C8.404 1.988 1.674-.946 1 .3-1 4 2 13 2 13 1 15 .625 16.66.266 19.929-.129 23.513.657 26.37 1 27c.39.716 2.367 3.025 5 5 4 3 10 4 12 4s8-1 12-4c2.633-1.975 4.61-4.284 5-5 .343-.63 1.129-3.487.734-7.071z"
+    />
+    <path
+      fill="#E75A70"
+      d="M18 19.5c3 0 3 .5 3 1.5s-1.5 3-3 3-3-2-3-3-.001-1.5 3-1.5z"
+    />
+    <path
+      fill="#F18F26"
+      d="M2 3c.447-1.342 5.64 1 6.64 2C8.64 5 4 8 3 11c0 0-2-5-1-8zm32 0c-.447-1.342-5.64 1-6.64 2 0 0 4.64 3 5.64 6 0 0 2-5 1-8z"
+    />
+    <path
+      fill="#FFCC4D"
+      d="M4.934 5.603C4.934 4.189 11 7 10 8s-2 1.603-3 2.603-2.066-4-2.066-5zm26.132 0C31.066 4.189 25 7 26 8s2 1.603 3 2.603 2.066-4 2.066-5z"
+    />
+    <path
+      fill="#FEE7B8"
+      d="M.701 25c-.148 0-.294-.065-.393-.19-.171-.217-.134-.531.083-.702.162-.127 4.02-3.12 10.648-2.605.275.02.481.261.46.536-.021.275-.257.501-.537.46-6.233-.474-9.915 2.366-9.951 2.395-.093.071-.202.106-.31.106zm8.868-4.663c-.049 0-.1-.007-.149-.022-4.79-1.497-8.737-.347-8.777-.336-.265.081-.543-.07-.623-.335-.079-.265.071-.543.335-.622.173-.052 4.286-1.247 9.362.338.264.083.411.363.328.627-.066.213-.263.35-.476.35zM35.299 25c.148 0 .294-.065.393-.19.171-.217.134-.531-.083-.702-.162-.127-4.02-3.12-10.648-2.605-.275.02-.481.261-.46.536.021.275.257.501.537.46 6.233-.474 9.915 2.366 9.951 2.395.093.071.202.106.31.106zm-8.868-4.663c.049 0 .1-.007.149-.022 4.79-1.497 8.737-.347 8.777-.336.265.081.543-.07.623-.335.079-.265-.071-.543-.335-.622-.173-.052-4.286-1.247-9.362.338-.264.083-.411.363-.328.627.065.213.263.35.476.35z"
+    />
+    <path
+      fill="#292F33"
+      d="M28.023 24.191C27.046 24.383 23 26 18 26s-9.046-1.617-10.023-1.809C7 24 6.885 25.264 7.442 27.132 8 29 11 33 18 33s10-4 10.558-5.868c.557-1.868.442-3.132-.535-2.941z"
+    />
+    <path
+      fill="#F5F8FA"
+      d="M8 25s5 2 10 2 10-2 10-2-.5 3-1.5 3-1.5-1-1.5-1-4 2-7 2-7-2-7-2-.5 1-1.5 1S8 25 8 25z"
+    />
+    <g fill="#292F33">
+      <ellipse cx={12} cy={14.5} rx={2} ry={3.5} />
+      <ellipse cx={24} cy={14.5} rx={2} ry={3.5} />
+    </g>
+  </svg>
+)
+
+export default SvgSparkles
diff --git a/src/components/Emoji/Sparkles.tsx b/src/components/Emoji/Sparkles.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const SvgSmilingCat = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <path
+      fill="#FFAC33"
+      d="M34.347 16.893l-8.899-3.294-3.323-10.891c-.128-.42-.517-.708-.956-.708-.439 0-.828.288-.956.708l-3.322 10.891-8.9 3.294c-.393.146-.653.519-.653.938 0 .418.26.793.653.938l8.895 3.293 3.324 11.223c.126.424.516.715.959.715.442 0 .833-.291.959-.716l3.324-11.223 8.896-3.293c.391-.144.652-.518.652-.937 0-.418-.261-.792-.653-.938z"
+    />
+    <path
+      fill="#FFCC4D"
+      d="M14.347 27.894l-2.314-.856-.9-3.3c-.118-.436-.513-.738-.964-.738-.451 0-.846.302-.965.737l-.9 3.3-2.313.856c-.393.145-.653.52-.653.938 0 .418.26.793.653.938l2.301.853.907 3.622c.112.444.511.756.97.756.459 0 .858-.312.97-.757l.907-3.622 2.301-.853c.393-.144.653-.519.653-.937 0-.418-.26-.793-.653-.937zM10.009 6.231l-2.364-.875-.876-2.365c-.145-.393-.519-.653-.938-.653-.418 0-.792.26-.938.653l-.875 2.365-2.365.875c-.393.146-.653.52-.653.938 0 .418.26.793.653.938l2.365.875.875 2.365c.146.393.52.653.938.653.418 0 .792-.26.938-.653l.875-2.365 2.365-.875c.393-.146.653-.52.653-.938 0-.418-.26-.792-.653-.938z"
+    />
+  </svg>
+)
+
+export default SvgSmilingCat
diff --git a/src/components/Emoji/index.tsx b/src/components/Emoji/index.tsx
@@ -6,14 +6,18 @@ import Question from 'src/components/Emoji/Question'
 import Run from 'src/components/Emoji/Run'
 import ChickEgg from 'src/components/Emoji/ChickEgg'
 import Twitter from 'src/components/Emoji/Twitter'
+import Sparkles from 'src/components/Emoji/Sparkles'
+import SmilingCat from 'src/components/Emoji/SmilingCat'
 
 export const emojiToComponent = {
   bird: Bird,
   cryingCat: CryingCat,
   question: Question,
   run: Run,
   chickEgg: ChickEgg,
-  twitter: Twitter
+  twitter: Twitter,
+  sparkles: Sparkles,
+  smilingCat: SmilingCat
 }
 
 const Emoji = ({

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import Container from 'src/components/Container'
+import useTheme from 'src/hooks/useTheme'
+import { A } from 'src/components/ContentTags'
+
+const Footer = () => {
+  const { fontSizes, ns, spaces, colors } = useTheme()
+
+  return (
+    <Container
+      cssOverrides={css`
+        font-size: ${fontSizes(0.85)};
+        text-align: center;
+        margin-bottom: ${spaces(2)};
+        color: ${colors('brown')};
+
+        ${ns} {
+          margin-bottom: ${spaces(3)};
+        }
+      `}
+    >
+      The source code for this site is{' '}
+      <A href="https://github.com/chibicode/TypeScript-for-Beginner-Programmers">
+        available on <strong>GitHub</strong>
+      </A>
+      .
+    </Container>
+  )
+}
+
+export default Footer