chore: frontend formatting

.prettierignore

@@ -0,0 +1,16 @@
+# Ignore some files we don't want to format
+*.html
+*.json
+*.md
+*.yml
+*.yaml
+
+# Ignore build artifacts
+internal/view/assets/css/
+
+# Ignore bundled dependencies
+internal/view/assets/js/dayjs.min.js
+internal/view/assets/js/url.js
+internal/view/assets/js/url.min.js
+internal/view/assets/js/vue.js
+internal/view/assets/js/vue.min.js

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "useTabs": true
+}

docs/Contribute.md

@@ -37,7 +37,7 @@ make swagger
 
 The styles that are bundled with Shiori are stored under `internal/view/assets/css/style.css` and `internal/view/assets/css/archive.css` and created from the less files under `internal/views/assets/less`.
 
-If you want to make frontend changes you need to do that under the less files and then compile them to css. In order to do that, you need to have installed [bun](https://bun.sh) (preferred) or [lessc](http://lesscss.org/usage/#command-line-usage)/[clean-css-cli](https://github.com/clean-css/clean-css-cli).
+If you want to make frontend changes you need to do that under the less files and then compile them to css. In order to do that, you need to have installed [bun](https://bun.sh).
 
 Then, run the following command:
 

internal/view/assets/js/component/bookmark.js

@@ -62,9 +62,9 @@ export default {
 		tags: {
 			type: Array,
 			default() {
-				return []
-			}
-		}
+				return [];
+			},
+		},
 	},
 	computed: {
 		mainURL() {
@@ -79,34 +79,31 @@ export default {
 		ebookURL() {
 			if (this.hasEbook) {
 				return new URL(`bookmark/${this.id}/ebook`, document.baseURI);
-			} else  {
-                return null;
-            }
+			} else {
+				return null;
+			}
 		},
 		hostnameURL() {
 			var url = new URL(this.url);
 			return url.hostname.replace(/^www\./, "");
 		},
 		thumbnailVisible() {
-			return this.imageURL !== "" &&
-				!this.HideThumbnail;
+			return this.imageURL !== "" && !this.HideThumbnail;
 		},
 		excerptVisible() {
-			return this.excerpt !== "" &&
-				!this.thumbnailVisible &&
-				!this.HideExcerpt;
+			return this.excerpt !== "" && !this.thumbnailVisible && !this.HideExcerpt;
 		},
 		thumbnailStyleURL() {
 			return {
-				backgroundImage: `url("${this.imageURL}")`
-			}
+				backgroundImage: `url("${this.imageURL}")`,
+			};
 		},
 		eventItem() {
 			return {
 				id: this.id,
 				index: this.index,
-			}
-		}
+			};
+		},
 	},
 	methods: {
 		tagClicked(name, event) {
@@ -125,12 +122,12 @@ export default {
 			this.$emit("update", this.eventItem);
 		},
 		downloadebook() {
-            const id = this.id;
-            const ebook_url = new URL(`bookmark/${id}/ebook`, document.baseURI);
-            const downloadLink = document.createElement("a");
-            downloadLink.href = ebook_url.toString();
-            downloadLink.download = `${this.title}.epub`;
-            downloadLink.click();
+			const id = this.id;
+			const ebook_url = new URL(`bookmark/${id}/ebook`, document.baseURI);
+			const downloadLink = document.createElement("a");
+			downloadLink.href = ebook_url.toString();
+			downloadLink.download = `${this.title}.epub`;
+			downloadLink.click();
 		},
-	}
-}
+	},
+};

internal/view/assets/js/component/dialog.js

@@ -66,96 +66,107 @@ export default {
 		visible: Boolean,
 		content: {
 			type: String,
-			default: ''
+			default: "",
 		},
 		fields: {
 			type: Array,
 			default() {
-				return []
-			}
+				return [];
+			},
 		},
 		showLabel: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		mainText: {
 			type: String,
-			default: 'OK'
+			default: "OK",
 		},
 		secondText: String,
 		mainClick: {
 			type: Function,
-			default() { this.visible = false; }
+			default() {
+				this.visible = false;
+			},
 		},
 		secondClick: {
 			type: Function,
-			default() { this.visible = false; }
+			default() {
+				this.visible = false;
+			},
 		},
 		escPressed: {
 			type: Function,
-			default() { this.visible = false; }
-		}
+			default() {
+				this.visible = false;
+			},
+		},
 	},
 	data() {
 		return {
-			formFields: []
+			formFields: [],
 		};
 	},
 	computed: {
 		btnTabIndex() {
 			return this.fields.length + 1;
-		}
+		},
 	},
 	watch: {
 		fields: {
 			immediate: true,
 			handler() {
-				this.formFields = this.fields.map(field => {
-					if (typeof field === 'string') return {
-						name: field,
-						label: field,
-						value: '',
-						type: 'text',
-						dictionary: [],
-						separator: ' ',
-						suggestion: undefined
-					}
-
-					if (typeof field === 'object') return {
-						name: field.name || '',
-						label: field.label || '',
-						value: field.value || '',
-						type: field.type || 'text',
-						dictionary: field.dictionary instanceof Array ? field.dictionary : [],
-						separator: field.separator || ' ',
-						suggestion: undefined
-					}
+				this.formFields = this.fields.map((field) => {
+					if (typeof field === "string")
+						return {
+							name: field,
+							label: field,
+							value: "",
+							type: "text",
+							dictionary: [],
+							separator: " ",
+							suggestion: undefined,
+						};
+
+					if (typeof field === "object")
+						return {
+							name: field.name || "",
+							label: field.label || "",
+							value: field.value || "",
+							type: field.type || "text",
+							dictionary:
+								field.dictionary instanceof Array ? field.dictionary : [],
+							separator: field.separator || " ",
+							suggestion: undefined,
+						};
 				});
-			}
+			},
 		},
-		'fields.length'() {
+		"fields.length"() {
 			this.focus();
 		},
 		visible: {
 			immediate: true,
-			handler() { this.focus() }
-		}
+			handler() {
+				this.focus();
+			},
+		},
 	},
 	methods: {
 		fieldType(f) {
-			var type = f.type || 'text';
-			if (type !== 'text' && type !== 'password') return 'text';
+			var type = f.type || "text";
+			if (type !== "text" && type !== "password") return "text";
 			else return type;
 		},
 		handleMainClick() {
 			var data = {};
-			this.formFields.forEach(field => {
+			this.formFields.forEach((field) => {
 				var value = field.value;
-				if (field.type === 'number') value = parseInt(value, 10) || 0;
-				else if (field.type === 'float') value = parseFloat(value) || 0.0;
-				else if (field.type === 'check') value = Boolean(value);
+				if (field.type === "number") value = parseInt(value, 10) || 0;
+				else if (field.type === "float") value = parseFloat(value) || 0.0;
+				else if (field.type === "check") value = Boolean(value);
 				data[field.name] = value;
-			})
+			});
 
 			this.mainClick(data);
 		},
@@ -178,9 +189,9 @@ export default {
 				lastWord = words[words.length - 1].toLowerCase(),
 				suggestion;
 
-			if (lastWord !== '') {
-				suggestion = dictionary.find(word => {
-					return word.toLowerCase().startsWith(lastWord)
+			if (lastWord !== "") {
+				suggestion = dictionary.find((word) => {
+					return word.toLowerCase().startsWith(lastWord);
 				});
 			}
 
@@ -192,11 +203,11 @@ export default {
 			// Display suggestion
 			this.$nextTick(() => {
 				var input = this.$refs.input[index],
-					suggestionNode = this.$refs['suggestion-' + index][0],
+					suggestionNode = this.$refs["suggestion-" + index][0],
 					inputRect = input.getBoundingClientRect();
 
-				suggestionNode.style.top = (inputRect.bottom - 1) + 'px';
-				suggestionNode.style.left = inputRect.left + 'px';
+				suggestionNode.style.top = inputRect.bottom - 1 + "px";
+				suggestionNode.style.left = inputRect.left + "px";
 			});
 		},
 		handleInputEnter(index) {
@@ -223,7 +234,7 @@ export default {
 				if (!this.visible) return;
 
 				var fields = this.$refs.input,
-					otherInput = this.$el.querySelectorAll('input'),
+					otherInput = this.$el.querySelectorAll("input"),
 					button = this.$refs.mainButton;
 
 				if (fields && fields.length > 0) {
@@ -235,7 +246,7 @@ export default {
 				} else if (button) {
 					button.focus();
 				}
-			})
-		}
-	}
-}
+			});
+		},
+	},
+};

internal/view/assets/js/component/pagination.js

@@ -23,7 +23,7 @@ var template = `
 			<i class="fas fa-fw fa-angle-double-right"></i>
 		</a>
 	</template>
-</div>`
+</div>`;
 
 export default {
 	template: template,
@@ -39,6 +39,6 @@ export default {
 			else if (page <= 1) page = 1;
 
 			this.$emit("change", page);
-		}
-	}
-}
+		},
+	},
+};