@myst-theme/site 0.8.3 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myst-theme/site",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
-    "@myst-theme/common": "^0.8.3",
-    "@myst-theme/diagrams": "^0.8.3",
-    "@myst-theme/frontmatter": "^0.8.3",
-    "@myst-theme/jupyter": "^0.8.3",
-    "@myst-theme/providers": "^0.8.3",
+    "@myst-theme/common": "^0.9.1",
+    "@myst-theme/diagrams": "^0.9.1",
+    "@myst-theme/frontmatter": "^0.9.1",
+    "@myst-theme/jupyter": "^0.9.1",
+    "@myst-theme/providers": "^0.9.1",
     "@radix-ui/react-collapsible": "^1.0.3",
     "classnames": "^2.3.2",
     "lodash.throttle": "^4.1.1",
-    "myst-common": "^1.1.35",
-    "myst-config": "^1.1.35",
-    "myst-demo": "^0.8.3",
-    "myst-spec-ext": "^1.1.35",
-    "myst-to-react": "^0.8.3",
+    "myst-common": "^1.4.0",
+    "myst-config": "^1.4.0",
+    "myst-demo": "^0.9.1",
+    "myst-spec-ext": "^1.4.0",
+    "myst-to-react": "^0.9.1",
     "nbtx": "^0.2.3",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.11",

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './loaders/index.js';
 export * from './components/index.js';
 export * from './pages/index.js';
 export * from './seo/index.js';
+export * from './themeCSS.js';

package/src/seo/meta.ts

@@ -1,7 +1,8 @@
-import type { HtmlMetaDescriptor } from '@remix-run/react';
+import type { HtmlMetaDescriptor, V2_MetaDescriptor } from '@remix-run/react';
 
 type SocialSite = {
   title: string;
+  description?: string;
   twitter?: string;
 };
 
@@ -20,15 +21,38 @@ function allDefined(meta: Record<string, string | null | undefined>): HtmlMetaDe
   return Object.fromEntries(Object.entries(meta).filter(([, v]) => v)) as HtmlMetaDescriptor;
 }
 
-export function getMetaTagsForSite({ title, twitter }: SocialSite): HtmlMetaDescriptor {
+export function getMetaTagsForSite_V1({
+  title,
+  description,
+  twitter,
+}: SocialSite): HtmlMetaDescriptor {
   const meta = {
     title,
+    description,
     'twitter:site': twitter ? `@${twitter.replace('@', '')}` : undefined,
   };
   return allDefined(meta);
 }
 
-export function getMetaTagsForArticle({
+export function getMetaTagsForSite({
+  title,
+  description,
+  twitter,
+}: SocialSite): V2_MetaDescriptor[] {
+  const meta: V2_MetaDescriptor[] = [
+    { title },
+    { property: 'og:title', content: title },
+    { name: 'generator', content: 'mystmd' },
+  ];
+  if (description) {
+    meta.push({ name: 'description', content: description });
+    meta.push({ property: 'og:description', content: description });
+  }
+  if (twitter) meta.push({ name: 'twitter:site', content: `@${twitter.replace('@', '')}` });
+  return meta;
+}
+
+export function getMetaTagsForArticle_V1({
   origin,
   url,
   title,
@@ -55,3 +79,39 @@ export function getMetaTagsForArticle({
   };
   return allDefined(meta);
 }
+
+export function getMetaTagsForArticle({
+  origin,
+  url,
+  title,
+  description,
+  image,
+  twitter,
+  keywords,
+}: SocialArticle): V2_MetaDescriptor[] {
+  const meta: V2_MetaDescriptor[] = [
+    { title },
+    { property: 'og:title', content: title },
+    { name: 'generator', content: 'mystmd' },
+  ];
+  if (description) {
+    meta.push({ name: 'description', content: description });
+    meta.push({ property: 'og:description', content: description });
+  }
+  if (keywords) meta.push({ name: 'keywords', content: keywords.join(', ') });
+  if (origin && url) meta.push({ property: 'og:url', content: `${origin}${url}` });
+  if (image) {
+    meta.push({ name: 'image', content: image });
+    meta.push({ property: 'og:image', content: image });
+  }
+  if (twitter) {
+    meta.push({ name: 'twitter:card', content: image ? 'summary_large_image' : 'summary' });
+    meta.push({ name: 'twitter:creator', content: `@${twitter.replace('@', '')}` });
+    meta.push({ name: 'twitter:title', content: title });
+    if (description) meta.push({ name: 'twitter:description', content: description });
+    if (image) meta.push({ name: 'twitter:image', content: image });
+    meta.push({ name: 'twitter:alt', content: title });
+  }
+
+  return meta;
+}

package/src/themeCSS.ts

@@ -0,0 +1,33 @@
+export type ThemeCssOptions = {
+  numbered_references?: boolean;
+};
+
+type MystThemeVariables = {
+  'cite-group-open'?: '(' | '[' | string;
+  'cite-group-close'?: ')' | ']' | string;
+};
+
+function variables(vars: MystThemeVariables) {
+  const css = Object.entries(vars)
+    .map(([name, value]) => `--${name}: '${value}';`)
+    .join('\n  ');
+  if (!css) return '';
+  return `:root {\n  ${css}}`;
+}
+
+export function themeCSS(options?: ThemeCssOptions) {
+  const numbered_references = !!options?.numbered_references;
+  const citationCss = numbered_references
+    ? { 'cite-group-open': '[', 'cite-group-close': ']' }
+    : {};
+  return variables({ ...citationCss });
+}
+
+export function cssResponse(css: string): Response {
+  return new Response(css, {
+    headers: {
+      'Content-Type': 'text/css',
+      'Cache-Control': 'no-cache',
+    },
+  });
+}