GSA · HarikaMunipalle · Feb 21, 2024 · Feb 22, 2024 · Feb 27, 2024 · Feb 29, 2024
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,28 @@
+#Dockerfile
+
+# Use this image as the platform to build the app
+FROM node:18-alpine AS external-website
+
+# A small line inside the image to show who made it
+LABEL Developers="Illia Stankevych & Harika Munipalle"
+
+# The WORKDIR instruction sets the working directory for everything that will happen next
+WORKDIR /app
+
+# Copy all local files into the image
+COPY . .
+
+# Clean install all node modules
+RUN npm ci
+
+# Build SvelteKit app
+RUN export NODE_ENV=development; npm run dev
+
+# Delete source code files that were used to build the app that are no longer needed
+# RUN rm -rf src/ static/ emailTemplates/ docker-compose.yml
+
+# The USER instruction sets the user name to use as the default user for the remainder of the current stage
+USER node:node
+
+# This is the command that will be run inside the image when you tell Docker to start the container
+CMD ["node","build/index.js"]
diff --git a/README.md b/README.md
@@ -66,3 +66,70 @@ The vars are now in the `vars` object, you can reference them with `vars.variabl
 ## Data structure
 
 The editor uses the OpenACR [schema](https://github.com/GSA/openacr/tree/main/schema) and [catalog](https://github.com/GSA/open-product-accessibility-template/tree/main/catalog) as data structures.
+
+# External Blocks Integration Documentation
+
+## Overview
+
+The External Blocks feature provided by Section 508 offers functionality to seamlessly integrate the header and footer elements from the Section 508 website into external projects. This documentation outlines the steps required to incorporate Section 508 header and footer elements into your website.
+
+## Integration Steps
+
+To integrate the Section 508 header and footer into your website, follow these steps:
+
+### 1. Include Stylesheet and JavaScript Files
+
+Add the following stylesheet and JavaScript files to your website's HTML code:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://www.section508.gov/assets/css/external-blocks.css"
+/>
+<script
+  defer
+  src="https://www.section508.gov/assets/js/external-508-blocks.js"
+></script>
+<script defer src="https://www.section508.gov/assets/js/uswds.min.js"></script>
+```
+
+### Example
+
+Here's an example of how to integrate the Section 508 header and footer into your HTML code:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Website</title>
+    <!-- Include Section 508 stylesheet and JavaScript after Open ACR-->
+    <link
+      rel="stylesheet"
+      href="https://www.section508.gov/assets/css/external-blocks.css"
+    />
+    <script
+      defer
+      src="https://www.section508.gov/assets/js/external-508-blocks.js"
+    ></script>
+    <script
+      defer
+      src="https://www.section508.gov/assets/js/uswds.min.js"
+    ></script>
+  </head>
+  <body>
+    <!-- Section 508 Header -->
+    <div id="header-508"></div>
+
+    <!-- Your Website Content Goes Here -->
+
+    <!-- Section 508 Footer -->
+    <div id="footer-508"></div>
+  </body>
+</html>
+```
+
+### Notes
+
+- Ensure that your website's design accommodates the integration of the Section 508 header and footer appropriately.
diff --git a/config/ghpages.json b/config/ghpages.json
@@ -1,3 +1,3 @@
 {
-  "pathPrefix": "/openacr-editor"
+  "pathPrefix": "/openacr-editor-stage"
 }
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,16 @@
+version: "3.4"
+services:
+  node:
+    image: node:14-alpine
+    volumes:
+      - type: bind
+        source: ./
+        target: /app
+    working_dir: /app
+    command: npm run dev
+    ports:
+      - "5000:5000"
+    environment:
+      - NODE_ENV=development
+      - PORT=5000
+      - HOST=0.0.0.0
diff --git a/public/fonts/public-sans/PublicSans-Bold.ttf b/public/fonts/public-sans/PublicSans-Bold.ttf
diff --git a/public/fonts/public-sans/PublicSans-Bold.woff b/public/fonts/public-sans/PublicSans-Bold.woff
diff --git a/public/fonts/public-sans/PublicSans-Bold.woff2 b/public/fonts/public-sans/PublicSans-Bold.woff2
diff --git a/public/fonts/public-sans/PublicSans-Regular.ttf b/public/fonts/public-sans/PublicSans-Regular.ttf
diff --git a/public/fonts/public-sans/PublicSans-Regular.woff b/public/fonts/public-sans/PublicSans-Regular.woff
diff --git a/public/fonts/public-sans/PublicSans-Regular.woff2 b/public/fonts/public-sans/PublicSans-Regular.woff2
diff --git a/public/fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf b/public/fonts/source-sans-pro/sourcesanspro-bold-webfont.ttf
diff --git a/public/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff b/public/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff
diff --git a/public/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2 b/public/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2
diff --git a/public/fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf b/public/fonts/source-sans-pro/sourcesanspro-regular-webfont.ttf
diff --git a/public/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff b/public/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff
diff --git a/public/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2 b/public/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2
diff --git a/public/images/Accessibility Conformance Report (ACR) A4 Small.png b/public/images/Accessibility Conformance Report (ACR) A4 Small.png
diff --git a/public/images/Accessibility Conformance Report A4 White Horizontal (1).png b/public/images/Accessibility Conformance Report A4 White Horizontal (1).png
diff --git a/public/images/Accessibility Conformance Report A4 White Horizontal.png b/public/images/Accessibility Conformance Report A4 White Horizontal.png
diff --git a/src/.empty-file b/src/.empty-file
diff --git a/src/App.svelte b/src/App.svelte
@@ -30,7 +30,7 @@
   function setInteracted(e) {
     if (e.target.type != "file") {
       window.removeEventListener("input", setInteracted);
-      window.onbeforeunload = closeEditorWarning;
+       //window.onbeforeunload = closeEditorWarning;
     }
   }
 

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
@@ -1,22 +1,22 @@
 <style>
-  .nav {
-    -ms-grid-column: 2;
-    -ms-grid-column-span: 8;
-    grid-column: 2 / span 8;
-    -ms-grid-row: 1;
-    -ms-grid-row-span: 1;
-    grid-row: 1;
-    overflow: auto;
-    margin: -32px 0 40px;
-    background-color: #d0e1f1;
-    background-color: var(--cloudy-subtle);
-  }
-  .nav ul {
-    display: flex;
-    flex-direction: row;
-    margin: 0;
-    padding: 0;
-  }
+	.nav {
+	-ms-grid-column: 2;
+	-ms-grid-column-span: 8;
+	grid-column: 2 / span 8;
+	-ms-grid-row: 1;
+	-ms-grid-row-span: 1;
+	grid-row: 1;
+	overflow: auto;
+	margin: -32px 0 40px;
+	background-color: #d0e1f1;
+	background-color: var(--cloudy-subtle);
+	}
+	.nav ul {
+	display: flex;
+	flex-direction: row;
+	margin: 0;
+	padding: 0;
+	}
 </style>
 
 <nav class="nav" aria-label="Steps">

diff --git a/src/components/YourReport.svelte b/src/components/YourReport.svelte
@@ -24,7 +24,7 @@
   }
 
   function clear() {
-    window.onbeforeunload = null;
+    //window.onbeforeunload = null;
     if (
       window.confirm(
         "This will clear the current OpenACR and start a new one. Are you sure that's what you'd like to do?"
@@ -77,7 +77,7 @@
   @media (min-width: 60em) {
     .your-report--expanded {
       position: sticky;
-      top: 1em;
+      top: 4em;
     }
   }
 

diff --git a/src/components/report/ReportChapter.svelte b/src/components/report/ReportChapter.svelte
@@ -22,7 +22,7 @@
   }
   thead {
     position: sticky;
-    top: 0;
+    top: 3em;
     z-index: 1;
   }
   thead th {
@@ -44,7 +44,7 @@
 {/if}
 
 {#if $evaluation['chapters'][chapterId]['criteria'] && !$evaluation['chapters'][chapterId]['disabled'] }
-  <table class="usa-table">
+  <table>
     <thead>
     <tr>
       <th>Criteria</th>

diff --git a/src/components/report/ReportHeader.svelte b/src/components/report/ReportHeader.svelte
@@ -68,7 +68,7 @@ Based on {catalog.title}
 <HeaderWithAnchor id="applicable-standards-guidelines" level=2 {download}>Applicable Standards/Guidelines</HeaderWithAnchor>
 This report covers the degree of conformance for the following accessibility standard/guidelines:
 
-<table class="usa-table">
+<table>
   <thead>
     <tr>
       <th>Standard/Guideline</th>