From 9477b8137a906dfa7a5ddc1a615840c43f9f6be6 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Tue, 25 Nov 2025 20:09:45 +0100
Subject: [PATCH] feat(templates): add projects page

---
 .gitignore                        |   2 +
 README.md                         |   1 +
 templates/custom/extra_links.tmpl |   3 +
 templates/custom/portfolio.tmpl   | 512 ++++++++++++++++++++++++++++++
 templates/home.tmpl               |   3 +
 templates/status/404.tmpl         |   3 +
 6 files changed, 524 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 templates/custom/extra_links.tmpl
 create mode 100644 templates/custom/portfolio.tmpl
 create mode 100644 templates/home.tmpl
 create mode 100644 templates/status/404.tmpl

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b26a482
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+repomix-output.xml
+conf/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f328194
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+# Gitea themes + main page for git.kotikot.com
diff --git a/templates/custom/extra_links.tmpl b/templates/custom/extra_links.tmpl
new file mode 100644
index 0000000..a183573
--- /dev/null
+++ b/templates/custom/extra_links.tmpl
@@ -0,0 +1,3 @@
+{{if .IsSigned}}
+    <a class="item" href="/projects">projects</a>
+{{end}}
diff --git a/templates/custom/portfolio.tmpl b/templates/custom/portfolio.tmpl
new file mode 100644
index 0000000..ce0244b
--- /dev/null
+++ b/templates/custom/portfolio.tmpl
@@ -0,0 +1,512 @@
+<div class="page-content home">
+	<div class="ui fluid container">
+		<div class="hero">
+			<h2 class="ui header title">
+				{{AppName}}
+			</h2>
+			<p class="ui large text">
+				hi there. explore our projects below.
+			</p>
+		</div>
+
+		<div id="portfolio-controls">
+			<div class="control-group">
+				<div class="ui buttons">
+					<button class="ui button active" data-filter="all">all</button>
+					<button class="ui button" data-filter="project">projects</button>
+					<button class="ui button" data-filter="repo">repos</button>
+				</div>
+			</div>
+
+			<div class="control-group">
+				<select class="ui dropdown" id="org-select">
+					<option value="all">all types</option>
+				</select>
+			</div>
+
+			<div class="control-group search-group">
+				<div class="ui icon input fluid">
+					<input type="text" id="search-input" placeholder="search...">
+					<i class="search icon"></i>
+				</div>
+			</div>
+
+			<div class="control-group">
+				<select class="ui dropdown" id="sort-select">
+					<option value="updated">last updated</option>
+					<option value="alpha">alphabetical</option>
+				</select>
+			</div>
+		</div>
+
+		<div id="loading-indicator" class="ui active centered inline loader text">loading portfolio...</div>
+
+		<div id="error-message" class="ui negative message hidden">
+			<div class="header">error loading data</div>
+			<p>could not fetch organizations or repositories. please try again later.</p>
+		</div>
+
+		<div id="portfolio-grid">
+		</div>
+
+	</div>
+</div>
+
+<style>
+	@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap');
+
+	.page-content.home {
+		padding: 2rem;
+	}
+
+	.page-content.home .hero {
+		text-align: center;
+		margin-bottom: 3rem;
+	}
+
+	#portfolio-controls {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		align-items: center;
+		margin-bottom: 2rem;
+		background: var(--color-box-header);
+		padding: 1rem;
+		border-radius: 4px;
+		border: 1px solid var(--color-secondary);
+	}
+
+	.control-group {
+		display: flex;
+		align-items: center;
+	}
+
+	.search-group {
+		flex-grow: 1; 
+		min-width: 200px;
+		display: flex;
+	}
+
+	.search-group .ui.input {
+		width: 100%;
+	}
+
+	#search-input {
+		background: var(--color-input-background, #2b2c2d) !important;
+		color: var(--color-text, #e0e0e0) !important;
+		border: 1px solid var(--color-secondary) !important;
+	}
+
+	#search-input:focus {
+		border-color: var(--color-primary) !important;
+	}
+
+	#portfolio-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 1.5rem;
+		width: 100%;
+	}
+
+	@media (max-width: 768px) {
+		#portfolio-grid {
+			grid-template-columns: 1fr;
+		}
+		
+		#portfolio-controls {
+			flex-direction: column;
+			align-items: stretch;
+		}
+		
+		.search-group {
+			width: 100%;
+		}
+	}
+
+	.portfolio-card {
+		background-color: var(--color-box-body);
+		border: 1px solid var(--color-secondary);
+		border-radius: 6px;
+		display: flex;
+		flex-direction: column;
+		height: 380px;
+		position: relative;
+		transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
+		overflow: hidden;
+		text-decoration: none !important;
+	}
+
+	.portfolio-card:hover {
+		transform: translateY(-4px);
+		box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+	}
+
+	.card-content {
+		padding: 1.5rem;
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+		text-align: center;
+	}
+
+	.barcode-container {
+		width: 100%;
+		height: 100px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-top: 1rem;
+		margin-bottom: 1.5rem;
+		overflow: hidden;
+	}
+
+	.barcode-title {
+		font-family: 'Libre Barcode 39 Text', cursive;
+		color: var(--color-text);
+		white-space: nowrap;
+		line-height: 1;
+	}
+
+	.card-description {
+		color: var(--color-text-light);
+		font-size: 0.95rem;
+		line-height: 1.5;
+		display: -webkit-box;
+		-webkit-line-clamp: 4;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		margin-bottom: 1rem; 
+	}
+
+	.card-footer {
+		padding: 1rem 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.8rem;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		margin-top: auto;
+	}
+
+	.tags-container {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: 6px;
+		min-height: 24px;
+	}
+
+	.topic-tag {
+		font-size: 0.75rem;
+		color: var(--color-text-light-2);
+	}
+
+	.links-container {
+		display: flex;
+		gap: 15px;
+	}
+
+	.portfolio-link {
+		font-weight: bold;
+		font-size: 0.9rem;
+	}
+
+	.portfolio-link:hover {
+		text-decoration: underline;
+	}
+
+	.hidden {
+		display: none !important;
+	}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', async () => {
+	const API_BASE = '{{AppSubUrl}}/api/v1';
+	const grid = document.getElementById('portfolio-grid');
+	const loading = document.getElementById('loading-indicator');
+	const errorMsg = document.getElementById('error-message');
+	const searchInput = document.getElementById('search-input');
+	const sortSelect = document.getElementById('sort-select');
+	const orgSelect = document.getElementById('org-select');
+	const filterButtons = document.querySelectorAll('#portfolio-controls .ui.buttons .button');
+
+	let allItems = [];
+	let filteredItems = [];
+	let currentMainFilter = 'all';
+	let currentOrgFilter = 'all';
+
+	const langColors = {
+		'Python': '#3572A5',
+		'JavaScript': '#f1e05a',
+		'TypeScript': '#2b7489',
+		'HTML': '#e34c26',
+		'CSS': '#563d7c',
+		'Go': '#00ADD8',
+		'Java': '#b07219',
+		'C++': '#f34b7d',
+		'C': '#555555',
+		'Shell': '#89e051',
+		'Rust': '#dea584',
+		'Vue': '#41b883',
+		'Swift': '#ffac45',
+		'Kotlin': '#A97BFF',
+		'PHP': '#4F5D95'
+	};
+	const defaultColor = '#8e6adb';
+
+	function getLangColor(lang) {
+		return langColors[lang] || defaultColor;
+	}
+
+	function fitText(el) {
+		const text = el.innerText;
+		const containerWidth = el.parentElement.clientWidth;
+		let fontSize = 60; 
+		el.style.fontSize = fontSize + 'px';
+		
+		while (el.scrollWidth > containerWidth && fontSize > 20) {
+			fontSize -= 2;
+			el.style.fontSize = fontSize + 'px';
+		}
+	}
+
+	async function fetchPortfolio() {
+		try {
+			loading.classList.remove('hidden');
+			grid.innerHTML = '';
+			errorMsg.classList.add('hidden');
+
+			const orgsRes = await fetch(`${API_BASE}/orgs`);
+			if (!orgsRes.ok) throw new Error('failed to fetch orgs');
+			const orgs = await orgsRes.json();
+
+			const items = [];
+			const orgNames = new Set();
+
+			await Promise.all(orgs.map(async (org) => {
+				const isProject = org.location && org.location.toLowerCase().includes('project');
+				const isFeaturedOrg = org.location && org.location.toLowerCase().includes('featured');
+				
+				const orgName = org.full_name || org.username;
+				
+				if (!isProject) {
+					orgNames.add(orgName);
+				}
+
+				if (isProject) {
+					let updatedAt = new Date(0);
+					let mainLang = null;
+					
+					try {
+						const reposRes = await fetch(`${API_BASE}/orgs/${org.username}/repos`);
+						if (reposRes.ok) {
+							const repos = await reposRes.json();
+							const langCounts = {};
+							repos.forEach(r => {
+								const d = new Date(r.updated_at);
+								if (d > updatedAt) updatedAt = d;
+								if (r.language) {
+									langCounts[r.language] = (langCounts[r.language] || 0) + 1;
+								}
+							});
+							mainLang = Object.keys(langCounts).reduce((a, b) => langCounts[a] > langCounts[b] ? a : b, null);
+						}
+					} catch (e) {
+						console.warn(`failed to fetch repos for project org ${org.username}`, e);
+					}
+
+					items.push({
+						type: 'project',
+						id: org.id,
+						name: orgName,
+						username: org.username,
+						description: org.description,
+						website: org.website,
+						updated_at: updatedAt,
+						isFeatured: isFeaturedOrg,
+						topics: ['Project'],
+						language: mainLang,
+						orgName: 'Projects',
+						url: `{{AppSubUrl}}/orgs/${org.username}/dashboard`
+					});
+
+				} else {
+					try {
+						const reposRes = await fetch(`${API_BASE}/orgs/${org.username}/repos`);
+						if (reposRes.ok) {
+							const repos = await reposRes.json();
+							repos.forEach(repo => {
+								const isFeaturedRepo = repo.topics && repo.topics.includes('featured');
+								
+								const displayTopics = [orgName];
+								if (repo.topics) {
+									repo.topics.forEach(t => {
+										if (t !== 'featured') displayTopics.push(t);
+									});
+								}
+
+								items.push({
+									type: 'repo',
+									id: repo.id,
+									name: repo.name,
+									fullName: repo.full_name,
+									description: repo.description,
+									website: repo.website,
+									updated_at: new Date(repo.updated_at),
+									isFeatured: isFeaturedRepo,
+									topics: displayTopics,
+									language: repo.language,
+									orgName: orgName,
+									url: repo.html_url
+								});
+							});
+						}
+					} catch (e) {
+						console.warn(`failed to fetch repos for category org ${org.username}`, e);
+					}
+				}
+			}));
+
+			allItems = items;
+			populateOrgFilter(orgNames);
+			applySortAndFilter();
+
+		} catch (err) {
+			console.error(err);
+			errorMsg.classList.remove('hidden');
+		} finally {
+			loading.classList.add('hidden');
+		}
+	}
+
+	function populateOrgFilter(names) {
+		orgSelect.innerHTML = '<option value="all">all types</option>';
+		Array.from(names).sort().forEach(n => {
+			const opt = document.createElement('option');
+			opt.value = n;
+			opt.textContent = n;
+			orgSelect.appendChild(opt);
+		});
+	}
+
+	function applySortAndFilter() {
+		const query = searchInput.value.toLowerCase();
+		const sortMode = sortSelect.value;
+		const orgFilter = orgSelect.value;
+
+		filteredItems = allItems.filter(item => {
+			if (currentMainFilter !== 'all' && item.type !== currentMainFilter) return false;
+
+			if (orgFilter !== 'all') {
+				if (item.orgName !== orgFilter) return false;
+			}
+
+			const matchName = item.name.toLowerCase().includes(query);
+			const matchDesc = (item.description || '').toLowerCase().includes(query);
+			return matchName || matchDesc;
+		});
+
+		if (sortMode === 'alpha') {
+			filteredItems.sort((a, b) => a.name.localeCompare(b.name));
+		} else {
+			filteredItems.sort((a, b) => {
+				if (a.isFeatured && !b.isFeatured) return -1;
+				if (!a.isFeatured && b.isFeatured) return 1;
+				return b.updated_at - a.updated_at;
+			});
+		}
+
+		renderGrid();
+	}
+
+	function renderGrid() {
+		grid.innerHTML = '';
+		
+		if (filteredItems.length === 0) {
+			grid.innerHTML = '<div class="ui center aligned container" style="width:100%; padding: 2rem; color: var(--color-text-light);">no items found</div>';
+			return;
+		}
+
+		filteredItems.forEach(item => {
+			const card = document.createElement('div');
+			card.className = 'portfolio-card';
+			
+			const langColor = getLangColor(item.language);
+			
+			card.style.setProperty('--hover-color', langColor);
+			card.addEventListener('mouseenter', () => {
+				card.style.borderColor = langColor;
+			});
+			card.addEventListener('mouseleave', () => {
+				card.style.borderColor = 'var(--color-secondary)';
+			});
+
+			let linksHtml = '';
+			linksHtml += `<a href="${item.url}" class="portfolio-link" style="color: ${langColor}" target="_blank">git</a>`;
+			if (item.website) {
+				linksHtml += `<a href="${item.website}" class="portfolio-link" style="color: ${langColor}" target="_blank">website</a>`;
+			}
+
+			let tagsHtml = '';
+			if (item.topics && item.topics.length > 0) {
+				item.topics.slice(0, 4).forEach(t => {
+					tagsHtml += `<span class="topic-tag">${t}</span>`;
+				});
+			}
+
+			card.innerHTML = `
+				<div class="card-content">
+					<div class="barcode-container">
+						<div class="barcode-title" title="${item.name}">${item.name}</div>
+					</div>
+					<div class="card-description">
+						${item.description || '^-^'}
+					</div>
+				</div>
+				<div class="card-footer">
+					<div class="tags-container">
+						${tagsHtml}
+					</div>
+					<div class="links-container">
+						${linksHtml}
+					</div>
+				</div>
+			`;
+
+			card.onclick = (e) => {
+				if (e.target.tagName !== 'A') {
+					window.location.href = item.url;
+				}
+			};
+
+			grid.appendChild(card);
+			
+			const titleEl = card.querySelector('.barcode-title');
+			fitText(titleEl);
+		});
+	}
+
+	searchInput.addEventListener('input', applySortAndFilter);
+	sortSelect.addEventListener('change', applySortAndFilter);
+	orgSelect.addEventListener('change', applySortAndFilter);
+	
+	filterButtons.forEach(btn => {
+		btn.addEventListener('click', (e) => {
+			filterButtons.forEach(b => b.classList.remove('active'));
+			e.target.classList.add('active');
+			currentMainFilter = e.target.dataset.filter;
+			applySortAndFilter();
+		});
+	});
+
+	fetchPortfolio();
+	
+	window.addEventListener('resize', () => {
+		document.querySelectorAll('.barcode-title').forEach(fitText);
+	});
+});
+</script>
diff --git a/templates/home.tmpl b/templates/home.tmpl
new file mode 100644
index 0000000..8dfd8a5
--- /dev/null
+++ b/templates/home.tmpl
@@ -0,0 +1,3 @@
+{{template "base/head" .}}
+{{template "custom/portfolio" .}}
+{{template "base/footer" .}}
diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl
new file mode 100644
index 0000000..8dfd8a5
--- /dev/null
+++ b/templates/status/404.tmpl
@@ -0,0 +1,3 @@
+{{template "base/head" .}}
+{{template "custom/portfolio" .}}
+{{template "base/footer" .}}