🌗 Remote CDN and theme button for the article theme (#468)

Co-authored-by: Rowan Cockett <[email protected]>

.changeset/nice-suns-crash.md

@@ -0,0 +1,6 @@
+---
+"@myst-theme/article": patch
+"@myst-theme/book": patch
+---
+
+Remote CDN and theme button for the article theme

README.md

@@ -109,6 +109,12 @@ To run on a specific port (for example, developing locally between two projects)
 myst start --headless --server-port 3111
 CONTENT_CDN_PORT=3111 npm run theme:book
 ```
+To connect to a remote content server, set the `CONTENT_CDN` environment variable:
+
+```bash
+CONTENT_CDN=https://remote.example.com npm run theme:book
+CONTENT_CDN=https://remote.example.com npm run theme:article
+```
 
 ## Deployment
 

themes/article/app/components/ArticlePageAndNavigation.tsx

@@ -1,10 +1,14 @@
 import { GridSystemProvider, TabStateProvider, UiStateProvider } from '@myst-theme/providers';
+import { ThemeButton } from '@myst-theme/site';
 
 export function ArticlePageAndNavigation({ children }: { children: React.ReactNode }) {
   return (
     <UiStateProvider>
       <TabStateProvider>
         <GridSystemProvider gridSystem="article-left-grid">
+        <div className="fixed top-4 right-4 z-50">
+            <ThemeButton />
+        </div>
           <article className="article content article-left-grid subgrid-gap">{children}</article>
         </GridSystemProvider>
       </TabStateProvider>

themes/article/app/utils/loaders.server.ts

@@ -11,7 +11,7 @@ import {
 import { responseNoArticle, responseNoSite, getDomainFromRequest } from '@myst-theme/site';
 
 const CONTENT_CDN_PORT = process.env.CONTENT_CDN_PORT ?? '3100';
-const CONTENT_CDN = `http://localhost:${CONTENT_CDN_PORT}`;
+const CONTENT_CDN = process.env.CONTENT_CDN ?? `http://localhost:${CONTENT_CDN_PORT}`;
 
 export async function getConfig(): Promise<SiteManifest> {
   const url = `${CONTENT_CDN}/config.json`;

themes/book/app/utils/loaders.server.ts

@@ -11,7 +11,7 @@ import { redirect } from '@remix-run/node';
 import { responseNoArticle, responseNoSite, getDomainFromRequest } from '@myst-theme/site';
 
 const CONTENT_CDN_PORT = process.env.CONTENT_CDN_PORT ?? '3100';
-const CONTENT_CDN = `http://localhost:${CONTENT_CDN_PORT}`;
+const CONTENT_CDN = process.env.CONTENT_CDN ?? `http://localhost:${CONTENT_CDN_PORT}`;
 
 export async function getConfig(): Promise<SiteManifest> {
   const url = `${CONTENT_CDN}/config.json`;