Integrate flowershow packages

package.json

@@ -1,6 +1,8 @@
 {
   "name": "portaljs",
-  "workspaces": ["./packages/*"],
+  "workspaces": [
+    "./packages/*"
+  ],
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
@@ -14,11 +16,11 @@
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.1",
     "@nrwl/cypress": "15.9.2",
-    "@nrwl/eslint-plugin-nx": "^16.0.2",
+    "@nrwl/eslint-plugin-nx": "15.9.2",
     "@nrwl/jest": "15.9.2",
     "@nrwl/js": "15.9.2",
     "@nrwl/linter": "15.9.2",
-    "@nrwl/next": "^15.9.2",
+    "@nrwl/next": "15.9.2",
     "@nrwl/react": "15.9.2",
     "@nrwl/rollup": "15.9.2",
     "@nrwl/workspace": "15.9.2",
@@ -28,13 +30,16 @@
     "@swc/helpers": "~0.5.0",
     "@swc/jest": "0.2.20",
     "@testing-library/react": "14.0.0",
+    "@types/chai": "^4.3.5",
     "@types/jest": "^29.4.0",
+    "@types/mocha": "^10.0.1",
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
     "babel-jest": "^29.4.1",
+    "chai": "^4.3.7",
     "cypress": "^12.2.0",
     "eslint": "~8.15.0",
     "eslint-config-next": "13.1.1",
@@ -44,14 +49,21 @@
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "htmlparser2": "^9.0.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
+    "micromark": "^3.2.0",
+    "mocha": "^10.2.0",
     "nx": "15.9.2",
     "prettier": "^2.6.2",
     "react-test-renderer": "18.2.0",
+    "rehype-stringify": "^9.0.3",
+    "remark": "^14.0.3",
     "swc-loader": "0.1.15",
     "ts-jest": "^29.0.5",
     "ts-node": "10.9.1",
-    "typescript": "~4.9.5"
+    "typescript": "~4.9.5",
+    "unist-util-select": "^4.0.3",
+    "unist-util-visit": "^4.1.2"
   }
 }

packages/core/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/core/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "dist/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/core/README.md

@@ -0,0 +1,3 @@
+# @portaljs/core
+
+Core Portal.JS package containing components, styles, and utils.

packages/core/jest.config.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+export default {
+  displayName: "core",
+  preset: "../../jest.preset.js",
+  transform: {
+    "^.+\\.[tj]sx?$": "babel-jest",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"]
+};

packages/core/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@portaljs/core",
+  "version": "1.0.0",
+  "description": "Core Portal.JS components, configs and utils.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/datopian/portaljs.git",
+    "directory": "packages/core"
+  },
+  "author": "Rufus Pollock",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/datopian/portaljs/issues"
+  },
+  "homepage": "https://github.com/datopian/portaljs#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "dependencies": {
+    "@docsearch/react": "^3.3.3",
+    "@floating-ui/react-dom": "^1.3.0",
+    "@floating-ui/react-dom-interactions": "^0.13.3",
+    "@giscus/react": "^2.2.6",
+    "@headlessui/react": "^1.7.12",
+    "clsx": "^1.2.1",
+    "core-js": "^3.30.2",
+    "disqus-react": "^1.1.5",
+    "framer-motion": "^10.0.1",
+    "kbar": "0.1.0-beta.40",
+    "mdx-mermaid": "^1.3.2",
+    "mermaid": "^10.2.2",
+    "prop-types": "^15.8.1"
+  },
+  "peerDependencies": {
+    "next": "^13.2.1",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/core/project.json

@@ -0,0 +1,45 @@
+{
+  "name": "core",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/core/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nrwl/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "packages/core/dist",
+        "tsConfig": "packages/core/tsconfig.lib.json",
+        "project": "packages/core/package.json",
+        "entryFile": "packages/core/src/index.ts",
+        "format": ["esm"],
+        "generateExportsField": true,
+        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "packages/core/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/core/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/core/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  }
+}

packages/core/src/config/default.ts

@@ -0,0 +1,31 @@
+export const defaultConfig = {
+  title: "Flowershow",
+  description: "",
+  showEditLink: false,
+  showToc: true,
+  showSidebar: false,
+  showLinkPreviews: true,
+  author: "",
+  authorLogo: "",
+  domain: "",
+  // Google analytics key e.g. G-XXXX
+  analytics: "",
+  // content source directory for markdown files
+  // DO NOT CHANGE THIS VALUE
+  // if you have your notes in another (external) directory,
+  // /content dir should be a symlink to that directory
+  content: "content",
+  avatarPlaceholder: "/_flowershow/avatarplaceholder.png",
+  contentExclude: [],
+  contentInclude: [],
+  blogDir: "blog",
+  peopleDir: "people",
+  // Theme
+  theme: {
+    default: "dark",
+    toggleIcon: "/_flowershow/theme-button.svg",
+  },
+  navLinks: [
+    // { href: '/about', name: 'About' },
+  ],
+};

packages/core/src/config/index.ts

@@ -0,0 +1 @@
+export { defaultConfig } from "./default";

packages/core/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./ui";
+export * from "./utils";
+export * from "./config";

packages/core/src/types/index.d.ts

@@ -0,0 +1,7 @@
+export {};
+
+declare global {
+  interface Window {
+    gtag: any; // TODO
+  }
+}

packages/core/src/ui/Avatar/Avatar.tsx

@@ -0,0 +1,24 @@
+// TODO
+type Props = any;
+
+export const Avatar: React.FC<Props> = ({ name, img, href }) => {
+  const Component = href ? "a" : "div";
+  return (
+    <Component href={href} className="group block flex-shrink-0 mt-2">
+      <div className="flex items-center space-x-2">
+        <div>
+          <img
+            className="inline-block h-9 w-9 rounded-full"
+            src={img}
+            alt={name}
+          />
+        </div>
+        <div className="ml-3">
+          <p className="text-sm font-medium text-primary dark:text-primary-dark">
+            {name}
+          </p>
+        </div>
+      </div>
+    </Component>
+  );
+};

packages/core/src/ui/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar } from "./Avatar";

packages/core/src/ui/Base/BaseLink.tsx

@@ -0,0 +1,15 @@
+import Link from "next/link.js";
+import { forwardRef } from "react";
+
+const BaseLink = forwardRef((props: any, ref) => {
+  const { href, children, ...rest } = props;
+  return (
+    <Link href={href} ref={ref} {...rest}>
+      {children}
+    </Link>
+  );
+});
+
+BaseLink.displayName = "BaseLink";
+
+export { BaseLink };

packages/core/src/ui/Base/CustomLink.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link.js";
+import { Tooltip } from "../Tooltip";
+import TwitterEmbed from "./TwitterEmbed";
+
+// TODO it's a mess, move twitter embeds support to remark-embed
+const TWITTER_REGEX =
+  /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/(\d+)/;
+
+interface Props {
+  href: string;
+  data: any;
+  usehook: any;
+  preview: boolean;
+  children: React.ReactNode;
+  className?: string;
+  [x: string]: unknown;
+}
+
+export const CustomLink: React.FC<Props> = ({
+  data,
+  usehook,
+  preview,
+  ...props
+}) => {
+  const { href } = props;
+  const isInternalLink = !href.startsWith("http");
+  // eslint-disable-next-line no-useless-escape
+  const isHeadingLink = href.startsWith("#");
+  const isTwitterLink = TWITTER_REGEX.test(href);
+
+  // Use next link for pages within app and <a> for external links.
+  // https://nextjs.org/learn/basics/navigate-between-pages/client-side
+  if (isInternalLink) {
+    if (preview && !isHeadingLink) {
+      return (
+        <Tooltip
+          {...props}
+          data={data} // TODO again, why do we pass all documents here?!
+          usehook={usehook}
+          render={(tooltipTriggerProps) => <Link {...tooltipTriggerProps} />}
+        />
+      );
+    } else {
+      return <Link {...props} />;
+    }
+  }
+
+  if (isTwitterLink) {
+    return <TwitterEmbed url={href} {...props} />;
+  }
+
+  return (
+    <a target="_blank" rel="noopener noreferrer" {...props}>
+      {props.children}
+    </a>
+  );
+};

packages/core/src/ui/Base/ThemeSelector.tsx

@@ -0,0 +1,44 @@
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+interface Props {
+  defaultTheme: "dark" | "light";
+  toggleIcon: string;
+}
+
+export const ThemeSelector: React.FC<Props> = ({
+  defaultTheme,
+  toggleIcon,
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => setMounted(true), []);
+
+  /** Avoid Hydration Mismatch
+   *  https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
+   */
+  if (!mounted) return null;
+
+  // TODO why?
+  if (!defaultTheme) return null;
+
+  return (
+    <button
+      type="button"
+      className={`
+        min-w-fit transition duration-500
+        ${theme === "dark" ? "grayscale opacity-70" : ""}
+      `}
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      <img
+        src={toggleIcon}
+        alt="toggle theme"
+        width={24}
+        height={24}
+        className="max-w-24 max-h-24"
+      />
+    </button>
+  );
+};