Merge pull request #11 from executablebooks/feat/theme

Add Custom Theme

.github/workflows/deploy.yml

@@ -0,0 +1,26 @@
+name: Deploy Theme to Vercel
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+      - run: npm install
+        working-directory: theme
+      - run: npx vercel pull --yes --token=${{ secrets.VERCEL_TOKEN }}
+        working-directory: theme
+      # This one for build in github actions:
+      - run: npx vercel build --prod
+        working-directory: theme
+      - run: npx vercel deploy --prod --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+        working-directory: theme
+      # This one for build on vercel:
+      # - run: npx vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -1 +1,3 @@
 _build
+node_modules
+.vercel

README.md

@@ -1,3 +1,17 @@
 # mystmd.org
 
-A splash page for the MyST Markdown ecosystem
+This repository holds the theme for https://mystmd.org as well as the content for the landing/overview pages of the website.
+
+The theme is a custom [Remix](https://remix.run) application that depends on [myst-theme](https://github.com/executablebooks/myst-theme) components. The web application brings together documentation from multiple different projects and provides a custom splash page, sandbox and search experience.
+
+## Local Development
+
+To see the theme locally:
+
+```
+cd theme
+npm install
+npm run start
+```
+
+This currently loads content off of the curvenote CDN for pages, which may be changed in the future.

content/.gitignore

@@ -0,0 +1 @@
+_build

content/README.md

@@ -0,0 +1,3 @@
+# mystmd.org
+
+Content for the splash pages of the MyST Markdown ecosystem.

theme/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};

theme/.gitignore

@@ -0,0 +1,21 @@
+.cache
+.env
+.vercel
+.output
+.turbo
+
+/public/build
+build
+/api/*
+
+.cache
+.env
+.vercel
+.output
+
+/app/styles/app.css
+/public/*thebe*
+/public/service-worker-*.js
+
+.yalc
+yalc.lock

theme/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Executable Books Project
+
+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.

theme/app/components/Error404.tsx

@@ -0,0 +1,20 @@
+export function Error404() {
+  return (
+    <main className="article">
+      <section className="flex flex-col md:flex-row md:my-[20vh] max-w-fit mx-auto">
+        <div className="self-center">
+          <h3>404. We could not find that article.</h3>
+          <p>The requested URL was not found on this server.</p>
+          <p>
+            <a href="/">Take me home!</a>
+          </p>
+        </div>
+        <img
+          src="/404.webp"
+          alt="Page not Found"
+          className="w-[300px] max-w-full self-center dark:brightness-125 md:ml-10"
+        />
+      </section>
+    </main>
+  );
+}

theme/app/components/Footer.tsx

@@ -0,0 +1,202 @@
+import { MastodonIcon, TwitterIcon, GithubIcon, DiscordIcon } from '@scienceicons/react/24/solid';
+import { Link } from '@remix-run/react';
+import Logo from './logo-wide.svg';
+import LogoDark from './logo-wide-dark.svg';
+import EBPLogo from './ebp-logo-wide.svg';
+import EBPLogoDark from './ebp-logo-wide-dark.svg';
+import classNames from 'classnames';
+
+function SocialIcons() {
+  return (
+    <div className="grid grid-flow-col gap-2 my-2 text-slate-600 dark:text-white w-fit">
+      <a
+        href="https://twitter.com/mystmarkdown"
+        target="_blank"
+        className="p-1"
+        rel="noreferrer"
+        title="Follow us on Twitter"
+      >
+        <TwitterIcon className="w-5 h-5" />
+      </a>
+      <a
+        href="https://fosstodon.org/@myst_tools"
+        target="_blank"
+        className="p-1"
+        rel="me noreferrer"
+        title="Follow us on Mastodon"
+      >
+        <MastodonIcon className="w-5 h-5" />
+      </a>
+      <a
+        href="https://github.com/executablebooks"
+        target="_blank"
+        className="p-1"
+        rel="noreferrer"
+        title="Fork us on GitHub"
+      >
+        <GithubIcon className="w-5 h-5" />
+      </a>
+      <a
+        href="https://discord.mystmd.org"
+        target="_blank"
+        className="p-1"
+        rel="noreferrer"
+        title="Talk on Discord"
+      >
+        <DiscordIcon className="w-5 h-5" />
+      </a>
+    </div>
+  );
+}
+
+export function ExecutableBooksFooter() {
+  return (
+    <div className="px-6 py-3 article-grid col-screen bg-slate-100 dark:bg-zinc-900">
+      <div className="grid grid-cols-1 gap-2 col-screen md:grid-cols-12 text-neutral-800 dark:text-gray-100">
+        <div className="text-center md:text-left md:col-span-4">
+          <a
+            href="https://executablebooks.org"
+            target="_blank"
+            rel="noreferrer"
+            className="block mx-auto w-fit md:mx-0"
+          >
+            <img src={EBPLogo} className="h-9 dark:hidden" alt="Executable Books Project" />
+            <img
+              src={EBPLogoDark}
+              className="hidden h-9 dark:block"
+              alt="Executable Books Project"
+            />
+            <span className="sr-only">Executable Books Project</span>
+          </a>
+        </div>
+        <div className="m-auto text-center md:col-span-4">
+          <a
+            href="https://compass.executablebooks.org/en/latest/team/index.html"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm after:content-['\a0\2219\a0']"
+          >
+            Our Team
+          </a>
+          <a
+            href="https://compass.executablebooks.org"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm after:content-['\a0\2219\a0']"
+          >
+            Compass
+          </a>
+          <a
+            href="https://executablebooks.org/en/latest/blog"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm"
+          >
+            Blog
+          </a>
+        </div>
+        <div className="m-auto text-right md:mx-0 md:col-span-4">
+          <a
+            href="https://compass.executablebooks.org/en/latest/code-of-conduct.html"
+            target="_blank"
+            rel="noreferrer"
+            className="text-sm"
+          >
+            Code of Conduct
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function Footer({ tight }: { tight?: boolean }) {
+  return (
+    <section className={classNames('col-screen article-grid', { 'mt-10': !tight, 'mt-0': tight })}>
+      <div
+        className={classNames('bg-white dark:bg-slate-950 shadow-2xl col-screen article-grid', {
+          'shadow-orange-400 dark:shadow-orange-600 mt-5 md:mt-12': !tight,
+          'border-t border-slate-100 dark:border-slate-800': tight,
+        })}
+      >
+        <div className="my-10 col-page">
+          <div className="flex flex-col items-center w-full p-2 my-4 sm:p-5 lg:flex-row lg:flex-wrap">
+            <div>
+              <a href="/" className="inline-block">
+                <img src={Logo} className="w-[200px] dark:hidden" alt="MyST Markdown" />
+                <img src={LogoDark} className="w-[200px] hidden dark:block" alt="MyST Markdown" />
+                <span className="sr-only">MyST Markdown</span>
+              </a>
+              <div className="max-w-sm font-light prose dark:text-white">
+                Community-driven tools for the future of technical communication and publication
+              </div>
+              <SocialIcons />
+            </div>
+            <div className="mt-6 font-light lg:mt-0 lg:pl-12 grow text-md dark:text-white">
+              <div className="flex flex-row">
+                <div className="hidden grow lg:block"></div>
+                <ul className="mr-10 leading-loose lg:px-4">
+                  <li>
+                    <Link to="/sandbox" prefetch="intent">
+                      Try MyST
+                    </Link>
+                  </li>
+                  <li>
+                    <Link to="/guide" prefetch="intent">
+                      Quickstart Guide
+                    </Link>
+                  </li>
+                  <li>
+                    <a
+                      href="https://github.com/myst-templates"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Templates
+                    </a>
+                  </li>
+                  <li>
+                    <Link to="/overview/ecosystem" prefetch="intent">
+                      Ecosystem
+                    </Link>
+                  </li>
+                </ul>
+                <ul className="px-4 leading-loose">
+                  <li>
+                    <a
+                      href="https://executablebooks.org/en/latest/gallery/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Gallery
+                    </a>
+                  </li>
+                  <li>
+                    <Link to="/spec" prefetch="intent">
+                      Specification
+                    </Link>
+                  </li>
+                  <li>
+                    <a href="https://mep.mystmd.org" target="_blank" rel="noopener noreferrer">
+                      Enhancement Proposals
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="https://myst-parser.readthedocs.io"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Python Tools
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ExecutableBooksFooter />
+    </section>
+  );
+}