diff --git a/web/src/components/HomepageFeatures/feature.tsx b/web/src/components/HomepageFeatures/feature.tsx new file mode 100644 index 0000000..3a64556 --- /dev/null +++ b/web/src/components/HomepageFeatures/feature.tsx @@ -0,0 +1,49 @@ +import type {ComponentProps, ComponentType, ReactElement} from "react"; +import clsx from "clsx"; +import styles from "@site/src/components/HomepageFeatures/styles.module.css"; +import Heading from "@theme/Heading"; + +type FeatureItem = { + title: string; + Svg: ComponentType>; + description: string; +}; + +function Feature({title, Svg, description}: FeatureItem): ReactElement { + return ( +
+
+ +
+
+ {title} +

{description}

+
+
+ ); +} + +export function FeatureList(): ReactElement { + return ( +
+ + + +
+ ) +} diff --git a/web/src/components/HomepageFeatures/index.tsx b/web/src/components/HomepageFeatures/index.tsx index 1f43ae4..9e4b245 100644 --- a/web/src/components/HomepageFeatures/index.tsx +++ b/web/src/components/HomepageFeatures/index.tsx @@ -1,71 +1,13 @@ -import type {ReactNode} from 'react'; -import clsx from 'clsx'; -import Heading from '@theme/Heading'; +import type {ReactElement} from 'react'; import styles from './styles.module.css'; +import {FeatureList} from './feature'; -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: ReactNode; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Backup your clusters', - Svg: require('@site/static/img/undraw_going-up_g8av.svg').default, - description: ( - <> - Securely backup your CloudNativePG clusters to object storage with - configurable retention policies and compression options. - - ), - }, - { - title: 'Restore to any point in time', - Svg: require('@site/static/img/undraw_season-change_ohe6.svg').default, - description: ( - <> - Perform flexible restores to any point in time using a combination of - base backups and WAL archives. - - ), - }, - { - title: 'Cloud-native architecture', - Svg: require('@site/static/img/undraw_maintenance_rjtm.svg').default, - description: ( - <> - Seamlessly integrate with all major cloud providers and on-premises object storage - solutions. - - ), - }, -]; - -function Feature({title, Svg, description}: FeatureItem) { - return ( -
-
- -
-
- {title} -

{description}

-
-
- ); -} - -export default function HomepageFeatures(): ReactNode { - return ( -
-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); +export default function HomepageFeatures(): ReactElement { + return ( +
+
+ +
+
+ ); } diff --git a/web/src/components/Installation/index.tsx b/web/src/components/Installation/index.tsx index 1ffd030..064a0ea 100644 --- a/web/src/components/Installation/index.tsx +++ b/web/src/components/Installation/index.tsx @@ -1,16 +1,16 @@ -import { react } from 'react'; +import {ReactElement} from 'react'; import CodeBlock from '@theme/CodeBlock'; -import { useCurrentVersion } from '@site/src/hooks/versions'; +import {useCurrentVersion} from '@site/src/hooks/versions'; // InstallationSnippet is the kubectl incantation to install the lastest // available version of the Barman Cloud Plugin. -export function InstallationSnippet() { +export function InstallationSnippet(): ReactElement { const latest = useCurrentVersion('latestReleased'); - return( - - {`kubectl apply -f \\ + return ( + + {`kubectl apply -f \\ https://github.com/cloudnative-pg/plugin-barman-cloud/releases/download/v${latest}/manifest.yaml`} - + ); } diff --git a/web/src/hooks/versions.ts b/web/src/hooks/versions.ts index 706800c..785cc2f 100644 --- a/web/src/hooks/versions.ts +++ b/web/src/hooks/versions.ts @@ -1,28 +1,36 @@ -import { useActiveVersion, useLatestVersion, useVersions } from '@docusaurus/plugin-content-docs/client'; +import {useActiveVersion, useLatestVersion, useVersions} from '@docusaurus/plugin-content-docs/client'; -export function useCurrentVersion(fallback: 'latest' | 'latestReleased' = 'latest') { - const version = useActiveVersion('default'); - if (fallback === 'latestReleased') { - return useLatestReleasedVersion(); - } - if (fallback === 'latest') { - return version?.name ?? useLatestVersion('default'); +export function useCurrentVersion(fallback: 'latest' | 'latestReleased' = 'latest'): string { + switch (fallback) { + case 'latestReleased': + return useLatestReleasedVersion(); + case 'latest': { + const version = useActiveVersion('default'); + return version?.name ?? useLatestVersion('default')?.name; + } + default: + // The following line ensures that if `fallback` is not 'latest' or 'latestReleased', + // an error is thrown. This can be useful for catching unexpected states. + throw new Error(`Unhandled fallback type: ${fallback}`); } } - -export function useLatestReleasedVersion() { - const versions = useVersions('default'); // returns all versions, including "current" +export function useLatestReleasedVersion(): string { + const allVersions = useVersions('default'); // Filter out "current" to only consider versioned docs - const versioned = versions.filter(v => v.name !== 'current'); + const versionedDocs = allVersions.filter(version => version.name !== 'current'); - // Assuming the latest is the first in the list after sorting by semantic version - // in descending order - const latestVersion = versioned.length > 0 - ? versioned.sort((a, b) => (b.name.localeCompare(a.name, undefined, {numeric: true, sensitivity: 'base'})))[0] - : null; + // Handle the case where no versioned documents are found + if (versionedDocs.length === 0) { + return "unknown_version"; + } - return latestVersion.name + const sortedVersions = versionedDocs.sort((a, b) => { + return b.name.localeCompare(a.name, undefined, { numeric: true, sensitivity: 'base' }); + }); + + // The latest version is the first in the sorted list since versionedDocs was not empty, + return sortedVersions[0].name; } diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx index bc6fbe9..427ca31 100644 --- a/web/src/pages/index.tsx +++ b/web/src/pages/index.tsx @@ -1,4 +1,4 @@ -import type {ReactNode} from 'react'; +import type {ReactElement, ReactNode} from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; @@ -8,7 +8,7 @@ import Heading from '@theme/Heading'; import styles from './index.module.css'; -function HomepageHeader() { +function HomepageHeader(): ReactElement { const { siteConfig } = useDocusaurusContext(); return (
@@ -21,7 +21,7 @@ function HomepageHeader() { ); } -export default function Home(): ReactNode { +export default function Home(): ReactElement { const {siteConfig} = useDocusaurusContext(); return (