fix(web-ui): add documentation link and version-aware URLs (#5176)

src_assets/common/assets/web/ResourceCard.vue

@@ -8,6 +8,10 @@
                   <Globe :size="18" class="icon"></Globe>
                   {{ $t('resource_card.lizardbyte_website') }}
                 </a>
+                <a class="btn btn-info" :href="documentationUrl" target="_blank">
+                  <BookOpen :size="18" class="icon"></BookOpen>
+                  {{ $t('resource_card.documentation') }}
+                </a>
                 <a class="btn btn-primary" href="https://app.lizardbyte.dev/discord" target="_blank">
                   <SimpleIcon icon="Discord" :size="18" class="icon"></SimpleIcon>
                   Discord
@@ -43,17 +47,31 @@
 <script>
 import {
   AlertCircle,
+  BookOpen,
   FileText,
   Globe,
 } from 'lucide-vue-next'
 import SimpleIcon from './SimpleIcon.vue'
 
 export default {
+  props: {
+    installedVersionNotStable: {
+      type: Boolean,
+      default: false
+    }
+  },
   components: {
     SimpleIcon,
     AlertCircle,
+    BookOpen,
     FileText,
     Globe,
+  },
+  computed: {
+    documentationUrl() {
+      const docsVersion = this.installedVersionNotStable ? 'master' : 'latest'
+      return `https://docs.lizardbyte.dev/projects/sunshine/${docsVersion}/`
+    }
   }
 }
 </script>

src_assets/common/assets/web/apps.html

@@ -416,7 +416,7 @@
             <pre>sh -c "displayplacer "id:&lt;screenId&gt; res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:${SUNSHINE_CLIENT_FPS} scaling:on origin:(0,0) degree:0""</pre>
           </div>
           <div class="form-text"><a
-              href="https://docs.lizardbyte.dev/projects/sunshine/latest/md_docs_2app__examples.html"
+              :href="`${documentationBaseUrl}/md_docs_2app__examples.html`"
               target="_blank">{{ $t('_common.see_more') }}</a></div>
         </div>
         <!-- Save buttons -->
@@ -514,6 +514,7 @@
   import Navbar from './Navbar.vue'
   import Checkbox from './Checkbox.vue'
   import { apiFetch } from './fetch_utils'
+  import SunshineVersion from './sunshine_version'
   import { Modal } from 'bootstrap/dist/js/bootstrap'
   import {
     ArrowDown,
@@ -588,9 +589,21 @@
         fileBrowserTypedPath: "",
         searchQuery: "",
         sortMode: "default",
+        version: null,
+        githubVersion: null,
       };
     },
     computed: {
+      installedVersionNotStable() {
+        if (!this.githubVersion || !this.version) {
+          return false;
+        }
+        return this.version.isGreater(this.githubVersion);
+      },
+      documentationBaseUrl() {
+        const docsVersion = this.installedVersionNotStable ? 'master' : 'latest'
+        return `https://docs.lizardbyte.dev/projects/sunshine/${docsVersion}`
+      },
       displayedApps() {
         let list = this.apps.map((app, index) => ({ app, index }));
 
@@ -644,7 +657,15 @@
 
       fetch("./api/config")
         .then(r => r.json())
-        .then(r => this.platform = r.platform);
+        .then(r => {
+          this.platform = r.platform;
+          this.version = new SunshineVersion(null, r.version);
+        });
+
+      fetch("https://api.github.com/repos/LizardByte/Sunshine/releases/latest")
+        .then((r) => r.json())
+        .then((r) => this.githubVersion = new SunshineVersion(r, null))
+        .catch((e) => console.error(e));
     },
     methods: {
       newApp() {

src_assets/common/assets/web/index.html

@@ -121,7 +121,7 @@
 
     <!-- Resources -->
     <div class="my-4">
-      <Resource-Card></Resource-Card>
+      <Resource-Card :installed-version-not-stable="installedVersionNotStable"></Resource-Card>
     </div>
   </div>
 </body>

src_assets/common/assets/web/public/assets/locale/en.json

@@ -478,6 +478,7 @@
     "warning_msg": "Make sure you have access to the client you are pairing with. This software can give total control to your computer, so be careful!"
   },
   "resource_card": {
+    "documentation": "Documentation",
     "github_discussions": "GitHub Discussions",
     "legal": "Legal",
     "legal_desc": "By continuing to use this software you agree to the terms and conditions in the following documents.",