diff --git a/.github/workflows/templates/lemonade.html b/.github/workflows/templates/lemonade.html index 8f98af0..f022f30 100644 --- a/.github/workflows/templates/lemonade.html +++ b/.github/workflows/templates/lemonade.html @@ -226,6 +226,61 @@ padding: 12px 42px 12px 12px; } } + + /* Search Bar styling */ + .search-container { + margin-top: 1.5rem; + margin-bottom: 1.5rem; + } + + .search-input-wrapper { + position: relative; + display: flex; + align-items: center; + } + + .search-icon { + position: absolute; + left: 1rem; + color: var(--muted); + pointer-events: none; + display: flex; + align-items: center; + justify-content: center; + } + + .search-input-wrapper input { + width: 100%; + padding: 12px 16px 12px 44px; + background: var(--card); + border: 1px solid var(--card-border); + border-radius: 14px; + color: var(--ink); + font-family: var(--font); + font-size: 0.95rem; + transition: border-color 0.15s ease, box-shadow 0.15s ease; + box-shadow: var(--shadow); + backdrop-filter: blur(8px); + } + + .search-input-wrapper input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(252, 216, 70, 0.25); + } + + /* CLI Command Syntax Highlighting */ + .code-keyword { color: #005cc5; font-weight: 600; } + .code-subcommand { color: #d73a49; } + .code-flag { color: #e36209; } + .code-url { color: #22863a; text-decoration: underline; text-underline-offset: 3px; } + + @media (prefers-color-scheme: dark) { + .code-keyword { color: #c9d1d9; font-weight: 600; } + .code-subcommand { color: #ff7b72; } + .code-flag { color: #79c0ff; } + .code-url { color: #85e8b4; text-decoration: underline; text-underline-offset: 3px; } + } @@ -256,14 +311,25 @@

Add this repository

{{if .Signing.Enabled}}
- 1 Add the signed remote (flatpak โ‰ฅ 1.17) + 1 Add the signed repository (flatpak โ‰ฅ 1.17)
flatpak remote-add --user \ - --signature-lookaside={{.PagesURL}}/{{.Signing.Lookaside}} \ {{.RemoteName}} \ {{.PagesURL}}/{{.RemoteName}}.flatpakrepo
-

The .flatpakrepo embeds the GPG key and turns on gpg-verify; the lookaside flag completes signature verification in the same command.

+

The .flatpakrepo embeds the GPG key, signature lookaside, and automatically turns on gpg-verify.

+
+ Older flatpak clients (< 1.17) setup instructions +

Older Flatpak versions cannot read the signature lookaside from the repository file directly. Run these commands to add the repository and configure verification manually:

+
flatpak remote-add --if-not-exists --user --no-gpg-verify \ + {{.RemoteName}} \ + oci+{{.PagesURL}}
+
flatpak remote-modify --user \ + --signature-lookaside={{.PagesURL}}/{{.Signing.Lookaside}} \ + {{.RemoteName}}
+
+
+
2 Install an app

Pick any app below, or install by ID once the remote is added.

@@ -272,10 +338,6 @@

Add this repository

View OCI index Public key
-

Adding the repository through a software center can't carry the signature lookaside. After a GUI add, enable verification once:

-
flatpak remote-modify --user \ - --signature-lookaside={{.PagesURL}}/{{.Signing.Lookaside}} \ - {{.RemoteName}}
{{else}}
1 Add the remote @@ -297,10 +359,22 @@

Add this repository

Apps

{{if .Apps}}{{len .Apps}} app{{if gt (len .Apps) 1}}s{{end}} ยท install per release{{end}}
+ + {{if gt (len .Apps) 1}} +
+
+ + +
+
+ {{end}} + {{if .Apps}}
{{range .Apps}} -
+
๐Ÿ‹{{if .Icon}}{{end}}
@@ -368,6 +442,7 @@

No apps published yet

btn.addEventListener('click', function () { var code = btn.parentElement.querySelector('code'); if (!code || !navigator.clipboard) return; + // Copy raw text content without HTML tags or formatting navigator.clipboard.writeText(code.textContent).then(function () { var prev = btn.innerHTML; btn.innerHTML = 'โœ“ Copied'; @@ -379,6 +454,74 @@

No apps published yet

}); }); }); + + // CLI Command Syntax Highlighting + function esc(s) { return String(s).replace(/[&<>"']/g, function(c) { return { '&':'&','<':'<','>':'>','"':'"',"'":''' }[c]; }); } + + function highlightCmd(cmd) { + var htmlStr = esc(cmd); + var urls = []; + htmlStr = htmlStr.replace(/((?:oci\+)?https?:\/\/[^\s\\]+|sigs\/[^\s\\]+)/g, function(match) { + urls.push(match); + return '__AETHERPAK_URL_PLACEHOLDER_' + (urls.length - 1) + '__'; + }); + htmlStr = htmlStr.replace(/(^|\s)(--?[a-zA-Z0-9-]+)/g, '$1$2'); + htmlStr = htmlStr.replace(/(^|\s)(flatpak)\b/g, '$1$2'); + htmlStr = htmlStr.replace(/\b(install|remote-add|remote-modify)\b/g, '$1'); + for (var i = 0; i < urls.length; i++) { + htmlStr = htmlStr.replace('__AETHERPAK_URL_PLACEHOLDER_' + i + '__', '' + urls[i] + ''); + } + return htmlStr; + } + + document.querySelectorAll('.code code').forEach(function (el) { + el.innerHTML = highlightCmd(el.textContent); + }); + + // Search and filter logic + var searchInput = document.getElementById('app-search'); + if (searchInput) { + searchInput.addEventListener('input', function (e) { + var query = e.target.value.toLowerCase().trim(); + var cards = document.querySelectorAll('.grid > .app-card'); + var visibleCount = 0; + + cards.forEach(function (card) { + var name = card.getAttribute('data-app-name').toLowerCase(); + var id = card.getAttribute('data-app-id').toLowerCase(); + var summary = (card.getAttribute('data-app-summary') || '').toLowerCase(); + + if (name.indexOf(query) !== -1 || id.indexOf(query) !== -1 || summary.indexOf(query) !== -1) { + card.style.display = 'block'; + visibleCount++; + } else { + card.style.display = 'none'; + } + }); + + var emptySearch = document.getElementById('empty-search'); + if (visibleCount === 0) { + if (!emptySearch) { + emptySearch = document.createElement('div'); + emptySearch.id = 'empty-search'; + emptySearch.className = 'card empty'; + emptySearch.style.marginTop = '1.5rem'; + emptySearch.innerHTML = '

No matching applications

Try searching for a different keyword or app ID.

'; + document.querySelector('.grid').appendChild(emptySearch); + } + } else { + if (emptySearch) emptySearch.remove(); + } + }); + + // Focus search input when "/" is pressed + document.addEventListener('keydown', function (e) { + if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') { + e.preventDefault(); + searchInput.focus(); + } + }); + }