@apify/docs-theme 1.0.251 → 1.0.253

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apify/docs-theme",
-  "version": "1.0.251",
+  "version": "1.0.253",
   "description": "",
   "main": "./src/index.js",
   "files": [

package/src/config.js

@@ -136,13 +136,6 @@ const themeConfig = {
                     },
                 ],
             },
-            {
-                href: 'https://discord.com/invite/jyEM2PRvMU',
-                label: 'Discord',
-                title: 'Chat on Discord',
-                position: 'right',
-                className: 'icon',
-            },
         ],
     },
     colorMode: {

package/src/theme/Navbar/CTA/index.jsx

@@ -1,6 +1,6 @@
 import styles from './styles.module.css';
 
-const buttonText = 'Go to Console';
+const buttonText = 'Get started';
 
 function clickHandler() {
     if (window.analytics) {

package/src/theme/Navbar/Content/DiscordIcon.jsx

@@ -0,0 +1,10 @@
+export function DiscordIcon({ color = 'currentColor', size = 24 }) {
+    return (
+        <svg width={size} height={size} viewBox="100 195 800 625" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fill={color}
+                d="M386 203h2l7 9c-128 36-186 92-186 92s15-8 41-20c76-34 136-43 161-45 4-1 8-1 12-1 43-6 92-7 143-2 67 8 139 28 213 68 0 0-56-53-176-90l9-11s97-2 199 74c0 0 102 185 102 412 0 0-60 103-216 108 0 0-26-30-47-57 93-26 128-84 128-84-29 19-57 32-81 41-36 15-70 25-103 31-68 12-130 9-183-1-40-8-75-19-104-30-16-7-34-15-52-24-2-2-4-3-6-4-1-1-2-1-3-2-13-7-20-12-20-12s34 56 124 83c-21 27-47 59-47 59-157-5-216-108-216-108 0-227 102-412 102-412 95-71 186-74 197-74m-18 264c-41 0-72 35-72 78s32 79 72 79 72-36 72-79c1-43-32-78-72-78m258 0c-40 0-72 35-72 78s32 79 72 79 72-36 72-79-32-78-72-78"
+            />
+        </svg>
+    );
+}

package/src/theme/Navbar/Content/index.jsx

@@ -11,6 +11,7 @@ import React from 'react';
 
 // import SearchBar from '../../SearchBar';
 import NavbarCTA from '../CTA';
+import { DiscordIcon } from './DiscordIcon';
 
 function NavbarItems({ items }) {
     return (
@@ -22,11 +23,12 @@ function NavbarItems({ items }) {
     );
 }
 
-function NavbarContentLayout({ left, right }) {
+function NavbarContentLayout({ left, center, right }) {
     return (
         <div className="navbar__inner">
             <div className="navbar__container">
                 <div className="navbar__items">{left}</div>
+                <div className="navbar__items navbar__items--center">{center}</div>
                 <div className="navbar__items navbar__items--right">{right}</div>
             </div>
         </div>
@@ -88,22 +90,42 @@ export default function NavbarContent() {
                 left={
                     <>
                         <NavbarLogo />
-                        <NavbarItems items={leftItems} />
                     </>
                 }
+                center={
+                    !searchBarItem && (
+                        <NavbarSearch>
+                            <SearchBar />
+                        </NavbarSearch>
+                    )
+                }
                 right={
                     <>
-                        <NavbarItems items={rightItems} />
-                        {!searchBarItem && (
-                            <NavbarSearch>
-                                <SearchBar />
-                            </NavbarSearch>
-                        )}
+                        <a
+                            href="https://discord.com/invite/jyEM2PRvMU"
+                            className="icon"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <DiscordIcon size={20} />
+                        </a>
                         <NavbarCTA />
                         <NavbarMobileSidebarToggle />
                     </>
                 }
             />
+            <NavbarContentLayout
+                left={
+                    <>
+                        <NavbarItems items={leftItems} />
+                    </>
+                }
+                right={
+                    <>
+                        <NavbarItems items={rightItems} />
+                    </>
+                }
+            />
             <SubNavbar />
         </div>
     );

package/src/theme/SearchBar/SparklesIcon.jsx

@@ -0,0 +1,20 @@
+export function SparklesIcon({ color = 'currentColor', size = 16 }) {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 16 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+        >
+            <path
+                d="M11.6673 12.5007C12.1093 12.5007 12.5333 12.6762 12.8458 12.9888C13.1584 13.3014 13.334 13.7253 13.334 14.1673C13.334 13.7253 13.5096 13.3014 13.8221 12.9888C14.1347 12.6762 14.5586 12.5007 15.0007 12.5007C14.5586 12.5007 14.1347 12.3251 13.8221 12.0125C13.5096 11.6999 13.334 11.276 13.334 10.834C13.334 11.276 13.1584 11.6999 12.8458 12.0125C12.5333 12.3251 12.1093 12.5007 11.6673 12.5007ZM11.6673 2.50065C12.1093 2.50065 12.5333 2.67625 12.8458 2.98881C13.1584 3.30137 13.334 3.72529 13.334 4.16732C13.334 3.72529 13.5096 3.30137 13.8221 2.98881C14.1347 2.67625 14.5586 2.50065 15.0007 2.50065C14.5586 2.50065 14.1347 2.32506 13.8221 2.0125C13.5096 1.69994 13.334 1.27601 13.334 0.833984C13.334 1.27601 13.1584 1.69994 12.8458 2.0125C12.5333 2.32506 12.1093 2.50065 11.6673 2.50065ZM5.83398 12.5007C5.83398 11.1746 6.36077 9.9028 7.29845 8.96512C8.23613 8.02744 9.5079 7.50065 10.834 7.50065C9.5079 7.50065 8.23613 6.97387 7.29845 6.03618C6.36077 5.0985 5.83398 3.82673 5.83398 2.50065C5.83398 3.82673 5.3072 5.0985 4.36952 6.03618C3.43184 6.97387 2.16007 7.50065 0.833984 7.50065C2.16007 7.50065 3.43184 8.02744 4.36952 8.96512C5.3072 9.9028 5.83398 11.1746 5.83398 12.5007Z"
+                stroke={color}
+                strokeWidth="1.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}

package/src/theme/SearchBar/index.js

@@ -6,6 +6,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import { useState, useCallback } from 'react';
 
 import { ApifySearch } from '@apify/docs-search-modal';
+import { SparklesIcon } from './SparklesIcon';
 
 // needs to be imported as the last thing, so that it can override the default styles
 // TODO: update simple-import-sort to allow importing css as last.
@@ -106,6 +107,7 @@ function KapaAIButton({ onClick }) {
             {() => (
                 <div onClick={onClick}>
                     <button type="button" className="AskAI-Button" aria-label="Ask AI">
+                        <SparklesIcon size={14} />
                         Ask AI
                     </button>
                 </div>

package/src/theme/SearchBar/styles.css

@@ -26,19 +26,20 @@
 .AskAI-Button {
     height: 4rem;
     padding: 0.8rem 1.6rem !important;
-    background-color: var(--ifm-color-primary);
+    background-color: rgba(255, 255, 255, 0);
     border-radius: 8px;
-    color: var(--color-neutral-text-on-primary);
     font-family: inherit;
     font-size: 1.6rem;
-    font-weight: 500;
+    font-weight: 400;
     line-height: 2.4rem;
-    border: none;
+    border: 1px solid var(--color-neutral-border);
     box-shadow: none;
     outline: none;
     box-sizing: border-box;
     cursor: pointer;
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
     position: relative;
     text-align: center;
     transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
@@ -53,6 +54,12 @@
     display: none;
 }
 
+@media (min-width: 769px) {
+    .DocSearch-Button {
+        width: 30rem;
+    }
+}
+
 @media (max-width: 768px) {
     .SearchButton-Container {
         width: 100%;

package/src/theme/custom.css

@@ -551,34 +551,16 @@ aside > div > a > b {
     top: 10px;
 }
 
-.navbar .icon {
-    font-size: 0;
-    padding: 4px;
-    line-height: 0;
-}
-
-.navbar .icon::before {
-    content: '';
-    display: block;
-    width: 24px;
-    height: 24px;
-    background-size: cover;
-}
-
-.navbar .icon[href*='github']::before {
-    background-image: url('/img/github-brand.svg');
-}
-
-html[data-theme='dark'] .navbar .navbar__link[href*='github']:before {
-    background-image: url('/img/github-brand-dark.svg');
-}
-
-.navbar .icon[href*='discord']::before {
-    background-image: url('/img/discord-brand.svg');
-}
-
-html[data-theme='dark'] .navbar .navbar__link[href*='discord']:before {
-    background-image: url('/img/discord-brand-dark.svg');
+.navbar .icon[href*='discord'] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+    background-color: var(--color-Neutral_BackgroundMuted);
+    border: 1px solid var(--color-neutral-border);
+    border-radius: 4px;
+    color: var(--ifm-navbar-link-color);
 }
 
 .navbar .icon svg[class*='iconExternalLink'],
@@ -679,7 +661,6 @@ article .card h2 {
     display: inline-block !important;
     width: 100%;
     overflow: hidden;
-    white-space: nowrap;
 }
 
 .tsd-flag {
@@ -720,10 +701,6 @@ aside button[class*='collapseSidebarButton'] svg {
     transform: scale(0.7) rotate(180deg);
 }
 
-.table-of-contents__link {
-    height: 20px;
-}
-
 .navbar .dropdown--hoverable::after {
     top: 100%;
     width: 100%;

package/static/img/discord-brand-dark.svg

@@ -1,3 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#F5F6F7" d="M500 0C224 0 0 224 0 500s224 500 500 500 500-224 500-500S776 0 500 0M386 203h2l7 9c-128 36-186 92-186 92s15-8 41-20c76-34 136-43 161-45 4-1 8-1 12-1 43-6 92-7 143-2 67 8 139 28 213 68 0 0-56-53-176-90l9-11s97-2 199 74c0 0 102 185 102 412 0 0-60 103-216 108 0 0-26-30-47-57 93-26 128-84 128-84-29 19-57 32-81 41-36 15-70 25-103 31-68 12-130 9-183-1-40-8-75-19-104-30-16-7-34-15-52-24-2-2-4-3-6-4-1-1-2-1-3-2-13-7-20-12-20-12s34 56 124 83c-21 27-47 59-47 59-157-5-216-108-216-108 0-227 102-412 102-412 95-71 186-74 197-74m-18 264c-41 0-72 35-72 78s32 79 72 79 72-36 72-79c1-43-32-78-72-78m258 0c-40 0-72 35-72 78s32 79 72 79 72-36 72-79-32-78-72-78"/>
-</svg>

package/static/img/discord-brand.svg

@@ -1,3 +0,0 @@
-<svg width="80" height="80" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#333" d="M500 0C224 0 0 224 0 500s224 500 500 500 500-224 500-500S776 0 500 0M386 203h2l7 9c-128 36-186 92-186 92s15-8 41-20c76-34 136-43 161-45 4-1 8-1 12-1 43-6 92-7 143-2 67 8 139 28 213 68 0 0-56-53-176-90l9-11s97-2 199 74c0 0 102 185 102 412 0 0-60 103-216 108 0 0-26-30-47-57 93-26 128-84 128-84-29 19-57 32-81 41-36 15-70 25-103 31-68 12-130 9-183-1-40-8-75-19-104-30-16-7-34-15-52-24-2-2-4-3-6-4-1-1-2-1-3-2-13-7-20-12-20-12s34 56 124 83c-21 27-47 59-47 59-157-5-216-108-216-108 0-227 102-412 102-412 95-71 186-74 197-74m-18 264c-41 0-72 35-72 78s32 79 72 79 72-36 72-79c1-43-32-78-72-78m258 0c-40 0-72 35-72 78s32 79 72 79 72-36 72-79-32-78-72-78"/>
-</svg>