About section (#87)

* remove old temporary static files

removing files that we used to tell people that dpgraham.com was down while we migrated to google cloud

* move hooks out of component library

* copy useApi hook over from another project and modify

* string literals instead of generic string type for HTTP methods in our service calls

* add in memory caching to our custom useQuery hook

* initial about me content with a couple paragraphs about myself, funny title and selfie image

* portfolio list item with haztrak

* add personal blog to portfolio

* add e-Manifest service documentation to portfolio

* add attribute to freepik

* down sample logo

* replace VITE_API_URL wit VITE_SITE_URL which is more flexible

* use bucket URL to retrieve static content

* remove font awesome

* fix test specs (yeah we're testing details instead, not great)

* fix package-lock

.env.production

@@ -1 +1 @@
-VITE_API_URL=https://dpgraham.com/api
+VITE_SITE_URL=https://dpgraham.com/

.env.staging

@@ -1 +1 @@
-VITE_API_URL=https://dev.dpgraham.com/api
+VITE_SITE_URL=https://dev.dpgraham.com/

.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 .idea
+*-key.json
 
 # dependencies
 /node_modules

.run/start.run.xml

@@ -1,14 +1,14 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json" />
-    <command value="run" />
-    <scripts>
-      <script value="start" />
-    </scripts>
-    <node-interpreter value="project" />
-    <envs>
-      <env name="VITE_API_URL" value="https://dev.dpgraham.com/api" />
-    </envs>
-    <method v="2" />
-  </configuration>
+    <configuration default="false" name="start" type="js.build_tools.npm" nameIsGenerated="true">
+        <package-json value="$PROJECT_DIR$/package.json"/>
+        <command value="run"/>
+        <scripts>
+            <script value="start"/>
+        </scripts>
+        <node-interpreter value="project"/>
+        <envs>
+            <env name="VITE_SITE_URL" value="https://dev.dpgraham.com/"/>
+        </envs>
+        <method v="2"/>
+    </configuration>
 </component>

docs/configuration.md

@@ -2,6 +2,6 @@
 
 dpgraham-client expects these environment variables to be set:
 
-- `VITE_API_URL` - The URL of the dpgraham-server restful API.
-    - example value: `http://localhost:3000/api/`
-    - example value: `https://dpgraham.com/api` 
+- `VITE_SITE_URL` - The base protocol/hostname/URL of the site
+    - example value: `http://localhost:3000/`
+    - example value: `https://dpgraham.com/` 

package.json

@@ -15,12 +15,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "5.14.7",
+    "@mui/icons-material": "5.14.3",
     "@mui/material": "5.14.5",
     "axios": "^1.4.0",
     "react": "^18.2.0",

src/components/Nav/AppHeader.tsx

@@ -42,7 +42,9 @@ export function AppHeader({
             style={{ backgroundColor: iconBG }}
           >
             <img
-              src="/rp_bg_trans.png"
+              src={`${
+                import.meta.env.VITE_SITE_URL
+              }/static/images/rp_bg_trans.png`}
               width={"60"}
               height={"50"}
               alt="DPGraham"

src/components/article/MarkdownArticle.tsx

@@ -1,6 +1,4 @@
-import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Card, CardContent, Container } from "@mui/material";
+import { Card, CardContent, CircularProgress, Container } from "@mui/material";
 import { DpgPageError } from "components/DpgError";
 import { DpgMarkdown } from "components/DpgMarkdown";
 import { Article } from "features/Articles";
@@ -23,10 +21,7 @@ export function MarkdownArticle() {
           <CardContent>
             {loading ? (
               <h1 className="d-flex justify-content-center bg-transparent py-3">
-                <FontAwesomeIcon
-                  className="fa-spin text-muted"
-                  icon={faCircleNotch}
-                />
+                <CircularProgress />
               </h1>
             ) : article ? (
               <DpgMarkdown article={article} />

src/env.d.ts

@@ -4,7 +4,7 @@
 // https://vitejs.dev/guide/env-and-mode.html#intellisense-for-typescript
 
 interface ImportMetaEnv {
-  readonly VITE_API_URL: string;
+  readonly VITE_SITE_URL: string;
   // more env variables...
 }
 

src/features/AboutMe/AboutMe.spec.tsx

@@ -5,7 +5,7 @@ import React from "react";
 describe("About Me", () => {
   it("renders", () => {
     render(<AboutMe />);
-    const titleElement = screen.getByText(/coming soon/i);
+    const titleElement = screen.getByText(/Not all who wonder all lost.../i);
     expect(titleElement).toBeInTheDocument();
   });
 });