Website: update /fleetctl-preview (#16949)

Changes:
- Updated the /fleetctl preview page to give users a way to install
`fleetctl` using terminal commands without downloading node.
- Added a script to install `fleetctl` on macOS and Linux

website/assets/js/pages/fleetctl-preview.page.js

@@ -3,7 +3,7 @@ parasails.registerPage('fleetctl-preview', {
   //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
   //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
   data: {
-    //…
+    selectedPlatform: 'macos'
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗

website/assets/resources/install-fleet.sh

@@ -0,0 +1,119 @@
+#!/bin/bash
+
+set -e
+
+FLEETCTL_INSTALL_DIR="${HOME}/.fleetctl/"
+FLEETCTL_BINARY_NAME="fleetctl"
+
+
+# Check for necessary commands
+for cmd in curl tar grep sed; do
+    if ! command -v $cmd &> /dev/null; then
+        echo "Error: $cmd is not installed." >&2
+        exit 1
+    fi
+done
+
+echo "Fetching the latest version of fleetctl..."
+
+
+# Fetch the latest version number from NPM
+latest_strippedVersion=$(curl -s "https://registry.npmjs.org/fleetctl/latest" | grep -o '"version": *"[^"]*"' | cut -d'"' -f4)
+echo "Latest version available on NPM: $latest_strippedVersion"
+
+version_gt() {
+  test "$(printf '%s\n' "$@" | sort -V | head -n 1)" != "$1";
+}
+
+# Determine operating system (Linux or MacOS)
+OS="$(uname -s)"
+
+case "${OS}" in
+    Linux*)     OS='linux';;
+    Darwin*)    OS='macos';;
+    *)          echo "Unsupported operating system: ${OS}"; exit 1;;
+esac
+
+# Download the fleetctl binary and extract it into the install directory
+download_and_extract() {
+    echo "Downloading fleetctl ${latest_strippedVersion} for ${OS}..."
+    curl -sSL $DOWNLOAD_URL | tar -xz -C $FLEETCTL_INSTALL_DIR --strip-components=1 fleetctl_v${latest_strippedVersion}_${OS}/
+}
+
+# Check to see if the fleetctl binary exists in the script's install directory.
+check_installed_version() {
+    # If the fleetctl binary exists, we'll check the version of it using fleetctl -v.
+    if [ -x "${FLEETCTL_INSTALL_DIR}/fleetctl" ]; then
+        installed_version=$("${FLEETCTL_INSTALL_DIR}/fleetctl" -v | awk 'NR==1{print $NF}' | sed 's/^v//')
+        echo "Installed version: ${installed_version}"
+    else
+        return 1
+    fi
+}
+
+# Create the install directory if it does not exist.
+mkdir -p ${FLEETCTL_INSTALL_DIR}
+
+# Construct download URL
+# ex: https://github.com/fleetdm/fleet/releases/download/fleet-v4.43.3/fleetctl_v4.43.3_macos.zip
+DOWNLOAD_URL="https://github.com/fleetdm/fleet/releases/download/fleet-v${latest_strippedVersion}/fleetctl_v${latest_strippedVersion}_${OS}.tar.gz"
+
+
+if check_installed_version; then
+    if version_gt $latest_strippedVersion $installed_version; then
+        # Prompt the user for an upgrade
+        read -p "A newer version of fleetctl ($latest_strippedVersion) is available. Would you like to upgrade? (y/n): " upgrade_choice
+
+        if [[ "$upgrade_choice" =~ ^[Yy](es)?$ ]]; then
+            # Remove the old binary
+            rm -f "${FLEETCTL_INSTALL_DIR}/fleetctl"
+            echo "Removing an older version of fleetctl."
+
+            # Download and install the new version
+            download_and_extract
+            echo "fleetctl installed successfully in ${FLEETCTL_INSTALL_DIR}"
+            echo
+            echo "To start the local demo:"
+            echo
+            echo "1. Start Docker Desktop"
+            echo "2. Run  ~/.fleetctl/fleetctl preview"
+        else
+            echo "Upgrade canceled."
+        fi
+    else
+        read -p "You are already using the latest version of fleetctl ($latest_strippedVersion) Would you like to reinstall it? (y/n): " reinstall_choice
+
+        if [[ "$reinstall_choice" =~ ^[Yy](es)?$ ]]; then
+            # Remove the old binary
+            rm -f "${FLEETCTL_INSTALL_DIR}/fleetctl"
+            echo "Removing an older version of fleetctl."
+
+            # Download and install the new version
+            download_and_extract
+            echo "fleetctl reinstalled successfully in ${FLEETCTL_INSTALL_DIR}"
+            echo
+            echo "To start the local demo:"
+            echo
+            echo "1. Start Docker Desktop"
+            echo "2. Run  ~/.fleetctl/fleetctl preview"
+        else
+            echo "Install canceled."
+        fi
+    fi
+else
+    # If there is no existing fleetctl binary, download the latest version and extract it.
+    download_and_extract
+    echo "fleetctl installed successfully in ${FLEETCTL_INSTALL_DIR}"
+    echo
+    echo "To start the local demo:"
+    echo
+    echo "1. Start Docker Desktop"
+    echo "2. Run  ~/.fleetctl/fleetctl preview"
+fi
+
+# Verify if the binary is executable
+if [[ ! -x "${FLEETCTL_INSTALL_DIR}/fleetctl" ]]; then
+    echo "Failed to install or upgrade fleetctl. Please check your permissions and try running this script again."
+    exit 1
+fi
+

website/assets/styles/pages/fleetctl-preview.less

@@ -1,42 +1,290 @@
 #fleetctl-preview {
+  @heading-lineheight: 120%;
+  @text-lineheight: 150%;
 
-  a:not(.btn) {
-    color: @core-vibrant-blue;
+  h1 {
+    margin-bottom: 40px;
+    font-size: 32px;
+    line-height: @heading-lineheight;
+    font-weight: 800;
+  }
+  h2 {
+    padding-top: 24px;
+    font-size: 20px;
+    font-weight: 800;
+    margin-bottom: 24px;
+    line-height: @heading-lineheight;
   }
-
   code {
     background-color: @ui-off-white;
     border: 1px solid @border-lt-gray;
     color: @core-fleet-black-75;
-    font-size: 13px;
-    padding: 4px 8px;
-    line-height: 16px;
+    font-size: 14px;
+    padding: 4px;
+    line-height: @text-lineheight;
     font-family: @code-font;
     display: inline-block;
-    border-radius: 6px;
+    border-radius: 3px;
+  }
+  a {
+    color: @core-vibrant-blue;
+    line-height: @text-lineheight;
+  }
+  p {
+    font-size: 16px;
+    line-height: @text-lineheight;
   }
 
-  [purpose='get-started-buttons'] {
-    a {
-      font-size: 16px;
-      line-height: 25px;
-      padding: 16px 24px;
+  [purpose='page-title'] {
+    margin-bottom: 40px;
+  }
+
+  [purpose='installation-steps'] {
+    margin-bottom: 40px;
+  }
+
+  [purpose='prerequisites'] {
+    margin-bottom: 40px;
+    p {
+      margin-bottom: 24px;
     }
   }
 
+  [purpose='platform-selector'] {
+    margin-bottom: 60px;
+    border-bottom: 1px solid @core-vibrant-blue-15;
+    [purpose='selector-tab'] {
+      cursor: pointer;
+      padding: 12px;
+      margin-right: 24px;
+      p {
+        margin-bottom: 0px;
+      }
+    }
+    [purpose='selector-tab'].selected {
+      border-bottom: 2px solid @core-vibrant-blue;
+    }
+  }
+
+
+  [purpose='page-container'] {
+    padding: 80px 64px 64px 64px;
+    padding-bottom: 64px;
+    max-width: 928px;
+  }
+
+  [purpose='numbered-steps'] {
+    counter-reset: custom-counter;
+  }
+  [purpose='step'] {
+    counter-increment: custom-counter;
+    margin-left: 36px;
+    margin-bottom: 40px;
+    margin-top: -26px;
+    &::before {
+      position: relative;
+      top: 26px;
+      left: -36px;
+      content: counter(custom-counter);
+      background-color: #E2E4EA;
+      width: 24px;
+      font-size: 13px;
+      display: inline-block;
+      border-radius: 50%;
+      margin-right: 10px;
+      padding: 2px 4px;
+      text-align: center;
+      line-height: 20px;
+      text-indent: 0px;
+    }
+  }
   [purpose='terminal-commands'] {
-    padding: 24px;
+    padding: 16px 24px;
     border: 1px solid @core-fleet-black-25;
     border-radius: 4px;
     margin: 16px 0px 0px;
     background: @ui-off-white;
+    width: 100%;
+    overflow-x: scroll;
     p {
-      color: @core-fleet-black;
+      white-space: nowrap;
+      color: @core-fleet-black-75;
       font-family: @code-font;
       font-weight: 400;
-      font-size: 18px;
-      line-height: 32px;
+      font-size: 14px;
+      line-height: @text-lineheight;
       margin-bottom: 0px;
+      padding-right: 24px;
     }
   }
+
+
+  [purpose='docs-button'] {
+    margin-right: 32px;
+    color: #FFF;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 21px;
+    display: flex;
+    height: 48px;
+    padding: 16px 32px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  [purpose='view-script-link'] {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    color: @core-fleet-black-75;
+    margin-bottom: 16px;
+    img {
+      margin-left: 4px;
+      height: 13px;
+      display: inline;
+    }
+  }
+  [purpose='docker-button'] {
+    padding: 12px 20px;
+    width: 153px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 21px;
+    img {
+      width: auto;
+      height: 20px;
+      margin-right: 8px;
+    }
+  }
+  [purpose='node-button'] {
+    padding: 12px 20px;
+    width: 240px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 21px;
+    img {
+      width: auto;
+      height: 24px;
+      margin-right: 8px;
+    }
+  }
+  [purpose='animated-arrow-button-red'] {
+    display: flex;
+    padding-right: 26px;
+    cursor: pointer;
+    position: relative;
+    width: fit-content;
+    min-width: auto;
+    font-weight: bold;
+    user-select: none;
+    transition: 0.2s ease-in-out;
+    -o-transition: 0.2s ease-in-out;
+    -ms-transition: 0.2s ease-in-out;
+    -moz-transition: 0.2s ease-in-out;
+    -webkit-transition: 0.2s ease-in-out;
+    color: @core-fleet-black;
+    text-decoration: none;
+    &:after {
+      content: url('/images/arrow-right-red-16x16@2x.png');
+      transform: scale(0.5);
+      position: absolute;
+      top: -5px;
+      right: -5px; // <--- here
+      transition: 0.2s ease-in-out;
+      -o-transition: 0.2s ease-in-out;
+      -ms-transition: 0.2s ease-in-out;
+      -moz-transition: 0.2s ease-in-out;
+      -webkit-transition: 0.2s ease-in-out;
+      /*   opacity: 0; */
+    }
+    &:hover:after {
+      right: -10px; // <--- here
+      transition: 0.2s ease-in-out;
+      -o-transition: 0.2s ease-in-out;
+      -ms-transition: 0.2s ease-in-out;
+      -moz-transition: 0.2s ease-in-out;
+      -webkit-transition: 0.2s ease-in-out;
+      /*   opacity:1; */
+    }
+  }
+
+  [parasails-component='parallax-city'] {
+    background: linear-gradient(180deg, #FFF 0%, #E4F3F4 59.5%);
+  }
+
+
+  @media (max-width: 991px) {
+    [purpose='page-container'] {
+      padding: 80px 40px 64px 40px;
+      max-width: 928px;
+    }
+
+  }
+  @media (max-width: 768px) {
+    [purpose='page-container'] {
+      padding: 80px 32px 64px 32px;
+      max-width: 928px;
+    }
+
+  }
+  @media (max-width: 575px) {
+    [purpose='page-container'] {
+      padding: 64px 24px;
+      max-width: 928px;
+    }
+    [purpose='platform-selector'] {
+      margin-bottom: 60px;
+      border-bottom: 1px solid @core-vibrant-blue-15;
+      [purpose='selector-tab'] {
+        cursor: pointer;
+        padding: 12px;
+        margin-right: auto;
+      }
+    }
+    [purpose='docs-button'] {
+      width: 100%;
+      margin-bottom: 32px;
+      margin-right: auto;
+    }
+    [purpose='view-script-link'] {
+      margin-left: 4px;
+    }
+
+    [purpose='docker-button'] {
+      width: 100%;
+    }
+    [purpose='node-button'] {
+      width: 100%;
+    }
+    [purpose='get-started-buttons'] {
+      a:first-of-type {
+        margin-bottom: 16px;
+      }
+    }
+
+  }
+  @media (max-width: 375px) {
+    [purpose='page-container'] {
+      padding: 40px 16px 64px 16px;
+      max-width: 928px;
+    }
+    [purpose='platform-selector'] {
+      [purpose='selector-tab'] {
+        cursor: pointer;
+        padding: 6px;
+        margin-right: auto;
+      }
+    }
+  }
+
+
+
+
+
 }
+

website/views/pages/fleetctl-preview.ejs

@@ -1,64 +1,116 @@
-<div id="fleetctl-preview">
-  <div style="max-width: 800px; padding-top: 80px; padding-bottom: 80px;" class="container-fluid px-3">
-    <h1 class="pb-4 m-0">Get started</h1>
-    <p>Try out a preview of Fleet and osquery on your laptop before deploying at scale by following the guide below.</p>
-    <div class="pt-4 pb-4">
-      <h2 class="mb-3">1. Install Node (optional) and Docker</h2>
-      <p>The quickest way to install Fleet is with Node.js and Docker.</p>
-      <div class="d-sm-flex" purpose="get-started-buttons">
-        <a href="https://nodejs.org/en/download/" target="_blank"
-           style="color: #fff; background: #333;" class="d-flex btn btn-md justify-content-center align-items-center mr-sm-3">
-          <img style="height: 36px;" class="pr-3 d-inline" alt="NodeJS logo" src="/images/logo-node-59x36@2x.png"/>
-          Find my Node installer
-        </a>
-        <a href="https://docs.docker.com/get-docker/" target="_blank"
-          style="color: #fff; background: #0073EC;" class="d-flex btn btn-md justify-content-center align-items-center mt-3 mt-sm-0">
-          <img style="height: 36px;" class="pr-3 d-inline" alt="Docker logo" src="/images/logo-docker-51x36@2x.png"/>
-          Get Docker
-        </a>
-      </div>
-      <p class="pt-4"><img alt="A small circle with an 'I' inside of it"
-          style="width: 16px; display: inline; margin-right: 8px; margin-bottom: 3px" src="/images/info-16x16@2x.png">We
-        use NPM to install <code>fleetctl</code>. It can also be installed via the <a
-          href="https://github.com/fleetdm/fleet/releases" target="_blank">release page</a> or <a
-          href="https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Building-Fleet.md" target="_blank">built from source</a>.</p>
+<div id="fleetctl-preview" v-cloak>
+  <div purpose="page-container" class="d-flex flex-column container">
+    <div purpose="page-title">
+      <h1>Try Fleet</h1>
+      <p>The quickest way to try Fleet is to run a local demo with <a href="https://docs.docker.com/get-docker/" target="_blank">Docker</a>.</p>
+      <p class="mb-0">Follow the instructions below to test Fleet on your macOS, Windows, and Linux device.</p>
     </div>
-    <div>
-      <h2 class="pt-3 mb-3">2. Run Fleet</h2>
-      <p>Install the <code>fleetctl</code> command line tool and start the Fleet preview experience:</p>
-      <div purpose="terminal-commands">
-        <p class="text-muted"># Install the Fleet command-line tool</p>
-        <p>npm install -g fleetctl</p>
-        <p class="text-muted"># Run a local demo of the Fleet server</p>
-        <p>fleetctl preview</p>
+    <div purpose="prerequisites">
+      <h2>Prerequisites</h2>
+      <p>An installation of Docker is required to try Fleet locally.</p>
+      <a purpose="docker-button" href="https://docs.docker.com/get-docker/" target="_blank"
+        style="color: #fff; background: #0073EC;" class="d-flex btn btn-md justify-content-center align-items-center mt-3 mt-sm-0">
+        <img alt="Docker logo" src="/images/logo-docker-51x36@2x.png"/>
+        Get Docker
+      </a>
+    </div>
+    <div purpose="installation-steps">
+      <h2>Install Fleet</h2>
+      <div purpose="platform-selector" class="d-flex flex-row justify-content-between justify-content-sm-start">
+        <div purpose="selector-tab" :class="[selectedPlatform === 'macos' ? 'selected' : '']" @click="selectedPlatform = 'macos'"><p>macOS</p></div>
+        <div purpose="selector-tab" :class="[selectedPlatform === 'windows' ? 'selected' : '']" @click="selectedPlatform = 'windows'"><p>Windows</p></div>
+        <div purpose="selector-tab" :class="[selectedPlatform === 'linux' ? 'selected' : '']" @click="selectedPlatform = 'linux'"><p>Linux</p></div>
+        <div purpose="selector-tab" :class="[selectedPlatform === 'npm' ? 'selected' : '']" @click="selectedPlatform = 'npm'"><p>NPM</p></div>
+      </div>
+      <%/* macOS install steps */%>
+      <div v-if="selectedPlatform === 'macos'">
+        <div purpose="numbered-steps">
+          <div purpose="step">
+              <p>Install the <code>fleetctl</code> command line tool:</p>
+              <div purpose="terminal-commands"> <p>curl -SsLO https://fleetdm.com/resources/install-fleet.sh -o install_fleet.sh && shasum -a 256 install_fleet.sh</p></div>
+          </div>
+          <div purpose="step">
+            <p>Run a local demo of the Fleet server:</p>
+            <div purpose="terminal-commands"> <p>~/.fleetctl/fleetctl preview</p></div>
+          </div>
+          <div purpose="step">
+            <p>The Fleet UI is now available at <a href="http://localhost:1337" target="_blank">http://localhost:1337</a>. Use the credentials below to login:</p>
+            <p class="mb-2"><strong>Email</strong>: admin@example.com</p>
+            <p class="mb-0"><strong>Password</strong>: preview1337#</p>
+          </div>
+        </div>
+      </div>
+      <%/* Linux install steps */%>
+      <div v-else-if="selectedPlatform === 'linux'">
+        <div purpose="numbered-steps">
+          <div purpose="step">
+              <p>Install the <code>fleetctl</code> command line tool:</p>
+              <div purpose="terminal-commands"> <p>curl -SsLO https://fleetdm.com/resources/install-fleet.sh -o install_fleet.sh && shasum -a 256 install_fleet.sh</p></div>
+          </div>
+          <div purpose="step">
+            <p>Run a local demo of the Fleet server:</p>
+            <div purpose="terminal-commands"> <p>~/.fleetctl/fleetctl preview</p></div>
+          </div>
+          <div purpose="step">
+            <p>The Fleet UI is now available at <a href="http://localhost:1337" target="_blank">http://localhost:1337</a>. Use the credentials below to login:</p>
+            <p class="mb-2"><strong>Email</strong>: admin@example.com</p>
+            <p class="mb-0"><strong>Password</strong>: preview1337#</p>
+          </div>
+        </div>
+      </div>
+      <%/* Windows install steps */%>
+      <div v-else-if="selectedPlatform === 'windows'">
+        <div purpose="numbered-steps">
+          <div purpose="step">
+              <p>Install the <code>fleetctl</code> command line tool:</p>
+              <div purpose="terminal-commands"><p>for /f "tokens=1,* delims=:" %a in ('curl -s https://api.github.com/repos/fleetdm/fleet/releases/latest ^| findstr "browser_download_url" ^| findstr "_windows.zip"') do (curl -kOL %b) && if not exist "%USERPROFILE%\.fleetctl" mkdir "%USERPROFILE%\.fleetctl" && for /f "delims=" %a in ('dir /b fleetctl_*_windows.zip') do tar -xf "%a" --strip-components=1 -C "%USERPROFILE%\.fleetctl" && del "%a"</p></div>
+          </div>
+          <div purpose="step">
+            <p>Run a local demo of the Fleet server:</p>
+            <div purpose="terminal-commands"> <p>%USERPROFILE%\.fleetctl\fleetctl preview</p></div>
+          </div>
+          <div purpose="step">
+            <p>The Fleet UI is now available at <a href="http://localhost:1337" target="_blank">http://localhost:1337</a>. Use the credentials below to login:</p>
+            <p class="mb-2"><strong>Email</strong>: admin@example.com</p>
+            <p class="mb-0"><strong>Password</strong>: preview1337#</p>
+          </div>
+        </div>
+      </div>
+      <%/* NPM install steps */%>
+      <div v-else-if="selectedPlatform === 'npm'">
+        <div purpose="numbered-steps">
+          <div purpose="step">
+            <p>Install Node.js</p>
+            <a purpose="node-button" href="https://nodejs.org/en/download/" target="_blank" style="color: #fff; background: #333;" class="btn d-flex flex-row align-items-center justify-content-center">
+              <img alt="NodeJS logo" src="/images/logo-node-59x36@2x.png"/>
+              Find my Node installer
+            </a>
+          </div>
+          <div purpose="step">
+            <p>Install the <code>fleetctl</code> command line tool:</p>
+            <div purpose="terminal-commands"> <p>npm install fleetctl -g</p></div>
+          </div>
+          <div purpose="step">
+            <p>Run a local demo of the Fleet server:</p>
+            <div purpose="terminal-commands"> <p>fleetctl preview</p></div>
+          </div>
+          <div purpose="step">
+            <p>The Fleet UI is now available at <a href="http://localhost:1337" target="_blank">http://localhost:1337</a>. Use the credentials below to login:</p>
+            <p class="mb-2"><strong>Email</strong>: admin@example.com</p>
+            <p class="mb-0"><strong>Password</strong>: preview1337#</p>
+          </div>
+        </div>
       </div>
     </div>
-    <div style="padding-top: 60px;">
-      <h2 class="mb-3">3. Log in to Fleet</h2>
-      <p>The Fleet UI is now available at <a href="http://localhost:1337"
-          target="_blank">http://localhost:1337</a>. Use the credentials below to login.</p>
-      <p class="mb-2"><strong>Email:</strong> admin@example.com</p>
-      <p><strong>Password:</strong> preview1337#</p>
+    <h2>Next steps</h2>
+    <div purpose="next-steps" class="d-flex flex-sm-row flex-column align-items-center">
+      <a purpose="docs-button" href="/docs" class="btn btn-primary">
+        Read the docs
+      </a>
+      <a href="/docs/deploying" purpose="animated-arrow-button-red" class=" d-flex">
+        Deploy to production
+      </a>
     </div>
-    <div style="padding-top: 60px;">
-      <h2 class="mb-4">Next steps</h2>
-      <div class="d-md-flex" purpose="get-started-buttons">
-        <a href="/docs/using-fleet/learn-how-to-use-fleet"
-          class="d-flex flex-fill btn btn-primary btn-md justify-content-center mt-3 mt-md-0 mr-0 mr-md-3">
-          Learn how to use Fleet
-        </a>
-        <a href="/slack" target="_blank"
-          class="d-flex flex-fill btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-md-0 mr-0 mr-md-3">
-          <img style="height: 24px;" class="pr-3 d-inline" alt="Slack logo" src="/images/logo-slack-24x24@2x.png" />
-          Ask for help on Slack
-        </a>
-        <a @click="clickOpenChatWidget()"
-          class="d-flex flex-fill btn btn-md btn-outline-secondary justify-content-center align-items-center mt-3 mt-md-0 mr-0">
-          Show me
-        </a>
-      </div>
-    </div>
-
   </div>
-
+  <parallax-city></parallax-city>
 </div>