From 8c72a4bff8cef65598419ccaac8d9873aa57d7d2 Mon Sep 17 00:00:00 2001
From: nikurasu <publicmail@nikurasu.gay>
Date: Sat, 30 Mar 2024 11:53:08 +0100
Subject: [PATCH] feat(service-box): add service box

---
 public/assets/icons/bitwarden.svg |  7 +++++
 public/assets/icons/jellyfin.svg  | 24 +++++++++++++++
 src/App.vue                       | 18 +++++++++++-
 src/assets/defaults.json          | 18 +++++++++++-
 src/components/ServiceBox.vue     | 49 +++++++++++++++++++++++++++++++
 5 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100755 public/assets/icons/bitwarden.svg
 create mode 100755 public/assets/icons/jellyfin.svg
 create mode 100644 src/components/ServiceBox.vue

diff --git a/public/assets/icons/bitwarden.svg b/public/assets/icons/bitwarden.svg
new file mode 100755
index 0000000..975cff5
--- /dev/null
+++ b/public/assets/icons/bitwarden.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1">
+ <rect style="opacity:0.2" width="58" height="58" x="-62" y="-61" rx="2.9" ry="2.9" transform="matrix(0,-1,-1,0,0,0)"/>
+ <rect style="fill:#175ddc" width="58" height="58" x="-61" y="-61" rx="2.9" ry="2.9" transform="matrix(0,-1,-1,0,0,0)"/>
+ <path style="opacity:0.1;fill:#ffffff" d="M 5.8984375 3 C 4.2918373 3 3 4.2918373 3 5.8984375 L 3 6.8984375 C 3 5.2918373 4.2918373 4 5.8984375 4 L 58.101562 4 C 59.708163 4 61 5.2918373 61 6.8984375 L 61 5.8984375 C 61 4.2918373 59.708163 3 58.101562 3 L 5.8984375 3 z"/>
+ <path style="opacity:0.2" d="M 32,14 C 32,14 16.21,14.009 15.809,14.25 14.957,14.761 15,14.128 15,26.035 15,38.118 14.985,37.876 15.914,40.219 16.983,42.914 18.705,45.192 21.531,47.668 23.903,49.745 26.715,51.626 29.852,53.223 30.913,53.763 31.461,54.009 32,54 32.539,54.009 33.087,53.763 34.148,53.223 37.285,51.626 40.097,49.745 42.469,47.668 45.295,45.192 47.017,42.914 48.086,40.219 49.015,37.876 49,38.118 49,26.035 49,14.128 49.043,14.761 48.191,14.25 47.79,14.009 32,14 32,14 Z M 32,20 H 43 V 36 C 43,36 42.994,36.781 42.508,38.008 41.825,39.729 40.878,41.088 38.516,43.156 36.723,44.726 34.463,46.18 32,47.492 Z"/>
+ <path style="fill:#efefef" d="M 32,13 C 32,13 16.21,13.009 15.809,13.25 14.957,13.761 15,13.128 15,25.035 15,37.118 14.985,36.876 15.914,39.219 16.983,41.914 18.705,44.192 21.531,46.668 23.903,48.745 26.715,50.626 29.852,52.223 30.913,52.763 31.461,53.009 32,53 32.539,53.009 33.087,52.763 34.148,52.223 37.285,50.626 40.097,48.745 42.469,46.668 45.295,44.192 47.017,41.914 48.086,39.219 49.015,36.876 49,37.118 49,25.035 49,13.128 49.043,13.761 48.191,13.25 47.79,13.009 32,13 32,13 Z M 32,19 H 43 V 35 C 43,35 42.994,35.781 42.508,37.008 41.825,38.729 40.878,40.088 38.516,42.156 36.723,43.726 34.463,45.18 32,46.492 Z"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/icons/jellyfin.svg b/public/assets/icons/jellyfin.svg
new file mode 100755
index 0000000..e90647c
--- /dev/null
+++ b/public/assets/icons/jellyfin.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- ***** BEGIN LICENSE BLOCK *****
+  - Part of the Jellyfin project (https://jellyfin.media)
+  - 
+  - All copyright belongs to the Jellyfin contributors; a full list can
+  - be found in the file CONTRIBUTORS.md
+  - 
+  - This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
+  - To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.
+- ***** END LICENSE BLOCK ***** -->
+<svg version="1.1" id="icon-transparent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+	<defs>
+		<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="110.25" y1="213.3" x2="496.14" y2="436.09">
+			<stop offset="0" style="stop-color:#AA5CC3"/>
+			<stop offset="1" style="stop-color:#00A4DC"/>
+		</linearGradient>
+	</defs>
+	<title>icon-transparent</title>
+	<g id="icon-transparent">
+		<path id="inner-shape" d="M256,201.6c-20.4,0-86.2,119.3-76.2,139.4s142.5,19.9,152.4,0S276.5,201.6,256,201.6z" fill="url(#linear-gradient)"/>
+		<path id="outer-shape" d="M256,23.3c-61.6,0-259.8,359.4-229.6,420.1s429.3,60,459.2,0S317.6,23.3,256,23.3z
+		M406.5,390.8c-19.6,39.3-281.1,39.8-300.9,0s110.1-275.3,150.4-275.3S426.1,351.4,406.5,390.8z" fill="url(#linear-gradient)"/>
+	</g>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index 67e7357..f3f4b54 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import TitleHeader from './components/TitleHeader.vue'
+import ServiceBox from './components/ServiceBox.vue'
 import defaults from './assets/defaults.json'
 
 onMounted(async () => {
@@ -15,8 +16,23 @@ const config = ref({})
 
 <template>
   <TitleHeader :title="config.title" :catchphrase="config.catchphrase" :subtitle="config.subtitle"></TitleHeader>
+  <main>
+    <template v-for="service in config.services">
+      <ServiceBox :service="service"></ServiceBox>
+    </template>
+  </main>
 </template>
 
 <style scoped lang="scss">
-
+main {
+  margin-top: 2.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 20rem)  ;
+  gap: 2.5rem;
+  justify-content: center;
+  font-size: 1.15rem;
+  max-width: 90vw;
+  margin-right: auto;
+  margin-left: auto;
+}
 </style>
diff --git a/src/assets/defaults.json b/src/assets/defaults.json
index 6bb296c..dc4ed06 100644
--- a/src/assets/defaults.json
+++ b/src/assets/defaults.json
@@ -1,5 +1,21 @@
 {
     "title": "cat-enby.club",
     "catchphrase": "~~~nyaa",
-    "subtitle": "Services hosted by a cat for cats (=^･ω･^=) ... and any other beeings!"
+    "subtitle": "Services hosted by a cat for cats (=^･ω･^=) ... and any other beeings!",
+    "services": [
+        {
+            "name": "Jellyfin",
+            "summary": "Jellyfin is the volunteer-built media solution that puts you in control of your media. Stream to any device from your own server, with no strings attached.",
+            "linktext": "media.cat-enby.club",
+            "hyperlink": "https://media.cat-enby.club",
+            "icon": "/assets/icons/jellyfin.svg"
+        },
+        {
+            "name": "Bitwarden",
+            "summary": "Bitwarden is an integrated open source password management solution for individuals, teams, and business organizations.",
+            "linktext": "vault.cat-enby.club",
+            "hyperlink": "https://vault.cat-enby.club",
+            "icon": "/assets/icons/bitwarden.svg"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/src/components/ServiceBox.vue b/src/components/ServiceBox.vue
new file mode 100644
index 0000000..44b23da
--- /dev/null
+++ b/src/components/ServiceBox.vue
@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+    service: Object
+})
+</script>
+<template>
+    <fieldset>
+        <legend>{{ service.name }}</legend>
+        <section class="content">
+            <section class="top">
+                <img :src="service.icon" :alt="service.name + ' icon'">
+                <a :href="service.hyperlink">{{ service.linktext }}</a>
+            </section>
+            <p>{{ service.summary }}</p>
+        </section>
+    </fieldset>
+</template>
+<style lang="scss">
+fieldset {
+    border: solid 3px;
+    padding: 1rem;
+    border-radius: 5px;
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 1rem;
+      margin-bottom: 1rem;
+
+      img {
+        width: 64px;
+        height: auto;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+}   
+
+  legend {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin: auto;
+  }
+</style>
\ No newline at end of file