Rebrand 💖 <a href=https://mayank-chaudhari.vercel.app target=_blank>Mayank Kumar Chaudhari</a> [skip ci]

Author: mayank1513

.github/FUNDING.yml

@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: [mayank1513] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [react18-tools, mayank1513] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 polar: mayank1513
 patreon: # Replace with a single Patreon username
 open_collective: # Replace with a single Open Collective username

.github/workflows/manual-publish.yml

@@ -32,8 +32,8 @@ jobs:
         run: pnpm test
       - name: clean up working directory
         run: git status && git clean -f -d && git status
-      # - name: Copy Readme file
-      # run: cp ./README.md ./lib # todo: uncomment this line while rebranding
+      - name: Copy Readme file
+        run: cp ./README.md ./lib # todo: uncomment this line while rebranding
       - name: Apply changesets, publish and create release, branches and tags
         run: node ./scripts/manual-publish.js
         env:

.github/workflows/publish.yml

@@ -34,8 +34,8 @@ jobs:
         # fail and not publish if any of the unit tests are failing
       - name: Test
         run: pnpm test
-      # - name: Copy Readme file
-      # run: cp ./README.md ./lib # will be uncommented while rebranding
+      - name: Copy Readme file
+        run: cp ./README.md ./lib # will be uncommented while rebranding
       - name: Apply changesets, publish and create release, branches and tags
         run: node ./scripts/publish.js
         env:

.github/workflows/setup.yml

@@ -28,12 +28,12 @@
     },
     "RX4J5v4y5IOe_ucf8pMRT": {
       "id": "RX4J5v4y5IOe_ucf8pMRT",
-      "description": "🌟 Enable [private vulnerability reporting] (For public repo - do this after updating visibility to public)",
+      "description": "🌟 Enable [private vulnerability reporting](https://github.com/react18-tools/react-markdown-autolink/security) (For public repo - do this after updating visibility to public)",
       "columnId": "column-todo"
     },
     "EdPbrbJLllUHfZmCS80f7": {
       "id": "EdPbrbJLllUHfZmCS80f7",
-      "description": "Set up `CodeCov`\n  - Visit Codecov and set up your repo\n  - Create [repository secret] for `CODECOV_TOKEN`",
+      "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`",
       "columnId": "column-todo"
     },
     "MLLUsAhCKaKxvEXFY0HSq": {
@@ -68,7 +68,7 @@
     },
     "5vS1JNXoMhDl5IBljwh2v": {
       "id": "5vS1JNXoMhDl5IBljwh2v",
-      "description": "Set up GitHub pages to deploy docs\n  - Go to [repo settings] -> pages (On the left panel); Select deploy from a branch; Then Select `main` and `/docs`",
+      "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`",
       "columnId": "column-todo"
     },
     "55DAZwduwTvlaxaJC8hlX": {

.tkb

@@ -1,88 +1,131 @@
-# Turborepo Template <img src="https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true" style="height: 40px"/>
+# React Markdown Autolink <img src="https://github.com/react18-tools/react-markdown-autolink/blob/main/popper.png?raw=true" style="height: 40px"/>
 
-[![test](https://github.com/react18-tools/turborepo-template/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/turborepo-template/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/turborepo-template/maintainability) [![codecov](https://codecov.io/gh/react18-tools/turborepo-template/graph/badge.svg)](https://codecov.io/gh/react18-tools/turborepo-template) [![Version](https://img.shields.io/npm/v/react18-loaders.svg?colorB=green)](https://www.npmjs.com/package/react18-loaders) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react18-loaders.svg)](https://www.npmjs.com/package/react18-loaders) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react18-loaders) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+[![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/)
 
-> [Explore featured packages built with this template.](./FEATURED.md)
+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.
 
-> Exciting news! We've launched a new course to help you master this template: [Craft Next Gen UI Libraries for React 18 and Next.js 14](https://www.udemy.com/course/craft-next-gen-ui-libraries-for-react-18-and-nextjs-14/?referralCode=46B8C7845ECCEA99E0EF)
+✅ Fully Treeshakable (import from `react-markdown-autolink/client/loader-container`)
 
-<details>
-<summary style="cursor:pointer"><h2 style="display:inline-block">Features</h2></summary>
+✅ Fully TypeScript Supported
 
-This template offers the following pre-configured features. Additionally, your repository will automatically be rebranded with the help of workflows and post-install scripts.
+✅ Leverages the power of React 18 Server components
 
-✅ Monorepo powered by Turborepo and GitHub actions for automating building, testing, and deploying your library
+✅ Compatible with all React 18 build systems/tools/frameworks
 
-✅ Examples with Next.js, Vite, and Remix to showcase how your library can be utilized (Note: Remix is optional due to instability in monorepo setup and folder imports)
+✅ Documented with [Typedoc](https://react18-tools.github.io/react-markdown-autolink) ([Docs](https://react18-tools.github.io/react-markdown-autolink))
 
-✅ Examples pre-configured for Light/Dark theme based on user preference
+✅ Examples for Next.js, Vite, and Remix
 
-✅ Examples ready to be deployed to Vercel
+> <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.
 
-✅ Typedoc setup for automatic documentation generation based on tsdoc comments
+## Getting Started
 
-✅ Code of Conduct and contributing files, ready for customization
+### Installation
 
-✅ Prettier and linter configured according to modern best practices (Feel free to add your flavor)
+```bash
+$ pnpm add react-markdown-autolink
+```
 
-✅ Recommended VSCode extensions - Prettier and [Kanban board](https://github.com/mayank1513/vscode-extension-trello-kanban-board) for code formatting and project management directly within your IDE
+**_or_**
 
-✅ Powerful code generators - try `yarn plop`
+```bash
+$ npm install react-markdown-autolink
+```
 
-✅ Test setup with Vitest - A modern and fast testing framework supporting Jest-like APIs
+**_or_**
 
-✅ Workflows to automate testing on every pull-request or code push event
+```bash
+$ yarn add react-markdown-autolink
+```
 
-✅ Workflow to automatically publish and create GitHub releases when you update your library's `package.json` file.
+## 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)
 
-✅ Workflow to automatically rebrand the entire template based on your repository name. (Refer [TODO.md](./TODO.md))
+```bash
+$ pnpm add react-markdown-autolink-lite
+```
 
-✅ Plus, this readme file includes a quick checklist for configuring Codecov and other badges, setting up your docs website on GitHub pages, and more. See [Checklist](./TODO.md).
+**or**
 
-### Creates a library that is
+```bash
+$ npm install react-markdown-autolink-lite
+```
 
-✅ Fully Treeshakable (e.g., import {Bars1, Bars2} from `react18-loaders/dist/server/bars`)
+**or**
 
-✅ Fully TypeScript Supported
+```bash
+$ yarn add react-markdown-autolink-lite
+```
 
-✅ Leverages the power of React 18 Server components
+> You need `r18gs` as a peer-dependency
 
-✅ Compatible with all React 18 build systems/tools/frameworks
+### Import Styles
 
-✅ Documented with [Typedoc](https://react18-tools.github.io/turborepo-template) ([Docs](https://react18-tools.github.io/turborepo-template))
+You can import styles globally or within specific components.
 
-</details>
+```css
+/* globals.css */
+@import "react-markdown-autolink/dist";
+```
 
-## Getting Started:
+```tsx
+// layout.tsx
+import "react-markdown-autolink/dist/index.css";
+```
 
-This template is based on one of the official Turbo Repo starters but comes with a plethora of additional features specifically designed for developing and publishing JavaScript/TypeScript libraries, especially for React 18.
+For selective imports:
 
-To get started, simply click on the `"Use this template"` button to create a new repository based on this template, \*\*update [`sripts/rebrand.config.json`](./scripts/rebrand.config.json) if required, and install dependencies(Will automatically trigger rebrand.js). Customize it according to your requirements for your next JavaScript/TypeScript/React/Next.js library or project.
+```css
+/* globals.css */
+@import "react-markdown-autolink/dist/client"; /** required if you are using LoaderContainer */
+@import "react-markdown-autolink/dist/server/bars/bars1";
+```
 
-For detailed instructions and a checklist, please refer to [TODO.md](./TODO.md).
+### Usage
 
-## What's Different from Turborepo official templates?
+Using loaders is straightforward.
 
-Compared to the default scaffold from create-turbo, this template offers:
+```tsx
+import { Bars1 } from "react-markdown-autolink/dist/server/bars/bars1";
 
-- Unit tests with `vitest`
-- Build setup with `tsup` and `esbuild-plugin-react18` that supports React Server components out of the box
-- **Automatic file generation**
-  - Simply run `yarn plop` and follow the prompts to auto-generate your new component with test files and dependency linking, adhering to best practices automatically
-- GitHub actions/workflows to auto-publish your package when the version changes
-- GitHub action/workflow + pre-install scripts to automatically rebrand your repo on creation
+export default function MyComponent() {
+  return someCondition ? <Bars1 /> : <>Something else...</>;
+}
+```
 
-### 🤩 Don't forget to star [this repository](https://github.com/react18-tools/turborepo-template)!
+For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/react-markdown-autolink).
 
-Looking for a hands-on course to get started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React, and TypeScript](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescript/?referralCode=851A28F10B254A8523FE)
+**Using LoaderContainer**
 
-![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image")
+`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
+
+```tsx
+// layout.tsx
+<LoaderContainer />
+	 ...
+```
+
+```tsx
+// some other page or component
+import { useLoader } from "react-markdown-autolink/dist/hooks";
+
+export default MyComponent() {
+	const { setLoading } = useLoader();
+	useCallback(()=>{
+		setLoading(true);
+		...do some work
+		setLoading(false);
+	}, [])
+	...
+}
+```
 
 ## License
 
-Licensed under the MPL-2.0 open-source license.
+This library is licensed under the MPL-2.0 open-source license.
+
+
 
-> <img src="https://github.com/react18-tools/turborepo-template/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
+> <img src="https://github.com/react18-tools/react-markdown-autolink/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
 
 <hr />
 

README.md

@@ -20,4 +20,4 @@ Note: We only accept pull requests addressing security vulnerabilities. Addition
 
 ## Reporting Vulnerabilities
 
-Kindly report vulnerabilities [here](https://github.com/react18-tools/turborepo-template/security/advisories/new).
+Kindly report vulnerabilities [here](https://github.com/react18-tools/react-markdown-autolink/security/advisories/new).

SECURITY.md

@@ -1,7 +1,7 @@
 ## Step-by-Step Instructions and Checklist
 
 - [ ] Star [this repository](https://github.com/react18-tools/turborepo-template/) for easy access and to show your support
-- [ ] Create a new GitHub repository using this template.
+- [x] Create a new GitHub repository using this template.
   - Click the `Use this template` button at the top right -> `Create a new repository`
   - Click `Create repository` and wait for the setup workflow to finish rebranding your repo.
 - [ ] Install and set up Node.js and your IDE (VSCode recommended)
@@ -14,10 +14,10 @@
   - Run `pnpm i` to install dependencies; the `rebrand` script will automatically rebrand the repo, adjust workflows, and create a commit
 - [ ] Make sure you run `node scripts/rebrand.js` from the root directory to rebrand your repo.
 - [ ] Run `yarn plop`, and follow prompts to generate server or client components for your library
-- [ ] 🌟 Enable [private vulnerability reporting]
+- [ ] 🌟 Enable [private vulnerability reporting](https://github.com/react18-tools/react-markdown-autolink/security)
 - [ ] Set up `CodeCov`
   - Visit Codecov and set up your repo
-  - Create [repository secret] for `CODECOV_TOKEN`
+  - Create [repository secret]((https://github.com/react18-tools/react-markdown-autolink/settings/secrets/actions)) for `CODECOV_TOKEN`
 - [ ] Set up `CodeClimate`
   - Visit CodeClimate and set up your repo
   - Create [repository secret] for `CC_TEST_REPORTER_ID`
@@ -31,7 +31,7 @@
 - [ ] Create your library and update examples
 - [ ] Update README as required
 - [ ] Set up GitHub pages to deploy docs
-  - Go to [repo settings] -> pages (On the left panel); Select deploy from a branch; Then Select `main` and `/docs`
+  - 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`
 - [ ] (Optional) Set up [Deepsource](https://app.deepsource.com/login) for static code analysis
 - [ ] Push your changes/Create PR and see your library being automatically tested and published
 - [ ] Optionally deploy your examples to Vercel.

TODO.md

@@ -37,4 +37,4 @@
     "tsup": "^8.1.0",
     "typescript": "^5.5.3"
   }
-}
+}

examples/express/package.json

@@ -18,8 +18,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-mouse-trails": "^0.0.4",
-    "react18-loaders": "workspace:*",
-    "webgl-generative-particles": "^0.0.1"
+    "react18-loaders": "latest",
+    "webgl-generative-particles": "^0.0.1",
+    "react-markdown-autolink": "workspace:*"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.5",
@@ -30,4 +31,4 @@
     "@types/react-dom": "^18.3.0",
     "typescript": "^5.5.3"
   }
-}
+}

examples/nextjs/package.json

@@ -3,7 +3,7 @@ import { LandingPage } from "@repo/shared/dist/server";
 import { Demo } from "@repo/shared";
 
 export const metadata = {
-  title: "React 18 Loaders",
+  title: "React Markdown Autolink",
 };
 
 /** next.js landing page */

examples/nextjs/src/app/page.tsx

@@ -20,8 +20,9 @@
     "nextjs-darkmode": "^1.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react18-loaders": "workspace:*",
-    "react18-themes": "^3.2.0"
+    "react18-loaders": "latest",
+    "react18-themes": "^3.2.0",
+    "react-markdown-autolink": "workspace:*"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.10.2",
@@ -34,4 +35,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

examples/remix/package.json

@@ -16,8 +16,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-mouse-trails": "^0.0.4",
-    "react18-loaders": "workspace:*",
-    "react18-themes": "^3.2.0"
+    "react18-loaders": "latest",
+    "react18-themes": "^3.2.0",
+    "react-markdown-autolink": "workspace:*"
   },
   "devDependencies": {
     "@repo/eslint-config": "workspace:*",
@@ -28,4 +29,4 @@
     "typescript": "^5.5.3",
     "vite": "^5.3.3"
   }
-}
+}