first draft of the page

This commit is contained in:
Yanick Champoux 2024-01-31 13:44:13 -05:00
parent 997cfc08ec
commit 47f9d02ef4
5 changed files with 143 additions and 4 deletions

1
.gitignore vendored
View File

@ -8,3 +8,4 @@ node_modules
!.env.example !.env.example
vite.config.js.timestamp-* vite.config.js.timestamp-*
vite.config.ts.timestamp-* vite.config.ts.timestamp-*
pnpm-lock.yaml

View File

@ -35,6 +35,7 @@
"dependencies": { "dependencies": {
"@vincjo/datatables": "^1.14.4", "@vincjo/datatables": "^1.14.4",
"beercss": "^3.4.13", "beercss": "^3.4.13",
"better-sqlite3": "^9.3.0" "better-sqlite3": "^9.3.0",
"cheerio": "1.0.0-rc.12"
} }
} }

View File

@ -14,6 +14,9 @@ dependencies:
better-sqlite3: better-sqlite3:
specifier: ^9.3.0 specifier: ^9.3.0
version: 9.3.0 version: 9.3.0
cheerio:
specifier: 1.0.0-rc.12
version: 1.0.0-rc.12
devDependencies: devDependencies:
'@playwright/test': '@playwright/test':
@ -883,6 +886,10 @@ packages:
readable-stream: 3.6.2 readable-stream: 3.6.2
dev: false dev: false
/boolbase@1.0.0:
resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
dev: false
/brace-expansion@1.1.11: /brace-expansion@1.1.11:
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
dependencies: dependencies:
@ -945,6 +952,30 @@ packages:
get-func-name: 2.0.2 get-func-name: 2.0.2
dev: true 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: /chokidar@3.5.3:
resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
engines: {node: '>= 8.10.0'} engines: {node: '>= 8.10.0'}
@ -1002,6 +1033,16 @@ packages:
which: 2.0.2 which: 2.0.2
dev: true 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: /css-tree@2.3.1:
resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@ -1009,6 +1050,11 @@ packages:
mdn-data: 2.0.30 mdn-data: 2.0.30
source-map-js: 1.0.2 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: /cssesc@3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'} engines: {node: '>=4'}
@ -1089,6 +1135,33 @@ packages:
esutils: 2.0.3 esutils: 2.0.3
dev: true 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: /end-of-stream@1.4.4:
resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==} resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
dependencies: dependencies:
@ -1463,6 +1536,15 @@ packages:
engines: {node: '>=8'} engines: {node: '>=8'}
dev: true 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: /human-signals@5.0.0:
resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==} resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
engines: {node: '>=16.17.0'} engines: {node: '>=16.17.0'}
@ -1764,6 +1846,12 @@ packages:
path-key: 4.0.0 path-key: 4.0.0
dev: true 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: /once@1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
dependencies: dependencies:
@ -1816,6 +1904,19 @@ packages:
callsites: 3.1.0 callsites: 3.1.0
dev: true 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: /path-exists@4.0.0:
resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
engines: {node: '>=8'} engines: {node: '>=8'}

View File

@ -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>

View File

@ -1,3 +1,4 @@
<article>
<h1>Ottawa board games for sale</h1> <h1>Ottawa board games for sale</h1>
<p>This is a list of games for sale or trade of people living in the Ottawa <p>This is a list of games for sale or trade of people living in the Ottawa
@ -23,13 +24,21 @@
<tbody> <tbody>
{#each $rows as row} {#each $rows as row}
<tr> <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 <td><a
target="_top"
href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>bgg href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>bgg
mail</a></td> mail</a></td>
<td> {row.name}</td> <td> <a
target="_top"
href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
{row.name}</a>
</td>
<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>
<td>{row.notes}</td> <td>{row.notes}</td>
<td>{row.price??''}</td> <td>{row.price??''}</td>
@ -37,6 +46,7 @@
{/each} {/each}
</tbody> </tbody>
</table> </table>
</article>
<script> <script>
@ -50,3 +60,20 @@
const handler = new DataHandler(data.games, { rowsPerPage: 50 }) const handler = new DataHandler(data.games, { rowsPerPage: 50 })
const rows = handler.getRows() const rows = handler.getRows()
</script> </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>