Add some hints and improve UI design

.woodpecker/build.yml

@@ -11,6 +11,8 @@ steps:
     image: golang:1.23.6
     commands:
       - go build
+    environment:
+      CGO_ENABLED: 0
     when:
       - event: tag
 

.woodpecker/manifest.yml

@@ -6,9 +6,9 @@ steps:
     image: gcr.io/go-containerregistry/crane:debug
     entrypoint: ["/busybox/sh", "-c", "echo $CI_SCRIPT | base64 -d | /busybox/sh -e"]
     commands:
-      - crane auth login -u elara6331 -p $REGISTRY_TOKEN gitea.elara.ws
+      - "crane auth login -u elara6331 -p $REGISTRY_TOKEN gitea.elara.ws"
-      - crane index append -m gitea.elara.ws/elara6331/distrohop:amd64 -m gitea.elara.ws/elara6331/distrohop:arm64 -t gitea.elara.ws/elara6331/distrohop:latest
+      - "crane index append -m gitea.elara.ws/elara6331/distrohop:amd64 -m gitea.elara.ws/elara6331/distrohop:arm64 -t gitea.elara.ws/elara6331/distrohop:latest"
-      - crane index append -m gitea.elara.ws/elara6331/distrohop:amd64 -m gitea.elara.ws/elara6331/distrohop:arm64 -t gitea.elara.ws/elara6331/distrohop:${CI_COMMIT_TAG}
+      - "crane index append -m gitea.elara.ws/elara6331/distrohop:amd64 -m gitea.elara.ws/elara6331/distrohop:arm64 -t gitea.elara.ws/elara6331/distrohop:${CI_COMMIT_TAG}"
     environment:
       REGISTRY_TOKEN:
         from_secret: gitea_token

README.md

@@ -8,7 +8,7 @@
 
 ---
 
-**DistroHop** is a tool that helps you compare Linux packages across different distributions. It lets you search for a package from one distro in another's repositories or look for a specific item you need.
+**DistroHop** is a tool that helps you compare Linux packages across different distributions. It lets you search for a package from one distro in another's repositories or look for a specific item you need. You can try it out at [hop.lure.sh](https://hop.lure.sh/)
 
 ## How does it work?
 

add-icon.sh

@@ -2,7 +2,7 @@
 iconset="${1%%:*}"
 icon="${1#*:}"
 
-BASE_DIR="./cmd/distrohop/assets/icons"
+BASE_DIR="./assets/icons"
 
 mkdir -p "$BASE_DIR/$iconset"
 wget -4 -O "$BASE_DIR/$iconset/$icon.svg" "https://api.iconify.design/$iconset/$icon.svg"

assets/icons/material-symbols/info-outline.svg

@@ -0,0 +1 @@
+<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8"/></svg>

templates/home.html

@@ -96,7 +96,7 @@
 
             <div class="field mt-4 is-align-self-stretch">
                 <p class="control">
-                    <button class="button is-dark is-rounded is-fullwidth" type="submit">
+                    <button class="button is-info is-inverted is-rounded is-fullwidth" type="submit">
                         <div class="icon-text">
                             <span class="icon is-aligned m-0">#icon("map/search")</span>
                             <span>Search</span>
@@ -110,11 +110,17 @@
     <div x-cloak x-data="{tags: []}" x-transition:enter x-show="activeTab == 'tags'" class="columns">
         <div class="column is-half is-offset-one-quarter has-text-centered">
             <form action="/search/tags" x-ref="tagsForm">
+                <template x-if="tags.length == 0">
+                    <div class="has-text-centered">
+                        <p class="is-size-5">Tags you add will appear here...</p>
+                    </div>
+                </template>
+                
                 <div class="field is-grouped is-grouped-multiline">
                     <template x-for="(tag, idx) in tags">
                         <div>
                             <div class="tags has-addons">
-                                <span class="tag is-dark has-background-info-dark has-text-info-light" x-text="tag[0]"></span><span class="tag is-dark" x-text="tag[1]"></span><a class="tag is-delete m-0" @click.prevent="tags.splice(idx, 1)"></a>
+                                <span class="tag is-dark has-background-info-dark has-text-info-light" x-text="tag[0]"></span><span class="tag is-dark" x-text="tag[1]"></span><a class="tag is-dark is-delete m-0" @click.prevent="tags.splice(idx, 1)"></a>
                             </div>
                             <input class="is-hidden" name="tag" :value="tag.join('=')">
                         </div>
@@ -122,7 +128,17 @@
                     <span></span>
                 </div>
                 
-                <div class="mt-5 field has-addons">
+                <div class="icon-text mt-5 has-text-grey">
+                    <span class="icon is-aligned">#icon("material-symbols/info-outline")</span>
+                    <p class="is-size-7 has-text-grey">
+                        Try searching for
+                        <code class="is-clickable" @click="tags.push(['lib', 'pcre2-8'])">lib=pcre2-8</code>,
+                        <code class="is-clickable" @click="tags.push(['lib', 'libaudit.so.1'])">lib=libaudit.so.1</code>,
+                        <code class="is-clickable" @click="tags.push(['bin', 'firefox'])">bin=firefox</code>,
+                        etc.
+                    </p>
+                </div>
+                <div class="mt-0 field has-addons">
                     <div class="control is-expanded">
                         <input @keydown.comma.prevent="pushTag(tags, $refs.newTagInput)" class="input" x-ref="newTagInput" placeholder="bin=nano">
                     </div>
@@ -149,7 +165,7 @@
                     </p>
                 </div>
                 
-                <button class="button is-dark is-rounded is-fullwidth" type="submit">
+                <button class="button is-info is-inverted is-rounded is-fullwidth" type="submit">
                     <div class="icon-text">
                         <span class="icon is-aligned m-0">#icon("map/search")</span>
                         <span>Search</span>