chore: add content

infracost · Aug 21, 2023 · 33a2dca · 33a2dca
1 parent bd6c06d
commit 33a2dca
Show file tree

Hide file tree

Showing 13 changed files with 492 additions and 80 deletions.
diff --git a/src/components/GlossarySearch/GlossaryCard.tsx b/src/components/GlossarySearch/GlossaryCard.tsx
@@ -9,19 +9,19 @@ const GlossaryTerm = ({ term }: { term: GlossaryTermType }) => (
     <div className="glossary-term__card-header">
       <h2 className="glossary-term__card-title">
         <BookIcon />
-        {term.key}
+        {term.termTitle}
       </h2>
     </div>
 
-    <div className="glossary-term__card-description">{term.description}</div>
+    <div className="glossary-term__card-description">{term.definition}</div>
 
     {term.slug && (
       <a
         href={`/glossary/${term.slug}`}
         className="glossary-term__card-link"
         rel="noopener noreferrer"
       >
-        More about {term.key}
+        More about {term.termTitle}
         <ArrowIcon />
       </a>
     )}

diff --git a/src/components/GlossarySearch/glossaryTerms.json b/src/components/GlossarySearch/glossaryTerms.json
diff --git a/src/components/GlossarySearch/index.tsx b/src/components/GlossarySearch/index.tsx
@@ -12,16 +12,17 @@ type GlossaryPageSection = {
 };
 
 export type GlossaryTermType = {
-  key: string;
+  termTitle: string;
+  pageTitle: string;
   slug: string | null;
-  description: string;
+  definition: string;
   sections?: GlossaryPageSection[];
 };
 
 const GlossarySearch = () => {
   const { results, searchValue, setSearchValue } = useSearch<GlossaryTermType>({
     dataSet: terms,
-    keys: ['key', 'description'],
+    keys: ['termTitle', 'description'],
   });
 
   const handleInputChange = (e) => {
@@ -84,7 +85,7 @@ const GlossarySearch = () => {
           {results.length > 0 ? (
             <div className="glossary-search__content-list">
               {sortTermsAlphabetically(results).map((term) => (
-                <React.Fragment key={term.key}>
+                <React.Fragment key={term.termTitle}>
                   <GlossaryTerm term={term} />
                 </React.Fragment>
               ))}
@@ -103,7 +104,7 @@ const GlossarySearch = () => {
 };
 
 function sortTermsAlphabetically(terms: GlossaryTermType[]): GlossaryTermType[] {
-  return terms.slice().sort((a, b) => a.key.localeCompare(b.key));
+  return terms.slice().sort((a, b) => a.termTitle.localeCompare(b.termTitle));
 }
 
 export default GlossarySearch;
diff --git a/src/components/GlossaryTermPage/GlossaryTermPage.css b/src/components/GlossaryTermPage/GlossaryTermPage.css
@@ -1,6 +1,6 @@
 /* GLOSSARY TERM PAGE */
 
-.glossary-term__page {
+.glossary-term__page-container {
 	display: grid;
 	grid-template-columns: 3fr 1fr;
 }

diff --git a/src/components/GlossaryTermPage/GlossaryTermPageContent.tsx b/src/components/GlossaryTermPage/GlossaryTermPageContent.tsx
@@ -8,7 +8,7 @@ const GlossaryTermPageContent = ({ term }: { term: GlossaryTermType }) => (
       <Section
         title={section.title}
         content={section.paragraphs}
-        key={`${term.key}-section-${index}}`}
+        key={`${term.slug}-section-${index}}`}
       />
     ))}
     <Cta />

diff --git a/src/components/GlossaryTermPage/index.tsx b/src/components/GlossaryTermPage/index.tsx
@@ -4,7 +4,7 @@ import './GlossaryTermPage.css';
 
 const GlossaryTermPage = ({ children }: { children: ReactElement | ReactElement[] }) => (
   <main className="white-bg">
-    <div className="glossary-term__page container">{children}</div>
+    <div className="glossary-term__page-container container">{children}</div>
   </main>
 );
 

diff --git a/src/pages/glossary/amortized-costs.tsx b/src/pages/glossary/amortized-costs.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PageLayout from '../../components/PageLayout';
+import GlossaryTermPageIntro from '../../components/GlossaryTermPage/GlossaryTermPageIntro';
+import GlossaryTermPage from '../../components/GlossaryTermPage';
+import terms from '../../components/GlossarySearch/glossaryTerms.json';
+import GlossaryTermPageAside from '../../components/GlossaryTermPage/GlossaryTermPageAside';
+import GlossaryTermPageContent from '../../components/GlossaryTermPage/GlossaryTermPageContent';
+
+const Term = () => {
+  const term = terms.filter((term) => term.slug === 'amortized-costs')[0];
+
+  return (
+    <PageLayout
+      title={`${term.termTitle} - Infracost Glossary`}
+      description={term.pageTitle}
+      pageClass="glossary-term__page"
+      hideCTA={true}
+      noIndex={false}
+    >
+      <GlossaryTermPageIntro title={term.pageTitle} toPath="/glossary" toText="FinOps Glossary" />
+      <GlossaryTermPage>
+        <GlossaryTermPageContent term={term} />
+        <GlossaryTermPageAside term={term} />
+      </GlossaryTermPage>
+    </PageLayout>
+  );
+};
+
+export default Term;
diff --git a/src/pages/glossary/aws.tsx b/src/pages/glossary/aws.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PageLayout from '../../components/PageLayout';
+import GlossaryTermPageIntro from '../../components/GlossaryTermPage/GlossaryTermPageIntro';
+import GlossaryTermPage from '../../components/GlossaryTermPage';
+import terms from '../../components/GlossarySearch/glossaryTerms.json';
+import GlossaryTermPageAside from '../../components/GlossaryTermPage/GlossaryTermPageAside';
+import GlossaryTermPageContent from '../../components/GlossaryTermPage/GlossaryTermPageContent';
+
+const Term = () => {
+  const term = terms.filter((term) => term.slug === 'aws')[0];
+
+  return (
+    <PageLayout
+      title={`${term.termTitle} - Infracost Glossary`}
+      description={term.pageTitle}
+      pageClass="glossary-term__page"
+      hideCTA={true}
+      noIndex={false}
+    >
+      <GlossaryTermPageIntro title={term.pageTitle} toPath="/glossary" toText="FinOps Glossary" />
+      <GlossaryTermPage>
+        <GlossaryTermPageContent term={term} />
+        <GlossaryTermPageAside term={term} />
+      </GlossaryTermPage>
+    </PageLayout>
+  );
+};
+
+export default Term;
diff --git a/src/pages/glossary/azure.tsx b/src/pages/glossary/azure.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PageLayout from '../../components/PageLayout';
+import GlossaryTermPageIntro from '../../components/GlossaryTermPage/GlossaryTermPageIntro';
+import GlossaryTermPage from '../../components/GlossaryTermPage';
+import terms from '../../components/GlossarySearch/glossaryTerms.json';
+import GlossaryTermPageAside from '../../components/GlossaryTermPage/GlossaryTermPageAside';
+import GlossaryTermPageContent from '../../components/GlossaryTermPage/GlossaryTermPageContent';
+
+const Term = () => {
+  const term = terms.filter((term) => term.slug === 'azure')[0];
+
+  return (
+    <PageLayout
+      title={`${term.termTitle} - Infracost Glossary`}
+      description={term.pageTitle}
+      pageClass="glossary-term__page"
+      hideCTA={true}
+      noIndex={false}
+    >
+      <GlossaryTermPageIntro title={term.pageTitle} toPath="/glossary" toText="FinOps Glossary" />
+      <GlossaryTermPage>
+        <GlossaryTermPageContent term={term} />
+        <GlossaryTermPageAside term={term} />
+      </GlossaryTermPage>
+    </PageLayout>
+  );
+};
+
+export default Term;
diff --git a/src/pages/glossary/chargeback.tsx b/src/pages/glossary/chargeback.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PageLayout from '../../components/PageLayout';
+import GlossaryTermPageIntro from '../../components/GlossaryTermPage/GlossaryTermPageIntro';
+import GlossaryTermPage from '../../components/GlossaryTermPage';
+import terms from '../../components/GlossarySearch/glossaryTerms.json';
+import GlossaryTermPageAside from '../../components/GlossaryTermPage/GlossaryTermPageAside';
+import GlossaryTermPageContent from '../../components/GlossaryTermPage/GlossaryTermPageContent';
+
+const Term = () => {
+  const term = terms.filter((term) => term.slug === 'chargeback')[0];
+
+  return (
+    <PageLayout
+      title={`${term.termTitle} - Infracost Glossary`}
+      description={term.pageTitle}
+      pageClass="glossary-term__page"
+      hideCTA={true}
+      noIndex={false}
+    >
+      <GlossaryTermPageIntro title={term.pageTitle} toPath="/glossary" toText="FinOps Glossary" />
+      <GlossaryTermPage>
+        <GlossaryTermPageContent term={term} />
+        <GlossaryTermPageAside term={term} />
+      </GlossaryTermPage>
+    </PageLayout>
+  );
+};
+
+export default Term;
diff --git a/src/pages/glossary/cloud-computing.tsx b/src/pages/glossary/cloud-computing.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PageLayout from '../../components/PageLayout';
+import GlossaryTermPageIntro from '../../components/GlossaryTermPage/GlossaryTermPageIntro';
+import GlossaryTermPage from '../../components/GlossaryTermPage';
+import terms from '../../components/GlossarySearch/glossaryTerms.json';
+import GlossaryTermPageAside from '../../components/GlossaryTermPage/GlossaryTermPageAside';
+import GlossaryTermPageContent from '../../components/GlossaryTermPage/GlossaryTermPageContent';
+
+const Term = () => {
+  const term = terms.filter((term) => term.slug === 'cloud-computing')[0];
+
+  return (
+    <PageLayout
+      title={`${term.termTitle} - Infracost Glossary`}
+      description={term.pageTitle}
+      pageClass="glossary-term__page"
+      hideCTA={true}
+      noIndex={false}
+    >
+      <GlossaryTermPageIntro title={term.pageTitle} toPath="/glossary" toText="FinOps Glossary" />
+      <GlossaryTermPage>
+        <GlossaryTermPageContent term={term} />
+        <GlossaryTermPageAside term={term} />
+      </GlossaryTermPage>
+    </PageLayout>
+  );
+};
+
+export default Term;
diff --git a/src/pages/glossary/cost-anomalies.tsx b/src/pages/glossary/cost-anomalies.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PageLayout from '../../components/PageLayout';
+import GlossaryTermPageIntro from '../../components/GlossaryTermPage/GlossaryTermPageIntro';
+import GlossaryTermPage from '../../components/GlossaryTermPage';
+import terms from '../../components/GlossarySearch/glossaryTerms.json';
+import GlossaryTermPageAside from '../../components/GlossaryTermPage/GlossaryTermPageAside';
+import GlossaryTermPageContent from '../../components/GlossaryTermPage/GlossaryTermPageContent';
+
+const Term = () => {
+  const term = terms.filter((term) => term.slug === 'cost-anomalies')[0];
+
+  return (
+    <PageLayout
+      title={`${term.termTitle} - Infracost Glossary`}
+      description={term.pageTitle}
+      pageClass="glossary-term__page"
+      hideCTA={true}
+      noIndex={false}
+    >
+      <GlossaryTermPageIntro title={term.pageTitle} toPath="/glossary" toText="FinOps Glossary" />
+      <GlossaryTermPage>
+        <GlossaryTermPageContent term={term} />
+        <GlossaryTermPageAside term={term} />
+      </GlossaryTermPage>
+    </PageLayout>
+  );
+};
+
+export default Term;
diff --git a/src/pages/glossary/finops.tsx b/src/pages/glossary/finops.tsx
@@ -6,28 +6,24 @@ import terms from '../../components/GlossarySearch/glossaryTerms.json';
 import GlossaryTermPageAside from '../../components/GlossaryTermPage/GlossaryTermPageAside';
 import GlossaryTermPageContent from '../../components/GlossaryTermPage/GlossaryTermPageContent';
 
-const Finops = () => {
-  const finops = terms.filter((term) => term.key === 'FinOps')[0];
+const Term = () => {
+  const term = terms.filter((term) => term.slug === 'finops')[0];
 
   return (
     <PageLayout
-      title="FinOps - Infracost Glossary"
-      description="What is FinOps in cloud computing?"
-      pageClass="finops"
+      title={`${term.termTitle} - Infracost Glossary`}
+      description={term.pageTitle}
+      pageClass="glossary-term__page"
       hideCTA={true}
       noIndex={false}
     >
-      <GlossaryTermPageIntro
-        title=" FinOps: Bridging Finance and Operations in the Cloud Era"
-        toPath="/glossary"
-        toText="FinOps Glossary"
-      />
+      <GlossaryTermPageIntro title={term.pageTitle} toPath="/glossary" toText="FinOps Glossary" />
       <GlossaryTermPage>
-        <GlossaryTermPageContent term={finops} />
-        <GlossaryTermPageAside term={finops} />
+        <GlossaryTermPageContent term={term} />
+        <GlossaryTermPageAside term={term} />
       </GlossaryTermPage>
     </PageLayout>
   );
 };
 
-export default Finops;
+export default Term;