+
+ {heroImage && 
}
+
+
+
+
+ {publishDate}
+
-
- );
-};
-
-interface TwitterLargeCardProps {
- post: PreviewPost;
- postHtml: string;
- height: number;
- width: number;
- authorImagesStrs: string[];
- unicornUtterancesHead: string;
-}
-
-const TwitterLargeCard = ({
- post,
- postHtml,
- height,
- width,
- authorImagesStrs,
- unicornUtterancesHead,
-}: TwitterLargeCardProps) => {
- const title = post.title;
- const [firstHalfTitle, secondHalfTitle] = splitSentence(title);
-
- return (
-
-
-
-
-
-
-
- );
-};
-
-export default TwitterLargeCard;
diff --git a/src/components/Author.astro b/src/components/Author.astro
new file mode 100644
index 00000000..3b29e0e7
--- /dev/null
+++ b/src/components/Author.astro
@@ -0,0 +1,18 @@
+---
+export interface Props {
+ name: string;
+ href: string;
+}
+
+const { name, href } = Astro.props;
+---
+
+
+
+
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
new file mode 100644
index 00000000..2725363a
--- /dev/null
+++ b/src/components/BaseHead.astro
@@ -0,0 +1,38 @@
+---
+import '../styles/blog.css';
+
+export interface Props {
+ title: string;
+ description: string;
+ permalink: string;
+}
+const { title, description, permalink } = Astro.props;
+---
+
+
+
+
+
+
+
+
-
-
- - {firstHalfTitle} - {secondHalfTitle} -
-
-
-
- {authorImagesStrs.map((authorStr) => (
- 
- ))}
-
-
- 
-
- unicorn-utterances.com
-
+
+
+
+
+
diff --git a/src/components/BlogPostPreview.astro b/src/components/BlogPostPreview.astro
new file mode 100644
index 00000000..f935ff8b
--- /dev/null
+++ b/src/components/BlogPostPreview.astro
@@ -0,0 +1,55 @@
+---
+export interface Props {
+ post: any;
+}
+
+const { post } = Astro.props;
+---
+
+{post.frontmatter.publishDate}
+{post.frontmatter.title}
+{post.frontmatter.description}
+ Read more +
+
+
+
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
new file mode 100644
index 00000000..a9292753
--- /dev/null
+++ b/src/components/Logo.astro
@@ -0,0 +1,86 @@
+
+
+
diff --git a/src/components/analytics-link/analytics-link.tsx b/src/components/analytics-link/analytics-link.tsx
deleted file mode 100644
index 359a4f45..00000000
--- a/src/components/analytics-link/analytics-link.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Source ported from a Gatsby plugin:
- * @see https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-google-gtag/src/index.js
- */
-import * as ga from "utils/ga";
-import {
- forwardRef,
- AnchorHTMLAttributes,
- MouseEventHandler,
- PropsWithChildren,
-} from "react";
-
-interface AnalyticsLinkProps {
- onClick?: MouseEventHandler;
- target?: string;
- // May be passed by `ref`
- href?: string;
- category: string;
-}
-
-export const AnalyticsLink = forwardRef<
- HTMLAnchorElement,
- PropsWithChildren<
- AnalyticsLinkProps & AnchorHTMLAttributes
-
- );
-};
diff --git a/src/components/blog-post-layout/index.ts b/src/components/blog-post-layout/index.ts
deleted file mode 100644
index 82834bdb..00000000
--- a/src/components/blog-post-layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./blog-post-layout";
diff --git a/src/components/dark-light-button/dark-light-button.module.scss b/src/components/dark-light-button/dark-light-button.module.scss
deleted file mode 100644
index ff54b420..00000000
--- a/src/components/dark-light-button/dark-light-button.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.darkLightBtn {
- border-radius: 50% !important;
- height: 40px;
- width: 40px;
- padding: 0 !important;
-}
-
-.darkLightBtn svg {
- height: 30px;
- width: 30px;
-}
diff --git a/src/components/dark-light-button/dark-light-button.tsx b/src/components/dark-light-button/dark-light-button.tsx
deleted file mode 100644
index cfb17496..00000000
--- a/src/components/dark-light-button/dark-light-button.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-import DarkIcon from "assets/icons/dark.svg";
-import LightIcon from "assets/icons/light.svg";
-import btnStyles from "./dark-light-button.module.scss";
-import { ThemeContext } from "uu-constants";
-
-export const DarkLightButton = () => {
- const { colorMode, setColorMode } = React.useContext(ThemeContext);
-
- if (!colorMode) {
- return null;
- }
-
- return (
-
- );
-};
diff --git a/src/components/dark-light-button/index.ts b/src/components/dark-light-button/index.ts
deleted file mode 100644
index 3380b0c9..00000000
--- a/src/components/dark-light-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./dark-light-button";
diff --git a/src/components/filter-search-bar/filter-listbox/filter-listbox.module.scss b/src/components/filter-search-bar/filter-listbox/filter-listbox.module.scss
deleted file mode 100644
index ca9aabdd..00000000
--- a/src/components/filter-search-bar/filter-listbox/filter-listbox.module.scss
+++ /dev/null
@@ -1,180 +0,0 @@
-@import "../../../styles/vars";
-@import "../../../styles/utils";
-@import "../../../styles/text_styles";
-
-.container {
- display: flex;
- justify-content: flex-end;
-}
-
-.buttonContainer {
- position: relative;
- max-width: 100%;
-}
-
-$btnPadding: 6px 16px;
-
-@include until($endSmallScreenSize) {
- .buttonContainer {
- width: 100%;
- }
-
- .buttonContainer > .filterButton {
- //not the best way to write this but gets around media query specificity annoyances
- width: 100%;
- justify-content: left;
- }
-}
-
-.filterButton {
- cursor: pointer;
- appearance: none;
- max-width: 100%;
- display: flex;
- align-items: center;
- padding: $btnPadding;
- transition: color var(--animStyle) var(--animSpeed);
- color: var(--darkPrimary);
- border: none;
- background: transparent;
- z-index: 2;
- position: relative;
- overflow: hidden;
- flex-wrap: nowrap;
- white-space: nowrap;
- text-overflow: ellipsis;
- @extend %subheader-3;
-}
-
-.filterButton .textContainer {
- position: relative;
-}
-
-.filterButton .appliedTags,
-.filterButton .placeholder {
- position: absolute;
-}
-
-.filterButton .placeholder,
-.filterButton .appliedTags {
- transition: top 350ms var(--animStyle);
- top: 0;
- left: 0;
-}
-
-.appliedTags {
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-.placeholder:not(.show) {
- top: 40px;
-}
-
-.appliedTags:not(.show) {
- top: -40px;
-}
-
-.filterButton .icon {
- margin-right: 16px;
- flex-shrink: 0;
- height: 30px;
- width: 30px;
-}
-
-.listbox {
- outline: none;
- position: absolute;
- width: 100%;
- left: 0;
- top: 0;
- border-radius: var(--cardRadius);
- z-index: 1;
- margin: 0;
- padding: 0;
- overflow: hidden;
- border: 1px solid transparent;
- transition: background var(--animSpeed) var(--animStyle),
- box-shadow var(--animSpeed) var(--animStyle),
- border-color var(--animSpeed) var(--animStyle);
-}
-
-.listbox:not(.expanded):hover,
-.container.expanded .listbox,
-.container:not(.expanded) .filterButton:hover + .listbox {
- transition: background var(--animStyle) var(--animSpeed);
- background: var(--cardActiveBackground);
- box-shadow: var(--cardActiveBoxShadow);
-}
-
-.container:not(.expanded) .listbox.hasTags {
- border: var(--cardOutlineStyle);
-}
-
-.listbox .spacer {
- height: 8px;
-}
-
-.option:first-of-type {
- margin-top: -14px !important;
-}
-
-.option {
- display: flex;
- flex-wrap: nowrap;
- align-content: center;
- cursor: pointer;
- padding: 2px 0;
- margin: 2px 0;
- color: var(--lowImpactBlack);
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- transition: opacity var(--animSpeed) var(--animStyle),
- box-shadow 60ms var(--animStyle);
- border-radius: 4px;
-}
-
-.option svg {
- height: 22px;
- width: 22px;
- background: transparent;
- border-radius: 8px;
- -webkit-appearance: none;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- margin-right: 16px;
- flex-shrink: 0;
-}
-
-.option:not(.expanded) {
- opacity: 0;
- z-index: -100;
-}
-
-.option span {
- display: inline-flex;
- align-items: center;
-}
-
-.option.selected {
- transition: color var(--animStyle) var(--animSpeed);
- color: var(--darkPrimary);
-}
-
-.isKeyboard .option.active {
- box-shadow: 0 0 1px 1px var(--primary); //might be nice to have this be the selection thingy for everything if it's fine for a11y -adueppen
-}
-
-.option.active {
- color: var(--black);
-}
-
-.filterListHideContainer {
- margin-top: 48px;
- padding: $btnPadding;
- max-height: 50vh;
- overflow: auto;
-}
diff --git a/src/components/filter-search-bar/filter-listbox/filter-listbox.tsx b/src/components/filter-search-bar/filter-listbox/filter-listbox.tsx
deleted file mode 100644
index b532f07f..00000000
--- a/src/components/filter-search-bar/filter-listbox/filter-listbox.tsx
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * This is a hand-spun component to match the guidelines for a listbox ALA w3 guidelines
- * @see https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
- *
- * ✅ Escape - Collapse the dropdown
- * ✅ Up - Focus previous item
- * ✅ Down - Focus next item
- * ✅ Home - Goes to first item
- * ✅ End - Goes to last item
- * ✅ Space - Toggles selection of item
- * ✅ Shift + Down - Focuses and selects next item
- * ✅ Shift + Up - Focuses and selects previous item
- * ✅ Ctrl + Shift + Home - Selects from the focused option to start of list
- * ✅ Ctrl + Shift + End - Selects from the focused option to end of list
- * ✅ Ctrl + A - Toggles selection of all
- * ✅ Click outside this component to close
- * ✅ Close on `blur`
- */
-
-/**
- * "Filters"
- * Click to expand
- * Clicking filters won't do anything
- * After not expanded, show the filters by animating away "filters"
- * If nothing is selected, don't animate away "Filters"
- */
-
-import React, {
- useCallback,
- useContext,
- useEffect,
- useMemo,
- useState,
-} from "react";
-import classNames from "classnames";
-
-import filterStyles from "./filter-listbox.module.scss";
-
-import FilterIcon from "assets/icons/filter.svg";
-import CheckIcon from "assets/icons/check.svg";
-import UncheckIcon from "assets/icons/unchecked.svg";
-
-import {
- usePopoverCombobox,
- UseSelectableArrayInternalVal,
-} from "batteries-not-included/react/a11y";
-import { SearchAndFilterContext } from "uu-constants";
-import { useElementBounds } from "uu-utils";
-import { PostListContext } from "constants/post-list-context";
-
-interface FilterListItemProps {
- tag: UseSelectableArrayInternalVal;
- index: number;
- active: UseSelectableArrayInternalVal;
- expanded: boolean;
- selectIndex: (i: number, e: any, type: string) => void;
-}
-const FilterListItem = ({
- tag,
- index,
- active,
- expanded,
- selectIndex,
-}: FilterListItemProps) => {
- const liClassName = classNames(filterStyles.option, {
- [filterStyles.active]: active.index === index,
- [filterStyles.selected]: tag.selected,
- [filterStyles.expanded]: expanded,
- });
- return (
- {left}
- {center}
- {right}
-
-
- );
-};
diff --git a/src/components/filter-search-bar/filter-listbox/index.ts b/src/components/filter-search-bar/filter-listbox/index.ts
deleted file mode 100644
index a2dd3e58..00000000
--- a/src/components/filter-search-bar/filter-listbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./filter-listbox";
diff --git a/src/components/filter-search-bar/filter-search-bar.module.scss b/src/components/filter-search-bar/filter-search-bar.module.scss
deleted file mode 100644
index 1660a1c8..00000000
--- a/src/components/filter-search-bar/filter-search-bar.module.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import "../../styles/vars";
-@import "../../styles/utils";
-
-.iconContainer {
- display: flex;
- flex-wrap: wrap;
-}
-
-.iconContainer > * {
- flex-basis: 100%;
-}
-
-@include from($startMediumScreenSize) {
- .iconContainer {
- flex-wrap: nowrap;
- justify-content: space-between;
- align-items: center;
- }
-
- .iconContainer > * {
- flex-basis: 33%;
- width: 33%;
- flex-shrink: 0;
- }
-}
-
-@include until($endSmallScreenSize) {
- .midContainer {
- order: 1;
- margin: 0 0 8px;
- flex-basis: 100%;
- }
-
- .searchField,
- .filterField {
- flex-basis: calc(50% - 8px);
- max-width: calc(50% - 8px);
- }
- .searchField {
- margin-right: 4px;
- }
- .filterField {
- margin-left: 4px;
- }
-}
-
-@include until($endSmallScreenSize) {
- .searchField,
- .filterField {
- flex-basis: 100%;
- max-width: 100%;
- }
- .searchField {
- margin-right: 0;
- }
- .filterField {
- margin-left: 0;
- }
-}
-
-.midContainer {
- flex-grow: 1;
- display: flex;
- justify-content: center;
-}
diff --git a/src/components/filter-search-bar/filter-search-bar.tsx b/src/components/filter-search-bar/filter-search-bar.tsx
deleted file mode 100644
index 1d524316..00000000
--- a/src/components/filter-search-bar/filter-search-bar.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import styles from "./filter-search-bar.module.scss";
-import { SearchField } from "./search-field";
-import { FilterListbox } from "./filter-listbox";
-
-export const FilterSearchBar: React.FC
-
- Choose a tag to filter by:
-
-
-
- -
-
-
- {values.map((tag, index) => (
-
-
-
- );
-};
diff --git a/src/components/filter-search-bar/index.ts b/src/components/filter-search-bar/index.ts
deleted file mode 100644
index 0fae2427..00000000
--- a/src/components/filter-search-bar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./filter-search-bar";
diff --git a/src/components/filter-search-bar/search-field/index.ts b/src/components/filter-search-bar/search-field/index.ts
deleted file mode 100644
index afe844b1..00000000
--- a/src/components/filter-search-bar/search-field/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./search-field";
diff --git a/src/components/filter-search-bar/search-field/search-field.module.scss b/src/components/filter-search-bar/search-field/search-field.module.scss
deleted file mode 100644
index 49665a33..00000000
--- a/src/components/filter-search-bar/search-field/search-field.module.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-@import "../../../styles/vars";
-@import "../../../styles/utils";
-@import "../../../styles/text_styles";
-
-@include until($endSmallScreenSize) {
- .container {
- overflow: hidden;
- width: 100%;
- padding-bottom: 8px;
- }
-}
-
-.btn {
- display: flex;
- align-items: center;
- border-radius: var(--cardRadius);
- padding: 8px 16px 8px 15px;
- color: var(--darkPrimary);
- transition: background var(--animSpeed) var(--animStyle),
- box-shadow var(--animSpeed) var(--animStyle),
- color var(--animSpeed) var(--animStyle),
- border-color var(--animSpeed) var(--animStyle);
- border: 1px solid transparent;
- cursor: text;
-}
-
-.btn,
-.input,
-.input::placeholder {
- transition: color var(--animStyle) var(--animSpeed);
- color: var(--darkPrimary);
-}
-
-.btn:hover {
- background: color var(--animStyle) var(--animSpeed);
- background: var(--cardActiveBackground);
- box-shadow: var(--cardActiveBoxShadow);
-}
-
-.contentBtn {
- border: var(--cardOutlineStyle);
-}
-
-.input {
- background: none;
- border: none;
- border-bottom: 1px solid var(--darkPrimary);
- outline: none;
- min-width: 120px;
- position: absolute;
- top: 0;
- left: 0;
- @extend %subheader-3;
-}
-
-.input::placeholder {
- opacity: 1;
-}
-
-.inputContainer {
- width: 100%;
- position: relative;
- margin-left: 15px;
-}
-
-.icon {
- flex-shrink: 0;
- height: var(--filterBarIconSize);
- width: var(--filterBarIconSize);
-}
diff --git a/src/components/filter-search-bar/search-field/search-field.tsx b/src/components/filter-search-bar/search-field/search-field.tsx
deleted file mode 100644
index 78885667..00000000
--- a/src/components/filter-search-bar/search-field/search-field.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useCallback, useContext, useMemo, useState } from "react";
-import styles from "./search-field.module.scss";
-import classNames from "classnames";
-import SearchIcon from "assets/icons/search.svg";
-import { SearchAndFilterContext } from "uu-constants";
-import { useElementBounds } from "uu-utils";
-
-const placeholder = "Search";
-
-export const SearchField = ({ className }: { className?: string }) => {
- const { setSearchVal, searchVal } = useContext(SearchAndFilterContext);
- const [isFocused, setIsFocused] = useState(false);
-
- // Set the node reference for the input for click listening
- const [inputNode, setInputNode] = useState{children}
-
-
- );
-};
diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts
deleted file mode 100644
index eec9d1e6..00000000
--- a/src/components/layout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./layout";
diff --git a/src/components/layout/layout.module.scss b/src/components/layout/layout.module.scss
deleted file mode 100644
index 3daff920..00000000
--- a/src/components/layout/layout.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@import "../../styles/vars";
-@import "../../styles/utils";
-@import "../../styles/text_styles";
-
-.backBtn {
- border-radius: 50% !important;
- height: 40px;
- width: 40px;
- padding: 0 !important;
-}
-
-.backBtn svg {
- height: 30px;
- width: 30px;
-}
-
-.iconList {
- display: flex;
- flex-wrap: nowrap;
-}
-
-.iconList > * {
- margin-left: 1rem;
-}
-
-.header {
- padding: 0.5rem;
- position: sticky;
- top: 0;
- z-index: 9;
- transition: all 300ms ease-in-out;
- @include until(1020px) {
- background: var(--backgroundColor);
- }
-}
-
-.headerInsideContainer {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- max-width: 1500px;
- padding: 0 15px;
- margin: 0 auto;
-}
-
-.horizCenter {
- margin-left: auto;
- margin-right: auto;
-}
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
deleted file mode 100644
index 5ca6cd53..00000000
--- a/src/components/layout/layout.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from "react";
-import layoutStyles from "./layout.module.scss";
-import BackIcon from "assets/icons/back.svg";
-import { DarkLightButton } from "../dark-light-button";
-import { ThemeProvider, ThemeClassDiv } from "constants/theme-context";
-import { useRouter } from "next/router";
-import { AnalyticsLink } from "components/analytics-link";
-import DiscordIcon from "assets/icons/discord.svg";
-import { useHistory } from "constants/history-context";
-
-export const Layout: React.FC inputNode!.focus()}>
-
-
-
- {
- const val = (e.target as HTMLInputElement).value;
- setSearchVal(val);
- }}
- value={searchVal}
- onFocus={() => setIsFocused(true)}
- style={{ maxWidth: maxSpanWidth }}
- onBlur={() => setIsFocused(false)}
- className={styles.input}
- />
- {/*
- We want to hide this span as it acts as a placeholder for sizing
- purposes so we can know what the min or max side of the input should
- be
- */}
-
- {searchVal || placeholder}
-
-
-
-
-
-
-
- {!isBase ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
- {children}
-
- -
- {postsToDisplay.map((post) => {
- const slug = post.slug;
-
- const title = post.title || slug;
-
- return (
-
-
- e.stopPropagation()}>
-
- - {title} -
- - -
- by
-
- e.stopPropagation()}
- >
- {authors[0].name}
-
-
- {/* To avoid having commas on the first author name, we did this */}
- {authors.slice(1).map((author, i) => {
- return (
-
-
-
- {publishedStr}
- {tags.map((tag) => ( - - {tag} - - ))} -
- Something went wrong. This is where our Disqus comments should be. If
- you're using privacy tools, they may be blocking this comment
- system due to tracking concerns with the platform.
-
- If that's the case, we'd{" "}
-
- love to hear from you
- {" "}
- about what type of comment system you'd like to see implemented
- instead.
-
- {prevPost ? (
-
-
-
- );
-};
diff --git a/src/components/series/series-toc.module.scss b/src/components/series/series-toc.module.scss
deleted file mode 100644
index fca58ea6..00000000
--- a/src/components/series/series-toc.module.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@import "../../styles/text_styles";
-
-.seriesTableOfContent {
- margin-bottom: 16px;
-
- @include from($endSmallScreenSize) {
- margin-bottom: 24px;
- }
-
- .seriesHeader {
- color: var(--darkPrimary);
- @extend %body-1;
- margin-bottom: 16px;
- margin-top: 0;
- font-style: italic;
- font-weight: 600;
- }
-
- ol {
- padding: 0;
- list-style: none;
- margin: 0;
- }
-
- li {
- position: relative;
- padding-left: 40px;
- @extend %body-2;
- }
-
- li {
- margin-top: 16px;
- }
-
- li > button {
- background: none;
- border: none;
- color: var(--darkPrimary);
- font-size: inherit;
- text-decoration: underline;
- cursor: pointer;
- }
-
- li::before {
- position: absolute;
- height: 8px;
- width: 8px;
- left: 8px;
- top: 50%;
- transform: translateY(-50%);
- border-radius: 50%;
- content: " ";
- box-sizing: border-box;
- }
-
- li:not(.isActive)::before {
- border: 1.2px solid var(--darkPrimary);
- }
-
- li.isActive::before {
- background: var(--darkPrimary);
- }
-
- .displayNone {
- display: none;
- }
-}
diff --git a/src/components/series/series-toc.tsx b/src/components/series/series-toc.tsx
deleted file mode 100644
index 2f8eebdf..00000000
--- a/src/components/series/series-toc.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import styles from "./series-toc.module.scss";
-import { RenderedPostInfo } from "types/PostInfo";
-import { SeriesPostInfo, SlugPostInfo } from "constants/queries";
-import Link from "next/link";
-import { useMemo, useState } from "react";
-import { getShortTitle } from "./base";
-
-interface SeriesToCListItem {
- post: SeriesTocProps["postSeries"][0];
- isActive: boolean;
- className?: string;
-}
-
-const SeriesToCListItem = ({
- post,
- isActive,
- className,
-}: SeriesToCListItem) => {
- const liClass = isActive ? styles.isActive : "";
-
- return (
-
-
- );
-};
diff --git a/src/components/table-of-contents/index.ts b/src/components/table-of-contents/index.ts
deleted file mode 100644
index 1ec7137c..00000000
--- a/src/components/table-of-contents/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./table-of-contents";
-export * from "./use-heading-intersection-observer";
diff --git a/src/components/table-of-contents/table-of-contents.module.scss b/src/components/table-of-contents/table-of-contents.module.scss
deleted file mode 100644
index bbfbcc54..00000000
--- a/src/components/table-of-contents/table-of-contents.module.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@import "../../styles/vars";
-@import "../../styles/text_styles";
-
-.tableList {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.tocLi {
- padding: 6px 0;
- margin-right: 3px;
-
- border-left: 3px solid var(--minImpactBlack);
-}
-
-.tocLi a {
- color: var(--midImpactBlack);
- display: block;
- text-decoration: none;
- outline: none;
-
- @supports not selector(:focus-visible) {
- &:focus {
- outline: 3px solid var(--black);
- }
- }
-
- &:focus-visible {
- outline: 3px solid var(--black);
- }
-
- &:hover {
- text-decoration: underline;
- }
-}
-
-.tocLi:global(.toc-is-active) {
- border-color: var(--darkPrimary);
-
- a {
- font-weight: 700;
- color: var(--darkPrimary) !important;
- }
-}
-
-.tocH1 {
- padding-top: 0;
- margin-top: 16px;
- border-left: none;
-}
-
-.tocH1,
-.tocH2 {
- @extend %headline-uniwidth-1;
-}
-
-.tocH3,
-.tocH4 {
- @extend %headline-uniwidth-2;
-}
-
-.tocH2, .tocH3, .tocH4 {
- a {
- font-style: italic;
- }
-}
-
-@for $i from 1 through 4 {
- .tocH#{$i} {
- padding-left: ($i - 1) * 10px;
- }
-}
diff --git a/src/components/table-of-contents/table-of-contents.tsx b/src/components/table-of-contents/table-of-contents.tsx
deleted file mode 100644
index 2031bb1a..00000000
--- a/src/components/table-of-contents/table-of-contents.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as React from "react";
-import tableOfContentsStyle from "./table-of-contents.module.scss";
-import { RenderedPostInfo } from "uu-types";
-import { RefObject } from "react";
-import { useHeadingIntersectionObserver } from "./use-heading-intersection-observer";
-import classnames from "classnames";
-
-interface TableOfContentsProps {
- headingsWithId: RenderedPostInfo["headingsWithId"];
-}
-
-export const TableOfContents = ({ headingsWithId }: TableOfContentsProps) => {
- const headingsToDisplay = React.useMemo(() => {
- const headings = headingsWithId?.length ? headingsWithId : [];
-
- // get the "minimum" depth of heading used in the post (e.g. if the post only uses h2 and h3 -> minDepth=1)
- const minDepth = Math.min(...headings.map((h) => h.depth));
-
- // offset the heading depths by minDepth, so they always start at 1
- return headings
- .map((h) => Object.assign({}, h, { depth: h.depth - minDepth + 1 }))
- .filter((headingInfo) => headingInfo.depth <= 3);
- }, [headingsWithId]);
-
- const tocListRef = React.createRef
- {collectionSlug ? (
-
- {seriesText}
-
- ) : (
- seriesText
- )}
-
- -
- {firstPosts.map((seriesPost, i) => {
- const isActive = post.order === seriesPost.order;
-
- return (
-
- - - - {middlePosts.map((seriesPost, i) => { - const isActive = post.order === seriesPost.order; - - return ( -
-
- );
- });
-
- return (
-
- {authorsLinks}
-
- );
-};
diff --git a/src/constants/history-context.tsx b/src/constants/history-context.tsx
deleted file mode 100644
index f389299d..00000000
--- a/src/constants/history-context.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Thank you StackOverflow
-// @see https://stackoverflow.com/a/65309348
-import { useRouter } from "next/router";
-import {
- createContext,
- useState,
- useEffect,
- useContext,
- FC,
- PropsWithChildren,
-} from "react";
-
-interface HValidation {
- history: string[];
- setHistory(data: string[]): void;
- back(fallbackRoute?: string): void;
-}
-
-const HistoryContext = createContext{children}
;
-};
-
-export const ThemeProvider: React.FC