feat: add CTA to ory network (#1499)

src/components/OryNetworkCta/ory-network-cta.css

@@ -0,0 +1,135 @@
+.ory-network-cta {
+  --ory-cyan-50: #ecfeff;
+  --ory-cyan-100: #cffafe;
+  --ory-cyan-500: #06b6d4;
+  --ory-cyan-900: #164e63;
+  --ory-gray-900: #0f172a;
+
+  position: relative;
+  margin-top: 1em;
+  flex-shrink: 0;
+  max-height: var(--ory-network-cta-height);
+  background-color: var(--ory-cyan-500);
+}
+
+.ory-network-cta:hover {
+  text-decoration: none;
+}
+
+.ory-network-cta__background {
+  position: absolute;
+  inset: 0;
+}
+
+.ory-network-cta__grid {
+  background: url("/img/bg-grid-cell-medium.svg") center;
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.ory-network-cta__gradient {
+  background: linear-gradient(
+    164deg,
+    var(--ory-cyan-500) 64.41%,
+    transparent 100%
+  );
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.ory-network-cta__content {
+  position: relative;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: space-between;
+  height: 100%;
+  z-index: 10;
+}
+
+.ory-network-cta__title-and-paragraph {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ory-network-cta__title {
+  font-style: normal;
+  color: var(--ory-cyan-50);
+  font-size: 24px;
+  line-height: 100%;
+  font-weight: 600;
+}
+
+.ory-network-cta__paragraph {
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--ory-cyan-100);
+}
+
+.ory-network-cta__button {
+  /* Will be overridden in sufficiently wide container queries */
+  display: none;
+
+  padding: 9px 15px;
+  background: var(--ory-cyan-50);
+  color: var(--ory-cyan-900);
+  font-weight: 500;
+  word-wrap: normal;
+}
+
+.ory-network-cta__button:hover {
+  text-decoration: none;
+}
+
+.ory-network-cta__inline-get-started {
+  display: block;
+}
+
+@media (min-width: 1070px) {
+  .ory-network-cta__button {
+    display: block;
+    text-align: center;
+  }
+
+  .ory-network-cta__inline-get-started {
+    display: none;
+  }
+}
+
+@media (min-width: 1230px) {
+  .ory-network-cta__content {
+    padding: 24px;
+    gap: 48px;
+  }
+
+  .ory-network-cta__title {
+    font-size: 26px;
+    line-height: 100%;
+    font-weight: 600;
+  }
+}
+
+@media (min-width: 1370px) {
+  .ory-network-cta__paragraph {
+    font-size: 18px;
+    line-height: 150%;
+  }
+}
+
+@media (min-width: 1450px) {
+  .ory-network-cta__content {
+    gap: 32px;
+  }
+
+  .ory-network-cta__title {
+    font-size: 36px;
+  }
+
+  .ory-network-cta__button {
+    padding: 12px 20px;
+  }
+}

src/components/OryNetworkCta/ory-network-cta.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import "./ory-network-cta.css"
+
+const ctaVariants = [
+  {
+    title: "Ory Network",
+    content: (
+      <>
+        The most flexible and scalable way to manage identi&shy;ties,
+        authen&shy;tication, autho&shy;rization and access control.
+      </>
+    ),
+    cta: "Explore Ory Network",
+    href: "https://www.ory.sh/network/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0",
+  },
+]
+
+export const OryNetworkCta = () => {
+  const { cta, content, title, href } = ctaVariants[0]
+
+  return (
+    <a href={href} target="_blank" className="ory-network-cta">
+      <div className="ory-network-cta__background">
+        <div className="ory-network-cta__grid"></div>
+        <div className="ory-network-cta__gradient"></div>
+      </div>
+      <div className="ory-network-cta__content">
+        <div className="ory-network-cta__title-and-paragraph">
+          <em className="ory-network-cta__title">{title}</em>
+          <p className="ory-network-cta__paragraph">
+            {content}
+            <span className="ory-network-cta__inline-get-started">
+              {cta} <span aria-hidden>-‍&gt;</span>
+            </span>
+          </p>
+        </div>
+        <div className="ory-network-cta__button">{cta}</div>
+      </div>
+    </a>
+  )
+}

src/theme/TOC/index.css

@@ -0,0 +1,48 @@
+:root {
+  --ory-network-cta-height: 400px;
+}
+
+.ory-toc-wrapper {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+  display: flex;
+  flex-direction: column;
+}
+
+/*
+Selector for TOC wrapper only if the announcement banner
+is active.
+First part pins down the announcement banner, as its class
+seems too fragile. Then select its siblings and therein the
+TOC wrapper.
+ */
+#__docusaurus > div > [role="banner"] ~ * .ory-toc-wrapper {
+  max-height: calc(
+    100vh -
+      (
+        var(--ifm-navbar-height) + 2rem +
+          var(--docusaurus-announcement-bar-height)
+      )
+  );
+}
+
+.ory-toc-wrapper > :first-child {
+  max-height: calc(100% - 5rem);
+  position: unset;
+  top: unset;
+  flex-shrink: 1;
+}
+
+.kapa-widget-placeholder {
+  /* Kapa widget height */
+  min-height: 80px;
+  /*
+    Our margin from bottom is 16px, kapa's margin is 20 px.
+    Compensate for the missing 4px
+  */
+  margin-bottom: 4px;
+  /* Add usual margin around kapa */
+  margin-top: 20px;
+}

src/theme/TOC/index.js

@@ -0,0 +1,14 @@
+import React from "react"
+import TOC from "@theme-original/TOC"
+import "./index.css"
+import { OryNetworkCta } from "../../components/OryNetworkCta/ory-network-cta"
+
+export default function TOCWrapper(props) {
+  return (
+    <div className="ory-toc-wrapper">
+      <TOC {...props} />
+      <OryNetworkCta />
+      <div className="kapa-widget-placeholder" />
+    </div>
+  )
+}