first draft of the page

2024-01-31 13:44:13 -05:00 · 2024-01-31 13:44:13 -05:00 · 47f9d02ef4
commit 47f9d02ef4
parent 997cfc08ec
5 changed files with 143 additions and 4 deletions
--- a/.gitignore
+++ b/.gitignore
@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+pnpm-lock.yaml
--- a/package.json
+++ b/package.json
@ -35,6 +35,7 @@
 	"dependencies": {
 		"@vincjo/datatables": "^1.14.4",
 		"beercss": "^3.4.13",
-		"better-sqlite3": "^9.3.0"
+		"better-sqlite3": "^9.3.0",
+		"cheerio": "1.0.0-rc.12"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -14,6 +14,9 @@ dependencies:
  better-sqlite3:
    specifier: ^9.3.0
    version: 9.3.0
+  cheerio:
+    specifier: 1.0.0-rc.12
+    version: 1.0.0-rc.12

 devDependencies:
  '@playwright/test':
@ -883,6 +886,10 @@ packages:
      readable-stream: 3.6.2
    dev: false

+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: false
+
  /brace-expansion@1.1.11:
    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
    dependencies:
@ -945,6 +952,30 @@ packages:
      get-func-name: 2.0.2
    dev: true

+  /cheerio-select@2.1.0:
+    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
+    dependencies:
+      boolbase: 1.0.0
+      css-select: 5.1.0
+      css-what: 6.1.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+    dev: false
+
+  /cheerio@1.0.0-rc.12:
+    resolution: {integrity: sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==}
+    engines: {node: '>= 6'}
+    dependencies:
+      cheerio-select: 2.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      htmlparser2: 8.0.2
+      parse5: 7.1.2
+      parse5-htmlparser2-tree-adapter: 7.0.0
+    dev: false
+
  /chokidar@3.5.3:
    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
    engines: {node: '>= 8.10.0'}
@ -1002,6 +1033,16 @@ packages:
      which: 2.0.2
    dev: true

+  /css-select@5.1.0:
+    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.1.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      nth-check: 2.1.1
+    dev: false
+
  /css-tree@2.3.1:
    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@ -1009,6 +1050,11 @@ packages:
      mdn-data: 2.0.30
      source-map-js: 1.0.2

+  /css-what@6.1.0:
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
+    engines: {node: '>= 6'}
+    dev: false
+
  /cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
@ -1089,6 +1135,33 @@ packages:
      esutils: 2.0.3
    dev: true

+  /dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+    dev: false
+
+  /domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+    dev: false
+
+  /domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+    dependencies:
+      domelementtype: 2.3.0
+    dev: false
+
+  /domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+    dev: false
+
  /end-of-stream@1.4.4:
    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
    dependencies:
@ -1463,6 +1536,15 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+    dev: false
+
  /human-signals@5.0.0:
    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
    engines: {node: '>=16.17.0'}
@ -1764,6 +1846,12 @@ packages:
      path-key: 4.0.0
    dev: true

+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: false
+
  /once@1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
@ -1816,6 +1904,19 @@ packages:
      callsites: 3.1.0
    dev: true

+  /parse5-htmlparser2-tree-adapter@7.0.0:
+    resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==}
+    dependencies:
+      domhandler: 5.0.3
+      parse5: 7.1.2
+    dev: false
+
+  /parse5@7.1.2:
+    resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==}
+    dependencies:
+      entities: 4.5.0
+    dev: false
+
  /path-exists@4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,9 @@
+<script> 
+import "beercss/dist/cdn/beer.min.css";
+//import beercss from "./dist/cdn/beer.min.js";
+</script>
+
+<main class="responsive">
+
+<slot/>
+</main>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,3 +1,4 @@
+<article>
 <h1>Ottawa board games for sale</h1>

 <p>This is a list of games for sale or trade of people living in the Ottawa
@ -23,13 +24,21 @@
    <tbody>
        {#each $rows as row}
            <tr>
-                <td><a href={`https://boardgamegeek.com/user/${row.username}`}>{row.username}</a></td>
+                <td><a target="_top" href={`https://boardgamegeek.com/user/${row.username}`}>{row.username}</a></td>
                <td><a
+                    target="_top"
                    href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>bgg
                    mail</a></td>
-                <td> {row.name}</td>
+                <td> <a
+                    target="_top"
+                    href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
+                        {row.name}</a>
+                </td>
                <td>
-                    <img src={row.thumbnail} height="60"/>
+                 <a
+                    target="_top"
+                    href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
+                     <img src={row.thumbnail} height="60"/></a>
                </td>
                <td>{row.notes}</td>
                <td>{row.price??''}</td>
@ -37,6 +46,7 @@
        {/each}
    </tbody>
 </table>
+</article>


 <script> 
@ -50,3 +60,20 @@
    const handler = new DataHandler(data.games, { rowsPerPage: 50 })
    const rows = handler.getRows()
 </script>
+
+<style> 
+    :global(:root) {
+        --font-size-10: 1rem;
+        --font-size-11: 1.5rem;
+        --font-size-12: 1.75rem;
+        --font-size-13: 2rem;
+        --font-size-14: 2.25rem;
+    }
+    p {
+        font-size: var(--font-size-10);
+    }
+    a {
+        color: var(--primary);
+        text-decoration: underline;
+    }
+</style>