doc

readme.md

@@ -22,23 +22,19 @@ this frontend app:
  1. fetches data from a server
  1. if ok, render items in a list. if error, render error span at the bottom of the page.
 
-<table>
-<thead>
-  <td><b>React</b></td>
-  <td><b>Halogen</b></td>
-<thead>
-<tbody>
-<tr>
-<td>
+<details>
+<summary>React (click to expand)</summary>
 
-```javascript
-export const App = () => {
-  const [items, setItems] = React.useState(undefined)
-  const [error, setError] = React.useState(undefined)
+```typescript
+type Item = {id: string, title: string, description: string}
+
+export const App: () => React.Node = () => {
+  const [items, setItems] = React.useState<Array<Item> | undefined>(undefined)
+  const [error, setError] = React.useState<Error | undefined>(undefined)
 
   React.useEffect(() => {
     fetch('/api/item')
-      .then(rep => rep.json())
+      .then(rep => rep.json<Array<Item>>())
       .then(items => setItems(items))
       .catch(e => setError(e))
   }, [])
@@ -60,8 +56,10 @@ export const App = () => {
 }
 ```
 
-</td>
-<td>
+</details>
+
+<details>
+<summary>Purescript Halogen (click to expand)</summary>
 
 ```haskell
 type Item = { id :: String
@@ -106,7 +104,4 @@ app = mkComponent
   }
 ```
 
-</td>
-</tr>
-</tbody>
-</table>
+</details>