Merge pull request #4 from Firgrep/main

added subdirectory landing page and stub component

src/components/Stub.tsx

@@ -0,0 +1,12 @@
+import { Callout } from 'nextra/components'
+import { Link } from 'nextra-theme-docs';
+
+const Stub = () => {
+    return(
+        <Callout emoji="🌱">
+            This page is a stub. Help us expand it by contributing! Head on over to our <Link href="/-contributing">contributions page</Link> to learn more!
+        </Callout>
+    )
+}
+
+export default Stub;

src/components/icons/index.ts

@@ -0,0 +1,3 @@
+// TODO icons require additional config setup before svg can be parsed within React
+
+export { default as FilesIcon } from './files.svg'

src/components/pages/subdirectoryLanding/SubHeroBackground.tsx

@@ -0,0 +1,86 @@
+/**
+* Copyright (c) 2023 by Hyperplexed (https://codepen.io/Hyperplexed/pen/VwqLQbo)
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
+* associated documentation files (the "Software"), to deal in the Software without restriction, including 
+* without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
+* copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED 
+* TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL 
+* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF 
+* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+* 
+* Adapted by Firgrep for React, TailwindCSS and TypeScript.
+*/
+
+import { useEffect, useState } from "react";
+import styles from "./sub-hero-background.module.css";
+import cn from 'classnames';
+
+
+const SubHeroBackground = ({children}: {children?: React.ReactNode}) => {
+    const [screenSize, setScreenSize] = useState(typeof window !== "undefined" ? window.innerWidth : 1001);
+
+    useEffect(() => {
+        let stringLength = 2000;
+        if (screenSize > 1200) {
+            stringLength = 9000;
+        } else if (screenSize > 1000) {
+            stringLength = 7000;
+        } else if (screenSize > 600) {
+            stringLength = 4000;
+        }
+        const chars = "abcdefghiklmnopqrstyxzøæåABCDEFGHIKLMNOPQRSTYXZØÆÅ01233456789";
+        const randomChar = () => chars[Math.floor(Math.random() * (chars.length - 1))];
+        const randomString = (length: number) => Array.from(Array(length)).map(randomChar).join("");
+
+        const card = document.getElementById("targetCard") as HTMLElement;
+        const letters = document.getElementById("targetLetters") as HTMLElement;
+
+        const handleResize = () => {
+            setScreenSize(window.innerWidth);
+        }
+
+        const handleOnMove = (e: MouseEvent | Touch) => {
+            if (!card || !letters) return;
+            const rect = card.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+
+            letters.style.setProperty("--x", `${x}px`);
+            letters.style.setProperty("--y", `${y}px`);
+
+            letters.innerText = randomString(stringLength);    
+        }
+        if (card) {
+            card.onmousemove = e => handleOnMove(e);
+            card.ontouchmove = e => handleOnMove(e.touches[0]);
+        }
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [screenSize])
+
+    return(
+        <div className={styles["card-root"]}>
+            <div className={styles["card-track"]}>
+                <div className={styles["card-wrapper"]}>
+                    <div id="targetCard" className={styles["card"]}>
+                        <div className={cn(styles["card-center"])}>
+                            {children}
+                        </div>
+                        <div className={cn(styles["card-gradient"], "bg-radial-gradient dark:bg-radial-gradient-dark")}></div>
+                        <div id="targetLetters" className={cn(styles["card-letters"], "text-black dark:text-green-100")}></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default SubHeroBackground;

src/components/pages/subdirectoryLanding/index.tsx

@@ -0,0 +1,32 @@
+import Heading from "@/components/Heading";
+import SubHeroBackground from "./SubHeroBackground";
+import { Card } from 'nextra/components'
+
+const SubdirectoryLanding = ({subdirectory}: {subdirectory: string}) => {
+
+    return(
+        <main>
+            <section className="relative flex flex-col items-center justify-start w-full h-screen overflow-hidden mb-10">
+                <SubHeroBackground>
+                    <div className="flex flex-col items-center justify-center">
+                        <Heading>{subdirectory.toUpperCase()}</Heading>
+                        <div className="flex flex-wrap justify-between gap-4 bg-white rounded-lg dark:bg-transparent p-8 shadow-[10px_10px_50px_50px_rgba(255,255,255,0.8)] dark:shadow-none">
+                            <Card
+                                icon={" 📄 "}
+                                title="Guides"
+                                href={`/${subdirectory}/guides`}
+                            >_</Card>
+                            <Card
+                                icon={" 📄 "}
+                                title="Reference"
+                                href={`/${subdirectory}/reference`}
+                            >_</Card>
+                        </div>
+                    </div>
+                </SubHeroBackground>
+            </section>
+        </main>
+    );
+}
+
+export default SubdirectoryLanding; 

src/components/pages/subdirectoryLanding/sub-hero-background.module.css

@@ -0,0 +1,132 @@
+.card-root {
+	--background-rgb: transparent;
+	--background-light-rgb: 30 41 59;
+
+	--border-rgb: 255 255 255;
+	--border: 1px solid rgb(var(--border-rgb) / 20%);
+
+	--hyperplexed-main-rgb: 41 121 255;
+	--hyperplexed-main-light-rgb: 56 182 255;
+	--hyperplexed-secondary-rgb: 42 252 152;
+
+	--card-size: 480px;
+	--font-size: 0.8rem;
+	--logo-size: calc(var(--card-size) * 0.3);
+
+	background: rgb(var(--background-rgb));
+	display: flex;
+	flex-grow: 1;
+	height: 100%;
+	width: 100%;
+	justify-content: center;
+	overflow: hidden;
+	font-family: 'Noto Sans', sans-serif;
+}
+
+.card-track {
+	height: 100%;
+	width: 100%;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	position: relative;
+}
+
+.card-wrapper {
+	flex-grow: 1;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.card {
+	margin: 20px;
+	padding: 30px;
+	height: 75vh;
+	flex-grow: 0.8;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	margin: 1rem;
+	border-radius: 2rem;
+	overflow: hidden;
+	cursor: default;
+}
+
+.card-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	z-index: 4;
+}
+
+.card-center > img {
+  	width: var(--logo-size);
+}
+
+.card-gradient {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	pointer-events: none;
+	z-index: 3;
+	mix-blend-mode: darken;
+}
+
+.card-letters {
+	--x: 0px;
+	--y: 0px;
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	height: 100%;
+	width: 100%;
+	font-size: var(--font-size);
+	font-weight: 500;
+	word-wrap: break-word;
+	opacity: 0;
+	transition: opacity 800ms;
+	mask-image: radial-gradient(
+		calc(var(--card-size) * 0.8) circle at var(--x) var(--y), 
+		rgb(255, 255, 255) 20%, 
+		rgba(255, 255, 255, 0.25), 
+		transparent
+	);
+	-webkit-mask-image: radial-gradient(
+		calc(var(--card-size) * 0.8) circle at var(--x) var(--y), 
+		rgb(255, 255, 255) 20%, 
+		rgb(255 255 255 / 25%), 
+		transparent
+	);
+	scale: 1.03;
+}
+/* 
+*/
+
+.card:hover .card-letters {
+  	opacity: 1;
+}
+
+/* -- Extra Styles -- */
+
+.card-track:before,
+.card-track:after {
+	content: "";
+	height: 100vh;
+	width: 1px;
+	position: absolute;
+	top: 50%;
+	translate: 0% -50%;
+}
+
+.card-wrapper:before,
+.card-wrapper:after {
+	content: "";
+	width: 100vw;
+	position: absolute;
+	left: 50%;
+	translate: -50%;
+}

src/pages/hegel/index.mdx

@@ -2,8 +2,8 @@
 searchable: false
 ---
 
-Index landing page for Hegel
+import SubdirectoryLanding from "@/components/pages/subdirectoryLanding";
 
-TODO: Use a React component here
-
-This file is raw, meaning there is no style injection or MDX content being rendered by Nextra here. 
+<SubdirectoryLanding 
+    subdirectory={"hegel"}
+/>

src/pages/index.mdx

@@ -1,3 +1,7 @@
+---
+searchable: false
+---
+
 import LandingPage from "../components/pages/landing";
 
 <LandingPage />

src/pages/kant/guides/index.mdx

@@ -5,11 +5,6 @@ description: Learn about the Kant Guides section.
 
 # Kant Guides
 
-The Kant Guides index page.
-
-**features**
-
-- categorical imperative
-- sexy architectonic
-- prussian punctuality
+import Stub from "@/components/Stub";
 
+<Stub />

src/pages/kant/index.mdx

@@ -2,8 +2,8 @@
 searchable: false
 ---
 
-Index landing page for **Kant**
+import SubdirectoryLanding from "@/components/pages/subdirectoryLanding";
 
-TODO: Use a React component here
-
-This file is raw, meaning there is no style injection or MDX content being rendered by Nextra here. 
+<SubdirectoryLanding 
+    subdirectory={"kant"}
+/>

src/pages/kant/reference/index.mdx

@@ -5,10 +5,6 @@ description: Learn about the Kant Reference section.
 
 # Kant Reference
 
-The Kant Reference index page.
+import Stub from "@/components/Stub";
 
-**features**
-
-- categories, what else were you expecting? 🤣
-
-And on and on 🔥
+<Stub />

src/pages/spinoza/guides/index.mdx

@@ -5,14 +5,6 @@ description: Learn about the Spinoza Guides section.
 
 # Spinoza Guides
 
-In philosophy, substance abuse is encouraged.
-
-**features**
-
-- Substance
-- God
-- Q.E.Ds and plenty of em
-- Ethics (maybe?)
-- Banishment by your local religious leaders
-- Substance
+import Stub from "@/components/Stub";
 
+<Stub />

src/pages/spinoza/index.mdx

@@ -2,8 +2,8 @@
 searchable: false
 ---
 
-Index landing page for **SPINOZA**
+import SubdirectoryLanding from "@/components/pages/subdirectoryLanding";
 
-TODO: Use a React component here
-
-This file is raw, meaning there is no style injection or MDX content being rendered by Nextra here. 
+<SubdirectoryLanding 
+    subdirectory={"spinoza"}
+/>