💉 adding className props (#419)

* 💉 adding className props * 🔧 optional classNames
jupyter-book · Jul 3, 2024 · de79758 · de79758
1 parent e7db331
commit de79758
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 22 deletions.
diff --git a/.changeset/hot-glasses-march.md b/.changeset/hot-glasses-march.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+Adding className props to enables precise control of units different grids
diff --git a/packages/site/src/components/Abstract.tsx b/packages/site/src/components/Abstract.tsx
@@ -6,21 +6,23 @@ export function Abstract({
   content,
   title = 'Abstract',
   id = 'abstract',
+  className,
 }: {
   title?: string;
   id?: string;
   content?: GenericParent;
+  className?: string;
 }) {
   if (!content) return null;
   return (
-    <>
+    <div className={className}>
       <h2 id={id} className="mb-3 text-base font-semibold group">
         {title}
         <HashLink id={id} title={`Link to ${title}`} hover className="ml-2" />
       </h2>
       <div className="px-6 py-1 mb-3 rounded-sm bg-slate-50 dark:bg-slate-800">
         <ContentBlocks mdast={content} className="col-body" />
       </div>
-    </>
+    </div>
   );
 }
diff --git a/packages/site/src/components/Backmatter.tsx b/packages/site/src/components/Backmatter.tsx
@@ -1,32 +1,49 @@
 import type { GenericParent } from 'myst-common';
 import { HashLink, MyST } from 'myst-to-react';
 import { getChildren, type KnownParts } from '../utils.js';
+import classNames from 'classnames';
 
-export function BackmatterParts({ parts }: { parts: KnownParts }) {
+export function BackmatterParts({
+  parts,
+  containerClassName,
+  innerClassName,
+}: {
+  parts: KnownParts;
+  containerClassName?: string;
+  innerClassName?: string;
+}) {
   return (
-    <>
-      <Backmatter title="Acknowledgments" id="acknowledgments" content={parts.acknowledgments} />
+    <div className={containerClassName}>
       <Backmatter
+        className={innerClassName}
+        title="Acknowledgments"
+        id="acknowledgments"
+        content={parts.acknowledgments}
+      />
+      <Backmatter
+        className={innerClassName}
         title="Data Availability"
         id="data-availability"
         content={parts.data_availability}
       />
-    </>
+    </div>
   );
 }
 
 export function Backmatter({
   title,
   id,
   content,
+  className,
 }: {
   title: string;
   id: string;
   content?: GenericParent;
+  className?: string;
 }) {
   if (!content) return null;
   return (
-    <div className="flex flex-col w-full md:flex-row group/backmatter">
+    <div className={classNames('flex flex-col w-full md:flex-row group/backmatter', className)}>
       <h2
         id={id}
         className="mt-5 text-base font-semibold group md:w-[200px] self-start md:flex-none opacity-90 group-hover/backmatter:opacity-100"

diff --git a/packages/site/src/components/Bibliography.tsx b/packages/site/src/components/Bibliography.tsx
@@ -5,7 +5,13 @@ import { useState } from 'react';
 
 const HIDE_OVER_N_REFERENCES = 5;
 
-export function Bibliography() {
+export function Bibliography({
+  containerClassName,
+  innerClassName,
+}: {
+  containerClassName?: string;
+  innerClassName?: string;
+}) {
   const references = useReferences();
   const grid = useGridSystemProvider();
   const { order, data } = references?.cite ?? {};
@@ -14,8 +20,11 @@ export function Bibliography() {
   if (!filtered || !data || filtered.length === 0) return null;
   const refs = hidden ? filtered.slice(0, HIDE_OVER_N_REFERENCES) : filtered;
   return (
-    <section id="references" className={classNames(grid, 'subgrid-gap col-screen')}>
-      <div>
+    <section
+      id="references"
+      className={classNames(grid, 'subgrid-gap col-screen', containerClassName)}
+    >
+      <div className={innerClassName}>
         {filtered.length > HIDE_OVER_N_REFERENCES && (
           <button
             onClick={() => setHidden(!hidden)}
@@ -29,7 +38,12 @@ export function Bibliography() {
           <HashLink id="references" title="Link to References" hover className="ml-2" />
         </header>
       </div>
-      <div className="pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300">
+      <div
+        className={classNames(
+          'pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
+          innerClassName,
+        )}
+      >
         <ol>
           {refs.map((label) => {
             const { html } = data[label];

diff --git a/packages/site/src/components/Footnotes.tsx b/packages/site/src/components/Footnotes.tsx
@@ -5,21 +5,35 @@ import type { FootnoteDefinition, FootnoteReference } from 'myst-spec-ext';
 import { HashLink, MyST } from 'myst-to-react';
 import { selectAll } from 'unist-util-select';
 
-export function Footnotes() {
+export function Footnotes({
+  containerClassName,
+  innerClassName,
+}: {
+  containerClassName?: string;
+  innerClassName?: string;
+}) {
   const references = useReferences();
   const grid = useGridSystemProvider();
   const defs = selectAll('footnoteDefinition', references?.article) as FootnoteDefinition[];
   const refs = selectAll('footnoteReference', references?.article) as FootnoteReference[];
   if (defs.length === 0) return null;
   return (
-    <section id="footnotes" className={classNames(grid, 'subgrid-gap col-screen')}>
-      <div>
+    <section
+      id="footnotes"
+      className={classNames(grid, 'subgrid-gap col-screen', containerClassName)}
+    >
+      <div className={innerClassName}>
         <header className="text-lg font-semibold text-stone-900 dark:text-white group">
           Footnotes
           <HashLink id="footnotes" title="Link to Footnotes" hover className="ml-2" />
         </header>
       </div>
-      <div className="pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300">
+      <div
+        className={classNames(
+          'pl-3 mb-8 text-xs text-stone-500 dark:text-stone-300',
+          innerClassName,
+        )}
+      >
         <ol>
           {defs.map((fn) => {
             return (

diff --git a/packages/site/src/components/FrontmatterParts.tsx b/packages/site/src/components/FrontmatterParts.tsx
@@ -6,18 +6,32 @@ export function FrontmatterParts({
   parts,
   keywords,
   hideKeywords,
+  containerClassName,
+  innerClassName,
 }: {
   parts: KnownParts;
   keywords?: string[];
   hideKeywords?: boolean;
+  containerClassName?: string;
+  innerClassName?: string;
 }) {
   if (!parts.abstract && !parts.keypoints && !parts.summary) return null;
   return (
-    <>
-      <Abstract content={parts.abstract} />
-      <Abstract content={parts.keypoints} title="Key Points" id="keypoints" />
-      <Abstract content={parts.summary} title="Plain Language Summary" id="summary" />
-      <Keywords keywords={keywords} hideKeywords={hideKeywords} />
-    </>
+    <div className={containerClassName}>
+      <Abstract className={innerClassName} content={parts.abstract} />
+      <Abstract
+        className={innerClassName}
+        content={parts.keypoints}
+        title="Key Points"
+        id="keypoints"
+      />
+      <Abstract
+        className={innerClassName}
+        content={parts.summary}
+        title="Plain Language Summary"
+        id="summary"
+      />
+      <Keywords className={innerClassName} keywords={keywords} hideKeywords={hideKeywords} />
+    </div>
   );
 }
diff --git a/packages/site/src/components/Keywords.tsx b/packages/site/src/components/Keywords.tsx
@@ -4,13 +4,15 @@ import { HashLink } from 'myst-to-react';
 export function Keywords({
   keywords,
   hideKeywords,
+  className,
 }: {
   keywords?: string[];
   hideKeywords?: boolean;
+  className?: string;
 }) {
   if (hideKeywords || !keywords || keywords.length === 0) return null;
   return (
-    <div className="mb-10 group">
+    <div className={classNames('mb-10 group', className)}>
       <span className="mr-2 font-semibold">Keywords:</span>
       {keywords.map((k, i) => (
         <span