hyperion-project · Paulchen-Panther · Mar 30, 2024 · Mar 30, 2024 · Mar 30, 2024 · Mar 30, 2024
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -24,7 +24,7 @@ export default defineConfig({
     notFoundLight: '/notFound.png',
     notFoundDark: '/notFoundDark.png',
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/hyperion-project/hyperion.ng' },
+      { icon: 'github', link: 'https://github.com/hyperion-project/hyperion.docs' },
       { icon: 'discord', link: 'https://discord.com/invite/XtVTb3HEKS' }
     ],
     logo: {

diff --git a/docs/.vitepress/configs/navbar/de.ts b/docs/.vitepress/configs/navbar/de.ts
@@ -63,5 +63,13 @@ export const navbar_DE: any = [
         ]
       }
     ]
-  }
+  },
+  {
+    text: "Forum",
+    link: 'https://hyperion-project.org'
+  },
+  {
+    text: '❤️ Sponsor',
+    link: 'https://www.paypal.me/HyperionAmbi'
+  },
 ]
diff --git a/docs/.vitepress/configs/navbar/en.ts b/docs/.vitepress/configs/navbar/en.ts
@@ -64,5 +64,12 @@ export const navbar_EN: any = [
       },
     ]
   },
-  { text: "Forum", link: 'https://hyperion-project.org' }
+  {
+    text: "Forum",
+    link: 'https://hyperion-project.org'
+  },
+  {
+    text: '❤️ Sponsor',
+    link: 'https://www.paypal.me/HyperionAmbi'
+  },
 ]
diff --git a/docs/.vitepress/theme/components/Contributors.vue b/docs/.vitepress/theme/components/Contributors.vue
@@ -0,0 +1,94 @@
+<!-- Idea from: https://github.com/MitanOmar/timed-docs/blob/main/components/contributors.vue -->
+
+<template>
+  <div>
+    <div class="contributors-container">
+      <a
+        v-for="{ login, avatar_url, html_url } of data.contributors"
+        :href="html_url"
+        :target="'_blank'"
+      >
+        <img
+          :src="avatar_url"
+          v-tooltip='{
+            html: true,
+            content: `<b>${login}</b>`
+          }'
+          class="contributor-avatar"
+        >
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+
+interface GithubUser {
+  login: string;
+  avatar_url: string;
+  html_url: string;
+  type: string;
+}
+
+const data = reactive({
+  contributors: [] as GithubUser[],
+});
+
+onMounted(async () => {
+  try {
+    const pages = [1, 2];
+    const responsesNG = await Promise.all(
+      pages.map(page => fetch(`https://api.github.com/repos/hyperion-project/hyperion.ng/contributors?per_page=100&page=${page}`))
+    );
+
+    const responseDOCS = await fetch('https://api.github.com/repos/hyperion-project/hyperion.docs/contributors?per_page=100');
+
+    const users: GithubUser[] = [];
+    for (const response of responsesNG) {
+      const data = await response.json();
+      users.push(...data);
+    }
+
+    const data2 = await responseDOCS.json();
+    users.push(...data2);
+
+    data.contributors = removeDuplicatedUsers(users);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+});
+
+const removeDuplicatedUsers = (users: GithubUser[]): GithubUser[] => {
+  const uniqueUsers: GithubUser[] = [];
+  const userMap: Map<string, boolean> = new Map();
+
+  for (const user of users) {
+    if (!userMap.has(user.login)) {
+      userMap.set(user.login, true);
+      uniqueUsers.push(user);
+    }
+  }
+
+  return uniqueUsers;
+};
+</script>
+
+<style>
+.contributors-container {
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: .8rem;
+  gap: .8rem;
+}
+
+.contributor-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+  transition: all ease .3s;
+  &:hover {
+    box-shadow: 0 0 0 3px var(--vp-c-bg), 0 0 0 5px var(--vp-c-text-1);
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -2,6 +2,10 @@ import DefaultTheme from 'vitepress/theme'
 import { h } from 'vue'
 import ExtendedLayout from './components/ExtendedLayout.vue'
 import ImageWrap from './components/ImageWrap.vue'
+import Contributors from './components/Contributors.vue'
+import FloatingVue from 'floating-vue'
+
+import 'floating-vue/dist/style.css'
 import './styles/index.css'
 
 export default {
@@ -11,5 +15,7 @@ export default {
   },
   enhanceApp({ app }) {
     app.component('ImageWrap', ImageWrap)
+    app.component('Contributors', Contributors)
+    app.use(FloatingVue)
   }
 }
diff --git a/docs/.vitepress/theme/styles/index.css b/docs/.vitepress/theme/styles/index.css
@@ -6,7 +6,9 @@
   /* Global conic gradient */
   --conic-gradient: conic-gradient(from 45deg, red, orange, yellow, green, blue, indigo, violet, red);
 
-  --vp-layout-max-width: 1920px;
+  @media (min-width: 1850px) {
+    --vp-layout-max-width: 1920px;
+  }
 
   /* Scrollbar */
   scroll-behavior: smooth;
@@ -95,10 +97,15 @@
   padding-left: 16px !important;
 }
 
-.vp-doc a {
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
+.vp-doc {
+  ul {
+    padding-left: 2rem;
+  }
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
@@ -146,4 +153,14 @@
 
 .item .VPFeature:hover:before {
   opacity: 1;
-}
+}
+
+.VPNavBarMenu>a:last-child:hover {
+	color:red !important;
+}
+
+.v-popper--theme-tooltip .v-popper__inner {
+  background: var(--vp-sidebar-bg-color);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-text-1);
+}
diff --git a/docs/de/index.md b/docs/de/index.md
@@ -18,7 +18,7 @@ hero:
       text: Was ist Hyperion?
       link: /de/user/Introduction.md
     - theme: alt
-      text: Los geht's
+      text: 🚀 Los geht's
       link: /de/user/GettingStarted.md
 
 features:

diff --git a/docs/de/user/Introduction.md b/docs/de/user/Introduction.md
@@ -1,29 +1,33 @@
 # Einführung
 
+👋🏽 Willkommen bei Hyperion! Wir, das Hyperion Project Team freuen uns sehr dich hier zu sehen! Wenn du Hyperion noch nicht kennst, lass es uns kurz vorstellen.
+
+## 💡 Was ist Hyperion?
+
 [Hyperion](https://github.com/hyperion-project/hyperion.ng) ist eine **freie und quelloffene** (unter der MIT Lizenz) Ambilight Software-Implementierung für **GNU/Linux**, **macOS** und **Windows**, die du vielleicht von einem nicht weiter genannten TV-Hersteller kennst.
 Es unterstützt eine Vielzahl von verschiedenen LED-Geräten und Video Erfassungsmethoden.
 
 In einfachen Worten, unsere Software verarbeitet Video Eingangssignale und wandelt diese Signal in Umgebungslicht um.
 
-## Eigenschaften
-- Geringe CPU-Last, ideal für SoCs wie Raspberry Pi
+## 🔥 Eigenschaften
+- Geringe Prozessor Last, ideal für SoCs wie Raspberry Pi
 - JSON-Schnittstelle (API) für einfache Integration in Skripte oder andere Anwendungen
 - Kommandozeilenprogramm zum Testen und zur Integration in eine automatisierte Umgebung
 - Prioritätskanäle sind nicht an einen bestimmten Anbieter von LED-Daten gebunden, d.h. ein Anbieter kann LED-Daten hinzufügen und entfernen, ohne eine Verbindung zu Hyperion aufrechterhalten zu müssen.
-- Erkennung von schwarzen Baken
-- Eine Effekt-Engine mit vielen eingebauten Effekten, die zusätzlich eigene Effekte über Python Skripe erlaubt
-- Ein mehrsprachiges Web-Interface zur Konfiguration und Fernsteuerung von Hyperion
+- Erkennung von schwarzen Balken
+- Eine Effekt-Engine mit vielen eingebauten Effekten, die zusätzlich eigene Effekte über Python Skripte erlaubt
+- Ein mehrsprachiges Web-Interface zur Konfiguration und Steuerung von Hyperion
 
-## Sprachen
+## 💬 Sprachen
 - **Verfügbar in mehr als 25 verschiedenen Sprachen** wie Englisch, Deutsch, Französisch, Polnisch, Chinesisch, Japanisch, Russisch, Portugiesisch, Ungarisch, Niederländisch und Spanisch
 - [Deine Hilfe](https://poeditor.com/join/project/Y4F6vHRFjA) können wir immer gebrauchen, um Übersetzungen zu verbessern oder Hyperion in weitere Sprachen zu übersetzen
 
-## Mitwirkende
+## 🧑‍💻 Mitwirkende
 
-[![](https://contrib.rocks/image?repo=hyperion-project/hyperion.ng&columns=16)](https://github.com/hyperion-project/hyperion.ng/graphs/contributors)
+<Contributors />
 
 Dieses Projekt existiert dank all der Menschen, die dazu beitragen.
 
-## Lizenz
+## 📝 Lizenz
 
 Der Quellcode ist unter der MIT-Lizenz veröffentlicht (see <https://opensource.org/licenses/MIT>).
diff --git a/docs/index.md b/docs/index.md
@@ -18,7 +18,7 @@ hero:
       text: What is Hyperion?
       link: /user/Introduction.md
     - theme: alt
-      text: Get started
+      text: 🚀 Get started
       link: /user/GettingStarted.md
 
 features:

diff --git a/docs/user/Introduction.md b/docs/user/Introduction.md
@@ -1,11 +1,15 @@
 # Introduction
 
+Hi 👋🏽 and welcome to Hyperion! We are the Hyperion Project Team, and we’re super excited to have you here! Let us give you a brief introduction to Hyperion.
+
+## 💡 What is Hyperion?
+
 [Hyperion](https://github.com/hyperion-project/hyperion.ng) is an **open source** (MIT) Bias or Ambient Lighting implementation for **GNU/Linux**, **macOS** and **Windows**, which you might know from TV manufacturers.
 It supports many LED devices and video grabbers.
 
 In simple words, this software dynamically processes input video signal (using for example current video framebuffer), and converts it into signal to steer ambient light (using for example LED strips controlled over USB device).
 
-## Features
+## 🔥 Features
 - Low CPU usage, ideal for SoCs such as Raspberry Pi
 - JSON interface (API) for easy integration into scripts or other applications
 - Command line utility for testing and integration into an automated environment
@@ -14,16 +18,16 @@ In simple words, this software dynamically processes input video signal (using f
 - An effects engine with many built-in effects, including the ability to create custom effects via Python scripting
 - A multi-lingual web interface for configuration and remote control of Hyperion
 
-## Languages
+## 💬 Languages
 - **Available in more than 25 different languages** like English, German, French, Polish, Chinese, Japanese, Russian, Portuguese, Hungarian, Dutch and Spanish
 - [Your help](https://poeditor.com/join/project/Y4F6vHRFjA) is very much appreciated to improve these translations or to translate Hyperion in more languages
 
-## Contributors
+## 🧑‍💻 Contributors
 
-[![](https://contrib.rocks/image?repo=hyperion-project/hyperion.ng&columns=16)](https://github.com/hyperion-project/hyperion.ng/graphs/contributors)
+<Contributors />
 
 This project exists thanks to all the people who contribute.
 
-## License
+## 📝 License
 
 The source is released under the MIT-License (see <https://opensource.org/licenses/MIT>).
diff --git a/docs/user/advanced/Advanced.md b/docs/user/advanced/Advanced.md
@@ -126,8 +126,9 @@ You can define multiple event/action sets to configure which action should take
 * **Action**: Action to be applied
 
 ::: details Sample Configuration
-\
+
 <ImageWrap src="/images/en/user_events_scheduled.png" alt="Scheduled Events - Sample" />
+
 :::
 
 ### CEC Events
@@ -139,7 +140,8 @@ You can define multiple event/action sets to configure which action should take
 * **CEC Event**: CEC event that will trigger an action
 
 ::: details Sample Configuration
-\
+
 <ImageWrap src="/images/en/user_events_cec.png" alt="CEC Events -Sample" />
+
 :::
 
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "vitepress": "latest"
   },
   "dependencies": {
+    "floating-vue": "latest",
     "medium-zoom": "latest",
     "moment": "latest"
   }