Fish compatibility + copy to clipboard functionality (#1287)

* Add fish shell compatibility in install + Fix some typos

* Add lighter scrollbar in codeblocks + add copy code to clipboard icon

* Fix side effects

Author: CharlonTank

README.md

@@ -18,7 +18,7 @@ Guides are located in the `src/actions/guides` directory. You can edit the markd
 
 1. Create a new guide in `src/actions/guides`. Usually it is easiest to copy an existing guide as a starting point
 1. Add the guide class to the appropriate category in the [GuidesList](https://github.com/luckyframework/website/blob/main/src/models/guides_list.cr)
-1. That's it! View your guide by running `lucky dev` and ginding the guide in the sidebar.
+1. That's it! View your guide by running `lucky dev` and finding the guide in the sidebar.
 
 ### Learning Lucky
 

public/assets/icons/copy.svg

@@ -17,20 +17,20 @@ class Guides::Deploying::Heroku < GuideAction
 
     If not already created, create an app:
 
-    ```plain
+    ```bash
     heroku create <APP_NAME>
     ```
 
     **Optional**: if you created the app through the dashboard instead of the CLI,
     add a git remote that points to your Heroku app:
 
-    ```plain
+    ```bash
     heroku git:remote -a <APP-NAME>
     ```
 
     Add the following buildpacks in order:
 
-    ```plain
+    ```bash
     # Skip this buildpack for API only app. Add this for HTML and Assets
     heroku buildpacks:add heroku/nodejs
 
@@ -40,27 +40,27 @@ class Guides::Deploying::Heroku < GuideAction
 
     Set `LUCKY_ENV` to `production`:
 
-    ```plain
+    ```bash
     heroku config:set LUCKY_ENV=production
     ```
 
     Set `SECRET_KEY_BASE`:
 
-    ```plain
+    ```bash
     heroku config:set SECRET_KEY_BASE=$(lucky gen.secret_key)
     ```
 
     Set `APP_DOMAIN`:
 
-    ```plain
+    ```bash
     heroku config:set APP_DOMAIN=https://your-domain.com
     ```
 
     **If you don't have a custom domain** set this to `https://<APP_NAME>.herokuapp.com`.
 
     Set `SEND_GRID_KEY`:
 
-    ```plain
+    ```bash
     heroku config:set SEND_GRID_KEY=<key from sendgrid.com>
     ```
 
@@ -70,13 +70,13 @@ class Guides::Deploying::Heroku < GuideAction
     Add a [postgresql database](https://elements.heroku.com/addons/heroku-postgresql)
     add-on:
 
-    ```plain
+    ```bash
     heroku addons:create heroku-postgresql:hobby-dev
     ```
 
     Push to Heroku:
 
-    ```plain
+    ```bash
     git push heroku main
     ```
 

public/assets/icons/tick.svg

@@ -26,19 +26,19 @@ class Guides::GettingStarted::Installing < GuideAction
 
     ### 2. Check installation
 
-    ```plain
+    ```bash
     crystal -v
     ```
 
     Should return between `#{LuckyCliVersion.min_compatible_crystal_version}` and `#{LuckyCliVersion.max_compatible_crystal_version}`
 
-    ## macOS (M1) requirements
+    ## macOS (Apple Silicon) requirements
 
     ### 1. Install Homebrew
 
     Installation instructions from the [Homebrew website](https://brew.sh/)
 
-    ```plain
+    ```bash
     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
     ```
 
@@ -48,46 +48,57 @@ class Guides::GettingStarted::Installing < GuideAction
 
     Installation instructions from the [Homebrew website](https://brew.sh/)
 
-    ```plain
+    ```bash
     /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
     ```
 
     ### 2. Install OpenSSL
 
-    ```plain
+    ```bash
     brew install openssl
     ```
 
     ### 3. Configure SSL for Crystal
 
-    You'll need to tell Crystal how to find OpenSSL by adding an `export`
-    to your `~/.bash_profile` or `~/.zshrc`.
+    Add the following line to your shell configuration file. This will let Crystal know where to find OpenSSL.
 
     > You can run `echo $SHELL` in your terminal if you're not sure whether you
-      are using ZSH or Bash.
+      are using ZSH, Bash or Fish.
 
     **For ZSH (the default as of macOS Catalina):**
 
-    macOS (Intel)
-    ```plain
-    echo 'export PKG_CONFIG_PATH=/usr/local/opt/openssl/lib/pkgconfig' >>~/.zshrc
+    macOS (Apple Silicon)
+    ```bash
+    echo 'export PKG_CONFIG_PATH=/opt/homebrew/opt/openssl/lib/pkgconfig' >>~/.zshrc
     ```
 
-    macOS (M1)
-    ```plain
-    echo 'export PKG_CONFIG_PATH=/opt/homebrew/opt/openssl/lib/pkgconfig' >>~/.zshrc
+    macOS (Intel)
+    ```bash
+    echo 'export PKG_CONFIG_PATH=/usr/local/opt/openssl/lib/pkgconfig' >>~/.zshrc
     ```
 
     **For Bash:**
 
+    macOS (Apple Silicon)
+    ```bash
+    echo 'export PKG_CONFIG_PATH=/opt/homebrew/opt/openssl/lib/pkgconfig' >>~/.bash_profile
+    ```
+
     macOS (Intel)
-    ```plain
+    ```bash
     echo 'export PKG_CONFIG_PATH=/usr/local/opt/openssl/lib/pkgconfig' >>~/.bash_profile
     ```
 
-    macOS (M1)
-    ```plain
-    echo 'export PKG_CONFIG_PATH=/opt/homebrew/opt/openssl/lib/pkgconfig' >>~/.bash_profile
+    **For Fish:**
+
+    macOS (Apple Silicon)
+    ```bash
+    echo 'set -gx PKG_CONFIG_PATH /opt/homebrew/opt/openssl/lib/pkgconfig' >> ~/.config/fish/config.fish
+    ```
+
+    macOS (Intel)
+    ```bash
+    echo 'set -gx PKG_CONFIG_PATH /usr/local/opt/openssl/lib/pkgconfig' >> ~/.config/fish/config.fish
     ```
 
     > If you get an error like this: "Package libssl/libcrypto was not found in the
@@ -100,19 +111,19 @@ class Guides::GettingStarted::Installing < GuideAction
 
     ### Debian
 
-    ```plain
+    ```bash
     apt-get install libc6-dev libevent-dev libpcre2-dev libpng-dev libssl-dev libyaml-dev zlib1g-dev
     ```
 
     ### Ubuntu
 
-    ```plain
+    ```bash
     apt-get install libc6-dev libevent-dev libpcre2-dev libpcre3-dev libpng-dev libssl-dev libyaml-dev zlib1g-dev
     ```
 
     ### Fedora (28)
 
-    ```plain
+    ```bash
     dnf install glibc-devel libevent-devel pcre2-devel openssl-devel libyaml-devel zlib-devel libpng-devel
     ```
 
@@ -122,15 +133,15 @@ class Guides::GettingStarted::Installing < GuideAction
 
     ### 1. Install the Lucky CLI with Homebrew
 
-    ```plain
+    ```bash
     brew install luckyframework/homebrew-lucky/lucky
     ```
 
     ### 3. Check installation
 
     Let's make sure the Lucky CLI installed correctly:
 
-    ```plain
+    ```bash
     lucky -v
     ```
 
@@ -140,40 +151,40 @@ class Guides::GettingStarted::Installing < GuideAction
 
     ### 1. Clone the CLI repo
 
-    ```plain
+    ```bash
     git clone https://github.com/luckyframework/lucky_cli
     ```
 
     ### 2. Change into the newly cloned directory
 
-    ```plain
+    ```bash
     cd lucky_cli
     ```
 
     ### 3. Check out the latest released version
 
-    ```plain
+    ```bash
     git checkout #{LuckyCliVersion.current_tag}
     ```
 
     ### 4. Install shards
 
     We call packages/libraries in Crystal "shards". Let's install the shards that Lucky CLI needs:
 
-    ```plain
+    ```bash
     shards install --without-development
     ```
 
     ### 5. Build the CLI
 
-    ```plain
+    ```bash
     shards build --production
     ```
 
     ### 6. Move the generated binary to your path
 
     This will let you use `lucky` from the command line.
-    ```plain
+    ```bash
     cp bin/lucky /usr/local/bin
     ```
     Or anywhere else you deem fit
@@ -182,7 +193,7 @@ class Guides::GettingStarted::Installing < GuideAction
 
     Let's make sure the Lucky CLI installed correctly:
 
-    ```plain
+    ```bash
     lucky -v
     ```
 
@@ -206,7 +217,7 @@ class Guides::GettingStarted::Installing < GuideAction
     If you're using [Postgres.app](https://postgresapp.com) on macOS make sure
     [Postgres CLI tools](https://postgresapp.com/documentation/cli-tools.html) are installed
 
-    ```plain
+    ```bash
     sudo mkdir -p /etc/paths.d &&
       echo /Applications/Postgres.app/Contents/Versions/latest/bin | sudo tee /etc/paths.d/postgresapp
     ```
@@ -219,7 +230,7 @@ class Guides::GettingStarted::Installing < GuideAction
     use PostgreSQL without a password, you'll need to ensure your `pg_hba.conf` file is updated.
     We recommend adding this entry right after the `postgres` user entry:
 
-    ```plain
+    ```bash
     # TYPE  DATABASE        USER            ADDRESS                 METHOD
     # "local" is for Unix domain socket connections only
     local   all             all                                     trust
@@ -238,7 +249,7 @@ class Guides::GettingStarted::Installing < GuideAction
 
     First open a new session to reload your terminal, then:
 
-    ```plain
+    ```bash
     psql --version
     ```
 
@@ -256,7 +267,7 @@ class Guides::GettingStarted::Installing < GuideAction
 
     ### 2. Check installation
 
-    ```plain
+    ```bash
     node -v
     yarn -v
     ```

src/actions/guides/deploying/heroku.cr

@@ -36,7 +36,7 @@ class Guides::GettingStarted::StartingProject < GuideAction
 
     This option is great if you need to generate a Lucky app programmatically, or just prefer to get going right away.
 
-    ```
+    ```bash
     # Generate a Full Web app with Authentication
     lucky init.custom my_app
 

src/actions/guides/getting-started/installing.cr

@@ -111,6 +111,7 @@
     font-family: Menlo, Roboto Mono, Courier New, monospace;
     border-radius: 4px;
     padding: 1px 5px;
+    scrollbar-color: #4a5568 #2e3440;
 
     a {
       @apply text-blue-dark no-underline border-b border-blue-light;
@@ -122,11 +123,23 @@
   }
 
   pre {
-    code {
-      a {
-        @apply no-underline text-grey border-grey-dark;
+    position: relative;
+
+    .copy-code-button {
+      position: absolute;
+      right: 12px;
+      top: 12px;
+      transition: opacity 0.1s ease;
+      opacity: 0;
+      background-color: #2e3440; // Assuming a default background color for the button
+      &:hover {
+        opacity: 1 !important;
       }
     }
+
+    &:hover .copy-code-button {
+      opacity: 0.8;
+    }
   }
 
   &.-large-code {
@@ -215,4 +228,7 @@
       }
     }
   }
+  .bordered-icon {
+    @apply w-6 h-6 rounded-md border border-grey-light p-1;
+  }
 }

src/actions/guides/getting-started/starting_project.cr

@@ -8,14 +8,14 @@ module LuckyCliVersion
   end
 
   def current_version : SemanticVersion
-    SemanticVersion.new(1, 1, 0)
+    SemanticVersion.new(1, 1, 1)
   end
 
   def min_compatible_crystal_version : SemanticVersion
     SemanticVersion.new(1, 6, 0)
   end
 
   def max_compatible_crystal_version : SemanticVersion
-    SemanticVersion.new(1, 10, 1)
+    SemanticVersion.new(1, 11, 2)
   end
 end