feat(front): complets cv collection page/route pattern, components, a…

…nd data shapers (#834) Closes: #834
dgrebb · Nov 14, 2023 · 5be482a · 5be482a
1 parent 2252a36
commit 5be482a
Show file tree

Hide file tree

Showing 23 changed files with 399 additions and 53 deletions.
diff --git a/.github/workflows/bd-fe.yml b/.github/workflows/bd-fe.yml
@@ -39,7 +39,11 @@ on:
         required: true
       PUBLIC_API_PATH_CV_PAGE:
         required: true
-      PUBLIC_API_PATH_POSITIONS:
+      PUBLIC_API_LANDING_PAGE_PARTIAL:
+        required: true
+      PUBLIC_API_CV_COLLECTION_PARAMS:
+        required: true
+      PUBLIC_API_CV_PATH_LANDING_POSITION_LISTING:
         required: true
       API_KEY:
         required: true
@@ -111,6 +115,9 @@ jobs:
           echo PUBLIC_API_PATH_CATEGORY='${{ secrets.PUBLIC_API_PATH_CATEGORY }}' >> front/.env
           echo PUBLIC_CATEGORY_PAGE_PARAMS='${{ secrets.PUBLIC_CATEGORY_PAGE_PARAMS }}' >> front/.env
           echo PUBLIC_API_PATH_CV_PAGE='${{ secrets.PUBLIC_API_PATH_CV_PAGE }}' >> front/.env
+          echo PUBLIC_API_CV_PATH_LANDING_POSITION_LISTING='${{ secrets.PUBLIC_API_CV_PATH_LANDING_POSITION_LISTING }}' >> front/.env
+          echo PUBLIC_API_LANDING_PAGE_PARTIAL='${{ secrets.PUBLIC_API_LANDING_PAGE_PARTIAL }}' >> front/.env
+          echo PUBLIC_API_CV_COLLECTION_PARAMS='${{ secrets.PUBLIC_API_CV_COLLECTION_PARAMS }}' >> front/.env
           echo PUBLIC_API_PATH_POSITIONS='${{ secrets.PUBLIC_API_PATH_POSITIONS }}' >> front/.env
           echo API_KEY=${{ secrets.API_KEY }} >> front/.env
           echo PUBLIC_SENTRY_DSN=${{ secrets.PUBLIC_SENTRY_DSN }} >> front/.env

diff --git a/.github/workflows/bdt-fe.yml b/.github/workflows/bdt-fe.yml
@@ -47,7 +47,9 @@ jobs:
       PUBLIC_API_PATH_CATEGORY: ${{ secrets.PUBLIC_API_PATH_CATEGORY }}
       PUBLIC_CATEGORY_PAGE_PARAMS: ${{ secrets.PUBLIC_CATEGORY_PAGE_PARAMS }}
       PUBLIC_API_PATH_CV_PAGE: ${{ secrets.PUBLIC_API_PATH_CV_PAGE }}
-      PUBLIC_API_PATH_POSITIONS: ${{ secrets.PUBLIC_API_PATH_POSITIONS }}
+      PUBLIC_API_LANDING_PAGE_PARTIAL: ${{ secrets.PUBLIC_API_LANDING_PAGE_PARTIAL }}
+      PUBLIC_API_CV_COLLECTION_PARAMS: ${{ secrets.PUBLIC_API_CV_COLLECTION_PARAMS }}
+      PUBLIC_API_CV_PATH_LANDING_POSITION_LISTING: ${{ secrets.PUBLIC_API_CV_PATH_LANDING_POSITION_LISTING }}
       API_KEY: ${{ secrets.API_KEY }}
       PUBLIC_SENTRY_DSN: ${{ secrets.PUBLIC_SENTRY_DSN }}
       PUBLIC_ENV: ${{ secrets.PUBLIC_ENV }}

diff --git a/front/src/lib/_utils/shape-shifters/index.js b/front/src/lib/_utils/shape-shifters/index.js
@@ -1,3 +1,8 @@
+export { shapeAwardData } from './shapeAwardData.js';
+export { shapeCertificationData } from './shapeCertificationData.js';
+export { shapeClassificationData } from './shapeClassificationData.js';
+export { shapeIndustryData } from './shapeIndustryData.js';
+export { shapeOrganizationData } from './shapeOrganizationData.js';
 export { shapePositionData } from './shapePositionData.js';
 export { shapeProjectData } from './shapeProjectData.js';
 export { shapeSkillData } from './shapeSkillData.js';
diff --git a/front/src/lib/_utils/shape-shifters/shapeAwardData.js b/front/src/lib/_utils/shape-shifters/shapeAwardData.js
@@ -0,0 +1,32 @@
+export async function shapeAwardData(data) {
+  let award,
+    slug,
+    URL,
+    date,
+    summary,
+    body,
+    seo,
+    positions,
+    projects = false;
+
+  award = { slug, URL, date, summary, body, seo, positions, projects } =
+    data[0].attributes;
+
+  var pageMeta = {
+    ...seo,
+    type: 'website',
+    metaTitle: seo?.metaTitle || award,
+  };
+
+  /**
+   * Isolates the `metaImage` object properties we care about
+   */
+  pageMeta.metaImage = pageMeta?.metaImage?.data?.attributes || false;
+
+  return {
+    award: {
+      ...award,
+    },
+    pageMeta,
+  };
+}
diff --git a/front/src/lib/_utils/shape-shifters/shapeCertificationData.js b/front/src/lib/_utils/shape-shifters/shapeCertificationData.js
@@ -0,0 +1,49 @@
+export async function shapeCertificationData(data) {
+  let certification,
+    seo,
+    name,
+    hero,
+    start,
+    end,
+    certificationSlug,
+    summary,
+    body,
+    artifacts,
+    skills,
+    organizations,
+    industries,
+    awards = false;
+
+  certification = {
+    seo,
+    name,
+    hero,
+    start,
+    end,
+    slug: certificationSlug,
+    summary,
+    body,
+    artifacts,
+    skills,
+    organizations,
+    industries,
+    awards,
+  } = data[0].attributes;
+
+  var pageMeta = {
+    ...seo,
+    type: 'website',
+    metaTitle: seo?.metaTitle || name,
+  };
+
+  /**
+   * Isolates the `metaImage` object properties we care about
+   */
+  pageMeta.metaImage =
+    pageMeta?.metaImage?.data?.attributes || hero?.data?.attributes || false;
+
+  return {
+    certification,
+    pageMeta,
+  };
+}
diff --git a/front/src/lib/_utils/shape-shifters/shapeClassificationData.js b/front/src/lib/_utils/shape-shifters/shapeClassificationData.js
@@ -0,0 +1,49 @@
+export async function shapeClassificationData(data) {
+  let classification,
+    seo,
+    name,
+    hero,
+    start,
+    end,
+    classificationSlug,
+    summary,
+    body,
+    artifacts,
+    skills,
+    organizations,
+    industries,
+    awards = false;
+
+  classification = {
+    seo,
+    name,
+    hero,
+    start,
+    end,
+    slug: classificationSlug,
+    summary,
+    body,
+    artifacts,
+    skills,
+    organizations,
+    industries,
+    awards,
+  } = data[0].attributes;
+
+  var pageMeta = {
+    ...seo,
+    type: 'website',
+    metaTitle: seo?.metaTitle || name,
+  };
+
+  /**
+   * Isolates the `metaImage` object properties we care about
+   */
+  pageMeta.metaImage =
+    pageMeta?.metaImage?.data?.attributes || hero?.data?.attributes || false;
+
+  return {
+    classification,
+    pageMeta,
+  };
+}
diff --git a/front/src/lib/_utils/shape-shifters/shapeIndustryData.js b/front/src/lib/_utils/shape-shifters/shapeIndustryData.js
@@ -0,0 +1,38 @@
+export async function shapeIndustryData(data) {
+  let industry,
+    seo,
+    industrySlug,
+    summary,
+    skills,
+    organizations,
+    positions,
+    projects,
+    body = false;
+
+  industry = {
+    seo,
+    industrySlug,
+    summary,
+    skills,
+    organizations,
+    positions,
+    projects,
+    body,
+  } = data[0].attributes;
+
+  var pageMeta = {
+    ...seo,
+    type: 'website',
+    metaTitle: seo?.metaTitle || industry,
+  };
+
+  /**
+   * Isolates the `metaImage` object properties we care about
+   */
+  pageMeta.metaImage = pageMeta?.metaImage?.data?.attributes || false;
+
+  return {
+    industry,
+    pageMeta,
+  };
+}
diff --git a/front/src/lib/_utils/shape-shifters/shapeOrganizationData.js b/front/src/lib/_utils/shape-shifters/shapeOrganizationData.js
@@ -0,0 +1,40 @@
+export async function shapeOrganizationData([data]) {
+  let organization,
+    name,
+    images,
+    URL,
+    summary,
+    projects,
+    positions,
+    skills,
+    body,
+    seo = false;
+
+  organization = {
+    name,
+    images,
+    URL,
+    summary,
+    projects,
+    positions,
+    skills,
+    body,
+  } = data.attributes;
+
+  var pageMeta = {
+    ...seo,
+    type: 'website',
+    metaTitle: seo?.metaTitle || name,
+  };
+
+  pageMeta.metaImage =
+    pageMeta?.metaImage?.data?.attributes || images?.data?.attributes || false;
+
+  return {
+    organization: {
+      ...organization,
+      images: images?.data?.attributes || false,
+    },
+    pageMeta,
+  };
+}
diff --git a/front/src/lib/_utils/shape-shifters/shapeProjectData.js b/front/src/lib/_utils/shape-shifters/shapeProjectData.js
@@ -19,8 +19,8 @@ export async function shapeProjectData(data) {
     seo,
     name,
     hero,
-    start,
-    end,
+    startDate,
+    endDate,
     projectSlug,
     summary,
     body,
@@ -34,8 +34,8 @@ export async function shapeProjectData(data) {
     seo,
     name,
     hero,
-    start,
-    end,
+    startDate,
+    endDate,
     slug: projectSlug,
     summary,
     body,

diff --git a/front/src/lib/_utils/shape-shifters/shapeSkillData.js b/front/src/lib/_utils/shape-shifters/shapeSkillData.js
@@ -5,7 +5,7 @@ export async function shapeSkillData(data) {
     summary,
     proficiency,
     icon,
-    classification,
+    classifications,
     projects,
     positions,
     organizations,
@@ -17,7 +17,7 @@ export async function shapeSkillData(data) {
     summary,
     proficiency,
     icon,
-    classification,
+    classifications,
     projects,
     positions,
     organizations,

diff --git a/front/src/lib/components/cv/Award.svelte b/front/src/lib/components/cv/Award.svelte
@@ -1,22 +1,23 @@
 <script>
   export let content;
   let {
-    title,
+    award,
     slug,
+    URL,
+    date,
     summary,
     body,
-    startDate,
-    endDate,
-    hero,
     seo,
-    skills: { data: skills },
+    positions: { data: positions },
     projects: { data: projects },
-  } = content.position;
+  } = content.award;
 </script>
 
-<h1>{title}</h1>
-{#each skills as { attributes: { skill, slug: skillSlug } }}
-  <h2><a href="/cv/skill/{skillSlug}">{skill}</a></h2>
+<h1 class="collection-title">Awards</h1>
+
+<h1>{award}</h1>
+{#each positions as { attributes: { title, slug: positionSlug } }}
+  <h2><a href="/cv/position/{positionSlug}">{title}</a></h2>
 {/each}
 
 {#each projects as { attributes: { name, slug: projectSlug } }}

diff --git a/front/src/lib/components/cv/Certification.svelte b/front/src/lib/components/cv/Certification.svelte
@@ -10,15 +10,12 @@
     hero,
     seo,
     skills: { data: skills },
-    projects: { data: projects },
-  } = content.position;
+  } = content.certification;
 </script>
 
+<h1 class="collection-title">Certifcations</h1>
+
 <h1>{title}</h1>
 {#each skills as { attributes: { skill, slug: skillSlug } }}
   <h2><a href="/cv/skill/{skillSlug}">{skill}</a></h2>
 {/each}
-
-{#each projects as { attributes: { name, slug: projectSlug } }}
-  <h2><a href="/cv/project/{projectSlug}">{name}</a></h2>
-{/each}
diff --git a/front/src/lib/components/cv/Classification.svelte b/front/src/lib/components/cv/Classification.svelte
@@ -0,0 +1,30 @@
+<script>
+  export let content;
+
+  let {
+    name,
+    slug: classificationSlug,
+    summary,
+    skills: { data: skills },
+    seo,
+  } = content.classification;
+</script>
+
+<h1>{name}</h1>
+{#if summary}
+  <p>{summary}</p>
+{/if}
+
+<h1 class="collection-title">Trades</h1>
+
+<!-- TODO: each of these should be placed in a single component and passed the data, or just the collection name -->
+{#if skills.length}
+  <h2>skills</h2>
+  <ul class="collection-attributes">
+    {#each skills as { attributes: { skill, slug: skillSlug } }}
+      <li class="attribute">
+        <a href="/cv/skill/{skillSlug}">{skill}</a>
+      </li>
+    {/each}
+  </ul>
+{/if}