feat: embedd yt, fix footer and toc extra

systemphil · Sep 25, 2024 · 6b7bde4 · 6b7bde4
1 parent 3e89dc8
commit 6b7bde4
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 5 deletions.
diff --git a/src/components/EmbedYT.tsx b/src/components/EmbedYT.tsx
@@ -0,0 +1,47 @@
+export const EmbedYT = (props: any) => {
+    const {
+        children,
+        src,
+        minWidth = "400px",
+        maxWidth = "800px",
+        ...otherProps
+    } = props;
+
+    return (
+        <section
+            style={{ width: "100%", minWidth: minWidth, maxWidth: maxWidth }}
+            aria-label="YouTube video"
+        >
+            <div
+                style={{
+                    position: "relative",
+                    width: "100%",
+                    overflow: "hidden",
+                    paddingTop: "56.25%",
+                }}
+            >
+                <div>
+                    <iframe
+                        style={{
+                            position: "absolute",
+                            top: "0",
+                            left: "0",
+                            right: "0",
+                            width: "100%",
+                            height: "100%",
+                            border: "none",
+                        }}
+                        width="560"
+                        height="315"
+                        src={src}
+                        title="Video player"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        {...otherProps}
+                    >
+                        {children}
+                    </iframe>
+                </div>
+            </div>
+        </section>
+    );
+};
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -32,7 +32,10 @@ function FooterHeader({ children }: { children: ReactNode }) {
 
 const navigation = {
     general: [
-        { name: "Blog", href: "/blog" },
+        {
+            name: "Discussion",
+            href: "https://github.com/systemphil/sphil/discussions",
+        },
         { name: "Symposia", href: "https://symposia.sphil.xyz" },
         { name: "Acknowledgements", href: "/acknowledgements" },
     ],
@@ -57,6 +60,11 @@ const navigation = {
     support: [
         { name: "GitHub", href: "https://github.com/systemphil/" },
         { name: "YouTube", href: "https://www.youtube.com/@systemphil" },
+        { name: "Twitter", href: "https://twitter.com/sphildotxyz" },
+        {
+            name: "Facebook",
+            href: "https://www.facebook.com/profile.php?id=61564840656103",
+        },
     ],
 };
 

diff --git a/src/components/TableOfContentsExtra.tsx b/src/components/TableOfContentsExtra.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { SymposiaCard } from "./SymposiaCard";
+
+export function TableOfContentsExtra() {
+    return (
+        <>
+            <LinkToDiscussion />
+            <SymposiaCard />
+        </>
+    );
+}
+
+function LinkToDiscussion() {
+    return (
+        <a
+            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"
+            target="_blank"
+            href="https://github.com/systemphil/sphil/discussions"
+        >
+            Share your thoughts 💬{" "}
+        </a>
+    );
+}
+
+// Question? Give us feedback →
diff --git a/src/pages/contributing/index.mdx b/src/pages/contributing/index.mdx
@@ -24,7 +24,16 @@ started contributing ideas or code to sPhil as well as a
 [Code of Conduct](/contributing/code-of-conduct) for contributing to the
 development of sPhil.
 
-We warmly encourage you to join our community on the [discussion boards]().
+We warmly encourage you to join our community on the
+[discussion boards](https://github.com/systemphil/sphil/discussions).
+
+<br/ >
+
+import { EmbedYT } from "../../components/EmbedYT";
+
+<EmbedYT src="https://www.youtube.com/embed/hZVStcn2750?si=P1K7e2btT9Cwe5xO">
+    How to contribute to sPhil on GitHub
+</EmbedYT>
 
 ### General Division of the Encyclopaedia
 

diff --git a/theme.config.tsx b/theme.config.tsx
@@ -3,15 +3,15 @@ import Navigation from "@/components/Navigation";
 import Footer from "@/components/Footer";
 import { useRouter } from "next/router";
 import { type DocsThemeConfig, useConfig } from "nextra-theme-docs";
-import { SymposiaCard } from "@/components/SymposiaCard";
 import { ArticleWrapper } from "@/components/ArticleWrapper";
+import { TableOfContentsExtra } from "@/components/TableOfContentsExtra";
 
 const SITE_ROOT = process.env.NEXT_PUBLIC_SITE_ROOT;
 
 const config: DocsThemeConfig = {
     docsRepositoryBase: "https://github.com/systemphil/sphil/tree/dev", // root for every edit link
     editLink: {
-        text: "Edit this page on GitHub",
+        text: "Edit this page on GitHub ✏️",
     },
     footer: {
         component: Footer,
@@ -105,7 +105,7 @@ const config: DocsThemeConfig = {
     },
     toc: {
         backToTop: true,
-        extraContent: <SymposiaCard />,
+        extraContent: <TableOfContentsExtra />,
     },
     useNextSeoProps: function SEO() {
         const router = useRouter();