Merge pull request #533 from acelaya-forks/feature/shlink-web-client-4

Feature/shlink web client 4

CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [7.4.0] - 2024-01-30
+### Added
+* Update documentation around shlink-web-client, to reflect changes from v4.0.0
+* [#477](https://github.com/shlinkio/shlink.io/issues/477) Add icon to external links in docs menus
+
+### Changed
+* Update other dependencies
+* Update shlink-web-client screenshots and recordings
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [7.3.0] - 2023-12-26
 ### Added
 * Document `QR_CODE_FOR_DISABLED_SHORT_URLS` env var

src/components/DocsMenu.tsx

@@ -1,5 +1,5 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'; // eslint-disable-line import/named
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUpRightFromSquare, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
@@ -21,6 +21,7 @@ const MenuItem: FC<MenuItemProps> = ({ active, link, children, icon, isOpen, onC
     <Link className={classNames('nav-link', { active })} href={link}>
       {icon && <span className="theme-icon-holder me-2"><FontAwesomeIcon icon={icon} /></span>}
       {children}
+      {link.startsWith('http') && <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ms-2" />}
     </Link>
     {isOpen !== undefined && (
       <FontAwesomeIcon

src/components/DocsTableOfContents.tsx

@@ -1,3 +1,5 @@
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC, PropsWithChildren } from 'react';
 import { Fragment } from 'react';
 import type { Route } from '../utils/docUtils';
@@ -6,7 +8,10 @@ import { Link } from './Link';
 
 const MenuItem: FC<PropsWithChildren<{ link: string }>> = ({ link, children }) => (
   <li>
-    <Link href={link}>{children}</Link>
+    <Link href={link}>
+      {children}
+      {link.startsWith('http') && <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="ms-2" />}
+    </Link>
   </li>
 );
 

src/components/ShlinkWebClientVideo.tsx

@@ -2,10 +2,10 @@ import type { FC } from 'react';
 import { FakeBrowser } from './FakeBrowser';
 import { InlineVideo } from './InlineVideo';
 
-const poster = '/images/shlink-web-client-placeholder.jpg';
+const poster = '/images/shlink-web-client-placeholder.png';
 
 export const ShlinkWebClientVideo: FC = () => (
   <FakeBrowser>
-    <InlineVideo poster={poster} sources={['/videos/web-client.webm', '/videos/web-client.mp4']} />
+    <InlineVideo poster={poster} sources={['/videos/shlink-web-client.webm', '/videos/shlink-web-client.mp4']} />
   </FakeBrowser>
 );

src/pages/documentation/shlink-web-client/installation.mdx

@@ -2,6 +2,7 @@
 layout: ../../../layouts/DocsLayout.astro
 ---
 
+import { Callout } from '../../../components/Callout.js';
 import { markdownComponents } from '../../../utils/markdownUtils';
 
 export const components = markdownComponents
@@ -22,7 +23,11 @@ The main benefit of this approach is that you will always have the latest versio
 
 If you want to deploy shlink-web-client in a container-based infrastructure (kubernetes, docker swarm, etc), just pick the [shlinkio/shlink-web-client](https://hub.docker.com/r/shlinkio/shlink-web-client/) image from Docker hub, or [ghcr.io/shlinkio/shlink-web-client](https://github.com/shlinkio/shlink-web-client/pkgs/container/shlink-web-client) from GitHub Container Registry.
 
-It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/)-based image serving the static app on port 80.
+It's a lightweight [nginx:alpine](https://hub.docker.com/r/library/nginx/)-based image serving the static app on port 8080.
+
+<Callout type="info">
+  Before shlink-web-client 4.0.0, the docker image was serving the app on port 80.
+</Callout>
 
 ### Self-hosted