Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: resolve service callout links with useBaseUrl hook #145

Merged
merged 5 commits into from
Dec 3, 2024
Merged

fix: resolve service callout links with useBaseUrl hook #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc4b66a
fix: resolve service callout links with useBaseUrl hook
mjztsystem Oct 22, 2024
3f201a4
fix: resolve homepage features links with useBaseUrl hook
mjztsystem Oct 22, 2024
3255358
fix: searched all files for statik links and converted them
mjztsystem Nov 28, 2024
5d464c1
Merge branch 'main' into 131-add-baseurl-in-service-callouts-href-in-…
MJZLOTR Dec 3, 2024
64a88f7
fix: commented useBaseUrl
MJZLOTR Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 23 additions & 31 deletions src/components/HomepageContribute/index.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading