From 5735d0cabc065bcdca438e8c532d0c7b1fd58450 Mon Sep 17 00:00:00 2001 From: Matvey <35634442+ronanru@users.noreply.github.com> Date: Fri, 1 Dec 2023 15:42:09 +0300 Subject: [PATCH] feat: copy button on terminal commands (#641) --- data/distro.yml | 372 +++++++++++++++---------------- source/javascripts/command.js | 39 ++++ source/layouts/layout.haml | 1 + source/stylesheets/site.css.scss | 22 ++ 4 files changed, 237 insertions(+), 197 deletions(-) create mode 100644 source/javascripts/command.js diff --git a/data/distro.yml b/data/distro.yml index 1336aae2..2c6bc32c 100644 --- a/data/distro.yml +++ b/data/distro.yml @@ -5,30 +5,26 @@

  • Install Flatpak

    To install Flatpak on Ubuntu 18.10 (Cosmic Cuttlefish) or later, simply run:

    - 
    
-          $ sudo apt install flatpak
-
    + sudo apt install flatpak

    With older Ubuntu versions, the official Flatpak PPA is the recommended way to install Flatpak. To install it, run the following in a terminal:

    - 
    
-          $ sudo add-apt-repository ppa:flatpak/stable
-          $ sudo apt update
-          $ sudo apt install flatpak
-
    + + sudo add-apt-repository ppa:flatpak/stable + sudo apt update + sudo apt install flatpak +

  • Install the Software Flatpak plugin

    The Flatpak plugin for the Software app makes it possible to install apps without needing the command line. To install, run:

    - 
    
-          $ sudo apt install gnome-software-plugin-flatpak
-
    + sudo apt install gnome-software-plugin-flatpak

    Note: the Software app is distributed as a Snap since Ubuntu 20.04 and does not support graphical installation of Flatpak apps. Installing the Flatpak plugin will also install a deb version of Software and result in two Software apps being installed at the same time.

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -44,9 +40,9 @@

    Flatpak is installed by default on Fedora Workstation, Fedora Silverblue, and Fedora Kinoite. To get started, all you need to do is enable Flathub, which is the best way to get Flatpak apps. Just download and install the Flathub repository file.

    Now all you have to do is install some apps!

    The above links should work on the default GNOME and KDE Fedora installations, but if they fail for some reason you can manually add the Flathub remote by running: - 

    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

    @@ -89,17 +85,17 @@

  • Install Flatpak

    To install Flatpak, run the following in the terminal:

    - 
    
-          $ sudo apt install flatpak
-
    + + sudo apt install flatpak +

    A more up to date flatpak package is available in the Debian backports repository.

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak --user remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak --user remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -115,15 +111,13 @@

    Flatpak is installed by default on Red Hat Enterprise Linux Workstation 9 and newer. To get started, all you need to do is enable Flathub, which is the best way to get Flatpak apps. Just download and install the Flathub repository file.

    To install Flatpak on Red Hat Enterprise Linux Workstation 8 or older, run the following in a terminal: - 

    
-          $ sudo yum install flatpak
-
    + sudo yum install flatpak

    Now all you have to do is install some apps!

    The above links should work on the default Red Hat Enterprise Linux Workstation 9 installation, but if they fail for some reason you can manually add the Flathub remote by running: - 

    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

    @@ -142,16 +136,14 @@

    Flatpak is available in the default repositories of all currently maintained openSUSE Leap and openSUSE Tumbleweed versions.

    If you prefer a graphical installation, you can install Flatpak using a "1-click installer" from software.opensuse.org. If your distribution version is not shown by default, click Show flatpak for other distributions first and then select from the list.

    Alternatively, install Flatpak from the command line using Zypper:

    - 
    
-          $ sudo zypper install flatpak
-
    + sudo zypper install flatpak

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -166,9 +158,7 @@

  • Install Flatpak

    To install Flatpak, run the following in a terminal:

    - 
    
-          $ sudo pacman -S flatpak
-
    + sudo pacman -S flatpak
    • @@ -185,27 +175,21 @@

  • Install Flatpak

    A flatpak package is available in Debian Buster and newer. To install it, run the following as root:

    - 
    
-          # apt install flatpak
-
    + apt install flatpak

  • Install the Software Flatpak plugin

    If you are running GNOME, it is also a good idea to install the Flatpak plugin for GNOME Software. To do this, run:

    - 
    
-          # apt install gnome-software-plugin-flatpak
-
    + apt install gnome-software-plugin-flatpak

    If you are running KDE Plasma, you can install the Flatpak plugin for KDE Discover instead:

    - 
    
-          # apt install plasma-discover-backend-flatpak
-
    + apt install plasma-discover-backend-flatpak

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          # flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -220,16 +204,14 @@

  • Install Flatpak

    Flatpak is installed by default on Rocky Linux 8 and newer, when installed with a software selection that includes GNOME (Server with GUI, Workstation). If you are using such a system, you may skip this step. To install Flatpak on Rocky Linux, run the following in a terminal:

    - 
    
-          $ sudo dnf install flatpak
-
    + sudo dnf install flatpak

  • Add the Flathub repository

    Flathub is the best way to get Flatpak apps. To enable it, download and install the Flathub repository file, or run the following in a terminal:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    To complete setup, restart your system. Now all you have to do is install some apps!

    @@ -267,20 +249,18 @@

  • Install Flatpak

    To install Flatpak, enable the ~amd64 keyword for sys-apps/flatpak, acct-user/flatpak and acct-group/flatpak:

    - 
    
-          # echo -e 'sys-apps/flatpak ~amd64\nacct-user/flatpak ~amd64\nacct-group/flatpak ~amd64\ndev-util/ostree ~amd64' >> /etc/portage/package.accept_keywords/flatpak
-
    + + echo -e 'sys-apps/flatpak ~amd64\nacct-user/flatpak ~amd64\nacct-group/flatpak ~amd64\ndev-util/ostree ~amd64' >> /etc/portage/package.accept_keywords/flatpak +

    Then, install Flatpak:

    - 
    
-          # emerge sys-apps/flatpak
-
    + emerge sys-apps/flatpak

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -296,33 +276,31 @@

  • Install Flatpak

    To install Flatpak on Kubuntu 18.10 (Cosmic Cuttlefish), simply run:

    - 
    
-          $ sudo apt install flatpak
-
    + sudo apt install flatpak

    With older Kubuntu versions, the official Flatpak PPA is the recommended way to install Flatpak. To install it, run the following in a terminal:

    - 
    
-          $ sudo add-apt-repository ppa:alexlarsson/flatpak
-          $ sudo apt update
-          $ sudo apt install flatpak
-
    + + sudo add-apt-repository ppa:alexlarsson/flatpak + sudo apt update + sudo apt install flatpak +

  • Install the Discover Flatpak backend

    The Flatpak plugin for the Software app makes it possible to install apps without needing the command line (available on Kubuntu 18.04 and newer). To install on 18.04, run:

    - 
    
-          $ sudo apt install plasma-discover-flatpak-backend
-
    + + sudo apt install plasma-discover-flatpak-backend +

    On Kubuntu 20.04 or later, you should run this instead:

    - 
    
-          $ sudo apt install plasma-discover-backend-flatpak
-
    + + sudo apt install plasma-discover-backend-flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -337,16 +315,16 @@

  • Install Flatpak

    To install Flatpak, run the following in a terminal:

    - 
    
-          $ sudo eopkg install flatpak xdg-desktop-portal-gtk
-
    + + sudo eopkg install flatpak xdg-desktop-portal-gtk +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -362,27 +340,27 @@

  • Install Flatpak

    Flatpak can be installed from the community repository. Run the following in a terminal:

    - 
    
-          $ doas apk add flatpak
-
    + + doas apk add flatpak +

  • Install the Software Flatpak plugin

    You can install the Flatpak plugin for either the GNOME Software (since v3.13) or KDE Discover (since v3.11), making it possible to install apps without needing the command line. To install, for GNOME Software run:

    - 
    
-          $ doas apk add gnome-software-plugin-flatpak
-
    + + doas apk add gnome-software-plugin-flatpak +

    And for KDE Discover, run this instead:

    - 
    
-          $ doas apk add discover-backend-flatpak
-
    + + doas apk add discover-backend-flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -397,20 +375,20 @@

  • Install Flatpak

    A flatpak package is available for Mageia 6 and newer. To install with DNF, run the following as root:

    - 
    
-          # dnf install flatpak
-
    + + dnf install flatpak +

    Or, to install with urpmi, run:

    - 
    
-          # urpmi flatpak
-
    + + urpmi flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -428,16 +406,16 @@

  • Install Flatpak

    To install Flatpak on Pop!_OS 19.10 and earlier, simply run:

    - 
    
-          $ sudo apt install flatpak
-
    + + sudo apt install flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --user --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --user --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -468,16 +446,16 @@

  • Install Flatpak

    A flatpak package is available in Raspberry Pi OS (previously called Raspbian) Stretch and newer. To install it, run the following as root:

    - 
    
-          # apt install flatpak
-
    + + apt install flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          # flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

    Important note: As of March 2021, Raspberry Pi computers still ship with the 32-bit version of Raspberry Pi OS. However Flathub started phasing out support for that architecture. If you consider Flathub as an important source of applications, it is recommended to use Raspberry Pi OS 64-bit as newer applications are more likely to be available for that platform.

  • @@ -492,9 +470,9 @@ info: >

      Flatpak is installed and Flathub repository is pre-configured by default on Clear Linux when installing the desktop bundle.

      - 
      
-        $ sudo swupd bundle-add desktop
-
      + + sudo swupd bundle-add desktop +

      Now all you have to do is install some apps!

    @@ -506,16 +484,16 @@

  • Install Flatpak

    To install Flatpak, run the following:

    - 
    
-          $ sudo xbps-install -S flatpak
-
    + + sudo xbps-install -S flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -533,21 +511,21 @@ To install Flatpak, set NixOS option services.flatpak.enable to true by putting the following into your /etc/nixos/configuration.nix:

    - 
    
+        
           services.flatpak.enable = true;
-
    +

    Then, rebuild and switch to the new configuration with:

    - 
    
-          $ sudo nixos-rebuild switch
-
    + + sudo nixos-rebuild switch +

    For more details see the NixOS documentation.

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Ready to go!

    @@ -571,29 +549,29 @@

  • Install Flatpak

    To install Flatpak on Turkman Linux, run the following in a terminal:

    - 
    
+        
           Emerge way
-          # ymp install build-base --no-emerge
-          # ymp install flatpak
+          ymp install build-base --no-emerge
+          ymp install flatpak
           No emerge way
-          # ymp install flatpak --no-emerge
-
    + ymp install flatpak --no-emerge +

  • Enable services

    To enable services on Turkman Linux, run the following in a terminal:

    - 
    
-          # rc-service add devfs
-          # rc-service add fuse
-          # rc-service add hostname
-
    + + rc-service add devfs + rc-service add fuse + rc-service add hostname +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-           $ flatpak --user remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak --user remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -610,16 +588,16 @@

  • Install Flatpak

    To install Flatpak, run the following:

    - 
    
-          $ sudo neko em flatpak
-
    + + sudo neko em flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -641,24 +619,24 @@

  • Install Flatpak

    To install Flatpak, run the following:

    - 
    
-          $ sudo apt install flatpak
-
    + + sudo apt install flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Install the Deepin themes

    To install light and dark themes, run:

    - 
    
-          $ flatpak install flathub org.gtk.Gtk3theme.deepin
-          $ flatpak install flathub org.gtk.Gtk3theme.deepin-dark
-
    + + flatpak install flathub org.gtk.Gtk3theme.deepin + flatpak install flathub org.gtk.Gtk3theme.deepin-dark +

  • Restart

    @@ -673,24 +651,24 @@

  • Install Flatpak

    A flatpak package is available in Pardus 2019 and newer. To install it, run the following as root:

    - 
    
-          # apt install flatpak
-
    + + apt install flatpak +

    For Pardus 2017 and older versions, a flatpak package is available in the official backports repository.

  • Install the Software Flatpak plugin

    If you are running GNOME, it is also a good idea to install the Flatpak plugin for GNOME Software. To do this, run:

    - 
    
-          # apt install gnome-software-plugin-flatpak
-
    + + apt install gnome-software-plugin-flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          # flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -722,16 +700,16 @@

  • Install Flatpak

    A flatpak package is available in Pisi 2.1 and newer. To install it, run the following as root:

    - 
    
-          $ sudo pisi it flatpak
-
    + + sudo pisi it flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -748,20 +726,20 @@

  • Install Flatpak

    To install Flatpak on EndeavorOS, you must first make sure your installation is up to date, run the following in a terminal:

    - 
    
-          $ sudo pacman -Syu
-
    + + sudo pacman -Syu +

    Then install Flatpak:

    - 
    
-          $ sudo pacman -S flatpak
-
    + + sudo pacman -S flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    @@ -789,16 +767,16 @@

  • Install Flatpak

    Flatpak can be installed from GNU Guix's default repositories. Run the following in a terminal:

    - 
    
-          $ guix install flatpak
-
    + + guix install flatpak +

  • Add the Flathub repository

    Flathub is the best place to get Flatpak apps. To enable it, run:

    - 
    
-          $ flatpak --user remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo
-
    + + flatpak --user remote-add --if-not-exists flathub https://dl.flathub.org/repo/flathub.flatpakrepo +

  • Restart

    diff --git a/source/javascripts/command.js b/source/javascripts/command.js new file mode 100644 index 00000000..ad33529b --- /dev/null +++ b/source/javascripts/command.js @@ -0,0 +1,39 @@ +// A web component to display a terminal command with a copy button. + +// Icons are from https://github.com/lucide-icons/lucide +const copyIcon = ``; +const checkIcon = ``; + +// Define custom element, so we can do apt install flatpak +class TerminalCommand extends HTMLElement { + constructor() { + super(); + } + connectedCallback() { + const commands = this.textContent + .trim() + .split("\n") + .map((command) => command.trim()) + .filter(Boolean); + + this.innerHTML = ""; + + const code = document.createElement("code"); + code.innerHTML = commands + .map((command) => `$ ${command}`) + .join("\n"); + this.appendChild(code); + + const button = document.createElement("button"); + button.title = "Copy the command to clipboard"; + button.innerHTML = copyIcon; + button.addEventListener("click", () => { + navigator.clipboard.writeText(commands.join("\n")); + button.innerHTML = checkIcon; + setTimeout(() => (button.innerHTML = copyIcon), 1000); + }); + this.appendChild(button); + } +} + +customElements.define("terminal-command", TerminalCommand); diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index d7837fce..decee220 100644 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -21,6 +21,7 @@ = javascript_include_tag "jquery.toc.min" = javascript_include_tag :bootstrap = javascript_include_tag :all + = javascript_include_tag :command, defer: true = matomo %body#page-top diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 42e9705f..65a246c7 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -944,3 +944,25 @@ ol.distrotut { font-variation-settings: 'wght' 600; font-size: 90%; } + +terminal-command { + @extend pre; + display: flex; + align-items: center; + gap: 1em; + code { + flex: 1; + padding: 1em; + } + button { + padding: 0.5em; + border: none; + background: transparent; + display: flex; + align-items: center; + svg { + width: 1.5em; + height: 1.5em; + } + } +} \ No newline at end of file