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

AGENTS.md

@@ -9,3 +9,5 @@ the build directory.
 The project uses gtest as a test framework.
 
 Always follow the style guidelines defined in .clang-format for c/c++ code.
+
+When adding localization do not update any language other than `en`. This also means to exclude en-US or other variants.

docs/app_examples.md

@@ -138,21 +138,21 @@ and applications to Sunshine.
     \|-------------------\|--------------------------------------------------------------\|
     \| Application Name  \| @code{}Surviving Mars@endcode                                \|
     \| Command           \| @code{}MarsSteam@endcode                                     \|
-    \| Working Directory \| @code{}~/.steam/steam/SteamApps/common/Survivng Mars@endcode \|
+    \| Working Directory \| @code{}$(HOME)/.steam/steam/SteamApps/common/Survivng Mars@endcode \|
   }
   @tab{Linux | <!-- -->
     \| Field             \| Value                                                        \|
     \|-------------------\|--------------------------------------------------------------\|
     \| Application Name  \| @code{}Surviving Mars@endcode                                \|
     \| Command           \| @code{}MarsSteam@endcode                                     \|
-    \| Working Directory \| @code{}~/.steam/steam/SteamApps/common/Survivng Mars@endcode \|
+    \| Working Directory \| @code{}$(HOME)/.steam/steam/SteamApps/common/Survivng Mars@endcode \|
   }
   @tab{macOS | <!-- -->
     \| Field             \| Value                                                        \|
     \|-------------------\|--------------------------------------------------------------\|
     \| Application Name  \| @code{}Surviving Mars@endcode                                \|
     \| Command           \| @code{}MarsSteam@endcode                                     \|
-    \| Working Directory \| @code{}~/.steam/steam/SteamApps/common/Survivng Mars@endcode \|
+    \| Working Directory \| @code{}$(HOME)/.steam/steam/SteamApps/common/Survivng Mars@endcode \|
   }
   @tab{Windows | <!-- -->
     \| Field             \| Value                                                                         \|
@@ -169,19 +169,19 @@ and applications to Sunshine.
     \| Field             \| Value                                                                  \|
     \|-------------------\|------------------------------------------------------------------------\|
     \| Application Name  \| @code{}Surviving Mars@endcode                                          \|
-    \| Command           \| @code{}~/.steam/steam/SteamApps/common/Survivng Mars/MarsSteam@endcode \|
+    \| Command           \| @code{}$(HOME)/.steam/steam/SteamApps/common/Survivng Mars/MarsSteam@endcode \|
   }
   @tab{Linux | <!-- -->
     \| Field             \| Value                                                                  \|
     \|-------------------\|------------------------------------------------------------------------\|
     \| Application Name  \| @code{}Surviving Mars@endcode                                          \|
-    \| Command           \| @code{}~/.steam/steam/SteamApps/common/Survivng Mars/MarsSteam@endcode \|
+    \| Command           \| @code{}$(HOME)/.steam/steam/SteamApps/common/Survivng Mars/MarsSteam@endcode \|
   }
   @tab{macOS | <!-- -->
     \| Field             \| Value                                                                  \|
     \|-------------------\|------------------------------------------------------------------------\|
     \| Application Name  \| @code{}Surviving Mars@endcode                                          \|
-    \| Command           \| @code{}~/.steam/steam/SteamApps/common/Survivng Mars/MarsSteam@endcode \|
+    \| Command           \| @code{}$(HOME)/.steam/steam/SteamApps/common/Survivng Mars/MarsSteam@endcode \|
   }
   @tab{Windows | <!-- -->
     \| Field             \| Value                                                                                       \|

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.",