@sota1235/remark-link-bookmark 0.0.1 → 0.0.2

package/.envrc

@@ -0,0 +1 @@
+export NODE_AUTH_TOKEN=

package/README.md

@@ -1,21 +1,86 @@
-ts-simple-boilerplate [![codecov](https://codecov.io/gh/sota1235/ts-simple-boilerplate/branch/master/graph/badge.svg)](https://codecov.io/gh/sota1235/ts-simple-boilerplate)
+@sota1235/remark-link-bookmark
 ====
 
-Minimum boilerplate for me.
+Remark plugin to convert link to bookmark component.
 
-Just for bundling 1 JavaScript file.
+### Usage
 
-### Requirement
+```shell
+npm i -E @sota1235/remark-link-bookmark
+```
 
-See [.node-version](./.node-version).
+Then use like this.
 
-### Usage
+```javascript
+import { remark } from 'remark';
+import { remarkLinkBookmark } from './dist/index.js';
+
+const exampleMarkdown = `
+# remark-link-bookmark
+
+https://example.com/
+`;
+
+const result = await remark()
+  .use(remarkLinkBookmark, {})
+  .process(exampleMarkdown);
+
+console.log(result.toString());
+```
+
+You will get the following output.
+
+```markdown
+# remark-link-bookmark
 
-See `scripts` in `package.json` or run `npm run`.
+<div class="rlb-container">
+  <div class="rlb-content">
+    <div class="rlb-info">
+      <h2 class="rlb-title">
+        <a rel="noopener noreferrer" href="https://example.com/" class="rlb-title-link">
+          Example Domain
+        </a>
+      </h2>
+    </div>
+  </div>
+  <div class="rlb-footer">
+    <a rel="noopener noreferrer" href="https://example.com/" class="rlb-footer-link">
+      <img alt="example.com" src="https://www.google.com/s2/favicons?domain=https://example.com/" class="rlb-favicon">
+      example.com
+    </a>
+  </div>
+</div>
+```
 
-### Install
+#### Options
 
-Just use as template of GitHub repository.
+```typescript
+export type Options = {
+  // class prefix for all each element
+  classPrefix?: string;
+  // class names for each element
+  // for example, if you want to add extra class names for some compoentns, you can use this option.
+  mergeClassNames?: {
+    container?: string;
+    content?: string;
+    info?: string;
+    title?: string;
+    titleLink?: string;
+    description?: string;
+    image?: string;
+    footer?: string;
+    footerLink?: string;
+    favicon?: string;
+  };
+  // cache options
+  cache?: {
+    // cache directory path
+    cacheFilePath?: string;
+    // cache file name  
+    cacheFileName?: string;
+  };
+};
+```
 
 ### Licence
 

package/dist/convert.test.js

@@ -1,17 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const vitest_1 = require("vitest");
-const remark_1 = require("remark");
-const plugin_js_1 = __importDefault(require("./plugin.js"));
-(0, vitest_1.test)('Input markdown should be expected', async () => {
+import { expect, test } from 'vitest';
+import { remark } from 'remark';
+import { remarkLinkBookmark } from './plugin.js';
+test('Input markdown should be expected', async () => {
     const document = `
-# Sample
+  # Sample
 
-https://example.com
-`;
-    const file = await (0, remark_1.remark)().use(plugin_js_1.default).process(document);
-    (0, vitest_1.expect)(file).toMatchFileSnapshot('snapshots/output.md');
+  https://example.com
+  
+  [example](https://example.com/) is inline link
+
+  [remark-link-card](https://www.npmjs.com/package/remark-link-card) is inline link
+  `.trim();
+    const file = await remark().use(remarkLinkBookmark, {}).process(document);
+    expect(file.toString()).toMatchFileSnapshot('snapshots/output.md');
 });

package/dist/index.d.ts

@@ -1 +1,5 @@
-import './script.js';
+import type { Plugin } from 'unified';
+import type { Root } from 'mdast';
+import type { Options } from './plugin.js';
+export type RemarkLinkBookmarkOptions = Options;
+export declare const remarkLinkBookmark: Plugin<[options: Options], Root>;

package/dist/index.js

@@ -1,3 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("./script.js");
+import { remarkLinkBookmark as plugin } from './plugin.js';
+export const remarkLinkBookmark = plugin;

package/dist/ogp.d.ts

@@ -0,0 +1,13 @@
+export type OgpInfo = {
+    title: string;
+    description?: string;
+    faviconSrc: string;
+    ogImageSrc?: string;
+    ogImageAlt?: string;
+    url: string;
+};
+export type CacheOption = {
+    cacheFilePath?: string;
+    cacheFileName?: string;
+};
+export declare function fetchOgpInfo(url: string, { cacheFilePath, cacheFileName }: CacheOption): Promise<OgpInfo | undefined>;

package/dist/ogp.js

@@ -0,0 +1,44 @@
+import ogs from 'open-graph-scraper';
+import * as fs from 'node:fs';
+function isError(result) {
+    return result.error;
+}
+export async function fetchOgpInfo(url, { cacheFilePath, cacheFileName }) {
+    const cacheEnabled = cacheFilePath !== undefined && cacheFileName !== undefined;
+    if (cacheEnabled) {
+        const cacheData = await fs.promises.readFile(`${cacheFilePath}/${cacheFileName}`, 'utf-8');
+        const cache = JSON.parse(cacheData);
+        if (cache[url] !== undefined) {
+            console.log(`Cache hit: ${url}`);
+            return cache[url];
+        }
+    }
+    const data = await ogs({ url });
+    if (isError(data)) {
+        return undefined;
+    }
+    const ogImage = {
+        src: undefined,
+        alt: undefined,
+    };
+    if (data.result.ogImage !== undefined) {
+        ogImage.src = data.result.ogImage[0].url;
+        ogImage.alt = data.result.ogImage[0].alt;
+    }
+    const result = {
+        title: data.result.ogTitle || url,
+        description: data.result.ogDescription,
+        faviconSrc: `https://www.google.com/s2/favicons?domain=${url}`,
+        ogImageSrc: ogImage.src,
+        ogImageAlt: ogImage.alt,
+        url,
+    };
+    if (cacheEnabled) {
+        const cacheData = await fs.promises.readFile(`${cacheFilePath}/${cacheFileName}`, 'utf-8');
+        const cache = JSON.parse(cacheData);
+        cache[url] = result;
+        await fs.promises.writeFile(`${cacheFilePath}/${cacheFileName}`, JSON.stringify(cache, null, 2));
+        console.log(`Cache updated: ${url}`);
+    }
+    return result;
+}

package/dist/plugin.d.ts

@@ -1,7 +1,20 @@
 import type { Root } from 'mdast';
 import type { Plugin } from 'unified';
-type Options = {
-    className: string;
+import { CacheOption } from './ogp.js';
+export type Options = {
+    classPrefix?: string;
+    mergeClassNames?: {
+        container?: string;
+        content?: string;
+        info?: string;
+        title?: string;
+        titleLink?: string;
+        description?: string;
+        image?: string;
+        footer?: string;
+        footerLink?: string;
+        favicon?: string;
+    };
+    cache?: CacheOption;
 };
-declare const remarkLinkBookmark: Plugin<[options: Options], Root>;
-export default remarkLinkBookmark;
+export declare const remarkLinkBookmark: Plugin<[options: Options], Root>;

package/dist/plugin.js

@@ -1,9 +1,42 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const remarkLinkBookmark = ({ className = 'link-bookmark', }) => {
-    console.log(className);
-    return (tree) => {
-        console.log(tree);
+import { visit } from 'unist-util-visit';
+import { isUrl } from './url.js';
+import { fetchOgpInfo } from './ogp.js';
+import { buildBookmarkHtml } from './view.js';
+export const remarkLinkBookmark = (options) => {
+    return async (tree) => {
+        const transformers = [];
+        visit(tree, 'paragraph', (node, index) => {
+            if (index === undefined) {
+                console.log('index is undefined');
+                return;
+            }
+            if (node.children.length !== 1) {
+                console.log('node children length is not 1');
+                return;
+            }
+            const child = node.children[0];
+            if (child.type !== 'text') {
+                console.log('child type is not text');
+                return;
+            }
+            const text = child.value;
+            if (!isUrl(text)) {
+                console.log('text is not url');
+                return;
+            }
+            transformers.push(async () => {
+                const ogpInfo = await fetchOgpInfo(text, options.cache ?? {});
+                if (ogpInfo === undefined) {
+                    return;
+                }
+                const linkCardNode = {
+                    type: 'html',
+                    value: buildBookmarkHtml(ogpInfo, options),
+                };
+                tree.children.splice(index, 1, linkCardNode);
+            });
+            return;
+        }, undefined);
+        await Promise.all(transformers.map((transformer) => transformer()));
     };
 };
-exports.default = remarkLinkBookmark;

package/dist/sample.test.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const vitest_1 = require("vitest");
-(0, vitest_1.test)('1 + 1 = 2', () => {
-    (0, vitest_1.expect)(1 + 1).toBe(2);
+import { expect, test } from 'vitest';
+test('1 + 1 = 2', () => {
+    expect(1 + 1).toBe(2);
 });

package/dist/url.d.ts

@@ -0,0 +1 @@
+export declare function isUrl(url: string): boolean;

package/dist/url.js

@@ -0,0 +1,4 @@
+export function isUrl(url) {
+    const instance = new URL(url);
+    return instance.protocol === 'https:';
+}

package/dist/view.d.ts

@@ -0,0 +1,3 @@
+import { OgpInfo } from './ogp.js';
+import { Options } from './plugin.js';
+export declare const buildBookmarkHtml: ({ title, description, faviconSrc, ogImageSrc, ogImageAlt, url }: OgpInfo, { classPrefix, mergeClassNames }: Options) => string;

package/dist/view.js

@@ -0,0 +1,58 @@
+import createDOMPurify from 'dompurify';
+import clsx from 'clsx';
+import { JSDOM } from 'jsdom';
+function buildDescriptionHtml(description, className) {
+    return description !== undefined
+        ? `<p class="${className}">${description}</p>`
+        : '';
+}
+function buildOgpImageHtml(ogImageSrc, ogImageAlt, className) {
+    return ogImageSrc !== undefined
+        ? `<img class="${className}" src="${ogImageSrc}" alt="${ogImageAlt}" />`
+        : '';
+}
+export const buildBookmarkHtml = ({ title, description, faviconSrc, ogImageSrc, ogImageAlt, url }, { classPrefix = 'rlb', mergeClassNames }) => {
+    const host = new URL(url).host;
+    const dompurify = createDOMPurify(new JSDOM('').window);
+    const containerClassName = clsx(`${classPrefix}-container`, mergeClassNames?.container);
+    const contentClassName = clsx(`${classPrefix}-content`, mergeClassNames?.content);
+    const infoClassName = clsx(`${classPrefix}-info`, mergeClassNames?.info);
+    const titleClassName = clsx(`${classPrefix}-title`, mergeClassNames?.title);
+    const titleLinkClassName = clsx(`${classPrefix}-title-link`, mergeClassNames?.titleLink);
+    const descriptionClassName = clsx(`${classPrefix}-description`, mergeClassNames?.description);
+    const imageClassName = clsx(`${classPrefix}-image`, mergeClassNames?.image);
+    const footerClassName = clsx(`${classPrefix}-footer`, mergeClassNames?.footer);
+    const footerLinkClassName = clsx(`${classPrefix}-footer-link`, mergeClassNames?.footerLink);
+    const faviconImageClassName = clsx(`${classPrefix}-favicon`, mergeClassNames?.favicon);
+    return dompurify
+        .sanitize(`
+<div class="${containerClassName}">
+  <div class="${contentClassName}">
+    <div class="${infoClassName}">
+      <h2 class="${titleClassName}">
+        <a 
+          class="${titleLinkClassName}"
+          href="${url}" 
+          target="_blank"
+          rel="noopener noreferrer"  
+        >
+          ${title}
+        </a>
+      </h2>${buildDescriptionHtml(description, descriptionClassName)}
+    </div>${buildOgpImageHtml(ogImageSrc, ogImageAlt, imageClassName)}
+  </div>
+  <div class="${footerClassName}">
+    <a
+      class="${footerLinkClassName}"
+      href="${url}"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img class="${faviconImageClassName}" src="${faviconSrc}" alt="${host}" />
+      ${host}
+    </a>
+  </div>
+</div>
+`)
+        .trim();
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sota1235/remark-link-bookmark",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Remark plugin to convert link to bookmark component",
   "main": "dist/index.js",
   "type": "module",
@@ -32,6 +32,10 @@
   ],
   "author": "@sota1235",
   "license": "MIT",
+  "repository": "https://github.com/sota1235/remark-link-bookmark",
+  "bugs": {
+    "url": "https://github.com/sota1235/remark-link-bookmark/issues"
+  },
   "lint-staged": {
     "*.ts": [
       "npm run fix"
@@ -40,7 +44,7 @@
   "scripts": {
     "build": "tsc -p ./tsconfig.publish.json",
     "build:publish": "tsc -p ./tsconfig.publish.json",
-    "watch": "tsc --watch",
+    "watch": "tsc -p ./tsconfig.publish.json --watch",
     "fix": "npm run prettier && npm run eslint:fix",
     "lint": "npm run eslint",
     "eslint": "eslint 'src/**/*.ts'",

package/.idea/codeStyles/Project.xml

@@ -1,57 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <HTMLCodeStyleSettings>
-      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
-    </HTMLCodeStyleSettings>
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <VueCodeStyleSettings>
-      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
-      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
-    </VueCodeStyleSettings>
-    <codeStyleSettings language="HTML">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="INDENT_SIZE" value="2" />
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-        <option name="TAB_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <option name="SOFT_MARGINS" value="80" />
-      <indentOptions>
-        <option name="CONTINUATION_INDENT_SIZE" value="2" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/remark-link-bookmark.iml" filepath="$PROJECT_DIR$/.idea/remark-link-bookmark.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/remark-link-bookmark.iml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

package/aqua-checksums.json

@@ -1,69 +0,0 @@
-{
-  "checksums": [
-    {
-      "id": "github_release/github.com/rhysd/actionlint/v1.7.3/actionlint_1.7.3_darwin_amd64.tar.gz",
-      "checksum": "33E960B719C87ECC0C807CF4945FD4078980CD2E626B27DED0E9551C757FA8F6",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/rhysd/actionlint/v1.7.3/actionlint_1.7.3_darwin_arm64.tar.gz",
-      "checksum": "B4E8DAB8DDA48ECEFF6AFEA67D0FE4A14B8D4EA7191CF233C1E1AF8A62F37C24",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/rhysd/actionlint/v1.7.3/actionlint_1.7.3_linux_amd64.tar.gz",
-      "checksum": "37252B4D440B56374B0FC1726E05FD7452D30D6D774F6E9B52E65BB64475F9DB",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/rhysd/actionlint/v1.7.3/actionlint_1.7.3_linux_arm64.tar.gz",
-      "checksum": "5FD82142C39208BFDC51B929FF9BD84C38BCC10B4362EF2261A5D70D38E68E05",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/rhysd/actionlint/v1.7.3/actionlint_1.7.3_windows_amd64.zip",
-      "checksum": "E364347719ACCD53A7BB2E5B370E42E7262D6CEE7C496738A08E319BEFDA38E6",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/rhysd/actionlint/v1.7.3/actionlint_1.7.3_windows_arm64.zip",
-      "checksum": "71B50372A72E1F07CEC38C82783873CEBDDF3EC194BB80119B652A80F9F5447F",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/suzuki-shunsuke/ghalint/v1.0.0/ghalint_1.0.0_darwin_amd64.tar.gz",
-      "checksum": "707BB2D6D4564A950F7AD3A5B3340B0B5BC666FE82B32BD51A5FE0FEF7268804",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/suzuki-shunsuke/ghalint/v1.0.0/ghalint_1.0.0_darwin_arm64.tar.gz",
-      "checksum": "3E3FDA71FFAE83CF713295DF2BEF09FC268811DEAB11DEA58D8CAA287642C9DC",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/suzuki-shunsuke/ghalint/v1.0.0/ghalint_1.0.0_linux_amd64.tar.gz",
-      "checksum": "E9006FF212A3B27A99AF43DB687DED78173BAA2F9816B2E2A9BED03A2ED2F954",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/suzuki-shunsuke/ghalint/v1.0.0/ghalint_1.0.0_linux_arm64.tar.gz",
-      "checksum": "73D110480FB94DB4F5F46980659FCAFB8146ACC0B49D0D3AA6D79EE161C97917",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/suzuki-shunsuke/ghalint/v1.0.0/ghalint_1.0.0_windows_amd64.zip",
-      "checksum": "F91596B58827BBBBAA6EFD8B5220D2C49547D60E30E7CF797E02A9107A39FF11",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "github_release/github.com/suzuki-shunsuke/ghalint/v1.0.0/ghalint_1.0.0_windows_arm64.zip",
-      "checksum": "77FB1B80BFEFECB2C43098C9BD76BB335435A56E362961E3BD6ED5E18FA471E6",
-      "algorithm": "sha256"
-    },
-    {
-      "id": "registries/github_content/github.com/aquaproj/aqua-registry/v4.246.0/registry.yaml",
-      "checksum": "153438D21A059F716E695701D3A0E41AF537024C25AB8B6852EE6B996E313C93",
-      "algorithm": "sha256"
-    }
-  ]
-}

package/aqua.yaml

@@ -1,12 +0,0 @@
----
-# aqua - Declarative CLI Version Manager
-# https://aquaproj.github.io/
-checksum:
-  enabled: true
-  require_checksum: true
-registries:
-  - type: standard
-    ref: v4.246.0 # renovate: depName=aquaproj/aqua-registry
-packages:
-  - name: rhysd/actionlint@v1.7.3
-  - name: suzuki-shunsuke/ghalint@v1.0.0

package/eslint.config.mjs

@@ -1,10 +0,0 @@
-import { configs } from '@sota1235/eslint-config';
-
-/** @type {import('eslint').Linter.Config} */
-export default [
-  ...configs.base(),
-  ...configs.typescript({}),
-  {
-    ignores: ['node_modules/', 'dist/'],
-  }
-];