Skip to content

Commit

Permalink
fix: resolve service callout links with useBaseUrl hook (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
MJZLOTR authored Dec 3, 2024
1 parent 61d7221 commit 9f831d1
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 96 deletions.
54 changes: 23 additions & 31 deletions src/components/HomepageContribute/index.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,27 @@
import clsx from 'clsx';
import styles from './styles.module.css';
import useBaseUrl from '@docusaurus/useBaseUrl';

export default function HomepageContribute(): JSX.Element {
return (
// <section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
<div className={clsx("row row--no-gutters", styles.item)}>
<div className={clsx("col col--12", styles.item__inner)}>
<div>
<h1 className="margin-bottom--md">Contribute</h1>
<p className="margin-bottom--md">
Share with our vibrant community all that cool staff you've built with Open Telekom Cloud.
</p>
<a href="/docs/features/version-and-publish" className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }} >
Join us on GitHub
</a>
{/* <a href="/docs/features/version-and-publish" className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }}>
Join us on Medium
</a> */}
</div>
</div>
{/* <div
className="col col--6"
aria-hidden="true"
style={{
backgroundImage: "url('./img/factory-inside.svg')",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "right",
}}
></div> */}
</div>
// </section>
);
}

return (
// <section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
<div className={clsx("row row--no-gutters", styles.item)}>
<div className={clsx("col col--12", styles.item__inner)}>
<div>
<h1 className="margin-bottom--md">Contribute</h1>
<p className="margin-bottom--md">
Share with our vibrant community all that cool staff you've built with Open Telekom Cloud.
</p>
<a href={useBaseUrl("/docs/features/version-and-publish")} className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }} >
Join us on GitHub
</a>
<a href={useBaseUrl("/docs/features/version-and-publish")} className="button button--secondary" style={{ marginRight: '10px', marginBottom: '10px' }}>
Join us on Medium
</a>
</div>
</div>
</div>
// </section>
);
}
75 changes: 38 additions & 37 deletions src/components/HomepageFeaturedServices/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,47 @@ import clsx from 'clsx';
import styles from './styles.module.css';
import FeaturedServices from '../ServiceCallouts/FeaturedServices';
import NewServices from '../ServiceCallouts/NewServices';
import useBaseUrl from '@docusaurus/useBaseUrl';

export default function HomepageFeaturedServices(): JSX.Element {
return (
return (
<section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
<div className={clsx("row row--no-gutters", styles.item)}>
<div className={clsx("col col--4", styles.item__inner)}>
<div>
<h1 className={clsx("margin-bottom--md", styles.item__title)}>
Explore our Featured Services
</h1>
<p className="margin-bottom--md">
Check out our collection of technical solutions, best practices and cool tips for the most popular services of Open Telekom Cloud.
</p>
<a className="button button--secondary" href="/docs/best-practices">
Explore our Best Practices
</a>
</div>
<div className={clsx("row row--no-gutters", styles.item)}>
<div className={clsx("col col--4", styles.item__inner)}>
<div>
<h1 className={clsx("margin-bottom--md", styles.item__title)}>
Explore our Featured Services
</h1>
<p className="margin-bottom--md">
Check out our collection of technical solutions, best practices and cool tips for the most popular services of Open Telekom Cloud.
</p>
<a className="button button--secondary" href={useBaseUrl("/docs/best-practices")}>
Explore our Best Practices
</a>
</div>
<div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
<FeaturedServices />
</div>
{/* <scale-divider></scale-divider> */}
<div className={clsx("col col--4", styles.item__inner)}>
<div>
<h1 className={clsx("margin-bottom--md", styles.item__title)}>
What's new?
</h1>
<p className="margin-bottom--md">
Explore the technical documentation of our brand new services in Help Center.
</p>
<a className="button button--secondary" href="https://www.open-telekom-cloud.com/en/products-services/roadmap" target="_blank">
Check the Portfolio Roadmap
</a>
</div>
</div>
<div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
<NewServices />
</div>
<div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
<FeaturedServices />
</div>
{/* <scale-divider></scale-divider> */}
<div className={clsx("col col--4", styles.item__inner)}>
<div>
<h1 className={clsx("margin-bottom--md", styles.item__title)}>
What's new?
</h1>
<p className="margin-bottom--md">
Explore the technical documentation of our brand new services in Help Center.
</p>
<a className="button button--secondary" href="https://www.open-telekom-cloud.com/en/products-services/roadmap" target="_blank">
Check the Portfolio Roadmap
</a>
</div>

</div>
</section>
);
}
<div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
<NewServices />
</div>

</div>
</section >
);
}
11 changes: 6 additions & 5 deletions src/components/HomepageFeatures/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';
import useBaseUrl from '@docusaurus/useBaseUrl';

import BestPracticesSvg from '@site/static/img/best-practices.svg';
import BlueprintsSvg from '@site/static/img/blueprints.svg';
Expand Down Expand Up @@ -33,7 +34,7 @@ const FeatureList: FeatureItem[] = [
<>
Discover tailored out-of-the-box solutions and
practical implementations for a range of scenarios. Explore real-world examples demonstrating the versatility and optimal
application and infrastructure design using Open Telekom Cloud.
application and infrastructure design using Open Telekom Cloud.
</>
),
link: '/docs/blueprints'
Expand All @@ -51,10 +52,10 @@ const FeatureList: FeatureItem[] = [
// },
];

function Feature({title, Svg, description, link}: FeatureItem) {
function Feature({ title, Svg, description, link }: FeatureItem) {
return (
<div className={clsx('col col--6')}>
<scale-card to={link} class="scale-telekom-feature-card">
<scale-card to={useBaseUrl(link)} class="scale-telekom-feature-card">
<div style={{margin: '-24px'}}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
Expand All @@ -68,9 +69,9 @@ function Feature({title, Svg, description, link}: FeatureItem) {
{/* <scale-button style={{margin: '16px'}} icon-position="after">
Get Started <scale-icon-navigation-right></scale-icon-navigation-right>
</scale-button> */}
</div>
</div>
</scale-card>
</div>
</scale-card>
</div>
);
}
Expand Down
41 changes: 21 additions & 20 deletions src/components/HomepageNewServices/index.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,29 @@
import clsx from 'clsx';
import styles from './styles.module.css';
import NewServices from '../ServiceCallouts/NewServices';
import useBaseUrl from '@docusaurus/useBaseUrl';

export default function HomepageNewServices(): JSX.Element {
return (
return (
<section className="container" style={{ paddingTop: '20px', paddingBottom: '45px' }}>
<div className={clsx("row row--no-gutters", styles.item)}>
<div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
<NewServices />
</div>
<div className={clsx("col col--4", styles.item__inner)}>
<div>
<h1 className={clsx("margin-bottom--md", styles.item__title)}>
Meet the New Comers
</h1>
<p className="margin-bottom--md">
Explore the new services added in Open Telekom Cloud portfolio.
</p>
<a className="button button--secondary" href="/docs/best-practices">
Check the Roadmap Portfolio
</a>
</div>
<div className={clsx("row row--no-gutters", styles.item)}>
<div className="col col--8" aria-hidden="true" style={{ paddingTop: '40px' }}>
<NewServices />
</div>
<div className={clsx("col col--4", styles.item__inner)}>
<div>
<h1 className={clsx("margin-bottom--md", styles.item__title)}>
Meet the New Comers
</h1>
<p className="margin-bottom--md">
Explore the new services added in Open Telekom Cloud portfolio.
</p>
<a className="button button--secondary" href={useBaseUrl("/docs/best-practices")}>
Check the Roadmap Portfolio
</a>
</div>
</div>
</section>
);
}
</div>
</section>
);
}
6 changes: 4 additions & 2 deletions src/components/ServiceCallouts/callout.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import clsx from "clsx";
import styles from "./styles.modules.css";
import { ComponentType, SVGProps } from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';


export interface Callout {
title: string;
text?: string;
link: string;

// icon: (props: React.ComponentProps<"svg">) => JSX.Element;
icon: ComponentType<SVGProps<SVGSVGElement>>;
}

function Callout(props: Callout): JSX.Element {
return (
<a href={props.link} className={styles.callout__link}>
<a href={useBaseUrl(props.link)} className={styles.callout__link}>
<div className={clsx("card", styles.callout, styles.callout__shadow)} style={{marginBottom: '30px'}}>
<div className="card__header">
<h3 style={{ fontWeight: 'bold', fontSize: 'medium', alignItems: 'center', display: 'flex', marginBottom: '0'}}>
Expand Down
3 changes: 2 additions & 1 deletion src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
// import Heading from '@theme/Heading';
// import { useThemeConfig } from '@docusaurus/theme-common';
// import useBaseUrl from '@docusaurus/useBaseUrl';

// import styles from './index.module.css';
import HomepageFeaturedServices from '../components/HomepageFeaturedServices';
Expand All @@ -22,7 +23,7 @@ import HomepageContribute from '../components/HomepageContribute';
// </Heading>
// <p className="hero__subtitle">Open Telekom Cloud {siteConfig.tagline}</p>
// <div className={styles.buttons}>
// <scale-button href="/docs/blueprints" variant={buttonVariant}>
// <scale-button href={useBaseUrl("/docs/blueprints")} variant={buttonVariant}>
// Get Started <scale-icon-navigation-right></scale-icon-navigation-right>
// </scale-button>
// </div>
Expand Down

0 comments on commit 9f831d1

Please sign in to comment.