@hackersheet/next-document-content-components 0.1.0-alpha.1

package/dist/style.module.css

@@ -0,0 +1,279 @@
+.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;
+  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

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

package/license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Hacker Sheet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@hackersheet/next-document-content-components",
+  "version": "0.1.0-alpha.1",
+  "description": "Hacker Sheet document content components for Next.js",
+  "keywords": [],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hackersheet/javascript.git",
+    "directory": "packages/next-document-content-components"
+  },
+  "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",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/esm/index.d.ts",
+  "files": [
+    "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",
+    "mermaid": "^10.9.1",
+    "next-themes": "^0.3.0",
+    "react-icons": "^5.2.1",
+    "react-tweet": "^3.2.1",
+    "shiki": "^1.10.3"
+  },
+  "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"
+  },
+  "peerDependencies": {
+    "next": "^14.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.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",
+    "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"
+  }
+}