Update linking apps docs (#769)

* Update linking apps doc

* Formatting, rewording $NAMES

* fix label divs

docs/_static/form.css

@@ -1,5 +1,3 @@
-
-
 .form {
   background-color: #15172b;
   border-radius: 20px;
@@ -61,13 +59,15 @@
   top: -20px;
   transform: translateY(0);
   transition: transform 200ms;
-  width: 76px;
+  width: 115px;
 }
 
-.cut-short {
+.cut-short-name {
-  width: 50px;
+  width: 52px;
+}
+.cut-short-app {
+  width: 41px;
 }
-
 .input:focus ~ .cut,
 .input:not(:placeholder-shown) ~ .cut {
   transform: translateY(8px);

docs/manual/Quick-Start Guides/14-linking-apps.md

@@ -8,38 +8,53 @@ The backend for TrueNAS SCALE Apps is Kubernetes. Linking apps together in Kuber
 
 Instead we need to use their internal(!) domain name. Please beware: this name is only available between Apps and can not be reached from the host/node or your own PC.
 
-The format for internal domain name for the main service is as follows, please replace `$APPNAME` with the name you gave your App when installing.
+The format for internal domain name for the main service is explained bellow.
+Please replace `$NAME` with the name you gave your App when installing and `$APPNAME` with the name the app has on the catalog where is needed.
 
-- `$APPNAME.ix-$APPNAME.svc.cluster.local`
+**If your app has the _same_ name as in the catalog, the format is as follows.**
+
+- `$NAME.ix-$NAME.svc.cluster.local`
+
+**If your app has _different_ name than in the catalog, the format is as follows**
+
+- `$NAME-$APPNAME.ix-$NAME.svc.cluster.local`
 
 Kubernetes can usually identify the app when omitting `svc.cluster.local` as well:
-- `$APPNAME.ix-$APPNAME`
+
+- `$NAME.ix-$NAME` or
+- `$NAME-$APPNAME.ix-$NAME`
 
 If you need to reach a different service (which is not often the case!), you need a slightly different format, where `$SVCNAME` is the name of the service you want to reach:
 
-- `$SVCNAME.ix-$APPNAME.svc.cluster.local` or
+**If your app has the _same_ name as in the catalog, the format is as follows.**
-- `$SVCNAME.ix-$APPNAME`
+
+- `$NAME-$SVCNAME.ix-$NAME.svc.cluster.local` or
+- `$NAME-$SVCNAME.ix-$NAME`
+
+**If your app has _different_ name than in the catalog, the format is as follows**
+
+- `$NAME-$APPNAME-$SVCNAME.ix-$NAME.svc.cluster.local` or
+- `$NAME-$APPNAME-$SVCNAME.ix-$NAME`
 
 ##### Internal Domain Name generator
 
-
 <link href="https://truecharts.org/_static/form.css" type="text/css" rel="stylesheet" />
 <FORM id="frameform"><BR>
 <div class="form">
   <div class="subtitle">Generate Internal DNS Name:</div>
   <div class="input-container ic1">
     <input required id="name" class="input" type="text" placeholder=" " />
-    <div class="cut"></div>
+    <div class="cut cut-short-name"></div>
     <label for="name" class="placeholder">Name</label>
   </div>
   <div class="input-container ic2">
     <input required id="app" class="input" type="text" placeholder=" " />
-    <div class="cut"></div>
+    <div class="cut cut-short-app"></div>
     <label for="app" class="placeholder">App</label>
   </div>
   <div class="input-container ic2">
     <input id="service" class="input" type="text" placeholder=" " />
-    <div class="cut cut-short"></div>
+    <div class="cut"></div>
     <label for="service" class="placeholder">Service (Optional)</>
   </div>
   <INPUT TYPE="submit" class="submit" NAME="button" Value="Generate">
@@ -73,12 +88,11 @@ function submit(event) {
 }
 </SCRIPT>
 
-
-
 ##### Example
 
-To reach an app named "sabnzbd" within Sonarr, we can use the following internal domain name:
+To reach an app named "sabnzbd" (same name as the catalog app name) within Sonarr, we can use the following internal domain name:
 
+- `sabnzbd.ix-sabnzbd.svc.cluster.local` or
 - `sabnzbd.ix-sabnzbd`
 
 <a href="https://truecharts.org/_static/img/linking/linking-example-sonarrsabnzbd.png"><img src="https://truecharts.org/_static/img/linking/linking-example-sonarrsabnzbd.png" width="100%"/></a>