Skip to content

Commit 3a1df08

Browse files
committed
Update readme and package.json
1 parent 1dcc0eb commit 3a1df08

File tree

4 files changed

+26
-225
lines changed

4 files changed

+26
-225
lines changed

.tkb

Lines changed: 5 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,18 @@
11
{
22
"scope": "Workspace",
33
"tasks": {
4-
"G-1H47JpSI69kav1qZ-kp": {
5-
"id": "G-1H47JpSI69kav1qZ-kp",
6-
"description": "Star [this repository](https://github.com/react18-tools/turborepo-template/) for easy access and to show your support",
7-
"columnId": "column-todo"
8-
},
9-
"gbzyhx0FwFfzRoE-iqVeu": {
10-
"id": "gbzyhx0FwFfzRoE-iqVeu",
11-
"description": "🌟 **Update `sripts/rebrand.config.json` if required.**",
12-
"columnId": "column-todo"
13-
},
14-
"Y5__aEZl3Pbxp7r90HKpV": {
15-
"id": "Y5__aEZl3Pbxp7r90HKpV",
16-
"description": "Install `pnpm` using `npm i -g pnpm`",
17-
"columnId": "column-todo"
18-
},
19-
"jcpymbi71e702p7n6fwvZ": {
20-
"id": "jcpymbi71e702p7n6fwvZ",
21-
"description": "Close this Kanban Board tab and install dependencies using `pnpm`\n - Run `pnpm i` to install dependencies; the `rebrand` script will automatically rebrand the repo, adjust workflows, and create a commit",
22-
"columnId": "column-todo"
23-
},
24-
"jdZxwLymOo7w2eZeNpvsN": {
25-
"id": "jdZxwLymOo7w2eZeNpvsN",
26-
"description": "Run `yarn plop`, and follow prompts to generate server or client components for your library",
27-
"columnId": "column-todo"
28-
},
29-
"RX4J5v4y5IOe_ucf8pMRT": {
30-
"id": "RX4J5v4y5IOe_ucf8pMRT",
31-
"description": "🌟 Enable [private vulnerability reporting](https://github.com/react18-tools/react-markdown-autolink/security) (For public repo - do this after updating visibility to public)",
32-
"columnId": "column-todo"
33-
},
34-
"EdPbrbJLllUHfZmCS80f7": {
35-
"id": "EdPbrbJLllUHfZmCS80f7",
36-
"description": "Set up `CodeCov`\n - Visit Codecov and set up your repo\n - Create [repository secret]((https://github.com/react18-tools/react-markdown-autolink/settings/secrets/actions)) for `CODECOV_TOKEN`",
37-
"columnId": "column-todo"
38-
},
39-
"MLLUsAhCKaKxvEXFY0HSq": {
40-
"id": "MLLUsAhCKaKxvEXFY0HSq",
41-
"description": "Set up `CodeClimate`\n - Visit CodeClimate and set up your repo\n - Create [repository secret] for `CC_TEST_REPORTER_ID`\n - Add `*.test.*` to ignore patterns on the website\n - Update Code Climate badge",
42-
"columnId": "column-todo"
43-
},
44-
"gMYfaAh2RABMP8uZRQgNx": {
45-
"id": "gMYfaAh2RABMP8uZRQgNx",
46-
"description": "Add `NPM_AUTH_TOKEN` to repository secrets to automate package publishing\n - Log in to your [`npm` account](https://www.npmjs.com/login) and create an automation token\n - Create a new repository secret `NPM_AUTH_TOKEN`",
47-
"columnId": "column-todo"
48-
},
49-
"_BfuX7quWBANpDK1bI7YM": {
50-
"id": "_BfuX7quWBANpDK1bI7YM",
51-
"description": "Update description in `lib/package.json`",
52-
"columnId": "column-todo"
53-
},
54-
"dC7QDBLH8BmHUfaYmIt81": {
55-
"id": "dC7QDBLH8BmHUfaYmIt81",
56-
"description": "(Optional) Add Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)",
57-
"columnId": "column-todo"
58-
},
59-
"P_NrSJQ8m91Odgz8E1fS6": {
60-
"id": "P_NrSJQ8m91Odgz8E1fS6",
61-
"description": "Create your library and update examples",
62-
"columnId": "column-todo"
63-
},
644
"1dRWJhy45E1Rq5wZAmPHt": {
655
"id": "1dRWJhy45E1Rq5wZAmPHt",
666
"description": "Update README as required",
677
"columnId": "column-todo"
68-
},
69-
"5vS1JNXoMhDl5IBljwh2v": {
70-
"id": "5vS1JNXoMhDl5IBljwh2v",
71-
"description": "Set up GitHub pages to deploy docs\n - Go to [repo settings](https://github.com/react18-tools/react-markdown-autolink/settings/pages) -> pages (On the left panel); Select deploy from a branch; Then Select `main` and `/docs`",
72-
"columnId": "column-todo"
73-
},
74-
"55DAZwduwTvlaxaJC8hlX": {
75-
"id": "55DAZwduwTvlaxaJC8hlX",
76-
"description": "(Optional) Set up [Deepsource](https://app.deepsource.com/login) for static code analysis",
77-
"columnId": "column-todo"
78-
},
79-
"FDFqCQvLm2mUlnTJ3Gna5": {
80-
"id": "FDFqCQvLm2mUlnTJ3Gna5",
81-
"description": "Push your changes/Create PR and see your library being automatically tested and published",
82-
"columnId": "column-todo"
83-
},
84-
"O1qAByMoxhHOR-a_guL91": {
85-
"id": "O1qAByMoxhHOR-a_guL91",
86-
"description": "Optionally deploy your examples to Vercel.",
87-
"columnId": "column-todo"
88-
},
89-
"0499BqWDwJ5cxqtC9Nr82": {
90-
"id": "0499BqWDwJ5cxqtC9Nr82",
91-
"description": "Feel free to star this template, contribute, and/or sponsor the [`terborepo-template`](https://github.com/react18-tools/turborepo-template) project or my [other open-source work](https://github.com/sponsors/mayank1513)",
92-
"columnId": "column-todo"
93-
},
94-
"IjuAtNquJ4-Ut874rHKIW": {
95-
"id": "IjuAtNquJ4-Ut874rHKIW",
96-
"description": "You can also fork the [`terborepo-template`](https://github.com/react18-tools/turborepo-template/fork) and add your package to `scripts/featured.json`\n - If approved, your package will be automatically added to FEATURED.md and also published on the home page of this repo.",
97-
"columnId": "column-todo"
98-
},
99-
"_JiH9RZLmUF5nxD7lBC5B": {
100-
"id": "_JiH9RZLmUF5nxD7lBC5B",
101-
"description": "Create a new GitHub repository using this template.\n - Click the `Use this template` button at the top right -> `Create a new repository`\n - Click `Create repository` and wait for the setup workflow to finish rebranding your repo.",
102-
"columnId": "column-done"
103-
},
104-
"t5d22lVYbF7GuQHzv6DRO": {
105-
"id": "t5d22lVYbF7GuQHzv6DRO",
106-
"description": "Install and set up Node.js and your IDE (VSCode recommended)",
107-
"columnId": "column-done"
108-
},
109-
"wkDDELNeOfYSVmWI1eWu0": {
110-
"id": "wkDDELNeOfYSVmWI1eWu0",
111-
"description": "Install the recommended VSCode extensions:\n - [Trello Kanban](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board)",
112-
"columnId": "column-done"
113-
},
114-
"J5lp9I5d12B4tpGKawaqF": {
115-
"id": "J5lp9I5d12B4tpGKawaqF",
116-
"description": "Run `node scripts/rebrand.js` to rebrand this repo.",
117-
"columnId": "column-todo"
1188
}
1199
},
12010
"columns": [
12111
{
12212
"id": "column-todo",
12313
"title": "To do",
12414
"tasksIds": [
125-
"G-1H47JpSI69kav1qZ-kp",
126-
"gbzyhx0FwFfzRoE-iqVeu",
127-
"Y5__aEZl3Pbxp7r90HKpV",
128-
"jcpymbi71e702p7n6fwvZ",
129-
"J5lp9I5d12B4tpGKawaqF",
130-
"jdZxwLymOo7w2eZeNpvsN",
131-
"RX4J5v4y5IOe_ucf8pMRT",
132-
"EdPbrbJLllUHfZmCS80f7",
133-
"MLLUsAhCKaKxvEXFY0HSq",
134-
"gMYfaAh2RABMP8uZRQgNx",
135-
"_BfuX7quWBANpDK1bI7YM",
136-
"dC7QDBLH8BmHUfaYmIt81",
137-
"P_NrSJQ8m91Odgz8E1fS6",
138-
"1dRWJhy45E1Rq5wZAmPHt",
139-
"5vS1JNXoMhDl5IBljwh2v",
140-
"55DAZwduwTvlaxaJC8hlX",
141-
"FDFqCQvLm2mUlnTJ3Gna5",
142-
"O1qAByMoxhHOR-a_guL91",
143-
"0499BqWDwJ5cxqtC9Nr82",
144-
"IjuAtNquJ4-Ut874rHKIW"
15+
"1dRWJhy45E1Rq5wZAmPHt"
14516
]
14617
},
14718
{
@@ -152,11 +23,8 @@
15223
{
15324
"id": "column-done",
15425
"title": "Done",
155-
"tasksIds": [
156-
"_JiH9RZLmUF5nxD7lBC5B",
157-
"t5d22lVYbF7GuQHzv6DRO",
158-
"wkDDELNeOfYSVmWI1eWu0"
159-
]
26+
"tasksIds": []
16027
}
161-
]
162-
}
28+
],
29+
"hideTrails": true
30+
}

README.md

Lines changed: 20 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
# React Markdown Autolink <img src="https://github.com/react18-tools/react-markdown-autolink/blob/main/popper.png?raw=true" style="height: 40px"/>
22

3-
[![test](https://github.com/react18-tools/react-markdown-autolink/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react-markdown-autolink/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/react-markdown-autolink/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react-markdown-autolink/graph/badge.svg)](https://codecov.io/gh/react18-tools/react-markdown-autolink) [![Version](https://img.shields.io/npm/v/react-markdown-autolink.svg?colorB=green)](https://www.npmjs.com/package/react-markdown-autolink) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-markdown-autolink.svg)](https://www.npmjs.com/package/react-markdown-autolink) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-markdown-autolink) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
3+
[![test](https://github.com/react18-tools/react-markdown-autolink/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react-markdown-autolink/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/5ba946f4d45271583a1f/maintainability)](https://codeclimate.com/github/react18-tools/react-markdown-autolink/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react-markdown-autolink/graph/badge.svg)](https://codecov.io/gh/react18-tools/react-markdown-autolink) [![Version](https://img.shields.io/npm/v/react-markdown-autolink.svg?colorB=green)](https://www.npmjs.com/package/react-markdown-autolink) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-markdown-autolink.svg)](https://www.npmjs.com/package/react-markdown-autolink) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-markdown-autolink) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
44

5-
React Markdown Autolink is a comprehensive library designed to unlock the full potential of React 18 server components. It provides customizable loading animation components and a fullscreen loader container, seamlessly integrating with React and Next.js.
5+
## Automatically Detect and Add Hyperlinks to Your Markdown Content
66

7-
✅ Fully Treeshakable (import from `react-markdown-autolink/client/loader-container`)
7+
A highly lightweight utility that automatically detects and makes links clickable in Markdown rendered by `react-markdown` or other markdown renderers.
88

9-
✅ Fully TypeScript Supported
9+
### Key Features
1010

11-
Leverages the power of React 18 Server components
11+
**Automatic Link Detection**: Automatically detects URLs and makes them clickable in your Markdown content.
1212

13-
Compatible with all React 18 build systems/tools/frameworks
13+
**Lightweight**: Minimal overhead, ensuring fast and efficient performance.
1414

15-
Documented with [Typedoc](https://react18-tools.github.io/react-markdown-autolink) ([Docs](https://react18-tools.github.io/react-markdown-autolink))
15+
**Seamless Integration**: Easily integrates with `react-markdown` and other React, Vue, web components, or any other framework/library supporting markdown.
1616

17-
Examples for Next.js, Vite, and Remix
17+
**TypeScript First**: Built with TypeScript, ensuring type safety and developer-friendly experience.
1818

1919
> <img src="https://github.com/react18-tools/react-markdown-autolink/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider starring [this repository](https://github.com/react18-tools/react-markdown-autolink) and sharing it with your friends.
2020
@@ -23,99 +23,33 @@ React Markdown Autolink is a comprehensive library designed to unlock the full p
2323
### Installation
2424

2525
```bash
26-
$ pnpm add react-markdown-autolink
26+
pnpm add react-markdown-autolink
2727
```
2828

2929
**_or_**
3030

3131
```bash
32-
$ npm install react-markdown-autolink
32+
npm install react-markdown-autolink
3333
```
3434

3535
**_or_**
3636

3737
```bash
38-
$ yarn add react-markdown-autolink
38+
yarn add react-markdown-autolink
3939
```
4040

41-
## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-markdown-autolink-lite)](https://www.npmjs.com/package/react-markdown-autolink-lite) [![Version](https://img.shields.io/npm/v/react-markdown-autolink-lite.svg?colorB=green)](https://www.npmjs.com/package/react-markdown-autolink-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-markdown-autolink-lite.svg)](https://www.npmjs.com/package/react-markdown-autolink-lite)
41+
## Usage
4242

43-
```bash
44-
$ pnpm add react-markdown-autolink-lite
45-
```
46-
47-
**or**
48-
49-
```bash
50-
$ npm install react-markdown-autolink-lite
51-
```
52-
53-
**or**
54-
55-
```bash
56-
$ yarn add react-markdown-autolink-lite
57-
```
58-
59-
> You need `r18gs` as a peer-dependency
60-
61-
### Import Styles
62-
63-
You can import styles globally or within specific components.
64-
65-
```css
66-
/* globals.css */
67-
@import "react-markdown-autolink/dist";
68-
```
43+
```ts
44+
import Markdown from "react-markdown";
45+
import { autoLinkMd } from "react-markdown-autolink";
6946

70-
```tsx
71-
// layout.tsx
72-
import "react-markdown-autolink/dist/index.css";
73-
```
74-
75-
For selective imports:
76-
77-
```css
78-
/* globals.css */
79-
@import "react-markdown-autolink/dist/client"; /** required if you are using LoaderContainer */
80-
@import "react-markdown-autolink/dist/server/bars/bars1";
81-
```
82-
83-
### Usage
84-
85-
Using loaders is straightforward.
86-
87-
```tsx
88-
import { Bars1 } from "react-markdown-autolink/dist/server/bars/bars1";
89-
90-
export default function MyComponent() {
91-
return someCondition ? <Bars1 /> : <>Something else...</>;
92-
}
93-
```
94-
95-
For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/react-markdown-autolink).
96-
97-
**Using LoaderContainer**
98-
99-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
100-
101-
```tsx
102-
// layout.tsx
103-
<LoaderContainer />
104-
...
105-
```
47+
const md = `## Automatically Detect and Add Hyperlinks to Your Markdown Content
48+
https://github.com/react18-tools/react-markdown-autolink
49+
`;
10650

107-
```tsx
108-
// some other page or component
109-
import { useLoader } from "react-markdown-autolink/dist/hooks";
110-
111-
export default MyComponent() {
112-
const { setLoading } = useLoader();
113-
useCallback(()=>{
114-
setLoading(true);
115-
...do some work
116-
setLoading(false);
117-
}, [])
118-
...
51+
export default function Page(): JSX.Element {
52+
return <Markdown>{autoLinkMd(md)}</Markdown>;
11953
}
12054
```
12155

examples/nextjs/src/app/page.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { LandingPage } from "@repo/shared/dist/server";
2-
import { Demo } from "@repo/shared";
32
import Markdown from "react-markdown";
43
import { autoLinkMd } from "react-markdown-autolink";
54

lib/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
44
"private": false,
55
"version": "0.0.0",
6-
"description": "A highly lightweight utility that automatically detects and makes links clickable in Markdown rendered by react-markdown.",
6+
"description": "A highly lightweight utility that automatically detects and makes links clickable in Markdown.",
77
"license": "MPL-2.0",
88
"main": "./dist/index.js",
99
"module": "./dist/index.mjs",

0 commit comments

Comments
 (0)