From 0fdf21c9be4de6127219b16b7bd4496b37116414 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Tue, 22 Jun 2021 12:12:39 -0400
Subject: [PATCH 01/18] Fix: use unique key for charSet meta

This tag was accidentally co-opting the key for viewport, leading to the
viewport metadata being lost.
---
 components/meta.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/meta.js b/components/meta.js
index 34e1d0fe..2904caf4 100644
--- a/components/meta.js
+++ b/components/meta.js
@@ -12,7 +12,7 @@ const Meta = () => {
         content="width=device-width, initial-scale=1"
         key="viewport"
       />
-      <meta charSet="utf-8" key="viewport" />
+      <meta charSet="utf-8" key="charset" />
       <link
         rel="icon"
         type="image/svg+xml"

From 4d90c06b447be57ab16850fdc61fe33f1f5cd000 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Tue, 22 Jun 2021 12:13:57 -0400
Subject: [PATCH 02/18] Fix: siteName not siteTitle

The correct key in the squareone.config.schema.json is "siteName" not
"siteTitle."
---
 components/meta.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/meta.js b/components/meta.js
index 2904caf4..8e77c970 100644
--- a/components/meta.js
+++ b/components/meta.js
@@ -3,7 +3,7 @@ import getConfig from 'next/config';
 
 const Meta = () => {
   const { publicRuntimeConfig } = getConfig();
-  const { siteTitle, siteDescription } = publicRuntimeConfig;
+  const { siteName, siteDescription } = publicRuntimeConfig;
 
   return (
     <Head>
@@ -24,10 +24,10 @@ const Meta = () => {
         href="/rubin-favicon-transparent-32px.png"
         key="altfavicon"
       />
-      <title key="title">{siteTitle}</title>
+      <title key="title">{siteName}</title>
       <meta name="description" key="description" content={siteDescription} />
 
-      <meta property="og:title" key="ogtitle" content={siteTitle} />
+      <meta property="og:title" key="ogtitle" content={siteName} />
       <meta
         property="og:description"
         key="ogdescription"

From 6bfe2e0a5beb7780baf471da64e33f8204279f8a Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Tue, 22 Jun 2021 13:35:33 -0400
Subject: [PATCH 03/18] Add documentation index page

---
 components/headerNav.js |  2 +-
 pages/docs.js           | 65 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 pages/docs.js

diff --git a/components/headerNav.js b/components/headerNav.js
index 1f23c319..529022d8 100644
--- a/components/headerNav.js
+++ b/components/headerNav.js
@@ -52,7 +52,7 @@ export default function HeaderNav({ loginData }) {
       </NavItem>
 
       <NavItem>
-        <Link href="/">Documentation</Link>
+        <Link href="/docs">Documentation</Link>
       </NavItem>
 
       <NavItem>
diff --git a/pages/docs.js b/pages/docs.js
new file mode 100644
index 00000000..e192eebb
--- /dev/null
+++ b/pages/docs.js
@@ -0,0 +1,65 @@
+import Head from 'next/head';
+import getConfig from 'next/config';
+import PropTypes from 'prop-types';
+
+const pageDescription =
+  'Find documentation for Rubin Observatory data, science platform services, and software.';
+
+export default function DocsPage({ publicRuntimeConfig }) {
+  return (
+    <>
+      <Head>
+        <title key="title">
+          Documentation | {publicRuntimeConfig.siteName}
+        </title>
+        <meta name="description" key="description" content={pageDescription} />
+        <meta property="og:title" key="ogtitle" content="Documentation" />
+        <meta
+          property="og:description"
+          key="ogdescription"
+          content={pageDescription}
+        />
+      </Head>
+
+      <h1>Rubin Science Platform documentation</h1>
+
+      <h2>Data documentation</h2>
+
+      <h3>Data Preview 0.1 (DP0.1)</h3>
+      <p>Description</p>
+
+      <h2>Science platform documentation</h2>
+
+      <h3>Portal</h3>
+      <p>Description</p>
+
+      <h3>Notebook</h3>
+      <p>Description</p>
+
+      <h3>APIs</h3>
+      <p>Description</p>
+
+      <h2>Software documentation</h2>
+
+      <h3>LSST Science Pipelines</h3>
+      <p>Description</p>
+
+      <h2>Still need help?</h2>
+      <p>TK</p>
+    </>
+  );
+}
+
+DocsPage.propTypes = {
+  publicRuntimeConfig: PropTypes.object,
+};
+
+export async function getServerSideProps() {
+  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+  return {
+    props: {
+      serverRuntimeConfig,
+      publicRuntimeConfig,
+    },
+  };
+}

From cde45198a49fc77c4d900259b1fbbbd7a7eaa4fb Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Tue, 22 Jun 2021 13:39:06 -0400
Subject: [PATCH 04/18] Add a landing page for the API aspect

---
 components/headerNav.js |  2 +-
 pages/api-aspect.js     | 45 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 pages/api-aspect.js

diff --git a/components/headerNav.js b/components/headerNav.js
index 529022d8..bc12e1b6 100644
--- a/components/headerNav.js
+++ b/components/headerNav.js
@@ -48,7 +48,7 @@ export default function HeaderNav({ loginData }) {
       </NavItem>
 
       <NavItem>
-        <Link href="/">APIs</Link>
+        <Link href="/api-aspect">APIs</Link>
       </NavItem>
 
       <NavItem>
diff --git a/pages/api-aspect.js b/pages/api-aspect.js
new file mode 100644
index 00000000..bfc5f04f
--- /dev/null
+++ b/pages/api-aspect.js
@@ -0,0 +1,45 @@
+import Head from 'next/head';
+import getConfig from 'next/config';
+import PropTypes from 'prop-types';
+
+const pageDescription =
+  'Integrate Rubin data into your analysis tools with APIs.';
+
+export default function ApiAspectPage({ publicRuntimeConfig }) {
+  return (
+    <>
+      <Head>
+        <title key="title">APIs | {publicRuntimeConfig.siteName}</title>
+        <meta name="description" key="description" content={pageDescription} />
+        <meta
+          property="og:title"
+          key="ogtitle"
+          content="Rubin Science Platform APIs"
+        />
+        <meta
+          property="og:description"
+          key="ogdescription"
+          content={pageDescription}
+        />
+      </Head>
+
+      <h1>Rubin Science Platform APIs</h1>
+
+      <p>TK</p>
+    </>
+  );
+}
+
+ApiAspectPage.propTypes = {
+  publicRuntimeConfig: PropTypes.object,
+};
+
+export async function getServerSideProps() {
+  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+  return {
+    props: {
+      serverRuntimeConfig,
+      publicRuntimeConfig,
+    },
+  };
+}

From c66bb060d605a0a471b5271d802271ea254b40d7 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Tue, 22 Jun 2021 13:39:42 -0400
Subject: [PATCH 05/18] Add a page describing how to get support

---
 components/headerNav.js |  4 ++++
 pages/support.js        | 41 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 pages/support.js

diff --git a/components/headerNav.js b/components/headerNav.js
index bc12e1b6..bcee6a52 100644
--- a/components/headerNav.js
+++ b/components/headerNav.js
@@ -55,6 +55,10 @@ export default function HeaderNav({ loginData }) {
         <Link href="/docs">Documentation</Link>
       </NavItem>
 
+      <NavItem>
+        <Link href="/support">Support</Link>
+      </NavItem>
+
       <NavItem>
         <a href="https://community.lsst.org">Community</a>
       </NavItem>
diff --git a/pages/support.js b/pages/support.js
new file mode 100644
index 00000000..298727ab
--- /dev/null
+++ b/pages/support.js
@@ -0,0 +1,41 @@
+import Head from 'next/head';
+import getConfig from 'next/config';
+import PropTypes from 'prop-types';
+
+const pageDescription =
+  'Get help with the Rubin Science Platform, data, and software.';
+
+export default function SupportPage({ publicRuntimeConfig }) {
+  return (
+    <>
+      <Head>
+        <title key="title">Get help | {publicRuntimeConfig.siteName}</title>
+        <meta name="description" key="description" content={pageDescription} />
+        <meta property="og:title" key="ogtitle" content="Get help" />
+        <meta
+          property="og:description"
+          key="ogdescription"
+          content={pageDescription}
+        />
+      </Head>
+
+      <h1>Get help with the Rubin Science Platform</h1>
+
+      <p>TK</p>
+    </>
+  );
+}
+
+SupportPage.propTypes = {
+  publicRuntimeConfig: PropTypes.object,
+};
+
+export async function getServerSideProps() {
+  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+  return {
+    props: {
+      serverRuntimeConfig,
+      publicRuntimeConfig,
+    },
+  };
+}

From 3726b2db0b56a82407128b4537e26280d4c09c20 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 10:42:35 -0400
Subject: [PATCH 06/18] Fix: make notebook aspect an external link

<Link> is only for in-app links.
---
 components/headerNav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/headerNav.js b/components/headerNav.js
index bcee6a52..39cbcbd4 100644
--- a/components/headerNav.js
+++ b/components/headerNav.js
@@ -44,7 +44,7 @@ export default function HeaderNav({ loginData }) {
       </NavItem>
 
       <NavItem>
-        <Link href="/nb">Notebooks</Link>
+        <a href="/nb">Notebooks</a>
       </NavItem>
 
       <NavItem>

From 165dce181ac6b38682961d8f6b04e73778efed5d Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 10:43:25 -0400
Subject: [PATCH 07/18] Create a card layout for documentation links

This mirrors the patterns we use in the documentation portal and in the
hero links section of index.js to encapsulate resources in their own
clickable cards.

We should definitely revisit how the styling is done here for long-term
consistency and maintainability.
---
 components/typography.js |   5 ++
 pages/docs.js            | 113 +++++++++++++++++++++++++++++++++------
 styles/globals.css       |   2 +
 3 files changed, 105 insertions(+), 15 deletions(-)
 create mode 100644 components/typography.js

diff --git a/components/typography.js b/components/typography.js
new file mode 100644
index 00000000..cd85d1e5
--- /dev/null
+++ b/components/typography.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Lede = styled.p`
+  font-size: 1.3rem;
+`;
diff --git a/pages/docs.js b/pages/docs.js
index e192eebb..f81a3c59 100644
--- a/pages/docs.js
+++ b/pages/docs.js
@@ -1,6 +1,49 @@
 import Head from 'next/head';
 import getConfig from 'next/config';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Link from 'next/link';
+
+import { Lede } from '../components/typography';
+
+const Section = styled.section`
+  margin-top: 2rem;
+`;
+
+export const Card = styled.article`
+  width: 100%;
+  border-radius: 0.5rem;
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --tw-ring-offset-shadow: 0 0 transparent;
+  --tw-ring-shadow: 0 0 transparent;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  padding: 1rem;
+  margin-left: -1rem;
+
+  border: solid 1px transparent;
+
+  color: var(--rsd-component-text-color);
+  background-color: var(--sqo-doc-card-background-color);
+
+  :hover {
+    border: solid 1px var(--rsd-color-primary-600);
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+  p:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export const CardGroup = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+  grid-gap: 1rem;
+  gap: 1rem;
+`;
 
 const pageDescription =
   'Find documentation for Rubin Observatory data, science platform services, and software.';
@@ -23,29 +66,69 @@ export default function DocsPage({ publicRuntimeConfig }) {
 
       <h1>Rubin Science Platform documentation</h1>
 
-      <h2>Data documentation</h2>
+      <Lede>{pageDescription}</Lede>
+
+      <Section>
+        <h2>Data documentation</h2>
 
-      <h3>Data Preview 0.1 (DP0.1)</h3>
-      <p>Description</p>
+        <CardGroup>
+          <a href="https://dp0-1.lsst.io/">
+            <Card>
+              <h3>Data Preview 0.1 (DP0.1)</h3>
+              <p>Description</p>
+            </Card>
+          </a>
+        </CardGroup>
+      </Section>
 
-      <h2>Science platform documentation</h2>
+      <Section>
+        <h2>Science platform documentation</h2>
 
-      <h3>Portal</h3>
-      <p>Description</p>
+        <CardGroup>
+          <a href="/portal/app/onlinehelp/">
+            <Card>
+              <h3>Portal</h3>
+              <p>Description</p>
+            </Card>
+          </a>
 
-      <h3>Notebook</h3>
-      <p>Description</p>
+          <a href="https://nb.lsst.io">
+            <Card>
+              <h3>Notebooks</h3>
+              <p>Description</p>
+            </Card>
+          </a>
 
-      <h3>APIs</h3>
-      <p>Description</p>
+          <Link href="/api-aspect">
+            <Card>
+              <h3>APIs</h3>
+              <p>Description</p>
+            </Card>
+          </Link>
+        </CardGroup>
+      </Section>
 
-      <h2>Software documentation</h2>
+      <Section>
+        <h2>Software documentation</h2>
 
-      <h3>LSST Science Pipelines</h3>
-      <p>Description</p>
+        <CardGroup>
+          <a href="https://pipelines.lsst.io">
+            <Card>
+              <h3>LSST Science Pipelines</h3>
+              <p>Description</p>
+            </Card>
+          </a>
+        </CardGroup>
+      </Section>
 
-      <h2>Still need help?</h2>
-      <p>TK</p>
+      <Section>
+        <h2>Still need help?</h2>
+        <p>
+          <Link href="/support">
+            Learn how to get support or report issues.
+          </Link>
+        </p>
+      </Section>
     </>
   );
 }
diff --git a/styles/globals.css b/styles/globals.css
index 3342a4fa..7e3d290e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -30,6 +30,7 @@ html {
 
   --rsd-component-image-invert: 0;
   --size-screen-padding-min: 1rem;
+  --sqo-doc-card-background-color: var(--rsd-color-gray-000);
 }
 
 html,
@@ -69,4 +70,5 @@ img.u-invertable-image {
  */
 [data-theme='dark'] body {
   --rsd-component-image-invert: 100%;
+  --sqo-doc-card-background-color: var(--rsd-color-primary-800);
 }

From 96de33896deaba01ad77a58634c650587f56022c Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 11:50:42 -0400
Subject: [PATCH 08/18] Create an admonition component

This will be used to alert users to the fact that the Pipelines docs
aren't consistent wrt generation 3 middleware. This admonition pattern
could eventually be extended for use elsewhere too.
---
 pages/docs.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/pages/docs.js b/pages/docs.js
index f81a3c59..d9db58aa 100644
--- a/pages/docs.js
+++ b/pages/docs.js
@@ -45,6 +45,53 @@ export const CardGroup = styled.div`
   gap: 1rem;
 `;
 
+const NoteContainer = styled.div`
+  margin: 1rem 0 0;
+  padding: 0.5rem;
+  border-radius: 1rem;
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --tw-ring-offset-shadow: 0 0 transparent;
+  --tw-ring-shadow: 0 0 transparent;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  border: solid 0.5px var(--rsd-color-red-500);
+  background-color: var(--sqr-note-background-color);
+
+  .title-bubble {
+    background-color: var(--rsd-color-red-500);
+    margin: -0.5rem 0.5rem 0.5rem -0.5rem;
+    padding: 0.5rem 0.5rem;
+    float: left;
+    width: auto;
+    border-radius: 0.5rem 0 0.5rem 0;
+  }
+  .title-bubble span {
+    text-transform: uppercase;
+    font-weight: 700;
+    color: white;
+    font-size: 0.9rem;
+  }
+
+  p {
+    margin-top: 0;
+  }
+`;
+
+function Note({ children }) {
+  return (
+    <NoteContainer>
+      <div className="title-bubble">
+        <span>Note</span>
+      </div>
+      {children}
+    </NoteContainer>
+  );
+}
+
+Note.propTypes = {
+  children: PropTypes.node,
+};
+
 const pageDescription =
   'Find documentation for Rubin Observatory data, science platform services, and software.';
 
@@ -116,6 +163,21 @@ export default function DocsPage({ publicRuntimeConfig }) {
             <Card>
               <h3>LSST Science Pipelines</h3>
               <p>Description</p>
+              <Note>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                  facilisis pharetra neque, at semper nulla mattis auctor. Proin
+                  semper mollis enim eget interdum. Mauris eleifend eget diam
+                  vitae bibendum. Praesent ut aliquet odio, sodales imperdiet
+                  nisi. Nam interdum imperdiet tortor sed fringilla. Maecenas
+                  efficitur mi sodales nulla commodo rutrum. Ut ornare diam
+                  quam, sed commodo turpis aliquam et. In nec enim consequat,
+                  suscipit tortor sit amet, luctus ante. Integer dictum augue
+                  diam, non pulvinar massa euismod in. Morbi viverra condimentum
+                  auctor. Nullam et metus mauris. Cras risus ex, porta sit amet
+                  nibh et, dapibus auctor leo.
+                </p>
+              </Note>
             </Card>
           </a>
         </CardGroup>

From 155ab73790ed7a9822e18f73364beb6974df56ff Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 12:24:50 -0400
Subject: [PATCH 09/18] Write copy for the documentation page

---
 pages/docs.js | 59 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/pages/docs.js b/pages/docs.js
index d9db58aa..0238a8f0 100644
--- a/pages/docs.js
+++ b/pages/docs.js
@@ -122,7 +122,11 @@ export default function DocsPage({ publicRuntimeConfig }) {
           <a href="https://dp0-1.lsst.io/">
             <Card>
               <h3>Data Preview 0.1 (DP0.1)</h3>
-              <p>Description</p>
+              <p>
+                DP0.1 is an early opportunity to explore the Rubin Science
+                Platform with simulated LSST data. Learn about the DESC DC2 data
+                and follow data analysis tutorials.
+              </p>
             </Card>
           </a>
         </CardGroup>
@@ -135,23 +139,22 @@ export default function DocsPage({ publicRuntimeConfig }) {
           <a href="/portal/app/onlinehelp/">
             <Card>
               <h3>Portal</h3>
-              <p>Description</p>
+              <p>
+                The Portal enables you to explore LSST image and table data in
+                your browser.
+              </p>
             </Card>
           </a>
 
           <a href="https://nb.lsst.io">
             <Card>
               <h3>Notebooks</h3>
-              <p>Description</p>
+              <p>
+                The Notebook aspect is a powerful data analysis environment with
+                Jupyter Notebooks and terminals in the browser.
+              </p>
             </Card>
           </a>
-
-          <Link href="/api-aspect">
-            <Card>
-              <h3>APIs</h3>
-              <p>Description</p>
-            </Card>
-          </Link>
         </CardGroup>
       </Section>
 
@@ -162,20 +165,22 @@ export default function DocsPage({ publicRuntimeConfig }) {
           <a href="https://pipelines.lsst.io">
             <Card>
               <h3>LSST Science Pipelines</h3>
-              <p>Description</p>
+              <p>
+                The Science Pipelines include the Butler for accessing LSST data
+                and a pipeline framework for processing data. The LSST Science
+                Pipelines Python package is preinstalled in the Notebook aspect.
+              </p>
               <Note>
                 <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
-                  facilisis pharetra neque, at semper nulla mattis auctor. Proin
-                  semper mollis enim eget interdum. Mauris eleifend eget diam
-                  vitae bibendum. Praesent ut aliquet odio, sodales imperdiet
-                  nisi. Nam interdum imperdiet tortor sed fringilla. Maecenas
-                  efficitur mi sodales nulla commodo rutrum. Ut ornare diam
-                  quam, sed commodo turpis aliquam et. In nec enim consequat,
-                  suscipit tortor sit amet, luctus ante. Integer dictum augue
-                  diam, non pulvinar massa euismod in. Morbi viverra condimentum
-                  auctor. Nullam et metus mauris. Cras risus ex, porta sit amet
-                  nibh et, dapibus auctor leo.
+                  The Science Pipelines now feature Generation 3 Butler and
+                  PipelineTask middleware. The “Getting Started” tutorial in the
+                  Science Pipelines documentation doesn't feature this new
+                  Generation 3 middleware yet, so we recommend following the
+                  tutorials in the{' '}
+                  <a href="https://dp0-1.lsst.io">
+                    Data Preview 0.1 documentation
+                  </a>{' '}
+                  instead to learn about the Butler and PipelineTask frameworks.{' '}
                 </p>
               </Note>
             </Card>
@@ -184,12 +189,20 @@ export default function DocsPage({ publicRuntimeConfig }) {
       </Section>
 
       <Section>
-        <h2>Still need help?</h2>
+        <h2>Have more questions?</h2>
         <p>
           <Link href="/support">
             Learn how to get support or report issues.
           </Link>
         </p>
+
+        <p>
+          Want to dive deeper into the Rubin Observatory and Legacy Survey of
+          Space and Time?{' '}
+          <a href="https://www.lsst.io">
+            Search in our technical documentation portal.
+          </a>
+        </p>
       </Section>
     </>
   );

From 101c45baf38b688be05d2cd86338b31a5ab3c08b Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 12:32:48 -0400
Subject: [PATCH 10/18] Update footer text for funding partnerships

---
 components/footer.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/footer.js b/components/footer.js
index c6a11919..57c1dbea 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -55,9 +55,8 @@ export default function Footer() {
             <a href="http://www.aura-astronomy.org/">AURA</a>) under a
             cooperative agreement with NSF, and DOE funding is managed by SLAC
             under contract by DOE. The operations phase of Rubin Observatory is
-            operated jointly by NSF’s National Optical-Infrared Astronomy
-            Research Laboratory (
-            <a href="https://noirlab.edu/public/">NOIRLab</a>) and SLAC National
+            operated jointly by NSF’s{' '}
+            <a href="https://noirlab.edu/public/">NOIRLab</a> and SLAC National
             Accelerator Laboratory (
             <a href="https://www6.slac.stanford.edu/">SLAC</a>).
           </p>

From 958aee6b3af6583c00c0ea07e6d9c59fabcc9d94 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 14:48:51 -0400
Subject: [PATCH 11/18] Add /acceptable-use-policy page

---
 pages/acceptable-use-policy.js | 57 ++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 pages/acceptable-use-policy.js

diff --git a/pages/acceptable-use-policy.js b/pages/acceptable-use-policy.js
new file mode 100644
index 00000000..02e62d8f
--- /dev/null
+++ b/pages/acceptable-use-policy.js
@@ -0,0 +1,57 @@
+import Head from 'next/head';
+import getConfig from 'next/config';
+import PropTypes from 'prop-types';
+
+const pageDescription =
+  'Learn about the Rubin Science Platform Acceptable Use Policy';
+
+export default function AupPage({ publicRuntimeConfig }) {
+  return (
+    <>
+      <Head>
+        <title key="title">
+          Acceptable Use Policy | {publicRuntimeConfig.siteName}
+        </title>
+        <meta name="description" key="description" content={pageDescription} />
+        <meta
+          property="og:title"
+          key="ogtitle"
+          content="Acceptable Use Policy"
+        />
+        <meta
+          property="og:description"
+          key="ogdescription"
+          content={pageDescription}
+        />
+      </Head>
+
+      <h1>Acceptable Use Policy</h1>
+
+      <p>
+        We’re giving you access to Rubin Observatory systems so you can do
+        science with our data products or otherwise further the mission of the
+        observatory.
+      </p>
+      <p>
+        You can lose your access (even if you have “data rights” to our data
+        products) if you misuse our resources, interfere with other users, or
+        otherwise do anything that would bring the observatory into disrepute.
+      </p>
+      <p>Observatory systems staff have access to all your activity.</p>
+    </>
+  );
+}
+
+AupPage.propTypes = {
+  publicRuntimeConfig: PropTypes.object,
+};
+
+export async function getServerSideProps() {
+  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+  return {
+    props: {
+      serverRuntimeConfig,
+      publicRuntimeConfig,
+    },
+  };
+}

From b2a889c96c910917a7509e202cc4fe588c633d31 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 14:52:51 -0400
Subject: [PATCH 12/18] Add minimum-viable link to AUP in footer

We'll want to surround the AUP link with a more feature-ful navigation
element in the footer. For this, this makes the page accessible.
---
 components/footer.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/footer.js b/components/footer.js
index 57c1dbea..b8136d9c 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { ContentMaxWidth } from '../styles/sizes';
 
@@ -37,6 +38,10 @@ const FundingNotice = styled.div`
   font-size: 0.8rem;
 `;
 
+const FooterNav = styled.nav`
+  margin-bottom: 2rem;
+`;
+
 /*
  * Footer component (contained within a Page component).
  */
@@ -44,6 +49,9 @@ export default function Footer() {
   return (
     <StyledFooter>
       <div className="content">
+        <FooterNav>
+          <Link href="/acceptable-use-policy">Acceptable use policy</Link>
+        </FooterNav>
         <FundingNotice>
           <p>
             <a href="https://www.nsf.gov/">NSF</a> and{' '}

From cf5300ead173e2ee237af358dad859c94a324050 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 16:13:30 -0400
Subject: [PATCH 13/18] Increase leading for readability

---
 styles/globals.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/styles/globals.css b/styles/globals.css
index 7e3d290e..51696dc0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -40,6 +40,7 @@ body {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Segoe UI,
     Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
     sans-serif;
+  line-height: 1.4;
   color: var(--rsd-component-text-color);
   background-color: var(--rsd-component-page-background-color);
 }

From dba61faca9bc3b6b1a5d1ca2d49e22b6e9a95beb Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 16:13:57 -0400
Subject: [PATCH 14/18] Write copy and style the /support page

---
 components/typography.js | 19 ++++++++++++++++
 pages/support.js         | 48 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/components/typography.js b/components/typography.js
index cd85d1e5..e1348362 100644
--- a/components/typography.js
+++ b/components/typography.js
@@ -2,4 +2,23 @@ import styled from 'styled-components';
 
 export const Lede = styled.p`
   font-size: 1.3rem;
+  margin-bottom: 2rem;
+`;
+
+export const CtaLink = styled.a`
+  display: inline-block;
+  font-size: 1.3rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --tw-ring-offset-shadow: 0 0 transparent;
+  --tw-ring-shadow: 0 0 transparent;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  border: solid 1px transparent;
+  background-color: var(--sqo-doc-card-background-color);
+
+  &:hover {
+    border: solid 1px var(--rsd-color-primary-600);
+  }
 `;
diff --git a/pages/support.js b/pages/support.js
index 298727ab..d901b76e 100644
--- a/pages/support.js
+++ b/pages/support.js
@@ -1,6 +1,14 @@
 import Head from 'next/head';
 import getConfig from 'next/config';
 import PropTypes from 'prop-types';
+import Link from 'next/link';
+import styled from 'styled-components';
+
+import { Lede, CtaLink } from '../components/typography';
+
+const Section = styled.section`
+  margin-bottom: 2rem;
+`;
 
 const pageDescription =
   'Get help with the Rubin Science Platform, data, and software.';
@@ -21,7 +29,45 @@ export default function SupportPage({ publicRuntimeConfig }) {
 
       <h1>Get help with the Rubin Science Platform</h1>
 
-      <p>TK</p>
+      <Lede>
+        Besides the <Link href="/docs">documentation</Link>, you can get help
+        from Rubin Observatory staff. Here are the ways to ask for help.
+      </Lede>
+
+      <Section>
+        <h2>Data Preview 0 science questions</h2>
+
+        <p>
+          For questions about the Data Preview dataset (DESC DC2) and analyzing
+          that data (such as with the LSST Science Pipelines), create a new
+          topic in the{' '}
+          <a href="https://community.lsst.org/c/support/dp0/49">
+            Data Preview 0 Support category
+          </a>{' '}
+          of the Community forum.
+        </p>
+
+        <CtaLink
+          href="http://community.lsst.org/new-topic?category=support/dp0
+        "
+        >
+          Create a science support topic in the forum.
+        </CtaLink>
+      </Section>
+
+      <Section>
+        <h2>Rubin Science Platform technical support and feature requests</h2>
+        <p>
+          For technical issues or feature requests related to the Rubin Science
+          Platform itself (the Portal, Notebooks, and API services such as TAP)
+          create a GitHub issue in the{' '}
+          <a href="https://github.com/rubin-dp0/Support">dp0-1/Support</a>{' '}
+          repository.
+        </p>
+        <CtaLink href="https://github.com/rubin-dp0/Support/issues/new/choose">
+          Create a GitHub issue
+        </CtaLink>
+      </Section>
     </>
   );
 }

From 98191a1b98f77b458a1e8ce6c288c1dec6a03712 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 17:58:41 -0400
Subject: [PATCH 15/18] Link to /api-aspect from hero image

This is a hack - ideally this should be a <Link> component but I was
having issues with layout and getting the right cursor. Falling back to
<a> is a low-perf stop gap while I figure this out.
---
 components/hero.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/hero.js b/components/hero.js
index 34dd3f1b..6ac8fd10 100644
--- a/components/hero.js
+++ b/components/hero.js
@@ -107,14 +107,16 @@ export default function Hero() {
             </div>
           </ServiceCard>
           <ServiceCard>
-            <a href="/">
-              <h2 className="title">APIs</h2>
-              <p className="subtitle">
-                Learn how to programatically access data with Virtual
-                Observatory interfaces
-              </p>
-              <StyledAspectIllustration src="/undraw_server_status_5pbv.svg" />
-            </a>
+            <div className="upper container">
+              <a href="/api-aspect">
+                <h2 className="title">APIs</h2>
+                <p className="subtitle">
+                  Learn how to programatically access data with Virtual
+                  Observatory interfaces
+                </p>
+                <StyledAspectIllustration src="/undraw_server_status_5pbv.svg" />
+              </a>
+            </div>
           </ServiceCard>
         </ServiceCardContainer>
       </ContentContainer>

From 102a6a9dc4dec59037a468c1e6e416503fd15f61 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 18:00:02 -0400
Subject: [PATCH 16/18] Copy edit /support

---
 pages/support.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/support.js b/pages/support.js
index d901b76e..1dcd0504 100644
--- a/pages/support.js
+++ b/pages/support.js
@@ -51,7 +51,7 @@ export default function SupportPage({ publicRuntimeConfig }) {
           href="http://community.lsst.org/new-topic?category=support/dp0
         "
         >
-          Create a science support topic in the forum.
+          Create a science support topic in the forum
         </CtaLink>
       </Section>
 

From 7a1689b18e43888a3efa8ac897f472ec4e851a77 Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 18:00:22 -0400
Subject: [PATCH 17/18] Add copy for /api-aspect page

---
 pages/api-aspect.js | 60 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/pages/api-aspect.js b/pages/api-aspect.js
index bfc5f04f..fc8a0247 100644
--- a/pages/api-aspect.js
+++ b/pages/api-aspect.js
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import getConfig from 'next/config';
 import PropTypes from 'prop-types';
+import { Lede } from '../components/typography';
 
 const pageDescription =
   'Integrate Rubin data into your analysis tools with APIs.';
@@ -25,7 +26,64 @@ export default function ApiAspectPage({ publicRuntimeConfig }) {
 
       <h1>Rubin Science Platform APIs</h1>
 
-      <p>TK</p>
+      <Lede>{pageDescription}</Lede>
+
+      <h2>Table Access Protocol</h2>
+
+      <p>
+        You can access catalog data using the Table Access Protocol (TAP)
+        service with popular tools such as{' '}
+        <a href="http://www.star.bris.ac.uk/~mbt/topcat/">TOPCAT</a> (GUI) and{' '}
+        <a href="https://pyvo.readthedocs.io/en/latest/index.html">pyvo</a>{' '}
+        (Python package). The TAP endpoint is:
+      </p>
+
+      <pre>
+        <code>https://data.lsst.cloud/api/tap</code>
+      </pre>
+
+      <p>
+        To access the TAP service, you also need an{' '}
+        <strong>access token</strong>:
+        <ol>
+          <li>
+            Log into the Science Platform by clicking on the{' '}
+            <strong>Log In</strong> button at the top-right of this page (if you
+            aren't already logged in).
+          </li>
+          <li>
+            Click on{' '}
+            <a href="/auth/tokens">
+              <strong>Security tokens</strong>
+            </a>{' '}
+            from your user menu at the top-right of this page.
+          </li>
+          <li>
+            On the <strong>Tokens</strong> page, click on{' '}
+            <strong>Create Token</strong>.
+          </li>
+          <li>
+            Fill out the fields:
+            <ol>
+              <li>
+                Type a token name, such as <code>tap</code>
+              </li>
+              <li>
+                Select the <strong>read:tap</strong> scope.
+              </li>
+              <li>
+                Choose an expiration timeline. The default,{' '}
+                <strong>Never</strong>, is good for tokens that you manage
+                yourself.
+              </li>
+              <li>
+                Click on <strong>Create</strong>.
+              </li>
+            </ol>
+          </li>
+          <li>Copy the token string and use it in any TAP client.</li>
+        </ol>
+      </p>
     </>
   );
 }

From 212b9c0a11fae5b6d0e78b874a4b4beab7e1db0c Mon Sep 17 00:00:00 2001
From: Jonathan Sick <jsick@lsst.org>
Date: Wed, 23 Jun 2021 18:06:12 -0400
Subject: [PATCH 18/18] Move AUP to /terms

---
 components/footer.js                         | 2 +-
 pages/{acceptable-use-policy.js => terms.js} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename pages/{acceptable-use-policy.js => terms.js} (100%)

diff --git a/components/footer.js b/components/footer.js
index b8136d9c..86e13165 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -50,7 +50,7 @@ export default function Footer() {
     <StyledFooter>
       <div className="content">
         <FooterNav>
-          <Link href="/acceptable-use-policy">Acceptable use policy</Link>
+          <Link href="/terms">Acceptable use policy</Link>
         </FooterNav>
         <FundingNotice>
           <p>
diff --git a/pages/acceptable-use-policy.js b/pages/terms.js
similarity index 100%
rename from pages/acceptable-use-policy.js
rename to pages/terms.js