Merge branch 'tabler-admin'

config/settings.json

@@ -1 +1 @@
-{"siteTitle":"Blog-Doc","siteDescription":"The simplest Node.js CMS and SSG !","siteURL":"https://blocdoc-1-v3476171.deta.app/","featuredImage":"/images/black-and-white-checked-photo.webp","archiveImage":"/images/assorted-folders-photo.avif","tagsImage":"/images/pile-of-assorted-color-papers-photo.avif","tagImage":"/images/assorted-color-sticky-notes-photo.avif","searchImage":"/images/brown-and-silver-telescope-near-water-photo.avif","postsPerPage":"3","postPreviewFallbackImage":"/images/white-camera-on-black-background.webp","rssSiteLanguage":"en-US","rssCopyright":"Copyright (c) 2022 - Present, LebCit under the MIT License","searchFeature":true,"addIdsToHeadings":true,"menuLinks":{"posts":"Archive","tags":"Tags","search":"Search","pages/doc":"Documentation","pages/license":"License","https://github.com/LebCit/blog-doc-space":"GitHub Repo","admin":"Admin ⚡"},"footerCopyright":"App built with ❤️ by <a href='https://lebcit.github.io/'>LebCit</a>","adminLinks":{"admin":"Admin ⚡","admin-pages":"📃 Pages","admin-posts":"📝 Posts","admin-create":"➕ New","admin-gallery":"🖼️ Gallery","admin-config":"⚙️ Settings"}}
+{"siteTitle":"Blog-Doc","siteDescription":"The simplest Node.js CMS and SSG !","siteURL":"https://blocdoc-1-v3476171.deta.app/","rssSiteLanguage":"en-US","rssCopyright":"Copyright (c) 2022 - Present, LebCit under the MIT License","featuredImage":"/images/black-and-white-checked-photo.webp","archiveImage":"/images/assorted-folders-photo.avif","tagsImage":"/images/pile-of-assorted-color-papers-photo.avif","tagImage":"/images/assorted-color-sticky-notes-photo.avif","searchImage":"/images/brown-and-silver-telescope-near-water-photo.avif","footerCopyright":"App built with ❤️ by <a href='https://lebcit.github.io/'>LebCit</a>","postsPerPage":3,"postPreviewFallbackImage":"/images/white-camera-on-black-background.webp","searchFeature":true,"addIdsToHeadings":true,"menuLinks":{"posts":"Archive","tags":"Tags","search":"Search","pages/doc":"Documentation","pages/license":"License","https://github.com/LebCit/blog-doc-space":"GitHub Repo","admin":"Admin ⚡"}}

public/admin/js/admin.js

@@ -1,11 +1,13 @@
 if (window.location.pathname === "/admin-create") {
 	await import("./adminCreate.js")
-} else if (window.location.pathname === "/admin-config") {
-	await import("./adminConfig.js")
+} else if (window.location.pathname === "/admin-config-site") {
+	await import("./adminConfigSite.js")
+} else if (window.location.pathname === "/admin-config-menu") {
+	await import("./adminConfigMenu.js")
 } else if (window.location.pathname.startsWith("/admin-pages")) {
 	await import("./pagesTable.js")
 } else if (window.location.pathname.startsWith("/admin-posts")) {
 	await import("./postsTable.js")
 } else {
 	await import("./adminUpdate.js")
-}
+}

public/admin/js/adminConfig.js → public/admin/js/adminConfigMenu.js

@@ -1,9 +1,9 @@
 const menuLinks = document.getElementById("menuLinks")
 const menuLinksObject = JSON.parse(menuLinks.textContent)
-delete menuLinksObject.admin
+delete menuLinksObject.admin // Remove admin link `from menu configuration`
 menuLinks.remove()
 
-const container = document.getElementById("container")
+const container = document.getElementById("menu-links-accordion-container")
 const template = document.getElementById("template")
 
 // Remove a clone when it's removeLinkButton is clicked
@@ -37,6 +37,11 @@ for (const link in menuLinksObject) {
 		clone.id = `menuLink_${count}`
 		// Add a data-id to each clone
 		clone.dataset.id = `${count}`
+		// Modify data-bs-target of each accordion button
+		let accordionButton = clone.querySelector("button")
+		accordionButton.dataset.bsTarget = `${accordionButton.dataset.bsTarget}_${count}`
+		// Add link title before the end of each accordion button
+		accordionButton.insertAdjacentHTML("beforeend", `<span class="ms-2">${menuLinksObject[link]}</span>`)
 
 		// Select each element in the clone that has an id
 		let cloneElWithId = clone.querySelectorAll("[id]")
@@ -72,9 +77,9 @@ for (const link in menuLinksObject) {
 	}
 }
 
-// Add a new clone at the end of the container when the add-link button is clicked
-const addLinkButton = document.getElementById("add-link")
-addLinkButton.addEventListener("click", () => {
+// Add a new clone at the end of the container when the add-new-menu-item button is clicked
+const addNewMenuItem = document.getElementById("add-new-menu-item")
+addNewMenuItem.addEventListener("click", () => {
 	// Get the number of clones
 	let clonesCount = container.childElementCount + 1
 	// Get all remove link buttons
@@ -104,6 +109,11 @@ addLinkButton.addEventListener("click", () => {
 	clone.id = `menu-link_${highestIdNumber()}`
 	// Add a data-id to each clone
 	clone.dataset.id = `${highestIdNumber()}`
+	// Modify data-bs-target of each accordion button
+	let accordionButton = clone.querySelector("button")
+	accordionButton.dataset.bsTarget = `${accordionButton.dataset.bsTarget}_${highestIdNumber()}`
+	// Add `New Menu Item` before the end of each new accordion button
+	accordionButton.insertAdjacentHTML("beforeend", `<span class="ms-2">New Menu Item</span>`)
 
 	// Select each element in the clone that has an id
 	let cloneElWithId = clone.querySelectorAll("[id]")
@@ -133,12 +143,12 @@ addLinkButton.addEventListener("click", () => {
 	removeClone()
 })
 
-const configForm = document.getElementById("config-form")
-const required = configForm.querySelectorAll("*[required]")
-const siteURL = configForm.querySelector("#site-url")
 const submitConfigButton = document.getElementById("submit-config-button")
 
 submitConfigButton.addEventListener("click", () => {
+	const menuConfigForm = document.getElementById("menu-config-form")
+	const required = menuConfigForm.querySelectorAll("*[required]")
+
 	let arr = []
 	required.forEach((el) => {
 		arr.push(el.value)
@@ -147,25 +157,16 @@ submitConfigButton.addEventListener("click", () => {
 	if (arr.includes("")) {
 		required.forEach((el) => {
 			if (el.validity.valueMissing) {
-				el.previousElementSibling.style.display = "block"
+				el.nextElementSibling.style.display = "block"
 			}
 			el.addEventListener("input", () => {
 				if (el.validity.valueMissing) {
-					el.previousElementSibling.style.display = "block"
+					el.nextElementSibling.style.display = "block"
 				} else {
-					el.previousElementSibling.style.display = "none"
+					el.nextElementSibling.style.display = "none"
 				}
 			})
 		})
-	} else if (!siteURL.value.startsWith("https")) {
-		siteURL.nextElementSibling.style.display = "block"
-		siteURL.addEventListener("input", (e) => {
-			if (!e.target.value.startsWith("https")) {
-				siteURL.nextElementSibling.style.display = "block"
-			} else {
-				siteURL.nextElementSibling.style.display = "none"
-			}
-		})
 	} else {
 		Swal.fire({
 			title: "Modify The Configuration ?!",
@@ -177,7 +178,7 @@ submitConfigButton.addEventListener("click", () => {
 				const b = Swal.getConfirmButton()
 				b.type = "button"
 				b.addEventListener("click", () => {
-					configForm.submit()
+					menuConfigForm.submit()
 				})
 			},
 		})
@@ -186,7 +187,7 @@ submitConfigButton.addEventListener("click", () => {
 
 Sortable.create(container, {
 	animation: 150,
-	ghostClass: "blue-background-class",
+	ghostClass: "bg-primary-subtle",
 	store: {
 		/**
 		 * Save the order of elements. Called onEnd (when the item is dropped).

public/admin/js/adminConfigSite.js

@@ -0,0 +1,60 @@
+const siteConfigForm = document.getElementById("site-config-form")
+const required = siteConfigForm.querySelectorAll("*[required]")
+const siteURL = siteConfigForm.querySelector("#site-url")
+const postsPerPage = siteConfigForm.querySelector("#posts-per-page")
+const submitConfigButton = document.getElementById("submit-config-button")
+
+submitConfigButton.addEventListener("click", () => {
+	let arr = []
+	required.forEach((el) => {
+		arr.push(el.value)
+	})
+
+	if (arr.includes("")) {
+		required.forEach((el) => {
+			if (el.validity.valueMissing) {
+				el.nextElementSibling.style.display = "block"
+			}
+			el.addEventListener("input", () => {
+				if (el.validity.valueMissing) {
+					el.nextElementSibling.style.display = "block"
+				} else {
+					el.nextElementSibling.style.display = "none"
+				}
+			})
+		})
+	} else if (!siteURL.value.startsWith("https")) {
+		siteURL.previousElementSibling.style.display = "block"
+		siteURL.addEventListener("input", (e) => {
+			if (!e.target.value.startsWith("https")) {
+				siteURL.previousElementSibling.style.display = "block"
+			} else {
+				siteURL.previousElementSibling.style.display = "none"
+			}
+		})
+	} else if (postsPerPage.valueAsNumber < 1 || postsPerPage.valueAsNumber > 10) {
+		postsPerPage.previousElementSibling.style.display = "block"
+		postsPerPage.addEventListener("input", (e) => {
+			if (e.target.valueAsNumber < 1 || e.target.valueAsNumber > 10) {
+				postsPerPage.previousElementSibling.style.display = "block"
+			} else {
+				postsPerPage.previousElementSibling.style.display = "none"
+			}
+		})
+	} else {
+		Swal.fire({
+			title: "Modify The Configuration ?!",
+			html: `By clicking on <b>Modify</b>,<br>the <b>Configuration</b> will be modified !<br>Double check the footer copyright<br>if you have used HTML in it,<br>otherwise your app will break !`,
+			icon: "warning",
+			showCancelButton: true,
+			confirmButtonText: "Modify",
+			didOpen: () => {
+				const b = Swal.getConfirmButton()
+				b.type = "button"
+				b.addEventListener("click", () => {
+					siteConfigForm.submit()
+				})
+			},
+		})
+	}
+})

public/admin/js/adminCreate.js

@@ -16,28 +16,28 @@ const fileForm = document.getElementById("file-form")
 const submitButton = document.getElementById("submit-button")
 
 fileTypeSelect.selectedIndex = 0
-submitButton.classList.add("pure-button-disabled")
+submitButton.setAttribute("disabled", "")
 
 fileTypeSelect.addEventListener("change", (e) => {
 	const fileTypeSelectValue = e.target.value
 
 	editor.setMarkdown("")
 
 	if (fileTypeSelectValue) {
-		submitButton.classList.remove("pure-button-disabled")
+		submitButton.removeAttribute("disabled")
 	}
 
 	if (fileTypeSelectValue === "page") {
 		// SHOW PAGE FRONT MATTER
-		pageFrontMatterDiv.classList.remove("hidden")
+		pageFrontMatterDiv.classList.remove("d-none")
 		const pageFrontMatterDivChildren = pageFrontMatterDiv.children
 		for (let index = 0; index < 2; index++) {
 			const input = pageFrontMatterDivChildren[index].lastElementChild
 			input.setAttribute("required", "")
 		}
 
 		// HIDE POST FRONT MATTER
-		postFrontMatterDiv.classList.add("hidden")
+		postFrontMatterDiv.classList.add("d-none")
 		const postFrontMatterDivChildren = postFrontMatterDiv.children
 		for (let index = 0; index < 2; index++) {
 			const input = postFrontMatterDivChildren[index].lastElementChild
@@ -113,15 +113,15 @@ Finally, click the submit button to create your new page 😉`)
 		})
 	} else if (fileTypeSelectValue === "post") {
 		// HIDE THE PAGE FRONT MATTER
-		pageFrontMatterDiv.classList.add("hidden")
+		pageFrontMatterDiv.classList.add("d-none")
 		const pageFrontMatterDivChildren = pageFrontMatterDiv.children
 		for (let index = 0; index < 2; index++) {
 			const input = pageFrontMatterDivChildren[index].lastElementChild
 			input.removeAttribute("required")
 		}
 
 		// SHOW THE POST FRONT MATTER
-		postFrontMatterDiv.classList.remove("hidden")
+		postFrontMatterDiv.classList.remove("d-none")
 		const postFrontMatterDivChildren = postFrontMatterDiv.children
 		for (let index = 0; index < 2; index++) {
 			const input = postFrontMatterDivChildren[index].lastElementChild
@@ -196,18 +196,18 @@ Finally, click the submit button to create your new page 😉`)
 			}
 		})
 	} else {
-		submitButton.classList.add("pure-button-disabled")
+		submitButton.setAttribute("disabled", "")
 
 		// HIDE THE PAGE FRONT MATTER
-		pageFrontMatterDiv.classList.add("hidden")
+		pageFrontMatterDiv.classList.add("d-none")
 		const pageFrontMatterDivChildren = pageFrontMatterDiv.children
 		for (let index = 0; index < 2; index++) {
 			const input = pageFrontMatterDivChildren[index].lastElementChild
 			input.removeAttribute("required")
 		}
 
 		// HIDE POST FRONT MATTER
-		postFrontMatterDiv.classList.add("hidden")
+		postFrontMatterDiv.classList.add("d-none")
 		const postFrontMatterDivChildren = postFrontMatterDiv.children
 		for (let index = 0; index < 2; index++) {
 			const input = postFrontMatterDivChildren[index].lastElementChild

public/admin/js/pagesTable.js

@@ -29,7 +29,7 @@ const table = new Tabulator("#admin-table", {
 		{ title: "Description", field: "1.data.description" },
 		{
 			formatter: function () {
-				return "<button class='pure-button delete-button'>&#10008; DELETE !</button>"
+				return "<button type='button' class='btn btn-danger'>&#10008; DELETE !</button>"
 			},
 			cellClick: function (e, cell) {
 				const postData = cell.getRow().getData()
@@ -44,7 +44,7 @@ const table = new Tabulator("#admin-table", {
 					this is IRREVERSIBLE !
 					<br />
 					This file will be FOREVER LOST if you proceed !
-					<form class="hidden" id="delete-form" action="/delete/${postData[0].replace(".md", "")}" method="post">
+					<form class="d-none" id="delete-form" action="/delete/${postData[0].replace(".md", "")}" method="post">
 					<input type="text" name="filePath" id="file-path" value="${filePath}" />
 					</form>`,
 					icon: "warning",

public/admin/js/postsTable.js

@@ -46,7 +46,7 @@ const table = new Tabulator("#admin-table", {
 		},
 		{
 			formatter: function () {
-				return "<button class='pure-button delete-button'>&#10008; DELETE !</button>"
+				return "<button type='button' class='btn btn-danger'>&#10008; DELETE !</button>"
 			},
 			cellClick: function (e, cell) {
 				const postData = cell.getRow().getData()
@@ -61,7 +61,7 @@ const table = new Tabulator("#admin-table", {
 					this is IRREVERSIBLE !
 					<br />
 					This file will be FOREVER LOST if you proceed !
-					<form class="hidden" id="delete-form" action="/delete/${postData[0].replace(".md", "")}" method="post">
+					<form class="d-none" id="delete-form" action="/delete/${postData[0].replace(".md", "")}" method="post">
 					<input type="text" name="filePath" id="file-path" value="${filePath}" />
 					</form>`,
 					icon: "warning",