From fbdb631ecad140260981577c2909e1c46296eb72 Mon Sep 17 00:00:00 2001 From: Firgrep Date: Tue, 17 Oct 2023 14:26:47 +0200 Subject: [PATCH 1/2] feat: added subdirectory landing pages, added stub component for stub pages --- src/components/Stub.tsx | 12 + src/components/icons/files.svg | 13 + src/components/icons/index.ts | 3 + .../pages/subdirectory-landing/Spipa.tsx | 2 - .../subdirectoryLanding/SubHeroBackground.tsx | 86 +++++++ .../pages/subdirectoryLanding/index.tsx | 32 +++ .../sub-hero-background.module.css | 224 ++++++++++++++++++ src/pages/hegel/index.mdx | 8 +- src/pages/index.mdx | 4 + src/pages/kant/guides/index.mdx | 9 +- src/pages/kant/index.mdx | 8 +- src/pages/kant/reference/index.mdx | 8 +- src/pages/spinoza/guides/index.mdx | 12 +- src/pages/spinoza/index.mdx | 8 +- src/pages/spinoza/reference/index.mdx | 8 +- tailwind.config.ts | 4 + 16 files changed, 398 insertions(+), 43 deletions(-) create mode 100644 src/components/Stub.tsx create mode 100644 src/components/icons/files.svg create mode 100644 src/components/icons/index.ts delete mode 100644 src/components/pages/subdirectory-landing/Spipa.tsx create mode 100644 src/components/pages/subdirectoryLanding/SubHeroBackground.tsx create mode 100644 src/components/pages/subdirectoryLanding/index.tsx create mode 100644 src/components/pages/subdirectoryLanding/sub-hero-background.module.css diff --git a/src/components/Stub.tsx b/src/components/Stub.tsx new file mode 100644 index 00000000..1792d592 --- /dev/null +++ b/src/components/Stub.tsx @@ -0,0 +1,12 @@ +import { Callout } from 'nextra/components' +import { Link } from 'nextra-theme-docs'; + +const Stub = () => { + return( + + This page is a stub. Help us expand it by contributing! Head on over to our contributions page to learn more! + + ) +} + +export default Stub; diff --git a/src/components/icons/files.svg b/src/components/icons/files.svg new file mode 100644 index 00000000..9fa826f8 --- /dev/null +++ b/src/components/icons/files.svg @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts new file mode 100644 index 00000000..10449cb7 --- /dev/null +++ b/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' \ No newline at end of file diff --git a/src/components/pages/subdirectory-landing/Spipa.tsx b/src/components/pages/subdirectory-landing/Spipa.tsx deleted file mode 100644 index e4e7094e..00000000 --- a/src/components/pages/subdirectory-landing/Spipa.tsx +++ /dev/null @@ -1,2 +0,0 @@ -// Copyright (c) 2023 by Alex Andrix (https://codepen.io/alexandrix/pen/oQOvYp) -// https://codepen.io/alexandrix/pen/oQOvYp \ No newline at end of file diff --git a/src/components/pages/subdirectoryLanding/SubHeroBackground.tsx b/src/components/pages/subdirectoryLanding/SubHeroBackground.tsx new file mode 100644 index 00000000..286c3c17 --- /dev/null +++ b/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( +
+
+
+
+
+ {children} +
+
+
+
+
+
+
+ ); +} + +export default SubHeroBackground; \ No newline at end of file diff --git a/src/components/pages/subdirectoryLanding/index.tsx b/src/components/pages/subdirectoryLanding/index.tsx new file mode 100644 index 00000000..9a7d1e77 --- /dev/null +++ b/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( +
+
+ +
+ {subdirectory.toUpperCase()} +
+ _ + _ +
+
+ +
+
+ ); +} + +export default SubdirectoryLanding; \ No newline at end of file diff --git a/src/components/pages/subdirectoryLanding/sub-hero-background.module.css b/src/components/pages/subdirectoryLanding/sub-hero-background.module.css new file mode 100644 index 00000000..3e9e2bf7 --- /dev/null +++ b/src/components/pages/subdirectoryLanding/sub-hero-background.module.css @@ -0,0 +1,224 @@ +.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); +} + +/* + background: radial-gradient( + rgb(var(--background-light-rgb)) 40%, + rgb(var(--hyperplexed-main-rgb)) 50%, + rgb(var(--hyperplexed-main-light-rgb)), + rgb(var(--hyperplexed-secondary-rgb)) + ); + +*/ + +.card-gradient { + height: 100%; + width: 100%; + position: absolute; + pointer-events: none; + z-index: 3; + mix-blend-mode: darken; +} + +/* .card-gradient:hover { + opacity: 1; +} */ + +.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; +} + +/* @media(max-width: 600px) { + .card-root { + --card-size: 340px; + } + + .card { + border-radius: 1rem; + } +} */ + +/* -- Extra Styles -- */ + +.card-track:before, +.card-track:after { + content: ""; + height: 100vh; + width: 1px; + position: absolute; + top: 50%; + translate: 0% -50%; +} + +/* .card-track:before { + left: -1px; + border-left: var(--border); +} + +.card-track:after { + right: -1px; + border-right: var(--border); +} */ + +.card-wrapper:before, +.card-wrapper:after { + content: ""; + width: 100vw; + position: absolute; + left: 50%; + translate: -50%; +} + +/* .card-wrapper:before { + top: -1px; + border-top: var(--border); +} + +.card-wrapper:after { + bottom: -1px; + border-bottom: var(--border); +} */ + +/* .card-corners { + height: 100%; + width: 100%; + position: absolute; + left: 0px; + top: 0px; + z-index: 3; + pointer-events: none; +} + +.card-corners > .card-corner { + display: block; + height: 9px; + width: 1px; + position: absolute; + background-color: white; +} + +.card-corners > .card-corner:after { + content: ""; + width: 9px; + height: 1px; + position: absolute; + left: -4px; + top: 4px; + background-color: white; +} + +.card-corners > .card-corner:nth-child(1) { + left: -1px; + top: -5px; +} + +.card-corners > .card-corner:nth-child(2) { + right: -1px; + top: -5px; +} + +.card-corners > .card-corner:nth-child(3) { + right: -1px; + bottom: -5px; +} + +.card-corners > .card-corner:nth-child(4) { + left: -1px; + bottom: -5px; +} */ diff --git a/src/pages/hegel/index.mdx b/src/pages/hegel/index.mdx index 7ba3baed..971cb892 100644 --- a/src/pages/hegel/index.mdx +++ b/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. \ No newline at end of file + diff --git a/src/pages/index.mdx b/src/pages/index.mdx index e70d5c63..2c7f00ec 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -1,3 +1,7 @@ +--- +searchable: false +--- + import LandingPage from "../components/pages/landing"; \ No newline at end of file diff --git a/src/pages/kant/guides/index.mdx b/src/pages/kant/guides/index.mdx index 8dcfdb14..6a6b73e6 100644 --- a/src/pages/kant/guides/index.mdx +++ b/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"; + diff --git a/src/pages/kant/index.mdx b/src/pages/kant/index.mdx index 856b9cd0..d14f5c51 100644 --- a/src/pages/kant/index.mdx +++ b/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. \ No newline at end of file + diff --git a/src/pages/kant/reference/index.mdx b/src/pages/kant/reference/index.mdx index 6752ba76..68956ccd 100644 --- a/src/pages/kant/reference/index.mdx +++ b/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 🔥 \ No newline at end of file + diff --git a/src/pages/spinoza/guides/index.mdx b/src/pages/spinoza/guides/index.mdx index 72b2f147..20b0b6db 100644 --- a/src/pages/spinoza/guides/index.mdx +++ b/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"; + diff --git a/src/pages/spinoza/index.mdx b/src/pages/spinoza/index.mdx index 5e888250..3fb4ba45 100644 --- a/src/pages/spinoza/index.mdx +++ b/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. \ No newline at end of file + diff --git a/src/pages/spinoza/reference/index.mdx b/src/pages/spinoza/reference/index.mdx index 181bb7e2..87cfb0dd 100644 --- a/src/pages/spinoza/reference/index.mdx +++ b/src/pages/spinoza/reference/index.mdx @@ -5,10 +5,6 @@ description: Learn about the Spinoza Reference section. # Spinoza Reference -The Spinoza Reference index page. +import Stub from "@/components/Stub"; -**features** - -- substance, what else were you expecting? 🤣 - -And on and on 🔥 \ No newline at end of file + diff --git a/tailwind.config.ts b/tailwind.config.ts index f8adabee..10e3487e 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -21,6 +21,10 @@ const config: Config = { // 'gradient-conic': // 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', // }, + backgroundImage: { + 'radial-gradient': 'radial-gradient(#FFFFFF 25%, rgb(255 255 255), transparent)', + 'radial-gradient-dark': 'radial-gradient(rgb(40 40 40) 40%, rgb(175 185 159) 50%, transparent, rgb(20 20 20))', + }, fontFamily: { serif: ['var(--font-cinzel)'], }, From dc828299298cfee3c71c578efefabd887b501192 Mon Sep 17 00:00:00 2001 From: Firgrep Date: Tue, 17 Oct 2023 14:34:03 +0200 Subject: [PATCH 2/2] chore: cleanup dead code in css and added carriage return --- .../subdirectoryLanding/SubHeroBackground.tsx | 2 +- .../sub-hero-background.module.css | 92 ------------------- 2 files changed, 1 insertion(+), 93 deletions(-) diff --git a/src/components/pages/subdirectoryLanding/SubHeroBackground.tsx b/src/components/pages/subdirectoryLanding/SubHeroBackground.tsx index 286c3c17..ed2c6d20 100644 --- a/src/components/pages/subdirectoryLanding/SubHeroBackground.tsx +++ b/src/components/pages/subdirectoryLanding/SubHeroBackground.tsx @@ -83,4 +83,4 @@ const SubHeroBackground = ({children}: {children?: React.ReactNode}) => { ); } -export default SubHeroBackground; \ No newline at end of file +export default SubHeroBackground; diff --git a/src/components/pages/subdirectoryLanding/sub-hero-background.module.css b/src/components/pages/subdirectoryLanding/sub-hero-background.module.css index 3e9e2bf7..0f6c456c 100644 --- a/src/components/pages/subdirectoryLanding/sub-hero-background.module.css +++ b/src/components/pages/subdirectoryLanding/sub-hero-background.module.css @@ -67,16 +67,6 @@ width: var(--logo-size); } -/* - background: radial-gradient( - rgb(var(--background-light-rgb)) 40%, - rgb(var(--hyperplexed-main-rgb)) 50%, - rgb(var(--hyperplexed-main-light-rgb)), - rgb(var(--hyperplexed-secondary-rgb)) - ); - -*/ - .card-gradient { height: 100%; width: 100%; @@ -86,10 +76,6 @@ mix-blend-mode: darken; } -/* .card-gradient:hover { - opacity: 1; -} */ - .card-letters { --x: 0px; --y: 0px; @@ -124,16 +110,6 @@ opacity: 1; } -/* @media(max-width: 600px) { - .card-root { - --card-size: 340px; - } - - .card { - border-radius: 1rem; - } -} */ - /* -- Extra Styles -- */ .card-track:before, @@ -146,16 +122,6 @@ translate: 0% -50%; } -/* .card-track:before { - left: -1px; - border-left: var(--border); -} - -.card-track:after { - right: -1px; - border-right: var(--border); -} */ - .card-wrapper:before, .card-wrapper:after { content: ""; @@ -164,61 +130,3 @@ left: 50%; translate: -50%; } - -/* .card-wrapper:before { - top: -1px; - border-top: var(--border); -} - -.card-wrapper:after { - bottom: -1px; - border-bottom: var(--border); -} */ - -/* .card-corners { - height: 100%; - width: 100%; - position: absolute; - left: 0px; - top: 0px; - z-index: 3; - pointer-events: none; -} - -.card-corners > .card-corner { - display: block; - height: 9px; - width: 1px; - position: absolute; - background-color: white; -} - -.card-corners > .card-corner:after { - content: ""; - width: 9px; - height: 1px; - position: absolute; - left: -4px; - top: 4px; - background-color: white; -} - -.card-corners > .card-corner:nth-child(1) { - left: -1px; - top: -5px; -} - -.card-corners > .card-corner:nth-child(2) { - right: -1px; - top: -5px; -} - -.card-corners > .card-corner:nth-child(3) { - right: -1px; - bottom: -5px; -} - -.card-corners > .card-corner:nth-child(4) { - left: -1px; - bottom: -5px; -} */