From 9518933a2a8a61c6dfc254ea065c09b3c33e19ca Mon Sep 17 00:00:00 2001 From: Anne Demey Date: Wed, 14 Apr 2021 14:59:44 -0500 Subject: [PATCH 1/4] Starting content descriptions in readme --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 1722e86..b50ba01 100644 --- a/README.md +++ b/README.md @@ -86,16 +86,52 @@ 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. + ## 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`. 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 pages 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 +``` +` + ## Service Detail Pages ## Solutions Pages -- GitLab From 6e0581d169fce152dfbaf7773ac06788a696696b Mon Sep 17 00:00:00 2001 From: Anne Demey Date: Thu, 15 Apr 2021 11:59:51 -0500 Subject: [PATCH 2/4] Adding content editing descriptions to readme Removing styleguide page --- README.md | 115 ++++++++++++++++++++++++++++------ src/content/solutions/biti.md | 1 - src/pages/style-guide.js | 27 -------- 3 files changed, 96 insertions(+), 47 deletions(-) delete mode 100644 src/pages/style-guide.js diff --git a/README.md b/README.md index b50ba01..e4e1c25 100644 --- a/README.md +++ b/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 @@ -100,22 +97,20 @@ 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. +- `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. +- `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. +- `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`. 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 pages header. +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/' @@ -130,14 +125,96 @@ 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. diff --git a/src/content/solutions/biti.md b/src/content/solutions/biti.md index 55dd60c..5f4a8a0 100644 --- a/src/content/solutions/biti.md +++ b/src/content/solutions/biti.md @@ -10,6 +10,5 @@ shoppable: nonShoppable: - DPR - HNP-IT - index: 1 --- \ No newline at end of file diff --git a/src/pages/style-guide.js b/src/pages/style-guide.js deleted file mode 100644 index 10a9ccc..0000000 --- a/src/pages/style-guide.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { Heading } from 'grommet'; -import { AppLayout, SEO } from '../components/app'; -import { Container, Column } from '../components/layout'; -import { - Colors, - GridColumns, - Typography, - Icons, -} from '../components/style-guide'; - -const StyleGuide = () => ( - - - - - Style Guide - - - - - - - -); - -export default StyleGuide; -- GitLab From b0ae80c5175937549bc8357d1dd666fc5b98a9c7 Mon Sep 17 00:00:00 2001 From: Anne Demey Date: Thu, 15 Apr 2021 12:04:05 -0500 Subject: [PATCH 3/4] Bringing back styleguide page but moving it Adjusting megamenu columns --- src/components/mega-menu/MegaMenu.js | 4 +-- src/components/style-guide/style-guide.js | 31 +++++++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 src/components/style-guide/style-guide.js diff --git a/src/components/mega-menu/MegaMenu.js b/src/components/mega-menu/MegaMenu.js index a385dc4..11a259b 100644 --- a/src/components/mega-menu/MegaMenu.js +++ b/src/components/mega-menu/MegaMenu.js @@ -83,7 +83,7 @@ const MegaMenu = ({ sticky }) => { { {isVert && } diff --git a/src/components/style-guide/style-guide.js b/src/components/style-guide/style-guide.js new file mode 100644 index 0000000..7c6a2e3 --- /dev/null +++ b/src/components/style-guide/style-guide.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { Heading } from 'grommet'; +import { AppLayout, SEO } from '../components/app'; +import { Container, Column } from '../components/layout'; +import { + Colors, + GridColumns, + Typography, + 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 = () => ( + + + + + Style Guide + + + + + + + +); + +export default StyleGuide; -- GitLab From f172bae463420adbdb51d6c3368edda26558ebe7 Mon Sep 17 00:00:00 2001 From: Anne Demey Date: Thu, 15 Apr 2021 12:19:30 -0500 Subject: [PATCH 4/4] More adjustments to menu spacing --- src/components/mega-menu/MegaMenu.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/mega-menu/MegaMenu.js b/src/components/mega-menu/MegaMenu.js index 11a259b..bb8dd3e 100644 --- a/src/components/mega-menu/MegaMenu.js +++ b/src/components/mega-menu/MegaMenu.js @@ -116,7 +116,7 @@ const MegaMenu = ({ sticky }) => { @@ -136,13 +136,13 @@ const MegaMenu = ({ sticky }) => { /> - - + } /> - + + } /> -- GitLab