Updates to doj-demo (#218)

* Upgrade Astro dependencies in doj-demo

* Fix asset issue with Astro's node.js adapter by using trailingSlash: never

* Fix asset issues in doj-demo, and sync up with recent changes in the spotlight app

apps/doj-demo/astro.config.mjs

@@ -2,10 +2,14 @@ import { defineConfig } from 'astro/config';
 import node from '@astrojs/node';
 import react from '@astrojs/react';
 
+import { getGithubRepository } from './src/lib/github';
+
+const githubRepository = await getGithubRepository(process.env);
+
 // https://astro.build/config
 export default defineConfig({
   output: 'server',
-  trailingSlash: 'always',
+  trailingSlash: 'never',
   base: addTrailingSlash(process.env.BASEURL || ''),
   adapter: node({
     mode: 'standalone',
@@ -18,6 +22,11 @@ export default defineConfig({
   server: {
     port: 4322,
   },
+  vite: {
+    define: {
+      'import.meta.env.GITHUB': JSON.stringify(githubRepository),
+    },
+  },
 });
 
 function addTrailingSlash(path) {

apps/doj-demo/package.json

@@ -10,12 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.6",
-    "@astrojs/node": "^8.2.3",
-    "@astrojs/react": "^3.0.9",
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/node": "^8.3.1",
+    "@astrojs/react": "^3.6.0",
     "@atj/design": "workspace:*",
     "@atj/forms": "workspace:*",
-    "astro": "^4.4.11",
+    "astro": "^4.10.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",

apps/doj-demo/src/components/AppFormManager.tsx

@@ -7,6 +7,7 @@ import {
 } from '@atj/design';
 
 import { getAppContext } from '../context';
+import { getFormManagerUrlById, getFormUrl } from '../routes';
 
 export default function () {
   const ctx = getAppContext();
@@ -19,6 +20,8 @@ export default function () {
         editComponents: defaultPatternEditComponents,
         formService: ctx.formService,
         uswdsRoot: ctx.uswdsRoot,
+        urlForForm: getFormUrl,
+        urlForFormManager: getFormManagerUrlById,
       }}
     />
   );

apps/doj-demo/src/components/Footer.astro

@@ -1,5 +1,11 @@
 ---
+import { type GithubRepository, getBranchTreeUrl } from '../lib/github';
 
+type Props = {
+  github: GithubRepository;
+};
+
+const { github } = Astro.props;
 ---
 
 <footer class="usa-footer usa-footer--slim">
@@ -18,6 +24,16 @@
                 10x
               </a>
             </li>
+            <li
+              class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
+            >
+              <a
+                class="usa-footer__primary-link"
+                href={getBranchTreeUrl(github, true)}
+              >
+                Github repository
+              </a>
+            </li>
           </ul>
         </nav>
       </div>

apps/doj-demo/src/components/Header.astro

@@ -15,16 +15,24 @@ const getNavLinkClasses = (url: string) => {
 
 <div class="usa-overlay"></div>
 <header class="usa-header usa-header--extended">
-  <div class="usa-navbar">
-    <div class="usa-logo">
-      <em class="usa-logo__text">
-        <a href={routes.getHomeUrl()} title="10x Access to Justice">
-          <img src={logoSvg.src} role="img" alt="10x Logo" />
-          <span>Access to Justice Form Builder</span>
-        </a>
-      </em>
+  <div class="topHeaderBanner bg-yellow">
+    <span class="usa-navbar height-auto display-block padding-2"
+      ><strong>STAGING SERVER</strong> - No changes you make here will be visible
+      to the public.</span
+    >
+  </div>
+  <div class="bg-base-darkest">
+    <div class="usa-navbar">
+      <div class="usa-logo">
+        <em class="usa-logo__text">
+          <a href={routes.getHomeUrl()} title="10x Access to Justice">
+            <img src={logoSvg.src} role="img" alt="10x Logo" />
+            <span class="text-white">DOJ A2J Forms</span>
+          </a>
+        </em>
+      </div>
+      <button type="button" class="usa-menu-btn">Menu</button>
     </div>
-    <button type="button" class="usa-menu-btn">Menu</button>
   </div>
   <nav aria-label="Primary navigation" class="usa-nav">
     <div class="usa-nav__inner">
@@ -35,14 +43,15 @@ const getNavLinkClasses = (url: string) => {
         <li class="usa-nav__primary-item">
           <a
             href={routes.getHomeUrl()}
-            class={getNavLinkClasses(routes.getHomeUrl())}><span>Home</span></a
+            class={getNavLinkClasses(routes.getHomeUrl())}
+            ><span>My Forms</span></a
           >
         </li>
         <li class="usa-nav__primary-item">
           <a
-            href={routes.getManageUrl()}
-            class={getNavLinkClasses(routes.getManageUrl())}
-            ><span>Manage forms</span></a
+            href={routes.getStorybookUrl()}
+            class={getNavLinkClasses(routes.getStorybookUrl())}
+            ><span>Storybook</span></a
           >
         </li>
       </ul>

apps/doj-demo/src/components/UsaBanner.astro

@@ -17,7 +17,7 @@ import usFlagSmall from '@atj/design/static/uswds/img/us_flag_small.png';
         </div>
         <div class="grid-col-fill tablet:grid-col-auto">
           <p class="usa-banner__header-text">
-            An official website of the United States government
+            A demo website of the United States government
           </p>
           <p class="usa-banner__header-action" aria-hidden="true">
             Here’s how you know

apps/doj-demo/src/context.ts

@@ -2,10 +2,13 @@ import { FormConfig } from '@atj/forms';
 import { defaultFormConfig } from '@atj/forms';
 import { service } from '@atj/forms';
 
+import { type GithubRepository } from './lib/github';
+
 export type AppContext = {
   baseUrl: `${string}/`;
   formConfig: FormConfig;
   formService: service.FormService;
+  github: GithubRepository;
   uswdsRoot: `${string}/`;
 };
 
@@ -23,6 +26,7 @@ const createAppContext = (env: any): AppContext => {
     baseUrl: env.BASE_URL,
     formConfig: defaultFormConfig,
     formService: createAppFormService(),
+    github: env.GITHUB,
     uswdsRoot: `${env.BASE_URL}uswds/`,
   };
 };

apps/doj-demo/src/layouts/ContentLayout.astro

@@ -8,15 +8,5 @@ const { title } = Astro.props;
 ---
 
 <Layout title={title}>
-  <main class="bg-base-lightest" id="main-content">
-    <section class="grid-container usa-section">
-      <div class="grid-row flex-justify-center">
-        <div class="grid-col-12 tablet:grid-col-12 desktop:grid-col-12">
-          <div class="bg-white padding-y-3 padding-x-3 border border-base-lighter">
-            <slot />
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
+  <slot />
 </Layout>

apps/doj-demo/src/layouts/Layout.astro

@@ -2,45 +2,64 @@
 import '../styles.css';
 
 import UsaBanner from '../components/UsaBanner.astro';
+import Footer from '../components/Footer.astro';
 import Header from '../components/Header.astro';
 import { getAppContext } from '../context';
-import * as routes from '../routes';
 
 interface Props {
   title: string;
 }
 const { title } = Astro.props;
+const context = getAppContext();
 ---
 
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta
       name="description"
-      content=`Office of the Pardon Attorney - Department of Justice - ${title}`
+      content=`10x Access to Justice Spotlight - ${title}`
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script
       async
       type="text/javascript"
       src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA"
       id="_fed_an_ua_tag"></script>
-    <link href={routes.getFaviconUrl()} rel="shortcut icon" />
+    <link
+      href="/favicon/apple-touch-icon.png"
+      rel="apple-touch-icon"
+      sizes="180x180"
+    />
+    <link
+      href="/favicon/favicon-32x32.png"
+      rel="icon"
+      sizes="32x32"
+      type="image/png"
+    />
+    <link
+      href="/favicon/favicon-16x16.png"
+      rel="icon"
+      sizes="16x16"
+      type="image/png"
+    />
+    <link href="/favicon/favicon.ico" rel="shortcut icon" />
     <meta name="generator" content={Astro.generator} />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
     <script src="../lib/initialize.ts"></script>
-    <title>
-      Office of the Pardon Attorney - Department of Justice - {title}
-    </title>
+    <title>{title}</title>
   </head>
   <body id="top">
     <div class="usa-app usa-app__theme-1">
       <UsaBanner />
       <Header />
-      <slot />
+      <main id="main-content">
+        <slot />
+      </main>
+      <Footer github={context.github} />
     </div>
   </body>
 </html>

apps/doj-demo/src/lib/github.ts

@@ -0,0 +1,35 @@
+export type GithubRepository = {
+  owner: string;
+  repository: string;
+  branch: string;
+  commit: string;
+};
+
+export const DEFAULT_REPOSITORY: GithubRepository = {
+  owner: 'gsa-tts',
+  repository: 'atj-platform',
+  branch: 'main',
+  commit: 'main',
+};
+
+export const getBranchTreeUrl = (
+  github: GithubRepository,
+  useDefaultShortForm = true
+) => {
+  if (useDefaultShortForm && github.branch === DEFAULT_REPOSITORY.branch) {
+    return `https://github.com/${github.owner}/${github.repository}`;
+  }
+  return `https://github.com/${github.owner}/${github.repository}/tree/${github.branch}`;
+};
+
+export const getGithubRepository = async (
+  env?: any
+): Promise<GithubRepository> => {
+  const { execSync } = await import('child_process');
+  return {
+    owner: env.OWNER || 'gsa-tts',
+    repository: env.REPOSITORY || 'atj-platform',
+    branch: env.BRANCH || 'main',
+    commit: execSync('git rev-parse HEAD').toString().trim(),
+  };
+};

apps/doj-demo/src/pages/index.astro

@@ -1,8 +1,8 @@
 ---
-import ContentLayout from '../layouts/ContentLayout.astro';
+import AppFormManager from '../components/AppFormManager';
+import Layout from '../layouts/Layout.astro';
 ---
 
-<ContentLayout title="Home">
-  <h1>Office of the Pardon Attorney</h1>
-  <h2>Sample forms</h2>
-</ContentLayout>
+<Layout title="10x Access to Justice Spotlight">
+  <AppFormManager client:only />
+</Layout>

apps/doj-demo/src/pages/manage/index.astro

@@ -1,8 +1,8 @@
 ---
 import AppFormManager from '../../components/AppFormManager';
-import ContentLayout from '../../layouts/ContentLayout.astro';
+import Layout from '../../layouts/Layout.astro';
 ---
 
-<ContentLayout title="10x Access to Justice Spotlight">
+<Layout title="10x Access to Justice Spotlight">
   <AppFormManager client:only />
-</ContentLayout>
+</Layout>

apps/doj-demo/src/routes.ts

@@ -2,12 +2,17 @@ import { getAppContext } from './context';
 
 export const getFormUrl = (formId: string) => {
   const context = getAppContext();
-  return `${context.baseUrl}forms/#${formId}`;
+  return `${context.baseUrl}forms#${formId}`;
+};
+
+export const getFormManagerUrlById = (formId: string) => {
+  const context = getAppContext();
+  return `${context.baseUrl}#/${formId}`;
 };
 
 export const getManageUrl = () => {
   const context = getAppContext();
-  return `${context.baseUrl}manage/`;
+  return `${context.baseUrl}manage`;
 };
 
 export const getHomeUrl = () => {
@@ -19,3 +24,8 @@ export const getFaviconUrl = () => {
   const context = getAppContext();
   return `${context.baseUrl}favicon.ico`;
 };
+
+export const getStorybookUrl = () => {
+  const context = getAppContext();
+  return `${context.baseUrl}design/index.html`;
+};

apps/spotlight/src/components/Header.astro

@@ -16,7 +16,10 @@ const getNavLinkClasses = (url: string) => {
 <div class="usa-overlay"></div>
 <header class="usa-header usa-header--extended">
   <div class="topHeaderBanner bg-yellow">
-    <span class="usa-navbar height-auto display-block padding-2"><strong>STAGING SERVER</strong> - No changes you make here will be visible to the public.</span>
+    <span class="usa-navbar height-auto display-block padding-2"
+      ><strong>STAGING SERVER</strong> - No changes you make here will be visible
+      to the public.</span
+    >
   </div>
   <div class="bg-base-darkest">
     <div class="usa-navbar">
@@ -40,7 +43,8 @@ const getNavLinkClasses = (url: string) => {
         <li class="usa-nav__primary-item">
           <a
             href={routes.getHomeUrl()}
-            class={getNavLinkClasses(routes.getHomeUrl())}><span>My Forms</span></a
+            class={getNavLinkClasses(routes.getHomeUrl())}
+            ><span>My Forms</span></a
           >
         </li>
         <li class="usa-nav__primary-item">

apps/spotlight/src/context.ts

@@ -23,10 +23,10 @@ export const getAppContext = (): AppContext => {
 
 const createAppContext = (env: any): AppContext => {
   return {
-    github: env.GITHUB,
     baseUrl: env.BASE_URL,
     formConfig: defaultFormConfig,
     formService: createAppFormService(),
+    github: env.GITHUB,
     uswdsRoot: `${env.BASE_URL}uswds/`,
   };
 };