chibicode · chibicode · Nov 19, 2019 · Nov 19, 2019 · Nov 19, 2019 · Nov 19, 2019
diff --git a/.prettierrc b/.prettierrc
@@ -5,7 +5,7 @@
     {
       "files": "snippets/snippets/**/*.ts",
       "options": {
-        "printWidth": 45
+        "printWidth": 49
       }
     }
   ]

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# [TypeScript for Beginner Programmers](https://ts.chibicode.com/)
+# TypeScript for Beginner Programmers
 
 ## License & Credits
 

diff --git a/snippets/snippets/generics/cupt.ts b/snippets/snippets/generics/cupt.ts
@@ -9,8 +9,5 @@ function createState() {
     state = x
   }
 
-  return {
-    getState,
-    setState
-  }
+  return { getState, setState }
 }
diff --git a/snippets/snippets/generics/gkgi.ts b/snippets/snippets/generics/gkgi.ts
@@ -0,0 +1,15 @@
+function createState() {
+  // Change to string
+  let state: string
+
+  function getState() {
+    return state
+  }
+
+  // Accepts a string
+  function setState(x: string) {
+    state = x
+  }
+
+  return { getState, setState }
+}
diff --git a/snippets/snippets/generics/nnyl.ts b/snippets/snippets/generics/nnyl.ts
@@ -0,0 +1,14 @@
+function createState() {
+  let state: number
+
+  function getState() {
+    return state
+  }
+
+  // setState() expects a number
+  function setState(x: number) {
+    state = x
+  }
+
+  return { getState, setState }
+}
diff --git a/snippets/snippets/generics/osaa.ts b/snippets/snippets/generics/osaa.ts
@@ -0,0 +1,20 @@
+function createState() {
+  // Change to string
+  let state: string
+
+  function getState() {
+    return state
+  }
+
+  // Accepts a string
+  function setState(x: string) {
+    state = x
+  }
+
+  return { getState, setState }
+}
+
+const { getState, setState } = createState()
+
+setState('foo')
+console.log(getState())
diff --git a/snippets/snippets/generics/stkh.ts b/snippets/snippets/generics/stkh.ts
@@ -0,0 +1,5 @@
+const { getState, setState } = createState()
+
+// What happens if we use a string instead?
+setState('foo')
+console.log(getState())
diff --git a/snippets/snippets/generics/udpv.ts b/snippets/snippets/generics/udpv.ts
@@ -9,10 +9,7 @@ function createState() {
     state = x
   }
 
-  return {
-    getState,
-    setState
-  }
+  return { getState, setState }
 }
 
 const { getState, setState } = createState()

diff --git a/snippets/snippets/generics/xeax.ts b/snippets/snippets/generics/xeax.ts
@@ -0,0 +1,4 @@
+const { getState, setState } = createState()
+
+setState('foo')
+console.log(getState())
diff --git a/snippets/snippets/generics/zhql.ts b/snippets/snippets/generics/zhql.ts
@@ -0,0 +1,18 @@
+function createState() {
+  let state: number
+
+  function getState() {
+    return state
+  }
+
+  function setState(x: number) {
+    state = x
+  }
+
+  return { getState, setState }
+}
+
+const { getState, setState } = createState()
+
+setState('foo')
+console.log(getState())
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 import useTheme from 'src/hooks/useTheme'
 import Caption from 'src/components/Caption'
 import ButtonWithTouchActiveStates from 'src/components/ButtonWithTouchActiveStates'
-import Emoji from 'src/components/Emoji'
+import RunButtonText from 'src/components/RunButtonText'
 import PrismHighlight, { defaultProps } from 'prism-react-renderer'
 import theme from 'src/lib/prismTheme'
 
@@ -15,7 +15,10 @@ const CodeBlock = ({
   pointToRunButton,
   defaultResultVisible,
   caption,
-  noHighlight
+  noHighlight,
+  compile,
+  shouldHighlightResult,
+  resultError
 }: {
   snippet: string
   shouldHighlight?: (lineNumber: number, tokenNumber: number) => boolean
@@ -24,6 +27,9 @@ const CodeBlock = ({
   defaultResultVisible?: boolean
   caption?: React.ReactNode
   noHighlight?: boolean
+  compile?: boolean
+  shouldHighlightResult?: (lineNumber: number, tokenNumber: number) => boolean
+  resultError?: boolean
 }) => {
   const [resultVisible, setResultVisible] = useState(defaultResultVisible)
   const { radii, colors, ns, maxWidths, spaces, fontSizes } = useTheme()
@@ -55,18 +61,20 @@ const CodeBlock = ({
           <pre
             css={[
               css`
-                padding: ${spaces(0.75)} ${spaces(0.75)};
+                padding: ${spaces(0.75)} ${spaces(0.5)};
                 line-height: 1.45;
 
                 border: 2px solid ${colors('lightBrown')};
                 background-color: ${colors('lightPink1')};
                 margin-top: ${caption ? 0 : spaces(1.75)};
                 margin-bottom: ${result ? 0 : spaces(1.75)};
                 font-size: ${fontSizes(0.8)};
+                margin-left: ${spaces('-0.5')};
+                margin-right: ${spaces('-0.5')};
 
                 ${ns} {
                   font-size: ${fontSizes(0.85)};
-                  padding: ${spaces(1)} ${spaces(1.25)};
+                  padding: ${spaces(1)} ${spaces(1)};
                   margin-left: 0;
                   margin-right: 0;
                 }
@@ -111,11 +119,30 @@ const CodeBlock = ({
                             css`
                               font-style: normal !important;
                             `,
-                            !!shouldHighlight &&
-                              shouldHighlight(i, key) &&
+                            ((!!shouldHighlight &&
+                              !resultVisible &&
+                              shouldHighlight(i, key)) ||
+                              (!!shouldHighlightResult &&
+                                resultVisible &&
+                                shouldHighlightResult(i, key))) &&
                               css`
-                                background: ${colors('white')};
-                                border-bottom: 2px solid ${colors('red')};
+                                background: ${shouldHighlightResult &&
+                                resultVisible &&
+                                resultError
+                                  ? colors('white')
+                                  : colors('yellowHighlight')};
+                                border-bottom: ${shouldHighlightResult &&
+                                resultVisible &&
+                                resultError
+                                  ? 'none'
+                                  : `3px solid ${colors('darkOrange')}`};
+                                text-decoration: ${shouldHighlightResult &&
+                                resultVisible &&
+                                resultError
+                                  ? 'underline'
+                                  : 'none'};
+                                text-decoration-style: wavy;
+                                text-decoration-color: ${colors('red')};
                               `
                           ]}
                         />
@@ -134,14 +161,20 @@ const CodeBlock = ({
             css={css`
               max-width: ${maxWidths('sm')};
               margin-bottom: ${spaces(1.75)};
-              margin-left: ${spaces(0)};
-              margin-right: ${spaces(0)};
+              margin-left: ${spaces('-0.5')};
+              margin-right: ${spaces('-0.5')};
+
+              ${ns} {
+                margin-left: ${spaces(0)};
+                margin-right: ${spaces(0)};
+              }
             `}
           >
             {resultVisible ? (
               <div
                 css={[
                   css`
+                    line-height: 1.45;
                     border-top-left-radius: 0;
                     border-top-right-radius: 0;
                     border-bottom-left-radius: ${radii(0.5)};
@@ -150,17 +183,26 @@ const CodeBlock = ({
                     border-left: 2px solid ${colors('lightBrown')};
                     border-bottom: 2px solid ${colors('lightBrown')};
                     border-right: 2px solid ${colors('lightBrown')};
-                    padding: ${spaces(0.5)} ${spaces(0.75)};
+                    padding: ${spaces(0.5)} ${spaces(0.5)};
                     font-size: ${fontSizes(0.8)};
 
                     ${ns} {
-                      padding: ${spaces(0.75)} ${spaces(1.25)};
+                      padding: ${spaces(0.75)} ${spaces(1)};
                       font-size: ${fontSizes(0.85)};
                     }
                   `
                 ]}
               >
-                <code>{result}</code>
+                <code
+                  css={
+                    resultError &&
+                    css`
+                      color: ${colors('red')};
+                    `
+                  }
+                >
+                  {result}
+                </code>
               </div>
             ) : (
               <div
@@ -178,7 +220,6 @@ const CodeBlock = ({
                       line-height: 1.1rem;
                       border: none;
                       margin-bottom: 0;
-                      font-weight: bold;
                       font-size: ${fontSizes(0.85)};
                       background: ${colors('white')};
                       border: 2px solid ${colors('lightBrown')};
@@ -204,7 +245,7 @@ const CodeBlock = ({
                     `
                   ]}
                 >
-                  Run <Emoji type="run" />
+                  <RunButtonText compile={compile} />
                 </ButtonWithTouchActiveStates>
                 {pointToRunButton && (
                   <>

diff --git a/src/components/RunButtonText.tsx b/src/components/RunButtonText.tsx
@@ -2,13 +2,13 @@
 import { css, jsx } from '@emotion/core'
 import Emoji from 'src/components/Emoji'
 
-const RunButtonText = () => (
+const RunButtonText = ({ compile }: { compile?: boolean }) => (
   <span
     css={css`
       font-weight: bold;
     `}
   >
-    Run <Emoji type="run" />
+    {compile ? 'Compile' : 'Run'} <Emoji type="run" />
   </span>
 )