diff --git a/README.md b/README.md index 602ffd1..93973c3 100644 --- a/README.md +++ b/README.md @@ -1,218 +1,159 @@ -# Payload Plugin Template +# @intecion/ipal-kit -A template repo to create a [Payload CMS](https://payloadcms.com) plugin. +Intecion Payload Advanced Library — a plugin for Payload CMS 3. -Payload is built with a robust infrastructure intended to support Plugins with ease. This provides a simple, modular, and reusable way for developers to extend the core capabilities of Payload. +Provides internationalization (per-locale routing, hreflang, language switcher), +SEO (metadata, canonical, sitemap, robots), forms (Turnstile, rate limiting, +validation), consent management (consent mode), analytics (GA4/GTM), and a +blog/archive system (collections under an archive page, listing, pagination). -To build your own Payload plugin, all you need is: +**Repository:** https://git.intecion.net/IntecionSoftware/ipal-kit -- An understanding of the basic Payload concepts -- And some JavaScript/Typescript experience +--- -## Background +## Before you start -Here is a short recap on how to integrate plugins with Payload, to learn more visit the [plugin overview page](https://payloadcms.com/docs/plugins/overview). +The `git.intecion.net` server is internal — you'll only see the code and the +package once you're signed in to your Intecion account. Every installation method +needs your personal access token. Without it you'll get a 404 or an +"Unauthorized" error. -### How to install a plugin +You generate the token once. It's tied to your account — don't ask anyone for +theirs, and don't put it in any file that ends up in a repository. -To install any plugin, simply add it to your payload.config() in the Plugin array. +### Generate a token -```ts -import myPlugin from 'my-plugin' +1. Sign in to Gitea → click your avatar → **Settings**. +2. **Applications → Generate New Token**. +3. Name it (e.g. `ipal-kit-install`) and select the scope: + - `read:package` — if you only install the plugin in projects, + - `write:package` — additionally, if you'll publish new versions. +4. Click **Generate**. Copy the token now — Gitea shows it only once. -export const config = buildConfig({ - plugins: [ - // You can pass options to the plugin - myPlugin({ - enabled: true, - }), - ], -}) +### Store the token in your environment + +Don't paste the token straight into project files. Keep it in an environment +variable, so your install config carries no secret. + +```bash +# add to ~/.zshrc (or ~/.bashrc) +export GITEA_TOKEN=paste_your_token_here ``` -### Initialization +Reload your shell (`source ~/.zshrc`) or open a new terminal window. -The initialization process goes in the following order: +--- -1. Incoming config is validated -2. **Plugins execute** -3. Default options are integrated -4. Sanitization cleans and validates data -5. Final config gets initialized +## Installation -## Building the Plugin +There are two routes. Pick **Route A** if you just want to use the plugin in a +project — it's faster and versioned. Choose **Route B** only when you need a +specific, unreleased commit straight from the repository. -When you build a plugin, you are purely building a feature for your project and then abstracting it outside of the project. +### Route A — from the registry (recommended) -### Template Files +The plugin is published to the package registry in Gitea. You pull a ready-built +package and build nothing locally. -In the Payload [plugin template](https://github.com/payloadcms/payload/tree/3.x/templates/plugin), you will see a common file structure that is used across all plugins: +**1. Configure the registry.** Create an `.npmrc` file in your project directory +(or add these two lines to `~/.npmrc` to make it work globally): -1. root folder -2. /src folder -3. /dev folder - -#### Root - -In the root folder, you will see various files that relate to the configuration of the plugin. We set up our environment in a similar manner in Payload core and across other projects, so hopefully these will look familiar: - -- **README**.md\* - This contains instructions on how to use the template. When you are ready, update this to contain instructions on how to use your Plugin. -- **package**.json\* - Contains necessary scripts and dependencies. Overwrite the metadata in this file to describe your Plugin. -- .**eslint**.config.js - Eslint configuration for reporting on problematic patterns. -- .**gitignore** - List specific untracked files to omit from Git. -- .**prettierrc**.json - Configuration for Prettier code formatting. -- **tsconfig**.json - Configures the compiler options for TypeScript -- .**swcrc** - Configuration for SWC, a fast compiler that transpiles and bundles TypeScript. -- **vitest**.config.js - Config file for Vitest, defining how tests are run and how modules are resolved - -**IMPORTANT\***: You will need to modify these files. - -#### Dev - -In the dev folder, you’ll find a basic payload project, created with `npx create-payload-app` and the blank template. - -**IMPORTANT**: Make a copy of the `.env.example` file and rename it to `.env`. Update the `DATABASE_URL` to match the database you are using and your plugin name. Update `PAYLOAD_SECRET` to a unique string. -**You will not be able to run `pnpm/yarn dev` until you have created this `.env` file.** - -`myPlugin` has already been added to the `payload.config()` file in this project. - -```ts -plugins: [ - myPlugin({ - collections: { - posts: true, - }, - }), -] +``` +@intecion:registry=https://git.intecion.net/api/packages/IntecionSoftware/npm/ +//git.intecion.net/api/packages/IntecionSoftware/npm/:_authToken=${GITEA_TOKEN} ``` -Later when you rename the plugin or add additional options, **make sure to update it here**. +Because the token lives in the `${GITEA_TOKEN}` variable, this file holds no +secret — you can safely commit it. -You may wish to add collections or expand the test project depending on the purpose of your plugin. Just make sure to keep this dev environment as simplified as possible - users should be able to install your plugin without additional configuration required. +**2. Install:** -When you’re ready to start development, initiate the project with `pnpm/npm/yarn dev` and pull up [http://localhost:3000](http://localhost:3000) in your browser. - -#### Src - -Now that we have our environment setup and we have a dev project ready to - it’s time to build the plugin! - -**index.ts** - -The essence of a Payload plugin is simply to extend the payload config - and that is exactly what we are doing in this file. - -```ts -export const myPlugin = - (pluginOptions: MyPluginConfig) => - (config: Config): Config => { - // do cool stuff with the config here - - return config - } +```bash +pnpm add @intecion/ipal-kit ``` -First, we receive the existing payload config along with any plugin options. +### Route B — straight from the repository -From here, you can extend the config as you wish. +pnpm clones the repository and uses the pre-built output. There's no `gitea:` +shorthand — give the full address. -Finally, you return the config and that is it! +Over HTTPS with your token: -##### Spread Syntax - -Spread syntax (or the spread operator) is a feature in JavaScript that uses the dot notation **(...)** to spread elements from arrays, strings, or objects into various contexts. - -We are going to use spread syntax to allow us to add data to existing arrays without losing the existing data. It is crucial to spread the existing data correctly – else this can cause adverse behavior and conflicts with Payload config and other plugins. - -Let’s say you want to build a plugin that adds a new collection: - -```ts -config.collections = [ - ...(config.collections || []), - // Add additional collections here -] +```bash +pnpm add git+https://$GITEA_TOKEN@git.intecion.net/IntecionSoftware/ipal-kit.git ``` -First we spread the `config.collections` to ensure that we don’t lose the existing collections, then you can add any additional collections just as you would in a regular payload config. +Or over SSH, if you have a key added in Gitea: -This same logic is applied to other properties like admin, hooks, globals: - -```ts -config.globals = [ - ...(config.globals || []), - // Add additional globals here -] - -config.hooks = { - ...(incomingConfig.hooks || {}), - // Add additional hooks here -} +```bash +pnpm add git+ssh://git@git.intecion.net:IntecionSoftware/ipal-kit.git ``` -Some properties will be slightly different to extend, for instance the onInit property: +Append a specific version after `#` to pin to a release: -```ts -import { onInitExtension } from './onInitExtension' // example file - -config.onInit = async (payload) => { - if (incomingConfig.onInit) await incomingConfig.onInit(payload) - // Add additional onInit code by defining an onInitExtension function - onInitExtension(pluginOptions, payload) -} +```bash +pnpm add git+https://$GITEA_TOKEN@git.intecion.net/IntecionSoftware/ipal-kit.git#v1.0.0 ``` -If you wish to add to the onInit, you must include the **async/await**. We don’t use spread syntax in this case, instead you must await the existing `onInit` before running additional functionality. +--- -In the template, we have stubbed out some addition `onInit` actions that seeds in a document to the `plugin-collection`, you can use this as a base point to add more actions - and if not needed, feel free to delete it. +## Finish setting up your project -##### Types.ts +The plugin doesn't pull in the dependencies it shares with Payload — add them +yourself, in a version matching your Payload: -If your plugin has options, you should define and provide types for these options. - -```ts -export type MyPluginConfig = { - /** - * List of collections to add a custom field - */ - collections?: Partial> - /** - * Disable the plugin - */ - disabled?: boolean -} +```bash +pnpm add @payloadcms/plugin-seo@3.84.1 @payloadcms/plugin-form-builder@3.84.1 \ + nodemailer lucide-react slugify server-only ``` -If possible, include JSDoc comments to describe the options and their types. This allows a developer to see details about the options in their editor. +From here, the guide takes over: **[docs/getting-started.md](./docs/getting-started.md)** — +from an empty project to a working site. -##### Testing +--- -Having a test suite for your plugin is essential to ensure quality and stability. **Vitest** is a fast, modern testing framework that works seamlessly with Vite and supports TypeScript out of the box. +## Publishing a new version -Vitest organizes tests into test suites and cases, similar to other testing frameworks. We recommend creating individual tests based on the expected behavior of your plugin from start to finish. +This section only applies if you develop the plugin itself and publish new +versions. You'll need a token with the `write:package` scope. -Writing tests with Vitest is very straightforward, and you can learn more about how it works in the [Vitest documentation.](https://vitest.dev/) +In `~/.npmrc`: -For this template, we stubbed out `int.spec.ts` in the `dev` folder where you can write your tests. - -```ts -describe('Plugin tests', () => { - // Create tests to ensure expected behavior from the plugin - it('some condition that must be met', () => { - // Write your test logic here - expect(...) - }) -}) +``` +//git.intecion.net/api/packages/IntecionSoftware/npm/:_authToken=${GITEA_TOKEN} ``` -## Best practices +Build, bump the version number, publish: -With this tutorial and the plugin template, you should have everything you need to start building your own plugin. -In addition to the setup, here are other best practices aim we follow: +```bash +pnpm clean && pnpm build +npm version patch # 1.0.0 → 1.0.1 +npm publish +``` -- **Providing an enable / disable option:** For a better user experience, provide a way to disable the plugin without uninstalling it. This is especially important if your plugin adds additional webpack aliases, this will allow you to still let the webpack run to prevent errors. -- **Include tests in your GitHub CI workflow**: If you’ve configured tests for your package, integrate them into your workflow to run the tests each time you commit to the plugin repository. Learn more about [how to configure tests into your GitHub CI workflow.](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs) -- **Publish your finished plugin to NPM**: The best way to share and allow others to use your plugin once it is complete is to publish an NPM package. This process is straightforward and well documented, find out more [creating and publishing a NPM package here.](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/). -- **Add payload-plugin topic tag**: Apply the tag **payload-plugin **to your GitHub repository. This will boost the visibility of your plugin and ensure it gets listed with [existing payload plugins](https://github.com/topics/payload-plugin). -- **Use [Semantic Versioning](https://semver.org/) (SemVar)** - With the SemVar system you release version numbers that reflect the nature of changes (major, minor, patch). Ensure all major versions reference their Payload compatibility. +Bump the version on every release — that way pnpm always sees the new package and +nobody gets stuck on a stale one from the cache. -# Questions +--- -Please contact [Payload](mailto:dev@payloadcms.com) with any questions about using this plugin template. +## Documentation + +Everything lives in the **[docs/](./docs)** directory. To get started: + +- **[getting-started.md](./docs/getting-started.md)** — project setup, step by step +- **[install.md](./docs/install.md)** — more on installation and troubleshooting +- **[README.md](./docs/README.md)** — index of the plugin's modules + +--- + +## Something not working? + +| What you see | What's wrong | +|---|---| +| `404` or `Unauthorized` on `pnpm add @intecion/...` | no token in `.npmrc`, a wrong token, or you don't have access to the organization in Gitea | +| `404` when installing from the `.git` address | you're not signed in, the token is missing from the address, or you lack access to the repository | +| `ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED` | an attempt to build on install from git — report it to whoever publishes the plugin | +| old code after reinstalling | cache: run `pnpm store prune`, then remove `.next` and `node_modules/@intecion` | + +If you get stuck, check **[docs/install.md](./docs/install.md)** or message the +team that maintains the plugin. \ No newline at end of file diff --git a/package.json b/package.json index 2c18ace..a5606c2 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,12 @@ { "name": "@intecion/ipal-kit", "version": "1.0.0", - "description": "Intecion Payload Advanced Library — plugin dla Payload CMS 3: i18n, SEO, formularze, consent, analytics, blog/archiwa.", + "description": "Intecion Payload Advanced Library — a Payload CMS 3 plugin: i18n, SEO, forms, consent, analytics, blog/archives.", "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://git.intecion.net/IntecionSoftware/ipal-kit.git" + }, "type": "module", "exports": { ".": { @@ -109,7 +113,7 @@ "pnpm": "^9 || ^10 || ^11" }, "publishConfig": { - "registry": "https://npm.pkg.github.com" + "registry": "https://git.intecion.net/api/packages/IntecionSoftware/npm/" }, "pnpm": { "onlyBuiltDependencies": [ @@ -118,4 +122,4 @@ "unrs-resolver" ] } -} +} \ No newline at end of file