Merge pull request 'fix(home.scss): improve mobile responsiveness for latest projects' (#9) from dev into master

Reviewed-on: #9

.gitea/workflows/build.yaml

@@ -4,6 +4,9 @@ on: pull_request
 
 jobs:
   build:
+    # Skip if PR base is master/dev
+    if: github.base_ref != 'master' && github.base_ref != 'dev'
+
     runs-on: ubuntu-latest
 
     steps:

Makefile

@@ -1,10 +1,41 @@
-all: clean format build
+# -------- Config --------
+SHELL := /bin/sh
 
-format:
+ZOLA ?= zola
-	biome format --write .
+BIOME ?= npx biome
 
-build:
+BUILD_DIR := public
-	zola build
+
+# -------- Targets --------
+.PHONY: help serve build clean format lint fix fix-unsafe check ci
+
+help: ## Show this help
+	@awk 'BEGIN{FS":.*##"; printf "\nTargets:\n"} /^[a-zA-Z0-9_.-]+:.*##/{printf "  \033[36m%-14s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST); echo
+
+serve: ## Run Zola dev server (http://127.0.0.1:1111)
+	$(ZOLA) serve
+
+build: ## Build site into ./public
+	$(ZOLA) build
+
+clean: ## Remove ./public
+	rm -rf "$(BUILD_DIR)"
+
+format: ## Format JS/JSON/CSS with Biome (no linting)
+	$(BIOME) format --write .
+
+lint: ## Lint with Biome (no writes)
+	$(BIOME) ci .
+
+fix: ## Lint+auto-fix safe changes with Biome
+	$(BIOME) check --write .
+
+fix-unsafe: ## Lint+auto-fix incl. unsafe (e.g., template literals)
+	$(BIOME) check --write --unsafe .
+
+check: ## Zola link/content checks
+	$(ZOLA) check
+
+ci: ## CI-friendly: lint (Biome) + Zola checks
+	$(BIOME) ci . && $(ZOLA) check
 
-clean:
-	rm -rf public/

biome.json

@@ -1,15 +1,41 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
-	"files": {
+	"vcs": {
-		"ignore": [".vscode/", "node_modules/", "public/"]
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
 	},
-	"organizeImports": {
+	"files": {
+		"includes": ["**", "!public", "!content", "!templates", "!static/img", "!**/*.min.js"]
+	},
+	"formatter": {
 		"enabled": true
 	},
 	"linter": {
-		"enabled": false,
+		"enabled": true,
 		"rules": {
 			"recommended": true
 		}
+	},
+	"javascript": {
+		"formatter": {
+			"lineWidth": 100,
+			"quoteStyle": "double",
+			"jsxQuoteStyle": "double",
+			"trailingCommas": "all",
+			"semicolons": "always"
+		}
+	},
+	"json": {
+		"formatter": {
+			"lineWidth": 100
+		}
+	},
+	"css": {
+		"formatter": {
+			"enabled": true,
+			"lineWidth": 100,
+			"quoteStyle": "single"
+		}
 	}
 }

content/about.md

@@ -9,7 +9,7 @@ As a member of [Microlab](https://microlab.space), the university's hackerspace,
 
 ## Work
 
-Currently employed as a Linux Devops engineer. Most of my work involves Debian-based systems on various hardware platforms.
+Currently employed as a Linux DevOps engineer, focusing primarily on Debian-based systems across a variety of hardware platforms.
 
 I also create custom websites from time to time.
 

sass/home.scss

@@ -35,7 +35,9 @@
 	.project {
 		display: flex;
 		flex-direction: column;
-		margin: 1rem 30%;
+		margin: 1rem 0;
+		width: 100%;
+		max-width: 40%;
 		gap: 1rem;
 		.title {
 			font-size: 1.2rem;
@@ -55,6 +57,7 @@
 	}
 	.latest-projects-posts .project {
 		margin: 1rem 5%;
+		max-width: 90%;
 	}
 }
 

static/js/code-copy.js

@@ -1,30 +1,28 @@
-let codes = document.querySelectorAll("pre")
+const codes = document.querySelectorAll("pre");
 
-codes.forEach(code => {
+codes.forEach((code) => {
-  const elWrapper = document.createElement("div")
+	const elWrapper = document.createElement("div");
-  elWrapper.classList.add("copy-code-wrapper")
+	elWrapper.classList.add("copy-code-wrapper");
 
+	const el = document.createElement("span");
+	el.textContent = "Copy";
+	el.classList.add("copy-code");
 
-  const el = document.createElement("span")
+	elWrapper.appendChild(el);
-  el.textContent = "Copy"
-  el.classList.add("copy-code")
 
-  elWrapper.appendChild(el)
+	code.parentNode.insertBefore(elWrapper, code);
 
-  code.parentNode.insertBefore(elWrapper, code)
+	let textContent = "";
-
+	code.childNodes.forEach((child) => {
-  let textContent = ""
+		textContent += child.textContent;
-  code.childNodes.forEach(child => {
+	});
-    textContent += child.textContent;
-  })
-
-  elWrapper.addEventListener("click", (e) => {
-    e.preventDefault()
-    navigator.clipboard.writeText(textContent)
-    el.textContent = "Copied!"
-    setTimeout(() => {
-      el.textContent = "Copy"
-    }, 5000);
-  })
-})
 
+	elWrapper.addEventListener("click", (e) => {
+		e.preventDefault();
+		navigator.clipboard.writeText(textContent);
+		el.textContent = "Copied!";
+		setTimeout(() => {
+			el.textContent = "Copy";
+		}, 5000);
+	});
+});

static/js/console.js

@@ -1,107 +0,0 @@
-const c = document.querySelector(".console")
-const ps1 = "[fr@website ~]$ "
-const motd = "Welcome to my website!<br>You can use `help` for more informations :)"
-let line = "";
-
-function exec(command) {
-  switch (command[0]) {
-    case "help":
-      line = "help<br>author<br>contact<br>clear<br>echo"
-      break;
-    case "author":
-      line = "Filip Rojek, 2023"
-      break
-    case "contact":
-      line = "Filip Rojek &lt<a href='mailto: &#102;&#105;&#108;&#105;&#112;&#064;&#102;&#105;&#108;&#105;&#112;&#114;&#111;&#106;&#101;&#107;&#046;&#099;&#122;'>&#102;&#105;&#108;&#105;&#112;&#064;&#102;&#105;&#108;&#105;&#112;&#114;&#111;&#106;&#101;&#107;&#046;&#099;&#122;</a>&gt<br>web: <a href='https://filiprojek.cz' target='_blank'>www.filiprojek.cz</a><br>telegram: <a href='https://t.me/filiprojek' target='_blank'>@filiprojek</a>"
-      break
-    case "clear":
-      write("000ctrll")
-      return false
-    case "echo":
-      line = ""
-      command.forEach((cmd, i) => {
-        if (i === 0) return
-        line += cmd + " "
-      });
-      line = line.substring(0, line.length - 1) // remove last space
-      break
-    default:
-      line = "frsh: " + command[0] + ": command not found"
-      break;
-  }
-
-  return line
-}
-
-function write(key, payload) {
-  switch(key) {
-    case "Enter":
-      command = c.lastChild.textContent.replace(ps1, "")
-      command = command.split(" ");
-      let out = exec(command)
-      if(out !== false) {
-        line = document.createElement("p")
-        line.innerHTML += out
-        line.innerHTML += "<br>"
-        c.appendChild(line)
-        line = document.createElement("p")
-        line.innerHTML += ps1
-        c.appendChild(line)
-      }
-      command = ""
-      break
-    case "000ctrll":
-      c.innerHTML = ""
-      if(payload == motd) c.innerHTML = motd
-      line = document.createElement("p")
-      line.innerHTML += ps1
-      c.appendChild(line)
-      break
-    case "000backspace":
-      if(c.lastChild.textContent.slice(0, -1) !== ps1.slice(0, -1)) {
-        c.lastChild.innerHTML = c.lastChild.textContent.slice(0, -1)
-      }
-      break
-
-    default:
-      c.lastChild.innerHTML += key
-  }
-}
-
-function customCtrlShortcuts(plusKey) {
-  document.addEventListener("keydown", e => {
-    if(e.ctrlKey && e.key == plusKey) {
-      e.preventDefault()
-      write("000ctrl"+plusKey)
-    }
-  })
-}
-
-// On load init the terminal
-window.addEventListener("load", () => {
-  write("000ctrll", motd)
-  if (navigator.userAgent.toLowerCase().includes("mobile")) {
-    const mi = document.querySelector(".mobile-input")
-    mi.style="opacity: 0; width: 0; height: 0"
-    c.addEventListener("click", e => {
-      mi.focus()
-    })
-  }
-})
-
-// Capture the keypress
-window.addEventListener("keypress", e => {
-  e.preventDefault()
-  write(e.key)
-})
-
-window.addEventListener("keydown", e => {
-  if(e.key == "Backspace") {
-    e.preventDefault()
-    write("000backspace")
-  }
-})
-
-// Register custom ctrl shortcuts
-customCtrlShortcuts("l") // ctrl + l
-customCtrlShortcuts("c") // ctrl + c

static/js/mobile-navbar.js

@@ -1,26 +1,24 @@
-const burger = document.querySelector(".hamburger")
+const burger = document.querySelector(".hamburger");
-const links = document.querySelector(".links")
+const links = document.querySelector(".links");
-const body = document.querySelector("body")
+const body = document.querySelector("body");
-const main = document.querySelector("main")
+const main = document.querySelector("main");
 
-let shown = false
+let shown = false;
 
 burger.addEventListener("click", (e) => {
-  e.preventDefault()
+	e.preventDefault();
-
-  if (!shown) {
-    links.style.display = "flex"
-    body.classList.add("disable-scroll")
-    burger.textContent = "x"
-    main.style.visibility = "hidden"
-  } else {
-    links.style.display = "none"
-    body.classList.remove("disable-scroll")
-    burger.textContent = "☰"
-    main.style.visibility = "visible"
-  }
-
-  shown = !shown
-})
 
+	if (!shown) {
+		links.style.display = "flex";
+		body.classList.add("disable-scroll");
+		burger.textContent = "x";
+		main.style.visibility = "hidden";
+	} else {
+		links.style.display = "none";
+		body.classList.remove("disable-scroll");
+		burger.textContent = "☰";
+		main.style.visibility = "visible";
+	}
 
+	shown = !shown;
+});

templates/base.html

@@ -28,6 +28,7 @@
     <script defer src="/js/mobile-navbar.js"></script>
 		{% block styles %}
 		{% endblock styles %}
+		<script defer data-domain="filiprojek.cz" src="https://analytics.fofrweb.com/js/script.js"></script>
 	</head>
 	<body>
 		<header>