Add contact page

docusaurus.config.js

@@ -4,7 +4,7 @@ module.exports = {
   tagline: 'The Free Software Media System',
   url: 'http://next.jellyfin.org',
   baseUrl: '/',
-  onBrokenLinks: 'throw',
+  onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
   organizationName: 'jellyfin',
@@ -24,47 +24,47 @@ module.exports = {
     navbar: {
       logo: {
         alt: 'Jellyfin logo',
-        src: 'img/logo.svg',
+        src: 'img/logo.svg'
       },
       items: [
         {
           to: 'features',
           label: 'Features',
-          position: 'right',
+          position: 'right'
         },
         {
           to: 'clients',
           label: 'Clients',
-          position: 'right',
+          position: 'right'
         },
         {
           to: 'plugins',
           label: 'Plugins',
-          position: 'right',
+          position: 'right'
         },
         {
           to: 'downloads',
           label: 'Downloads',
-          position: 'right',
+          position: 'right'
         },
         {
           to: 'contribute',
           label: 'Contribute',
-          position: 'right',
+          position: 'right'
         },
         { to: 'blog', label: 'Blog', position: 'right' },
         {
           type: 'doc',
           docId: 'getting-started',
           label: 'Documentation',
-          position: 'right',
+          position: 'right'
         },
         {
           to: 'contact',
           label: 'Contact',
-          position: 'right',
-        },
-      ],
+          position: 'right'
+        }
+      ]
     },
     footer: {
       links: [
@@ -73,59 +73,59 @@ module.exports = {
           items: [
             {
               label: 'Getting Started',
-              to: '/docs/getting-started',
+              to: '/docs/getting-started'
             },
             {
               label: 'Developer Documentation',
-              href: 'https://developer.jellyfin.org',
-            },
-          ],
+              href: 'https://developer.jellyfin.org'
+            }
+          ]
         },
         {
           title: 'Community',
           items: [
             {
               label: 'Community Standards',
-              to: 'community-standards',
+              to: 'community-standards'
             },
             {
               label: 'Matrix',
-              href: 'https://matrix.to/#/+jellyfin:matrix.org',
+              href: 'https://matrix.to/#/+jellyfin:matrix.org'
             },
             {
               label: 'Discord',
-              href: 'https://discord.gg/zHBxVSXdBV',
+              href: 'https://discord.gg/zHBxVSXdBV'
             },
             {
               label: 'Reddit',
-              href: 'https://reddit.com/r/jellyfin',
-            },
-          ],
+              href: 'https://reddit.com/r/jellyfin'
+            }
+          ]
         },
         {
           title: 'More',
           items: [
             {
               label: 'Getting Help',
-              to: 'getting-help',
+              to: 'getting-help'
             },
             {
               label: 'Blog',
-              to: 'blog',
+              to: 'blog'
             },
             {
               label: 'FAQ',
-              to: 'faq',
+              to: 'faq'
             },
             {
               label: 'Check us out on GitHub',
-              href: 'https://github.com/jellyfin',
-            },
-          ],
-        },
+              href: 'https://github.com/jellyfin'
+            }
+          ]
+        }
       ],
-      copyright: `Site content is licensed <a href='http://creativecommons.org/licenses/by-nd/4.0/'>CC-BY-ND-4.0</a>`,
-    },
+      copyright: `Site content is licensed <a href='http://creativecommons.org/licenses/by-nd/4.0/'>CC-BY-ND-4.0</a>`
+    }
   },
   presets: [
     [
@@ -134,16 +134,15 @@ module.exports = {
         docs: {
           sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
-          editUrl:
-            'https://github.com/jellyfin/jellyfin.org/edit/master/',
+          editUrl: 'https://github.com/jellyfin/jellyfin.org/edit/master/'
         },
         blog: {
-          showReadingTime: true,
+          showReadingTime: true
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
-        },
-      },
-    ],
-  ],
+          customCss: require.resolve('./src/css/custom.css')
+        }
+      }
+    ]
+  ]
 };

package-lock.json

@@ -1826,9 +1826,9 @@
       }
     },
     "@icons-pack/react-simple-icons": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-4.2.0.tgz",
-      "integrity": "sha512-ZWswvsfhwu+fevgO4Cv3j/21J/X7LQJ1sV6gRNyiCx3JpcDlq56NkrWUBVZe/szmES8kOGhYe1L4OmslJgBpSQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@icons-pack/react-simple-icons/-/react-simple-icons-4.4.0.tgz",
+      "integrity": "sha512-LzGL9aeO/KgDkkvgt96fdel1z2KrUW0gC7F9frl9Pd9ocwi42d14nIWlN9buEAZHQplDmfyMBpixcje7xhs8bA==",
       "requires": {
         "prop-types": "^15.7.2"
       }
@@ -6590,11 +6590,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
-    "img-comparison-slider": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/img-comparison-slider/-/img-comparison-slider-3.0.4.tgz",
-      "integrity": "sha512-N5ApBNNNH8s1YoYdKCxGKgKxG2Fj6GjFMKWs3lEWF5UFBiqPpDwyf1Tna4uLJDMy2lpihCdbdTRFFww31i312w=="
-    },
     "image-size": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@@ -6602,6 +6597,11 @@
       "dev": true,
       "optional": true
     },
+    "img-comparison-slider": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/img-comparison-slider/-/img-comparison-slider-3.0.4.tgz",
+      "integrity": "sha512-N5ApBNNNH8s1YoYdKCxGKgKxG2Fj6GjFMKWs3lEWF5UFBiqPpDwyf1Tna4uLJDMy2lpihCdbdTRFFww31i312w=="
+    },
     "immer": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",

package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@docusaurus/core": "2.0.0-alpha.75",
     "@docusaurus/preset-classic": "2.0.0-alpha.75",
-    "@icons-pack/react-simple-icons": "^4.2.0",
+    "@icons-pack/react-simple-icons": "^4.4.0",
     "@img-comparison-slider/react": "^3.0.4",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",

src/pages/contact.module.css

@@ -0,0 +1,66 @@
+.contact-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1em;
+  user-select: none;
+}
+
+a.contact-card {
+  color: white;
+}
+
+.contact-card {
+  border-radius: 15px;
+}
+
+.reddit {
+  background-color: #ff4500;
+}
+
+.element {
+  background-color: #0dbd8b;
+}
+
+.discord {
+  background-color: #5865f2;
+}
+
+.telegram {
+  background-color: #26a5e4;
+}
+
+.twitter {
+  background-color: #1da1f2;
+}
+
+.libera {
+  background-color: #ff55dd;
+}
+
+.libera-icon {
+  width: 48px;
+  font-size: 48px;
+  line-height: 48px;
+  font-weight: bold;
+}
+
+.facebook {
+  background-color: #1877f2;
+}
+
+.github {
+  background-color: #181717;
+}
+
+.weblate {
+  background-color: #2eccaa;
+}
+
+.jellyfin {
+  background-color: #00a4dc;
+}
+
+.open-collective {
+  background-color: #7fadf2;
+}

src/pages/contact.tsx

@@ -1,11 +1,177 @@
 import React from 'react';
 import Layout from '@theme/Layout';
+import {
+  Telegram,
+  Discord,
+  Element,
+  Reddit,
+  Twitter,
+  Facebook,
+  Github,
+  Jellyfin,
+  Weblate,
+  Opencollective
+} from '@icons-pack/react-simple-icons';
+import styles from './contact.module.css';
+
+// TODO: We can probably factorize this a little?
+// Make it less markup heavy by building an object, then iterating over it, for example.
+
+// TODO: How do we handle platforms with multiple links like IRC and Element?
+// TODO: Once available, change the Element link to use Element Spaces.
 
 export default function Contact() {
   return (
     <Layout>
-      <h1>Contact</h1>
-      <p>Placeholder page</p>
+      <div className="container margin-bottom--lg">
+        <h1>Contact</h1>
+        <h2>Chat</h2>
+        <div className="row">
+          <div className="col col--12">
+            <p>
+              The Jellyfin team and community are active on several messaging
+              platforms.
+              <br />
+              While Element is our main avenue of communication, it is bridged
+              to Discord and Libera Chat for convenience.
+            </p>
+            <div className={styles['contact-grid']}>
+              <a
+                className={`${styles.element} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://matrix.to/#/#jellyfin:matrix.org"
+              >
+                <Element className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Element</h2>
+                  <span>#jellyfin:matrix.org</span>
+                </div>
+              </a>
+              <a
+                className={`${styles.discord} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://discord.gg/zHBxVSXdBV"
+              >
+                <Discord className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Discord</h2>
+                  <span>discord.gg/zHBxVSXdBV</span>
+                </div>
+              </a>
+              <a
+                className={`${styles.libera} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="ircs://irc.libera.chat:6697/#jellyfin"
+              >
+                <span className={`${styles['libera-icon']} margin--md`}>#</span>
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Libera Chat</h2>
+                  <span>#jellyfin</span>
+                </div>
+              </a>
+              <a
+                className={`${styles.telegram} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://t.me/jellyfinchat"
+              >
+                <Telegram className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Telegram</h2>
+                  <span>@JellyfinChat</span>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+        <h2 className="margin-top--md">Social</h2>
+        <div className="row">
+          <div className="col col--12">
+            <p>
+              If you want to follow Jellyfin news and engage the community, we
+              are active on several social media platforms.
+            </p>
+            <div className={styles['contact-grid']}>
+              <a
+                className={`${styles.reddit} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://www.reddit.com/r/jellyfin"
+              >
+                <Reddit className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Reddit</h2>
+                  <span>/r/jellyfin</span>
+                </div>
+              </a>
+              <a
+                className={`${styles.twitter} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://www.twitter.com/jellyfin"
+              >
+                <Twitter className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Twitter</h2>
+                  <span>@Jellyfin</span>
+                </div>
+              </a>
+              <a
+                className={`${styles.facebook} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://www.facebook.com/jellyfin.media/"
+              >
+                <Facebook className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Facebook</h2>
+                  <span>jellyfin.media</span>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+        <h2 className="margin-top--md">Other</h2>
+        <div className="row">
+          <div className="col col--12">
+            <p>
+              The following platforms allow you to contribute to, and to
+              support, Jellyfin.
+            </p>
+            <div className={styles['contact-grid']}>
+              <a
+                className={`${styles.github} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://github.com/jellyfin"
+              >
+                <Github className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">GitHub</h2>
+                  <span>Jellyfin</span>
+                </div>
+              </a>
+              <a
+                className={`${styles.weblate} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://translate.jellyfin.org/"
+              >
+                <Weblate className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Weblate</h2>
+                  <span>Translate</span>
+                </div>
+              </a>
+              <a
+                className={`${styles.jellyfin} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://features.jellyfin.org/"
+              >
+                <Jellyfin className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Fider</h2>
+                  <span>Request features</span>
+                </div>
+              </a>
+              <a
+                className={`${styles['open-collective']} ${styles['contact-card']} display--flex padding--md shadow--md`}
+                href="https://features.jellyfin.org/"
+              >
+                <Opencollective className="margin--md" size={48} />
+                <div className="display--flex flex-direction--column row-justify--center">
+                  <h2 className="margin-bottom--none">Open Collective</h2>
+                  <span>Help finance infrastructure</span>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
     </Layout>
   );
 }