+
setIsOpen(!isOpen)}>
diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx
deleted file mode 100644
index 60c6c6d1f2..0000000000
--- a/pages/docs/[...slug].tsx
+++ /dev/null
@@ -1,321 +0,0 @@
-import { Breadcrumbs } from 'components/DocumentationNavigation/Breadcrumbs';
-import MainDocsBodyHeader from 'components/docsMain/docsMainBody';
-import TocOverflowButton from 'components/docsMain/tocOverflowButton';
-import { LeftHandSideParentContainer } from 'components/docsSearch/SearchNavigation';
-import { DocsLayout, Layout, MarkdownContent } from 'components/layout';
-import { docAndBlogComponents } from 'components/tinaMarkdownComponents/docAndBlogComponents';
-import ToC from 'components/toc/index';
-import { DocsPagination, LastEdited, NavToggle } from 'components/ui';
-import { GetStaticPaths, GetStaticProps } from 'next';
-import { NextSeo } from 'next-seo';
-import Error from 'next/error';
-import { useRouter } from 'next/router';
-import { format } from 'path';
-import { doc } from 'prettier';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import client from 'tina/__generated__/client';
-import { useTina } from 'tinacms/dist/react';
-import { TinaMarkdown } from 'tinacms/dist/rich-text';
-import { getDocsNav } from 'utils/docs/getDocProps';
-import { getSeoDescription } from 'utils/docs/getSeoDescription';
-import getTableOfContents from 'utils/docs/getTableOfContents';
-import { NotFoundError } from 'utils/error/NotFoundError';
-import { openGraphImage } from 'utils/open-graph-image';
-import { useTocListener } from 'utils/toc_helpers';
-import * as ga from '../../utils/ga';
-
-export function DocTemplate(props) {
- return <_DocTemplate {...props} />;
-}
-
-function screenResizer() {
- const [isScreenSmallerThan1200, setIsScreenSmallerThan1200] = useState(false);
- const [isScreenSmallerThan840, setIsScreenSmallerThan840] = useState(false);
-
- useEffect(() => {
- const updateScreenSize = () => {
- setIsScreenSmallerThan1200(window.innerWidth < 1200);
- setIsScreenSmallerThan840(window.innerWidth < 840);
- };
-
- updateScreenSize();
-
- window.addEventListener('resize', updateScreenSize);
-
- return () => window.removeEventListener('resize', updateScreenSize);
- }, []);
-
- return { isScreenSmallerThan1200, isScreenSmallerThan840 };
-}
-
-function _DocTemplate(props) {
- // fallback workaround
- if (props.notFound) {
- return
-
-
- );
-}
-
-export default DocTemplate;
-
-/*
- * DATA FETCHING ------------------------------------------------------
- */
-
-export const getStaticProps: GetStaticProps = async function (props) {
- let { slug: slugs } = props.params;
-
- // @ts-ignore This should maybe always be a string[]?
- const slug = slugs.join('/');
-
- try {
- const [results, navDocData] = await Promise.all([
- client.queries.doc({ relativePath: `${slug}.mdx` }),
- getDocsNav(),
- ]);
- return {
- props: {
- new: { results },
- navDocData,
- },
- };
- } catch (e) {
- if (e) {
- return {
- props: {
- error: { ...e }, //workaround since we cant return error as JSON
- },
- };
- } else if (e instanceof NotFoundError) {
- return {
- props: {
- notFound: true,
- },
- };
- }
- }
-};
-
-export const getStaticPaths: GetStaticPaths = async function () {
- const fg = require('fast-glob');
- const contentDir = './content/docs/';
- const files = await fg(`${contentDir}**/*.mdx`);
- return {
- fallback: false,
- paths: files
- .filter((file) => !file.endsWith('index.mdx'))
- .map((file) => {
- const path = file.substring(contentDir.length, file.length - 4);
- return { params: { slug: path.split('/') } };
- }),
- };
-};
-
-/*
- * STYLES --------------------------------------------------------------
- */
-
-export const DocsGrid = styled.div`
- display: block;
- width: 100%;
- position: relative;
- padding: 1rem 2rem 3rem 2rem;
- max-width: 768px;
- margin: 0 auto;
-
- @media (min-width: 500px) {
- padding: 1rem 3rem 4rem 3rem;
- }
-
- @media (min-width: 1200px) {
- display: grid;
- max-width: none;
- padding: 2rem 0rem 4rem 0rem;
- grid-template-areas:
- '. header header .'
- '. content toc .';
- grid-auto-columns: minmax(0, auto) minmax(300px, 800px)
- clamp(17.5rem, 10rem + 10vw, 21.25rem) minmax(0, auto);
- grid-column-gap: 5rem;
- justify-content: left;
- }
-`;
-
-export const DocGridHeader = styled.div`
- grid-area: header;
- width: 100%;
-`;
-
-export const DocGridToc = styled.div`
- grid-area: toc;
- width: 100%;
-
- @media (min-width: 1200px) {
- padding-top: 4.5rem;
- }
-`;
-
-interface ContentProps {
- ref: any;
-}
-
-export const DocGridContent = styled.div`
- grid-area: content;
- width: 100%;
-`;
-
-export const DocsPageTitle = styled.h1`
- font-size: 2rem;
- line-height: 1.2 !important;
- letter-spacing: 0.1px;
- color: var(--color-orange);
- position: relative;
- font-family: var(--font-tuner);
- font-style: normal;
-
- margin: 0 0 0 0 !important;
-
- @media (max-width: 1199px) {
- margin: 0 0 1.25rem 0 !important;
- }
-`;
-
-export const DocsNavToggle = styled(NavToggle)`
- position: fixed;
- margin-top: 1.25rem;
- left: 1rem;
- z-index: 500;
-
- @media (min-width: 999px) {
- display: none;
- }
-`;
diff --git a/pages/docs/index.tsx b/pages/docs/index.tsx
deleted file mode 100644
index 000d83e67b..0000000000
--- a/pages/docs/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { GetStaticProps } from 'next';
-import React from 'react';
-import DocTemplate, {
- getStaticPaths as slugGetStaticPaths,
- getStaticProps as slugGetStaticProps,
-} from './[...slug]';
-
-export const getStaticProps: GetStaticProps = async function (props) {
- return await slugGetStaticProps({ params: { slug: ['index'] } });
-};
-
-export default DocTemplate;
+
);
}
-
-export const DocContainer = styled.div`
- display: block;
- width: 100%;
- position: relative;
- padding: 1rem 2rem 3rem 2rem;
- margin: 5rem auto;
-`;
-
-const MAX_SPLIT_IMG_WIDTH = 768;
-const SplitContent = styled.div`
- display: flex;
- position: relative;
- min-height: 100vh;
-
- h3 {
- font-size: 1.2rem;
- }
-
- > * {
- flex: 1;
- margin: 0 10px;
- padding: 10px;
- box-sizing: border-box;
- }
-
- @media (min-width: ${MAX_SPLIT_IMG_WIDTH + 1}px) {
- #main-content-container > h3:not(:first-child),
- #main-content-container > h2:not(:first-child) {
- margin-top: 4.5rem !important;
- }
-
- .showcase-head-wrapper {
- margin-top: 2rem;
- }
-
- ul {
- list-style: none;
- padding-left: 1rem;
- border-left: 4px solid var(--color-light-dark);
-
- color: var(--color-light-dark);
- transition: color 0.5s ease-in-out;
- * {
- color: var(--color-light-dark);
-
- }
- }
-
- p {
- transition: color 0.1s ease-in-out;
- }
-
- a {
- transition: all 0.5s ease-in-out;
- pointer-events: none;
- }
-
- h2, h3 {
- background-clip: unset;
- background-image: none;
- }
-
- .showcase-heading {
- color: var(--color-light-dark);
-
- &:not(.focused) * {
- color: var(--color-light-dark);
- }
- }
-
- div.focused a,
- div.focused a {
- color: var(--color-orange) !important;
- }
-
- div.focused > p,
- div.focused > ul {
- border-left: 4px solid var(--color-orange);
-
- color: var(--color-primary);
- * {
- color: var(--color-primary);
- }
- }
- }
- }
-
- #main-content-container img {
- display: none;
- }
-
- @media (max-width: ${MAX_SPLIT_IMG_WIDTH}px) {
- .img-container {
- display: none;
- }
-
- #main-content-container img {
- display: initial;
- margin: 2rem 0
- }
- }
-
- .transition-img {
- position: absolute;
- right: 0;
- width: 50%;
- transition: all 1s ease-in-out;
- border-radius: 10px;
- }
- }
-
- .img-container {
- position: relative;
- width: 100%;
- flex: 1;
- }
-`;
diff --git a/components/toc/index.tsx b/components/toc/index.tsx
index f9e06c36d5..21822afe13 100644
--- a/components/toc/index.tsx
+++ b/components/toc/index.tsx
@@ -41,6 +41,7 @@ const ToC = ({ tocItems, activeIds }: TocProps) => {
const tocMarkdown = generateMarkdown(tocItems);
+
return (
{data.showcaseItems?.map((item, index) => {
+ const itemId = `${item.title}-${index}`;
+ const isFocused = activeIds.includes(itemId);
+
return (
- full opacity + orange border + text color
+ // If not => half opacity + gray border
+ className={`mt-0 md:mt-8 transition-all duration-300 ease-in-out
+ ${isFocused
+ ? 'opacity-100 text-gray-900'
+ : 'opacity-15 border-gray-300 text-gray-800'
+ }
+ `}
>
{item.useAsSubsection ? (
);
})}
(headingRefs.current[index] = el)}
>
-
- {item.title}
-
+
) : (
{item.title}
(headingRefs.current[index] = el)}
>
-
- {item.title}
-
+
)}
- {item.title}
-
+
+
-
-
+
- 
-
+
+ {/* This image is only shown on mobile (md:hidden).
+ On larger screens, the separate container is used. */}
+
- {/* Im keeping this as a .gif rather than transferring to .webm as a .gif would require me to change from ![]()
to
+
-
-
- {/* LEFT COLUMN */}
-
-
-
- {/* MIDDLE COLUMN */}
-
-
- {/* RIGHT COLUMN */}
- {doc_data.tocIsHidden ? null : (
-
-
-
-
- )}
-