show source code of each demo pages

as suggested in beenotung/ts-liveview#6

public/prism/.gitignore

@@ -0,0 +1,2 @@
+prism.css
+prism.js

public/prism/README.md

@@ -0,0 +1,17 @@
+The 3rd party library code `prism.css` and `prism.js` are ignored from git but required for the `<SourceCode>` component.
+
+## Download Link
+
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+jsx+tsx+typescript
+
+## Configuration
+
+### Theme
+
+- Tomorrow Night by Rosey (1.28KB)
+
+### Languages
+
+- React TSX (0.3KB)
+- CSS (1.71KB)
+- Bash + Shell by zeitgeist87 (8.7KB)

server/app/app.tsx

@@ -42,6 +42,12 @@ h1.title {
 h1.title a {
   font-size: 1rem;
 }
+pre[class*="language-"],
+code[class*="language-"] {
+  white-space: pre-wrap !important;
+  display: inline-block !important;
+  max-width: 90vw;
+}
 `)
 
 export function App(main: Node): Element {

server/app/components/source-code.tsx

@@ -0,0 +1,24 @@
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import JSX from '../jsx/jsx.js'
+
+function SourceCode(attrs: { page: string }) {
+  let file = join('server', 'app', 'pages', attrs.page)
+  let source = readFileSync(file).toString()
+  return (
+    <details class="source-code">
+      <summary>
+        <b>
+          Source Code of <code>{attrs.page}</code>
+        </b>
+      </summary>
+      <link rel="stylesheet" href="/prism/prism.css" />
+      <script src="/prism/prism.js"></script>
+      <pre>
+        <code class="language-tsx">{source}</code>
+      </pre>
+    </details>
+  )
+}
+
+export default SourceCode

server/app/pages/about.tsx

@@ -5,11 +5,17 @@ import { marked } from 'marked'
 import { Raw } from '../components/raw.js'
 import { prerender } from '../jsx/html.js'
 import { Menu } from '../components/menu.js'
+import SourceCode from '../components/source-code.js'
 
 let text = readFileSync('README.md').toString()
 
 let html = Raw(marked(text))
 let markdown = <pre style="white-space: break-spaces">{text}</pre>
+markdown = (
+  <pre>
+    <code class="language-markdown">{text}</code>
+  </pre>
+)
 
 // The JSX expression don't need to be re-built on every render
 export let About = (
@@ -29,6 +35,7 @@ export let About = (
       efficient than <abbr title="Server-Side Rendering">SSR</abbr> for static
       content (that doesn't change regarding on the request session).
     </p>
+    <SourceCode page="about.tsx" />
     <p>This page also demonstrate nested routes.</p>
     <fieldset>
       <legend>

server/app/pages/auto-complete-demo.tsx

@@ -6,6 +6,7 @@ import { join } from 'path'
 import { Update } from '../components/update.js'
 import 'fastest-levenshtein'
 import { distance } from 'fastest-levenshtein'
+import SourceCode from '../components/source-code.js'
 
 const wordSet = new Set<string>()
 const dictDir = '/usr/share/dict'
@@ -105,6 +106,7 @@ export function AutoCompleteDemo(attrs: attrs) {
         />
         <datalist id="package-list"></datalist>
       </fieldset>
+      <SourceCode page="auto-complete-demo.tsx" />
     </div>
   )
 }

server/app/pages/calculator.tsx

@@ -1,5 +1,6 @@
 import { Style } from '../components/style.js'
 import JSX from '../jsx/jsx.js'
+import SourceCode from '../components/source-code.js'
 
 let update = `c.textContent = a.valueAsNumber + b.valueAsNumber`
 
@@ -24,6 +25,7 @@ function Calculator() {
       <span class="answer" id="c">
         2
       </span>
+      <SourceCode page="calculator.tsx" />
     </div>
   )
 }

server/app/pages/chatroom.tsx

@@ -17,6 +17,7 @@ import DateTimeText, {
 } from '../components/datetime.js'
 import { nodeToVNode } from '../jsx/vnode.js'
 import { Request, Response, NextFunction } from 'express'
+import SourceCode from '../components/source-code.js'
 
 let log = debugLog('chatroom.tsx')
 log.enabled = true
@@ -379,6 +380,7 @@ function Chatroom(attrs: attrs) {
         </p>
         <p>Number of messages: {room.msg_list.length}</p>
         <ol class="msg-list">{[room.msg_list]}</ol>
+        <SourceCode page="chatroom.tsx" />
       </div>
     </>
   )

server/app/pages/demo-cookie-session.tsx

@@ -7,6 +7,7 @@ import { getContextCookie } from '../cookie.js'
 import { getOrSetTokenSync } from '../auth/token.js'
 import { EarlyTerminate } from '../helpers.js'
 import type { Request, Response } from 'express'
+import SourceCode from '../components/source-code.js'
 
 const log = debugLog('demo-cookie-session.ts')
 log.enabled = true
@@ -90,6 +91,7 @@ function DemoCookieSession(attrs: attrs) {
           </code>
         </pre>
       </fieldset>
+      <SourceCode page="demo-cookie-session.tsx" />
     </div>
   )
 }

server/app/pages/demo-form.tsx

@@ -7,6 +7,7 @@ import { attrs } from '../jsx/types.js'
 import sanitizeHTML from 'sanitize-html'
 import { Script } from '../components/script.js'
 import debug from 'debug'
+import SourceCode from '../components/source-code.js'
 
 const log = debug('demo-form.tsx')
 log.enabled = true
@@ -224,6 +225,7 @@ function DemoForm() {
       >
         {code}
       </textarea>
+      <SourceCode page="demo-form.tsx" />
     </>
   )
 }

server/app/pages/editor.tsx

@@ -7,6 +7,7 @@ import { ServerMessage } from '../../../client'
 import { onWsSessionClose } from '../session.js'
 import { Script } from '../components/script.js'
 import Style from '../components/style.js'
+import SourceCode from '../components/source-code.js'
 
 type State = {
   width: number
@@ -164,6 +165,7 @@ export function Editor(attrs: attrs) {
         style={`background-color: ${state.color}`}
         src="https://avatars0.githubusercontent.com/u/6510388"
       />
+      <SourceCode page="editor.tsx" />
       <hr />
       <p>
         Reference:{' '}

server/app/pages/home.tsx

@@ -2,6 +2,7 @@ import { Link } from '../components/router.js'
 import JSX from '../jsx/jsx.js'
 import { prerender } from '../jsx/html.js'
 import Comment from '../components/comment.js'
+import SourceCode from '../components/source-code.js'
 
 // Calling <Component/> will transform the JSX into AST for each rendering.
 // You can reuse a pre-compute AST like `let component = <Component/>`.
@@ -81,6 +82,7 @@ let content = (
       Try some reactive demo: <Link href="/thermostat">Thermostat</Link>,{' '}
       <Link href="/form">Form Demo</Link>
     </p>
+    <SourceCode page="home.tsx" />
   </div>
 )
 

server/app/pages/not-match.tsx

@@ -1,6 +1,7 @@
 import JSX from '../jsx/jsx.js'
 import { getContextUrl } from '../context.js'
 import { attrs } from '../jsx/types.js'
+import SourceCode from '../components/source-code.js'
 
 function Url(attrs: attrs) {
   let url = getContextUrl(attrs)
@@ -16,6 +17,7 @@ let NotMatch = (
         <Url />
       </code>
     </p>
+    <SourceCode page="not-match.tsx" />
   </div>
 )
 

server/app/pages/thermostat.tsx

@@ -4,6 +4,7 @@ import JSX from '../jsx/jsx.js'
 import { sessions } from '../session.js'
 import { Update, UpdateIn } from '../components/update.js'
 import type { ServerMessage } from '../../../client'
+import SourceCode from '../components/source-code.js'
 
 const UpdateInterval = 1000
 
@@ -239,6 +240,7 @@ function Thermostat() {
           </span>
         </div>
       </div>
+      <SourceCode page="thermostat.tsx" />
       <p>
         <a href="https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript">
           Layout reference

server/app/pages/user-agents.tsx

@@ -1,4 +1,5 @@
 import { getUserAgents } from '../../../db/store.js'
+import SourceCode from '../components/source-code.js'
 import Style from '../components/style.js'
 import JSX from '../jsx/jsx.js'
 import type { Node } from '../jsx/types.js'
@@ -202,6 +203,7 @@ let UserAgents = (
       Below list of user agents are collected from the visitor's HTTP header.
     </p>
     <Tables />
+    <SourceCode page="user-agents.tsx" />
   </div>
 )