Merge pull request #55 in USAFHNI/digital-trinity from feature/readme-04-14 to develop

* commit 'f172bae4':
  More adjustments to menu spacing
  Bringing back styleguide page but moving it Adjusting megamenu columns
  Adding content editing descriptions to readme Removing styleguide page
  Starting content descriptions in readme

README.md

@@ -67,10 +67,7 @@ There are limited software requirements to run and build the website. Any modern
 
 # Authoring
 
-** Work In Progress **
-
-
-This website is designed for ease of maintenance and content authoring, with a goal of future content management integration in mind. Editable content is stored in either [Markdown](https://www.markdownguide.org/basic-syntax/) [YAML](https://en.wikipedia.org/wiki/YAML).
+This website is designed for ease of maintenance and content authoring, with a goal of future content management integration in mind. Editable content is stored in either [Markdown](https://www.markdownguide.org/basic-syntax/) or [YAML](https://en.wikipedia.org/wiki/YAML) formats. All Markdown files start with a section of metadata, formatted in YAML, see [Frontmatter for metadata in Markdown files](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/#frontmatter-for-metadata-in-markdown-files).
 
 ## Main Author-able Features
 
@@ -86,22 +83,138 @@ This website is designed for ease of maintenance and content authoring, with a g
 Content for the Hero Carousel is sourced from `YAML` files located in `/src/data/hero`. Each slide has a dedicated file.
 
 ```yaml
-name: Platform One
-title: Platform One
-subtitle: 'Fast, Secure, Streamlined'
-slug: '/services/cloud-one'
-image: '../../images/clouds-19.jpg'
-index: 2
+name: Cloud One
+title: Cloud One
+subtitle: "USAF's preeminent cloud hosting platform"
+core: true
+cta: 'Learn More'
+slug: '/services/cloud-one/'
+image: '../../images/hero/2-hero-cloud-one.png'
+logo: '../../images/hero/logo-cloud-one.png'
+thumb: '../../images/hero/thumb-cloud-one.png'
+thumblogo: '../../images/hero/logo-cloud-one.png'
+index: 1
 ```
 
+- `name`: Unique name for the slide, keep same as `title`
+- `title`: Used for largest text on slide. Will be replaced with `logo` image, if present
+- `subtitle`: Optional. Text under title
+- `core`: Optional, true or false. Adds "Core Transformation Service" text above slide title
+- `cta`: Optional. Text for the slide button
+- `slug`: Optional. Link for slide button
+- `image`: Main background image for slide
+- `logo`: Optional. Main slide graphic logo. Slide will default to displaying `title` text if not present
+- `thumb`: Background image for slide controls. Scaled and cropped version of `image`
+- `thumbLogo`: Optional. Graphic to display in slide controls. Will default to `title` text if not present
+- `index`: Order in which the slide appears. Starts with `0`.
+
 ## Service Category Pages
 
+The Service Category page contains a list of links to services, related to a parent category. The content is controlled by a markdown file in `/src/content/service-category`. They will use the template at `/src/templates/ServiceCategory.js`. Each file has a header section with metadata in yaml format. The body section of the file is the description of the service, and appears in the page's header.
+
+```yaml
+slug: '/networking-connectivity/'
+title: 'Networking & Connectivity'
+categories:
+  - Global Connectivity / WAN
+  - Local Connectivity / BAN
+  - Transport
+  - Cloud Access
+  - Reference Architectures
+image: '../../images/cat-header.png'
+share: '../../images/share/ogimage-networking_and_connectivity.png'
+icon: DtNetConn
+```
+- `slug`: Path for page. If updated, links in main navigation to "overview" will need updating
+- `title`: Name of page. Added to page header
+- `categories`: List of categories. Service detail pages which also have a matching category, will be added to this pages content
+- `image`: Background image for page hero
+- `share`: Image used for social sharing
+- `icon`: Name of icon component used in header. Should match names in `/src/components/icons`
+
 ## Service Detail Pages
 
-## Solutions Pages
+The Service Detail page contains detailed content about a service. A page may live under multiple categories. The content is controlled by a markdown file in `/src/content/service-category`. They will use the template at `/src/templates/ServiceDetail.js`.
+
+```yaml
+slug: '/services/cloud-one/'
+title: 'Cloud One'
+categories:
+  - Compute & Store
+levels:
+  - U
+  - S
+excerpt: 'The ‘one-stop-shop’ for Air Force cloud computing, Cloud One provides cloud environments in AWS and Azure.  As the enterprise solution, Cloud One embraces automated deployments to stand-up cloud environments at scale. '
+share: '../../images/share/ogimage-compute_and_store.png'
+updated: March 31
+```
+- `slug`: Path for page. All application links to this page are pulled from this value
+- `title`: Name of page. Used in page header and all links to this page
+- `categories`: List of categories this page belongs to. May be one or more.
+- `levels`: Classification levels for page. Options: `U`, `S`, `S-SAR`, `S-SCI`, `TS`, `TS-SAR`, `TS-SCI`
+- `excerpt`: Short description for page. Used for descriptions on Service Category pages, and in share links.
+- `share`: Image used for social sharing
+- `updated`: Not used, for internal tracking only.
+
+
+## Solution Detail
+
+A Solution Detail page contains a list of services which make up the solution. Content is controlled by a markdown file in `/src/content/solutions`. They will use the template at `/src/templates/SolutionDetail.js`.
+
+These markdown files have no body content, only yaml metadata headers. Content from this section will also be pulled in to the homepage via the `/src/components/pages/home/Solutions.js` component. This component uses only the first 2 solutions, based on index.
+
+```yaml
+slug: '/solutions/digitial-trinity/'
+title: Digital Trinity
+useCase: Build software that spans multiple security levels
+categories:
+  - Compute & Store
+  - Software Development & DevSecOps
+  - Digital Engineering
+shoppable:
+  - Cloud One
+  - FENCES
+  - Platform One
+  - DE Platform
+index: 0
+```
+
+- `slug`: Path for page. All application links to this page are pulled from this value
+- `title`: Name of page. Added to page header
+- `useCase`: Description of solution. Used in header.
+- `categories`: List of content categories this solution contains. This does not drive any content, only used for display on the Solutions page.
+- `shoppable`: List of Services this solution contains. Value should match the solutions `shortTitle` or `title` property of a Service Detail page.
+- `nonShoppable`: Optional. Services without a full Service Detail page. Limited content for these services will be displayed. Value should match the solutions `shortTitle` or `title` property of a Service Detail page.
+- `index`: Order which solution should display on the Solutions page. Starts with `0`.
 
 ## Generic Content Pages
 
-# Developing
+Generic Content pages are controlled by markdown files in `/src/content/generic`. They will use the generic page template at `/src/templates/Generic.js`. The body of the markdown file will be the pages content.
+
+```yaml
+slug: '/about-us/'
+title: About Us
+subtitle: AFLCMC / C3I&N
+description: Learn more about C3I&N's mission and our digital storefront.
+image: '../../images/detail-header.png'
+```
+
+- `slug`: Path for page.
+- `title`: Name of page. Added to page header
+- `subtitle`: Additional text for page header
+- `description`: Not added to page. Used only for share link descriptions
+- `image`: Background image for page header
+
+
+# Features
+
+## Creating Pages
+
+Pages are sourced in to the website through 2 methods. First, static pages will be created by javascript files in `/src/pages`. These pages have no templates, and their URL will be derived from the file name.
+
+Second, dynamic pages are created through the `gatsby-node.js` file. Here template files are matched with markdown content files.
+
+## Contact Forms
+
+The contact forms in this website integrate with Google Forms. There are technical limitations with this integration. Google does not send CORS headers, so handling of form submission responses is limited. The UI has no indication of success or failure, only that the request was completed. The user will see the success state, regardless of the status.
 
-TODO: Describe how content is pulled in to pages and components. How `gatsby-source-filesystem` is used with `gatsby-node.js` to match pages with templates.

src/components/mega-menu/MegaMenu.js

@@ -83,7 +83,7 @@ const MegaMenu = ({ sticky }) => {
           <Box
             {...{ border: !isVert && { side: 'right' } }}
             {...(isVert && { flex: { shrink: 0 } })}
-            basis={isVert ? 'auto' : '45%'}
+            basis={isVert ? 'auto' : '55%'}
           >
             <GroupHeader
               label="Networking & Connectivity"
@@ -115,8 +115,8 @@ const MegaMenu = ({ sticky }) => {
           {isVert && <Divider flex={{ grow: 0 }} />}
           <Box
             direction="row"
-            basis={isVert ? 'auto' : '55%'}
-            gap="large"
+            basis={isVert ? 'auto' : '45%'}
+            gap="medium"
             {...(isVert && { flex: { shrink: 0 } })}
           >
             <Box basis="1/2">
@@ -136,13 +136,13 @@ const MegaMenu = ({ sticky }) => {
                 />
                 <MenuGroup category="Software Development & DevSecOps" />
               </Box>
-            </Box>
-            <Box basis="1/2">
+              <Divider />
               <Box flex={{ shrink: 0 }}>
                 <GroupHeader label="Digital Engineering" icon={<DtDigiEng />} />
                 <MenuGroup category="Digital Engineering" />
               </Box>
-              <Divider />
+            </Box>
+            <Box basis="1/2">
               <Box flex={{ shrink: 0 }}>
                 <GroupHeader label="Communications" icon={<DtComms />} />
                 <MenuGroup category="Communications" />

src/pages/style-guide.js → src/components/style-guide/style-guide.js

@@ -9,6 +9,10 @@ import {
   Icons,
 } from '../components/style-guide';
 
+/**
+ * Page for displaying basic styling settings for the website. Move this file to the `src/pages`
+ * directory to view. It has been moved so it does not get published.
+ */
 const StyleGuide = () => (
   <AppLayout>
     <SEO title="Style Guide" />

src/content/solutions/biti.md

@@ -10,6 +10,5 @@ shoppable:
 nonShoppable:
   - DPR
   - HNP-IT
-  
 index: 1
 ---
\ No newline at end of file