napari · kne42 · Sep 28, 2021 · Sep 22, 2021 · Sep 22, 2021 · Sep 22, 2021
diff --git a/theme/src/components/App/App.tsx b/theme/src/components/App/App.tsx
@@ -6,6 +6,7 @@ import { useEffect, useRef } from 'react';
 import slug from 'slug';
 
 import { AppBar } from '@/components/AppBar';
+import { Footer } from '@/components/Footer';
 import { GlobalTableOfContents } from '@/components/GlobalTableOfContents';
 import { Media } from '@/components/media';
 import { QuickLinks } from '@/components/QuickLinks';
@@ -232,11 +233,15 @@ export function App() {
  */}
  {isSearch && <div id="documentation_options" data-url_root="./" />}
 
- <AppBar />
+ <div className="min-h-screen flex flex-col">
+ <AppBar />
 
- <main className="mt-6">
- <Content />
- </main>
+ <main className="mt-6 flex-grow">
+ <Content />
+ </main>
+
+ <Footer />
+ </div>
 
  {appScripts
  .filter(({ src }) => {

diff --git a/theme/src/components/Footer.tsx b/theme/src/components/Footer.tsx
@@ -0,0 +1,103 @@
+import clsx from 'clsx';
+import { ComponentType, ReactNode } from 'react';
+
+import {
+ GitHub,
+ IconColorProps,
+ ImageSC,
+ NapariHub,
+ Twitter,
+ Zulip,
+} from '@/components/icons';
+import { Link } from '@/components/Link';
+
+interface FooterItem {
+ title: ReactNode | string;
+ link: string;
+ alt: string;
+ icon: ComponentType<IconColorProps>;
+ size?: string;
+}
+
+const FOOTER_LINKS: FooterItem[] = [
+ {
+ title: (
+ <>
+ <span className="font-normal">napari</span> hub
+ </>
+ ),
+ link: 'https://napari-hub.org',
+ alt: 'Visit napari hub',
+ icon: NapariHub,
+ },
+ {
+ title: 'GitHub',
+ link: 'https://github.com/napari/napari',
+ alt: 'Visit GitHub repository',
+ icon: GitHub,
+ },
+ {
+ title: 'Twitter',
+ link: 'https://twitter.com/napari_imaging',
+ alt: 'Visit Twitter page',
+ icon: Twitter,
+ },
+ {
+ title: 'image.sc',
+ link: 'https://forum.image.sc/tag/napari',
+ alt: 'Visit image.sc forum',
+ icon: ImageSC,
+ size: 'h-[1.25em] w-[1.25em]',
+ },
+ {
+ title: 'Zulip',
+ link: 'https://napari.zulipchat.com',
+ alt: 'Visit Zulip chatroom',
+ icon: Zulip,
+ },
+];
+
+const STANDARD_ICON_SIZE = 'h-[1em] w-[1em]';
+
+function FooterLinks() {
+ return (
+ <>
+ {FOOTER_LINKS.map((item) => (
+ <Link
+ className={clsx(
+ 'text-white',
+ 'whitespace-nowrap mr-4 last:mr-0',
+ 'flex flex-row items-center',
+ )}
+ href={item.link}
+ newTab
+ >
+ <item.icon
+ className={clsx(
+ item.size ? item.size : STANDARD_ICON_SIZE,
+ 'inline-block mr-1',
+ )}
+ color="white"
+ alt={item.alt}
+ />
+ <span className="font-semibold text-[0.875em]">{item.title}</span>
+ </Link>
+ ))}
+ </>
+ );
+}
+
+export function Footer() {
+ return (
+ <div
+ className={clsx(
+ 'flex flex-row items-center justify-start',
+ 'h-[4.6875em] w-full',
+ 'px-6 screen-495:px-12',
+ 'bg-black',
+ )}
+ >
+ <FooterLinks />
+ </div>
+ );
+}
diff --git a/theme/src/components/icons/GitHub.tsx b/theme/src/components/icons/GitHub.tsx
@@ -1,6 +1,6 @@
-import { IconProps } from './icons.type';
+import { IconColorProps } from './icons.type';
 
-export function GitHub({ className, alt }: IconProps) {
+export function GitHub({ className, alt, color = 'black' }: IconColorProps) {
  return (
  <svg
  className={className}
@@ -13,7 +13,7 @@ export function GitHub({ className, alt }: IconProps) {
  {alt && <title>{alt}</title>}
  <path
  d="M7 0.173252C3.1325 0.173252 0 3.3075 0 7.17325C0 10.2667 2.0055 12.8899 4.78625 13.8145C5.13625 13.8804 5.26458 13.664 5.26458 13.4779C5.26458 13.3117 5.25875 12.8713 5.25583 12.2879C3.30867 12.7103 2.898 11.3488 2.898 11.3488C2.5795 10.5408 2.11925 10.325 2.11925 10.325C1.48517 9.891 2.16825 9.89975 2.16825 9.89975C2.87117 9.94875 3.24042 10.6208 3.24042 10.6208C3.86458 11.6912 4.879 11.382 5.27917 11.2029C5.34217 10.7503 5.52242 10.4417 5.7225 10.2667C4.16792 10.0917 2.534 9.48967 2.534 6.8075C2.534 6.04334 2.80525 5.41917 3.25442 4.92917C3.17567 4.75242 2.93942 4.04075 3.31567 3.0765C3.31567 3.0765 3.90192 2.88867 5.24067 3.794C5.80067 3.63825 6.39567 3.56125 6.99067 3.55775C7.58567 3.56125 8.18067 3.63825 8.74067 3.794C10.0707 2.88867 10.6569 3.0765 10.6569 3.0765C11.0332 4.04075 10.7969 4.75242 10.7269 4.92917C11.1732 5.41917 11.4444 6.04334 11.4444 6.8075C11.4444 9.49667 9.80817 10.0888 8.25067 10.2608C8.49567 10.4708 8.72317 10.9002 8.72317 11.5558C8.72317 12.4927 8.71442 13.2452 8.71442 13.4727C8.71442 13.6564 8.83692 13.8752 9.19567 13.8052C11.9962 12.887 14 10.262 14 7.17325C14 3.3075 10.8657 0.173252 7 0.173252Z"
- fill="black"
+ fill={color}
  />
  </svg>
  );

diff --git a/theme/src/components/icons/ImageSC.tsx b/theme/src/components/icons/ImageSC.tsx
@@ -0,0 +1,46 @@
+import { IconColorProps } from './icons.type';
+
+export function ImageSC({ className, alt, color = 'black' }: IconColorProps) {
+ return (
+ <svg
+ className={className}
+ width="20"
+ height="20"
+ viewBox="0 0 20 20"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ {alt && <title>{alt}</title>}
+ <path
+ d="M12.9987 4.65361V2.01143C12.9987 2.00512 12.9936 2 12.9873 2H6.95296C6.94665 2 6.94153 2.00512 6.94153 2.01143V8.04571C6.94153 8.05203 6.94665 8.05714 6.95296 8.05714H10.9701"
+ stroke={color}
+ strokeWidth="2.34286"
+ />
+ <path
+ d="M6.94153 15.3464V17.9886C6.94153 17.9949 6.94665 18 6.95296 18H12.9873C12.9936 18 12.9987 17.9949 12.9987 17.9886V11.9543C12.9987 11.948 12.9936 11.9429 12.9873 11.9429H8.9701"
+ stroke={color}
+ strokeWidth="2.34286"
+ />
+ <path
+ d="M16.1145 9.9496L18.4027 8.62852C18.4082 8.62536 18.4101 8.61837 18.4069 8.6129L15.3898 3.38706C15.3866 3.38159 15.3796 3.37972 15.3742 3.38288L10.1483 6.40002C10.1429 6.40317 10.141 6.41016 10.1441 6.41563L12.1527 9.89458"
+ stroke={color}
+ strokeWidth="2.34286"
+ />
+ <path
+ d="M3.82577 10.0503L1.53758 11.3714C1.53211 11.3745 1.53024 11.3815 1.5334 11.387L4.55054 16.6128C4.5537 16.6183 4.56069 16.6202 4.56615 16.617L9.792 13.5999C9.79746 13.5967 9.79934 13.5897 9.79618 13.5842L7.78761 10.1053"
+ stroke={color}
+ strokeWidth="2.34286"
+ />
+ <path
+ d="M13.086 15.2962L15.3742 16.6173C15.3796 16.6205 15.3866 16.6186 15.3898 16.6131L18.4069 11.3873C18.4101 11.3818 18.4082 11.3748 18.4027 11.3717L13.1769 8.35456C13.1714 8.35141 13.1644 8.35328 13.1613 8.35875L11.1527 11.8377"
+ stroke={color}
+ strokeWidth="2.34286"
+ />
+ <path
+ d="M6.85434 4.70397L4.56614 3.38288C4.56068 3.37973 4.55369 3.3816 4.55053 3.38707L1.53339 8.61291C1.53023 8.61838 1.53211 8.62537 1.53757 8.62852L6.76342 11.6457C6.76888 11.6488 6.77587 11.647 6.77903 11.6415L8.7876 8.16254"
+ stroke={color}
+ strokeWidth="2.34286"
+ />
+ </svg>
+ );
+}
diff --git a/theme/src/components/icons/NapariHub.tsx b/theme/src/components/icons/NapariHub.tsx
@@ -0,0 +1,100 @@
+import { IconColorProps } from './icons.type';
+
+export function NapariHub({
+ className,
+ alt,
+ color = '#009BF2',
+}: IconColorProps) {
+ return (
+ <svg
+ className={className}
+ width="487"
+ height="512"
+ viewBox="0 0 487 512"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ {alt && <title>{alt}</title>}
+ <circle
+ cx="243.036"
+ cy="256"
+ r="85.3333"
+ fill={color}
+ stroke={color}
+ strokeWidth="56.8889"
+ />
+ <circle cx="243.036" cy="42.6667" r="42.6667" fill={color} />
+ <circle cx="243.036" cy="469.333" r="42.6667" fill={color} />
+ <path
+ d="M243.036 28.4444L243.036 142.222"
+ stroke={color}
+ strokeWidth="56.8889"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <path
+ d="M243.036 369.778L243.036 483.556"
+ stroke={color}
+ strokeWidth="56.8889"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <circle
+ cx="58.2838"
+ cy="149.333"
+ r="42.6667"
+ transform="rotate(-60 58.2838 149.333)"
+ fill={color}
+ />
+ <circle
+ cx="427.788"
+ cy="362.667"
+ r="42.6667"
+ transform="rotate(-60 427.788 362.667)"
+ fill={color}
+ />
+ <path
+ d="M45.967 142.222L144.501 199.111"
+ stroke={color}
+ strokeWidth="56.8889"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <path
+ d="M341.57 312.889L440.105 369.778"
+ stroke={color}
+ strokeWidth="56.8889"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <circle
+ cx="58.2838"
+ cy="362.667"
+ r="42.6667"
+ transform="rotate(-120 58.2838 362.667)"
+ fill={color}
+ />
+ <circle
+ cx="427.788"
+ cy="149.333"
+ r="42.6667"
+ transform="rotate(-120 427.788 149.333)"
+ fill={color}
+ />
+ <path
+ d="M45.967 369.778L144.501 312.889"
+ stroke={color}
+ strokeWidth="56.8889"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ <path
+ d="M341.57 199.111L440.105 142.222"
+ stroke={color}
+ strokeWidth="56.8889"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ );
+}
diff --git a/theme/src/components/icons/Twitter.tsx b/theme/src/components/icons/Twitter.tsx
@@ -1,6 +1,6 @@
-import { IconProps } from './icons.type';
+import { IconColorProps } from './icons.type';
 
-export function Twitter({ className, alt }: IconProps) {
+export function Twitter({ className, alt, color = 'black' }: IconColorProps) {
  return (
  <svg
  className={className}
@@ -13,7 +13,7 @@ export function Twitter({ className, alt }: IconProps) {
  {alt && <title>{alt}</title>}
  <path
  d="M13.4581 3.44478C13.4676 3.57802 13.4676 3.7113 13.4676 3.84454C13.4676 7.9086 10.3744 12.5914 4.72082 12.5914C2.97906 12.5914 1.36105 12.0869 7.62939e-06 11.2113C0.247478 11.2398 0.485398 11.2494 0.742391 11.2494C2.17955 11.2494 3.50254 10.764 4.55901 9.93591C3.20749 9.90735 2.07487 9.0222 1.68464 7.80392C1.87501 7.83246 2.06535 7.8515 2.26524 7.8515C2.54125 7.8515 2.81728 7.81341 3.07425 7.74682C1.66562 7.46127 0.609119 6.22397 0.609119 4.72968V4.69163C1.01837 4.92006 1.49429 5.06282 1.9987 5.08183C1.17065 4.52979 0.628162 3.58755 0.628162 2.52155C0.628162 1.9505 0.780418 1.42702 1.04693 0.970164C2.56026 2.83564 4.83502 4.05389 7.38575 4.18717C7.33817 3.95874 7.30961 3.72082 7.30961 3.48287C7.30961 1.78869 8.68017 0.40863 10.3838 0.40863C11.269 0.40863 12.0685 0.779822 12.63 1.37944C13.3248 1.2462 13.9911 0.989207 14.5812 0.637058C14.3527 1.35091 13.8673 1.95052 13.2297 2.33121C13.8483 2.26462 14.4479 2.09326 14.9999 1.85534C14.5812 2.46445 14.0577 3.00694 13.4581 3.44478Z"
- fill="black"
+ fill={color}
  />
  </svg>
  );

diff --git a/theme/src/components/icons/Zulip.tsx b/theme/src/components/icons/Zulip.tsx
@@ -0,0 +1,27 @@
+import { IconColorProps } from './icons.type';
+
+export function Zulip({ className, alt, color = 'black' }: IconColorProps) {
+ return (
+ <svg
+ className={className}
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ {alt && <title>{alt}</title>}
+ <g clipPath="url(#clip0)">
+ <path
+ d="M15.178 2.39267C15.178 3.19867 14.816 3.91467 14.2647 4.34867L8.90869 9.13133C8.80935 9.21667 8.68002 9.07933 8.75202 8.96467L10.716 5.03133C10.7714 4.92133 10.7 4.786 10.5867 4.786H2.96802C1.78802 4.786 0.822021 3.70933 0.822021 2.39267C0.822021 1.07733 1.78802 3.09431e-07 2.96802 3.09431e-07H13.032C14.212 -0.000666357 15.178 1.076 15.178 2.39267ZM2.96802 16H13.032C14.212 16 15.178 14.9227 15.178 13.6067C15.178 12.2907 14.212 11.2133 13.032 11.2133H5.41335C5.30002 11.2133 5.22869 11.0787 5.28402 10.9687L7.24802 7.03533C7.32002 6.92067 7.19069 6.78333 7.09135 6.86867L1.73602 11.6507C1.18402 12.084 0.822688 12.8007 0.822688 13.6067C0.822688 14.9227 1.78802 16 2.96802 16Z"
+ fill={color}
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0">
+ <rect width="16" height="16" fill={color} />
+ </clipPath>
+ </defs>
+ </svg>
+ );
+}
diff --git a/theme/src/components/icons/index.ts b/theme/src/components/icons/index.ts
@@ -2,7 +2,10 @@ export * from './Close';
 export * from './ExternalLink';
 export * from './GitHub';
 export * from './icons.type';
+export * from './ImageSC';
 export * from './Menu';
+export * from './NapariHub';
 export * from './NapariLogo';
 export * from './Search';
 export * from './Twitter';
+export * from './Zulip';