implement package actions

frontend/src/components/PackageInfo/PackageActions.vue

@@ -0,0 +1,25 @@
+<script setup>
+const props = defineProps({
+  pkginfo: Object
+})
+</script>
+
+<template>
+<div id="actionlist">
+  <h4>Package Actions</h4>
+  <ul class="small">
+    <li>
+      <a :href="`https://github.com/BioArchLinux/Packages/tree/master/BioArchLinux/${pkginfo.base}`">Source Files</a>
+    </li>
+    <li>
+      <a>Bug Reports</a>
+    </li>
+    <li>
+      <a :href="`https://wiki.bioarchlinux.org/index.php?search=${pkginfo.name}`">Search Wiki</a>
+    </li>
+    <li>
+      <a :href="`https://repo.bioarchlinux.org/${pkginfo.arch}/${pkginfo.name}-${pkginfo.version}-${pkginfo.arch}.pkg.tar.zst`">Download From Mirror</a>
+    </li>
+  </ul>
+</div>
+</template>

frontend/src/style/_pkginfo.scss

@@ -13,6 +13,24 @@ table.pkginfo {
   }
 }
 
+.right-things {
+  float: right;
+}
+
+#actionlist {
+  padding: .5em;
+  margin-bottom: 1em;
+  background: var(--package-actions-box-bg);
+  border: 1px solid var(--package-actions-box-border-color);
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 0;
+    font-size: .846em;
+  }
+}
+
 .pkginfo-section {
   background: #555;
   color: #fff;

frontend/src/style/_variable.scss

@@ -3,10 +3,15 @@
     --fg: #000;
     --bg: #fff;
 
+    --link-fg: #08c;
+
     --box-bg: #ecf2f5;
 
     --index-thead-border: #000;
     --index-item-hover: #ffd;
+
+    --package-actions-box-bg: #eee;
+    --package-actions-box-border-color: #bbb;
   }
 }
 
@@ -15,9 +20,14 @@
     --fg: rgba(255, 255, 255, 0.87);
     --bg: #000;
 
+    --link-fg: rgb(140, 140, 255);
+
     --box-bg: #212427;
 
     --index-thead-border: #fff;
     --index-item-hover: #424242;
+
+    --package-actions-box-bg: #222;
+    --package-actions-box-border-color: #fff;
   }
 }

frontend/src/style/main.scss

@@ -9,6 +9,19 @@
   padding: 0;
 }
 
+a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+a:link,
+a:visited
+{
+  color: var(--link-fg);
+}
+
 .content {
   padding: 15px;
 }

frontend/src/views/Package.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
+import PackageActions from '@/components/PackageInfo/PackageActions.vue'
 import ViewDetail from '@/components/PackageInfo/ViewDetail.vue'
 
 import moment from 'moment'
@@ -35,6 +36,10 @@ requestPackageInfo(route.params.packageName)
   <div class="box">
     <h2 class="pkgname-header">{{ pkginfo.name }} {{ pkginfo.version }}</h2>
 
+    <div class="right-things">
+      <PackageActions :pkginfo="pkginfo"></PackageActions>
+    </div>
+
     <table class="pkginfo">
       <tbody>
         <tr>
@@ -72,8 +77,6 @@ requestPackageInfo(route.params.packageName)
       </tbody>
     </table>
 
-    <a :href="`https://github.com/BioArchLinux/Packages/tree/master/BioArchLinux/${pkginfo.base}`">View PKGBUILD</a>
-
     <h3 class="pkginfo-section">Dependencies</h3>
     <p v-for="dep in depends"> {{ dep }}</p>
     <p v-for="optdep in optdepends"> {{ optdep }} (optional)</p>