Typed Sass Styling (#69)

* Addresses issue #16 -
Add styles via sass and module imports
Adds typed scss imports via gatsby-plugin-sass.
Makes use of .d.scss file generated by gatsby-plugin-scss-typescript,
but avoids importing that directly while they work out issue in gatsby v3.

* adding vscode config for easier local debugging

client/.vscode/launch.json

@@ -0,0 +1,34 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Debug Chrome",
+      "url": "http://localhost:8000",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "name": "Gatsby develop",
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
+      "args": ["develop"],
+      "stopOnEntry": false,
+      "runtimeArgs": ["--nolazy"],
+      "sourceMaps": false
+    },
+    {
+      "name": "Gatsby build",
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
+      "args": ["build"],
+      "stopOnEntry": false,
+      "runtimeArgs": ["--nolazy"],
+      "sourceMaps": false
+    }
+  ]
+}

client/gatsby-config.js

@@ -12,5 +12,14 @@ module.exports = {
   siteMetadata: {
     title: "Justice40",
   },
-  plugins: ['gatsby-plugin-scss-typescript'],
+  plugins: [{
+    resolve: 'gatsby-plugin-sass',
+    options: {
+      cssLoaderOptions: {
+        modules: {
+          exportLocalsConvention: 'camelCaseOnly'
+        }
+      }
+    }
+},],
 };

client/gatsby-node.js

@@ -1,7 +1,12 @@
+path = require('path');
+
 // Disable references to window from trussworks/uswds
 // See here: https://www.gatsbyjs.com/docs/debugging-html-builds/#fixing-third-party-modules
 exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-    if (stage === "build-html" || stage === "develop-html") {
+  actions.setWebpackConfig({
+    devtool: 'eval-source-map',
+  });  
+  if (stage === "build-html" || stage === "develop-html") {
       actions.setWebpackConfig({
         module: {
           rules: [
@@ -11,6 +16,9 @@ exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
             },
           ],
         },
+        resolve: {
+          modules: [path.resolve(__dirname, "src"), "node_modules"],
+        },
       })
     }
   }

client/package.json

@@ -19,8 +19,9 @@
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
     "gatsby-cli": "^3.5.0",
-    "gatsby-plugin-scss-typescript": "^5.1.0",
-    "sass": "^1.32.13"
+    "gatsby-plugin-sass": "^4.5.0",
+    "sass": "^1.33.0",
+    "sass-loader": "^11.1.1"
   },
   "dependencies": {
     "@trussworks/react-uswds": "^1.17.0",

client/src/components/J40footer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Footer } from '@trussworks/react-uswds';
+import {Link} from 'gatsby';
+
+const footerLinks = [
+    <Link to="/">Home</Link>
+];
+
+const J40Footer = () => {
+    return (
+        <>
+        <Footer primary={[]} secondary={footerLinks} />
+        </>
+    );
+};
+
+export default J40Footer;

client/src/components/J40header.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { GovBanner, Header, Title, PrimaryNav } from '@trussworks/react-uswds';
+import { useStaticQuery, graphql, Link } from "gatsby";
+
+const headerLinks = [
+    <Link to="/">Home</Link>
+];
+
+const J40Header = () => {
+    const data: any = useStaticQuery(graphql`
+      query MyQuery {
+        site {
+          siteMetadata {
+            title
+          }
+        }
+      }
+  `)
+
+  const siteTitle: string = data.site.siteMetadata?.title || `Title`
+    return (
+        <>
+        <GovBanner />
+        <Header>
+            <Title>{siteTitle}</Title>
+            <PrimaryNav items={headerLinks}/>
+        </Header>
+        </>
+    );
+};
+
+export default J40Header;

client/src/components/layout.module.scss

@@ -0,0 +1,9 @@
+.site {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.site-content {
+  flex: 1;
+}

client/src/components/layout.module.scss.d.ts

@@ -0,0 +1,13 @@
+declare namespace LayoutModuleScssNamespace {
+  export interface ILayoutModuleScss {
+    site: string;
+    siteContent: string;
+  }
+}
+
+declare const LayoutModuleScssModule: LayoutModuleScssNamespace.ILayoutModuleScss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: LayoutModuleScssNamespace.ILayoutModuleScss;
+};
+
+export = LayoutModuleScssModule;

client/src/components/layout.tsx

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import * as styles from './layout.module.scss';
+import J40Header from './J40Header';
+import J40Footer from "./J40Footer";
+interface ILayoutProps {
+  children: ReactNode
+}
+
+const Layout = ({ children }: ILayoutProps) => {
+  return (
+      <div className={styles.site}>
+        <J40Header />
+        <div className={styles.siteContent}>{children}</div>
+        <J40Footer />
+      </div>
+  );
+};
+
+export default Layout;

client/src/pages/index.tsx

@@ -1,15 +1,11 @@
 import * as React from "react"
-import {GovBanner} from '@trussworks/react-uswds';
+import Layout from '../components/layout';
 
 // markup
-const IndexPage = () => {
+export default function IndexPage() {
   return (
-      <main>
-        <GovBanner />
+      <Layout>
         <title>Justice40</title>
-        <h1>Justice40</h1>
-      </main>
+      </Layout>
   )
-}
-
-export default IndexPage;
+}