feat: add glossary

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.filter((term) => term.slug === slug)[0];
+
+  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,72 @@
+/* GLOSSARY TERM CARD */
+
+.glossary-term__card {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	gap: .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: .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(-.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: .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: .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%;
+	}
+}