@hackersheet/next-document-content-components 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/esm/components/youtube/youtube.mjs

@@ -2,7 +2,7 @@ import { YouTubeEmbed } from "@next/third-parties/google";
 import React from "react";
 async function Youtube({ videoId, params, playLabel, ...props }) {
   const paramsString = params ? Object.entries(params).filter(([, value]) => value !== void 0).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join("&") : void 0;
-  return /* @__PURE__ */ React.createElement(YouTubeEmbed, { ...props, videoid: videoId, params: paramsString, playlabel: playLabel });
+  return /* @__PURE__ */ React.createElement("div", { className: "youtube-block" }, /* @__PURE__ */ React.createElement(YouTubeEmbed, { ...props, videoid: videoId, params: paramsString, playlabel: playLabel }));
 }
 export {
   Youtube as default

package/dist/esm/index.d.mts

@@ -1,8 +1,11 @@
 export { default as CodeBlock } from './components/code-block/code-block.mjs';
+export { default as DirectoryTree } from './components/code-block/directory-tree.mjs';
+export { default as Gist } from './components/gist/gist.mjs';
+export { default as Heading } from './components/heading/heading.mjs';
 export { default as Image } from './components/image/image.mjs';
-export { default as KifuTo } from './components/kifu-to/kifu-to.mjs';
 export { default as Link } from './components/link/link.mjs';
 export { default as LinkCard } from './components/link-card/link-card.mjs';
+export { default as Mermaid } from './components/mermaid/mermaid.mjs';
 export { default as XPost } from './components/x-post/x-post.mjs';
 export { default as Youtube } from './components/youtube/youtube.mjs';
 import 'react';

package/dist/esm/index.mjs

@@ -1 +1,22 @@
-export * from "./components";
+import CodeBlock from "./components/code-block/code-block";
+import DirectoryTree from "./components/code-block/directory-tree";
+import Gist from "./components/gist/gist";
+import Heading from "./components/heading/heading";
+import Image from "./components/image/image";
+import Link from "./components/link/link";
+import LinkCard from "./components/link-card/link-card";
+import Mermaid from "./components/mermaid/mermaid";
+import XPost from "./components/x-post/x-post";
+import Youtube from "./components/youtube/youtube";
+export {
+  CodeBlock,
+  DirectoryTree,
+  Gist,
+  Heading,
+  Image,
+  Link,
+  LinkCard,
+  Mermaid,
+  XPost,
+  Youtube
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackersheet/next-document-content-components",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.20",
   "description": "Hacker Sheet document content components for Next.js",
   "keywords": [],
   "repository": {
@@ -10,19 +10,11 @@
   },
   "license": "MIT",
   "author": "",
-  "sideEffects": [
-    "*.css"
-  ],
   "exports": {
     ".": {
       "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.mjs",
       "types": "./dist/esm/index.d.ts"
-    },
-    "./style": {
-      "import": "./dist/style.module.css",
-      "require": "./dist/style.module.css",
-      "types": "./dist/style.module.scss.d.ts"
     }
   },
   "main": "./dist/cjs/index.js",
@@ -32,42 +24,37 @@
     "dist"
   ],
   "dependencies": {
-    "@hackersheet/core": "alpha",
-    "@hackersheet/react-document-content": "alpha",
-    "@next/third-parties": "^14.2.5",
-    "@shikijs/transformers": "^1.10.3",
-    "kifu-for-js": "^5.4.1",
+    "@next/third-parties": "^16.0.0",
+    "@shikijs/langs": "3.13.0",
+    "@shikijs/themes": "3.13.0",
+    "@shikijs/transformers": "^3.13.0",
     "mermaid": "^10.9.1",
-    "next-themes": "^0.3.0",
-    "react-icons": "^5.2.1",
-    "react-tweet": "^3.2.1",
-    "shiki": "^1.10.3"
+    "next-themes": "^0.4.6",
+    "react-icons": "^5.5.0",
+    "react-tweet": "^3.2.2",
+    "shiki": "^3.13.0",
+    "@hackersheet/react-document-content": "0.1.0-alpha.13",
+    "@hackersheet/core": "0.1.0-alpha.11"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "next": "14.2.5",
-    "postcss": "8.4.39",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sass": "1.77.8",
-    "typed-scss-modules": "8.0.1",
-    "@hackersheet/eslint-config-custom": "0.0.0"
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "next": "15.5.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "peerDependencies": {
-    "next": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "scripts": {
-    "build": "rm -rf ./dist && pnpm tsup && pnpm typegen:scss && pnpm build:css",
-    "build:css": "cp src/styles/*.ts dist && pnpm sass src/styles/style.module.scss dist/style.module.css --no-source-map",
+    "build": "rm -rf ./dist && pnpm tsup",
     "check": "pnpm tsc && pnpm lint",
     "format": "pnpm -w format && pnpm lint:fix",
     "lint": "eslint \"**/*.{ts,tsx}\"",
     "lint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
     "pub": "pnpm publish --access=public --tag alpha",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "typegen:scss": "typed-scss-modules src/styles/style.module.scss"
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

package/dist/cjs/components/code-block/code-block-kifu.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface KifuProps {
-    kifu: string;
-    filename?: string;
-}
-declare function CodeBlockKifu({ kifu, filename }: KifuProps): React.JSX.Element | null;
-
-export { type KifuProps, CodeBlockKifu as default };

package/dist/cjs/components/code-block/code-block-mermaid.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-interface CodeBlockMermaidProps {
-    code: string;
-}
-declare function CodeBlockMermaid({ code }: CodeBlockMermaidProps): React.JSX.Element;
-
-export { type CodeBlockMermaidProps, CodeBlockMermaid as default };

package/dist/cjs/components/index.d.ts

@@ -1,9 +0,0 @@
-export { default as CodeBlock } from './code-block/code-block.js';
-export { default as Image } from './image/image.js';
-export { default as KifuTo } from './kifu-to/kifu-to.js';
-export { default as Link } from './link/link.js';
-export { default as LinkCard } from './link-card/link-card.js';
-export { default as XPost } from './x-post/x-post.js';
-export { default as Youtube } from './youtube/youtube.js';
-import 'react';
-import '@hackersheet/react-document-content';

package/dist/cjs/components/kifu-to/kifu-to.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { KifuToComponentProps } from '@hackersheet/react-document-content';
-
-declare function KifuTo({ id, ply, label: defaultLabel }: KifuToComponentProps): React.JSX.Element;
-
-export { KifuTo as default };

package/dist/esm/components/code-block/code-block-kifu.d.mts

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface KifuProps {
-    kifu: string;
-    filename?: string;
-}
-declare function CodeBlockKifu({ kifu, filename }: KifuProps): React.JSX.Element | null;
-
-export { type KifuProps, CodeBlockKifu as default };

package/dist/esm/components/code-block/code-block-kifu.mjs

@@ -1,36 +0,0 @@
-"use client";
-import { KifuLite, KifuStore } from "kifu-for-js";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
-function CodeBlockKifu({ kifu, filename }) {
-  const searchParams = useSearchParams();
-  const id = filename ? `user-content-${filename}` : void 0;
-  const [kifuStore] = useState(() => new KifuStore({ kifu }));
-  useEffect(() => {
-    initKifuUserSettings();
-  }, []);
-  useEffect(() => {
-    const newPly = Number(searchParams.get("ply") ?? 0);
-    const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
-    if (hash === id) {
-      kifuStore.player.goto(newPly);
-    }
-  }, [searchParams, kifuStore, id]);
-  if (!kifuStore) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: "my-4 flex justify-center", id }, /* @__PURE__ */ React.createElement(KifuLite, { style: { width: "100%" }, kifuStore }));
-}
-function initKifuUserSettings() {
-  const LOCALSTORAGE_KEY = "kifuforjs";
-  const defaultSettings = {
-    hapticFeedback: false
-  };
-  const settings = localStorage.getItem(LOCALSTORAGE_KEY);
-  if (!settings) {
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(defaultSettings));
-  }
-}
-export {
-  CodeBlockKifu as default
-};

package/dist/esm/components/code-block/code-block-mermaid.d.mts

@@ -1,8 +0,0 @@
-import React from 'react';
-
-interface CodeBlockMermaidProps {
-    code: string;
-}
-declare function CodeBlockMermaid({ code }: CodeBlockMermaidProps): React.JSX.Element;
-
-export { type CodeBlockMermaidProps, CodeBlockMermaid as default };

package/dist/esm/components/index.d.mts

@@ -1,9 +0,0 @@
-export { default as CodeBlock } from './code-block/code-block.mjs';
-export { default as Image } from './image/image.mjs';
-export { default as KifuTo } from './kifu-to/kifu-to.mjs';
-export { default as Link } from './link/link.mjs';
-export { default as LinkCard } from './link-card/link-card.mjs';
-export { default as XPost } from './x-post/x-post.mjs';
-export { default as Youtube } from './youtube/youtube.mjs';
-import 'react';
-import '@hackersheet/react-document-content';

package/dist/esm/components/index.mjs

@@ -1,16 +0,0 @@
-import CodeBlock from "./code-block/code-block";
-import Image from "./image/image";
-import KifuTo from "./kifu-to/kifu-to";
-import Link from "./link/link";
-import LinkCard from "./link-card/link-card";
-import XPost from "./x-post/x-post";
-import Youtube from "./youtube/youtube";
-export {
-  CodeBlock,
-  Image,
-  KifuTo,
-  Link,
-  LinkCard,
-  XPost,
-  Youtube
-};

package/dist/esm/components/kifu-to/kifu-to.d.mts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { KifuToComponentProps } from '@hackersheet/react-document-content';
-
-declare function KifuTo({ id, ply, label: defaultLabel }: KifuToComponentProps): React.JSX.Element;
-
-export { KifuTo as default };

package/dist/esm/components/kifu-to/kifu-to.mjs

@@ -1,11 +0,0 @@
-import Link from "next/link";
-import React from "react";
-function KifuTo({ id, ply, label: defaultLabel }) {
-  const fullId = `user-content-${id}`;
-  const href = `?ply=${ply}#${fullId}`;
-  const label = defaultLabel ?? `${ply}\u624B\u76EE`;
-  return /* @__PURE__ */ React.createElement(Link, { href }, label);
-}
-export {
-  KifuTo as default
-};

package/dist/style.module.css

@@ -1,280 +0,0 @@
-.main :first-child {
-  margin-top: 0;
-}
-.main * {
-  word-break: break-word;
-  scroll-margin-top: var(--hsdc-scroll-margin-top);
-}
-.main h1,
-.main h2,
-.main h3,
-.main h4,
-.main h5,
-.main h6 {
-  margin: 4rem 0 1.5rem 0;
-  padding: 0.5rem 0;
-  font-weight: 700;
-  border-bottom: 1px solid hsl(var(--hsdc-border));
-}
-.main p {
-  margin: 1.8rem 0;
-}
-.main strong {
-  font-weight: 700;
-}
-.main hr {
-  margin: 4rem 0;
-}
-.main h1 {
-  font-size: 2rem;
-}
-.main h2 {
-  font-size: 1.5rem;
-}
-.main h3 {
-  font-size: 1.2rem;
-}
-.main h4 {
-  font-size: 1rem;
-}
-.main h5 {
-  font-size: 0.8rem;
-}
-.main h6 {
-  font-size: 0.7rem;
-}
-.main p {
-  line-height: 2.2;
-  letter-spacing: 0.04em;
-}
-.main ol,
-.main ul {
-  padding-left: 1.5em;
-}
-.main ol ol,
-.main ol ul,
-.main ul ol,
-.main ul ul {
-  padding-left: 1em;
-}
-.main ol li,
-.main ul li {
-  line-height: 2rem;
-  padding-left: 0.5rem;
-}
-.main ul {
-  list-style-type: disc;
-}
-.main ul ul {
-  list-style-type: circle;
-}
-.main ul ul ul {
-  list-style-type: square;
-}
-.main ol {
-  list-style-type: decimal;
-}
-.main ol ul {
-  list-style-type: circle;
-}
-.main ol ul ul {
-  list-style-type: square;
-}
-.main table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-  border-radius: 8px;
-  border-spacing: 0;
-  border: 1px solid hsl(var(--hsdc-border));
-  overflow: hidden;
-}
-.main table thead {
-  background-color: hsl(var(--hsdc-muted));
-}
-.main table tbody td {
-  border-top: 1px solid hsl(var(--hsdc-border));
-}
-.main table tbody tr:hover {
-  background-color: hsl(var(--hsdc-muted)/0.5);
-}
-.main table th,
-.main table td {
-  padding: 8px;
-  font-size: 0.875rem;
-  text-align: left;
-}
-.main table th :global(&.left),
-.main table td :global(&.left) {
-  text-align: left;
-}
-.main table th :global(&.center),
-.main table td :global(&.center) {
-  text-align: center;
-}
-.main table th :global(&.right),
-.main table td :global(&.right) {
-  text-align: right;
-}
-.main code:not(pre code) {
-  border-radius: 4px;
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 2px 8px;
-  font-family: var(--hsdc-font-code);
-  line-height: 1.5;
-  border: 1px solid hsl(var(--hsdc-border));
-  background-color: hsl(var(--hsdc-muted));
-}
-.main blockquote {
-  border-left: 12px solid hsl(var(--hsdc-border));
-  color: hsl(var(--hsdc-muted-foreground));
-  margin: 0;
-  padding: 0 16px;
-}
-.main blockquote blockquote {
-  margin: 0 12px;
-}
-.main a:not(article a) {
-  color: hsl(var(--hsdc-link));
-}
-.main a:not(article a):hover {
-  text-decoration-line: underline;
-}
-.main summary {
-  cursor: pointer;
-}
-.main :global(.footnotes) {
-  margin: 4rem 0 1.5rem 0;
-  color: hsl(var(--hsdc-muted-foreground));
-}
-.main :global(.footnotes) p {
-  margin: 0;
-}
-.main :global(.contains-task-list) {
-  list-style-type: none;
-  padding-left: 0;
-}
-.main :global(.contains-task-list) input {
-  margin-right: 0.5rem;
-}
-
-.main :global(.react-tweet-theme) p {
-  margin: 0;
-  line-height: 1.5;
-  font-size: 17px;
-}
-.main :global(.code-block) {
-  margin: 1.5rem 0;
-  border: 1px solid hsl(var(--hsdc-border));
-  border-radius: 8px;
-  overflow: hidden;
-}
-.main :global(.code-block) pre {
-  font-family: var(--hsdc-font-code);
-  font-size: 14px;
-  padding: 16px;
-  overflow: auto;
-  background-color: hsl(var(--hsdc-code-block));
-}
-.main :global(.code-block) :global(.code-block-header) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  padding: 8px 16px;
-  background-color: hsl(var(--hsdc-muted));
-  border-bottom: 1px solid hsl(var(--hsdc-border));
-}
-.main :global(.code-block) :global(.code-block-filename) {
-  flex: 1 1 auto;
-}
-.main :global(.shiki) code {
-  width: 100%;
-  min-width: max-content;
-  display: flex;
-  flex-direction: column;
-  margin: 0 -16px;
-}
-.main :global(.shiki) :global(span.line) {
-  position: relative;
-  width: 100%;
-  padding: 0 16px;
-}
-.main :global(.shiki) :global(span.line.diff.add) {
-  background-color: hsl(var(--hsdc-shiki-diff-add)/0.1) !important;
-}
-.main :global(.shiki) :global(span.line.diff.add)::before {
-  position: absolute;
-  left: 2px;
-  content: "+";
-  color: hsl(var(--hsdc-shiki-diff-add));
-}
-.main :global(.shiki) :global(span.line.diff.remove) {
-  background-color: hsl(var(--hsdc-shiki-diff-remove)/0.1) !important;
-}
-.main :global(.shiki) :global(span.line.diff.remove)::before {
-  position: absolute;
-  left: 2px;
-  content: "-";
-  color: hsl(var(--hsdc-shiki-diff-remove));
-}
-.main :global(.shiki) :global(.highlighted-word) {
-  background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.2);
-  padding: 2px 0;
-  margin: -2px 0;
-}
-.main :global(.link-card) {
-  display: flex;
-  flex-direction: row;
-  border: 1px solid hsl(var(--hsdc-border));
-  border-radius: 8px;
-  overflow: hidden;
-  color: inherit;
-  width: 100%;
-  max-height: 144px;
-  margin: 1.8rem 0;
-}
-.main :global(.link-card):hover {
-  text-decoration: none;
-  background-color: hsl(var(--hsdc-muted)/0.5);
-}
-.main :global(.link-card) :global(.link-card-main) {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 12px 16px;
-  overflow: hidden;
-  gap: 8px;
-}
-.main :global(.link-card) :global(.link-card-main) > div {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-}
-.main :global(.link-card) :global(.link-card-main) :global(.link-card-title) {
-  flex: 1 1 auto;
-}
-.main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
-  font-size: 0.75rem;
-  color: hsl(var(--hsdc-muted-foreground));
-}
-.main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.75rem;
-  color: hsl(var(--hsdc-muted-foreground));
-}
-.main :global(.link-card) :global(.link-card-image) {
-  width: 35%;
-}
-.main :global(.link-card) :global(.link-card-image) img {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}

package/dist/style.module.scss.d.ts

@@ -1,9 +0,0 @@
-export type Styles = {
-  main: string;
-};
-
-export type ClassNames = keyof Styles;
-
-declare const styles: Styles;
-
-export default styles;