Generics article 6

snippets/snippets/generics/bqvz.ts

@@ -0,0 +1,7 @@
+// Declare a generic function
+function genericFunc<T>() {
+  // You can use T here
+}
+
+// Call it: T will be number
+genericFunc<number>()

snippets/snippets/generics/gzwe.ts

@@ -0,0 +1,5 @@
+// Don’t need to use <number>
+const numState = makeState()
+
+numState.setState(1)
+console.log(numState.getState())

snippets/snippets/generics/kbld.ts

@@ -0,0 +1,7 @@
+// Limits the type of T
+function genericFunc<T extends number>()
+
+// Success
+genericFunc<number>()
+// Error
+genericFunc<string>()

snippets/snippets/generics/nuzz.ts

@@ -0,0 +1,20 @@
+function makeState<
+  A extends number | string,
+  B extends number | string
+>() {
+  let state: [A, B]
+
+  function getState() {
+    return state
+  }
+
+  function setState(first: A, second: B) {
+    state = [first, second]
+  }
+
+  return { getState, setState }
+}
+
+const state = makeState<number, string>()
+state.setState(1, 'cat')
+console.log(state.getState())

snippets/snippets/generics/nyih.ts

@@ -0,0 +1,5 @@
+// Set the default type of T
+function genericFunc<T = number>()
+
+// T will be number inside the function
+genericFunc()

snippets/snippets/generics/pjcw.ts

@@ -0,0 +1,5 @@
+// Set default value of x
+function regularFunc(x = 2)
+
+// x will be 2 inside the function
+regularFunc()

snippets/snippets/generics/qini.ts

@@ -0,0 +1,7 @@
+// Specify x to be number
+function regularFunc(x: number)
+
+// Success
+regularFunc(1)
+// Error
+regularFunc('foo')

snippets/snippets/generics/thxf.ts

@@ -0,0 +1,4 @@
+// Set default type of S as number
+function makeState<
+  S extends number | string = number
+>()

snippets/snippets/generics/wpru.ts

@@ -0,0 +1,7 @@
+// Declare a regular function
+function regularFunc(x: any) {
+  // You can use x here
+}
+
+// Call it: x will be 1
+regularFunc(1)

snippets/snippets/generics/xfwf.ts

@@ -0,0 +1,6 @@
+// Can we make it so that, <number> is the
+// default type paramter of makeState()?
+
+// We want these two statements to be equivalent
+const numState1 = makeState()
+const numState2 = makeState<number>()

src/components/Card.tsx

@@ -7,7 +7,7 @@ import { H3 } from 'src/components/ContentTags'
 
 export interface CardProps {
   children: React.ReactNode
-  color?: 'default' | 'pink'
+  color?: 'default' | 'pink' | 'green'
   slideNumber?: number
   slideCount?: number
   isLast?: boolean
@@ -27,15 +27,8 @@ export const backgroundColor = (
 ): keyof typeof allColors =>
   ({
     default: 'lightYellow1' as const,
-    pink: 'lightPink2' as const
-  }[color])
-
-const slideLabelBgColor = (
-  color: NonNullable<CardProps['color']>
-): keyof typeof allColors =>
-  ({
-    default: 'brown' as const,
-    pink: 'brown' as const
+    pink: 'lightPink2' as const,
+    green: 'lightGreen' as const
   }[color])
 
 const Card = ({
@@ -71,7 +64,7 @@ const Card = ({
               font-size: ${fontSizes(0.75)};
               line-height: 1;
               color: ${colors('white')};
-              background: ${colors(slideLabelBgColor(color))};
+              background: ${colors('brown')};
               padding: ${spaces(0.25)} ${spaces(0.5)};
               border-radius: 9999px;
               user-select: none;
@@ -80,7 +73,7 @@ const Card = ({
             <>
               <span
                 css={css`
-                  color: ${colors('white75')};
+                  color: ${colors('white85')};
                 `}
               >
                 Slide{' '}
@@ -94,7 +87,7 @@ const Card = ({
               </span>{' '}
               <span
                 css={css`
-                  color: ${colors('white75')};
+                  color: ${colors('white85')};
                   font-weight: bold;
                 `}
               >

src/components/ContentTags/Highlight.tsx

@@ -1,15 +1,19 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import useTheme from 'src/hooks/useTheme'
+import { allColors } from 'src/lib/theme/colors'
 
-const Highlight = (props: JSX.IntrinsicElements['span']) => {
+const Highlight = ({
+  color,
+  ...props
+}: JSX.IntrinsicElements['span'] & { color?: keyof typeof allColors }) => {
   const { colors } = useTheme()
   return (
     <span
       {...props}
       css={[
         css`
-          background: ${colors('lightGreen')};
+          background: ${color ? colors(color) : colors('white85')};
         `
       ]}
     />

src/components/ContentTags/Hr.tsx

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import useTheme from 'src/hooks/useTheme'
+
+const Hr = (props: JSX.IntrinsicElements['hr']) => {
+  const { colors, spaces } = useTheme()
+  return (
+    <hr
+      {...props}
+      css={css`
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-bottom: 5px solid ${colors('white85')};
+        margin: ${spaces(2)} auto ${spaces(2)};
+        max-width: 8rem;
+      `}
+    />
+  )
+}
+
+export default Hr

src/components/ContentTags/index.tsx

@@ -2,4 +2,5 @@ export { default as P } from 'src/components/ContentTags/P'
 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 { Ul, Ol, UlLi, OlLi } from 'src/components/ContentTags/List'

src/components/Emoji/Twitter.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+const Twitter = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 36 36" {...props}>
+    <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+      <path
+        d="M11.5068,32.2226 C24.7144,32.2226 31.9384,21.2802 31.9384,11.791 C31.9384,11.4802 31.9384,11.1708 31.9174,10.8628 C33.3227639,9.8462752 34.5358977,8.58763115 35.5,7.1458 C34.1894307,7.72652248 32.799161,8.10736011 31.3756,8.2756 C32.8746416,7.37817488 33.9965729,5.96668078 34.5326,4.3038 C33.1230205,5.14023744 31.5809045,5.72971683 29.9728,6.0468 C27.7469159,3.67995199 24.2100071,3.10065762 21.345369,4.6337519 C18.4807309,6.16684618 17.000785,9.43105602 17.7354,12.596 C11.961654,12.3065494 6.58226609,9.57945258 2.936,5.0934 C1.03007186,8.37450262 2.00358304,12.5720033 5.1592,14.6792 C4.01643768,14.6453306 2.89859112,14.3370584 1.9,13.7804 C1.9,13.8098 1.9,13.8406 1.9,13.8714 C1.90093539,17.2896302 4.31045208,20.2337492 7.661,20.9106 C6.60381743,21.1989161 5.49461282,21.241062 4.4186,21.0338 C5.3593271,23.958992 8.05520439,25.9628974 11.1274,26.0206 C8.58462905,28.0190047 5.44348332,29.1038588 2.2094,29.1006 C1.638065,29.0995032 1.06728569,29.0649105 0.5,28.997 C3.78389033,31.1043872 7.60487876,32.2222037 11.5068,32.217"
+        fill="#1DA1F2"
+        fillRule="nonzero"
+      />
+    </g>
+  </svg>
+)
+
+export default Twitter

src/components/Emoji/index.tsx

@@ -5,13 +5,15 @@ import CryingCat from 'src/components/Emoji/CryingCat'
 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'
 
 export const emojiToComponent = {
   bird: Bird,
   cryingCat: CryingCat,
   question: Question,
   run: Run,
-  chickEgg: ChickEgg
+  chickEgg: ChickEgg,
+  twitter: Twitter
 }
 
 const Emoji = ({

src/components/PostPage.tsx

@@ -14,6 +14,7 @@ export interface EpisodeCardType {
   title?: React.ReactNode
   content?: React.ReactNode
   footer?: CardProps['footer']
+  color?: CardProps['color']
 }
 
 const PostPage = ({
@@ -96,8 +97,9 @@ const PostPage = ({
           }
         ]}
       ></BubbleQuotes>
-      {cards.map(({ title, content, footer }, index) => (
+      {cards.map(({ title, content, footer, color }, index) => (
         <Card
+          color={color}
           key={`${articleKey}-${index}`}
           title={title}
           slideCount={cards.length}

src/components/TwitterLink.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import Emoji from 'src/components/Emoji'
+
+const TwitterLink = ({
+  title,
+  url,
+  children,
+  ...props
+}: JSX.IntrinsicElements['a'] & {
+  title: string
+  url: string
+}) => {
+  const tweetUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(
+    url
+  )}&via=chibicode&text=${encodeURIComponent(title)}`
+  return (
+    <a {...props} href={tweetUrl}>
+      <Emoji type="twitter" /> {children}
+    </a>
+  )
+}
+
+export default TwitterLink