docs: Add API Clients landing page (#991)

Closes apify/apify-web#3622

Adds landing page for API clients (Python and JS). Menu item not added
yet

**Differences design-wise:**
- Wasn't able to figure out background svg in hero section 
- In that case, not sure if that transparent section border makes sense

---------

Co-authored-by: Eva Baldasseroni <[email protected]>

Author: HonzaTuron

apify-docs-theme/src/config.js

@@ -43,6 +43,9 @@ const themeConfig = ({
             {
                 label: 'API',
                 type: 'dropdown',
+                to: `${absoluteUrl}/api`,
+                target: '_self',
+                rel: 'dofollow',
                 activeBasePath: 'api',
                 position: 'left',
                 items: [

nginx.conf

@@ -190,7 +190,7 @@ server {
   rewrite ^/academy/web-scraping-for-beginners/crawling/processing-data$ /academy/web-scraping-for-beginners/crawling/exporting-data permanent;
   rewrite ^/academy/web-scraping-for-beginners/crawling/recap-collection-basics$ /academy/web-scraping-for-beginners/crawling/recap-extraction-basics permanent;
   rewrite ^/academy/php/using-apify-scraper-with-php$ /academy/php/use-apify-from-php permanent;
-  rewrite ^/api/?$ /api/v2 redirect;
+  rewrite ^/api/client?$ /api redirect;
 
   # sdk/js/api -> sdk/js/reference
   rewrite ^/sdk/js/api/apify(.*)$ /sdk/js/reference$1 permanent;

package-lock.json

@@ -56,7 +56,7 @@
         "typescript": "^5.1.3"
     },
     "dependencies": {
-        "@apify-packages/ui-library": "^0.8.0",
+        "@apify-packages/ui-library": "^0.12.0",
         "@apify/docsearch-apify-docs": "3.5.3",
         "@docusaurus/core": "^2.4.1",
         "@docusaurus/plugin-client-redirects": "^2.4.1",
@@ -66,6 +66,7 @@
         "@giscus/react": "^2.2.8",
         "clsx": "^2.0.0",
         "form-data": "^4.0.0",
+        "github-buttons": "^2.28.0",
         "postcss-preset-env": "^9.3.0",
         "prop-types": "^15.8.1",
         "proxy-from-env": "^1.1.0",

package.json

@@ -36,11 +36,11 @@ const BUTTON_SIZES_CSS = {
         font-size: 1.6rem;
         font-style: normal;
         font-weight: 600;
-        line-height: 2.4rem; 
+        line-height: 2.4rem;
 
         @media (min-width: ${theme.layout.desktop}) {
             font-size: 1.8rem;
-            line-height: 2.8rem; 
+            line-height: 2.8rem;
         }
     `,
 };
@@ -81,9 +81,8 @@ const StyledButton = styled.button<ButtonProps>`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
     font-family: var(--ifm-font-family-base);
-    
+
     ${getButtonVariantCss}
     ${getButtonSizeCss}
 `;

src/components/Button.tsx

@@ -0,0 +1,11 @@
+import { useColorMode } from '@docusaurus/theme-common';
+import { GitHubButtonProps } from 'github-buttons';
+import React, { PropsWithChildren } from 'react';
+import GitHubButton from 'react-github-btn';
+
+export default function GitButton(props: PropsWithChildren<GitHubButtonProps>) {
+    const { colorMode } = useColorMode();
+    return (
+        <GitHubButton data-color-scheme={colorMode} {...props} />
+    );
+}

src/components/GitButton.tsx

@@ -7,12 +7,14 @@ import { Heading } from '../Heading';
 interface HeroProps {
     heading: string;
     description: React.ReactNode | string;
+    className?: string;
+    isCentered?: boolean;
 }
 
-export default function Hero({ heading, description }: HeroProps) {
+export default function Hero({ heading, description, className, isCentered }: HeroProps) {
     return (
-        <header className={clsx(styles.heroBanner)}>
-            <div className={styles.heroBannerContent}>
+        <header className={clsx(styles.heroBanner, className)}>
+            <div className={clsx(styles.heroBannerContent, isCentered && styles.heroBannerContentCentered)}>
                 <div>
                     <Heading type='title3Xl' className={styles.tagline}>{heading}</Heading>
                 </div>

src/components/Hero/Hero.tsx

@@ -14,7 +14,8 @@
 }
 
 @media (min-width: 768px) {
-    .heroBannerContent { max-width: 738px;  align-items: flex-start; text-align: left; }
+    .heroBannerContent { max-width: 738px; align-items: flex-start; text-align: left; }
+    .heroBannerContent.heroBannerContentCentered { max-width: 738px; align-items: center; }
     .heroBanner { margin-bottom: 0; }
 }
 
@@ -50,7 +51,6 @@
 html[data-theme='dark'] .heroBanner::after {
     background: linear-gradient(180deg, #1A1B21 0%, rgba(26, 27, 33, 0) 100%);
     transform: matrix(1, 0, 0, -1, 0, 0);
-
 }
 
 .heroBanner .heroDescription {

src/components/Hero/styles.module.css

@@ -1,4 +1,5 @@
 import { theme } from '@apify-packages/ui-library';
+import clsx from 'clsx';
 import React from 'react';
 
 import styles from './styles.module.css';
@@ -7,13 +8,14 @@ import { Text } from '../Text';
 
 interface SectionProps {
     heading?: string;
-    description?: string;
-    children: React.ReactNode | string;
+    description?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
 }
 
-export default function Section({ heading, description, children }: SectionProps) {
+export default function Section({ heading, description, className, children }: SectionProps) {
     return (
-        <section className={styles.section}>
+        <section className={clsx(styles.section, className)}>
             {(heading || description) && <div className={styles.sectionHeader}>
                 {heading && <Heading type='titleXl'>{heading}</Heading>}
                 {description && <Text color={theme.color.neutral.textMuted}>{description}</Text>}

src/components/Section/Section.tsx

@@ -0,0 +1,52 @@
+import { theme } from '@apify-packages/ui-library';
+import clsx from 'clsx';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Heading } from './Heading';
+
+const TabsWrapper = styled.div`
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    height: 100%;
+    border-bottom: 1px solid ${theme.color.neutral.separatorSubtle};
+    margin-bottom: 24px;
+
+    .TabItem {
+        color: ${theme.color.neutral.textSubtle};
+        padding: ${theme.space.space8};
+        cursor: pointer;
+    }
+
+    .TabItem-active {
+        color: ${theme.color.primary.text};
+        border-bottom: 2px solid ${theme.color.primary.action};
+    }
+`;
+
+interface TabsProps {
+    items: {
+        title: React.ReactNode;
+        content: React.ReactNode;
+    }[];
+}
+
+export default function Tabs({ items }: TabsProps) {
+    const [activeTab, setActiveTab] = React.useState(0);
+
+    return (<>
+        <TabsWrapper>
+            {items.map(({ title }, index) => (
+                <Heading
+                    key={title?.toLocaleString()}
+                    $type="titleS"
+                    className={clsx('TabItem', activeTab === index && 'TabItem-active')}
+                    onClick={() => setActiveTab(index)}
+                >{title}</Heading>
+            ))}
+        </TabsWrapper>
+        {items[activeTab].content}
+    </>
+    );
+}