feat: copy the latest docu-notion-styles.css to output

Then it will be available to point to each site's docusaurus.config.js

package.json

@@ -13,6 +13,7 @@
     "// test out with a private sample notion db": "",
     "large-site-test": "npm run ts -- -n $SIL_BLOOM_DOCS_NOTION_TOKEN -r $SIL_BLOOM_DOCS_NOTION_ROOT_PAGE  --locales en,fr   --log-level debug",
     "pull-test-tagged": "npm run ts -- -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_TEST_ROOT_PAGE_ID  --log-level debug --status-tag test",
+    "pull-test-css": "npm run ts -- --css-output-directory ./test/css -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_TEST_ROOT_PAGE_ID  --log-level debug --status-tag test",
     "pull-sample-site": "npm run ts -- -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_SAMPLE_ROOT_PAGE  --log-level debug",
     "// test with a semi-stable/public site:": "",
     "pull-sample": "npm run ts -- -n $DOCU_NOTION_INTEGRATION_TOKEN -r $DOCU_NOTION_SAMPLE_ROOT_PAGE -m ./sample --locales en,es,fr,de --log-level verbose",

src/css/notion-styles.css → src/css/docu-notion-styles.css

@@ -1,58 +1,60 @@
-/* Note, I haven't figure out how a Docusaurus app can actually include this, yet.
-  So currently this has to be duplicated by the client.
-*/
-
-/* Copied from
-    https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css#L934
-    and
-    https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css#L1063
-*/
-.notion-column {
-  display: flex;
-  flex-direction: column;
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-
-.notion-column > *:first-child {
-  margin-top: 0;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.notion-column > *:last-child {
-  margin-left: 0;
-  margin-right: 0;
-  margin-bottom: 0;
-}
-
-.notion-row {
-  display: flex;
-  overflow: hidden;
-  width: 100%;
-  max-width: 100%;
-}
-
-@media (max-width: 640px) {
-  .notion-row {
-    flex-direction: column;
-  }
-
-  .notion-row .notion-column {
-    width: 100% !important;
-  }
-
-  .notion-row .notion-spacer {
-    display: none;
-  }
-}
-
-.notion-spacer {
-  /* This matches the value in ColumnTransformer.ts */
-  width: calc(min(32px, 4vw));
-}
-
-.notion-spacer:last-child {
-  display: none;
-}
-/* End copied from NotionX */
+/* This should be added to the docusaurus.config.js in order to show some notion things correctly.
+See the option: --css-output-directory 
+See the docusaurus docs: https://docusaurus.io/docs/styling-layout
+See the use in the docu-notion-sample-site: https://github.com/sillsdev/docu-notion-sample-site/blob/main/docusaurus.config.js
+*/
+
+/* Copied from
+    https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css#L934
+    and
+    https://github1s.com/NotionX/react-notion-x/blob/master/packages/react-notion-x/src/styles.css#L1063
+*/
+.notion-column {
+  display: flex;
+  flex-direction: column;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.notion-column > *:first-child {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.notion-column > *:last-child {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+
+.notion-row {
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  .notion-row {
+    flex-direction: column;
+  }
+
+  .notion-row .notion-column {
+    width: 100% !important;
+  }
+
+  .notion-row .notion-spacer {
+    display: none;
+  }
+}
+
+.notion-spacer {
+  /* This matches the value in ColumnTransformer.ts */
+  width: calc(min(32px, 4vw));
+}
+
+.notion-spacer:last-child {
+  display: none;
+}
+/* End copied from NotionX */

src/run.ts

@@ -1,9 +1,11 @@
+import * as fs from "fs-extra";
 import { Option, program } from "commander";
 import { setLogLevel } from "./log";
 
-import { notionPull, DocuNotionOptions } from "./pull";
+import { notionPull } from "./pull";
+import path from "path";
 
-export function run() {
+export async function run(): Promise<void> {
   const pkg = require("../package.json");
   // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
   console.log(`docu-notion version ${pkg.version}`);
@@ -21,9 +23,14 @@ export function run() {
     )
     .option(
       "-m, --markdown-output-path  <string>",
-      "Root of the hierarchy for md files. WARNING: node-pull-mdx will delete files from this directory. Note also that if it finds localized images, it will create an i18n/ directory as a sibling.",
+      "Root of the hierarchy for md files. WARNING: docu-notion will delete files from this directory. Note also that if it finds localized images, it will create an i18n/ directory as a sibling.",
       "./docs"
     )
+    .option(
+      "--css-output-directory  <string>",
+      "docu-notion has a docu-notion-styles.css file that you will need to use to get things like notion columns to look right. This option specifies where that file should be copied to.",
+      "./css"
+    )
     .option(
       "-t, --status-tag  <string>",
       "Database pages without a Notion page property 'status' matching this will be ignored. Use '*' to ignore status altogether.",
@@ -54,8 +61,27 @@ export function run() {
   program.showHelpAfterError();
   program.parse();
   setLogLevel(program.opts().logLevel);
-  console.log(JSON.stringify(program.opts));
-  notionPull(program.opts() as DocuNotionOptions).then(() =>
+  console.log(JSON.stringify(program.opts()));
+
+  // copy in the this version of the css needed to make columns (and maybe other things?) work
+  let pathToCss = "";
+  try {
+    pathToCss = require.resolve(
+      "@sillsdev/docu-notion/dist/docu-notion-styles.css"
+    );
+  } catch (e) {
+    // when testing from the docu-notion project itself:
+    pathToCss = "./src/css/docu-notion-styles.css";
+  }
+  // make any missing parts of the path exist
+  fs.ensureDirSync(program.opts().cssOutputDirectory);
+  fs.copyFileSync(
+    pathToCss,
+    path.join(program.opts().cssOutputDirectory, "docu-notion-styles.css")
+  );
+
+  // pull and convert
+  await notionPull(program.opts()).then(() =>
     console.log("docu-notion Finished.")
   );
 }