Compare commits

..

2 Commits

Author SHA1 Message Date
Ola Rubaj
92b12455c9 [blog][xs]: rm links from headings 2023-09-25 18:50:55 +02:00
Ola Rubaj
37902bfc71 [blog][m]: jul-aug updates blog post 2023-09-22 19:22:31 +02:00
13 changed files with 68 additions and 1725 deletions

1568
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@@ -1,11 +1,5 @@
# @portaljs/core # @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 ## 1.0.6
### Patch Changes ### Patch Changes

View File

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

View File

@@ -1,47 +0,0 @@
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"
}
},
};

View File

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

View File

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

View File

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

View File

@@ -1,11 +1,5 @@
# @portaljs/remark-embed # @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 ## 1.0.4
### Patch Changes ### Patch Changes

View File

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

View File

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