diff --git a/.markdownlint.json b/.markdownlint.json index 31c18c56f3..cc2d21cab7 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -23,7 +23,8 @@ "details", "summary", "a", - "br" + "br", + "div" ] }, diff --git a/assets/styles/responsive-videos.css b/assets/styles/responsive-videos.css new file mode 100644 index 0000000000..595d4c68dc --- /dev/null +++ b/assets/styles/responsive-videos.css @@ -0,0 +1,16 @@ +/* Defines the styling used by https://embedresponsively.com/ to let us embed responsive YouTube videos. */ + +.embed-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; + max-width: 100%; } + +.embed-container iframe, .embed-container object, .embed-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} diff --git a/content/pop-basics.md b/content/pop-basics.md index 8239e67f83..8f89ef7f26 100644 --- a/content/pop-basics.md +++ b/content/pop-basics.md @@ -17,185 +17,130 @@ section: pop tableOfContents: true --- -Welcome to the Pop!_OS desktop! By default, it's clean and ready for action. -The Pop!_OS operating system provides all the features you would expect from a modern desktop. +Welcome to the Pop!_OS desktop! Pop!_OS provides all the features you would expect from a modern operating system. The basic elements are outlined below. -Pop!\_OS is based on Ubuntu, however, extra features and tools have been added, while other aspects have been slimmed down. You can read more about Pop!\_OS features and the differences between Pop!\_OS and Ubuntu [here](/articles/difference-between-pop-ubuntu). +## COSMIC Desktop Environment -## Pop!_OS Desktop Environment +Pop!\_OS 24.04 includes the [COSMIC desktop environment](https://system76.com/cosmic). COSMIC is written in the Rust programming language and is an acronym for _Computer Operating System Main Interface Components_. -The Pop!_OS Desktop environment is based on GNOME shell and layered with other components called **Pop!\_Shell** and **C.O.S.M.I.C. (Computer Operating System Main Interface Components)** For more info, including source code, refer to [this page](https://github.com/pop-os/). +## The Launcher -Once familiar with the Pop!\_OS default settings, users may want to further [customize](/articles/customize-gnome) the desktop environment (DE), or even [install another DE](/articles/desktop-environment) alongside the default. +The Launcher is a search-based utility for accessing and opening applications and files. This video demonstrates the powerful funcationality of the COSMIC Launcher: -## Workflow +
-Pop!\_OS is designed to provide smooth, efficient workflow features. There are several options for control and navigation. +To open the Launcher, press the SUPER key, which is usually located between the `Fn` and `Alt` keys (and may have an icon with a window on it). You can also click the Launcher magnifying glass icon in the dock. -### COSMIC Workflow + - +To switch between open applications, you can click one of the windows listed in the launcher, or use the up and down arrow keys to select one followed by `Enter`. Installed applications available to launch are listed below the open windows. Keyboard shortcuts to activate the first ten results are listed on the right side. -This video shows how to use the `Launcher`, and how to switch between open applications. Applications and tiling functions can be controlled with keyboard shortcuts or trackpad gestures. It also covers customizing the dock size, behavior and position. +### Launcher Features -To open the `Launcher` press the SUPER key. or click the launcher icon in the Dock. +Additional features can be accessed by starting your search with specific characters or terms. -To switch between open applications you can click, or arrow down, the list of applications in the Launcher window, or swipe with three fingers in the direction of the application window. +- **Built-in Calculator:** Type = and the equation, then press Enter for the result. +- **File Search:** Find files by typing `find` followed by the search term or file name, then select a result to open it. +- **Internet Search:** Search a variety of popular search engines from the Launcher. You can type the name of the search engine, like `google` or `duckduckgo`, or use abbreviations (`gs` and `ddg`, respectively), followed by your search term. When the Launcher result is selected, the default web browser will open with the search results. + - The Launcher's GitHub repository contains [a full list of supported search engines and abbreviations](https://github.com/pop-os/launcher/blob/master/plugins/src/web/config.ron). -Swipe with four fingers to the left to open `Workspaces`. Swipe with four fingers to the right to open `Applications`. +## The Dock -To customize the Dock, as well as other aspects of the look and feel of the Pop!\_OS desktop environment, navigate to `Settings` -> `Desktop`. To change settings for the Dock select the `Dock` submenu. +By default, the Dock is located at the bottom of the screen and consists of pinned application icons, running applications, and minimized windows. To customize the dock, as well as other aspects of the desktop environment, navigate to `Settings` -> `Desktop`. To change settings for the Dock, select the `Dock` submenu. -`Dock` settings include, for example: + -- `Extend dock to the edges of the screen` or only take up space in the middle. -- Be located on the `Bottom of the screen`, `Along the left side` or `Along the right side` of the screen. -- `Always visible` or `Intelligently hide` when app windows share the same space. -- Dock and Icon size adjustments. + -### Stacking Tutorial +Dock settings include the following options: - +- Whether to enable or disable the Dock +- Whether to hide the Dock when it's not in use +- Whether to extend the Dock to the screen edges or only take up space in the middle +- Which screen(s) and where on the screen the Dock should appear +- The size and background opacity of the Dock +- Which applets are present on the Dock, and in what order + - Click `Configure dock applets` to rearrange existing applets on the Dock, and then `Add applet` to view the list of available applets. -This video covers how to use Pop!\_OS' tile-stacking feature to take advantage of Pop!\_Shell window organization on smaller displays. + -- SUPER + S converts a window to a stack. Dragging a window out of the stack and repeating the SUPER + S combination again converts back to a standard window. +The Launcher, Workspaces, and Applications shortcuts are their own applets; all other pinned applications are part of the `App Tray` applet. To remove pinned applications from the Dock or pin running applications to the Dock, right-click their icon in the Dock and select the appropriate option. -- SUPER + ENTER then use the arrow keys ← , → , ↑ , ↓ (or Vim shortcuts) to move windows into or out of the stack. You can also click and drag windows into the stack. +## The Panel -**NOTE:** In 20.04, the `Launcher` keyboard shortcut is SUPER + /, and pressing SUPER opens the `Activities` overview. +By default, the Panel is the top bar of the desktop with a clock in the middle. The Panel is made up of the same type of applets that make up the Dock. The default applets in the Panel can be used to adjust various settings like volume, Bluetooth, and accessibility, or to connect to WiFi networks, change power or graphics settings, and log out/restart/shut down the computer. Quick access to applications can also be added to the panel. -- While on an active stack, launching an application from the `Launcher` or the `Activities` overview will automatically add it to the stack. +Open COSMIC Settings and click `Desktop`, then select `Panel` to customize the behavior, style, and placement of applets on the Panel. The Panel settings include the same options as the Dock settings. -- You can switch between windows in the stack by pressing SUPER + ← / →. + -### Auto Tiling Tutorial +## COSMIC Settings - +Adjust system settings and personal preferences like the look and feel of the desktop in the COSMIC Settings application. To view available configuration options, click the icon with the button toggle symbol in the Dock, or activate the Launcher and search 'settings'. -This video shows the features of Pop!\_Shell auto-tiling. Covered are default behaviors, and ways to adjust settings and view keyboard shortcuts. +## Automatic Window Tiling -- Click the Tiling icon in the top right of top-bar. The icon is to the left the the `Top-right Menu`. -- The dropdown features options to automatically tile/untile the current application windows. -- `Active Hints` can be enabled which highlight the active application window in a color of your choice. -- Users can adjust the gap between application windows, and view keyboard shortcuts. +This video shows the auto-tiling and window stacking features of the COSMIC desktop: -**NOTE:** Current versions of Pop!\_Shell also offer options for showing or hiding window title bars. + -### Keyboard Shortcuts +- Click the tiling icon in the top right of the panel to access tiling settings. + - Toggle the `Tile current workspace` option to activate or deactivate tiling in the current workspace. + - The `Active hint` option highlights the border of the active application window in a color of your choice. - + -This video covers keyboard shortcuts for opening the `Launcher`, opening applications, and switching between open applications or workspaces. It also covers how to navigate and adjust open applications windows. +### Window Stacking -For a more detailed overview of Pop!\_OS keyboard shortcuts, refer to [this article](/articles/pop-keyboard-shortcuts). +- SUPER + S converts a window to a stack. Dragging a window out of the stack and repeating the SUPER + S combination again converts back to a standard window. +- In tiling mode, you can add windows to a stack by dragging them into the stack. +- While on an active stack, launching an application from the launcher will automatically add it to the stack. +- Switch between windows in the stack by pressing SUPER + ← / →, or using the tabs at the top of the stack. ## Workspaces -Depending on which version of Pop!\_OS is installed on your system, the placement and appearance of workspaces may vary. Usage and features of workspaces remain essentially the same across versions. +Accessing Workspaces will show an overview of all open windows, available workspaces, and the placement of application windows in the workspaces. -### Pop!_OS 21.04 COSMIC Desktop - Workspaces Tutorial +This video shows the Workspaces functionality in Pop!\_OS 24.04: - + -This video shows how to access the `Workspaces` overview and how to use gestures and keyboard shortcuts to navigate COSMIC. - -There are four ways to access the `Workspaces` overview: +By default, there are three ways to access the Workspaces overview: 1. Click on the Workspaces icon in the Dock. -2. Click on `Workspaces` in the top-left. -3. Swipe left on the trackpad with four (4) fingers. -4. Press SUPER + D - -Once in the `Workspaces` overview, you can move active application windows to different workspaces by clicking and dragging them, or by pressing - SUPER + SHIFT + ↑ / ↓. - -Click on the thumbnail for a specific workspace to switch to it, or use -SUPER + CTRL + ↑ / ↓ to switch to workspaces above or below the current one. - -### Pop!_OS 20.04 Workspaces Tutorial - - - -This video shows methods for accessing the `Activities` overview, then managing workspaces and their applications in the Pop!\_OS 20.04 desktop environment. - -- Press SUPER to enter the `Activities` overview. -- Click and drag application windows to the desired workspace on the right-hand side. -- Click on the thumbnail for a specific workspace to switch to it, or use -SUPER + CTRL + ↑ / ↓ to switch to workspaces above or below the current one. -- Move active application windows to different workspaces by clicking and dragging them in the overview, or by pressing - SUPER + SHIFT + ↑ / ↓. - -## Desktop Menus and Navigation - -### Pop!_OS 21.10 - -Pop!\_OS 21.10 introduced a new UI for the `Applications` menu. - -By default, all apps installed are shown in alphabetical order. Application folders are grouped along the bottom of the window. New folders can be created, and apps can be dragged into, or out of folders. - -If a folder is deleted, all applications in the folder revert to their original location and alphabetical order in the main menu. - - - -As in previous versions a search box is provided which can search installed applications, or applications to install from the [Pop!\_Shop](#pop_shop-app-installation). - - - -### Pop!_OS 21.04 - - - - - -To navigate within the desktop, click the `Workspaces` or `Applications` button in the top left, or press the SUPER key on the keyboard. - -Clicking `Workspaces` will show an overview of all open windows, available workspaces, and the placement of application windows in the workspaces. - - - -`Applications` opens the application menu, which shows installed programs and program folders in alphabetical order. There is also a search box located at the top of the page to quickly find a desired application or to search the [Pop!\_Shop](#pop_shop-app-installation) for additional software to install. - - - -Individual applications will have variations in their sub-menus. Many applications have a menu button located in the top-right or left of the application window. This menu button is usually represented by either three stacked vertical lines (as pictured below, sometimes called the "hamburger" menu), or three vertical dots. - - - -The `Top-right Menu` can be used to adjust volume and screen brightness, connect to WiFi networks, change power or graphics settings and log out/restart/shut down the computer. You can open the system settings using the gear icon in this menu. - - - -### Pop!\_OS 20.04 +2. Click on the word Workspaces in the top left of the screen. +3. Press SUPER + w. - +From the Workspaces overview, you can switch between the current workspaces by clicking on them, drag windows between different workspaces, rearrange workspaces by dragging them, and pin workspaces to keep them even when empty. -To navigate within the desktop, either click the `Activities` button in the top left, or press the SUPER key on the keyboard. This will show an overview of all open windows and provide a text box to search your system. +### Workspaces Shortcuts - +You can use SUPER + CTRL + ↑ / ↓ to switch to workspaces above or below the current one without opening the Workspaces menu. You can also move the selected window to the previous or next workspace using SUPER + SHIFT + CTRL ← / →. -Click the `Show Applications` button on the left to show all currently installed programs. +## Applications - +Applications opens the application library, which shows installed programs in alphabetical order. There's a search box located at the top of the page to quickly find a desired application or to search the COSMIC Store. A list of folders to organize the applications is at the bottom. -Type in any word to search your computer for installed programs, files, and items in the Pop!_Shop. + - +Individual applications will have variations in their sub-menus. Many applications have a menu button located in the top-right or left of the application window for application-specific settings and functions. This menu button is usually represented by either three stacked vertical lines or three vertical dots, sometimes referred to as the "hamburger menu." -You can find options for the current window you're working in using the Menu Bar at the top of the screen. +Default applications included with Pop!_OS 24.04 are outlined in [the Default Apps article](/articles/default-apps). - +## COSMIC Store (Application Installation and Software Updates) -For many applications, additional options are available in a separate menu within the application itself. +The COSMIC Store can be used to install additional software and update currently installed software. Search for programs or browse for them by category, then click the `Install` button to add them to your computer. - + -The `Top-right Menu` can be used to adjust volume and screen brightness, connect to WiFi networks, change power or graphics settings and log out/restart/shut down the computer. You can open the system settings using the gear icon in this menu. +Manage repositories by clicking the gear icon in the top right of the COSMIC Store. For more information about package management in Pop!\_OS, see the [Manage Repos article](/articles/manage-repos-pop/). - +To update currently installed software, click `Updates` in the left menu of the COSMIC Store. Buttons to `Check for updates` and `Update all` are located in the top right corner of the page. -## Pop!_Shop (App Installation) + -The Pop!_Shop can be used to install additional software. Just search for programs or browse for them by category, and click the `Install` button to add them to your computer. +## Keyboard Shortcuts - +For a more detailed overview of Pop!\_OS keyboard shortcuts, refer to [the Keyboard Shortcuts article](/articles/pop-keyboard-shortcuts). -To learn more about the Pop!_Shop refer to [this page](https://github.com/pop-os/shop), and for more information about package management in Pop!\_OS see this [article](/articles/manage-repos-pop/). +You can read more about Pop!\_OS features on the [Pop!_OS homepage](https://system76.com/pop/), or view the source code in [the Pop!_OS GitHub organization](https://github.com/pop-os/). diff --git a/nuxt.config.js b/nuxt.config.js index 0ca064e233..74b907e3c9 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -64,7 +64,8 @@ export default async () => ({ '@fortawesome/fontawesome-svg-core/styles.css', '@system76/design/dist/minimal.common.css', '@system76/components/dist/index.common.css', - '~/assets/styles/code-highlighting.css' + '~/assets/styles/code-highlighting.css', + '~/assets/styles/responsive-videos.css' ], plugins: [ diff --git a/static/images/pop-basics/pop-basics-access-dock-in-cosmic-settings.png b/static/images/pop-basics/pop-basics-access-dock-in-cosmic-settings.png new file mode 100644 index 0000000000..3ccfe65f8e Binary files /dev/null and b/static/images/pop-basics/pop-basics-access-dock-in-cosmic-settings.png differ diff --git a/static/images/pop-basics/pop-basics-access-panel-settings.png b/static/images/pop-basics/pop-basics-access-panel-settings.png new file mode 100644 index 0000000000..5ca7e248f9 Binary files /dev/null and b/static/images/pop-basics/pop-basics-access-panel-settings.png differ diff --git a/static/images/pop-basics/pop-basics-activate-tiling.png b/static/images/pop-basics/pop-basics-activate-tiling.png new file mode 100644 index 0000000000..80c118bc4e Binary files /dev/null and b/static/images/pop-basics/pop-basics-activate-tiling.png differ diff --git a/static/images/pop-basics/pop-basics-add-applet.png b/static/images/pop-basics/pop-basics-add-applet.png new file mode 100644 index 0000000000..052ea3ce8d Binary files /dev/null and b/static/images/pop-basics/pop-basics-add-applet.png differ diff --git a/static/images/pop-basics/pop-basics-applications-overview.png b/static/images/pop-basics/pop-basics-applications-overview.png new file mode 100644 index 0000000000..a137c95b7d Binary files /dev/null and b/static/images/pop-basics/pop-basics-applications-overview.png differ diff --git a/static/images/pop-basics/pop-basics-cosmic-store.png b/static/images/pop-basics/pop-basics-cosmic-store.png new file mode 100644 index 0000000000..41867c59a4 Binary files /dev/null and b/static/images/pop-basics/pop-basics-cosmic-store.png differ diff --git a/static/images/pop-basics/pop-basics-dock-settings-view.png b/static/images/pop-basics/pop-basics-dock-settings-view.png new file mode 100644 index 0000000000..18a205a689 Binary files /dev/null and b/static/images/pop-basics/pop-basics-dock-settings-view.png differ diff --git a/static/images/pop-basics/pop-basics-launcher-example.png b/static/images/pop-basics/pop-basics-launcher-example.png new file mode 100644 index 0000000000..fe74024782 Binary files /dev/null and b/static/images/pop-basics/pop-basics-launcher-example.png differ diff --git a/static/images/pop-basics/pop-basics-software-updates-cosmic-store.png b/static/images/pop-basics/pop-basics-software-updates-cosmic-store.png new file mode 100644 index 0000000000..2470124614 Binary files /dev/null and b/static/images/pop-basics/pop-basics-software-updates-cosmic-store.png differ