Add nextra site

authzed · Feb 15, 2024 · 824526c · 824526c
1 parent ea8acdb
commit 824526c
Show file tree

Hide file tree

Showing 81 changed files with 13,958 additions and 0 deletions.
diff --git a/components/counters.module.css b/components/counters.module.css
@@ -0,0 +1,6 @@
+.counter {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 2px 6px;
+  margin: 12px 0 0;
+}
diff --git a/components/counters.tsx b/components/counters.tsx
@@ -0,0 +1,24 @@
+// Example from https://beta.reactjs.org/learn
+
+import { useState } from 'react'
+import styles from './counters.module.css'
+
+function MyButton() {
+  const [count, setCount] = useState(0)
+
+  function handleClick() {
+    setCount(count + 1)
+  }
+
+  return (
+    <div>
+      <button onClick={handleClick} className={styles.counter}>
+        Clicked {count} times
+      </button>
+    </div>
+  )
+}
+
+export default function MyApp() {
+  return <MyButton />
+}
diff --git a/components/cta.tsx b/components/cta.tsx
@@ -0,0 +1,34 @@
+import { Button } from '@/components/ui/button';
+import { faPhone } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export function TocCTA() {
+  const pathname = usePathname();
+  const isCommercial = pathname.startsWith('/authzed/');
+
+  return isCommercial ? (
+    <div className="flex flex-wrap w-full nx-mt-8 nx-border-t nx-bg-white nx-pt-8 nx-shadow-[0_-12px_16px_white] dark:nx-bg-dark dark:nx-shadow-[0_-12px_16px_#111] nx-sticky nx-bottom-0 nx-flex nx-flex-col nx-items-start nx-gap-2 nx-pb-8 dark:nx-border-neutral-800 contrast-more:nx-border-t contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-border-neutral-400">
+      <div className="nx-text-xs">Talk to us</div>
+      <div>
+        <Link href="https://authzed.com/call?utm_source=docs">
+          <Button variant="default" size="sm">
+            Schedule a Call
+            <FontAwesomeIcon className=" ml-2 h-4 w-4" icon={faPhone} />
+          </Button>
+        </Link>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}
+
+export function NavCTA() {
+  const pathname = usePathname();
+  const isCommercial = pathname.startsWith('/authzed/');
+
+  // TODO: No-ops for now
+  return isCommercial ? <></> : <></>;
+}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { LogoIcon } from './logo';
+
+export default function Footer() {
+  return (
+    // Copied from nextra-theme-docs sidebar container
+    <div className="nx-mx-auto nx-flex nx-max-w-[90rem] nx-justify-center nx-py-12 nx-text-gray-600 dark:nx-text-gray-400 md:nx-justify-start nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]">
+      <div className='class="flex w-full flex-col items-center sm:items-start"'>
+        <div className="w-[3rem] h-[3rem]">
+          {/* TODO: Add footer links here */}
+          <Link href="https://authzed.com" title="AuthZed">
+            <LogoIcon />
+          </Link>
+        </div>
+
+        <div className="nx-text-xs">
+          &copy; {new Date().getFullYear()} AuthZed.
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/logo.tsx b/components/logo.tsx
@@ -0,0 +1,90 @@
+export function Logo() {
+  return (
+    <svg
+      height="30"
+      viewBox="0 0 473 129"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M156.323 67.2372C155.771 77.5631 152.673 87.8613 147.397 96.7616C138.56 111.672 123.755 123.318 104.936 126.849C95.5409 128.536 88.7081 128.322 81.0342 127.145C75.4984 125.912 72.0133 121.415 75.7302 116.07C80.2848 109.518 86.7402 105.213 93.1836 100.907C111.978 88.3476 131.942 77.8497 152.09 67.6769C154.343 66.5412 156.481 64.2944 156.323 67.2372Z"
+        fill="#A13974"
+      />
+      <path
+        d="M169.694 43.1434C174.427 39.3991 179 34.589 182.239 29.4357L182.244 29.4319L182.249 29.428C185.814 23.753 183.79 18.6293 177.26 17.0761C169.752 15.2893 163.386 16.0089 155.702 17.0761C153.83 17.3361 153.354 17.7392 152.713 18.1434C151.417 18.962 151.274 21.461 153.14 21.7721C156.557 21.9856 167.747 21.2212 170.43 22.4124C178.076 25.8071 157.153 37.1094 154.403 39.2974C152.754 40.6079 151.963 40.4505 151.036 38.3872C143.759 22.2096 131.909 10.7385 115.35 4.22533C104.971 0.144998 94.2793 -0.789116 83.2332 0.606922C77.2806 1.35893 72.6108 2.99382 67.1419 5.12434C65.3384 5.82691 62.9525 7.0237 61.2933 7.97718C57.4042 10.2078 53.8247 12.7097 50.5669 15.4969C47.7294 17.9245 49.396 22.2704 53.1141 22.6195L121.571 29.0465C124.609 29.3316 126.11 32.88 124.2 35.2587L86.0185 84.0794C84.6298 85.8084 86.403 88.6596 88.462 87.8355C103.995 81.6016 119.096 74.0364 134.047 66.5187C146.515 60.2493 158.778 51.7777 169.694 43.1434Z"
+        fill="#FB5B62"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M98.5791 47.3169C101.016 44.706 98.8693 40.4751 95.323 40.8998L33.3125 48.3264C31.4368 48.551 29.876 49.9028 29.4974 51.7535C27.1126 63.4103 28.064 75.1499 32.5509 86.9003C34.2311 91.3023 34.3364 91.4291 29.8007 91.9868C29.2093 92.0594 28.6167 92.1398 28.0231 92.2202C24.6035 92.6838 21.1517 93.1517 17.7111 92.175C9.39414 89.8058 22.1859 81.9275 23.1518 78.5611C23.865 76.0752 20.4861 75.1441 18.3735 76.6361C11.604 81.4168 5.15918 86.9958 1.16277 94.3733C0.308766 96.0814 0.414398 98.2165 0.735706 99.3713C3.10202 107.874 21.4225 106.33 27.4584 105.246C35.3675 103.826 41.0781 103.311 48.7624 100.963C50.8581 100.322 50.8969 100.109 54.0987 96.8099C70.321 81.752 85.1666 61.2215 98.5791 47.3169Z"
+        fill="#EFA16D"
+      />
+      <path
+        d="M215.477 93.194C222.603 93.194 228.849 89.8311 231.731 84.5466V92.3933H236.455V50.1168H231.731V58.0437C228.849 52.7591 222.603 49.3162 215.477 49.3162C203.867 49.3162 194.579 58.444 194.579 71.3352C194.579 84.0661 203.867 93.194 215.477 93.194ZM199.783 71.3352C199.783 61.4066 206.669 54.2004 216.037 54.2004C224.605 54.2004 231.811 60.2056 231.811 71.3352C231.811 82.3847 224.605 88.3098 216.037 88.3098C206.669 88.3098 199.783 81.1837 199.783 71.3352Z"
+        fill="currentColor"
+      />
+      <path
+        d="M277.91 75.6589V50.1168H272.786V75.4987C272.786 83.8259 269.023 88.3098 261.976 88.3098C255.01 88.3098 251.167 83.8259 251.167 75.4987V50.1168H246.043V75.6589C246.043 86.7084 251.968 93.194 261.976 93.194C272.065 93.194 277.91 86.7084 277.91 75.6589Z"
+        fill="currentColor"
+      />
+      <path
+        d="M289.298 92.3933H294.423V54.921H299.947V50.1168H294.423V36.0247L289.298 38.1865V50.1168H284.094V54.921H289.298V92.3933Z"
+        fill="currentColor"
+      />
+      <path
+        d="M306.5 92.3933H311.624V67.0114C311.624 58.6842 315.388 54.2004 322.514 54.2004C329.48 54.2004 333.243 58.6842 333.243 67.0114V92.3933H338.367V66.7712C338.367 55.7217 332.843 49.3162 323.475 49.3162C317.95 49.3162 313.866 51.5581 311.544 55.4014C311.624 53.2395 311.624 51.0777 311.624 48.6756V30.7401H306.5V92.3933Z"
+        fill="currentColor"
+      />
+      <path
+        d="M343.819 92.3933H377.608L379.21 81.0235H362.315L378.969 51.5581V49.9567H346.621L345.02 61.3265H360.473L343.819 90.7919V92.3933Z"
+        fill="currentColor"
+      />
+      <path
+        d="M403.992 93.4342C412.399 93.4342 419.125 89.9112 423.849 83.6658L415.682 76.8599C412.56 80.7833 408.716 82.705 404.232 82.705C398.627 82.705 394.544 79.6623 393.343 74.618H423.849C425.611 56.8426 414.962 48.9158 403.352 48.9158C391.021 48.9158 381.413 57.9636 381.413 71.3352C381.413 84.3063 390.46 93.4342 403.992 93.4342ZM393.503 65.8905C394.864 61.8069 398.467 59.1647 403.271 59.1647C407.996 59.1647 411.198 61.5667 412.159 65.8905H393.503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M448.96 93.194C453.684 93.194 458.328 91.5926 461.21 88.55L461.29 92.3933H472.5V30.4999H459.849V42.5904C459.849 46.1134 459.929 49.4763 460.089 52.7591C457.127 50.3571 453.123 49.156 448.96 49.156C437.51 49.156 427.821 58.1238 427.821 71.175C427.821 84.2263 437.51 93.194 448.96 93.194ZM440.472 71.175C440.472 64.7695 444.796 60.686 450.641 60.686C456.406 60.686 460.65 64.7695 460.65 71.175C460.65 77.5805 456.406 81.6641 450.641 81.6641C444.796 81.6641 440.472 77.5805 440.472 71.175Z"
+        fill="currentColor"
+      />
+      <style jsx>{`
+        svg {
+          mask-image: linear-gradient(
+            60deg,
+            black 25%,
+            rgba(0, 0, 0, 0.2) 50%,
+            black 75%
+          );
+          mask-size: 400%;
+          mask-position: 0%;
+        }
+        svg:hover {
+          mask-position: 100%;
+          transition: mask-position 1s ease, -webkit-mask-position 1s ease;
+        }
+      `}</style>
+    </svg>
+  );
+}
+
+export function LogoIcon() {
+  return (
+    <svg viewBox="0 0 196 137" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M166.096 71.4542C165.51 82.4278 162.217 93.3718 156.61 102.83C147.219 118.676 131.485 131.052 111.486 134.805C101.502 136.597 94.2404 136.37 86.0852 135.119C80.2022 133.809 76.4985 129.03 80.4486 123.35C85.2888 116.387 92.1491 111.812 98.9966 107.236C118.97 93.8886 140.186 82.7323 161.598 71.9215C163.992 70.7146 166.264 68.3269 166.096 71.4542Z"
+        fill="#A13974"
+      />
+      <path
+        d="M180.306 45.8493C185.336 41.8702 190.195 36.7584 193.637 31.2819L193.643 31.2778L193.649 31.2736C197.437 25.2428 195.286 19.7977 188.346 18.1471C180.367 16.2482 173.602 17.0129 165.436 18.1471C163.447 18.4233 162.94 18.8517 162.26 19.2813C160.882 20.1512 160.73 22.807 162.714 23.1376C166.344 23.3645 178.236 22.5522 181.088 23.8181C189.214 27.4257 166.978 39.4369 164.056 41.762C162.303 43.1547 161.463 42.9875 160.477 40.7948C152.744 23.6025 140.151 11.412 122.553 4.49034C111.524 0.154092 100.161 -0.838608 88.4221 0.644988C82.0962 1.44416 77.1335 3.18159 71.3216 5.44573C69.405 6.19237 66.8695 7.46422 65.1062 8.4775C60.9731 10.848 57.1692 13.5068 53.707 16.4688C50.6915 19.0487 52.4627 23.6672 56.414 24.0382L129.164 30.8682C132.393 31.1713 133.988 34.9422 131.958 37.4701L91.3821 89.3527C89.9063 91.1902 91.7907 94.2202 93.9788 93.3445C110.486 86.7196 126.534 78.6799 142.423 70.6907C155.673 64.0281 168.705 55.0251 180.306 45.8493Z"
+        fill="#FB5B62"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M104.73 50.2846C107.32 47.5099 105.039 43.0137 101.27 43.465L35.3704 51.3574C33.3771 51.5961 31.7184 53.0327 31.3161 54.9994C28.7818 67.3874 29.7928 79.8632 34.5611 92.3506C36.3467 97.0287 36.4586 97.1634 31.6384 97.7561C31.0099 97.8333 30.3801 97.9186 29.7493 98.0042C26.1152 98.4968 22.447 98.9941 18.7905 97.9561C9.95196 95.4383 23.5461 87.0659 24.5725 83.4884C25.3304 80.8466 21.7396 79.8571 19.4945 81.4426C12.3004 86.5231 5.4514 92.452 1.20434 100.292C0.296773 102.107 0.40903 104.377 0.750489 105.604C3.26522 114.639 22.7348 112.999 29.1492 111.847C37.5543 110.338 43.6231 109.79 51.7893 107.295C54.0165 106.614 54.0577 106.388 57.4603 102.882C74.7001 86.8794 90.4768 65.0613 104.73 50.2846Z"
+        fill="#EFA16D"
+      />
+    </svg>
+  );
+}
diff --git a/components/nav.tsx b/components/nav.tsx
@@ -0,0 +1,69 @@
+import { FunctionComponent, ReactNode } from 'react';
+import data from '../content/settings/navigation.yaml';
+export type NavItem = {
+  label: string;
+  url: string;
+  isDivider?: boolean;
+  columnBreak?: boolean;
+};
+
+export type NavGroup = {
+  label: string;
+  url?: string;
+  isGroup?: boolean;
+  columnCount?: number;
+  items: NavItem[];
+};
+
+export type NavEntry = NavGroup;
+
+const navData = {
+  navigation: loadNavData('navigation'),
+  footer: loadNavData('footer'),
+};
+
+function loadNavData(source: string): NavEntry[] {
+  return data[source];
+}
+
+type NavDataSource = 'navigation' | 'footer';
+
+export function generateNav(
+  itemGenerator: (item: NavItem, entryIndex: number) => ReactNode,
+  groupGenerator: (
+    group: NavGroup,
+    children: ReactNode,
+    entryIndex: number
+  ) => ReactNode,
+  dividerGenerator: (
+    divider: NavItem,
+    entryIndex: number,
+    groupIndex: number
+  ) => ReactNode,
+  groupItemGenerator: (
+    item: NavItem,
+    entryIndex: number,
+    groupIndex: number
+  ) => ReactNode,
+  source: NavDataSource = 'navigation'
+): FunctionComponent {
+  return function GenNav() {
+    return (
+      <>
+        {navData[source].map((entry, index) => {
+          if (entry.isGroup) {
+            const children = entry.items?.map((item, groupIndex) => {
+              if (item.isDivider) {
+                return dividerGenerator(item, index, groupIndex);
+              }
+              return groupItemGenerator(item, index, groupIndex);
+            });
+            return groupGenerator(entry, children, index);
+          }
+
+          return itemGenerator(entry as NavItem, index);
+        })}
+      </>
+    );
+  };
+}
diff --git a/components/playground.tsx b/components/playground.tsx
@@ -0,0 +1,6 @@
+export function InlinePlayground(props: { reference: string, children: any[] }) {
+    let playgroundUrl = 'https://play.authzed.com';
+    return <div>
+        <iframe style={{ width: '100%', border: '0px', height: '500px' }} src={`${playgroundUrl}/i/${props.reference}`}></iframe>
+    </div>
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+// TODO: Replace colors for button variants
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-fuchsia-800 text-fuchsia-100 hover:bg-fuchsia-500',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };