chore: frontend formatting (#764)

* Install `prettier`

Ignore everything in the first step as I want to see the size of changes
that are going to happen first

* Configure prettier

- use tabs as the whole project prefers tabs
- ignore a bunch of files that shouldn't be formatted

* Check & format with prettier when compiling less

* Update docs to use bun

Since bun handles the dependencies used for the CSS compilation this
should be the preferred method from now on.

* Check actual result of prettier

* Use LF line endings

All files where formatted in LF and since it's most common in git repos
we should probably keep it this way

* Limit prettier to `internal/view/`

See pull request review
#764 (review)

* Format code with prettier

.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);
-		}
-	}
-}
+		},
+	},
+};