Integrate flowershow packages (#923)

* [packages][m]: mv @flowershow/core package here

* [packages/core][xs]: rename to @portaljs/core

* [package.json][xs]: setup npm workspaces

* [packages/core][xs]:replace deprecated rollup executor

* [core/package.json][s]: fix mermaid versions

* [core/tsconfig][xs]: rm extends

* [core/jest.config][xs]: rm coverageDirectory

* [core/package.json][xs]: install core-js

* [packages.json][s]:use same version for all nrwl packages

* [core/.eslintrc][xs]: adjust ignorePatterns

* [core/project.json][xs]: rm publish targets

* [packages][m]: mv @flowershow/remark-wiki-link here

* [packages][m]: mv @flowershow/remark-wiki-link here

* [packages][m]: mv @flowershow/remark-embed here

* [remark-callouts/project.json][xs]: adjst test pattern

* [package.json][s]: install missing deps

* [remark-callouts][xs]: adjst fields in package.json

* [remark-callouts][s]: rm pubish targets and adjst build executor

* [remark-embed/jest.config][xs]: rm unknown option coverageDirectory

* [remark-embed][xs]: rm publish targets

* [remark-embed][s]: rename to @portaljs/remark-embed

* [remark-wiki-link/eslintrc][xs]:adjst ignorePatterns

* [package.json][xs]: install missing deps

* [remark-wiki-link/test][xs]:specify format

- also temporarily force any type on htmlExtension

* [remark-wiki-link/README][xs]: replace @flowershow with @portaljs

* [remark-wiki-link][xs]:rm old changelog

* [remark-wiki-link][xs]: adjst package.json

* [remark-wiki-link/project.json][xs]: rm publish targets

* [core][s]: rm old changelog

* [core/README][xs]:correct scope name

* [remark-callouts/README][xs]: add @portaljs to pckg name

* [remark-embed/README][xs]: add @portaljs to pckg name

* [package-lock.json][xs]: refresh after rebasing on main

packages/core/src/ui/Comments/Disqus.tsx

@@ -0,0 +1,25 @@
+import { DiscussionEmbed } from "disqus-react";
+
+export interface DisqusConfig {
+  provider: "disqus";
+  pages?: Array<string>;
+  config: {
+    shortname: string;
+  };
+}
+
+export type DisqusProps = DisqusConfig["config"] & {
+  slug?: string;
+};
+
+export const Disqus: React.FC<DisqusProps> = ({ shortname, slug }) => {
+  return (
+    <DiscussionEmbed
+      shortname={shortname}
+      config={{
+        url: window?.location?.href,
+        identifier: slug,
+      }}
+    />
+  );
+};

packages/core/src/ui/Comments/Giscus.tsx

@@ -0,0 +1,53 @@
+import Giscus, { BooleanString, Mapping, Repo } from "@giscus/react";
+import { useTheme } from "next-themes";
+
+export interface GiscusConfig {
+  provider: "giscus";
+  pages?: Array<string>;
+  config: {
+    theme?: string;
+    mapping: Mapping;
+    repo: Repo;
+    repositoryId: string;
+    category: string;
+    categoryId: string;
+    reactions: BooleanString;
+    metadata: BooleanString;
+    inputPosition?: string;
+    lang?: string;
+  };
+}
+
+export type GiscusProps = GiscusConfig["config"];
+
+export const GiscusReactComponent: React.FC<GiscusProps> = ({
+  repo,
+  repositoryId,
+  category,
+  categoryId,
+  reactions = "0",
+  metadata = "0",
+  mapping = "pathname",
+  theme = "light",
+}) => {
+  const { theme: nextTheme, resolvedTheme } = useTheme();
+  const commentsTheme =
+    nextTheme === "dark" || resolvedTheme === "dark"
+      ? "transparent_dark"
+      : theme;
+
+  return (
+    <Giscus
+      repo={repo}
+      repoId={repositoryId}
+      category={category}
+      categoryId={categoryId}
+      mapping={mapping}
+      inputPosition="top"
+      reactionsEnabled={reactions}
+      emitMetadata={metadata}
+      // TODO: remove transparent_dark after theme toggle fix
+      theme={nextTheme ? commentsTheme : "transparent_dark"}
+    />
+  );
+};

packages/core/src/ui/Comments/Utterances.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useCallback } from "react";
+import { useTheme } from "next-themes";
+
+export interface UtterancesConfig {
+  provider: "utterances";
+  pages?: Array<string>;
+  config: {
+    theme?: string;
+    repo: string;
+    label: string;
+    issueTerm: string;
+  };
+}
+
+export type UtterancesProps = UtterancesConfig["config"];
+
+export const Utterances: React.FC<UtterancesProps> = ({
+  repo,
+  label = "comments",
+  issueTerm = "pathname",
+  theme = "github-light",
+}) => {
+  const { theme: nextTheme, resolvedTheme } = useTheme();
+  // TODO: remove preferred-color-scheme after theme toggle fix
+  const commentsTheme = nextTheme
+    ? nextTheme === "dark" || resolvedTheme === "dark"
+      ? "github-dark"
+      : theme
+    : "preferred-color-scheme";
+
+  const COMMENTS_ID = "comments-container";
+
+  const LoadComments = useCallback(() => {
+    const script = document.createElement("script");
+    script.src = "https://utteranc.es/client.js";
+    script.setAttribute("repo", repo);
+    script.setAttribute("issue-term", issueTerm);
+    script.setAttribute("label", label);
+    script.setAttribute("theme", commentsTheme);
+    script.setAttribute("crossorigin", "anonymous");
+    script.async = true;
+
+    const comments = document.getElementById(COMMENTS_ID);
+    if (comments) comments.appendChild(script);
+
+    return () => {
+      const comments = document.getElementById(COMMENTS_ID);
+      if (comments) comments.innerHTML = "";
+    };
+  }, [commentsTheme, issueTerm]);
+
+  // Reload on theme change
+  useEffect(() => {
+    LoadComments();
+  }, [LoadComments]);
+
+  // Added `relative` to fix a weird bug with `utterances-frame` position
+  return <div className="utterances-frame relative" id={COMMENTS_ID} />;
+};

packages/core/src/ui/Comments/index.tsx

@@ -0,0 +1,53 @@
+import dynamic from "next/dynamic.js";
+import { GiscusReactComponent, GiscusConfig, GiscusProps } from "./Giscus";
+import { Utterances, UtterancesConfig, UtterancesProps } from "./Utterances";
+import { Disqus, DisqusConfig, DisqusProps } from "./Disqus";
+
+export type CommentsConfig = GiscusConfig | UtterancesConfig | DisqusConfig;
+
+export interface CommentsProps {
+  commentsConfig: CommentsConfig;
+  slug?: string;
+}
+
+const GiscusComponent = dynamic<GiscusProps>(
+  () => {
+    return import("./Giscus").then((mod) => mod.GiscusReactComponent);
+  },
+  { ssr: false }
+);
+
+const UtterancesComponent = dynamic<UtterancesProps>(
+  () => {
+    return import("./Utterances").then((mod) => mod.Utterances);
+  },
+  { ssr: false }
+);
+
+const DisqusComponent = dynamic<DisqusProps>(
+  () => {
+    return import("./Disqus").then((mod) => mod.Disqus);
+  },
+  { ssr: false }
+);
+
+export const Comments = ({ commentsConfig, slug }: CommentsProps) => {
+  switch (commentsConfig.provider) {
+    case "giscus":
+      return <GiscusComponent {...commentsConfig.config} />;
+    case "utterances":
+      return <UtterancesComponent {...commentsConfig.config} />;
+    case "disqus":
+      return <DisqusComponent slug={slug} {...commentsConfig.config} />;
+  }
+};
+
+export { GiscusReactComponent, Utterances, Disqus };
+export type {
+  GiscusConfig,
+  GiscusProps,
+  UtterancesConfig,
+  UtterancesProps,
+  DisqusConfig,
+  DisqusProps,
+};