add better search algorithm and make package page look nicer

iso-lock.json

@@ -1 +1 @@
-[{"Name":"bleach.ar","Version":"1.0.0","URL":"http://isotope.wbell.dev/isotope-download?name=bleach.ar\u0026version=1.0.0","Remote":"isotope.wbell.dev"},{"Name":"shlex.ar","Version":"1.0.1","URL":"http://isotope.wbell.dev/isotope-download?name=shlex.ar\u0026version=1.0.1","Remote":"isotope.wbell.dev"},{"Name":"neon.ar","Version":"beta1.0.2","URL":"http://isotope.wbell.dev/isotope-download?version=beta1.0.2\u0026name=neon.ar","Remote":"isotope.wbell.dev"},{"Name":"url.ar","Version":"1.0.1","URL":"http://isotope.wbell.dev/isotope-download?name=url.ar\u0026version=1.0.1","Remote":"isotope.wbell.dev"},{"Name":"http.ar","Version":"1.0.3","URL":"http://isotope.wbell.dev/isotope-download?name=http.ar\u0026version=1.0.3","Remote":"isotope.wbell.dev"}]
+[{"Name":"bleach.ar","Version":"1.0.0","URL":"http://isotope.wbell.dev/isotope-download?name=bleach.ar\u0026version=1.0.0","Remote":"isotope.wbell.dev"},{"Name":"shlex.ar","Version":"1.0.1","URL":"http://isotope.wbell.dev/isotope-download?version=1.0.1\u0026name=shlex.ar","Remote":"isotope.wbell.dev"},{"Name":"neon.ar","Version":"beta1.0.2","URL":"http://isotope.wbell.dev/isotope-download?name=neon.ar\u0026version=beta1.0.2","Remote":"isotope.wbell.dev"},{"Name":"url.ar","Version":"1.0.1","URL":"http://isotope.wbell.dev/isotope-download?name=url.ar\u0026version=1.0.1","Remote":"isotope.wbell.dev"},{"Name":"http.ar","Version":"1.0.3","URL":"http://isotope.wbell.dev/isotope-download?name=http.ar\u0026version=1.0.3","Remote":"isotope.wbell.dev"}]

routes/website/package.ar

@@ -44,5 +44,5 @@ let package(req, res) = do
         if (versioni == "latest") versions.insert(0, html)
         else versions.append(html)
     let author = account.getById(package.get("owner")) || {username:"Unknown", id:""}
-    res.renderTemplate("package.html", {name:name, description: package.get("description", ""), 'short-description': package.get("short-description", ""), repository:package.get("repository", "https://github.com/"), license: package.get("license", "Unspecified"), author: author.username, authorPage: '/author?'+url.queryStr({id:author.id}), version:version, versions:versions.join(""), command:command, commandComma:command.replace("'", "\\'")})
+    res.renderTemplate("package.html", {name:name, description: package.get("description", ""), 'short-description': package.get("short-description", ""), keywords:package.get("keywords", []).join(', '), repository:package.get("repository", "https://github.com/"), license: package.get("license", "Unspecified"), author: author.username, authorPage: '/author?'+url.queryStr({id:author.id}), version:version, versions:versions.join(""), command:command, commandComma:command.replace("'", "\\'")})
 app.route("/package", null, package)

routes/website/search.ar

@@ -7,15 +7,33 @@ import "render" as renderer
 let search(req, res) = do
     let acc = account.getByToken(req.cookies.get("token", ""))
     let query = req.query.get("q", "")
+    let lowerQuery = query.lower()
     let keys = packages.keys()
     keys.sort()
-    let render = []
+    let namedSearch = []
+    let descriptionSearch = []
     let results = 0
     for (i from 0 to keys.length) do
         let name = keys[i]
         let package = packages[name]
-        if (query.lower() in name.lower()) do
-            render.append("<a href='/package?"+url.queryStr({name:name})+"'>"+bleach.clean(name)+"</a>")
+        let element() = "<a href='/package?"+url.queryStr({name:name})+"'><h1>"+bleach.clean(name)+"</h1><p>"+bleach.clean(package.get("short-description",""))+"</p></a>"
+        if (lowerQuery in name.lower()) do
+            namedSearch.append(element())
             results = results + 1
+            continue
+        else if (lowerQuery in package.get("description", "").lower()) do
+            descriptionSearch.append(element())
+            results = results + 1
+            continue
+        let keywords = package.get("keywords", [])
+        for (j from 0 to keywords.length) do
+            let keyword = keywords[j]
+            if (keyword.lower() in lowerQuery) do
+                descriptionSearch.append(element())
+                results = results + 1
+                break
+    let render = []
+    render.extend(namedSearch)
+    render.extend(descriptionSearch)
     res.renderTemplate("search.html", {query:query, numOfResults:results, results:render.join(""), navbar:renderer.navbar(acc)})
 app.route("/search", null, search)

static/styles.css

@@ -204,8 +204,9 @@ input:focus {
     word-wrap: break-word;
 }
 
-.description-pre {
+.description {
     font-family: 'Trebuchet MS';
+    white-space: pre;
 }
 
 .form {
@@ -266,4 +267,31 @@ input:focus {
 
 .atributes div {
     margin: 1rem 0;
+}
+
+.package {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: stretch;
+    justify-content: center;
+    align-items: stretch;
+}
+
+.package .info {
+    width: 100%;
+}
+
+.package .versions {
+    width: 100%;
+    max-width: 250px;
+}
+
+@media (max-width: 750px) {
+    .package .versions {
+        max-width: 100%;
+    }
+    .package {
+        flex-direction: column;
+    }
 }

templates/editPackage.html

@@ -95,7 +95,7 @@
                     <p class="error">{{error}}</p>
                     <input
                         type="submit"
-                        value="Create Package"
+                        value="Edit Package"
                         class="submit"
                     />
                 </form>

templates/package.html

@@ -48,37 +48,45 @@
         <script src="/script.js"></script>
         <meta name="description" content="{{short-description}}" />
         <meta name="keywords" content="{{keywords}}" />
+        <meta property="og:title" content="{{name}}@{{version}}" />
+        <meta property="og:image" content="/android-chrome-512x512.png" />
+        <meta property="og:description" content="{{short-description}}" />
+        <meta name="twitter:card" content="Isotope Package Manager" />
     </head>
     <body>
         <div class="content">
             {{%navbar}}
-            <div>
-                <h1>{{name}}@{{version}}</h1>
-                <pre class="description-pre">{{description}}</pre>
-                <div class="split"></div>
-                <div class="atributes">
-                    <div>
-                        <h2>Author</h2>
-                        <a href="{{authorPage}}">{{author}}</a>
-                    </div>
-                    <div>
-                        <h2>Repository</h2>
-                        <a href="{{repository}}">{{repository}}</a>
-                    </div>
-                    <div>
-                        <h2>License</h2>
-                        <p>{{license}}</p>
+            <div class="package">
+                <div class="info">
+                    <h1>{{name}}@{{version}}</h1>
+                    <div class="description">{{description}}</div>
+                    <div class="split"></div>
+                    <div class="atributes">
+                        <div>
+                            <h2>Author</h2>
+                            <a href="{{authorPage}}">{{author}}</a>
+                        </div>
+                        <div>
+                            <h2>Repository</h2>
+                            <a href="{{repository}}">{{repository}}</a>
+                        </div>
+                        <div>
+                            <h2>License</h2>
+                            <p>{{license}}</p>
+                        </div>
                     </div>
+                    <div class="split"></div>
+                    <h2>Installation</h2>
+                    <pre
+                        class="copyable-pre"
+                        onclick="copyToClipboard(event.target.dataset.command)"
+                        data-command="{{command}}"
+                    >{{command}}<div style="float: right;margin-left: 1rem;">📋 Click to Copy</div></pre>
+                </div>
+                <div class="versions">
+                    <h2>Versions</h2>
+                    <div class="results">{{%versions}}</div>
                 </div>
-                <div class="split"></div>
-                <h2>Installation</h2>
-                <pre
-                    class="copyable-pre"
-                    onclick="copyToClipboard(event.target.dataset.command)"
-                    data-command="{{command}}"
-                >{{command}}<div style="float: right;margin-left: 1rem;">📋 Click to Copy</div></pre>
-                <h2>Versions</h2>
-                <div class="results">{{%versions}}</div>
             </div>
         </div>
     </body>