@myst-theme/site 0.0.17

package/src/loaders/theme.server.ts

@@ -0,0 +1,47 @@
+import { createCookieSessionStorage, json } from '@remix-run/node';
+import { isTheme, Theme } from '@myst-theme/providers';
+import type { ActionFunction } from '@remix-run/node';
+
+export const themeStorage = createCookieSessionStorage({
+  cookie: {
+    name: 'theme',
+    secure: true,
+    secrets: ['secret'],
+    sameSite: 'lax',
+    path: '/',
+    httpOnly: true,
+  },
+});
+
+async function getThemeSession(request: Request) {
+  const session = await themeStorage.getSession(request.headers.get('Cookie'));
+  return {
+    getTheme: () => {
+      const themeValue = session.get('theme');
+      return isTheme(themeValue) ? themeValue : Theme.light;
+    },
+    setTheme: (theme: Theme) => session.set('theme', theme),
+    commit: () => themeStorage.commitSession(session, { expires: new Date('2100-01-01') }),
+  };
+}
+
+export { getThemeSession };
+
+export const setThemeAPI: ActionFunction = async ({ request }) => {
+  const themeSession = await getThemeSession(request);
+  const data = await request.json();
+  const { theme } = data ?? {};
+  if (!isTheme(theme)) {
+    return json({
+      success: false,
+      message: `Invalid theme: "${theme}".`,
+    });
+  }
+  themeSession.setTheme(theme as Theme);
+  return json(
+    { success: true, theme },
+    {
+      headers: { 'Set-Cookie': await themeSession.commit() },
+    },
+  );
+};

package/src/loaders/utils.ts

@@ -0,0 +1,145 @@
+import type { MinifiedOutput } from '@curvenote/nbtx';
+import { walkPaths } from '@curvenote/nbtx';
+import type { SiteManifest } from 'myst-config';
+import { selectAll } from 'unist-util-select';
+import type { Image as ImageSpec, Link as LinkSpec } from 'myst-spec';
+import type { FooterLinks, Heading, NavigationLink, PageLoader } from '../types';
+
+type Image = ImageSpec & { urlOptimized?: string };
+type Link = LinkSpec & { static?: boolean };
+type Output = { data?: MinifiedOutput[] };
+
+type ManifestProject = Required<SiteManifest>['projects'][0];
+type ManifestProjectItem = ManifestProject['pages'][0];
+
+export function getProject(
+  config?: SiteManifest,
+  projectSlug?: string,
+): ManifestProject | undefined {
+  if (!projectSlug || !config) return undefined;
+  const project = config.projects?.find((p) => p.slug === projectSlug);
+  return project;
+}
+
+export function getProjectHeadings(
+  config: SiteManifest,
+  projectSlug?: string,
+  opts: { addGroups: boolean } = { addGroups: false },
+): Heading[] | undefined {
+  const project = getProject(config, projectSlug);
+  if (!project) return undefined;
+  const headings: Heading[] = [
+    {
+      title: project.title,
+      slug: project.index,
+      path: `/${project.slug}`,
+      level: 'index',
+    },
+    ...project.pages.map((p) => {
+      if (!('slug' in p)) return p;
+      return { ...p, path: `/${project.slug}/${p.slug}` };
+    }),
+  ];
+  if (opts.addGroups) {
+    let lastTitle = project.title;
+    return headings.map((heading) => {
+      if (!heading.slug || heading.level === 'index') {
+        lastTitle = heading.title;
+      }
+      return { ...heading, group: lastTitle };
+    });
+  }
+  return headings;
+}
+
+function getHeadingLink(currentSlug: string, headings?: Heading[]): NavigationLink | undefined {
+  if (!headings) return undefined;
+  const linkIndex = headings.findIndex(({ slug }) => !!slug && slug !== currentSlug);
+  const link = headings[linkIndex];
+  if (!link?.path) return undefined;
+  return {
+    title: link.title,
+    url: link.path,
+    group: link.group,
+  };
+}
+
+export function getFooterLinks(
+  config?: SiteManifest,
+  projectSlug?: string,
+  slug?: string,
+): FooterLinks {
+  if (!projectSlug || !slug || !config) return {};
+  const pages = getProjectHeadings(config, projectSlug, {
+    addGroups: true,
+  });
+  const found = pages?.findIndex(({ slug: s }) => s === slug) ?? -1;
+  if (found === -1) return {};
+  const prev = getHeadingLink(slug, pages?.slice(0, found).reverse());
+  const next = getHeadingLink(slug, pages?.slice(found + 1));
+  const footer: FooterLinks = {
+    navigation: { prev, next },
+  };
+  return footer;
+}
+
+type UpdateUrl = (url: string) => string;
+
+export function updateSiteManifestStaticLinksInplace(
+  data: SiteManifest,
+  updateUrl: UpdateUrl,
+): SiteManifest {
+  data.actions?.forEach((action) => {
+    if (!action.static) return;
+    action.url = updateUrl(action.url);
+  });
+  if (data.logo) data.logo = updateUrl(data.logo);
+  // Update the thumbnails to point at the CDN
+  data.projects?.forEach((project) => {
+    project.pages
+      .filter((page): page is ManifestProjectItem => 'slug' in page)
+      .forEach((page) => {
+        if (page.thumbnail) page.thumbnail = updateUrl(page.thumbnail);
+        if (page.thumbnailOptimized) page.thumbnailOptimized = updateUrl(page.thumbnailOptimized);
+      });
+  });
+  return data;
+}
+
+export function updatePageStaticLinksInplace(data: PageLoader, updateUrl: UpdateUrl): PageLoader {
+  if (data?.frontmatter?.thumbnail) {
+    data.frontmatter.thumbnail = updateUrl(data.frontmatter.thumbnail);
+  }
+  if (data?.frontmatter?.thumbnailOptimized) {
+    data.frontmatter.thumbnailOptimized = updateUrl(data.frontmatter.thumbnailOptimized);
+  }
+  if (data?.frontmatter?.exports) {
+    data.frontmatter.exports = data.frontmatter.exports.map((exp) => {
+      if (!exp.url) return exp;
+      return { ...exp, url: updateUrl(exp.url) };
+    });
+  }
+  // Fix all of the images to point to the CDN
+  const images = selectAll('image', data.mdast) as Image[];
+  images.forEach((node) => {
+    node.url = updateUrl(node.url);
+    if (node.urlOptimized) {
+      node.urlOptimized = updateUrl(node.urlOptimized);
+    }
+  });
+  const links = selectAll('link,linkBlock,card', data.mdast) as Link[];
+  const staticLinks = links.filter((node) => node.static);
+  staticLinks.forEach((node) => {
+    // These are static links to thinks like PDFs or other referenced files
+    node.url = updateUrl(node.url);
+  });
+  const outputs = selectAll('output', data.mdast) as Output[];
+  outputs.forEach((node) => {
+    if (!node.data) return;
+    walkPaths(node.data, (path, obj) => {
+      obj.path = updateUrl(path);
+      obj.content = updateUrl(obj.content as string);
+    });
+  });
+  return data;
+}

package/src/pages/Article.tsx

@@ -0,0 +1,31 @@
+import { ReferencesProvider } from '@myst-theme/providers';
+import { FrontmatterBlock } from '@myst-theme/frontmatter';
+import { Bibliography, ContentBlocks, FooterLinksBlock } from '../components';
+import { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
+import { ErrorProjectNotFound } from './ErrorProjectNotFound';
+import type { PageLoader } from '../types';
+
+export function ArticlePage({ article }: { article: PageLoader }) {
+  const { hide_title_block, hide_footer_links } = (article.frontmatter as any)?.design ?? {};
+  return (
+    <ReferencesProvider
+      references={{ ...article.references, article: article.mdast }}
+      frontmatter={article.frontmatter}
+    >
+      {!hide_title_block && (
+        <FrontmatterBlock kind={article.kind} frontmatter={article.frontmatter} />
+      )}
+      <ContentBlocks mdast={article.mdast} />
+      <Bibliography />
+      {!hide_footer_links && <FooterLinksBlock links={article.footer} />}
+    </ReferencesProvider>
+  );
+}
+
+export function ProjectPageCatchBoundary() {
+  return <ErrorProjectNotFound />;
+}
+
+export function ArticlePageCatchBoundary() {
+  return <ErrorDocumentNotFound />;
+}

package/src/pages/ErrorDocumentNotFound.tsx

@@ -0,0 +1,10 @@
+export function ErrorDocumentNotFound() {
+  return (
+    <>
+      <h1>Document Not Found</h1>
+      <p>
+        Take me <a href="/">home</a>.
+      </p>
+    </>
+  );
+}

package/src/pages/ErrorProjectNotFound.tsx

@@ -0,0 +1,10 @@
+export function ErrorProjectNotFound() {
+  return (
+    <>
+      <h1>Project Not Found</h1>
+      <p>
+        Take me <a href="/">home</a>.
+      </p>
+    </>
+  );
+}

package/src/pages/ErrorSiteNotFound.tsx

@@ -0,0 +1,30 @@
+export function ErrorSiteNotFound() {
+  return (
+    <>
+      <h1>No Site Found</h1>
+      <p>No website is available at this url, please double check the url.</p>
+      <h3>What&apos;s next?</h3>
+      <p>
+        If you are expecting to see <span className="font-semibold">your website</span> here and you
+        think that something has gone wrong, please send an email to{' '}
+        <a
+          href={`mailto:support@curvenote.com?subject=Website%20Unavailable&body=${encodeURIComponent(
+            `My website is not available. 😥`,
+          )}`}
+        >
+          support@curvenote.com
+        </a>
+        , or let us know on our <a href="https://slack.curvenote.dev">community slack</a>, and
+        we&apos;ll help out.
+      </p>
+      <p>
+        Or create a new temporary website from Markdown and Jupyter Notebooks using{' '}
+        <a href="https://try.curvenote.com">try.curvenote.com</a>.
+      </p>
+      <p>
+        Or find out more about Curvenote&apos;s scientific writing, collaboration and publishing
+        tools at <a href="https://curvenote.com">curvenote.com</a>.
+      </p>
+    </>
+  );
+}

package/src/pages/Root.tsx

@@ -0,0 +1,91 @@
+import type { SiteManifest } from 'myst-config';
+import type { SiteLoader } from '../types';
+import { SiteProvider, Theme, ThemeProvider } from '@myst-theme/providers';
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useCatch,
+  useLoaderData,
+} from '@remix-run/react';
+import { ContentReload, renderers } from '../components';
+import { Analytics } from '../seo';
+import { ErrorSiteNotFound } from './ErrorSiteNotFound';
+
+export function Document({
+  children,
+  theme,
+  config,
+  title,
+  CONTENT_CDN_PORT,
+}: {
+  children: React.ReactNode;
+  theme: Theme;
+  config?: SiteManifest;
+  title?: string;
+  CONTENT_CDN_PORT?: number | string;
+}) {
+  return (
+    <html lang="en" className={theme}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        {title && <title>{title}</title>}
+        <Meta />
+        <Links />
+        <Analytics
+          analytics_google={config?.analytics_google}
+          analytics_plausible={config?.analytics_plausible}
+        />
+      </head>
+      <body className="m-0 transition-colors duration-500 bg-white dark:bg-stone-900">
+        <ThemeProvider theme={theme} renderers={renderers}>
+          <SiteProvider config={config}>{children}</SiteProvider>
+        </ThemeProvider>
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+        <ContentReload port={CONTENT_CDN_PORT} />
+      </body>
+    </html>
+  );
+}
+
+export function App() {
+  const { theme, config, CONTENT_CDN_PORT } = useLoaderData<SiteLoader>();
+  return (
+    <Document theme={theme} config={config} CONTENT_CDN_PORT={CONTENT_CDN_PORT}>
+      <Outlet />
+    </Document>
+  );
+}
+
+export function AppCatchBoundary() {
+  const caught = useCatch();
+  return (
+    <Document theme={Theme.light} title={caught.statusText}>
+      <article className="content">
+        <main className="error-content">
+          <ErrorSiteNotFound />
+        </main>
+      </article>
+    </Document>
+  );
+}
+
+export function AppDebugErrorBoundary({ error }: { error: { message: string; stack: string } }) {
+  return (
+    <Document theme={Theme.light} title="Error">
+      <div className="mt-16">
+        <main className="error-content">
+          <h1>An Error Occurred</h1>
+          <code>{error.message}</code>
+          <pre>{error.stack}</pre>
+        </main>
+      </div>
+    </Document>
+  );
+}

package/src/pages/index.ts

@@ -0,0 +1,5 @@
+export { ErrorProjectNotFound } from './ErrorProjectNotFound';
+export { ErrorDocumentNotFound } from './ErrorDocumentNotFound';
+export { ErrorSiteNotFound } from './ErrorSiteNotFound';
+export { ArticlePage, ArticlePageCatchBoundary, ProjectPageCatchBoundary } from './Article';
+export { App, Document, AppCatchBoundary, AppDebugErrorBoundary } from './Root';

package/src/seo/analytics.tsx

@@ -0,0 +1,34 @@
+type SiteAnalytics = {
+  analytics_google?: string;
+  analytics_plausible?: string;
+};
+
+const getGoogleAnalyticsScript = (tag: string) =>
+  `window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${tag}');`;
+
+export function Analytics({ analytics_google, analytics_plausible }: SiteAnalytics) {
+  return (
+    <>
+      {analytics_plausible && (
+        <script
+          defer
+          data-domain={analytics_plausible}
+          src="https://plausible.io/js/plausible.js"
+        ></script>
+      )}
+      {analytics_google && (
+        <>
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${analytics_google}`}
+          ></script>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: getGoogleAnalyticsScript(analytics_google),
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+}

package/src/seo/index.ts

@@ -0,0 +1,4 @@
+export * from './analytics';
+export * from './meta';
+export * from './sitemap';
+export * from './robots';

package/src/seo/meta.ts

@@ -0,0 +1,57 @@
+import type { HtmlMetaDescriptor } from '@remix-run/react';
+
+type SocialSite = {
+  title: string;
+  twitter?: string;
+};
+
+type SocialArticle = {
+  origin: string;
+  url: string;
+  // TODO: canonical
+  title: string;
+  description?: string;
+  image?: string | null;
+  twitter?: string;
+  keywords?: string[];
+};
+
+function allDefined(meta: Record<string, string | null | undefined>): HtmlMetaDescriptor {
+  return Object.fromEntries(Object.entries(meta).filter(([, v]) => v)) as HtmlMetaDescriptor;
+}
+
+export function getMetaTagsForSite({ title, twitter }: SocialSite): HtmlMetaDescriptor {
+  const meta = {
+    title,
+    'twitter:site': twitter ? `@${twitter.replace('@', '')}` : undefined,
+  };
+  return allDefined(meta);
+}
+
+export function getMetaTagsForArticle({
+  origin,
+  url,
+  title,
+  description,
+  image,
+  twitter,
+  keywords,
+}: SocialArticle): HtmlMetaDescriptor {
+  const meta = {
+    title,
+    description,
+    keywords: keywords?.join(', '),
+    image,
+    'og:url': origin && url ? `${origin}${url}` : undefined,
+    'og:title': title,
+    'og:description': description,
+    'og:image': image,
+    'twitter:card': image ? 'summary_large_image' : 'summary',
+    'twitter:creator': twitter ? `@${twitter.replace('@', '')}` : undefined,
+    'twitter:title': title,
+    'twitter:description': description,
+    'twitter:image': image,
+    'twitter:alt': title,
+  };
+  return allDefined(meta);
+}

package/src/seo/robots.ts

@@ -0,0 +1,24 @@
+type Options = { allow?: string[]; disallow?: string[]; sitemap?: string[] };
+
+export function createRobotsTxt(domain: string, options?: Options) {
+  const allow = options?.allow ?? ['/'];
+  const disallow = options?.disallow ?? [];
+  const sitemap = options?.sitemap ?? ['/sitemap.xml'];
+  const rules = [
+    ...allow.map((path) => `Allow: ${path}`),
+    ...disallow.map((path) => `Disallow: ${path}`),
+    ...sitemap.map((path) => `Sitemap: ${domain}${path}`),
+  ];
+  return `# https://www.robotstxt.org/robotstxt.html
+
+User-agent: *
+${rules.join('\n')}
+`;
+}
+
+export function createRobotsTxtResponse(domain: string, options?: Options) {
+  return new Response(createRobotsTxt(domain, options), {
+    status: 200,
+    headers: { 'Content-Type': 'text/plain' },
+  });
+}