Version Packages (#1031)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/core/.storybook/main.ts

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
     '@nrwl/react/plugins/storybook',
     'storybook-tailwind-dark-mode'
   ],
@@ -12,6 +13,9 @@ const config: StorybookConfig = {
     name: '@storybook/react-webpack5',
     options: {},
   },
+  docs: {
+    autodocs: 'tag',
+  },
 };
 
 export default config;

packages/core/.storybook/preview.ts

@@ -1,6 +1,9 @@
 import './tailwind-imports.css';
 
 const preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+    },
     globalTypes: {
         darkMode: {
             defaultValue: false, // Enable dark mode by default on all stories

packages/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @portaljs/core
 
+## 1.0.7
+
+### Patch Changes
+
+- [`8d74fd98`](https://github.com/datopian/portaljs/commit/8d74fd98443bb3c0a28325be27b41281b59f3581) Thanks [@olayway](https://github.com/olayway)! - Minor footer style fixes.
+
 ## 1.0.6
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/core",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Core Portal.JS components, configs and utils.",
   "repository": {
     "type": "git",
@@ -46,10 +46,13 @@
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
+    "mdx-mermaid": "2.0.0-rc7",
     "next": "^13.2.1",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "mdx-mermaid": "2.0.0-rc7"
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^7.4.6"
   }
 }

packages/core/src/ui/Layout/Footer.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Footer } from './Footer';
+
+const meta: Meta<typeof Footer> = {
+    component: Footer,
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Footer>;
+
+export const Basic: Story = {
+    args: {
+        author: {
+            name: "John Doe",
+        }
+    },
+};
+
+
+export const Links: Story = {
+    args: {
+        links: [
+            { name: "Link A", href: "#" },
+            { name: "Link B", href: "#" }
+        ],
+        author: {
+            name: "John Doe",
+        }
+    },
+};
+
+
+export const Logo: Story = {
+    args: {
+        links: [
+            { name: "Link A", href: "#" },
+            { name: "Link B", href: "#" }
+        ],
+        author: {
+            name: "John Doe",
+            logo: "https://via.placeholder.com/150"
+        }
+    },
+};

packages/core/src/ui/Layout/Footer.tsx

@@ -3,59 +3,77 @@ import Link from "next/link.js";
 import { AuthorConfig, NavLink } from "../types";
 
 interface Props {
-  links: Array<NavLink>;
-  author: AuthorConfig;
+    author: AuthorConfig;
+    links?: Array<NavLink>;
 }
 
+// TODO replace this with some nice tailwindui footer
 export const Footer: React.FC<Props> = ({ links, author }) => {
-  return (
-    <footer className="bg-background dark:bg-background-dark prose dark:prose-invert max-w-none flex flex-col items-center justify-center w-full h-auto pt-10 pb-20">
-      <div className="flex w-full flex-wrap justify-center">
-        {links.map((item) => (
-          <Link
-            key={item.href}
-            href={item.href}
-            className="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
-          >
-            {/* TODO aria-current={item.current ? "page" : undefined} */}
-            {item.name}
-          </Link>
-        ))}
-      </div>
-      <p className="flex items-center justify-center">
-        Created by
-        <a
-          href={author.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center no-underline"
-        >
-          {author.logo && (
-            <img
-              src={author.logo}
-              alt={author.name}
-              className="my-0 mx-1 h-6 block"
-            />
-          )}
-          {author.name}
-        </a>
-      </p>
-      <p className="flex items-center justify-center">
-        Made with
-        <a
-          href="https://flowershow.app/"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center no-underline"
-        >
-          <img
-            src="https://flowershow.app/images/logo.svg"
-            alt="Flowershow"
-            className="my-0 mx-1 h-6 block"
-          />
-          Flowershow
-        </a>
-      </p>
-    </footer>
-  );
+    return (
+        <footer className="bg-background dark:bg-background-dark text-primary dark:text-primary-dark pt-16 pb-20 px-14 flex flex-col items-center justify-center gap-3">
+            {links && (
+                <div className="flex w-full flex-wrap justify-center mb-2">
+                    {links.map((item) => (
+                        <Link
+                            key={item.href}
+                            href={item.href}
+                            className="inline-flex items-center mx-4 px-1 py-1 text-black hover:text-primary dark:text-white hover:dark:text-primary-dark no-underline font-semibold"
+                        >
+                            {/* TODO aria-current={item.current ? "page" : undefined} */}
+                            {item.name}
+                        </Link>
+                    ))}
+                </div>
+            )}
+            <p className="flex items-center justify-center gap-2">
+                <span>Created by</span>
+                {author.url ? (
+                    <a
+                        href={author.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-1 no-underline font-semibold text-black dark:text-white"
+                    >
+                        {author.logo && (
+                            <img
+                                src={author.logo}
+                                alt="Logo"
+                                className="h-6 block"
+                            />
+                        )}
+                        <span>{author.name}</span>
+                    </a>
+                ) : (
+                    <span
+                        className="flex items-center gap-1 no-underline font-semibold text-black dark:text-white"
+                    >
+                        {author.logo && (
+                            <img
+                                src={author.logo}
+                                alt={author.name}
+                                className="h-6 block"
+                            />
+                        )}
+                        <span>{author.name}</span>
+                    </span>
+                )}
+            </p>
+            <p className="flex items-center justify-center gap-1">
+                <span>Made with</span>
+                <a
+                    href="https://flowershow.app/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1 no-underline font-semibold text-black dark:text-white"
+                >
+                    <img
+                        src="https://flowershow.app/images/logo.svg"
+                        alt="Logo"
+                        className="h-6 block"
+                    />
+                    <span>Flowershow</span>
+                </a>
+            </p>
+        </footer>
+    );
 };

packages/core/src/ui/index.ts

@@ -7,6 +7,7 @@ export {
   TocSection,
   EditThisPage,
   useTableOfContents,
+  Footer
 } from "./Layout";
 export { Pre } from "./Pre";
 export { CustomLink } from "./Base/CustomLink";

packages/core/src/ui/types.ts

@@ -9,8 +9,8 @@ export interface NavLink {
 
 export interface AuthorConfig {
   name: string;
-  url: string;
-  logo: string;
+  url?: string;
+  logo?: string;
 }
 
 // social

packages/remark-embed/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @portaljs/remark-embed
 
+## 1.0.5
+
+### Patch Changes
+
+- [`71716ab0`](https://github.com/datopian/portaljs/commit/71716ab01875f04f51bc23ba551c7a6a9a24a335) Thanks [@olayway](https://github.com/olayway)! - Add support for shortened yt links (https://youtu.be).
+
 ## 1.0.4
 
 ### Patch Changes

packages/remark-embed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/remark-embed",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Converts youtube link in mdx to an iframe embed",
   "repository": {
     "type": "git",

packages/remark-embed/src/lib/remark-embed.ts

@@ -1,14 +1,29 @@
 import { visit } from "unist-util-visit";
 
+// https://youtu.be/vDuh7vDgGIg
+
+// TODO write tests!
 function transformer(tree) {
   visit(tree, "paragraph", (node) => {
     visit(node, "text", (textNode) => {
       if (
-        textNode.value.includes("https://www.youtube.com") &&
+        (textNode.value.includes("https://www.youtube.com") ||
+          textNode.value.includes("https://youtu.be")
+        ) &&
         !textNode.value.includes("\n")
       ) {
-        const urlSplit = textNode.value.split(/[=&]+/);
-        const iframeUrl = `https://www.youtube.com/embed/${urlSplit[1]}`;
+        let videoId: string;
+
+        if (textNode.value.includes("https://youtu.be")) {
+          // Extract video ID for short YT URLs
+          videoId = textNode.value.split("/").pop();
+        } else {
+          // Extract video ID for full YT URLs
+          const urlSplit = textNode.value.split(/[=&]+/);
+          videoId = urlSplit[1];
+        }
+
+        const iframeUrl = `https://www.youtube.com/embed/${videoId}`;
         Object.assign(node, {
           ...node,
           type: "element",