Landing page quick links (#168)

* `color` prop for icon

* Refactor GridTableOfContents to use icon color prop

* `gridTOC` frontmatter data

* GridTableOfContents component

* Use GridTableOfContents in App

* Use $min-font-size in global.scss

* Fix styling for grid TOC

* Rename GridTableOfContents to QuickLinks

* Remove demo data

* Fix quick links grid gap

theme/src/components/App/App.tsx

@@ -4,9 +4,10 @@ import { useEffect, useRef } from 'react';
 import slug from 'slug';
 
 import { AppBar } from '@/components/AppBar';
+import { GlobalTableOfContents } from '@/components/GlobalTableOfContents';
 import { Media } from '@/components/media';
+import { QuickLinks } from '@/components/QuickLinks';
 import {
-  GlobalTableOfContents,
   SubPageTableOfContents,
   TableOfContents,
 } from '@/components/TableOfContents';
@@ -105,7 +106,7 @@ function Content() {
       {/* Main content */}
       <div
         className={clsx(
-          'col-span-3',
+          'col-span-3 mb-6 screen-495:mb-12',
           'screen-1425:col-start-2 screen-1425:col-span-3',
         )}
       >
@@ -146,6 +147,9 @@ function Content() {
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: pageBodyHtml }}
         />
+
+        {/* Render links + descriptions in a grid. */}
+        <QuickLinks />
       </div>
 
       {/* In page table of contents that renders to the right of the main content. */}

theme/src/components/TableOfContents/GlobalTableOfContents.tsx → theme/src/components/GlobalTableOfContents.tsx

@@ -9,8 +9,6 @@ import { TOCHeader } from '@/context/jupyterBook';
 import { useCurrentPathname } from '@/hooks/useCurrentPathname';
 import { isExternalUrl } from '@/utils/url';
 
-import styles from './GlobalTableOfContents.module.scss';
-
 interface Props {
   headers: Record<string, TOCHeader>;
   rootHeaders: string[];
@@ -150,7 +148,7 @@ export function GlobalTableOfContents({ headers, rootHeaders }: Props) {
 
             {/* Render icon if the link is external.  */}
             {isExternal && (
-              <ExternalLink className={clsx(styles.externalLink, 'ml-2')} />
+              <ExternalLink className="ml-2 w-3 h-3" color="#000" />
             )}
           </div>
         </li>

theme/src/components/QuickLinks.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+
+import { ExternalLink } from '@/components/icons';
+import { Link } from '@/components/Link';
+import { useJupyterBookData } from '@/context/jupyterBook';
+import { isExternalUrl } from '@/utils/url';
+
+/**
+ * Renders a grid of table of content items with descriptions. The `quickLinks`
+ * frontmatter configuration is used for rendering quick link items.
+ */
+export function QuickLinks() {
+  const {
+    pageFrontMatter: { quickLinks },
+  } = useJupyterBookData();
+
+  if (!quickLinks) {
+    return null;
+  }
+
+  return (
+    <ul
+      className={clsx(
+        'grid gap-6 screen-495:gap-12 justify-center',
+        'grid-cols-3 screen-875:grid-cols-5',
+      )}
+    >
+      {quickLinks.map((item) => {
+        const isExternal = isExternalUrl(item.url);
+
+        return (
+          <li key={item.url}>
+            {/* Title and icon container */}
+            <div className="flex items-center">
+              <Link
+                className="underline font-semibold text-[17px]"
+                href={item.url}
+                newTab={isExternal}
+              >
+                {item.title}
+              </Link>
+
+              {isExternal && (
+                <ExternalLink className="ml-2 w-3 h-3" color="#000" />
+              )}
+            </div>
+
+            {/* Quick link item content */}
+            <p className="text-sm mt-4">{item.content}</p>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

theme/src/components/TableOfContents/index.ts

@@ -1,4 +1,3 @@
-export * from './GlobalTableOfContents';
 export * from './SubPageTableOfContents';
 export * from './TableOfContents';
 export * from './TableOfContents.constants';

theme/src/components/icons/ExternalLink.tsx

@@ -1,6 +1,6 @@
 import { IconProps } from './icons.type';
 
-export function ExternalLink({ alt, className }: IconProps) {
+export function ExternalLink({ alt, className, color = 'white' }: IconProps) {
   return (
     <svg
       className={className}
@@ -11,9 +11,9 @@ export function ExternalLink({ alt, className }: IconProps) {
       xmlns="http://www.w3.org/2000/svg"
     >
       {alt && <title>{alt}</title>}
-      <path d="M10.6667 2H2V18H18V10" stroke="white" strokeWidth="2.5" />
-      <path d="M12.6667 2H18V7.33333" stroke="white" strokeWidth="2.5" />
-      <path d="M18 2L7.33333 12.6667" stroke="white" strokeWidth="2.5" />
+      <path d="M10.6667 2H2V18H18V10" stroke={color} strokeWidth="2.5" />
+      <path d="M12.6667 2H18V7.33333" stroke={color} strokeWidth="2.5" />
+      <path d="M18 2L7.33333 12.6667" stroke={color} strokeWidth="2.5" />
     </svg>
   );
 }

theme/src/components/icons/icons.type.ts

@@ -1,4 +1,5 @@
 export interface IconProps {
   className?: string;
+  color?: string;
   alt?: string;
 }

theme/src/context/jupyterBook.tsx

@@ -7,8 +7,15 @@ export interface TOCHeader {
   text: string;
 }
 
+export interface QuickLinkItem {
+  title: string;
+  content: string;
+  url: string;
+}
+
 export interface PageFrontMatterData {
   intro?: string;
+  quickLinks?: QuickLinkItem[];
 }
 
 /**

theme/src/scss/global.scss

@@ -11,7 +11,7 @@ html {
 
     https://blog.logrocket.com/the-elements-of-responsive-typography
   */
-  font-size: viewport-clamp(11px, 100%);
+  font-size: viewport-clamp($min-font-size, 100%);
 
   /*
     Awful hack to get clamp resizing working in Safari 14:

theme/src/scss/utils.scss

@@ -1,6 +1,7 @@
 /* stylelint-disable at-rule-no-unknown */
 
 $min-content: strip(theme('screens.screen-300'));
+$min-font-size: 11px;
 
 /**
  * Function for clamping a min and max value scaled based on the ratio between