@@ -67,10 +67,7 @@ There are limited software requirements to run and build the website. Any modern
...
@@ -67,10 +67,7 @@ There are limited software requirements to run and build the website. Any modern
# Authoring
# 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/) 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).
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).
## Main Author-able Features
## Main Author-able Features
...
@@ -100,22 +97,20 @@ index: 1
...
@@ -100,22 +97,20 @@ index: 1
```
```
-`name`: Unique name for the slide, keep same as `title`
-`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.
-`title`: Used for largest text on slide. Will be replaced with `logo` image, if present
-`subtitle`: Optional. Text under title
-`subtitle`: Optional. Text under title
-`core`: Optional, true or false. Adds "Core Transformation Service" text above slide title.
-`core`: Optional, true or false. Adds "Core Transformation Service" text above slide title
-`cta`: Optional. Text for the slide button.
-`cta`: Optional. Text for the slide button
-`slug`: Optional. Link for slide button.
-`slug`: Optional. Link for slide button
-`image`: Main background image for slide.
-`image`: Main background image for slide
-`logo`: Optional. Main slide graphic logo. Slide will default to displaying `title` text if not present.
-`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`
-`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.
-`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
## Service Category Pages
The Service Category page contains a list of links to services, related to a parent category. The
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.
content is controlled by a markdown file in `/src/content/service-category`. Each file has a
header section with metadata in yaml format. The body section of the file is the description of
-`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
## 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`.
-`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
## 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.
