Spin v3 Release (#131)

* Added .spin.yml to gitignore * Remove encryption * Shellcheck fixes * Shellcheck improvments * Improved error message * Shellcheck improvements * Cleaned up Ansible variable retrieval and prompts * Allow force upgrade of collection * Set inventory * Added force flag to prune * Set remote user and target * Added Spin maintain and restructured provision * Revert collection name * Added cursor rules * Regoranized and centralized functions * Restructured Ansible functionality * Reorganized file * A-z function names * Restructured to support smooth upgrades from Spin v2 * Reset temporary collection source * Added other projects * Added extra space * Added other projects * Added Spin Hub * Fixed laravel basic link * Improved Ansible vault support * Initial docs update * Fix 404 links * Fix responsive images * Set latest pre-release track only * Fix date command * Revert install behavior * Fix quotes * Added notes * Add 'Get Help' documentation page * Add documentation for testing new releases of Spin * Added environments to spin provision and maintain * Added help notes * Added canonical URLs * Refactor validation logic in project setup - Moved CI folder creation logic into the validate_project_setup function. - Added validate_spin_yml function to check for the existence of .spin.yml. - Updated action_maintain and action_provision to call validate_spin_yml for improved validation flow. * Added canonical URLs to documentation files for improved SEO and accessibility. * Added "gh" documentation * Added comparison table * Reorganized the "Automated Deployments with GitHub Actions" section in the deployment strategy documentation for clarity and consistency. The content was moved to improve the flow of information, ensuring users can easily access deployment guides. * Enhance troubleshooting documentation for service management in Docker - Added guidelines for diagnosing connection issues between services, including checks for environment variables and service passwords. - Included instructions for stopping services, removing volumes, configurations, and networks using Docker commands. - Added a section on pruning unused resources to free up disk space. These updates aim to provide clearer guidance for users managing Docker services and troubleshooting common issues. * Added maintenance image * Remove canonical * Added explanation of spin maintain * Added firewall notes * Update volume mount path in run_gh function from /workdir to /app for improved clarity in Docker configuration * Add notes on spin provison (#138) * Fix example * Update "Use Any Host" documentation to clarify Spin's compatibility with various hosting environments and link to server requirements * Improve argument parsing. Fixes #136 * Documentation UX updates (#139) * Keeps the active page in view on the navigation * Installed hotkeys for FF support fixes #107 * Fix typo in comment * Set authorized keys for deployment (if set) * Support deployments without dockerfiles (Ref #118) * Fix array * Fix doc titles * Remove unnecessary blank line in NPM/Yarn installation documentation * Enhance deploy script to allow customizable Docker registry image. Default to 'registry:2' if not specified. This improves flexibility for deployments. * Fix Docker command in troubleshooting documentation to ensure 'sudo' is used consistently for executing commands in containers. * Added Spin v2 to v3 migration guide * Enhance deploy script: add cleanup for unused Docker images, update image tagging to use timestamp, and improve variable naming for clarity. * Refactor Ansible vault password validation in functions.sh to improve error handling and user feedback. The script now checks if the variable file is encrypted before validating the password, and provides clearer error messages for invalid passwords. * Refactor deploy script to improve variable naming for SSH user and port. Updated variables from 'ssh_user' and 'ssh_port' to 'SPIN_SSH_USER' and 'SPIN_SSH_PORT' for better clarity and consistency. * Changed docker builds from localhost for 127.0.0.1 so it matches Docker's insecure registry defaults without requiring https * Enhance Spin debugging capabilities: added SPIN_DEBUG environment variable to enable debug logs in the spin script. Updated documentation to include instructions for using SPIN_DEBUG for troubleshooting and added examples for Docker health check failures. * Fix path references to Ansible vault when running with Docker * Refactor Ansible vault argument handling to support local and Docker runs. The `set_ansible_vault_args` function now accepts a `run_type` parameter, allowing for different vault password file paths based on the execution context. This improves flexibility and clarity in vault management. * Ready for v3 stable 🥳 --------- Co-authored-by: Dan Pastori <[email protected]>
serversideup · Dec 19, 2024 · dd05687 · dd05687
1 parent 5ea024d
commit dd05687
Show file tree

Hide file tree

Showing 110 changed files with 4,197 additions and 942 deletions.
diff --git a/.cursorrules b/.cursorrules
@@ -0,0 +1,13 @@
+You are an expert in Bash scripting, Docker, and Ansible. You possess deep knowledge of best practices and performance optimizations techniques for writing Bash and Ansible code.
+
+The project you're working on is called Spin, which is a tool that helps people create new projects, create infrastructure, and maintain existing infrastructure using Docker Compose, Docker Swarm, Ansible, and more.
+
+Code Style and Structure
+- Write clean, maintainable and technically accurate code.
+- All bash must be POSIX compliant.
+- All bash must be compatible with Linux, WSL2, and MacOS (Bash v3)
+- Never use an approach you're not confident about. If you're unsure about something, ask for clarity.
+- Always follow best practices for Bash, Ansible, and Docker.
+- This project should work on Linux, WSL2, and MacOS without installing any additional dependencies other than Docker.
+
+This project is open source and the code is available on GitHub, so be sure to follow best practices to make it easy for others to understand, modify, and contribute to the project.
diff --git a/README.md b/README.md
@@ -91,6 +91,8 @@ Spin serves as a collection of open source technologies, put together in one sim
 - [serversideup/docker-swarm-deploy-github-action](https://github.com/marketplace/actions/docker-swarm-deploy-github-action) - A simplified syntax to deploy to Docker Swarm Mode via GitHub Actions.
 - [serversideup/php](https://serversideup.net/open-source/docker-php/) - PHP Docker images highly optimized to work with Laravel + Spin.
 - [serversideup/docker-ssh](https://github.com/serversideup/docker-ssh) - A lightweight docker image that runs SSH. This is a fantastic method on using a secure SSH tunnel into your database cluster.
+- [serversideup/docker-ansible](https://github.com/serversideup/docker-ansible) - A lightweight docker image that runs Ansible.
+- [serversideup/docker-github-cli](https://github.com/serversideup/docker-github-cli) - A lightweight docker image that runs GitHub CLI.
 
 ## Resources
 - **[Website](https://serversideup.net/open-source/spin/)** overview of the product.

diff --git a/bin/spin b/bin/spin
@@ -3,6 +3,11 @@ set -e
 
 # Default Environment
 SPIN_ENV=${SPIN_ENV:-dev}
+SPIN_DEBUG=${SPIN_DEBUG:-false}
+
+if [[ "$SPIN_DEBUG" == "true" ]]; then
+  set -x
+fi
 
 # Set up our structure for our re-used commands
 export COMPOSE_CMD=${COMPOSE_CMD:-"docker compose"}
@@ -16,17 +21,21 @@ export SPIN_GROUP_ID
 # Default Images
 SPIN_PHP_IMAGE=${SPIN_PHP_IMAGE:-"serversideup/php:cli"}
 SPIN_NODE_IMAGE=${SPIN_NODE_IMAGE:-"node:20"}
-SPIN_ANSIBLE_IMAGE=${SPIN_ANSIBLE_IMAGE:-"docker.io/serversideup/ansible-core:2.17-alpine"}
-SPIN_ANSIBLE_COLLECTION_NAME=${SPIN_ANSIBLE_COLLECTION_NAME:-"serversideup.spin"}
+SPIN_ANSIBLE_IMAGE=${SPIN_ANSIBLE_IMAGE:-"docker.io/serversideup/ansible-core:2.18-alpine"}
+SPIN_GH_CLI_IMAGE=${SPIN_GH_CLI_IMAGE:-"docker.io/serversideup/github-cli:alpine"}
 
 # Script Configuration
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 SPIN_HOME=$(dirname "$SCRIPT_DIR") #Assume the parent directory of this script is the home
 SPIN_CACHE_DIR=${SPIN_CACHE_DIR:-$SPIN_HOME/cache}
 SPIN_CONFIG_FILE_LOCATION=${SPIN_CONFIG_FILE_LOCATION:-"$SPIN_HOME/conf/spin.conf"}
+SPIN_CI_FOLDER=${SPIN_CI_FOLDER:-".infrastructure/conf/ci"}
 AUTO_UPDATE_INTERVAL_IN_DAYS=${AUTO_UPDATE_INTERVAL_IN_DAYS:-14}
 AUTO_PULL_INTERVAL_IN_DAYS=${AUTO_PULL_INTERVAL_IN_DAYS:-1}
 
+# Ansible Variables
+SPIN_ANSIBLE_COLLECTION_NAME="${SPIN_ANSIBLE_COLLECTION_NAME:-"serversideup.spin"}"
+
 # Import common functions
 source "$SPIN_HOME/lib/functions.sh"
 setup_color
@@ -44,7 +53,7 @@ case "$1" in
   "" | base64 | debug | help | update | version | --version | -v)
     : # Silent output for the user, but we're skipping the compose check too.
     ;;
-  init | kill | mkpasswd | new | prune | provision | vault)
+  configure | gh | init | kill | maintain | mkpasswd | new | prune | provision | vault)
     check_if_docker_is_running
   ;;
   *)
@@ -67,6 +76,10 @@ if [ $# -gt 0 ]; then
       source "$SPIN_HOME/lib/actions/build.sh"
       action_build "$@"
     ;;
+    configure)
+      source "$SPIN_HOME/lib/actions/configure.sh"
+      action_configure "$@"
+    ;;
     debug)
       source "$SPIN_HOME/lib/actions/debug.sh"
       action_debug "$@"
@@ -87,6 +100,10 @@ if [ $# -gt 0 ]; then
       source "$SPIN_HOME/lib/actions/help.sh"
       action_help
     ;;
+    gh)
+      source "$SPIN_HOME/lib/actions/gh.sh"
+      action_gh "$@"
+    ;;
     init)
       source "$SPIN_HOME/lib/actions/init.sh"
       action_init "$@"
@@ -103,6 +120,10 @@ if [ $# -gt 0 ]; then
       source "$SPIN_HOME/lib/actions/logs.sh"
       action_logs "$@"
     ;;
+    maintain)
+      source "$SPIN_HOME/lib/actions/maintain.sh"
+      action_maintain "$@"
+    ;;
     mkpasswd)
       source "$SPIN_HOME/lib/actions/mkpasswd.sh"
       action_mkpasswd "$@"

diff --git a/docs/components/Docs/Navigation.vue b/docs/components/Docs/Navigation.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav>
+    <nav id="docs-navigation">
         <ul role="list">
             <li class="relative my-6">
                 <h2 class="text-xs font-semibold text-white">
@@ -39,12 +39,6 @@
                     'md:mt-0': groupIndex === 0
                 }"
             />
-
-            <li class="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
-                <AppLink :href="'#'" :variant="'filled'" class="w-full">
-                    Sign in
-                </AppLink>
-            </li>
         </ul>
     </nav>
 </template>
@@ -53,4 +47,13 @@
 const route = useRoute();
 
 const { navigation, toc } = useContent();
+
+onMounted(() => {
+    console.log(route.path);
+    const element = document.querySelector(`[data-attr-link-id="${route.path}"]`);
+    if (element) {
+        // Can we scroll to this element without using smooth?
+        element.scrollIntoView();
+    }
+})
 </script>
diff --git a/docs/components/Docs/NavigationGroup.vue b/docs/components/Docs/NavigationGroup.vue
@@ -15,6 +15,7 @@
                     }">
                         <NuxtLink 
                             :to="link._path"
+                            :data-attr-link-id="link._path"
                             class="flex justify-between gap-2 py-1 pr-3 text-sm transition"
                             :class="{
                                 'text-white': link._path === route.path,
@@ -55,4 +56,5 @@ const route = useRoute();
 const scrollTo = (id) => {
     document.getElementById( id.replace('#', '') ).scrollIntoView(true, {behavior: "smooth"})
 }
-</script>
+
+</script>
diff --git a/docs/components/Global/MobileMenu.vue b/docs/components/Global/MobileMenu.vue
@@ -13,6 +13,18 @@
                     Search
             </button>
 
+            <NuxtLink 
+                :href="'/docs'"
+                class="flex items-center font-inter font-bold text-slate-300 text-xl mb-6">
+                    <div class="flex items-center justify-center w-5 h-5 mr-2">
+                        <svg width="18" height="23" viewBox="0 0 18 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full max-h-full">
+                            <path d="M17 18.4468V15.4468H4C2.34315 15.4468 1 16.79 1 18.4468M5.8 21.4468H13.8C14.9201 21.4468 15.4802 21.4468 15.908 21.2289C16.2843 21.0371 16.5903 20.7311 16.782 20.3548C17 19.927 17 19.3669 17 18.2468V4.64684C17 3.52673 17 2.96668 16.782 2.53886C16.5903 2.16253 16.2843 1.85657 15.908 1.66483C15.4802 1.44684 14.9201 1.44684 13.8 1.44684H5.8C4.11984 1.44684 3.27976 1.44684 2.63803 1.77382C2.07354 2.06144 1.6146 2.52038 1.32698 3.08487C1 3.7266 1 4.56668 1 6.24684V16.6468C1 18.327 1 19.1671 1.32698 19.8088C1.6146 20.3733 2.07354 20.8322 2.63803 21.1199C3.27976 21.4468 4.11984 21.4468 5.8 21.4468Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </div>
+
+                    Docs
+            </NuxtLink>
+
             <NuxtLink 
                 :href="'/docs'"
                 class="flex items-center font-inter font-bold text-slate-300 text-xl mb-6">

diff --git a/docs/components/content/HubMain.vue b/docs/components/content/HubMain.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="w-full">
+        <!-- Hero Section -->
+        <div class="text-center mb-12">
+      <h1 class="text-4xl font-bold text-white mb-4">Spin Hub</h1>
+      <p class="text-slate-400 text-lg">
+        A place to share and build templates together. 
+        <NuxtLink to="/docs/advanced/create-your-own-template" class="text-[#1CE783] hover:underline">
+          Build your own template →
+        </NuxtLink>
+        </p>
+      </div>
+
+      <!-- Grid of Templates -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <NuxtLink
+        v-for="template in templates" 
+        :key="template._path"
+        :to="template._path"
+        class="bg-[#151A1F] rounded-lg overflow-hidden hover:ring-1 hover:ring-[#1CE783] transition-all"
+      >
+        <div class="aspect-[1.905/1] relative overflow-hidden">
+          <img 
+            :src="template.image" 
+            class="absolute inset-0 w-full h-full object-cover" 
+            :alt="template.title" 
+          />
+        </div>
+        <div class="p-4">
+          <div class="flex items-center gap-2 mb-2">
+            <span 
+              :class="[
+                'text-xs px-2 py-1 rounded',
+                categoryStyles[template.category]?.classes || defaultCategoryStyle
+              ]"
+            >
+              {{ template.category }}
+            </span>
+          </div>
+          <h3 class="text-white font-semibold text-xl mb-2">{{ template.title }}</h3>
+          <p class="text-slate-400 text-sm mb-4">{{ template.description }}</p>
+          <div class="flex items-center gap-2">
+            <img :src="template.authorImage" class="w-8 h-8 rounded-full" :alt="template.author" />
+            <div>
+              <p class="text-white text-sm">{{ template.author }}</p>
+            </div>
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const { data: templates } = await useAsyncData('templates', () => {
+  return queryContent('/hub')
+    .where({ _path: { $ne: '/hub' } })
+    .find()
+})
+
+// Category styling configuration
+const categoryStyles = {
+  'Laravel': {
+    classes: 'bg-orange-500/20 text-orange-400'
+  },
+  'Nuxt': {
+    classes: 'bg-green-500/20 text-green-400'
+  },
+  'Vue': {
+    classes: 'bg-emerald-500/20 text-emerald-400'
+  },
+  'WordPress': {
+    classes: 'bg-blue-500/20 text-blue-400'
+  },
+  'Node.js': {
+    classes: 'bg-yellow-500/20 text-yellow-400'
+  }
+}
+
+// Default style for unconfigured categories
+const defaultCategoryStyle = 'bg-slate-500/20 text-slate-400'
+</script> 
diff --git a/docs/components/content/MarketingHeader.vue b/docs/components/content/MarketingHeader.vue
@@ -66,6 +66,18 @@
                                     </div>
 
                                     Docs
+                            </NuxtLink>
+
+                            <NuxtLink 
+                                :href="'/hub'"
+                                class="flex items-center font-inter font-bold text-slate-300 text-sm rounded py-[6px] px-2 hover:bg-gray-900 xl:text-lg">
+                                    <div class="flex items-center justify-center w-5 h-5 mr-2">
+                                        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M12.8324 15.2572L9.8324 12.2572M12.8324 15.2572C14.2292 14.7259 15.5693 14.0559 16.8324 13.2572M12.8324 15.2572V20.2572C12.8324 20.2572 15.8624 19.7072 16.8324 18.2572C17.9124 16.6372 16.8324 13.2572 16.8324 13.2572M9.8324 12.2572C10.3645 10.8766 11.0346 9.55327 11.8324 8.30721C12.9976 6.44419 14.62 4.91025 16.5454 3.8513C18.4708 2.79234 20.6351 2.24358 22.8324 2.25721C22.8324 4.97721 22.0524 9.75721 16.8324 13.2572M9.8324 12.2572H4.8324C4.8324 12.2572 5.3824 9.22721 6.8324 8.25721C8.4524 7.17721 11.8324 8.25721 11.8324 8.25721M5.3324 16.7572C3.8324 18.0172 3.3324 21.7572 3.3324 21.7572C3.3324 21.7572 7.0724 21.2572 8.3324 19.7572C9.0424 18.9172 9.0324 17.6272 8.2424 16.8472C7.8537 16.4762 7.34169 16.2618 6.80462 16.2452C6.26756 16.2286 5.74327 16.4109 5.3324 16.7572Z" stroke="#CBD5E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                        </svg>
+                                    </div>
+
+                                    Hub
                             </NuxtLink>  
 
                             <NuxtLink 

diff --git a/docs/components/content/MarketingVideo.vue b/docs/components/content/MarketingVideo.vue
@@ -2,7 +2,7 @@
     <div class="px-4">
         <div class="rounded-[10px] mx-auto max-w-[940px] my-8 md:my-16 overflow-hidden">
             <video autoplay muted loop playsinline>
-                <source src="https://spin-public-assets.serversideup.net/spin-demo_spin-up.mp4"/>
+                <source src="https://spin-public-assets.serversideup.net/spin-demo_spin-up-pro.mp4"/>
             </video>
         </div>
     </div>

diff --git a/docs/components/content/Search.vue b/docs/components/content/Search.vue
@@ -106,17 +106,19 @@ import DocsIcon from './DocsIcon.vue';
 import HeartIcon from './HeartIcon.vue';
 import GitHubIcon from './GitHubIcon.vue';
 
+import hotkeys from 'hotkeys-js';
+
 /**
  * CMD + K shortcut for activating the modal
  */
 const show = ref(false);
-const { meta, k } = useMagicKeys();
 
-watchEffect(() => {
-    if (meta.value && k.value) {
+if( import.meta.client ){   
+    hotkeys('ctrl+k,command+k', (event, handler) => {
         show.value = true;
-    }
-});
+        event.preventDefault();
+    });
+}
 
 /**
  * Event handler for opening the modal

diff --git a/docs/content/docs/1.index.md b/docs/content/docs/1.index.md
@@ -9,7 +9,7 @@ layout: docs
 
 <p>
     <video autoplay muted loop playsinline>
-        <source src="https://spin-public-assets.serversideup.net/spin-demo_spin-up.mp4"/>
+        <source src="https://spin-public-assets.serversideup.net/spin-demo_spin-up-pro.mp4"/>
     </video>
 </p>
 

diff --git a/docs/content/docs/1.installation/1.install-macos.md b/docs/content/docs/1.installation/1.install-macos.md
@@ -3,7 +3,14 @@ head.title: 'Install to macOS - Spin by Server Side Up'
 title: 'Install to macOS'
 description: 'Learn how to install Spin on macOS. No root access required.'
 layout: docs
+canonical: https://serversideup.net/open-source/spin/docs/installation/install-macos
 ---
+
+# Install to macOS
+::lead-p
+Spin easily runs on any macOS machine that runs Docker Desktop. Getting started is as simple as installing Docker Desktop, then running a single command to install `spin`.
+::
+
 ## Install Docker Desktop
 MacOS does not ship with Docker by default. To get Docker installed, you will need "Docker Desktop", which is the official desktop tool developed by Docker.
 

diff --git a/docs/content/docs/1.installation/2.install-windows.md b/docs/content/docs/1.installation/2.install-windows.md
@@ -3,6 +3,7 @@ head.title: 'Install to Windows - Spin by Server Side Up'
 title: 'Install to Windows'
 description: 'Learn how to install Spin on Windows using the Linux Subsystem.'
 layout: docs
+canonical: https://serversideup.net/open-source/spin/docs/installation/install-windows
 ---
 
 # Install to Windows

diff --git a/docs/content/docs/1.installation/3.install-linux.md b/docs/content/docs/1.installation/3.install-linux.md
@@ -3,8 +3,14 @@ head.title: 'Install to Linux - Spin by Server Side Up'
 title: 'Install to Linux'
 description: 'Learn how to install Spin on Linux.'
 layout: docs
+canonical: https://serversideup.net/open-source/spin/docs/installation/install-linux
 ---
 
+# Install to Linux
+::lead-p
+Spin is able to run on any Linux machine that supports Docker. Getting started is as simple as installing Docker, then running a single command to install `spin`.
+::
+
 ## Prerequisites
 You must have a working installation of Docker.
 

diff --git a/docs/content/docs/1.installation/4.install-composer.md b/docs/content/docs/1.installation/4.install-composer.md
@@ -3,11 +3,17 @@ head.title: 'Install via Composer - Spin by Server Side Up'
 title: 'Install via Composer'
 description: 'Spin can be installed using Composer, a popular PHP package manager. This enables you to make Spin accessible without other developers doing any steps on their end.'
 layout: docs
+canonical: https://serversideup.net/open-source/spin/docs/installation/install-composer
 ---
 
-Installing `spin` at the project level is a great way to deploy `spin` without much configuration from the user's end. [View `spin` on Packagist →](https://packagist.org/packages/serversideup/spin)
+# Install via Composer
+::lead-p
+Spin can be installed using Composer, a popular PHP package manager. This enables you to make Spin accessible without other developers doing any steps on their end.
+::
 
 ## Add `spin` to your project with Composer
+Installing `spin` at the project level is a great way to deploy `spin` without much configuration from the user's end. [View `spin` on Packagist →](https://packagist.org/packages/serversideup/spin)
+
 We can use Docker to run `composer` and install it on your project. **Run this command from the parent folder of your project.**
 
 ::code-panel

diff --git a/docs/content/docs/1.installation/5.install-npm-yarn.md b/docs/content/docs/1.installation/5.install-npm-yarn.md
@@ -3,11 +3,17 @@ head.title: 'Install via NPM/Yarn - Spin by Server Side Up'
 title: 'Install via NPM/Yarn'
 description: 'Spin can be installed using NPM or Yarn, two popular JavaScript package managers. This enables you to make Spin accessible without other developers doing any steps on their end.'
 layout: docs
+canonical: https://serversideup.net/open-source/spin/docs/installation/install-npm-yarn
 ---
 
-Installing `spin` at the project level is a great way to deploy `spin` without much configuration from the user's end. [View `spin` on NPM →](https://www.npmjs.com/package/@serversideup/spin)
+# Install via NPM/Yarn
+::lead-p
+Spin can be installed using NPM or Yarn, two popular JavaScript package managers. This enables you to make Spin accessible without other developers doing any steps on their end.
+::
 
 ## Add `spin` to your project with Yarn/NPM
+Installing `spin` at the project level is a great way to deploy `spin` without much configuration from the user's end. [View `spin` on NPM →](https://www.npmjs.com/package/@serversideup/spin)
+
 We can use Docker to run install `spin` on your project. **Run this command from the parent folder of your project.**
 
 ::note