From e7f8529f90107d8ef29faa570cb7ba00b091beb9 Mon Sep 17 00:00:00 2001
From: "ognev.dev" <mail@ognev.dev>
Date: Wed, 25 Feb 2026 15:50:27 +0500
Subject: [PATCH 1/3] fix topics limit

---
 frontend/page/create_book.templ     | 2 +-
 frontend/page/create_book_templ.go  | 2 +-
 frontend/page/edit_book.templ       | 2 +-
 frontend/page/edit_book_templ.go    | 2 +-
 frontend/page/filter_books.templ    | 2 +-
 frontend/page/filter_books_templ.go | 2 +-
 frontend/page/home.templ            | 1 -
 frontend/page/home_templ.go         | 2 +-
 8 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/page/create_book.templ b/frontend/page/create_book.templ
index e984abe..4103984 100644
--- a/frontend/page/create_book.templ
+++ b/frontend/page/create_book.templ
@@ -63,7 +63,7 @@ templ CreateBookForm() {
                 this.loadError = ''
 
                 try {
-                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book`, { method: 'GET' })
+                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book&per_page=100`, { method: 'GET' })
                     if (resp.status !== 200) {
                         this.loadError = data?.error || 'Failed to load topics'
                         return
diff --git a/frontend/page/create_book_templ.go b/frontend/page/create_book_templ.go
index c1ba390..c726fe0 100644
--- a/frontend/page/create_book_templ.go
+++ b/frontend/page/create_book_templ.go
@@ -34,7 +34,7 @@ func CreateBookForm() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script src=\"/assets/http_helpers.js\"></script><script src=\"/assets/file_upload_helpers.js\"></script><script src=\"/assets/form_helpers.js\"></script><script src=\"/assets/topic_picker.js\"></script><script>\r\n    const BOOK_FORM_DEFAULTS = {\r\n        title: '',\r\n        summary: '',\r\n        description: '',\r\n        authors: [{ name: '', link: '' }],\r\n        homepage: '',\r\n        release_date: '',\r\n        cover_file_id: '',\r\n        topics: []\r\n    }\r\n\r\n    function createBookForm() {\r\n        return {\r\n            ...FormHelpers.makeForm({\r\n                defaults: BOOK_FORM_DEFAULTS,\r\n                submit: async function () {\r\n                    const {resp, data} = await HTTP.postJSON('/api/books/', this.form)\r\n\r\n                    if (resp.status === 201) {\r\n                        this.createdBook = data\r\n                        this.success = true\r\n                        return\r\n                    }\r\n\r\n                    if (data?.error) this.error = data.error\r\n                    FormHelpers.applyInputErrors(this.errors, data?.input_errors)\r\n                },\r\n            }),\r\n\r\n            topics: [],\r\n            ...TopicPicker.make(),\r\n\r\n            createdBook: null,\r\n            upload: null,\r\n            loading: false,\r\n            loadError: '',\r\n\r\n            async init() {\r\n                this.upload = FileUpload.makeFileUpload({\r\n                    purpose: 'book-cover',\r\n                    onUploaded: (id) => {\r\n                        this.form.cover_file_id = id\r\n                    },\r\n                    onRemoved: () => {\r\n                        this.form.cover_file_id = ''\r\n                    },\r\n                })\r\n\r\n                this.loading = true\r\n                this.loadError = ''\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.loadError = data?.error || 'Failed to load topics'\r\n                        return\r\n                    }\r\n\r\n                    this.topics = data?.data ?? []\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.loadError = 'Failed to load topics'\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n            },\r\n\r\n            get createdBookURL() {\r\n                const pid = this.createdBook?.public_id\r\n                return pid ? `/books/${pid}/` : ''\r\n            },\r\n\r\n            addAuthorRow() {\r\n                this.form.authors.push({ name: '', link: '' })\r\n            },\r\n\r\n            removeAuthorRow(i) {\r\n                if (this.form.authors.length <= 1) return\r\n                this.form.authors.splice(i, 1)\r\n            },\r\n\r\n\r\n            dragIndex: null,\r\n            dragOverIndex: null,\r\n\r\n            onAuthorDragStart(i) {\r\n                this.dragIndex = i\r\n            },\r\n\r\n            onAuthorDragOver(e, i) {\r\n                e.preventDefault()\r\n                this.dragOverIndex = i\r\n            },\r\n\r\n            onAuthorDrop(i) {\r\n                if (this.dragIndex === null || this.dragIndex === i) {\r\n                    this.dragOverIndex = null\r\n                    return\r\n                }\r\n\r\n                const moved = this.form.authors.splice(this.dragIndex, 1)[0]\r\n                this.form.authors.splice(i, 0, moved)\r\n\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragLeave(i) {\r\n                if (this.dragOverIndex === i) this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragEnd() {\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n        }\r\n    }\r\n\r\n\r\n</script><div class=\"min-w-2xl\"><h1 class=\"text-3xl pb-4\">Add Book</h1><div class=\"bg-base-100 shadow-md card-body\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script src=\"/assets/http_helpers.js\"></script><script src=\"/assets/file_upload_helpers.js\"></script><script src=\"/assets/form_helpers.js\"></script><script src=\"/assets/topic_picker.js\"></script><script>\r\n    const BOOK_FORM_DEFAULTS = {\r\n        title: '',\r\n        summary: '',\r\n        description: '',\r\n        authors: [{ name: '', link: '' }],\r\n        homepage: '',\r\n        release_date: '',\r\n        cover_file_id: '',\r\n        topics: []\r\n    }\r\n\r\n    function createBookForm() {\r\n        return {\r\n            ...FormHelpers.makeForm({\r\n                defaults: BOOK_FORM_DEFAULTS,\r\n                submit: async function () {\r\n                    const {resp, data} = await HTTP.postJSON('/api/books/', this.form)\r\n\r\n                    if (resp.status === 201) {\r\n                        this.createdBook = data\r\n                        this.success = true\r\n                        return\r\n                    }\r\n\r\n                    if (data?.error) this.error = data.error\r\n                    FormHelpers.applyInputErrors(this.errors, data?.input_errors)\r\n                },\r\n            }),\r\n\r\n            topics: [],\r\n            ...TopicPicker.make(),\r\n\r\n            createdBook: null,\r\n            upload: null,\r\n            loading: false,\r\n            loadError: '',\r\n\r\n            async init() {\r\n                this.upload = FileUpload.makeFileUpload({\r\n                    purpose: 'book-cover',\r\n                    onUploaded: (id) => {\r\n                        this.form.cover_file_id = id\r\n                    },\r\n                    onRemoved: () => {\r\n                        this.form.cover_file_id = ''\r\n                    },\r\n                })\r\n\r\n                this.loading = true\r\n                this.loadError = ''\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book&per_page=100`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.loadError = data?.error || 'Failed to load topics'\r\n                        return\r\n                    }\r\n\r\n                    this.topics = data?.data ?? []\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.loadError = 'Failed to load topics'\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n            },\r\n\r\n            get createdBookURL() {\r\n                const pid = this.createdBook?.public_id\r\n                return pid ? `/books/${pid}/` : ''\r\n            },\r\n\r\n            addAuthorRow() {\r\n                this.form.authors.push({ name: '', link: '' })\r\n            },\r\n\r\n            removeAuthorRow(i) {\r\n                if (this.form.authors.length <= 1) return\r\n                this.form.authors.splice(i, 1)\r\n            },\r\n\r\n\r\n            dragIndex: null,\r\n            dragOverIndex: null,\r\n\r\n            onAuthorDragStart(i) {\r\n                this.dragIndex = i\r\n            },\r\n\r\n            onAuthorDragOver(e, i) {\r\n                e.preventDefault()\r\n                this.dragOverIndex = i\r\n            },\r\n\r\n            onAuthorDrop(i) {\r\n                if (this.dragIndex === null || this.dragIndex === i) {\r\n                    this.dragOverIndex = null\r\n                    return\r\n                }\r\n\r\n                const moved = this.form.authors.splice(this.dragIndex, 1)[0]\r\n                this.form.authors.splice(i, 0, moved)\r\n\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragLeave(i) {\r\n                if (this.dragOverIndex === i) this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragEnd() {\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n        }\r\n    }\r\n\r\n\r\n</script><div class=\"min-w-2xl\"><h1 class=\"text-3xl pb-4\">Add Book</h1><div class=\"bg-base-100 shadow-md card-body\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/frontend/page/edit_book.templ b/frontend/page/edit_book.templ
index 784c09e..ee30cbf 100644
--- a/frontend/page/edit_book.templ
+++ b/frontend/page/edit_book.templ
@@ -90,7 +90,7 @@ templ EditBookForm(bookID string) {
                 this.loadError = ''
 
                 try {
-                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book`, { method: 'GET' })
+                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book&per_page=100`, { method: 'GET' })
                     if (resp.status !== 200) {
                         this.loadError = data?.error || 'Failed to load topics'
                         return
diff --git a/frontend/page/edit_book_templ.go b/frontend/page/edit_book_templ.go
index 6c256f2..2c3017a 100644
--- a/frontend/page/edit_book_templ.go
+++ b/frontend/page/edit_book_templ.go
@@ -47,7 +47,7 @@ func EditBookForm(bookID string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"\r\n\r\n    function editBookForm() {\r\n        return {\r\n            ...FormHelpers.makeForm({\r\n                defaults: BOOK_FORM_DEFAULTS,\r\n                submit: async function () {\r\n                    const { resp, data } = await HTTP.putJSON(`/api/books/${BOOK_ID}/`, this.form)\r\n\r\n                    if (resp.status === 200) {\r\n                        this.saveRevision = data?.revision ?? 0\r\n                        this.needReview = data?.status === `pending` ?? false\r\n                        this.success = true\r\n                        return\r\n                    }\r\n\r\n                    if (data?.error) this.error = data.error\r\n                    FormHelpers.applyInputErrors(this.errors, data?.input_errors)\r\n                },\r\n            }),\r\n\r\n            topics: [],\r\n            ...TopicPicker.make(),\r\n\r\n            revision: null,\r\n            revision_date: null,\r\n            saveRevision: null,\r\n            needReview: true,\r\n\r\n            // page state\r\n            loading: true,\r\n            loadError: '',\r\n            book: null,\r\n            updatedBook: null,\r\n\r\n            // uploader (init() to bind callbacks to Alpine proxy)\r\n            upload: null,\r\n\r\n            get bookURL() {\r\n                return  `/books/${BOOK_ID}/`\r\n            },\r\n\r\n            get revisionDateFormatted() {\r\n                if (!this.revision_date) return ''\r\n\r\n                return new Date(this.revision_date).toLocaleString('en-US', {\r\n                    hour: '2-digit',\r\n                    minute: '2-digit',\r\n                    month: 'short',\r\n                    hour12: false,\r\n                    day: '2-digit'\r\n                })\r\n\r\n            },\r\n\r\n            async init() {\r\n                // init uploader\r\n                this.upload = FileUpload.makeFileUpload({\r\n                    purpose: 'book-cover',\r\n                    onUploaded: (id) => { this.form.cover_file_id = id },\r\n                    onRemoved: () => { this.form.cover_file_id = '' },\r\n                })\r\n\r\n                this.loading = true\r\n                this.loadError = ''\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.loadError = data?.error || 'Failed to load topics'\r\n                        return\r\n                    }\r\n\r\n                    this.topics = data?.data ?? []\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.loadError = 'Failed to load topics'\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n\r\n                this.loading = true\r\n                this.loadError = ''\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/books/${BOOK_ID}/edit/`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.loadError = data?.error || 'Failed to load book'\r\n                        return\r\n                    }\r\n\r\n                    this.book = data.data || null\r\n                    this.revision = data?.revision ?? null\r\n                    this.revision_date = data?.revision_date ?? null\r\n\r\n                    for (const k of Object.keys(BOOK_FORM_DEFAULTS)) {\r\n                        if (k in (data.data || {})) this.form[k] = data.data[k] ?? BOOK_FORM_DEFAULTS[k]\r\n                    }\r\n\r\n                    const topicByPublicID = new Map((this.topics ?? []).map(t => [t.public_id, t.id]))\r\n                    const bookTopicPublicIDs = data.data?.topics ?? []\r\n                    this.form.topics = bookTopicPublicIDs\r\n                        .map(pid => topicByPublicID.get(pid))\r\n                        .filter(Boolean)\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.loadError = 'Failed to load book'\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n            },\r\n\r\n            addAuthorRow() {\r\n                this.form.authors.push({ name: '', link: '' })\r\n            },\r\n\r\n            removeAuthorRow(i) {\r\n                if (this.form.authors.length <= 1) return\r\n                this.form.authors.splice(i, 1)\r\n            },\r\n\r\n\r\n            dragIndex: null,\r\n            dragOverIndex: null,\r\n\r\n            onAuthorDragStart(i) {\r\n                this.dragIndex = i\r\n            },\r\n\r\n            onAuthorDragOver(e, i) {\r\n                e.preventDefault()\r\n                this.dragOverIndex = i\r\n            },\r\n\r\n            onAuthorDrop(i) {\r\n                if (this.dragIndex === null || this.dragIndex === i) {\r\n                    this.dragOverIndex = null\r\n                    return\r\n                }\r\n\r\n                const moved = this.form.authors.splice(this.dragIndex, 1)[0]\r\n                this.form.authors.splice(i, 0, moved)\r\n\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragLeave(i) {\r\n                if (this.dragOverIndex === i) this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragEnd() {\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n        }\r\n    }\r\n</script><div class=\"min-w-2xl\"><h1 class=\"text-3xl pb-4\">Edit Book</h1><div class=\"bg-base-100 w-full shadow-md\"><div class=\"card-body\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "\"\r\n\r\n    function editBookForm() {\r\n        return {\r\n            ...FormHelpers.makeForm({\r\n                defaults: BOOK_FORM_DEFAULTS,\r\n                submit: async function () {\r\n                    const { resp, data } = await HTTP.putJSON(`/api/books/${BOOK_ID}/`, this.form)\r\n\r\n                    if (resp.status === 200) {\r\n                        this.saveRevision = data?.revision ?? 0\r\n                        this.needReview = data?.status === `pending` ?? false\r\n                        this.success = true\r\n                        return\r\n                    }\r\n\r\n                    if (data?.error) this.error = data.error\r\n                    FormHelpers.applyInputErrors(this.errors, data?.input_errors)\r\n                },\r\n            }),\r\n\r\n            topics: [],\r\n            ...TopicPicker.make(),\r\n\r\n            revision: null,\r\n            revision_date: null,\r\n            saveRevision: null,\r\n            needReview: true,\r\n\r\n            // page state\r\n            loading: true,\r\n            loadError: '',\r\n            book: null,\r\n            updatedBook: null,\r\n\r\n            // uploader (init() to bind callbacks to Alpine proxy)\r\n            upload: null,\r\n\r\n            get bookURL() {\r\n                return  `/books/${BOOK_ID}/`\r\n            },\r\n\r\n            get revisionDateFormatted() {\r\n                if (!this.revision_date) return ''\r\n\r\n                return new Date(this.revision_date).toLocaleString('en-US', {\r\n                    hour: '2-digit',\r\n                    minute: '2-digit',\r\n                    month: 'short',\r\n                    hour12: false,\r\n                    day: '2-digit'\r\n                })\r\n\r\n            },\r\n\r\n            async init() {\r\n                // init uploader\r\n                this.upload = FileUpload.makeFileUpload({\r\n                    purpose: 'book-cover',\r\n                    onUploaded: (id) => { this.form.cover_file_id = id },\r\n                    onRemoved: () => { this.form.cover_file_id = '' },\r\n                })\r\n\r\n                this.loading = true\r\n                this.loadError = ''\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book&per_page=100`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.loadError = data?.error || 'Failed to load topics'\r\n                        return\r\n                    }\r\n\r\n                    this.topics = data?.data ?? []\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.loadError = 'Failed to load topics'\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n\r\n                this.loading = true\r\n                this.loadError = ''\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/books/${BOOK_ID}/edit/`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.loadError = data?.error || 'Failed to load book'\r\n                        return\r\n                    }\r\n\r\n                    this.book = data.data || null\r\n                    this.revision = data?.revision ?? null\r\n                    this.revision_date = data?.revision_date ?? null\r\n\r\n                    for (const k of Object.keys(BOOK_FORM_DEFAULTS)) {\r\n                        if (k in (data.data || {})) this.form[k] = data.data[k] ?? BOOK_FORM_DEFAULTS[k]\r\n                    }\r\n\r\n                    const topicByPublicID = new Map((this.topics ?? []).map(t => [t.public_id, t.id]))\r\n                    const bookTopicPublicIDs = data.data?.topics ?? []\r\n                    this.form.topics = bookTopicPublicIDs\r\n                        .map(pid => topicByPublicID.get(pid))\r\n                        .filter(Boolean)\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.loadError = 'Failed to load book'\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n            },\r\n\r\n            addAuthorRow() {\r\n                this.form.authors.push({ name: '', link: '' })\r\n            },\r\n\r\n            removeAuthorRow(i) {\r\n                if (this.form.authors.length <= 1) return\r\n                this.form.authors.splice(i, 1)\r\n            },\r\n\r\n\r\n            dragIndex: null,\r\n            dragOverIndex: null,\r\n\r\n            onAuthorDragStart(i) {\r\n                this.dragIndex = i\r\n            },\r\n\r\n            onAuthorDragOver(e, i) {\r\n                e.preventDefault()\r\n                this.dragOverIndex = i\r\n            },\r\n\r\n            onAuthorDrop(i) {\r\n                if (this.dragIndex === null || this.dragIndex === i) {\r\n                    this.dragOverIndex = null\r\n                    return\r\n                }\r\n\r\n                const moved = this.form.authors.splice(this.dragIndex, 1)[0]\r\n                this.form.authors.splice(i, 0, moved)\r\n\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragLeave(i) {\r\n                if (this.dragOverIndex === i) this.dragOverIndex = null\r\n            },\r\n\r\n            onAuthorDragEnd() {\r\n                this.dragIndex = null\r\n                this.dragOverIndex = null\r\n            },\r\n        }\r\n    }\r\n</script><div class=\"min-w-2xl\"><h1 class=\"text-3xl pb-4\">Edit Book</h1><div class=\"bg-base-100 w-full shadow-md\"><div class=\"card-body\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/frontend/page/filter_books.templ b/frontend/page/filter_books.templ
index 79f0779..5991a20 100644
--- a/frontend/page/filter_books.templ
+++ b/frontend/page/filter_books.templ
@@ -120,7 +120,7 @@ templ FilterBooksPage() {
                 if (this.topics.length) return
 
                 try {
-                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book`, { method: 'GET' })
+                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book&per_page=100`, { method: 'GET' })
                     if (resp.status !== 200) {
                         this.error = data?.error || 'Failed to load topics'
                         return
diff --git a/frontend/page/filter_books_templ.go b/frontend/page/filter_books_templ.go
index 5314c63..f2663ab 100644
--- a/frontend/page/filter_books_templ.go
+++ b/frontend/page/filter_books_templ.go
@@ -31,7 +31,7 @@ func FilterBooksPage() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script src=\"/assets/http_helpers.js\"></script><script src=\"/assets/helpers.js\"></script><script>\r\n    function booksPage() {\r\n        return {\r\n            books: [],\r\n            loading: false,\r\n            error: '',\r\n            total: 0,\r\n            topics: [],\r\n            loadedOnce: false,\r\n\r\n            filters: {\r\n                page: 1,\r\n                per_page: 10,\r\n                topic_ids: [],\r\n            },\r\n\r\n            coverURL(fileID) {\r\n                return '/files/' + fileID + '/?preview'\r\n            },\r\n\r\n            get totalPages() {\r\n                return Math.max(1, Math.ceil(this.total / this.filters.per_page))\r\n            },\r\n\r\n            readFromURL() {\r\n                const url = new URL(window.location.href)\r\n\r\n                const p = parseInt(url.searchParams.get('page') || '', 10)\r\n                if (Number.isFinite(p) && p > 0) this.filters.page = p\r\n                else this.filters.page = 1\r\n\r\n                const pp = parseInt(url.searchParams.get('per_page') || '', 10)\r\n                if (Number.isFinite(pp) && pp > 0) this.filters.per_page = pp\r\n\r\n                const topicIDs = url.searchParams.getAll('topics')\r\n                this.filters.topic_ids = topicIDs ?? []\r\n            },\r\n\r\n            writeToURL() {\r\n                const url = new URL(window.location.href)\r\n\r\n                if (this.filters.page === 1) url.searchParams.delete('page')\r\n                else url.searchParams.set('page', String(this.filters.page))\r\n\r\n                if (this.filters.per_page === 10) url.searchParams.delete('per_page')\r\n                else url.searchParams.set('per_page', String(this.filters.per_page))\r\n\r\n                url.searchParams.delete('topics')\r\n                for (const id of (this.filters.topic_ids ?? [])) {\r\n                    url.searchParams.append('topics', id)\r\n                }\r\n\r\n                window.history.replaceState({}, '', url.toString())\r\n            },\r\n\r\n            onPopState() {\r\n                this.readFromURL()\r\n                this.load({ syncURL: false, scrollTop: true })\r\n            },\r\n\r\n            // ---------- pagination ui ----------\r\n\r\n            scrollToTop() {\r\n                if (window.scrollY > 80) {\r\n                    window.scrollTo({ top: 0, behavior: 'smooth' })\r\n                }\r\n            },\r\n\r\n            get pageButtons() {\r\n                const max = this.totalPages\r\n                const cur = this.filters.page\r\n\r\n                const start = Math.max(2, cur - 3)\r\n                const end = Math.min(max - 1, cur + 3)\r\n\r\n                const btns = []\r\n                for (let p = start; p <= end; p++) btns.push(p)\r\n                return btns\r\n            },\r\n\r\n            get showLeftDots() {\r\n                return this.pageButtons.length > 0 && this.pageButtons[0] > 2\r\n            },\r\n\r\n            get showRightDots() {\r\n                const btns = this.pageButtons\r\n                return btns.length > 0 && btns[btns.length - 1] < this.totalPages - 1\r\n            },\r\n\r\n            gotoPage(p) {\r\n                if (p < 1) p = 1\r\n                if (p > this.totalPages) p = this.totalPages\r\n                if (p === this.filters.page) return\r\n\r\n                this.filters.page = p\r\n                this.load({ syncURL: true, scrollTop: true })\r\n            },\r\n\r\n            buildBooksQS() {\r\n                const qs = new URLSearchParams({\r\n                    page: String(this.filters.page),\r\n                    per_page: String(this.filters.per_page),\r\n                })\r\n\r\n                for (const id of (this.filters.topic_ids ?? [])) {\r\n                    qs.append('topics', id)\r\n                }\r\n\r\n                return qs.toString()\r\n            },\r\n\r\n            async loadTopicsOnce() {\r\n                if (this.topics.length) return\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.error = data?.error || 'Failed to load topics'\r\n                        return\r\n                    }\r\n                    this.topics = data?.data ?? []\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.error = 'Failed to load topics'\r\n                }\r\n            },\r\n\r\n            async load(opt) {\r\n                const options = opt || { syncURL: true, scrollTop: true }\r\n                if (this.filters.page < 1) this.filters.page = 1\r\n                if (this.loadedOnce && this.filters.page > this.totalPages) {\r\n                    this.filters.page = this.totalPages\r\n                }\r\n\r\n                if (options.scrollTop) this.scrollToTop()\r\n\r\n                this.loading = true\r\n                this.error = ''\r\n\r\n                try {\r\n                    await this.loadTopicsOnce()\r\n\r\n                    const { resp, data } = await HTTP.requestJSON('/api/books/?' + this.buildBooksQS())\r\n                    if (resp.status !== 200) {\r\n                        this.error = data?.error || 'Failed to load books'\r\n                        return\r\n                    }\r\n\r\n                    this.books = data?.data ?? []\r\n                    this.total = data?.count ?? 0\r\n                    this.loadedOnce = true\r\n\r\n                    if (this.filters.page > this.totalPages) {\r\n                        this.filters.page = this.totalPages\r\n                        if (options.syncURL) this.writeToURL()\r\n                        return await this.load({ syncURL: false, scrollTop: false })\r\n                    }\r\n\r\n                    if (options.syncURL) this.writeToURL()\r\n                } catch (e) {\r\n                    this.error = e?.message ?? String(e)\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n            },\r\n\r\n            isTopicSelected(t) {\r\n                return (this.filters.topic_ids ?? []).includes(String(t.public_id))\r\n            },\r\n\r\n            init() {\r\n                this.readFromURL()\r\n                window.addEventListener('popstate', () => this.onPopState())\r\n                this.load({ syncURL: false, scrollTop: false })\r\n            },\r\n        }\r\n    }\r\n</script><div x-data=\"booksPage()\"><div class=\"flex items-center justify-between pb-4\"><h1 class=\"text-3xl\">Books</h1><a class=\"btn btn-info ml-2\" href=\"/add-book/\">Add book</a></div><!-- topics --><div class=\"flex flex-wrap gap-2 mb-2\"><template x-for=\"t in topics\" :key=\"t.id\"><label class=\"badge badge-lg cursor-pointer select-none\" :class=\"filters.topic_ids.includes(t.public_id) ? 'badge-info' : 'badge-soft'\"><input type=\"checkbox\" class=\"hidden\" @change=\"\r\n  $event.target.checked\r\n    ? filters.topic_ids.push(t.public_id)\r\n    : filters.topic_ids = filters.topic_ids.filter(id => id !== t.public_id)\r\n  filters.page = 1\r\n  load({ syncURL: true, scrollTop: true })\r\n\" :checked=\"filters.topic_ids.includes(t.public_id)\"> <span x-text=\"t.name\"></span></label></template></div><!-- Top pagination --><div class=\"flex items-center justify-between mb-4\"><div class=\"text-sm text-gray-500\"><span x-text=\"'Total: ' + total\"></span> <span class=\"mx-2\">•</span> <span x-text=\"'Page ' + filters.page + ' of ' + totalPages\"></span></div><div class=\"flex items-center gap-2\"><button class=\"btn btn-sm\" :class=\"filters.page === 1 ? 'btn-active' : ''\" :disabled=\"loading\" @click=\"gotoPage(1)\">1</button><template x-if=\"showLeftDots\"><span class=\"px-1 select-none\">...</span></template><template x-for=\"p in pageButtons\" :key=\"p\"><button class=\"btn btn-sm\" :class=\"p === page ? 'btn-active' : ''\" :disabled=\"loading\" @click=\"gotoPage(p)\" x-text=\"p\"></button></template><template x-if=\"showRightDots\"><span class=\"px-1 select-none\">...</span></template><template x-if=\"totalPages > 1\"><button class=\"btn btn-sm\" :class=\"filters.page === totalPages ? 'btn-active' : ''\" :disabled=\"loading\" @click=\"gotoPage(totalPages)\" x-text=\"totalPages\"></button></template></div></div><template x-if=\"loading\"><div>Loading…</div></template><template x-if=\"error\"><div class=\"text-red-600\" x-text=\"error\"></div></template><template x-for=\"b in books\" :key=\"b.id\"><div class=\"card rounded-none card-side bg-base-100 shadow-sm mb-2\"><template x-if=\"b.cover_file_id\"><figure><img class=\"object-cover shrink-0 w-40\" :src=\"coverURL(b.cover_file_id)\" :alt=\"b.title\" width=\"300\" loading=\"lazy\"></figure></template><div class=\"card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"card-title\"><a class=\"hover:underline link-info\" :href=\"'/books/' + b.public_id + '/'\" x-text=\"b.title\"></a></h2><a class=\"btn btn-ghost btn-sm btn-square\" title=\"Edit\" :href=\"'/edit-book/' + b.public_id + '/'\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script src=\"/assets/http_helpers.js\"></script><script src=\"/assets/helpers.js\"></script><script>\r\n    function booksPage() {\r\n        return {\r\n            books: [],\r\n            loading: false,\r\n            error: '',\r\n            total: 0,\r\n            topics: [],\r\n            loadedOnce: false,\r\n\r\n            filters: {\r\n                page: 1,\r\n                per_page: 10,\r\n                topic_ids: [],\r\n            },\r\n\r\n            coverURL(fileID) {\r\n                return '/files/' + fileID + '/?preview'\r\n            },\r\n\r\n            get totalPages() {\r\n                return Math.max(1, Math.ceil(this.total / this.filters.per_page))\r\n            },\r\n\r\n            readFromURL() {\r\n                const url = new URL(window.location.href)\r\n\r\n                const p = parseInt(url.searchParams.get('page') || '', 10)\r\n                if (Number.isFinite(p) && p > 0) this.filters.page = p\r\n                else this.filters.page = 1\r\n\r\n                const pp = parseInt(url.searchParams.get('per_page') || '', 10)\r\n                if (Number.isFinite(pp) && pp > 0) this.filters.per_page = pp\r\n\r\n                const topicIDs = url.searchParams.getAll('topics')\r\n                this.filters.topic_ids = topicIDs ?? []\r\n            },\r\n\r\n            writeToURL() {\r\n                const url = new URL(window.location.href)\r\n\r\n                if (this.filters.page === 1) url.searchParams.delete('page')\r\n                else url.searchParams.set('page', String(this.filters.page))\r\n\r\n                if (this.filters.per_page === 10) url.searchParams.delete('per_page')\r\n                else url.searchParams.set('per_page', String(this.filters.per_page))\r\n\r\n                url.searchParams.delete('topics')\r\n                for (const id of (this.filters.topic_ids ?? [])) {\r\n                    url.searchParams.append('topics', id)\r\n                }\r\n\r\n                window.history.replaceState({}, '', url.toString())\r\n            },\r\n\r\n            onPopState() {\r\n                this.readFromURL()\r\n                this.load({ syncURL: false, scrollTop: true })\r\n            },\r\n\r\n            // ---------- pagination ui ----------\r\n\r\n            scrollToTop() {\r\n                if (window.scrollY > 80) {\r\n                    window.scrollTo({ top: 0, behavior: 'smooth' })\r\n                }\r\n            },\r\n\r\n            get pageButtons() {\r\n                const max = this.totalPages\r\n                const cur = this.filters.page\r\n\r\n                const start = Math.max(2, cur - 3)\r\n                const end = Math.min(max - 1, cur + 3)\r\n\r\n                const btns = []\r\n                for (let p = start; p <= end; p++) btns.push(p)\r\n                return btns\r\n            },\r\n\r\n            get showLeftDots() {\r\n                return this.pageButtons.length > 0 && this.pageButtons[0] > 2\r\n            },\r\n\r\n            get showRightDots() {\r\n                const btns = this.pageButtons\r\n                return btns.length > 0 && btns[btns.length - 1] < this.totalPages - 1\r\n            },\r\n\r\n            gotoPage(p) {\r\n                if (p < 1) p = 1\r\n                if (p > this.totalPages) p = this.totalPages\r\n                if (p === this.filters.page) return\r\n\r\n                this.filters.page = p\r\n                this.load({ syncURL: true, scrollTop: true })\r\n            },\r\n\r\n            buildBooksQS() {\r\n                const qs = new URLSearchParams({\r\n                    page: String(this.filters.page),\r\n                    per_page: String(this.filters.per_page),\r\n                })\r\n\r\n                for (const id of (this.filters.topic_ids ?? [])) {\r\n                    qs.append('topics', id)\r\n                }\r\n\r\n                return qs.toString()\r\n            },\r\n\r\n            async loadTopicsOnce() {\r\n                if (this.topics.length) return\r\n\r\n                try {\r\n                    const { resp, data } = await HTTP.requestJSON(`/api/topics/?type=book&per_page=100`, { method: 'GET' })\r\n                    if (resp.status !== 200) {\r\n                        this.error = data?.error || 'Failed to load topics'\r\n                        return\r\n                    }\r\n                    this.topics = data?.data ?? []\r\n                } catch (err) {\r\n                    console.error(err)\r\n                    this.error = 'Failed to load topics'\r\n                }\r\n            },\r\n\r\n            async load(opt) {\r\n                const options = opt || { syncURL: true, scrollTop: true }\r\n                if (this.filters.page < 1) this.filters.page = 1\r\n                if (this.loadedOnce && this.filters.page > this.totalPages) {\r\n                    this.filters.page = this.totalPages\r\n                }\r\n\r\n                if (options.scrollTop) this.scrollToTop()\r\n\r\n                this.loading = true\r\n                this.error = ''\r\n\r\n                try {\r\n                    await this.loadTopicsOnce()\r\n\r\n                    const { resp, data } = await HTTP.requestJSON('/api/books/?' + this.buildBooksQS())\r\n                    if (resp.status !== 200) {\r\n                        this.error = data?.error || 'Failed to load books'\r\n                        return\r\n                    }\r\n\r\n                    this.books = data?.data ?? []\r\n                    this.total = data?.count ?? 0\r\n                    this.loadedOnce = true\r\n\r\n                    if (this.filters.page > this.totalPages) {\r\n                        this.filters.page = this.totalPages\r\n                        if (options.syncURL) this.writeToURL()\r\n                        return await this.load({ syncURL: false, scrollTop: false })\r\n                    }\r\n\r\n                    if (options.syncURL) this.writeToURL()\r\n                } catch (e) {\r\n                    this.error = e?.message ?? String(e)\r\n                } finally {\r\n                    this.loading = false\r\n                }\r\n            },\r\n\r\n            isTopicSelected(t) {\r\n                return (this.filters.topic_ids ?? []).includes(String(t.public_id))\r\n            },\r\n\r\n            init() {\r\n                this.readFromURL()\r\n                window.addEventListener('popstate', () => this.onPopState())\r\n                this.load({ syncURL: false, scrollTop: false })\r\n            },\r\n        }\r\n    }\r\n</script><div x-data=\"booksPage()\"><div class=\"flex items-center justify-between pb-4\"><h1 class=\"text-3xl\">Books</h1><a class=\"btn btn-info ml-2\" href=\"/add-book/\">Add book</a></div><!-- topics --><div class=\"flex flex-wrap gap-2 mb-2\"><template x-for=\"t in topics\" :key=\"t.id\"><label class=\"badge badge-lg cursor-pointer select-none\" :class=\"filters.topic_ids.includes(t.public_id) ? 'badge-info' : 'badge-soft'\"><input type=\"checkbox\" class=\"hidden\" @change=\"\r\n  $event.target.checked\r\n    ? filters.topic_ids.push(t.public_id)\r\n    : filters.topic_ids = filters.topic_ids.filter(id => id !== t.public_id)\r\n  filters.page = 1\r\n  load({ syncURL: true, scrollTop: true })\r\n\" :checked=\"filters.topic_ids.includes(t.public_id)\"> <span x-text=\"t.name\"></span></label></template></div><!-- Top pagination --><div class=\"flex items-center justify-between mb-4\"><div class=\"text-sm text-gray-500\"><span x-text=\"'Total: ' + total\"></span> <span class=\"mx-2\">•</span> <span x-text=\"'Page ' + filters.page + ' of ' + totalPages\"></span></div><div class=\"flex items-center gap-2\"><button class=\"btn btn-sm\" :class=\"filters.page === 1 ? 'btn-active' : ''\" :disabled=\"loading\" @click=\"gotoPage(1)\">1</button><template x-if=\"showLeftDots\"><span class=\"px-1 select-none\">...</span></template><template x-for=\"p in pageButtons\" :key=\"p\"><button class=\"btn btn-sm\" :class=\"p === page ? 'btn-active' : ''\" :disabled=\"loading\" @click=\"gotoPage(p)\" x-text=\"p\"></button></template><template x-if=\"showRightDots\"><span class=\"px-1 select-none\">...</span></template><template x-if=\"totalPages > 1\"><button class=\"btn btn-sm\" :class=\"filters.page === totalPages ? 'btn-active' : ''\" :disabled=\"loading\" @click=\"gotoPage(totalPages)\" x-text=\"totalPages\"></button></template></div></div><template x-if=\"loading\"><div>Loading…</div></template><template x-if=\"error\"><div class=\"text-red-600\" x-text=\"error\"></div></template><template x-for=\"b in books\" :key=\"b.id\"><div class=\"card rounded-none card-side bg-base-100 shadow-sm mb-2\"><template x-if=\"b.cover_file_id\"><figure><img class=\"object-cover shrink-0 w-40\" :src=\"coverURL(b.cover_file_id)\" :alt=\"b.title\" width=\"300\" loading=\"lazy\"></figure></template><div class=\"card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"card-title\"><a class=\"hover:underline link-info\" :href=\"'/books/' + b.public_id + '/'\" x-text=\"b.title\"></a></h2><a class=\"btn btn-ghost btn-sm btn-square\" title=\"Edit\" :href=\"'/edit-book/' + b.public_id + '/'\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/frontend/page/home.templ b/frontend/page/home.templ
index ce61022..1e0bbec 100644
--- a/frontend/page/home.templ
+++ b/frontend/page/home.templ
@@ -2,7 +2,6 @@ package page
 
 templ Home() {
     <script>
-    console.log("token:", localStorage.getItem('auth_token'))
     </script>
 <div id="app">hello world</div>
 <div x-data="{ count: 0 }">
diff --git a/frontend/page/home_templ.go b/frontend/page/home_templ.go
index ef755e2..cd89111 100644
--- a/frontend/page/home_templ.go
+++ b/frontend/page/home_templ.go
@@ -29,7 +29,7 @@ func Home() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script>\r\n    console.log(\"token:\", localStorage.getItem('auth_token'))\r\n    </script><div id=\"app\">hello world</div><div x-data=\"{ count: 0 }\"><button x-on:click=\"count++\">Increment</button> <span x-text=\"count\"></span></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script>\r\n    </script><div id=\"app\">hello world</div><div x-data=\"{ count: 0 }\"><button x-on:click=\"count++\">Increment</button> <span x-text=\"count\"></span></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

From b3c977f2a0ffc227694412d7cc76370e67de8bd8 Mon Sep 17 00:00:00 2001
From: "ognev.dev" <mail@ognev.dev>
Date: Fri, 27 Feb 2026 19:15:45 +0500
Subject: [PATCH 2/3] update homepage

---
 WIP.md                              | 19 +++----
 app/repo/page_repo.go               | 16 ++++++
 app/service/page_service.go         | 10 +++-
 frontend/assets/output.css          | 33 ++++-------
 frontend/component/form.templ       |  2 +-
 frontend/component/form_templ.go    |  2 +-
 frontend/page/edit_page.templ       |  2 +-
 frontend/page/edit_page_templ.go    |  2 +-
 frontend/page/home.templ            | 77 ++++++++++++++++++++++---
 frontend/page/home_templ.go         | 88 ++++++++++++++++++++++++++++-
 frontend/page/view_page.templ       |  8 ++-
 frontend/page/view_page_templ.go    |  8 +--
 server/handler/dashboard_handler.go |  2 +-
 server/handler/home_handler.go      | 41 +++++++++++++-
 14 files changed, 253 insertions(+), 57 deletions(-)

diff --git a/WIP.md b/WIP.md
index aabe8b8..2b0526d 100644
--- a/WIP.md
+++ b/WIP.md
@@ -4,24 +4,22 @@ for simplicity, I keep todo list and progress here for now
 
 **Before release**:
 - [ ] Review "TODO!"s
-- [ ] Homepage
+- [x] Homepage
 - [ ] Licence
-- [ ] RELEASE
+- [x] RELEASE
 ---
 
-AFTER RELEASE CHECKLIST:
-- [x] Setup & test email
-- [x] Setup & test auth & registration with google
-- [x] Setup & test auth & registration with github
-- [x] Setup & test tracing
-- [ ] Enable linting and testing on CI/CD
-- [ ] Disable push to main without MR
+Tweaks & fixes:
+- [ ] Add description to upload book cover input 
+- [ ] When book cover upload ends with error, another cannot be added
 
-NEXT:
+
+TODO:
 - [ ] Resend verification link (Sometimes email is lost in somewhere between the woods (Not mailman to blame))
 - [ ] Create new topic when creating/editing entity
 - [ ] Pages
   - [ ] Add meta to page (Who created, last edit by who and list of activities on page (api call))
+  - [ ] Content chips
 - [ ] Books
   - [ ] Add subtitle
   - [ ] Sort
@@ -53,3 +51,4 @@ NEXT:
 - [ ] Let user continue work on reject entity and proposed changes
 - [ ] Review "delete account" test. Right now, it passes even if models belonging to the user still exist.
 - [ ] Order of props when reviewing changes and public diffs should be constant and predefined
+- [ ] Sitemap
diff --git a/app/repo/page_repo.go b/app/repo/page_repo.go
index 81e49ff..fa936c8 100644
--- a/app/repo/page_repo.go
+++ b/app/repo/page_repo.go
@@ -30,6 +30,22 @@ func (r *Repo) GetPageByPublicID(ctx context.Context, publicID string) (*ds.Page
 	return page, err
 }
 
+// GetPagesByPublicID retrieves pages by given public ID.
+func (r *Repo) GetPagesByPublicID(ctx context.Context, publicIDs ...string) (pages []ds.Page, err error) {
+	_, span := r.tracer.Start(ctx, "GetPageByPublicID")
+	defer span.End()
+
+	if len(publicIDs) == 0 {
+		return
+	}
+
+	pages = make([]ds.Page, 0, len(publicIDs))
+	const query = `SELECT * FROM entities e JOIN pages p USING (id) WHERE e.public_id = ANY($1) AND e.type = $2 AND e.deleted_at IS NULL`
+
+	err = pgxscan.Select(ctx, r.getDB(ctx), &pages, query, publicIDs, ds.EntityTypePage)
+	return
+}
+
 // GetPageByID retrieves a page by its ID.
 func (r *Repo) GetPageByID(ctx context.Context, id ds.ID) (*ds.Page, error) {
 	_, span := r.tracer.Start(ctx, "GetPageByID")
diff --git a/app/service/page_service.go b/app/service/page_service.go
index 5705952..31440c1 100644
--- a/app/service/page_service.go
+++ b/app/service/page_service.go
@@ -11,7 +11,7 @@ import (
 	"github.com/gopl-dev/server/email"
 )
 
-// GetPageByPublicID retrieves a page by its public identifier.
+// GetPageByPublicID retrieves a page by its public ID.
 func (s *Service) GetPageByPublicID(ctx context.Context, id string) (*ds.Page, error) {
 	ctx, span := s.tracer.Start(ctx, "GetPageByPublicID")
 	defer span.End()
@@ -19,6 +19,14 @@ func (s *Service) GetPageByPublicID(ctx context.Context, id string) (*ds.Page, e
 	return s.db.GetPageByPublicID(ctx, id)
 }
 
+// GetPagesByPublicID retrieves pages by given public IDs.
+func (s *Service) GetPagesByPublicID(ctx context.Context, id ...string) ([]ds.Page, error) {
+	ctx, span := s.tracer.Start(ctx, "GetPagesByPublicID")
+	defer span.End()
+
+	return s.db.GetPagesByPublicID(ctx, id...)
+}
+
 // GetPageByID retrieves a page by its ID from the database.
 func (s *Service) GetPageByID(ctx context.Context, id ds.ID) (*ds.Page, error) {
 	ctx, span := s.tracer.Start(ctx, "GetBookByID")
diff --git a/frontend/assets/output.css b/frontend/assets/output.css
index e311cd3..38cd685 100644
--- a/frontend/assets/output.css
+++ b/frontend/assets/output.css
@@ -3590,9 +3590,6 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -5151,6 +5148,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
   .mb-10 {
     margin-bottom: calc(var(--spacing) * 10);
   }
@@ -5920,15 +5920,9 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
-  .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
   .w-11\/12 {
     width: calc(11/12 * 100%);
   }
-  .w-32 {
-    width: calc(var(--spacing) * 32);
-  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -5983,10 +5977,6 @@
   .border-collapse {
     border-collapse: collapse;
   }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -6195,9 +6185,6 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
-  .self-start {
-    align-self: flex-start;
-  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -6628,9 +6615,6 @@
   .border-info {
     border-color: var(--color-info);
   }
-  .border-neutral-content {
-    border-color: var(--color-neutral-content);
-  }
   .border-neutral-content\/30 {
     border-color: var(--color-neutral-content);
     @supports (color: color-mix(in lab, red, red)) {
@@ -7043,6 +7027,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
@@ -7055,9 +7042,6 @@
       font-size: 1.375rem;
     }
   }
-  .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
-  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -8381,6 +8365,11 @@
       width: auto;
     }
   }
+  .lg\:grid-cols-2 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
diff --git a/frontend/component/form.templ b/frontend/component/form.templ
index 31aa157..6bd1feb 100644
--- a/frontend/component/form.templ
+++ b/frontend/component/form.templ
@@ -7,7 +7,7 @@ const (
 const (
 	LabelClass        = "text-gray-900"
 	InputClassDefault = "input input-xl w-full"
-	TextareaClassDefault = "textarea textarea-xl w-full"
+	TextareaClassDefault = "textarea w-full"
 	InputClassError   = "input-error"
 )
 
diff --git a/frontend/component/form_templ.go b/frontend/component/form_templ.go
index 9c6d301..0ff1b20 100644
--- a/frontend/component/form_templ.go
+++ b/frontend/component/form_templ.go
@@ -15,7 +15,7 @@ const (
 const (
 	LabelClass           = "text-gray-900"
 	InputClassDefault    = "input input-xl w-full"
-	TextareaClassDefault = "textarea textarea-xl w-full"
+	TextareaClassDefault = "textarea w-full"
 	InputClassError      = "input-error"
 )
 
diff --git a/frontend/page/edit_page.templ b/frontend/page/edit_page.templ
index 55aeb98..c643a23 100644
--- a/frontend/page/edit_page.templ
+++ b/frontend/page/edit_page.templ
@@ -189,7 +189,7 @@ templ EditPageForm(pageID string) {
                     Model: "form.content",
                     ErrorModel: "errors.content",
                     Type: "textarea",
-                    Rows: 15,
+                    Rows: 25,
                     Description: "You can use Markdown.",
                     })
                     <div class="p-2">
diff --git a/frontend/page/edit_page_templ.go b/frontend/page/edit_page_templ.go
index 145d478..bb3a571 100644
--- a/frontend/page/edit_page_templ.go
+++ b/frontend/page/edit_page_templ.go
@@ -87,7 +87,7 @@ func EditPageForm(pageID string) templ.Component {
 				Model:       "form.content",
 				ErrorModel:  "errors.content",
 				Type:        "textarea",
-				Rows:        15,
+				Rows:        25,
 				Description: "You can use Markdown.",
 			}).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
diff --git a/frontend/page/home.templ b/frontend/page/home.templ
index 1e0bbec..5605c40 100644
--- a/frontend/page/home.templ
+++ b/frontend/page/home.templ
@@ -1,13 +1,74 @@
 package page
 
-templ Home() {
-    <script>
-    </script>
-<div id="app">hello world</div>
-<div x-data="{ count: 0 }">
-    <button x-on:click="count++">Increment</button>
-
-    <span x-text="count"></span>
+import "github.com/gopl-dev/server/frontend/component/icon"
+
+type HomeData struct {
+    Title string
+    Data map[string]string
+}
+
+templ Home(d HomeData) {
+<div class="bg-base-100 card-body">
+    <div class="flex items-start justify-between gap-3">
+        <h2 class="text-3xl">
+            { d.Title }
+        </h2>
+        <a
+                class="btn btn-ghost btn-sm btn-circle btn-success"
+                title="Edit"
+                href="/edit-page/intro/"
+        >
+            @icon.Pencil("w-4")
+        </a>
+    </div>
+    <div class="prose">
+        @templ.Raw(d.Data["intro"])
+    </div>
+</div>
+<div class="bg-base-100 card-body">
+    <div class="flex items-start justify-between gap-3">
+        <h2 class="text-3xl">From zero to hero</h2>
+        <a
+                class="btn btn-ghost btn-sm btn-circle btn-success"
+                title="Edit"
+                href="/edit-page/getting-started/"
+        >
+            @icon.Pencil("w-4")
+        </a>
+    </div>
+    <div class="prose">
+        @templ.Raw(d.Data["getting-started"])
+    </div>
+</div>
+<div class="bg-base-100 card-body">
+    <div class="flex items-start justify-between gap-3">
+        <h2 class="text-3xl">Tools</h2>
+        <a
+                class="btn btn-ghost btn-sm btn-circle btn-success"
+                title="Edit"
+                href="/edit-page/tools/"
+        >
+            @icon.Pencil("w-4")
+        </a>
+    </div>
+    <div class="prose">
+        @templ.Raw(d.Data["tools"])
+    </div>
+</div>
+<div class="bg-base-100 card-body">
+    <div class="flex items-start justify-between gap-3">
+        <h2 class="text-3xl">Community</h2>
+        <a
+                class="btn btn-ghost btn-sm btn-circle btn-success"
+                title="Edit"
+                href="/edit-page/ecosystem/"
+        >
+            @icon.Pencil("w-4")
+        </a>
+    </div>
+    <div class="prose">
+        @templ.Raw(d.Data["community"])
+    </div>
 </div>
 }
 
diff --git a/frontend/page/home_templ.go b/frontend/page/home_templ.go
index cd89111..0b9eb41 100644
--- a/frontend/page/home_templ.go
+++ b/frontend/page/home_templ.go
@@ -8,7 +8,14 @@ package page
 import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
-func Home() templ.Component {
+import "github.com/gopl-dev/server/frontend/component/icon"
+
+type HomeData struct {
+	Title string
+	Data  map[string]string
+}
+
+func Home(d HomeData) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -29,7 +36,84 @@ func Home() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<script>\r\n    </script><div id=\"app\">hello world</div><div x-data=\"{ count: 0 }\"><button x-on:click=\"count++\">Increment</button> <span x-text=\"count\"></span></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"bg-base-100 card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"text-3xl\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(d.Title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `frontend/page/home.templ`, Line: 14, Col: 21}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</h2><a class=\"btn btn-ghost btn-sm btn-circle btn-success\" title=\"Edit\" href=\"/edit-page/intro/\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = icon.Pencil("w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</a></div><div class=\"prose\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.Raw(d.Data["intro"]).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div></div><div class=\"bg-base-100 card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"text-3xl\">From zero to hero</h2><a class=\"btn btn-ghost btn-sm btn-circle btn-success\" title=\"Edit\" href=\"/edit-page/getting-started/\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = icon.Pencil("w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</a></div><div class=\"prose\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.Raw(d.Data["getting-started"]).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div></div><div class=\"bg-base-100 card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"text-3xl\">Tools</h2><a class=\"btn btn-ghost btn-sm btn-circle btn-success\" title=\"Edit\" href=\"/edit-page/tools/\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = icon.Pencil("w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</a></div><div class=\"prose\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.Raw(d.Data["tools"]).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div><div class=\"bg-base-100 card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"text-3xl\">Community</h2><a class=\"btn btn-ghost btn-sm btn-circle btn-success\" title=\"Edit\" href=\"/edit-page/ecosystem/\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = icon.Pencil("w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</a></div><div class=\"prose\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.Raw(d.Data["community"]).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/frontend/page/view_page.templ b/frontend/page/view_page.templ
index 14c69f3..073f32f 100644
--- a/frontend/page/view_page.templ
+++ b/frontend/page/view_page.templ
@@ -3,13 +3,15 @@ package page
 import "github.com/gopl-dev/server/frontend/component/icon"
 
 templ ViewPage(id, title, text string) {
-<article class="prose prose-headings:my-2 min-w-2xl">
+<article class="">
     <div class="flex items-baseline justify-between">
-        <h2>{ title }</h2>
+        <h2 class="text-3xl  mb-3">{ title }</h2>
         <a class="not-prose link text-gray-500" href={ "/edit-page/" + id }>
         @icon.Pencil("mr-1 h-4 w-4")
         Edit</a>
     </div>
-    @templ.Raw(text)
+    <div class="bg-base-100 p-10 prose prose-headings:my-2 min-w-2xl">
+        @templ.Raw(text)
+    </div>
 </article>
 }
diff --git a/frontend/page/view_page_templ.go b/frontend/page/view_page_templ.go
index 01c9ee8..18b4803 100644
--- a/frontend/page/view_page_templ.go
+++ b/frontend/page/view_page_templ.go
@@ -31,14 +31,14 @@ func ViewPage(id, title, text string) templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<article class=\"prose prose-headings:my-2 min-w-2xl\"><div class=\"flex items-baseline justify-between\"><h2>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<article class=\"\"><div class=\"flex items-baseline justify-between\"><h2 class=\"text-3xl  mb-3\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `frontend/page/view_page.templ`, Line: 8, Col: 19}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `frontend/page/view_page.templ`, Line: 8, Col: 42}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -65,7 +65,7 @@ func ViewPage(id, title, text string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "Edit</a></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "Edit</a></div><div class=\"bg-base-100 p-10 prose prose-headings:my-2 min-w-2xl\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -73,7 +73,7 @@ func ViewPage(id, title, text string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</article>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</div></article>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/server/handler/dashboard_handler.go b/server/handler/dashboard_handler.go
index 7bbe733..89c5ee4 100644
--- a/server/handler/dashboard_handler.go
+++ b/server/handler/dashboard_handler.go
@@ -23,7 +23,7 @@ func (h *Handler) Dashboard(w http.ResponseWriter, r *http.Request) {
 
 	renderTempl(ctx, w, layout.Dashboard(layout.Data{
 		Title: "Dashboard",
-		Body:  page.Home(),
+		Body:  page.Home(page.HomeData{}),
 		User:  frontend.NewUser(ds.UserFromContext(r.Context())),
 	}))
 }
diff --git a/server/handler/home_handler.go b/server/handler/home_handler.go
index e2c4ad8..ff4bb5b 100644
--- a/server/handler/home_handler.go
+++ b/server/handler/home_handler.go
@@ -7,6 +7,7 @@ import (
 	"github.com/gopl-dev/server/frontend"
 	"github.com/gopl-dev/server/frontend/layout"
 	"github.com/gopl-dev/server/frontend/page"
+	"github.com/gopl-dev/server/test/factory/random"
 )
 
 // Home sweet home.
@@ -14,9 +15,45 @@ func (h *Handler) Home(w http.ResponseWriter, r *http.Request) {
 	ctx, span := h.tracer.Start(r.Context(), "Home")
 	defer span.End()
 
+	pages, err := h.service.GetPagesByPublicID(ctx,
+		"intro", "getting-started", "tools", "community",
+	)
+	if err != nil {
+		Abort(w, r, err)
+		return
+	}
+
+	data := page.HomeData{
+		Title: "Welcome",
+		Data:  map[string]string{},
+	}
+
+	for _, p := range pages {
+		data.Data[p.PublicID] = p.Content
+	}
+
+	title := random.Element([]string{
+		// Now that you have found a list of silly titles, please read through it.
+		"Green Olives Party Late",
+		"Goats Organizing Pajama Launches",
+		"Grandma’s Overpowered Pancake Love",
+		"Galactic Octopus Pizza League",
+		"Giraffes On Purple Ladders",
+		"Goblin Operations & Potion Logistics",
+		"Grumpy Owls Playing Lute",
+		"Gravity Occasionally Pauses Lunch",
+		"Global Organization of Professional Llamas",
+		"Gigantic Overengineered Paperclip Lab",
+		// Thanks. Now that you have committed and if you want to continue, do this three steps:
+		// 1. remove one string from this list that you dislike
+		// 2. add two of your silly titles of your liking (that explain the acronym GOPL).
+		// 3. move this list elsewhere (within this repo, ofc)
+	})
+
+	data.Title = title
 	renderTempl(ctx, w, layout.Default(layout.Data{
-		Title: "Welcome!",
-		Body:  page.Home(),
+		Title: "Welcome",
+		Body:  page.Home(data),
 		User:  frontend.NewUser(ds.UserFromContext(r.Context())),
 	}))
 }

From 92b75826f239795f79103274a3e3f5ce8e07897e Mon Sep 17 00:00:00 2001
From: "ognev.dev" <mail@ognev.dev>
Date: Fri, 27 Feb 2026 19:26:04 +0500
Subject: [PATCH 3/3] fix link ID

---
 frontend/page/home.templ    | 2 +-
 frontend/page/home_templ.go | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/page/home.templ b/frontend/page/home.templ
index 5605c40..5ef4bb2 100644
--- a/frontend/page/home.templ
+++ b/frontend/page/home.templ
@@ -61,7 +61,7 @@ templ Home(d HomeData) {
         <a
                 class="btn btn-ghost btn-sm btn-circle btn-success"
                 title="Edit"
-                href="/edit-page/ecosystem/"
+                href="/edit-page/community/"
         >
             @icon.Pencil("w-4")
         </a>
diff --git a/frontend/page/home_templ.go b/frontend/page/home_templ.go
index 0b9eb41..74b0da0 100644
--- a/frontend/page/home_templ.go
+++ b/frontend/page/home_templ.go
@@ -97,7 +97,7 @@ func Home(d HomeData) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div><div class=\"bg-base-100 card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"text-3xl\">Community</h2><a class=\"btn btn-ghost btn-sm btn-circle btn-success\" title=\"Edit\" href=\"/edit-page/ecosystem/\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div><div class=\"bg-base-100 card-body\"><div class=\"flex items-start justify-between gap-3\"><h2 class=\"text-3xl\">Community</h2><a class=\"btn btn-ghost btn-sm btn-circle btn-success\" title=\"Edit\" href=\"/edit-page/community/\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}