zoeissleeping/passport
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Vastly overhaul admin UI
All checks were successful
Build and Push Docker Image to GHCR / build-and-push (push) Successful in 29s
Details

Browse Source 
Admin UI now has the ability to edit links that exist. Deleting items is
more accessible and asks for a confirmation before deleting. Link and
Category names as well as link descriptions now have a length limit
(todo: make it configurable?). Small bug fixes related to image saving
are also included in this commit.
This commit is contained in:
Zoe
2025-09-30 01:06:52 -05:00
parent cd6ac6e771
commit 462ed6491c
12 changed files with 1141 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

370
src/main.go
View File

@@ -1,4 +1,4 @@
//go:generate tailwindcss -i styles/main.css -o assets/tailwind.css --minify
//go:generate tailwindcss -i styles/main.scss -o assets/tailwind.css --minify
package main
@@ -27,6 +27,7 @@ import (
"github.com/HugoSmits86/nativewebp"
"github.com/caarlos0/env/v11"
"github.com/disintegration/imaging"
"github.com/gofiber/fiber/v3"
"github.com/gofiber/fiber/v3/middleware/helmet"
"github.com/gofiber/fiber/v3/middleware/static"
@@ -35,6 +36,8 @@ import (
"github.com/joho/godotenv"
"github.com/juls0730/passport/src/middleware"
"github.com/juls0730/passport/src/services"
"github.com/rwcarlsen/goexif/exif"
"github.com/rwcarlsen/goexif/tiff"
"golang.org/x/image/draw"
_ "modernc.org/sqlite"
)
@@ -44,23 +47,36 @@ var embeddedAssets embed.FS
var devContent = `<script>
let host = window.location.hostname;
const socket = new WebSocket('ws://' + host + ':2067/ws');
let protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const socket = new WebSocket(protocol + '//' + host + ':2067/ws');
socket.addEventListener('message', (event) => {
if (event.data === 'refresh') {
console.log('Got refresh signal');
let attempts = 0;
let delay = 100;
async function testPage() {
try {
let res = await fetch(window.location.href)
let res = await fetch(window.location.href)
} catch (error) {
console.error(error);
setTimeout(testPage, 300);
if (attempts > 5) {
return;
}
setTimeout(testPage, delay);
// exponential backoff
attempts++;
delay = 100 * Math.pow(2, attempts);
return;
}
window.location.reload();
}
testPage();
}
setTimeout(testPage, 150);
}
});
</script>`
@@ -282,8 +298,47 @@ func UploadFile(file *multipart.FileHeader, fileName, contentType string, c fibe
return "", errors.New("unsupported file type")
}
if err != nil {
return "", err
if contentType != "image/svg+xml" {
off, err := srcFile.Seek(0, io.SeekStart)
if err != nil {
return "", fmt.Errorf("failed to seek to start of file: %v", err)
}
if off != 0 {
return "", fmt.Errorf("failed to seek to start of file: %v", err)
}
x, err := exif.Decode(srcFile)
// if there *is* exif, parse it
if err == nil {
tag, err := x.Get(exif.Orientation)
if err != nil {
return "", fmt.Errorf("failed to get orientation: %v", err)
}
if tag.Count == 1 && tag.Format() == tiff.IntVal {
orientation, err := tag.Int(0)
if err != nil {
return "", fmt.Errorf("failed to get orientation: %v", err)
}
slog.Debug("Orientation tag found", "orientation", orientation)
switch orientation {
case 3:
img = imaging.Rotate180(img)
case 6:
img = imaging.Rotate270(img)
case 8:
img = imaging.Rotate90(img)
}
}
}
img, err = CropToCenter(img, 96)
if err != nil {
return "", err
}
}
assetsDir := "public/uploads"
@@ -291,7 +346,21 @@ func UploadFile(file *multipart.FileHeader, fileName, contentType string, c fibe
iconPath := filepath.Join(assetsDir, fileName)
if contentType == "image/svg+xml" {
if err = c.SaveFile(file, iconPath); err != nil {
// replace currentColor with a text color
outFile, err := os.Create(iconPath)
if err != nil {
return "", err
}
defer outFile.Close()
svgText, err := io.ReadAll(srcFile)
if err != nil {
return "", err
}
svgText = bytes.ReplaceAll(svgText, []byte("currentColor"), []byte(`oklch(87% 0.015 286)`))
_, err = outFile.Write(svgText)
if err != nil {
return "", err
}
} else {
@@ -301,16 +370,9 @@ func UploadFile(file *multipart.FileHeader, fileName, contentType string, c fibe
}
defer outFile.Close()
// crop slightly larger than 64px to vastly increase the quality of the image, but not increase the file size
// *too* much and so that we dont have a ton of extra file data that will never be seen by the user
resizedImg, err := CropToCenter(img, 96)
if err != nil {
return "", err
}
var buf bytes.Buffer
options := &nativewebp.Options{}
if err := nativewebp.Encode(&buf, resizedImg, options); err != nil {
if err := nativewebp.Encode(&buf, img, options); err != nil {
return "", err
}
@@ -790,6 +852,14 @@ func main() {
})
}
req.Name = strings.TrimSpace(req.Name)
if len(req.Name) > 50 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Name is too long. Maximum length is 50 characters",
})
}
file, err := c.FormFile("icon")
if err != nil || file == nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
@@ -810,7 +880,7 @@ func main() {
})
}
filename := fmt.Sprintf("%d_%s.svg", time.Now().Unix(), strings.ReplaceAll(req.Name, " ", "_"))
filename := fmt.Sprintf("%d_%s.svg", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
iconPath, err := UploadFile(file, filename, contentType, c)
if err != nil {
@@ -819,8 +889,6 @@ func main() {
})
}
UploadFile(file, iconPath, contentType, c)
category, err := app.CategoryManager.CreateCategory(Category{
Name: req.Name,
Icon: iconPath,
@@ -857,6 +925,23 @@ func main() {
})
}
req.Name = strings.TrimSpace(req.Name)
if req.Description != "" {
req.Description = strings.TrimSpace(req.Description)
}
if len(req.Name) > 50 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Name is too long. Maximum length is 50 characters",
})
}
if len(req.Description) > 150 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Description is too long. Maximum length is 150 characters",
})
}
categoryID, err := strconv.ParseInt(c.Params("id"), 10, 64)
if err != nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
@@ -890,7 +975,7 @@ func main() {
})
}
filename := fmt.Sprintf("%d_%s.webp", time.Now().Unix(), strings.ReplaceAll(req.Name, " ", "_"))
filename := fmt.Sprintf("%d_%s.webp", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
iconPath, err := UploadFile(file, filename, contentType, c)
if err != nil {
@@ -900,8 +985,6 @@ func main() {
})
}
UploadFile(file, iconPath, contentType, c)
link, err := app.CategoryManager.CreateLink(app.CategoryManager.db, Link{
CategoryID: categoryID,
Name: req.Name,
@@ -922,6 +1005,245 @@ func main() {
})
})
api.Patch("/category/:id", func(c fiber.Ctx) error {
var req struct {
Name string `form:"name"`
}
if c.Params("id") == "" {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "ID is required",
})
}
id, err := strconv.ParseInt(c.Params("id"), 10, 64)
if err != nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": fmt.Sprintf("Failed to parse category ID: %v", err),
})
}
if err := c.Bind().Form(&req); err != nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Failed to parse request",
})
}
if req.Name != "" {
if len(req.Name) > 50 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Name is too long. Maximum length is 50 characters",
})
}
}
category := app.CategoryManager.GetCategory(id)
if category == nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Category not found",
})
}
tx, err := app.db.Begin()
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to start transaction",
})
}
defer tx.Rollback()
file, err := c.FormFile("icon")
if err == nil {
if file.Size > 5*1024*1024 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "File size too large. Maximum size is 5MB",
})
}
contentType := file.Header.Get("Content-Type")
if contentType != "image/svg+xml" {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Only svg files are allowed",
})
}
oldIconPath := category.Icon
filename := fmt.Sprintf("%d_%s.svg", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
iconPath, err := UploadFile(file, filename, contentType, c)
if err != nil {
slog.Error("Failed to upload file", "error", err)
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to upload file, please try again!",
})
}
_, err = tx.Exec("UPDATE categories SET icon = ? WHERE id = ?", iconPath, id)
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to update category",
})
}
err = os.Remove(filepath.Join("public/", oldIconPath))
if err != nil {
slog.Error("Failed to delete icon", "error", err)
}
}
if req.Name != "" {
_, err = tx.Exec("UPDATE categories SET name = ? WHERE id = ?", req.Name, category.ID)
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to update category",
})
}
}
err = tx.Commit()
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to commit transaction",
})
}
return c.Status(fiber.StatusOK).JSON(fiber.Map{
"message": "Category updated successfully",
})
})
api.Patch("/category/:categoryID/link/:linkID", func(c fiber.Ctx) error {
var req struct {
Name string `form:"name"`
Description string `form:"description"`
Icon string `form:"icon"`
}
if err := c.Bind().Form(&req); err != nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Failed to parse request",
})
}
if len(req.Name) > 50 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Name is too long. Maximum length is 50 characters",
})
}
if len(req.Description) > 150 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Description is too long. Maximum length is 150 characters",
})
}
linkID, err := strconv.ParseInt(c.Params("linkID"), 10, 64)
if err != nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": fmt.Sprintf("Failed to parse link ID: %v", err),
})
}
categoryID, err := strconv.ParseInt(c.Params("categoryID"), 10, 64)
if err != nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": fmt.Sprintf("Failed to parse category ID: %v", err),
})
}
if app.CategoryManager.GetCategory(categoryID) == nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Category not found",
})
}
link := app.CategoryManager.GetLink(linkID)
if link == nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Link not found",
})
}
tx, err := app.db.Begin()
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to start transaction",
})
}
defer tx.Rollback()
file, err := c.FormFile("icon")
if err == nil {
if file.Size > 5*1024*1024 {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "File size too large. Maximum size is 5MB",
})
}
contentType := file.Header.Get("Content-Type")
if !strings.HasPrefix(contentType, "image/") {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
"message": "Only image files are allowed",
})
}
oldIconPath := link.Icon
filename := fmt.Sprintf("%d_%s.webp", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
iconPath, err := UploadFile(file, filename, contentType, c)
if err != nil {
slog.Error("Failed to upload file", "error", err)
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to upload file, please try again!",
})
}
_, err = tx.Exec("UPDATE links SET icon = ? WHERE id = ?", iconPath, linkID)
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to update link",
})
}
err = os.Remove(filepath.Join("public/", oldIconPath))
if err != nil {
slog.Error("Failed to delete icon", "error", err)
}
}
if req.Name != "" {
_, err = tx.Exec("UPDATE links SET name = ? WHERE id = ?", req.Name, linkID)
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to update link",
})
}
}
if req.Description != "" {
_, err = tx.Exec("UPDATE links SET description = ? WHERE id = ?", req.Description, linkID)
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to update link",
})
}
}
err = tx.Commit()
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
"message": "Failed to commit transaction",
})
}
slog.Info("Link updated successfully", "id", linkID, "name", req.Name)
return c.Status(fiber.StatusOK).JSON(fiber.Map{
"message": "Link updated successfully",
})
})
api.Delete("/category/:categoryID/link/:linkID", func(c fiber.Ctx) error {
linkID, err := strconv.ParseInt(c.Params("linkID"), 10, 64)
if err != nil {

36
src/styles/main.css → src/styles/main.scss
View File

@@ -4,11 +4,11 @@
@theme {
--color-accent: oklch(57.93% 0.258 294.12);
--color-success: oklch(70.19% 0.158 160.44);
--color-error: oklch(63.43% 0.251 28.48);
--color-error: oklch(53% 0.251 28.48);
--color-base: oklch(11% .007 285);
--color-surface: oklch(19% 0.007 314.66);
--color-overlay: oklch(26% 0.008 314.66);
--color-surface: oklch(19% 0.007 285.66);
--color-overlay: oklch(26% 0.008 285.66);
--color-muted: oklch(63% 0.015 286);
--color-subtle: oklch(72% 0.015 286);
@@ -61,7 +61,7 @@ button {
}
input:not(.search) {
@apply px-4 py-2 rounded-md w-full bg-surface border border-highlight-sm/70 placeholder:text-highlight text-text focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden;
@apply px-4 py-2 rounded-md w-full bg-surface border border-highlight/70 placeholder:text-highlight text-text focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden;
&[type="file"] {
@apply p-0 cursor-pointer;
@@ -85,14 +85,16 @@ input:not(.search) {
transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
&:hover {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
transform: translateY(-4px);
}
&:not(.admin) {
&:hover {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
transform: translateY(-4px);
}
&:active {
box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.1);
transform: translateY(2px);
&:active {
box-shadow: 0 2px 4px -2px rgb(0 0 0 / 0.1);
transform: translateY(2px);
}
}
}
@@ -110,18 +112,24 @@ input:not(.search) {
}
}
.link-card img {
/* Div that holds the image */
.link-card div:has(img):first-child {
flex-shrink: 0;
margin-right: 0.5rem;
}
.link-card div:first-child img {
user-select: none;
border-radius: 0.375rem;
aspect-ratio: 1/1;
object-fit: cover;
}
.link-card div {
/* Div that holds the text */
.link-card div:nth-child(2) {
word-break: break-all;
}
.link-card div p {
.link-card div:nth-child(2) p {
color: var(--color-subtle);
}

17
src/templates/partials/modals/category-form.hbs Normal file
View File

@@ -0,0 +1,17 @@
<div id="category-contents" class="hidden">
<h3>Create A category</h3>
<form id="category-form" action="/api/categories" method="post"
class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
<div>
<label for="categoryName">Name</label>
<input required type="text" name="name" id="categoryName" maxlength="50" />
</div>
<div>
<label for="linkIcon">Icon</label>
<input type="file" name="icon" id="linkIcon" accept=".svg" required />
</div>
<button class="px-4 py-2 rounded-md w-full bg-accent text-white border-0" type="submit">Create
category</button>
</form>
<span id="category-message"></span>
</div>

13
src/templates/partials/modals/delete-category.hbs Normal file
View File

@@ -0,0 +1,13 @@
<div id="category-delete-contents" class="hidden text-center">
<h3>Are you sure you want to delete this category?</h3>
<p class="mb-3">You are about to delete the category <strong id="category-name"></strong>. This action cannot be
undone.
All links associated with this category will also be deleted. Are you sure you want to continue?</p>
<div class="flex justify-end flex-col gap-y-2">
<button class="px-4 py-2 rounded-md w-full bg-error text-white border-0"
onclick="confirmDeleteCategory()">Delete
category</button>
<button class="px-4 py-2 rounded-md w-full bg-overlay border border-highlight text-white"
onclick="closeModal()">Cancel</button>
</div>
</div>

12
src/templates/partials/modals/delete-link.hbs Normal file
View File

@@ -0,0 +1,12 @@
<div id="link-delete-contents" class="hidden text-center">
<h3>Are you sure you want to delete this link?</h3>
<p class="mb-3">You are about to delete the link <strong id="link-name"></strong>. This action cannot be undone. Are
you sure you
want to continue?</p>
<div class="flex justify-end flex-col gap-y-2">
<button class="px-4 py-2 rounded-md w-full bg-error text-white border-0" onclick="confirmDeleteLink()">Delete
link</button>
<button class="px-4 py-2 rounded-md w-full bg-overlay border border-highlight text-white"
onclick="closeModal()">Cancel</button>
</div>
</div>

25
src/templates/partials/modals/link-form.hbs Normal file
View File

@@ -0,0 +1,25 @@
<div id="link-contents" class="hidden">
<h3>Add A link</h3>
<form id="link-form" action="/api/links" method="post"
class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
<div>
<label for="linkName">Name</label>
<input required type="text" name="name" id="linkName" maxlength="50" />
</div>
<div>
<label for="linkDesc">Description (optional)</label>
<input type="text" name="description" id="linkDesc" maxlength="150" />
</div>
<div>
<label for="linkURL">URL</label>
<input required type="url" name="url" id="linkURL" />
</div>
<div>
<label for="linkIcon">Icon</label>
<input required type="file" name="icon" id="linkIcon" accept="image/*" />
</div>
<button class="px-4 py-2 rounded-md w-full bg-accent text-white border-0" type="submit">Add
link</button>
</form>
<span id="link-message"></span>
</div>

809
src/templates/views/admin/index.hbs
View File

@@ -18,32 +18,129 @@
<div class="w-full sm:w-4/5 p-2.5">
{{#each Categories}}
<div class="flex items-center" key="category-{{this.ID}}">
<img class="object-contain mr-2 select-none" width="32" height="32" draggable="false"
alt="{{this.Name}}" src="{{this.Icon}}" />
<h2 class="capitalize break-all">{{this.Name}}</h2>
<button onclick="deleteCategory({{this.ID}})"
class="w-fit h-fit flex p-0.5 bg-base border border-highlight rounded-md hover:filter hover:brightness-125 cursor-pointer"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="#ff1919" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
</svg></button>
<div class="shrink-0 relative mr-2 h-full flex items-center justify-center">
<img class="object-contain select-none" width="32" height="32" draggable="false" alt="{{this.Name}}"
src="{{this.Icon}}" />
<button onclick="selectIcon()"
class="absolute inset-0 bg-highlight/80 hidden rounded-md text-base items-center justify-center"
draggable="false">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12" />
</svg>
</button>
</div>
<h2 class="capitalize break-all border border-transparent">{{this.Name}}</h2>
<div class="ml-2" data-edit-actions>
<div class="flex flex-row gap-2">
<button aria-label="Edit category" onclick="editCategory({{this.ID}})"
class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
<path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
</g>
</svg>
</button>
<button aria-label="Delete category" onclick="deleteCategory({{this.ID}})"
class="text-error w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
</svg>
</button>
</div>
<div class="hidden flex-row gap-2">
<button aria-label="Confirm category edit" onclick="confirmCategoryEdit({{this.ID}})"
class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="m5 12l5 5L20 7" />
</svg>
</button>
<button aria-label="Cancel category edit" onclick="cancelCategoryEdit({{this.ID}})"
class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m15.364-6.364L5.636 18.364" />
</svg>
</button>
</div>
</div>
</div>
<div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
{{#each this.Links}}
<div key="link-{{this.ID}}" class="link-card relative">
<img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
<div>
<h3>{{this.Name}}</h3>
<p>{{this.Description}}</p>
<div key="link-{{this.ID}}" class="link-card relative admin">
<div class="relative">
<img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
<button onclick="selectIcon()"
class="absolute inset-0 bg-highlight/80 hidden rounded-md text-base items-center justify-center"
draggable="false">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12" />
</svg>
</button>
</div>
<div class="flex-grow">
<h3 class="border border-transparent">{{this.Name}}</h3>
<p class="min-h-5">{{this.Description}}</p>
</div>
<div class="absolute right-1 top-1" data-edit-actions>
<div class="flex flex-row gap-2">
<button aria-label="Edit link" onclick="editLink({{this.ID}}, {{this.CategoryID}})"
class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2">
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
<path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
</g>
</svg>
</button>
<button aria-label="Delete link" onclick="deleteLink({{this.ID}}, {{this.CategoryID}})"
class="text-error w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
</svg>
</button>
</div>
<div class="hidden flex-row gap-2">
<button aria-label="Confirm link edit"
onclick="confirmLinkEdit({{this.ID}}, {{this.CategoryID}})"
class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-success">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="m5 12l5 5L20 7" />
</svg>
</button>
<button aria-label="Cancel link edit"
onclick="cancelLinkEdit({{this.ID}}, {{this.CategoryID}})"
class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-error">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
<path fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m15.364-6.364L5.636 18.364" />
</svg>
</button>
</div>
</div>
<button onclick="deleteLink({{this.ID}}, {{this.CategoryID}})"
class="w-fit h-fit flex p-0.5 bg-base border border-highlight/70 rounded-md hover:filter hover:brightness-125 cursor-pointer absolute right-1 top-1"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
<path fill="none" stroke="#ff1919" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
</svg></button>
</div>
{{/each}}
<div onclick="openModal('link', {{this.ID}})"
@@ -71,52 +168,14 @@
</section>
</div>
<div id="modal-container"
<input type="file" id="icon-upload" accept="image/*" style="display: none;" />
<div id="modal-container" role="dialog" aria-modal="true"
class="flex modal-bg fixed top-0 left-0 bottom-0 right-0 bg-black/45 justify-center items-center">
<div class="bg-overlay rounded-xl overflow-hidden w-full p-4 modal max-w-sm">
<div id="category-contents" class="hidden">
<h3>Create A category</h3>
<form id="category-form" action="/api/categories" method="post"
class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
<div>
<label for="categoryName">Name</label>
<input required type="text" name="name" id="categoryName" />
</div>
<div>
<label for="linkIcon">Icon</label>
<input type="file" name="icon" id="linkIcon" accept=".svg" required />
</div>
<button class="px-4 py-2 rounded-md w-full bg-accent text-white border-0" type="submit">Create
category</button>
</form>
<span id="category-message"></span>
</div>
<div id="link-contents" class="hidden">
<h3>Add A link</h3>
<form id="link-form" action="/api/links" method="post"
class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
<div>
<label for="linkName">Name</label>
<input required type="text" name="name" id="linkName" />
</div>
<div>
<label for="linkDesc">Description (optional)</label>
<input type="text" name="description" id="linkDesc" />
</div>
<div>
<label for="linkURL">URL</label>
<input required type="url" name="url" id="linkURL" />
</div>
<div>
<label for="linkIcon">Icon</label>
<input required type="file" name="icon" id="linkIcon" accept="image/*" />
</div>
<button class="px-4 py-2 rounded-md w-full bg-accent text-white border-0" type="submit">Add
link</button>
</form>
<span id="link-message"></span>
</div>
{{> 'partials/modals/category-form' }}
{{> 'partials/modals/link-form' }}
{{> 'partials/modals/delete-link' }}
{{> 'partials/modals/delete-category' }}
</div>
</div>
@@ -125,9 +184,125 @@
let modalContainer = document.getElementById("modal-container");
let modal = modalContainer.querySelector("div");
let pageElement = document.getElementById("blur-target");
let iconUploader = document.getElementById("icon-upload");
let targetCategoryID = null;
let activeModal = null;
// errpr check the form and add the invalid class if it's invalid
/**
* Submits a form to the given URL
* @param {Event} event - The event that triggered the function
* @param {string} url - The URL to submit the form to
* @param {"category" | "link"} target - The target to close the modal for
* @returns {Promise<void>}
*/
async function submitRequest(event, url, target) {
event.preventDefault();
let data = new FormData(event.target);
let res = await fetch(url, {
method: "POST",
body: data
});
if (res.status === 201) {
closeModal(target);
document.getElementById(`${target}-form`).reset();
location.reload();
} else {
let json = await res.json();
document.getElementById(`${target}-message`).innerText = json.message;
}
}
/**
* Initializes the form for the given form
* @param {"category" | "link"} form - The form to initialize
* @returns {void}
*/
function addErrorListener(form) {
document.getElementById(`${form}-form`).querySelector("button").addEventListener("click", (event) => {
document.getElementById(`${form}-form`).querySelectorAll("[required]").forEach((el) => {
el.classList.add("invalid:border-[#861024]!");
});
});
}
addErrorListener("link");
document.getElementById("link-form").addEventListener("submit", async (event) => {
await submitRequest(event, `/api/category/${targetCategoryID}/link`, "link");
});
addErrorListener("category");
document.getElementById("category-form").addEventListener("submit", async (event) => {
await submitRequest(event, `/api/category`, "category");
});
// when the background is clicked, close the modal
modalContainer.addEventListener("click", (event) => {
if (event.target === modalContainer) {
closeModal();
}
});
function selectIcon() {
iconUploader.click();
}
/**
* Processes a file and returns a data URL.
* @param {File} file The file to process.
*/
async function processFile(file) {
let reader = new FileReader();
return new Promise((resolve, reject) => {
if (file.type === "image/svg+xml") {
reader.addEventListener("load", async (event) => {
let svgString = event.target.result;
console.log(svgString);
svgString = svgString.replaceAll("currentColor", "oklch(87% 0.015 286)");
console.log(svgString);
// turn svgString into a data URL
resolve("data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgString))));
})
reader.readAsText(file);
} else {
// these should be jpg, png, or webp
// make a DataURL out of it
reader.addEventListener("load", async (event) => {
resolve(event.target.result);
});
reader.readAsDataURL(file);
}
});
}
let targetedImageElement = null;
iconUploader.addEventListener("change", async (event) => {
let file = event.target.files[0];
if (file === null) {
return;
}
if (targetedImageElement === null) {
throw new Error("icon upload element was clicked, but no target image element was set");
}
console.log(file);
let dataURL = await processFile(file);
targetedImageElement.src = dataURL;
});
function openModal(modalKind, categoryID) {
activeModal = modalKind;
targetCategoryID = categoryID;
@@ -137,7 +312,10 @@
modalContainer.classList.add("is-visible");
modal.classList.add("is-visible");
document.getElementById(modalKind + "-form").reset();
if (document.getElementById(modalKind + "-form") !== null) {
document.getElementById(modalKind + "-form").reset();
}
}
function closeModal() {
@@ -151,93 +329,482 @@
activeModal = null;
}, 300)
document.getElementById(activeModal + "-form").querySelectorAll("[required]").forEach((el) => {
el.classList.remove("invalid:border-[#861024]!");
});
if (document.getElementById(activeModal + "-form") !== null) {
document.getElementById(activeModal + "-form").querySelectorAll("[required]").forEach((el) => {
el.classList.remove("invalid:border-[#861024]!");
});
}
targetCategoryID = null;
}
modalContainer.addEventListener("click", (event) => {
if (event.target === modalContainer) {
closeModal();
}
});
let currentlyEditingLink = {
ID: null,
categoryID: null,
originalText: null,
originalDescription: null,
icon: null,
};
async function editLink(linkID, categoryID) {
if (currentlyEditingLink.ID !== null) {
// cancel the edit if it's already in progress
cancelLinkEdit(currentlyEditingLink.ID, currentlyEditingCategory.categoryID);
}
let linkEl = document.querySelector(`[key=link-${linkID}]`);
let linkImg = linkEl.querySelector("div:first-child img");
let fileUploaderOverlay = linkImg.nextElementSibling;
let linkName = linkEl.querySelector("div:nth-child(2) h3");
let linkDesc = linkEl.querySelector("div:nth-child(2) p");
let editActions = linkEl.querySelector("[data-edit-actions]");
currentlyEditingLink.ID = linkID;
currentlyEditingCategory.categoryID = categoryID;
currentlyEditingLink.originalText = linkName.textContent;
currentlyEditingLink.originalDescription = linkDesc.textContent;
currentlyEditingLink.icon = linkImg.src;
console.log(currentlyEditingLink)
iconUploader.accept = "image/*";
targetedImageElement = linkImg;
editActions.querySelector("div").classList.add("hidden");
editActions.querySelector("div").classList.remove("flex");
editActions.querySelector("div:nth-child(2)").classList.remove("hidden");
editActions.querySelector("div:nth-child(2)").classList.add("flex");
fileUploaderOverlay.classList.remove("hidden");
fileUploaderOverlay.classList.add("flex");
replaceWithResizableInput(linkName);
replaceWithResizableTextarea(linkDesc);
}
async function confirmLinkEdit(linkID, categoryID) {
let linkEl = document.querySelector(`[key=link-${linkID}]`);
let linkImg = linkEl.querySelector("div:first-child img");
let fileUploaderOverlay = linkImg.nextElementSibling;
let linkNameInput = linkEl.querySelector("input");
let linkDescInput = linkEl.querySelector("textarea");
let editActions = linkEl.querySelector("[data-edit-actions]");
linkNameInput.value = linkNameInput.value.trim();
linkDescInput.value = linkDescInput.value.trim();
console.log(linkNameInput.value);
if (linkNameInput.value === "") {
return;
}
let formData = new FormData();
if (linkNameInput.value !== currentlyEditingLink.originalText) {
formData.append("name", linkNameInput.value)
}
if (linkDescInput.value !== currentlyEditingLink.originalDescription) {
formData.append("description", linkDescInput.value)
}
if (iconUploader.files.length > 0) {
formData.append("icon", iconUploader.files[0]);
}
// nothing to update
if (formData.get("name") === null && formData.get("description") === null && formData.get("icon") === null) {
return;
}
async function deleteLink(linkID, categoryID) {
let res = await fetch(`/api/category/${categoryID}/link/${linkID}`, {
method: "DELETE"
method: "PATCH",
body: formData
});
if (res.status === 200) {
let linkEl = document.querySelector(`[key="link-${linkID}"]`);
linkEl.remove();
iconUploader.value = "";
currentlyEditingLink.icon = null;
cancelLinkEdit(currentlyEditingLink.ID, currentlyEditingCategory.categoryID, linkNameInput.value || currentlyEditingLink.originalText, linkDescInput.value || currentlyEditingLink.originalDescription);
currentlyEditingLink.originalText = null;
currentlyEditingLink.originalDescription = null;
currentlyEditingLink.ID = null;
} else {
console.error("Failed to edit category");
}
}
async function deleteCategory(categoryID) {
let res = await fetch(`/api/category/${categoryID}`, {
async function cancelLinkEdit(linkID, categoryID, text = undefined, description = undefined) {
let linkEl = document.querySelector(`[key=link-${linkID}]`);
let linkInput = linkEl.querySelector("input");
let linkTextarea = linkEl.querySelector("textarea");
let linkImg = linkEl.querySelector("div:first-child img");
let fileUploaderOverlay = linkImg.nextElementSibling;
let editActions = linkEl.querySelector("[data-edit-actions]");
console.log(linkInput);
console.log(editActions);
if (currentlyEditingLink.icon !== null) {
linkImg.src = currentlyEditingLink.icon;
}
editActions.querySelector("div").classList.remove("hidden");
editActions.querySelector("div").classList.add("flex");
editActions.querySelector("div:nth-child(2)").classList.add("hidden");
editActions.querySelector("div:nth-child(2)").classList.remove("flex");
fileUploaderOverlay.classList.add("hidden");
fileUploaderOverlay.classList.remove("flex");
if (text === undefined) {
text = currentlyEditingLink.originalText;
}
if (description === undefined) {
description = currentlyEditingLink.originalDescription;
}
restoreElementFromInput(linkInput, text);
restoreElementFromInput(linkTextarea, description);
currentlyEditingLink.ID = null;
targetedImageElement = null;
}
let currentlyDeletingLink = {
ID: null,
categoryID: null,
};
async function deleteLink(linkID, categoryID) {
currentlyDeletingLink.ID = linkID;
currentlyDeletingLink.categoryID = categoryID;
let linkNameSpan = document.getElementById("link-name");
linkNameSpan.textContent = document.querySelector(`[key=link-${linkID}] h3`).textContent;
openModal("link-delete");
}
async function confirmDeleteLink() {
let res = await fetch(`/api/category/${currentlyDeletingLink.categoryID}/link/${currentlyDeletingLink.ID}`, {
method: "DELETE"
});
if (res.status === 200) {
let categoryEl = document.querySelector(`[key="category-${categoryID}"]`);
let linkEl = document.querySelector(`[key="link-${currentlyDeletingLink.ID}"]`);
linkEl.remove();
closeModal();
}
}
let currentlyEditingCategory = {
ID: null,
originalText: null,
icon: null,
};
async function editCategory(categoryID) {
if (currentlyEditingCategory.ID !== null) {
// cancel the edit if it's already in progress
cancelCategoryEdit(currentlyEditingCategory.ID);
}
currentlyEditingCategory.ID = categoryID;
let categoryEl = document.querySelector(`[key=category-${categoryID}]`);
let categoryName = categoryEl.querySelector("h2");
let categoryIcon = categoryEl.querySelector("div img");
let fileUploaderOverlay = categoryIcon.nextElementSibling;
let editActions = categoryEl.querySelector("[data-edit-actions]");
currentlyEditingCategory.originalText = categoryName.textContent;
currentlyEditingCategory.icon = categoryIcon.src;
iconUploader.accept = "image/svg+xml";
targetedImageElement = categoryIcon;
editActions.querySelector("div").classList.add("hidden");
editActions.querySelector("div").classList.remove("flex");
editActions.querySelector("div:nth-child(2)").classList.remove("hidden");
editActions.querySelector("div:nth-child(2)").classList.add("flex");
fileUploaderOverlay.classList.remove("hidden");
fileUploaderOverlay.classList.add("flex");
replaceWithResizableInput(categoryName);
}
async function confirmCategoryEdit(categoryID) {
let categoryEl = document.querySelector(`[key=category-${categoryID}]`);
let categoryInput = categoryEl.querySelector("input");
let categoryIcon = categoryEl.querySelector("div img");
let fileUploaderOverlay = categoryIcon.nextElementSibling;
let editActions = categoryEl.querySelector("[data-edit-actions]");
if (categoryInput.value === "") {
return;
}
categoryInput.value = categoryInput.value.trim();
let formData = new FormData();
if (categoryInput.value !== currentlyEditingCategory.originalText) {
formData.append("name", categoryInput.value)
}
if (iconUploader.files.length > 0) {
formData.append("icon", iconUploader.files[0]);
}
// nothing to update
if (formData.get("name") === null && formData.get("icon") === null) {
return;
}
let res = await fetch(`/api/category/${categoryID}`, {
method: "PATCH",
body: formData
});
if (res.status === 200) {
iconUploader.value = "";
cancelCategoryEdit(categoryID, categoryInput.value || currentlyEditingCategory.originalText);
currentlyEditingCategory.icon = null;
currentlyEditingCategory.originalText = null;
currentlyEditingCategory.ID = null;
} else {
console.error("Failed to edit category");
}
}
async function cancelCategoryEdit(categoryID, text = undefined) {
let categoryEl = document.querySelector(`[key=category-${categoryID}]`);
let categoryInput = categoryEl.querySelector("input");
let categoryIcon = categoryEl.querySelector("div img");
let fileUploaderOverlay = categoryIcon.nextElementSibling;
let editActions = categoryEl.querySelector("[data-edit-actions]");
console.log(categoryInput);
console.log(editActions);
if (currentlyEditingCategory.icon !== null) {
categoryIcon.src = currentlyEditingCategory.icon;
}
editActions.querySelector("div").classList.remove("hidden");
editActions.querySelector("div").classList.add("flex");
editActions.querySelector("div:nth-child(2)").classList.add("hidden");
editActions.querySelector("div:nth-child(2)").classList.remove("flex");
fileUploaderOverlay.classList.remove("flex");
fileUploaderOverlay.classList.add("hidden");
restoreElementFromInput(categoryInput, text || currentlyEditingCategory.originalText);
currentlyEditingCategory.ID = null;
targetedImageElement = null;
}
let currentlyDeletingCategory = {
ID: null,
};
async function deleteCategory(categoryID) {
currentlyDeletingCategory.ID = categoryID;
let categoryNameSpan = document.getElementById("category-name");
categoryNameSpan.textContent = document.querySelector(`[key=category-${categoryID}] h2`).textContent;
openModal("category-delete");
}
async function confirmDeleteCategory() {
let res = await fetch(`/api/category/${currentlyDeletingCategory.ID}`, {
method: "DELETE"
});
if (res.status === 200) {
let categoryEl = document.querySelector(`[key="category-${currentlyDeletingCategory.ID}"]`);
// get the next element and remove it (its the link grid)
let nextEl = categoryEl.nextElementSibling;
nextEl.remove();
categoryEl.remove();
closeModal();
}
}
document.getElementById("link-form").querySelector("button").addEventListener("click", (event) => {
document.getElementById("link-form").querySelectorAll("[required]").forEach((el) => {
el.classList.add("invalid:border-[#861024]!");
});
});
/**
* Replaces an H2 element with a resizable input field that matches its initial text and styling.
* @param {HTMLElement} targetEl The element to replace.
*/
function replaceWithResizableInput(targetEl) {
const originalText = targetEl.textContent;
const computedStyle = window.getComputedStyle(targetEl);
document.getElementById("link-form").addEventListener("submit", async (event) => {
event.preventDefault();
let data = new FormData(event.target);
const inputElement = document.createElement('input');
inputElement.type = 'text';
inputElement.value = originalText;
inputElement.className = 'resizable-input';
inputElement.placeholder = 'Enter title...';
inputElement.dataset.originalElementType = targetEl.tagName;
inputElement.dataset.originalClassName = targetEl.className;
let res = await fetch(`/api/category/${targetCategoryID}/link`, {
method: "POST",
body: data
const stylesToCopy = [
'font-family', 'font-size', 'font-weight', 'font-style', 'color',
'line-height', 'letter-spacing', 'text-transform', 'text-align',
'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
'border-radius', 'box-sizing',
'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'height'
];
stylesToCopy.forEach(prop => {
inputElement.style[prop] = computedStyle[prop];
});
if (res.status === 201) {
closeModal('link');
document.getElementById("link-form").reset();
location.reload();
} else {
let json = await res.json();
document.getElementById("category-message").innerText = json.message;
inputElement.style.display = 'inline-block';
inputElement.style.backgroundColor = 'var(--color-base)';
inputElement.style.border = '1px solid var(--color-highlight-sm)';
inputElement.style.borderRadius = '0.375rem';
inputElement.maxLength = 50;
/**
* Function to measure the text width accurately and apply it to the input.
* @param {HTMLInputElement} inputEl The input element to resize.
*/
const resizeInput = (inputEl) => {
const tempSpan = document.createElement('span');
const currentInputComputedStyle = window.getComputedStyle(inputEl);
const textStylesToCopy = [
'font-family', 'font-size', 'font-weight', 'font-style', 'letter-spacing',
'text-transform', 'line-height'
];
textStylesToCopy.forEach(prop => {
tempSpan.style[prop] = currentInputComputedStyle[prop];
});
tempSpan.style.position = 'absolute';
tempSpan.style.visibility = 'hidden';
tempSpan.style.whiteSpace = 'nowrap';
tempSpan.textContent = inputEl.value === '' ? inputEl.placeholder || 'W' : inputEl.value;
document.body.appendChild(tempSpan);
let measuredTextWidth = tempSpan.offsetWidth;
document.body.removeChild(tempSpan);
// Add a small buffer for the caret and a bit of extra space
const caretBuffer = 10;
let finalWidth = measuredTextWidth + caretBuffer;
const minWidth = 100;
finalWidth = Math.max(finalWidth, minWidth);
if (currentInputComputedStyle.boxSizing === 'border-box') {
const hPadding = parseFloat(currentInputComputedStyle.paddingLeft) + parseFloat(currentInputComputedStyle.paddingRight);
const hBorder = parseFloat(currentInputComputedStyle.borderLeftWidth) + parseFloat(currentInputComputedStyle.borderRightWidth);
inputEl.style.width = (finalWidth + hPadding + hBorder) + 'px';
} else {
inputEl.style.width = finalWidth + 'px';
}
};
setTimeout(() => resizeInput(inputElement), 0);
inputElement.addEventListener('input', () => resizeInput(inputElement));
targetEl.parentNode.replaceChild(inputElement, targetEl);
inputElement.focus();
}
function replaceWithResizableTextarea(targetEl) {
const originalText = targetEl.textContent;
const computedStyle = window.getComputedStyle(targetEl);
const inputElement = document.createElement('textarea');
inputElement.value = originalText;
inputElement.className = 'resizable-input';
inputElement.placeholder = 'Enter title...';
inputElement.dataset.originalElementType = targetEl.tagName;
inputElement.dataset.originalClassName = targetEl.className;
const stylesToCopy = [
'font-family', 'font-size', 'font-weight', 'font-style', 'color',
'line-height', 'letter-spacing', 'text-transform', 'text-align',
'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
'border-radius', 'box-sizing',
'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'height'
];
stylesToCopy.forEach(prop => {
inputElement.style[prop] = computedStyle[prop];
});
inputElement.style.backgroundColor = 'var(--color-base)';
inputElement.style.border = '1px solid var(--color-highlight-sm)';
inputElement.style.borderRadius = '0.375rem';
inputElement.style.resize = 'none';
inputElement.style.overflow = 'hidden';
inputElement.style.width = '100%';
inputElement.style.outline = 'none';
inputElement.maxLength = 150;
function resize() {
inputElement.style.height = "0px";
inputElement.style.height = inputElement.scrollHeight + "px";
}
});
document.getElementById("category-form").querySelector("button").addEventListener("click", (event) => {
document.getElementById("category-form").querySelectorAll("[required]").forEach((el) => {
el.classList.add("invalid:border-[#861024]!");
});
});
setTimeout(() => resize(), 0);
inputElement.addEventListener('input', () => resize());
targetEl.parentNode.replaceChild(inputElement, targetEl);
document.getElementById("category-form").addEventListener("submit", async (event) => {
event.preventDefault();
let data = new FormData(event.target);
inputElement.focus();
}
let res = await fetch(`/api/category`, {
method: "POST",
body: data
function restoreElementFromInput(inputEl, originalText) {
const computedStyle = window.getComputedStyle(inputEl);
let elementType = inputEl.dataset.originalElementType;
const newElement = document.createElement(elementType);
newElement.textContent = originalText;
newElement.className = inputEl.dataset.originalClassName;
newElement.style.border = '1px solid #0000';
const stylesToCopy = [
'font-family', 'font-size', 'font-weight', 'font-style', 'color',
'line-height', 'letter-spacing', 'text-transform', 'text-align',
'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'box-sizing',
'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'height'
];
stylesToCopy.forEach(prop => {
newElement.style[prop] = computedStyle[prop];
});
if (res.status === 201) {
closeModal('category');
document.getElementById("category-form").reset();
location.reload();
} else {
let json = await res.json();
document.getElementById("link-message").innerText = json.message;
}
});
inputEl.parentNode.replaceChild(newElement, inputEl);
}
</script>
<style>

6
src/templates/views/index.hbs
View File

@@ -83,10 +83,12 @@
<div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
{{#each this.Links}} <a href="{{this.URL}}" class="link-card" draggable="false" target="_blank"
rel="noopener noreferrer">
<img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
<div>
<img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
</div>
<div>
<h3>{{this.Name}}</h3>
<p>{{this.Description}}</p>
<p class="min-h-5">{{this.Description}}</p>
</div>
</a>
{{else}}