feat: add glossary (#529)

* feat: update navigation

* feat: update navigation / mobile

* feat: optimize mobile

* design: make nav dropdown wider

* chore: change Glossary name and order

* feat: add glossary page

* feat: add glossaryTerms.json

* feat: add page header and search input styling

* feat: add fuzzy search functionality

* feat: add GlossaryTerm card

* feat: sort alphabetically

* feat: improve styling

* feat: add search params

* feat: add finops glossary page

* feat: add BackButton to GlossaryPage

* feat: desing enhancements

* enhance: use slug in place of href

* enhance: search input design

* fix: exclude DocSearch-Input in components.css

* enhance: add Kbd in search input

* enhance: make search input wide on smaller res

* fix: safari drowdown button margin

* enhance: add book icon to definition

* enhance: make term link text explicit

* seo: add better page descriptions

* enhance: make term page white bg

* enhance: make search page white bg

* fix: hover triggers

* enahnce: no results design

* enhance: add hover over to nav dropdown

* enhance: animations

* fix: naming

* fix: h3

* feat: add cta

* fix: formatting

* chore: improve alignment

* chore: add content

* chore: add react-markdown

* chore: improve styling

* chore: add images

* Fixing up some text

* chore: add images

* fix: bad rebase

* fix: typos

* chore: use flex-start instead of start

* fix: build and refactor pages

* design: cta copy size

* Apply suggestions from code review

Co-authored-by: Vadim Golub <[email protected]>

* chore: formatting

* chore: add terraform logo

---------

Co-authored-by: Hassan Hosseini <[email protected]>
Co-authored-by: Vadim Golub <[email protected]>

package.json

@@ -23,17 +23,20 @@
     "@docusaurus/preset-classic": "2.2.0",
     "@docusaurus/theme-classic": "2.2.0",
     "@docusaurus/theme-common": "2.2.0",
+    "@headlessui/react": "^1.7.16",
     "@mdx-js/react": "^1.6.17",
     "@react-spring/parallax": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "clsx": "^1.1.1",
     "docusaurus-plugin-plausible": "0.0.5",
     "dotenv": "^16.3.1",
+    "fuse.js": "^6.6.2",
     "prettier": "^2.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-helmet-async": "^1.3.0",
+    "react-markdown": "^8.0.7",
     "remark-external-links": "^8.0.0"
   },
   "browserslist": {

src/components/BackButton.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ArrowIcon from './icons/ArrowIcon';
+
+const BackButton = ({ toPath, toText }) => (
+  <a href={toPath} className="back-button" rel="noopener noreferrer">
+    <ArrowIcon />
+    Back to {toText}
+  </a>
+);
+
+export default BackButton;

src/components/GlossaryPage/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PageLayout from '../PageLayout';
+import GlossaryTermPageIntro from '../GlossaryTermPage/GlossaryTermPageIntro';
+import GlossaryTermPage from '../GlossaryTermPage';
+import terms from '../GlossarySearch/glossaryTerms.json';
+import GlossaryTermPageAside from '../GlossaryTermPage/GlossaryTermPageAside';
+import GlossaryTermPageContent from '../GlossaryTermPage/GlossaryTermPageContent';
+
+const Term = ({ slug }: { slug: string }) => {
+  const term = terms.find((term) => term.slug === slug.toLowerCase());
+
+  if (!term) {
+    return null;
+  }
+
+  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;

src/components/GlossarySearch/GlossaryCard.css

@@ -0,0 +1,69 @@
+/* GLOSSARY TERM CARD */
+
+.glossary-term__card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 1rem 1.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--border-light);
+}
+
+.glossary-term__card-title {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+  display: flex;
+  gap: 0.5rem;
+  align-items: baseline;
+}
+
+/* Hover animations */
+.glossary-term__card-title,
+.glossary-term__card-description,
+.glossary-term__card-link .arrow-icon {
+  transition: all 0.2s ease-in-out;
+}
+
+.glossary-term__card:hover {
+  background-color: #fafafa;
+  transform: translateY(-0.25rem) scale(1.02);
+}
+
+.glossary-term__card:hover .glossary-term__card-description {
+  background-position: -100% 0;
+}
+
+.glossary-term__card-description {
+  background-size: 200%;
+  background-position: 0 0;
+  display: inline;
+  transition: 0.2s ease-in;
+}
+
+/* link */
+
+.glossary-term__card-link {
+  font-size: 1rem;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.325rem;
+  width: fit-content;
+}
+
+.glossary-term__card-link:hover .arrow-icon {
+  animation: slideRight 0.5s ease-in-out;
+}
+
+@keyframes slideRight {
+  50% {
+    transform: translateX(5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

src/components/GlossarySearch/GlossaryCard.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { GlossaryTermType } from './index';
+import './GlossaryCard.css';
+import ArrowIcon from '../icons/ArrowIcon';
+
+const GlossaryTerm = ({ term }: { term: GlossaryTermType }) => (
+  <div className="glossary-term__card">
+    <div>
+      <div className="glossary-term__card-header">
+        <h2 className="glossary-term__card-title">{term.termTitle}</h2>
+      </div>
+
+      <div className="glossary-term__card-description">{term.definition}</div>
+    </div>
+
+    {term.slug && (
+      <a
+        href={`/glossary/${term.slug}`}
+        className="glossary-term__card-link"
+        rel="noopener noreferrer"
+      >
+        More about {term.termTitle}
+        <ArrowIcon />
+      </a>
+    )}
+  </div>
+);
+export default GlossaryTerm;

src/components/GlossarySearch/GlossarySearch.css

@@ -0,0 +1,84 @@
+/* FINOPS GLOSSARY SEARCH PAGE */
+
+/* Intro */
+.glossary-search__intro-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  justify-content: center;
+}
+
+.glossary-search__intro-container .tagline {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+/* Content */
+.glossary-search__content-wrapper {
+  padding: 4rem 1.5rem;
+}
+
+.glossary-search__content-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  grid-gap: 1rem;
+}
+
+/* Glossary search */
+
+.finops-glossary__search {
+  position: relative;
+  border-radius: 3rem;
+  padding: 2px;
+  width: 50%;
+  margin: 0 auto;
+}
+
+input.glossary-search__input {
+  width: 100%;
+  padding: 1.5rem 2rem 1.5rem 4rem;
+  background-color: #2a2a5b;
+  border-radius: 3rem;
+}
+
+.finops-glossary__search > .search-icon {
+  position: absolute;
+  top: 50%;
+  left: 2rem;
+  transform: translateY(-50%);
+}
+
+/* Search clear */
+.glossary-search__clear-button {
+  position: absolute;
+  top: 50%;
+  right: 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transform: translateY(-50%);
+  background-color: #1e1e48;
+}
+
+/* Hide the html5 button */
+.intro input[type='search']::-webkit-search-decoration,
+.intro input[type='search']::-webkit-search-cancel-button,
+.intro input[type='search']::-webkit-search-results-button,
+.intro input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+/* Search no results */
+.finops-glossary__search-no-results {
+  padding: 1.5rem;
+  background-color: var(--nu10);
+  border: 1px solid var(--border-light);
+  border-radius: 8px;
+}
+
+@media screen and (max-width: 1080px) {
+  .finops-glossary__search {
+    width: 100%;
+  }
+}