krzysiej/bookmeterplus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: krzysiej:master
Branches Tags
krzysiej:master krzysiej:feature/improvements
..
compare: krzysiej:feature/improvements
Branches Tags
krzysiej:master krzysiej:feature/improvements

3 Commits
master ... feature/im

Author SHA1 Message Date
Krzysztof Płaczek
244ec7fc42 Updated packages 2025-09-22 09:21:39 +02:00
Krzysztof Płaczek
3046780f1b Improvements and docker 2025-09-18 15:37:41 +02:00
Krzysztof Płaczek
9a66134469 Use tailwind 3. 2025-08-05 15:24:17 +02:00
13 changed files with 100 additions and 1129 deletions
Expand all files Collapse all files

11
Dockerfile Executable file → Normal file
View File

@@ -1,19 +1,20 @@
FROM node:22 FROM node:20
# Set working directory inside container # Set working directory inside container
WORKDIR /app WORKDIR /src
# Copy package files first (better layer caching) # Copy package files first (for better caching)
COPY package*.json ./ COPY package*.json ./
# Install dependencies # Install dependencies
RUN npm install RUN npm install
# Copy the rest of the project # Copy the rest of your project
COPY . . COPY . .
# Expose Vite dev server port # Expose Vite’s default dev port
EXPOSE 5173 EXPOSE 5173
# Default command # Default command
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"] CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

34
README.md Executable file → Normal file
View File

@@ -1,34 +0,0 @@
## BOOKMETER PLUS
For a start let get the docker container going
```bash
docker compose up -d --remove-orphans
```
### Vite
Then for development purposes execute:
```bash
bin/dev
```
This command will start server on port 5173. http://localhost:5173
### Tailwind
If we want to rebuild tailwind styles then lets start this command in another terminal window:
```bash
bin/tailwindbuild
```
To download bookmeter json files there is a PHP script
```bash
php download_posts.ph
```
To compile production version execute this command:
```bash
bin/build
```

6
docker-compose.yml Executable file → Normal file
View File

@@ -1,10 +1,10 @@
services: services:
node: node:
build: . build: .
working_dir: /app working_dir: /src
volumes: volumes:
- .:/app - .:/src
- /app/node_modules - /node_modules
ports: ports:
- "5173:5173" - "5173:5173"
command: npm run dev -- --host 0.0.0.0 command: npm run dev -- --host 0.0.0.0

12
download_posts.php Executable file → Normal file
View File

@@ -6,17 +6,7 @@ if (!file_exists('public/posts_2023.json')) {
if (!file_exists('public/posts_2024.json')) { if (!file_exists('public/posts_2024.json')) {
file_put_contents('public/posts_2024.json', download_posts('https://bookmeter.xyz/api/posts?edition=2024')); file_put_contents('public/posts_2024.json', download_posts('https://bookmeter.xyz/api/posts?edition=2024'));
} }
if (!file_exists('public/posts_2025.json')) { file_put_contents('public/posts_2025.json', download_posts('https://bookmeter.xyz/api/posts?edition=2025'));
file_put_contents('public/posts_2025.json', download_posts('https://bookmeter.xyz/api/posts?edition=2025'));
}
file_put_contents('public/posts_2026.json', download_posts('https://bookmeter.xyz/api/posts?edition=2026'));
if (is_dir('dist')) {
copy('public/posts_2026.json', 'dist/posts_2026.json');
copy('public/posts_2025.json', 'dist/posts_2025.json');
copy('public/posts_2024.json', 'dist/posts_2024.json');
copy('public/posts_2023.json', 'dist/posts_2023.json');
}
function download_posts(string $url): false|string function download_posts(string $url): false|string
{ {
$posts = file_get_contents($url); $posts = file_get_contents($url);

184
index.html Executable file → Normal file
View File

@@ -1,85 +1,59 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="pl" x-data="{ dark: false }" x-init="
dark = localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
$watch('dark', value => {
document.documentElement.classList.toggle('dark', value)
localStorage.theme = value ? 'dark' : 'light'
})
"
:class="{ 'dark': dark }">
<head> <head>
<script>
(() => {
const theme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (theme === 'dark' || (!theme && prefersDark)) {
document.documentElement.classList.add('dark');
}
})();
</script>
<style>
html {
background-color: #030712;
transition: background-color 0.7s ease;
}
html:not(.dark) {
background-color: #ffffff;
}
[x-cloak] {
display: none !important;
}
</style>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bookmeterplus Project</title> <title>bookmeterplus Project</title>
<style>
[x-cloak] {
display: none;
}
</style>
</head> </head>
<body class="dark:text-gray-300 dark:bg-gray-950"> <body class="dark:text-gray-300 dark:bg-gray-950">
<div x-data="bookmeterList"> <div x-data="bookmeterList">
<!-- <div class="p-10">--> <!-- <div class="p-10">-->
<!-- <div class="chart-container" style="position: relative; height:30vh; width:80vw">--> <!-- <div class="chart-container" style="position: relative; height:30vh; width:80vw">-->
<!-- <canvas id="statsChart" height="100px"></canvas>--> <!-- <canvas id="statsChart" height="100px"></canvas>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="chart-container" style="position: relative; height:50vh; width:80vw">--> <!-- <div class="chart-container" style="position: relative; height:50vh; width:80vw">-->
<!-- <canvas id="chartPoints" height="100px"></canvas>--> <!-- <canvas id="chartPoints" height="100px"></canvas>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <button @click="updatechartnew()" class="text-red-500">click me</button>--> <!-- <button @click="updatechartnew()" class="text-red-500">click me</button>-->
<div x-cloak> <div x-cloak>
<form class="flex items-center m-2" x-show="!advancedSearch"> <form class="flex items-center m-2" x-show="!advancedSearch">
<div class="relative w-full d-block max-w-md "> <div class="relative w-full d-block max-w-md ">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"> <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
viewBox="0 0 21 21"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg> </svg>
</div> </div>
<input type="text" <input type="text" class="peer bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full ps-10 p-2.5 pr-8 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100" x-model="nameFilter" placeholder="wyszukiwarka"/>
class="peer bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full ps-10 p-2.5 pr-8 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100" <button x-show="nameFilter.length" @click="nameFilter=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
x-model="nameFilter" placeholder="wyszukiwarka"/> <svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<button x-show="nameFilter.length" @click="nameFilter=''" type="button"
class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="d-block max-w-xs mr-2"> <div class="d-block max-w-xs mr-2">
<label for="basic-year-2026" class="p-2.5 inline-block"> <label for="basic-year-2025" class="p-2.5 inline-block" >
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="basic-year-2026" <input @input.debounce="updateFilter" x-model="year" type="checkbox" id="basic-year-2025" value="2025" /> 2025
value="2026"/> 2026
</label> </label>
<label for="basic-year-2025" class="p-2.5 inline-block"> <label for="year-2024" class="p-2.5 inline-block" >
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="basic-year-2025" <input @input.debounce="updateFilter" x-model="year" type="checkbox" id="basic-year-2024" value="2024" /> 2024
value="2025"/> 2025
</label> </label>
<label for="year-2024" class="p-2.5 inline-block"> <label for="year-2023" class="p-2.5 inline-block" >
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="basic-year-2024" <input @input.debounce="updateFilter" x-model="year" type="checkbox" id="basic-year-2023" value="2023" /> 2023
value="2024"/> 2024
</label>
<label for="year-2023" class="p-2.5 inline-block">
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="basic-year-2023"
value="2023"/> 2023
</label> </label>
</div> </div>
<div class="relative inline-block m-4 text-blue-400 inline cursor-pointer"> <div class="relative inline-block m-4 text-blue-400 inline cursor-pointer">
@@ -88,63 +62,46 @@
</form> </form>
<div x-show="advancedSearch" class="flex m-4"> <div x-show="advancedSearch" class="flex m-4">
<div class="relative w-full d-block max-w-xs mr-2"> <div class="relative w-full d-block max-w-xs mr-2">
<input @input.debounce="updateFilter" x-model.debounce.250ms="username" placeholder="użytkownik" <input @input.debounce="updateFilter" x-model="username" placeholder="użytkownik" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100" />
type="text" <button x-show="username.length" @click="username=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100"/> <svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<button x-show="username.length" @click="username=''" type="button"
class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="relative w-full d-block max-w-xs mr-2"> <div class="relative w-full d-block max-w-xs mr-2">
<input @input.debounce="updateFilter" x-model.debounce.250ms="title" placeholder="tytuł" type="text" <input @input.debounce="updateFilter" x-model="title" placeholder="tytuł" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100" />
class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100"/> <button x-show="title.length" @click="title=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<button x-show="title.length" @click="title=''" type="button" <svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="relative w-full d-block max-w-xs mr-2"> <div class="relative w-full d-block max-w-xs mr-2">
<input @input.debounce="updateFilter" x-model.debounce.250ms="author" placeholder="autor" type="text" <input @input.debounce="updateFilter" x-model="author" placeholder="autor" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100" />
class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100"/> <button x-show="author.length" @click="author=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<button x-show="author.length" @click="author=''" type="button" <svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="relative w-full d-block max-w-xs mr-2"> <div class="relative w-full d-block max-w-xs mr-2">
<input @input.debounce="updateFilter" x-model.debounce.250ms="publisher" placeholder="wydawca" <input @input.debounce="updateFilter" x-model="publisher" placeholder="wydawca" type="text" class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100" />
type="text" <button x-show="publisher.length" @click="publisher=''" type="button" class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
class="peer mr-2 max-w-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:outline focus:outline-sky-500 block w-full p-2.5 px-4 dark:bg-gray-900 dark:border-stone-700 dark:text-gray-100"/> <svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<button x-show="publisher.length" @click="publisher=''" type="button"
class="absolute inset-y-0 end-0 flex items-center pe-3 invisible peer-valid:visible">
<svg class="w-4 h-4 text-gray-500 " xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
</div> </div>
<div class="d-block max-w-xs mr-2"> <div class="d-block max-w-xs mr-2">
<label for="year-2026" class="p-2.5 inline-block"> <label for="year-2025" class="p-2.5 inline-block" >
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2026" value="2026"/> 2026 <input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2025" value="2025" /> 2025
</label> </label>
<label for="year-2025" class="p-2.5 inline-block"> <label for="year-2024" class="p-2.5 inline-block" >
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2025" value="2025"/> 2025 <input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2024" value="2024" /> 2024
</label> </label>
<label for="year-2024" class="p-2.5 inline-block"> <label for="year-2023" class="p-2.5 inline-block" >
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2024" value="2024"/> 2024 <input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2023" value="2023" /> 2023
</label>
<label for="year-2023" class="p-2.5 inline-block">
<input @input.debounce="updateFilter" x-model="year" type="checkbox" id="year-2023" value="2023"/> 2023
</label> </label>
</div> </div>
@@ -156,13 +113,11 @@
<template x-ref="sortIcons"> <template x-ref="sortIcons">
<span> <span>
<svg x-show="orderColumn[1] === -1 && orderColumn[0] === columnName" xmlns="http://www.w3.org/2000/svg" <svg x-show="orderColumn[1] === -1 && orderColumn[0] === columnName" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
</svg> </svg>
<svg x-show="orderColumn[1] === 1 && orderColumn[0] === columnName" xmlns="http://www.w3.org/2000/svg" <svg x-show="orderColumn[1] === 1 && orderColumn[0] === columnName" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
</svg> </svg>
</span> </span>
</template> </template>
@@ -223,34 +178,28 @@
</thead> </thead>
<tbody> <tbody>
<template x-for="(item, key) in filteredItems" :key="item.uuid"> <template x-for="(item, key) in filteredItems" :key="item.uuid">
<tr class="border-b border-slate-100 dark:border-stone-900 m-3 w-auto hover:bg-gray-100 dark:hover:bg-gray-900"> <tr class="border-b border-slate-100 dark:border-stone-900 m-3 w-auto hover:bg-gray-100 dark:hover:bg-gray-900">
<td class="pl-1 text-right" x-text="filteredItems.length-key"></td> <td class="pl-1 text-right" x-text="filteredItems.length-key"></td>
<td class="pl-1 w-3 py-2"> <td class="pl-1 w-3 py-2">
<a @click="advancedSearch ? username=item.username : nameFilter='@'+item.username" <a @click="advancedSearch ? username=item.username : nameFilter='@'+item.username" class="cursor-pointer" x-text="item.username"></a>
class="cursor-pointer" x-text="item.username"></a>
</td> </td>
<td class="pl-1 w-12"> <td class="pl-1 w-12">
<a @click="advancedSearch ? title=item.book.title : nameFilter=item.book.title" <a @click="advancedSearch ? title=item.book.title : nameFilter=item.book.title" class="cursor-pointer" x-text="item.book.title"></a>
class="cursor-pointer" x-text="item.book.title"></a>
</td> </td>
<td class="pl-1 w-8"> <td class="pl-1 w-8">
<a @click="advancedSearch ? author=item.book.author : nameFilter=item.book.author" <a @click="advancedSearch ? author=item.book.author : nameFilter=item.book.author" class="cursor-pointer" x-text="item.book.author"></a>
class="cursor-pointer" x-text="item.book.author"></a>
</td> </td>
<td class="pl-1 w-8"> <td class="pl-1 w-8">
<a @click="advancedSearch ? publisher=item.book.publisher : nameFilter=item.book.publisher" <a @click="advancedSearch ? publisher=item.book.publisher : nameFilter=item.book.publisher" class="cursor-pointer" x-text="item.book.publisher"></a>
class="cursor-pointer" x-text="item.book.publisher"></a>
</td>
<td class="pr-4 text-right w-[5rem] w-[5rem]"><a :href="item.book.pages" x-text="item.book.pages"></a>
</td> </td>
<td class="pr-4 text-right w-[5rem] w-[5rem]"><a :href="item.book.pages" x-text="item.book.pages"></a></td>
<td class="pl-1"><a :href="item.book.format" x-text="item.book.format"></a></td> <td class="pl-1"><a :href="item.book.format" x-text="item.book.format"></a></td>
<td class="text-right"><a :href="item.book.rating" x-text="item.book.rating"></a></td> <td class="text-right"><a :href="item.book.rating" x-text="item.book.rating"></a></td>
<td class="pr-4 text-right" x-text="item.likes"></td> <td class="pr-4 text-right" x-text="item.likes"></td>
<td class="pl-1 py-2"> <td class="pl-1 py-2">
<a :href="'https://www.hejto.pl/wpis/'+item.slug" target="_blank"> <a :href="'https://www.hejto.pl/wpis/'+item.slug" target="_blank">
link link
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-gray-500 inline">
stroke="currentColor" class="w-4 h-4 text-gray-500 inline">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/> d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
</svg> </svg>
@@ -268,10 +217,7 @@
</td> </td>
<td class="align-top"> <td class="align-top">
<template x-for="(item, index) in stats().formats"> <template x-for="(item, index) in stats().formats">
<div class="flex"> <p x-text="index+': '+item"></p>
<p x-text="index+':'"></p>
<p x-text="item" class="flex-1 text-right"></p>
</div>
</template> </template>
</td> </td>
<td class="align-top"> <td class="align-top">
@@ -286,7 +232,7 @@
</tfoot> </tfoot>
</table> </table>
</div> </div>
<div x-data="darkmodetoggle" x-cloak="" class="flex m-5 border-t py-4 px-4 dark:bg-gray-800 dark:border-t-gray-500"> <div x-data="darkmodetoggle" class="flex m-5 border-t py-4 px-4 dark:bg-gray-800 dark:border-t-gray-500">
<div class="cursor-pointer text-yellow-500 px-4 dark:text-yellow-200" @click="mode('light')" title="Light mode"> <div class="cursor-pointer text-yellow-500 px-4 dark:text-yellow-200" @click="mode('light')" title="Light mode">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"/> <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"/>

0
package-lock.json generated Executable file → Normal file
View File

0
package.json Executable file → Normal file
View File

0
src/chart.js Executable file → Normal file
View File

0
src/darkmodetoggle.js Executable file → Normal file
View File

906
src/generated.css Executable file → Normal file
View File

File diff suppressed because one or more lines are too long

74
src/main.js Executable file → Normal file
View File

@@ -20,48 +20,28 @@ Alpine.data('bookmeterList', function () {
title: '', title: '',
author: '', author: '',
nameFilter: '', nameFilter: '',
years: [2023, 2024, 2025, 2026], years: [2023, 2024, 2025],
year: this.$persist(['2026']).as('year-filter'), year: this.$persist(['2025']).as('year-filter'),
orderColumn: ['order', 0], orderColumn: ['order', 0],
advancedSearch: this.$persist(0).as('advanced-search'), advancedSearch: this.$persist(0).as('advanced-search'),
async init() { async init() {
this.$watch('nameFilter', () => this.updateFilter());
this.$watch(() => JSON.stringify([ this.$watch('username', () => this.updateFilter());
this.nameFilter, this.$watch('title', () => this.updateFilter());
this.username, this.$watch('author', () => this.updateFilter());
this.title, this.$watch('publisher', () => this.updateFilter());
this.author, this.$watch('year', () => this.updateFilter());
this.publisher,
this.year,
this.advancedSearch
]), () => this.updateFilter());
let qp = new URLSearchParams(window.location.search); let qp = new URLSearchParams(window.location.search);
if(qp.get('filter')) this.nameFilter = qp.get('filter'); if(qp.get('filter')) this.nameFilter = qp.get('filter');
const [data1, data2, data3, data4] = await Promise.all([ const [data1, data2, data3] = await Promise.all([
fetch('/posts_2026.json').then(res => res.json()),
fetch('/posts_2025.json').then(res => res.json()), fetch('/posts_2025.json').then(res => res.json()),
fetch('/posts_2024.json').then(res => res.json()), fetch('/posts_2024.json').then(res => res.json()),
fetch('/posts_2023.json').then(res => res.json()) fetch('/posts_2023.json').then(res => res.json())
]) ])
this.items = [...data1, ...data2, ...data3, ...data4] this.items = [...data1, ...data2, ...data3]
.filter(i => i.book.title.length > 0)
.map(i => ({
...i,
_year: i.created_at.substring(0, 4),
_username: i.username.toLowerCase(),
_title: i.book.title.toLowerCase(),
_author: i.book.author.toLowerCase(),
_publisher: i.book.publisher.toLowerCase(),
_search: (
i.username +
' ' + i.book.title +
' ' + i.book.author +
' ' + i.book.publisher
).toLowerCase()
}));
this.updateFilter(); this.updateFilter();
// this.initChart(); // this.initChart();
}, },
@@ -188,10 +168,6 @@ Alpine.data('bookmeterList', function () {
}; };
}, },
sort() { sort() {
if (this.orderColumn[1] === 0) {
this.initFilteredData();
return;
}
let sortFunction = ({ let sortFunction = ({
username: (a,b) => ((a.username < b.username) ? -1 : (a.username > b.username) ? 1 : 0) * this.orderColumn[1], username: (a,b) => ((a.username < b.username) ? -1 : (a.username > b.username) ? 1 : 0) * this.orderColumn[1],
title: (a,b) => ((a.book.title < b.book.title) ? -1 : (a.book.title > b.book.title) ? 1 : 0) * this.orderColumn[1], title: (a,b) => ((a.book.title < b.book.title) ? -1 : (a.book.title > b.book.title) ? 1 : 0) * this.orderColumn[1],
@@ -210,34 +186,30 @@ Alpine.data('bookmeterList', function () {
initFilteredData(){ initFilteredData(){
let filter = this.nameFilter.toLowerCase(); let filter = this.nameFilter.toLowerCase();
let username = this.username.toLowerCase().trim();
let author = this.author.toLowerCase().trim();
let publisher = this.publisher.toLowerCase().trim();
let title = this.title.toLowerCase().trim();
this.filteredItems = this.items this.filteredItems = this.items
.filter(i => this.year.includes(i._year)) .filter(i => this.year.includes(i.created_at.substring(0,4)))
.filter(i => { .filter(i => {
if (this.advancedSearch) { if(this.advancedSearch) {
return ( return (
(!this.username || i._username.includes(username)) && (!this.username || i.username.toLowerCase().includes(this.username.toLowerCase())) &&
(!this.title || i._title.includes(title)) && (!this.title || i.book.title.toLowerCase().includes(this.title.toLowerCase())) &&
(!this.author || i._author.includes(author)) && (!this.author || i.book.author.toLowerCase().includes(this.author.toLowerCase())) &&
(!this.publisher || i._publisher.includes(publisher)) (!this.publisher || i.book.publisher.toLowerCase().includes(this.publisher.toLowerCase()))
); );
} else { } else {
if (filter.startsWith('@')) { if(filter.startsWith('@') && i.username.toLowerCase().includes(filter.substring(1))) return true;
return i.username.toLowerCase().includes(filter.slice(1)); if (i.username.toLowerCase().includes(filter) ||
} i.book.title.toLowerCase().includes(filter) || i.book.author.toLowerCase().includes(filter) || i.book.publisher.toLowerCase().includes(filter)) return true;
return i._search.includes(filter); return false;
} }
}); });
}, },
updateFilter: Alpine.debounce(function () { updateFilter(){
this.initFilteredData(); this.initFilteredData();
this.sort(); this.sort();
this.updateURL(); this.updateURL();
}, 250), },
updateURL() { updateURL() {
let qp = new URLSearchParams(); let qp = new URLSearchParams();
if(this.nameFilter !== '') qp.set('filter', this.nameFilter); if(this.nameFilter !== '') qp.set('filter', this.nameFilter);

0
src/style.css Executable file → Normal file
View File

0
tailwind.config.js Executable file → Normal file
View File