diff --git a/docs/assets/highlight.css b/docs/assets/highlight.css index 15bbd891..09ee5bcd 100644 --- a/docs/assets/highlight.css +++ b/docs/assets/highlight.css @@ -7,6 +7,10 @@ --dark-hl-2: #CE9178; --light-hl-3: #001080; --dark-hl-3: #9CDCFE; + --light-hl-4: #008000; + --dark-hl-4: #6A9955; + --light-hl-5: #AF00DB; + --dark-hl-5: #C586C0; --light-code-background: #FFFFFF; --dark-code-background: #1E1E1E; } @@ -16,6 +20,8 @@ --hl-1: var(--light-hl-1); --hl-2: var(--light-hl-2); --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); --code-background: var(--light-code-background); } } @@ -24,6 +30,8 @@ --hl-1: var(--dark-hl-1); --hl-2: var(--dark-hl-2); --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); --code-background: var(--dark-code-background); } } @@ -32,6 +40,8 @@ --hl-1: var(--light-hl-1); --hl-2: var(--light-hl-2); --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); --code-background: var(--light-code-background); } @@ -40,6 +50,8 @@ --hl-1: var(--dark-hl-1); --hl-2: var(--dark-hl-2); --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); --code-background: var(--dark-code-background); } @@ -47,4 +59,6 @@ .hl-1 { color: var(--hl-1); } .hl-2 { color: var(--hl-2); } .hl-3 { color: var(--hl-3); } +.hl-4 { color: var(--hl-4); } +.hl-5 { color: var(--hl-5); } pre, code { background: var(--code-background); } diff --git a/docs/functions/client_star_me_star_me.StarMe.html b/docs/functions/client_star_me_star_me.StarMe.html index de108899..e327a74d 100644 --- a/docs/functions/client_star_me_star_me.StarMe.html +++ b/docs/functions/client_star_me_star_me.StarMe.html @@ -1,2 +1,2 @@ StarMe | Code Documentation

Function StarMe

Settings

Member Visibility

Theme

On This Page

StarMe
\ No newline at end of file +

Parameters

Returns Element

Settings

Member Visibility

Theme

On This Page

StarMe
\ No newline at end of file diff --git a/docs/functions/server_fork_me_fork_me.ForkMe.html b/docs/functions/server_fork_me_fork_me.ForkMe.html index 40f158c2..cbe57cbc 100644 --- a/docs/functions/server_fork_me_fork_me.ForkMe.html +++ b/docs/functions/server_fork_me_fork_me.ForkMe.html @@ -1,4 +1,4 @@ ForkMe | Code Documentation

Function ForkMe

Settings

Member Visibility

Theme

On This Page

ForkMe
\ No newline at end of file +

Settings

Member Visibility

Theme

On This Page

ForkMe
\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index abec72fe..9b7641fd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,9 +1,9 @@ -Code Documentation

Code Documentation

ForkMe

test Maintainability codecov Version Downloads npm bundle size Gitpod ready-to-code

+Code Documentation

Code Documentation

Fork Me React.js component

test Maintainability codecov Version Downloads npm bundle size Gitpod ready-to-code

-

Featured packages built with this template.

+

A simple fork me component for React.js projects!

-

We are happy to announce that we have launched a new course to help you understand this template better Craft Next Gen UI Libraries for React 18 and Next.js 14

+

We are happy to announce that we have launched a new course to help you understand the turborepo-template better Craft Next Gen UI Libraries for React 18 and Next.js 14

Features

✅ Fully Treeshakable (import from @mayank1513/fork-me/client/component)

✅ Full TypeScript Support

@@ -18,95 +18,16 @@

or

$ yarn add @mayank1513/fork-me
-

Getting started:

Click on the "Use this template" button to customize it for your next JavaScript/TypeScript/React/Vue/Next.js library or project.

-

What's Different?

Compared to the default scaffold from create-turbo, this template offers:

-
    -
  • Unit tests with vitest
    • -
  • Build setup with tsup and esbuild-react18-useclient Supports React Server components out of the box
    • -
  • Automatic file generation
      -
    • just run yarn turbo gen and follow the prompts to auto generate your new component with test file and dependency linking
      • -
    • follow best practices automatically
      • -
    -
    • -
  • GitHub actions/workflows to auto publish your package when version changes
    • -
  • GitHub action/workflow + preinstall scripts to automatically rebrand your repo on creation
    • -
-

Step by Step Instructions and Checklist

    -
  • run node scope.js from the root directory if you want to publish scoped pacckage.
      -
    • We assumed that your npm user name is same as your GitHub account or organization username.
      • -
    • Please make sure owner is set to your <npmjs.com> username before running the above command.
      • -
    -
    • -
  • Set up CodeCov -
    • -
  • Set up CodeClimate
      -
    • Visit CodeClimate and setup your repo
      • -
    • Create repository secret for CC_TEST_REPORTER_ID
      • -
    • add *.test.* to ignore patterns on the website
      • -
    • update code climate badge
      • -
    -
    • -
  • Add NPM_AUTH_TOKEN to repository secrets to automate publishing package
      -
    • login to your npm account and create automation token
      • -
    • Create a new repository secrets NPM_AUTH_TOKEN
      • -
    -
    • -
  • Update description in lib/@mayank1513/fork-me/package.json
    • -
  • Update Repo Stats by visiting and setting up repobeats
    • -
  • Create your library and update examples
    • -
  • Update README
    • -
  • Setup GitHub pages to deploy docs
      -
    • Go to repo settings -> pages (On left panel); Select deploy from a branch; Then Select main and /docs
      • -
    -
    • -
  • (Optional) Set up Deepsource for static code analysis
    • -
  • Push your changes/Create PR and see your library being automatically tested and published
    • -
  • Optionally deploy your example(s) to Vercel.
    • -
  • Update sponsorship urls.
    • -
  • You are most welcome to star this template, contribute, and/or sponsor the terborepo-template project or my other open-source work
    • -
  • You can also fork the terborepo-template and add your package to packages/shared-ui/src/examples/featured.json
      -
    • If approved your package will be automatically added to FEATURED.md and also published on the home page of this repo.
      • -
    -
    • -
-

What's inside?

Utilities

This Turborepo template includes pre-configured tools:

-
    -
  • TypeScript for static type checking
    • -
  • ESLint for code linting
    • -
  • Prettier for code formatting
    • -
  • Plop based code generator for scaffolding new components
    • -
  • Automatically rebrand this template to match your repo name
    • -
-

Apps and Packages

This Turborepo includes the following packages/examples/lib:

-
    -
  • nextjs: a Next.js app
    • -
  • vite: a Vite.js app
    • -
  • @mayank1513/fork-me: a React component library shared by both Next.js and Vite examples
    • -
  • eslint-config-custom: ESLint configurations (includes eslint-config-next and eslint-config-prettier)
    • -
  • tsconfig: tsconfig.jsons used throughout the monorepo
    • -
-

Each package/example is 100% TypeScript.

-

Build

To build all apps and packages, run the following command:

-
cd @mayank1513/fork-me
pnpm build
+
Add on your page
<ForkMe gitHubUrl="https://github.com/mayank1513/turborepo-template" />
// and
<StarMe gitHubUrl="https://github.com/mayank1513/turborepo-template" />
 

-
Develop
To develop all apps and packages, run the following command:

-
cd @mayank1513/fork-me
pnpm dev
+
You need to import styles for ForkMe component

+
import "@mayank1513/fork-me/server/index.css";
 

-
Useful Links
Learn more about the power of Turborepo:

-
-
🤩 Don't forger to star this repo!
Want hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScrypt

-
Repo Stats

+
Optional parameters
    text?: string; // replace the Fork me on GitHub text
    width?: string | number; // if you need to adjust the width of the ribbon (length)
    height?: string | number; // to adjust height of the ribbon
    bgColor?: string; // background color
    textColor?: string; // text color
+

+
🤩 Don't forger to star this repo!
Want hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScrypt

+
Repo Stats

 
License
Licensed as MIT open source.

 

 
-
with 💖 by Mayank Kumar Chaudhari

Settings

Member Visibility

Theme

On This Page

ForkMe
\ No newline at end of file +

with 💖 by Mayank Kumar Chaudhari

Settings

Member Visibility

Theme

On This Page

Fork Me React.js component
\ No newline at end of file diff --git a/docs/modules/client_star_me_star_me.html b/docs/modules/client_star_me_star_me.html index 44068c89..e64814fe 100644 --- a/docs/modules/client_star_me_star_me.html +++ b/docs/modules/client_star_me_star_me.html @@ -1,2 +1,2 @@ -client/star-me/star-me | Code Documentation

Module client/star-me/star-me

Index

Functions

StarMe +client/star-me/star-me | Code Documentation

Module client/star-me/star-me

Index

Functions

StarMe

Settings

Member Visibility

Theme

\ No newline at end of file diff --git a/docs/modules/declaration.html b/docs/modules/declaration.html index b23ce24d..8d17605c 100644 --- a/docs/modules/declaration.html +++ b/docs/modules/declaration.html @@ -1 +1 @@ -declaration | Code Documentation

Module declaration

Settings

Member Visibility

Theme

\ No newline at end of file +declaration | Code Documentation

Module declaration

Settings

Member Visibility

Theme

\ No newline at end of file diff --git a/docs/modules/server_fork_me_fork_me.html b/docs/modules/server_fork_me_fork_me.html index 4f9c363e..4bef8a38 100644 --- a/docs/modules/server_fork_me_fork_me.html +++ b/docs/modules/server_fork_me_fork_me.html @@ -1,2 +1,2 @@ -server/fork-me/fork-me | Code Documentation

Module server/fork-me/fork-me

Index

Functions

ForkMe +server/fork-me/fork-me | Code Documentation

Module server/fork-me/fork-me

Index

Functions

ForkMe

Settings

Member Visibility

Theme

\ No newline at end of file diff --git a/lib/fork-me/README.md b/lib/fork-me/README.md index 1ad5a6e9..43043065 100644 --- a/lib/fork-me/README.md +++ b/lib/fork-me/README.md @@ -1,10 +1,10 @@ -# ForkMe +# Fork Me React.js component -[![test](https://github.com/react18-tools/fork-me/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/fork-me/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/fork-me/maintainability) [![codecov](https://codecov.io/gh/react18-tools/fork-me/graph/badge.svg)](https://codecov.io/gh/react18-tools/fork-me) [![Version](https://img.shields.io/npm/v/@mayank1513/fork-me.svg?colorB=green)](https://www.npmjs.com/package/@mayank1513/fork-me) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/@mayank1513/fork-me.svg)](https://www.npmjs.com/package/@mayank1513/fork-me) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@mayank1513/fork-me) [![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/fork-me/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/fork-me/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/b2526ab45866fe864beb/maintainability)](https://codeclimate.com/github/react18-tools/fork-me/maintainability) [![codecov](https://codecov.io/gh/react18-tools/fork-me/graph/badge.svg)](https://codecov.io/gh/react18-tools/fork-me) [![Version](https://img.shields.io/npm/v/@mayank1513/fork-me.svg?colorB=green)](https://www.npmjs.com/package/@mayank1513/fork-me) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/@mayank1513/fork-me.svg)](https://www.npmjs.com/package/@mayank1513/fork-me) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@mayank1513/fork-me) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/) -> [Featured packages built with this template.](./FEATURED.md) +> A simple fork me component for React.js projects! -> We are happy to announce that we have launched a new course to help you understand this template better [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) +> We are happy to announce that we have launched a new course to help you understand the [turborepo-template](https://github.com/react18-tools/turborepo-template) better [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) ## Features @@ -36,110 +36,35 @@ or $ yarn add @mayank1513/fork-me ``` -## Getting started: - -Click on the `"Use this template"` button to customize it for your next JavaScript/TypeScript/React/Vue/Next.js library or project. - -## What's Different? - -Compared to the default scaffold from create-turbo, this template offers: - -- Unit tests with `vitest` -- Build setup with `tsup` and `esbuild-react18-useclient` Supports React Server components out of the box -- **Automatic file generation** - - just run `yarn turbo gen` and follow the prompts to auto generate your new component with test file and dependency linking - - follow best practices automatically -- GitHub actions/workflows to auto publish your package when version changes -- GitHub action/workflow + preinstall scripts to automatically rebrand your repo on creation - -## Step by Step Instructions and Checklist - -- [ ] run `node scope.js` from the root directory if you want to publish scoped pacckage. - - [ ] We assumed that your npm user name is same as your GitHub account or organization username. - - [ ] Please make sure `owner` is set to your username before running the above command. -- [ ] Set up `CodeCov` - - [ ] Visit codecov and setup your repo - - [ ] Create [repository secret](https://github.com/react18-tools/@mayank1513/fork-me/settings/secrets/actions) for `CODECOV_TOKEN` -- [ ] Set up `CodeClimate` - - [ ] Visit CodeClimate and setup your repo - - [ ] Create [repository secret](https://github.com/react18-tools/@mayank1513/fork-me/settings/secrets/actions) for `CC_TEST_REPORTER_ID` - - [ ] add `*.test.*` to ignore patterns on the website - - [ ] update code climate badge -- [ ] Add `NPM_AUTH_TOKEN` to repository secrets to automate publishing package - - [ ] login to your [`npm` account](https://www.npmjs.com/login) and create automation token - - [ ] Create a new repository secrets `NPM_AUTH_TOKEN` -- [ ] Update description in `lib/@mayank1513/fork-me/package.json` -- [ ] Update Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/) -- [ ] Create your library and update examples -- [ ] Update README -- [ ] Setup GitHub pages to deploy docs - - [ ] Go to [repo settings](https://github.com/react18-tools/@mayank1513/fork-me/settings/pages) -> pages (On 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 example(s) to Vercel. -- [ ] Update sponsorship urls. -- [ ] You are most welcome to star this template, contribute, and/or sponsor the `terborepo-template` project or my other open-source work -- [ ] You can also fork the [`terborepo-template`](https://github.com/react18-tools/turbo-repo-template/fork) and add your package to `packages/shared-ui/src/examples/featured.json` - - [ ] If approved your package will be automatically added to FEATURED.md and also published on the home page of this repo. - -## What's inside? - -### Utilities - -This Turborepo template includes pre-configured tools: - -- [TypeScript](https://www.typescriptlang.org/) for static type checking -- [ESLint](https://eslint.org/) for code linting -- [Prettier](https://prettier.io) for code formatting -- Plop based code generator for scaffolding new components -- Automatically rebrand this template to match your repo name - -### Apps and Packages - -This Turborepo includes the following packages/examples/lib: - -- `nextjs`: a [Next.js](https://nextjs.org/) app -- `vite`: a [Vite.js](https://vitest.dev) app -- `@mayank1513/fork-me`: a React component library shared by both `Next.js` and `Vite` examples -- `eslint-config-custom`: ESLint configurations (includes `eslint-config-next` and `eslint-config-prettier`) -- `tsconfig`: `tsconfig.json`s used throughout the monorepo - -Each package/example is 100% [TypeScript](https://www.typescriptlang.org/). - -### Build - -To build all apps and packages, run the following command: +## Add on your page +```ts + +// and + ``` -cd @mayank1513/fork-me -pnpm build -``` - -### Develop -To develop all apps and packages, run the following command: +You need to import styles for ForkMe component -``` -cd @mayank1513/fork-me -pnpm dev +```ts +import "@mayank1513/fork-me/server/index.css"; ``` -## Useful Links +## Optional parameters -Learn more about the power of Turborepo: - -- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks) -- [Caching](https://turbo.build/repo/docs/core-concepts/caching) -- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) -- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering) -- [Configuration Options](https://turbo.build/repo/docs/reference/configuration) -- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference) +```ts + text?: string; // replace the Fork me on GitHub text + width?: string | number; // if you need to adjust the width of the ribbon (length) + height?: string | number; // to adjust height of the ribbon + bgColor?: string; // background color + textColor?: string; // text color +``` -### 🤩 Don't forger to star [this repo](https://github.com/react18-tools/@mayank1513/fork-me)! +### 🤩 Don't forger to star [this repo](https://github.com/react18-tools/fork-me)! Want hands-on course for getting 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 TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE) -![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image") +![Repo Stats](https://repobeats.axiom.co/api/embed/e055f5cf540a01da558a64a02a943f4ad05d0985.svg "Repobeats analytics image") ## License