add and use anchor shortcode for specific install steps (#363)

Signed-off-by: Etai Lev Ran <[email protected]>

Author: elevran

website/content/en/docs/concepts/sites.md

@@ -9,7 +9,7 @@ A `Site` represents a location, such as a Kubernetes cluster, participating in a
  it wishes to share with other sites. A site is managed by a site administrator,
  which is responsible for running the ClusterLink control and data planes. The
  administrator will typically deploy the ClusterLink components by configuring
- the [deployment CRD]({{< ref "getting-started#setup" >}}). They may also wish to provide
+ the [deployment CRD]({{< ref "getting-started#deploy-crd-instance" >}}). They may also wish to provide
  (often) coarse-grained access policies in accordance with high level corporate
  policies (e.g., "production sites should only communicate with other production sites").
 

website/content/en/docs/getting-started/_index.md

@@ -11,7 +11,7 @@ Before you start, you must have access to a Kubernetes cluster. For example, you
 
 ## Installation
 
-1. To install ClusterLink on Linux or Mac, use the installation script:
+1. {{< anchor install-cli>}}To install ClusterLink on Linux or Mac, use the installation script:
 
     ```sh
     curl -L https://github.com/clusterlink-net/clusterlink/releases/latest/clusterlink.sh | sh -
@@ -39,7 +39,7 @@ Before you start, you must have access to a Kubernetes cluster. For example, you
 
 To set up ClusterLink on a Kubernetes cluster, follow these steps:
 
-1. Create fabric certificates.
+1. {{< anchor create-fabric-ca >}}Create the Fabric's CA certificate and private key.
 
     The ClusterLink Fabric is defined as all Kubernetes clusters (sites) that install ClusterLink gateways and can share services between the clusters, enabling communication among those services.
     First, create the fabric Certificate Authority (CA):
@@ -50,7 +50,7 @@ To set up ClusterLink on a Kubernetes cluster, follow these steps:
 
     This command will create the CA files `<fabric_name>.cert` and `<fabric_name>.key` in the current folder.
 
-1. Create site certificates.
+1. {{< anchor create-site-certs >}}Create site certificates.
 
     Create a site (cluster) certificate:
 
@@ -60,7 +60,7 @@ To set up ClusterLink on a Kubernetes cluster, follow these steps:
 
     This command will create the certificate files `<site_name>.cert` and `<site_name>.key` in a folder named <site_name>. The `--output <path>` flag can be used to change the folder location.
 
-1. Install ClusterLink deployment operator.
+1. {{< anchor install-cl-operator >}}Install ClusterLink deployment operator.
 
     To install ClusterLink on the site, first, install the ClusterLink deployment operator.
 
@@ -71,7 +71,7 @@ To set up ClusterLink on a Kubernetes cluster, follow these steps:
     This command will deploy the ClusterLink deployment operator on the `clusterlink-operator` namespace and convert the site certificates to secrets in the namespace.
     The command assumes that kubectl is set to the correct site (Kubernetes cluster) and that the certificates were created in the local folder. If they were not, use the flag `-f <path>`.
 
-1. Deploy clusterlink CRD instance.
+1. {{< anchor deploy-crd-instance >}}Deploy clusterlink CRD instance.
 
     After the operator is installed, you can deploy ClusterLink by applying the ClusterLink instance CRD:
 
@@ -98,4 +98,5 @@ To deploy ClusterLink on another cluster, please repeat steps 2-4 in the console
 
 ## Try it out
 
-Check out the [ClusterLink Tutorials]({{< ref "tutorials" >}}) for setting up multi-cluster connectivity for applications using two or more clusters.
+Check out the [ClusterLink Tutorials]({{< ref "tutorials" >}}) for setting up
+ multi-cluster connectivity for applications using two or more clusters.

website/layouts/shortcodes/abbr.html

@@ -0,0 +1,7 @@
+<!--
+    from https://doc.huc.fr.eu.org/en/web/hugo/hugo-shortcodes/
+    usage: abbr acronym "meaning of acronym"
+        this will output `acronym` as text on page and add a tooltip displaying
+        "meaning of acronym" when hovering above the acronym
+-->
+<abbr {{ .Get 1 | printf `title=%q` | safeHTMLAttr }}>{{ .Get 0 | safeHTML }}</abbr>

website/layouts/shortcodes/anchor.html

@@ -0,0 +1,13 @@
+<!-- 
+    usage: anchor "anchor-name" (or anchor id="anchor name")
+        this will output an HTML anchor element named `anchor-name`
+        which can then be referenced elsewhere
+-->
+
+{{ if .IsNamedParams }}
+{{ $id := .Get `id` | lower | safeHTML }}{{ $anchor := anchorize $id }}
+<a id="{{ $anchor }}"></a>
+{{ else }}
+{{ $id := .Get 0 | lower | safeHTML }}{{ $anchor := anchorize $id }}
+<a id="{{ $anchor }}"></a>
+{{ end }}