Improve links on asset pages

Author: CodeDoctorDE

Cargo.lock

@@ -8,4 +8,4 @@ edition = "2024"
 [dependencies]
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-toml = "1.0"
+toml = "1"

api/Cargo.toml

@@ -8,7 +8,7 @@ edition = "2024"
 [dependencies]
 clap = { version = "4", features = ["derive"] }
 luna_api = { path = "../api" }
-toml = "1.0"
+toml = "1"
 serde = { version = "1", features = ["derive"] }
 thiserror = "2"
 serde_json = "1"

cli/Cargo.toml

@@ -1,37 +1,42 @@
 {{#> layouts/main.hbs title=asset.name active_page="" }}
-<section class="pb-sm card paper mb-md gap-xs p-sm" aria-label="Asset Header">
-    <div class="row wrap align-start justify-between">
-        <h1 class="flex">{{asset.name}}</h1>
-        <a class="btn primary {{#if (eq activeTab 'download')}}active{{/if}}" href="{{asset.author}}/{{asset.name}}/download.html">Download {{asset.current_version.name}}</a>
+<section class="pb-sm row wrap mb-md gap-sm" aria-label="Asset Header">
+  <div class="card paper p-sm min-w-md flex-3">
+    <div class="row wrap align-start justify-between gap-sm">
+      <h1 class="flex m-none">{{asset.name}}</h1>
     </div>
     <p class="m-none">by <a href="{{asset.author}}">{{asset.author}}</a></p>
     {{#if asset.categories}}
-      <div class="row gap-xs">
+      <div class="row gap-xs wrap align-center">
         <p class="m-none">Categories:</p>
-        <ul class="row gap-xs align-center">
+        <ul class="row gap-xs align-center m-none p-none" style="list-style: none;">
           {{#each asset.categories}}
             <li><a class="badge" href="categories/{{slug this}}.html">{{this}}</a></li>
           {{/each}}
         </ul>
       </div>
     {{/if}}
-    <nav aria-label="Asset navigation" class="row wrap justify-between">
-        <ul class="row wrap gap-xs">
-            <li><a class="btn {{#if (eq activeTab 'home')}}active{{/if}}" href="{{asset.author}}/{{asset.name}}">Home</a></li>
-            <li><a class="btn {{#if (eq activeTab 'changes')}}active{{/if}}" href="{{asset.author}}/{{asset.name}}/changes.html">Changes</a></li>
-        </ul>
-        <ul class="row wrap gap-xs">
-          {{#if asset.website}}
-          <a class="btn secondary" href="{{asset.website}}" target="_blank" rel="noopener noreferrer">Website</a>
-          {{/if}}
-          {{#if asset.source}}
-          <a class="btn secondary" href="{{asset.source}}" target="_blank" rel="noopener noreferrer">Source</a>
-          {{/if}}
-          {{#if asset.sponsor}}
-          <a class="btn secondary" href="{{asset.sponsor}}" target="_blank" rel="noopener noreferrer">Sponsor</a>
-          {{/if}}
-        </ul>
+    <nav aria-label="Asset navigation" class="row wrap justify-between gap-sm">
+      <ul class="row wrap gap-xs m-none p-none justify-between" style="list-style: none;">
+        <li><a class="btn {{#if (eq activeTab 'home')}}active{{/if}}" href="{{asset.author}}/{{asset.name}}">Home</a></li>
+        <li><a class="btn {{#if (eq activeTab 'changes')}}active{{/if}}" href="{{asset.author}}/{{asset.name}}/changes.html">Changes</a></li>
+      </ul>
     </nav>
+  </div>
+  <div class="card paper p-sm min-w-md flex-1 col">
+      <a class="btn primary {{#if (eq activeTab 'download')}}active{{/if}}" href="{{asset.author}}/{{asset.name}}/download.html">Download {{asset.current_version.name}}</a>
+    <ul class="col wrap gap-xs m-none p-none flex justify-end" style="list-style: none;">
+      {{#if asset.website}}
+        <li><a class="btn secondary" href="{{asset.website}}" target="_blank" rel="noopener noreferrer">Website</a></li>
+      {{/if}}
+      {{#if asset.source}}
+        <li><a class="btn secondary" href="{{asset.source}}" target="_blank" rel="noopener noreferrer">Source</a></li>
+      {{/if}}
+      {{#if asset.sponsor}}
+        <li><a class="btn secondary" href="{{asset.sponsor}}" target="_blank" rel="noopener noreferrer">Sponsor</a></li>
+      {{/if}}
+    </ul>
+  </div>
 </section>
+
 {{> @partial-block }}
 {{/layouts/main.hbs}}

cli/assets/layouts/asset.hbs

@@ -11,13 +11,13 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.8",
-    "@astrojs/react": "^5.0.1",
+    "@astrojs/react": "^5.0.2",
     "@astrojs/starlight": "^0.38.2",
     "@linwooddev/style": "github:LinwoodDev/style#efbdf8f05d4ef1cf6fec65c90194d30b68b3c64e&path:/packages/web",
     "@phosphor-icons/react": "^2.1.10",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "astro": "^6.0.8",
+    "astro": "^6.1.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "remark-gemoji": "^8.0.0",