|
1 | | -# ForkMe |
| 1 | +# Fork Me React.js component |
2 | 2 |
|
3 | | -[](https://github.com/react18-tools/fork-me/actions/workflows/test.yml) [](https://codeclimate.com/github/react18-tools/fork-me/maintainability) [](https://codecov.io/gh/react18-tools/fork-me) [](https://www.npmjs.com/package/@mayank1513/fork-me) [](https://www.npmjs.com/package/@mayank1513/fork-me)  [](https://gitpod.io/from-referrer/) |
| 3 | +[](https://github.com/react18-tools/fork-me/actions/workflows/test.yml) [](https://codeclimate.com/github/react18-tools/fork-me/maintainability) [](https://codecov.io/gh/react18-tools/fork-me) [](https://www.npmjs.com/package/@mayank1513/fork-me) [](https://www.npmjs.com/package/@mayank1513/fork-me)  [](https://gitpod.io/from-referrer/) |
4 | 4 |
|
5 | | -> [Featured packages built with this template.](./FEATURED.md) |
| 5 | +> A simple fork me component for React.js projects! |
6 | 6 |
|
7 | | -> 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) |
| 7 | +> 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) |
8 | 8 |
|
9 | 9 | ## Features |
10 | 10 |
|
|
36 | 36 | $ yarn add @mayank1513/fork-me |
37 | 37 | ``` |
38 | 38 |
|
39 | | -## Getting started: |
40 | | - |
41 | | -Click on the `"Use this template"` button to customize it for your next JavaScript/TypeScript/React/Vue/Next.js library or project. |
42 | | - |
43 | | -## What's Different? |
44 | | - |
45 | | -Compared to the default scaffold from create-turbo, this template offers: |
46 | | - |
47 | | -- Unit tests with `vitest` |
48 | | -- Build setup with `tsup` and `esbuild-react18-useclient` Supports React Server components out of the box |
49 | | -- **Automatic file generation** |
50 | | - - just run `yarn turbo gen` and follow the prompts to auto generate your new component with test file and dependency linking |
51 | | - - follow best practices automatically |
52 | | -- GitHub actions/workflows to auto publish your package when version changes |
53 | | -- GitHub action/workflow + preinstall scripts to automatically rebrand your repo on creation |
54 | | - |
55 | | -## Step by Step Instructions and Checklist |
56 | | - |
57 | | -- [ ] run `node scope.js` from the root directory if you want to publish scoped pacckage. |
58 | | - - [ ] We assumed that your npm user name is same as your GitHub account or organization username. |
59 | | - - [ ] Please make sure `owner` is set to your <npmjs.com> username before running the above command. |
60 | | -- [ ] Set up `CodeCov` |
61 | | - - [ ] Visit codecov and setup your repo |
62 | | - - [ ] Create [repository secret](https://github.com/react18-tools/@mayank1513/fork-me/settings/secrets/actions) for `CODECOV_TOKEN` |
63 | | -- [ ] Set up `CodeClimate` |
64 | | - - [ ] Visit CodeClimate and setup your repo |
65 | | - - [ ] Create [repository secret](https://github.com/react18-tools/@mayank1513/fork-me/settings/secrets/actions) for `CC_TEST_REPORTER_ID` |
66 | | - - [ ] add `*.test.*` to ignore patterns on the website |
67 | | - - [ ] update code climate badge |
68 | | -- [ ] Add `NPM_AUTH_TOKEN` to repository secrets to automate publishing package |
69 | | - - [ ] login to your [`npm` account](https://www.npmjs.com/login) and create automation token |
70 | | - - [ ] Create a new repository secrets `NPM_AUTH_TOKEN` |
71 | | -- [ ] Update description in `lib/@mayank1513/fork-me/package.json` |
72 | | -- [ ] Update Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/) |
73 | | -- [ ] Create your library and update examples |
74 | | -- [ ] Update README |
75 | | -- [ ] Setup GitHub pages to deploy docs |
76 | | - - [ ] 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` |
77 | | -- [ ] (Optional) Set up [Deepsource](https://app.deepsource.com/login) for static code analysis |
78 | | -- [ ] Push your changes/Create PR and see your library being automatically tested and published |
79 | | -- [ ] Optionally deploy your example(s) to Vercel. |
80 | | -- [ ] Update sponsorship urls. |
81 | | -- [ ] You are most welcome to star this template, contribute, and/or sponsor the `terborepo-template` project or my other open-source work |
82 | | -- [ ] 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` |
83 | | - - [ ] If approved your package will be automatically added to FEATURED.md and also published on the home page of this repo. |
84 | | - |
85 | | -## What's inside? |
86 | | - |
87 | | -### Utilities |
88 | | - |
89 | | -This Turborepo template includes pre-configured tools: |
90 | | - |
91 | | -- [TypeScript](https://www.typescriptlang.org/) for static type checking |
92 | | -- [ESLint](https://eslint.org/) for code linting |
93 | | -- [Prettier](https://prettier.io) for code formatting |
94 | | -- Plop based code generator for scaffolding new components |
95 | | -- Automatically rebrand this template to match your repo name |
96 | | - |
97 | | -### Apps and Packages |
98 | | - |
99 | | -This Turborepo includes the following packages/examples/lib: |
100 | | - |
101 | | -- `nextjs`: a [Next.js](https://nextjs.org/) app |
102 | | -- `vite`: a [Vite.js](https://vitest.dev) app |
103 | | -- `@mayank1513/fork-me`: a React component library shared by both `Next.js` and `Vite` examples |
104 | | -- `eslint-config-custom`: ESLint configurations (includes `eslint-config-next` and `eslint-config-prettier`) |
105 | | -- `tsconfig`: `tsconfig.json`s used throughout the monorepo |
106 | | - |
107 | | -Each package/example is 100% [TypeScript](https://www.typescriptlang.org/). |
108 | | - |
109 | | -### Build |
110 | | - |
111 | | -To build all apps and packages, run the following command: |
| 39 | +## Add on your page |
112 | 40 |
|
| 41 | +```ts |
| 42 | +<ForkMe gitHubUrl="https://github.com/mayank1513/turborepo-template" /> |
| 43 | +// and |
| 44 | +<StarMe gitHubUrl="https://github.com/mayank1513/turborepo-template" /> |
113 | 45 | ``` |
114 | | -cd @mayank1513/fork-me |
115 | | -pnpm build |
116 | | -``` |
117 | | - |
118 | | -### Develop |
119 | 46 |
|
120 | | -To develop all apps and packages, run the following command: |
| 47 | +You need to import styles for ForkMe component |
121 | 48 |
|
122 | | -``` |
123 | | -cd @mayank1513/fork-me |
124 | | -pnpm dev |
| 49 | +```ts |
| 50 | +import "@mayank1513/fork-me/server/index.css"; |
125 | 51 | ``` |
126 | 52 |
|
127 | | -## Useful Links |
| 53 | +## Optional parameters |
128 | 54 |
|
129 | | -Learn more about the power of Turborepo: |
130 | | - |
131 | | -- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks) |
132 | | -- [Caching](https://turbo.build/repo/docs/core-concepts/caching) |
133 | | -- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) |
134 | | -- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering) |
135 | | -- [Configuration Options](https://turbo.build/repo/docs/reference/configuration) |
136 | | -- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference) |
| 55 | +```ts |
| 56 | + text?: string; // replace the Fork me on GitHub text |
| 57 | + width?: string | number; // if you need to adjust the width of the ribbon (length) |
| 58 | + height?: string | number; // to adjust height of the ribbon |
| 59 | + bgColor?: string; // background color |
| 60 | + textColor?: string; // text color |
| 61 | +``` |
137 | 62 |
|
138 | | -### 🤩 Don't forger to star [this repo](https://github.com/react18-tools/@mayank1513/fork-me)! |
| 63 | +### 🤩 Don't forger to star [this repo](https://github.com/react18-tools/fork-me)! |
139 | 64 |
|
140 | 65 | 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) |
141 | 66 |
|
142 | | - |
| 67 | + |
143 | 68 |
|
144 | 69 | ## License |
145 | 70 |
|
|
0 commit comments