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",

site/content/blog/summer-updates-2023.md

@@ -0,0 +1,69 @@
+---
+title: What We Shipped in Jul-Aug 2023
+authors: ['ola-rubaj']
+date: 2023-09-2
+---
+
+Hey everyone! 👋 Summer has been in full swing, and while I've managed to catch some vacation vibes, I've also been deep into code. I'm super excited to share some of the latest updates and features we've rolled out over the past two months. Let's dive in:
+
+## 🌷 Flowershow
+
+https://flowershow.app/
+
+1. **CLI is old news**: the Flowershow CLI has been deprecated in favor of our new [Flowershow Obsidian plugin](https://github.com/datopian/obsidian-flowershow).
+
+2. **Self-publishing made even easier**: I wrote a [self-publish tutorial](https://flowershow.app/docs/publish-howto) to guide you through using our Obsidian plugin for publishing your digital garden.
+
+3. **Cloud-publishing MVP**: The first version of our Flowershow Cloud which aims to make publishing your digital garden notes a breeze! [Check out the overview](https://flowershow.app#cloud-publish) and stay tuned 📻!
+
+4. **Hydration errors from Obsidian transclusions/note embeddings are fixed**: For now, note transclusions will convert to regular links, but stay tuned — support for note embeds may be on the horizon. [Learn more](https://github.com/datopian/flowershow/issues/545)
+
+5. **New Obsidian tags list format support**: I added support for Obsidian's new tag list format, so now your notes can be even more organized. [Learn more](https://github.com/datopian/flowershow/issues/543)
+
+## 🗂️ MarkdownDB
+
+https://github.com/datopian/markdowndb
+
+1. **Auto-Publishing to npm**: Changesets now trigger auto-publishing, so we're always up to date.
+2. **Obsidian-style wiki links**: Extracting wiki links with Obsidian-style shortest paths is supported now.
+
+## 📚 The Guide
+
+https://portaljs.org/guide
+
+I’ve sketched overviews for two upcoming tutorials:
+
+1. **Collaborating with others on your website**: Learn how to make your website projects a team effort. [See it here](https://portaljs.org/guide#tutorial-3-collaborating-with-others-on-your-website-project)
+2. **Customising your website and previewing your changes locally**: Customize and preview your site changes locally, without headaches. [See it here](https://portaljs.org/guide#tutorial-4-customising-your-website-locally-and-previewing-your-changes-locally)
+
+## 🌐 LifeItself.org
+
+https://lifeitself.org/
+
+LifeItself.org is our website built on the Flowershow template, and it's been getting some extra care too.
+
+1. New blog home page layout with:
+
+- **Team Top Selection**
+
+![[life-itself-top-picks.png]]
+
+- **Latest Blog Posts**
+
+![[life-itself-latest-blogs.png]]
+
+- And the long awaited filtering by category 🎉
+
+![[life-itself-categories.png]]
+
+[👉 Check out the changes!](https://lifeitself.org/blog)
+
+2. **Blog posts layout revamp**: Refreshed design with share options, reading time estimates, and more.
+
+![[life-itself-blog-post.png]]
+
+---
+
+That wraps it up for now! As always, I'm eager to hear your thoughts and feedback. Feel free to report issues or ask for features on our GitHub repositories. Until next time and happy publishing!
+
+— Ola Rubaj, Developer at Datopian