Merge pull request #120 from systemphil/firgrep/footer-styling

footer-styling-etc
systemphil · Jan 6, 2025 · f446943 · f446943
2 parents 42239b1 + 77347b5
commit f446943
Show file tree

Hide file tree

Showing 12 changed files with 197 additions and 36 deletions.
diff --git a/app/(public)/team/page.tsx b/app/(public)/team/page.tsx
@@ -0,0 +1,7 @@
+import { Team } from "features/marketing/components/Team";
+
+export const metadata = {};
+
+export default function TeamPage() {
+    return <Team />;
+}
diff --git a/app/_meta.ts b/app/_meta.ts
@@ -34,4 +34,7 @@ export default {
     admin: {
         display: "hidden",
     },
+    team: {
+        display: "hidden",
+    },
 };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -20,7 +20,7 @@ import "nextra-theme-docs/style.css";
 import "@mdxeditor/editor/style.css";
 import "./globals.css";
 
-const EDIT_LINK_DESCRIPTION = "Edit this page on GitHub →";
+const EDIT_LINK_DESCRIPTION = "Edit this page on GitHub";
 const PROJECT_LINK = "https://github.com/systemphil/sphil";
 const DOCS_REPOSITORY_BASE = "https://github.com/systemphil/sphil/tree/main";
 const SITE_ROOT = process.env.NEXT_PUBLIC_SITE_ROOT as string;

diff --git a/content/_meta.ts b/content/_meta.ts
@@ -48,13 +48,4 @@ export default {
             typesetting: "article",
         },
     },
-    team: {
-        title: "Team",
-        display: "hidden",
-        theme: {
-            layout: "default",
-            sidebar: false,
-            toc: true,
-        },
-    },
 };
diff --git a/content/contributing/index.mdx b/content/contributing/index.mdx
@@ -31,9 +31,7 @@ We warmly encourage you to join our community on the
 
 import { EmbedYT } from "lib/components/ui/EmbedYT";
 
-<EmbedYT src="https://www.youtube.com/embed/hZVStcn2750?si=P1K7e2btT9Cwe5xO">
-    How to contribute to sPhil on GitHub
-</EmbedYT>
+<EmbedYT src="https://www.youtube.com/embed/hZVStcn2750?si=P1K7e2btT9Cwe5xO" />
 
 ### General Division of the Encyclopaedia
 

diff --git a/content/team.mdx b/content/team.mdx
diff --git a/cspell.json b/cspell.json
@@ -22,6 +22,7 @@
         "Aufhebung",
         "Autosize",
         "Befreiung",
+        "Bluesky",
         "Burbidge",
         "Clientside",
         "clsx",

diff --git a/features/marketing/components/Team.tsx b/features/marketing/components/Team.tsx
@@ -0,0 +1,88 @@
+import Image from "next/image";
+
+export const Team = () => {
+    return (
+        <div className="flex flex-col container justify-center w-full items-center">
+            <h1 className="text-4xl font-bold my-16">Meet Our Team</h1>
+            <div className="flex justify-center gap-16 flex-wrap mb-60">
+                <CardTeamMember
+                    name="Filip Niklas"
+                    title="Tech Lead"
+                    image="/images/team/filip.jpg"
+                >
+                    Filip Niklas, Ph.D., is a co-founder and the tech lead of
+                    sPhil. By day he works as a software developer, and by night
+                    he works on sPhil, writes poetry and teaches philosophy. He
+                    completed his PhD in philosophy in 2022 under the
+                    supervision of Professor Stephen Houlgate at the University
+                    of Warwick. The title of his thesis was Hegel&apos;s{" "}
+                    <em>
+                        Critique of Determinism: Justifying Unfreedom as a
+                        Moment of Freedom
+                    </em>
+                    . Filip&apos;s main research areas are systematic
+                    philosophy, metaphysics, ontology, essence, freedom,
+                    determinism, and maintains an otherwise broad interest in
+                    all the dimensions of intelligence and reason. Filip is also
+                    an incurable fan of the art and poetry of William Blake.
+                </CardTeamMember>
+                <CardTeamMember
+                    name="Ahilleas Rokni"
+                    title="Business Lead"
+                    image="/images/team/ahilleas.jpg"
+                >
+                    Ahilleas Rokni, Ph.D., is a co-founder and the business lead
+                    of sPhil. He completed his PhD thesis in philosophy in 2022
+                    under the supervision of Professor Stephen Houlgate at the
+                    University of Warwick. His thesis aimed to give an account
+                    of the much-debated move from the <em>Science of Logic</em>{" "}
+                    to the <em>Philosophy of Nature</em> in Hegel&apos;s system.
+                    Ahilleas&apos;s main research concerns are Hegel&apos;s
+                    logic, philosophy of nature, philosophy of science, and
+                    aesthetics.
+                </CardTeamMember>
+            </div>
+        </div>
+    );
+};
+
+type CardTeamMemberProps = {
+    name: string;
+    title: string;
+    image: string;
+    children?: React.ReactNode;
+};
+
+const CardTeamMember = ({
+    name,
+    title,
+    image,
+    children,
+}: CardTeamMemberProps) => {
+    return (
+        <div className="flex flex-col w-72 md:w-[450px] min-h-[600px] rounded-md shadow-lg bg-gradient-to-b from-gray-100 to-gray-300 dark:from-neutral-950/90 dark:to-neutral-800/90 dark:outline-1 dark:outline-solid dark:outline-dark-green-hsl outline outline-1 outline-gray-300">
+            <div className="flex p-8">
+                <Image
+                    height={125}
+                    width={125}
+                    src={image}
+                    alt={name}
+                    priority
+                    style={{
+                        borderRadius: "50%",
+                        outline: "5px solid lightgray",
+                        boxShadow: "0px 0px 10px 0px rgba(0,0,0,0.75)",
+                        border: "2px solid white",
+                    }}
+                />
+                <div className="flex flex-col justify-center align-center ml-4 md:ml-10 -translate-y-4 gap-2">
+                    <h3 className="text-3xl font-semibold">{name}</h3>
+                    <p className="text-lg font-sans text-gray-400">{title}</p>
+                </div>
+            </div>
+            <div className="px-6 pb-6">
+                <p className="text-justify">{children}</p>
+            </div>
+        </div>
+    );
+};
diff --git a/lib/components/icons/SocialIcon.tsx b/lib/components/icons/SocialIcon.tsx
@@ -0,0 +1,62 @@
+import { cn } from "lib/utils";
+
+const LIGHT_COLOR = "fill-gray-400 hover:fill-gray-500";
+const DARK_COLOR = "dark:fill-emerald-700 dark:hover:fill-emerald-600";
+
+export const SocialIcon = ({
+    icon,
+    size = "base",
+    href = undefined,
+}: {
+    icon: "facebook" | "bluesky" | "youtube" | "twitter" | "github" | "mail";
+    size?: "base" | "large";
+    href?: string;
+}) => {
+    const height = size === "large" ? "h-20" : "h-8";
+    const width = size === "large" ? "w-20" : "w-8";
+
+    const renderSvg = () => {
+        return (
+            <svg
+                className={cn(
+                    `${LIGHT_COLOR} ${DARK_COLOR}`,
+                    `${height} ${width}`
+                )}
+                role="img"
+                viewBox={icon === "mail" ? "0 0 128 128" : "0 0 24 24"}
+                xmlns="http://www.w3.org/2000/svg"
+                {...(icon === "mail" ? { "data-name": "Layer 1" } : {})}
+            >
+                <title>{icon}</title>
+                {icon === "bluesky" && (
+                    <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
+                )}
+                {icon === "facebook" && (
+                    <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
+                )}
+                {icon === "youtube" && (
+                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                )}
+                {icon === "twitter" && (
+                    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+                )}
+                {icon === "github" && (
+                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+                )}
+                {icon === "mail" && (
+                    <path d="M123.25 24.192c0-.018 0-.034-.005-.052s-.007-.063-.009-.094a1.734 1.734 0 0 0-.083-.408c-.006-.018 0-.037-.011-.055s-.01-.015-.013-.023a1.734 1.734 0 0 0-.227-.407c-.021-.028-.043-.053-.066-.08a1.755 1.755 0 0 0-.31-.294c-.012-.009-.022-.02-.034-.028a1.744 1.744 0 0 0-.414-.2c-.034-.012-.068-.022-.1-.032a1.733 1.733 0 0 0-.474-.073H6.5a1.733 1.733 0 0 0-.474.073c-.035.01-.068.02-.1.032a1.744 1.744 0 0 0-.414.2c-.012.008-.022.019-.034.028a1.755 1.755 0 0 0-.31.294c-.022.027-.045.052-.066.08a1.734 1.734 0 0 0-.227.407c0 .008-.01.015-.013.023s-.005.037-.011.055a1.734 1.734 0 0 0-.083.408c0 .032-.009.063-.009.094s-.005.034-.005.052v79.615c0 .023.006.045.007.068a1.737 1.737 0 0 0 .019.188c.008.051.015.1.027.152a1.74 1.74 0 0 0 .056.179c.017.047.033.094.054.139a1.729 1.729 0 0 0 .093.172c.024.04.048.081.075.119a1.743 1.743 0 0 0 .125.152c.033.036.066.072.1.106.021.019.037.042.059.061s.036.017.052.03a1.736 1.736 0 0 0 .452.263c.035.014.071.022.107.033a1.732 1.732 0 0 0 .488.085c.012 0 .023.006.035.006H121.501c.012 0 .023-.006.034-.006a1.732 1.732 0 0 0 .489-.085c.035-.011.07-.019.1-.033a1.736 1.736 0 0 0 .453-.263c.016-.013.036-.017.052-.03s.038-.042.059-.061c.036-.034.069-.069.1-.106a1.743 1.743 0 0 0 .125-.152c.027-.038.051-.078.075-.119a1.729 1.729 0 0 0 .093-.172c.021-.045.037-.092.054-.139a1.74 1.74 0 0 0 .056-.179c.012-.05.019-.1.027-.152a1.737 1.737 0 0 0 .019-.188c0-.023.007-.045.007-.068zM45.8 60.316l17.058 14.677a1.751 1.751 0 0 0 2.283 0L82.2 60.316l35.512 41.741H10.289zM8.25 99.052V28.007l34.9 30.026zm76.6-41.019 34.9-30.026v71.045zm31.931-32.091L81.276 56.493c-.006.005-.014.008-.02.014l-.019.02L64 71.358 46.763 56.527l-.019-.02-.02-.014-35.507-30.551z" />
+                )}
+            </svg>
+        );
+    };
+
+    if (href) {
+        return (
+            <a href={href} target="_blank" rel="noopener noreferrer">
+                {renderSvg()}
+            </a>
+        );
+    }
+
+    return renderSvg();
+};
diff --git a/lib/components/navigation/Footer.tsx b/lib/components/navigation/Footer.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { LogoOwl } from "../LogoOwl";
 import { LogoAnimated } from "../LogoAnimated";
 import { SymposiaCard } from "../SymposiaCard";
+import { SocialIcon } from "../icons/SocialIcon";
 
 const footerLinkClasses =
     "text-sm text-gray-600 dark:text-gray-400 no-underline hover:text-gray-800 hover:dark:text-gray-200 transition";
@@ -67,7 +68,7 @@ function FooterContent() {
             { name: "Reference", href: "/articles/kant/reference" },
         ],
         company: [
-            { name: "Team", href: "/articles/team" },
+            { name: "Team", href: "/team" },
             { name: "Contributing", href: "/articles/contributing" },
             { name: "Methodology", href: "/articles/contributing/methodology" },
             {
@@ -175,19 +176,33 @@ function FooterContent() {
                                 </ul>
                             </div>
                             <div className="mt-12 md:!mt-0">
-                                <FooterHeader>Support</FooterHeader>
-                                <ul
-                                    role="list"
-                                    className="mt-4 space-y-1.5 list-none ml-0"
-                                >
-                                    {navigation.support.map((item) => (
-                                        <li key={item.name}>
-                                            <FooterLink href={item.href}>
-                                                {item.name}
-                                            </FooterLink>
-                                        </li>
-                                    ))}
-                                </ul>
+                                <FooterHeader>Social</FooterHeader>
+                                <div className="flex gap-3 flex-wrap mt-4">
+                                    <SocialIcon
+                                        icon="mail"
+                                        href="mailto:service@systemphil.com"
+                                    />
+                                    <SocialIcon
+                                        icon="facebook"
+                                        href="https://www.facebook.com/profile.php?id=61564840656103"
+                                    />
+                                    <SocialIcon
+                                        icon="youtube"
+                                        href="https://www.youtube.com/@sphildotxyz"
+                                    />
+                                    <SocialIcon
+                                        icon="bluesky"
+                                        href="https://bsky.app/profile/sphil.xyz"
+                                    />
+                                    <SocialIcon
+                                        icon="twitter"
+                                        href="https://twitter.com/sphildotxyz"
+                                    />
+                                    <SocialIcon
+                                        icon="github"
+                                        href="https://github.com/systemphil"
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>

diff --git a/lib/components/navigation/TableOfContentsExtra.tsx b/lib/components/navigation/TableOfContentsExtra.tsx
@@ -12,8 +12,7 @@ export function TableOfContentsExtra() {
 function LinkToDiscussion() {
     return (
         <a
-            // TODO fix classes, nextra no longer uses nx- prefix
-            className="nx-text-xs nx-font-medium nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100 contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50"
+            className="focus-visible:nextra-focus text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 contrast-more:text-gray-700 contrast-more:dark:text-gray-100"
             target="_blank"
             href="https://github.com/systemphil/sphil/discussions"
         >

diff --git a/lib/components/ui/EmbedYT.tsx b/lib/components/ui/EmbedYT.tsx
@@ -1,7 +1,10 @@
+"use client";
+
 export const EmbedYT = (props: any) => {
     const {
         children,
         src,
+        title,
         minWidth = "400px",
         maxWidth = "800px",
         ...otherProps
@@ -34,7 +37,7 @@ export const EmbedYT = (props: any) => {
                         width="560"
                         height="315"
                         src={src}
-                        title="Video player"
+                        title={title ?? "YouTube video"}
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                         {...otherProps}
                     >