0.9.3

.commitlintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+	extends: ['@commitlint/config-conventional'],
+};

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -3,3 +3,4 @@
 
 npm run lint
 npm test
+npm run update-changelog && git add CHANGELOG.md

.stylelintrc.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+	extends: ["stylelint-config-standard"],
+	plugins: ["stylelint-plugin-defensive-css", "stylelint-plugin-logical-css"],
+	rules: {
+		"custom-property-empty-line-before": null,
+		"color-hex-length": "long",
+		"plugin/use-defensive-css": [true, {
+			"accidental-hover": false,
+			"background-repeat": true,
+			"custom-property-fallbacks": false,
+			"flex-wrapping": false,
+			"scroll-chaining": false,
+			"vendor-prefix-grouping": true
+		}],
+		"plugin/use-logical-properties-and-values": [true, {
+			"severity": "warning",
+			"disable-auto-fix": true,
+			"ignore": ["overflow-y", "overflow-x"]
+		}],
+		"plugin/use-logical-units": [true, {
+			"severity": "warning",
+			"disable-auto-fix": true,
+			"ignore": ["dvh", "dvw"]
+		}]
+	}
+};

CHANGELOG.md

@@ -6,6 +6,43 @@ All notable changes to this project will be documented in this file.
 
 ### ⛰️ Features
 
+- Add commitlint to enforce commit message format
+- Update the changelog automatically on every commit
+- Improve colors, refactor css, support rtl lang
+- Add `stylelint` and add check to lint script
+
+### 🐛 Bug Fixes
+
+- Correctly update the changelog on release
+- Add newer version of `addon-linter` via override to support newer browser APIs
+
+### 🚜 Refactor
+
+- Improve browser-polyfill inject
+- Move homepage url to config
+- Use `storage.session` instead of `storage.local`
+
+### 📚 Documentation
+
+- Add logo and screenshot to readme
+- Update quick-links
+- Change README title
+
+### 🎨 Styling
+
+- Improve codestyle
+
+### ⚙️ Miscellaneous Tasks
+
+- Update @commitlint/{cli,config-conventional}
+- Update @commitlint/{cli,config-conventional}
+- Update @commitlint/{cli,config-conventional,cz-commitlint}
+- Update @commitlint/{cli,config-conventional,cz-commitlint}, git-cliff
+
+## \[[0.9.2](https://gitea.usrspace.at/XimeX/usrspace-browser-addon/releases/tag/v0.9.2)] - 2023-05-24
+
+### ⛰️ Features
+
 - Add git-cliff to update the CHANGELOG.md
 
 ### 🐛 Bug Fixes

README.md

@@ -1,17 +1,19 @@
-# /usr/space Web-Extension (Firefox Add-on)
+# /usr/space Web-Extension (Browser Add-on)
 
 [![Mozilla Add-on](https://img.shields.io/amo/v/usr-space?style=for-the-badge)](https://addons.mozilla.org/de/firefox/addon/usr-space/)
 [![Mozilla Add-on](https://img.shields.io/amo/dw/usr-space?style=for-the-badge)](https://addons.mozilla.org/de/firefox/addon/usr-space/)
 [![Mozilla Add-on](https://img.shields.io/amo/users/usr-space?style=for-the-badge)](https://addons.mozilla.org/de/firefox/addon/usr-space/)
 [![Mozilla Add-on](https://img.shields.io/amo/stars/usr-space?style=for-the-badge)](https://addons.mozilla.org/de/firefox/addon/usr-space/)
 
+![Browser Screenshot](assets/screenshot.png)
+
 ## Features
 
 - Show if someone is in the Space
   - Looks for connected dynamic IPs (DHCP) (provided by backend)
   - Refreshes every 5min
 - Show the next event
-- Quick-Links (Homepage, Wiki, Gitea, Nextcloud)
+- Quick-Links (Homepage, Wiki, Git, Cloud, Pad)
 
 ## Install
 
@@ -67,3 +69,5 @@ https://github.com/twbs/icons/blob/main/LICENSE.md
 ## License
 
 MIT
+
+![Logo](assets/logo.png)

package.json

@@ -1,23 +1,38 @@
 {
 	"name": "usrspace-browser-addon",
 	"description": "WebExtension for the Hacker-/Maker-Space /usr/space",
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"dependencies": {
 		"webextension-polyfill": "^0.10.0"
 	},
 	"devDependencies": {
+		"@commitlint/cli": "^17.7.1",
+		"@commitlint/config-conventional": "^17.7.0",
+		"@commitlint/cz-commitlint": "^17.7.1",
 		"@types/firefox-webext-browser": "^111.0.1",
-		"git-cliff": "^1.2.0",
+		"commitizen": "^4.3.0",
+		"git-cliff": "^1.3.0",
 		"husky": "^8.0.3",
+		"stylelint": "^15.10.3",
+		"stylelint-config-standard": "^34.0.0",
+		"stylelint-plugin-defensive-css": "^0.8.1",
+		"stylelint-plugin-logical-css": "^0.13.2",
 		"web-ext": "^7.6.2"
 	},
+	"overrides": {
+		"web-ext@^7.6.2": {
+			"addons-linter": "^6.12.0"
+		}
+	},
 	"scripts": {
 		"copy-browser-polyfill": "cp node_modules/webextension-polyfill/dist/browser-polyfill.js src/browser-polyfill.js",
-		"inject-browser-polyfill": "sed -i -r 's/(<!-- \\[INJECT-BROWSER-POLYFILL] -->).*/\\1<script type=\"module\" src=\"browser-polyfill.js\"><\\/script>/' src/*.html",
-		"uninject-browser-polyfill": "sed -i -r 's/(<!-- \\[INJECT-BROWSER-POLYFILL] -->).+/\\1/' src/*.html",
+		"inject-browser-polyfill": "sed -i -r \"s#// \\[INJECT-BROWSER-POLYFILL]#import '\\./browser-polyfill\\.js';#\" src/*.js",
+		"uninject-browser-polyfill": "sed -i -r \"s#import '\\./browser-polyfill\\.js';#// \\[INJECT-BROWSER-POLYFILL]#\" src/*.js",
 		"copy-version": "sed -i 's/^\t\"version\": \".*\",$/\t\"version\": \"'$(rg '^\t\"version\": \"(.+)\",$' -r '$1' < package.json)'\",/' src/manifest.json",
 		"update-changelog": "npm exec git-cliff > CHANGELOG.md",
-		"lint": "web-ext lint -w",
+		"lint": "npm run lint:web-ext && npm run lint:css",
+		"lint:web-ext": "web-ext lint -w",
+		"lint:css": "stylelint \"src/*.css\"",
 		"test": "echo \"Error: no test specified\" && exit 0",
 		"watch:firefox": "web-ext run -t firefox-desktop",
 		"watch:firefox-android": "web-ext run -t firefox-android",
@@ -31,10 +46,16 @@
 		"postbuild:firefox": "npm run postbuild",
 		"postbuild:chromium": "npm run postbuild && npm run uninject-browser-polyfill",
 		"postinstall": "npm run copy-browser-polyfill",
-		"preversion": "npm run lint && npm test && npm run update-changelog",
-		"version": "npm run copy-version && npm run update-changelog && git add -u",
+		"preversion": "npm run lint && npm test",
+		"version": "npm run copy-version && npm run update-changelog && git add CHANGELOG.md src/manifest.json",
 		"postversion": "npm run build:firefox",
-		"prepare": "husky install"
+		"prepare": "husky install",
+		"commit": "git-cz"
+	},
+	"config": {
+		"commitizen": {
+			"path": "@commitlint/cz-commitlint"
+		}
 	},
 	"repository": {
 		"type": "git",

src/background.js

@@ -1,18 +1,14 @@
-import { REFRESH_TIMEOUT, API_URLS, BADGE_COLORS } from './config.js';
+import { REFRESH_TIMEOUT, HOMEPAGE, API_URLS, BADGE_COLORS } from './config.js';
 // [INJECT-BROWSER-POLYFILL]
 
 browser.runtime.onInstalled.addListener(async (details) => {
 	if (details.reason === 'install') {
 		await browser.tabs.create({
-			url: 'https://www.usrspace.at/',
+			url: HOMEPAGE,
 		});
 	}
 });
 
-browser.runtime.onStartup.addListener(async () => {
-	await browser.storage.local.remove(['calendar', 'spaceApi']);
-});
-
 browser.alarms.onAlarm.addListener((alarm) => {
 	if (alarm.name === 'fetchData') {
 		fetchNewData();
@@ -68,13 +64,13 @@ async function fetchNewData() {
 			/**
 			 * @type {import("../types").Storage}
 			 */
-			const { spaceApi } = await browser.storage.local.get('spaceApi');
+			const { spaceApi } = await browser.storage.session.get('spaceApi');
 			if (spaceApi && spaceApi.state.open !== spaceApiJson.state.open) {
 				await createStatusChangedNotification(spaceApiJson.state.open);
 			}
 		}
 
-		await browser.storage.local.set({
+		await browser.storage.session.set({
 			calendar: calendarJson,
 			spaceApi: spaceApiJson,
 		});

src/config.js

@@ -1,5 +1,7 @@
 export const REFRESH_TIMEOUT = 5;
 
+export const HOMEPAGE = 'https://www.usrspace.at/';
+
 export const API_URLS = {
 	spaceApi: 'https://www.usrspace.at/spaceapi.json',
 	calender: 'https://www.usrspace.at/calendar.php',

src/extension.css

@@ -2,6 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* stylelint-disable */
+
 /* Global */
 html,
 body {

src/manifest.json

@@ -2,7 +2,7 @@
 	"manifest_version": 3,
 	"name": "__MSG_extensionName__",
 	"description": "__MSG_extensionDescription__",
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"icons": {
 		"48": "icons/favicon.svg",
 		"96": "icons/favicon.svg"
@@ -18,11 +18,7 @@
 		"default_popup": "popup.html"
 	},
 	"default_locale": "de",
-	"permissions": [
-		"alarms",
-		"notifications",
-		"storage"
-	],
+	"permissions": ["alarms", "notifications", "storage"],
 	"author": "Thomas Rupprecht",
 	"homepage_url": "https://gitea.usrspace.at/XimeX/usrspace-browser-addon",
 	"developer": {
@@ -32,7 +28,7 @@
 	"browser_specific_settings": {
 		"gecko": {
 			"id": "{c9a907ad-a047-4cf6-8b5d-95097d31aa5b}",
-			"strict_min_version": "112.0"
+			"strict_min_version": "115.0"
 		}
 	}
 }

src/popup.css

@@ -4,12 +4,14 @@
 	font-weight: normal;
 	src: url('font/Nunito-Regular.ttf') format('truetype');
 }
+
 @font-face {
 	font-family: 'Nunito Sans';
 	font-style: normal;
 	font-weight: bold;
 	src: url('font/Nunito-Bold.ttf') format('truetype');
 }
+
 @font-face {
 	font-family: 'Nunito Sans';
 	font-style: italic;
@@ -20,45 +22,57 @@
 :root {
 	--light-blue: #2aa1bf;
 	--dark-blue: #095c81;
-	--light-color: #0c0c0c;
-	--dark-color: #ffffff;
-	--light-background: #f9f9f9;
-	--dark-background: #4a4a4a;
-	--light-code-background: #ebebeb;
-	--dark-code-background: #383838;
+
+	--light-color: #15141a;
+	--dark-color: #fbfbfe;
+	--light-background: #ffffff;
+	--dark-background: #42414d;
+	--light-code-background: #f0f0f4;
+	--dark-code-background: #2b2a33;
+
+	--color: var(--light-color);
+	--background: var(--light-background);
+	--code-background: var(--light-code-background);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--color: var(--dark-color);
+		--background: var(--dark-background);
+		--code-background: var(--dark-code-background);
+	}
 }
 
 body {
-	width: 360px;
+	inline-size: 360px;
 	padding: 6px 12px;
-	color: var(--light-color);
-	background-color: var(--light-background);
-	font-family: 'Nunito Sans';
-}
-@media (prefers-color-scheme: dark) {
-	body {
-		color: var(--dark-color);
-		background-color: var(--dark-background);
-	}
+	color: var(--color);
+	background-color: var(--background);
+	font-family: 'Nunito Sans', sans-serif;
 }
 
 section.no-padding {
 	margin: 0 -12px -6px;
 }
+
 h2 {
 	margin: 6px 0 4px;
 }
+
 summary {
-	margin: 6px 12px 6px;
+	margin: 6px 12px;
 	cursor: pointer;
 }
+
 summary > h2 {
 	margin: 0;
 	display: inline-block;
 }
+
 time {
 	font-style: italic;
 }
+
 svg {
 	vertical-align: text-bottom;
 }
@@ -66,11 +80,13 @@ svg {
 .panel-section-list {
 	margin: 0 -12px;
 }
+
 .panel-list-item > .icon {
 	text-align: center;
-	width: 23px;
-	margin-right: 4px;
+	inline-size: 23px;
+	margin-inline-end: 4px;
 }
+
 .link {
 	cursor: pointer;
 }
@@ -78,29 +94,28 @@ svg {
 #state > svg,
 #calendar > .calendar-entry > svg,
 #calendar > .calendar-entry strong {
-	margin-right: 8px;
+	margin-inline-end: 8px;
 }
-#calendar > .calendar-entry {
+
+#calendar > .calendar-entry,
+#calendar > .calendar-entry > div > div {
 	display: flex;
 }
+
 #calendar address {
 	display: inline;
 }
 
 #space-api {
 	margin: 0;
-	padding: 0 8px;
-	height: 122px;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	background-color: var(--light-code-background);
-}
-@media (prefers-color-scheme: dark) {
-	#space-api {
-		background-color: var(--dark-code-background);
-	}
+	padding: 4px 8px 8px;
+	block-size: 159px;
+	overflow-block: scroll;
+	background-color: var(--code-background);
 }
+
 #space-api code {
 	font-family: monospace;
 	font-size: 10px;
+	white-space: break-spaces;
 }

src/popup.html

@@ -71,7 +71,11 @@
 			</div>
 		</template>
 		<template id="template-calendar-entry-location">
-			<div>(<address></address>)</div>
+			<div>
+				(
+				<address></address>
+				)
+			</div>
 		</template>
 	</head>
 	<body>
@@ -94,7 +98,6 @@
 			</details>
 		</section>
 
-		<!-- [INJECT-BROWSER-POLYFILL] -->
 		<script type="module" src="popup.js"></script>
 	</body>
 </html>

src/popup.js

@@ -1,4 +1,5 @@
 import { QUICK_LINKS } from './config.js';
+// [INJECT-BROWSER-POLYFILL]
 
 const dateTimeFormat = Intl.DateTimeFormat([], { dateStyle: 'medium', timeStyle: 'short' });
 
@@ -56,7 +57,7 @@ async function init() {
 	/**
 	 * @type {import("../types").Storage}
 	 */
-	const { calendar, spaceApi } = await browser.storage.local.get(['calendar', 'spaceApi']);
+	const { calendar, spaceApi } = await browser.storage.session.get(['calendar', 'spaceApi']);
 
 	if (calendar) {
 		updateNextEvent(calendar);