open-index/open-npm huggingface dataset:
npm package: @minddoc/nest-express-winston
Description: Implementation of a nestjs logger using winston and express-winston
Author: MindDoc Health GmbH
Latest version: 0.2.86

# nest-express-winston

Implementation of a NestJS logger using `winston` and `express-winston`. It replaces the default
NestJS logger with `winston`, and optionally also adds express logs using `express-winston`.

## Installation

```bash
yarn add @minddoc/nest-express-winston
```

## Usage

```typescript
import {
  createExpressWinstonHandler,
  createNestWinstonLogger,
  httpContextMiddleware,
  requestIdHandler,
} from '@minddoc/nest-express-winston';
```

### Basic Example

Add the following to your `index.ts` / `main.ts`:

```typescript
import 'dotenv/config';
import 'module-alias/register';
import 'reflect-metadata';

import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';

import {
  createExpressWinstonHandler,
  createNestWinstonLogger,
  httpContextMiddleware,
  requestIdHandler,
} from '@minddoc/nest-express-winston';

import { AppModule } from './app.module';
import { EnvService } from './env';

async function bootstrap() {
  const nestWinstonLogger = createNestWinstonLogger('app');
  const app = await NestFactory.create(AppModule, { logger: nestWinstonLogger });

  // Use express-winston for logging request information
  const expressWinstonHandler = createExpressWinstonHandler(nestWinstonLogger.logger);
  app.use(expressWinstonHandler);

  // Use express-http-context for context injection (request id)
  app.use(httpContextMiddleware);
  app.use(requestIdHandler);

  app.useGlobalPipes(new ValidationPipe());
  app.setGlobalPrefix(EnvService.get().API_BASE_PATH);

  const options = new DocumentBuilder()
    .setTitle('API')
    .setDescription('Logging API Example')
    .setVersion('1.0')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api', app, document);

  await app.listen(EnvService.get().API_PORT, EnvService.get().API_HOST);
}
bootstrap();
```

## Contribution Guidelines

Never commit directly to master, create a new branch and submit a pull request.
npm package: @minddocdev/nest-express-winston
Description: Implementation of a nestjs logger using winston and express-winston
Author: MindDoc Health GmbH
Latest version: 0.2.0

# nest-express-winston

Implementation of a NestJS logger using `winston` and `express-winston`. It replaces the default
NestJS logger with `winston`, and optionally also adds express logs using `express-winston`.

## Getting Started

```bash
yarn install
```

```bash
yarn build
```

```bash
yarn test
```

## Installation

```bash
yarn add @minddocdev/nest-express-winston
```

If it does not exist, add a `.yarnrc` file to the root of your project with the following content:

```text
"@minddocdev:registry" "https://npm.pkg.github.com"
```

Ensure you are logged in to github using a personal access token with
`delete:packages, read:packages, repo, write:packages` privileges as the password:

```bash
npm login --registry=https://npm.pkg.github.com
```

## Publishing

To publish a new version of the package, firstly bump the version in the `package.json` file,
then cut a new release on [Github](https://github.com/minddocdev/nest-express-winston/releases).
This will automatically initiate the `publish` Github Action workflow and publish a new version to
[Github Packages](https://github.com/minddocdev/nest-express-winston/packages)

## Guide

```typescript
import {
  createExpressWinstonHandler,
  createNestWinstonLogger,
  httpContextMiddleware,
  requestIdHandler,
} from '@minddocdev/nest-express-winston';
```

### Basic Example

Add the following to your `index.ts` / `main.ts`:

```typescript
import 'dotenv/config';
import 'module-alias/register';
import 'reflect-metadata';

import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';

import {
  createExpressWinstonHandler,
  createNestWinstonLogger,
  httpContextMiddleware,
  requestIdHandler,
} from '@minddocdev/nest-express-winston';

import { AppModule } from './app.module';
import { EnvService } from './env';

async function bootstrap() {
  const nestWinstonLogger = createNestWinstonLogger('app');
  const app = await NestFactory.create(AppModule, { logger: nestWinstonLogger });

  // Use express-winston for logging request information
  const expressWinstonHandler = createExpressWinstonHandler(nestWinstonLogger.logger);
  app.use(expressWinstonHandler);

  // Use express-http-context for context injection (request id)
  app.use(httpContextMiddleware);
  app.use(requestIdHandler);

  app.useGlobalPipes(new ValidationPipe());
  app.setGlobalPrefix(EnvService.get().API_BASE_PATH);

  const options = new DocumentBuilder()
    .setTitle('API')
    .setDescription('Logging API Example')
    .setVersion('1.0')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api', app, document);

  await app.listen(EnvService.get().API_PORT, EnvService.get().API_HOST);
}
bootstrap();
```

## Contribution Guidelines

Never commit directly to master, create a new branch and submit a pull request.
npm package: @mindedge/vue-api-query
Description: 💎 Elegant and simple way to build requests for REST API
Author: Robson Tenório
Latest version: 1.15.1

<p align="center">
  <img src="bird.png">
</p>
<p align="center">
  <a href="https://codecov.io/gh/mindedge/vue-api-query">
    <img src="https://codecov.io/gh/mindedge/vue-api-query/branch/master/graph/badge.svg" />
  </a>
  <a href="https://actions-badge.atrox.dev/mindedge/vue-api-query/goto?ref=dev">
    <img src="https://img.shields.io/github/workflow/status/mindedge/vue-api-query/Test%20and%20Release?style=flat&label=actions&logo=github" />
  </a>
  <a href="https://www.npmjs.com/package/vue-api-query">
    <img src="https://img.shields.io/npm/dt/vue-api-query.svg" />
  </a>
  <a href="https://www.npmjs.com/package/vue-api-query">
    <img src="https://img.shields.io/npm/v/vue-api-query.svg" />
  </a>
  <a href="https://github.com/mindedge/vue-api-query/blob/master/LICENSE">
    <img src="https://img.shields.io/apm/l/vim-mode.svg" />
  </a>
</p>

# Elegant and simple way to build requests for REST API

This package helps you quickly to build requests for REST API. Move your logic and backend requests to dedicated classes.
Keep your code clean and elegant.

🔥 If you use Laravel, this package matches perfectly with
[spatie/laravel-query-builder](https://github.com/spatie/laravel-query-builder).

## Links

- [✨ &nbsp;Release Notes](https://mindedge.github.io/vue-api-query/releases)
- [📖 &nbsp;Documentation](https://mindedge.github.io/vue-api-query)

## Contributors

Thanks to the following people who have contributed to this project:

- [@JoaoPedroAS51](https://github.com/JoaoPedroAS51)
- [@Peter-Krebs](https://github.com/Peter-Krebs)

[See all contributors](https://github.com/mindedge/vue-api-query/graphs/contributors)

## Thanks

- Inspiration from [milroyfraser/sarala](https://github.com/milroyfraser/sarala).

- Elegancy from [DavidDuwaer/coloquent](https://github.com/DavidDuwaer/Coloquent).

Why another package if we have those? Because currently (march, 2018) they restricted backend response to JSON API specification.

## Contact

Twitter [@mindedge](https://twitter.com/mindedge)
npm package: @mindemangou/magiccomponents-react
Description: Magic Components-React is a JavaScript library that allows you to easily connect your frontend and backend without using an API, thanks to custom elements
Author: Mindemangou FADONOUGBO
Latest version: 4.2.7

# Magic components-react


## Installation

You can install Magic components-react via

```bash
npm install   @mindemangou/magiccomponents-react 

or

pnpm install  @mindemangou/magiccomponents-react
```



## License

MagicComponents is licensed under the [MIT License](LICENSE).
npm package: @mindev/min-async-function
Description: min async function support
Author: Min Team
Latest version: 1.0.0

# Min 中使用 async/await

## 安装

- **async-function**

``` bash
$ npm install @mindev/min-async-function --save
```

- **babel**

``` bash
$ npm install babel-preset-env --save-dev
$ npm install babel-plugin-syntax-export-extensions --save-dev
$ npm install babel-plugin-transform-export-extensions --save-dev
```

## 引用

- **app.wxa**

``` js
import '@mindev/min-async-function';
```

## 配置babel编译器

- **min.config.json**

``` json
{
  "compilers": {
    "babel": {
      "presets": [
        "env"
      ],
      "plugins": [
        "syntax-export-extensions",
        "transform-export-extensions"
      ]
    }
  }
}
```

## 配置小程序开发者工具

- **关闭 es6 转 es5**

## Links

- [Min 中使用 async/await](https://meili.github.io/min/docs/features/babel.html)
- [Min 组件化解决方案](https://github.com/meili/min)
- [MinUI 小程序UI组件库](https://github.com/meili/minui)
npm package: @mindev/min-cli
Description: 小程序组件化开发环境，提供 cli 支持
Author: Min Team
Latest version: 1.0.9-beta.1

# Min Cli

> 令小程序组件的开发和使用变得愉悦

## 介绍

Min资源汇总：[awesome-min](https://github.com/cds803/awesome-min)

Min 是一款微信小程序组件化解决方案，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序和组件库。而Min与其他组件化框架最大的区别在于是开发真正意义上的小程序组件，通过增强特性能让开发小程序项目变得更加优雅，高效。

同时Min也是一款成长中的小程序组件化方案，大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。如果Min有不足地方，或者你有更好的想法，欢迎提交ISSUE或者PR。

## 特性

- 提供丰富的[UI组件库](https://github.com/meili/minui)，组件重用方便二次开发
- [单文件](https://meili.github.io/min/docs/features/single-file-mode.html)开发模式，类Vue开发风格
- 支持[自定义组件](https://meili.github.io/min/docs/min-cli/wxc-project/index.html)开发
- 支持[加载海量NPM包](https://meili.github.io/min/docs/features/npm.html)
- 支持[ES2015+特性、Promise](https://meili.github.io/min/docs/features/babel.html)，使用async/await能够有效避免回调地狱
- 支持多种[编译器](https://meili.github.io/min/docs/features/style.html)，Less/PostCss、Babel
- 完善[小程序](https://meili.github.io/min/docs/min-cli/app-project/index.html)和[组件库](https://meili.github.io/min/docs/min-cli/wxc-project/index.html)开发流程，快速建立私有的小程序组件库
- 支持[全局模板](https://meili.github.io/min/docs/advance/global-layout.html)、[可配置化](https://meili.github.io/min/docs/advance/global-setting.html)，减少维护成本和差异化

## 最佳实践

[MinUI](https://github.com/meili/minui)，是基于 Min 产出的一套 UI 组件库，同时也是蘑菇街小程序在应用的 UI 组件库。通过下面的小程序二维码，可以在手机中体验 MinUI（微信基础库版本 1.6.3 以上支持）：

![](http://s3.mogucdn.com/mlcdn/c45406/171103_5l89d0ih87eh9e715065310ekgdea_220x220.png)

## 环境安装

``` bash
$ npm install -g @mindev/min-cli
```

## 组件开发

- **初始化项目**

``` bash
$ min init
```

- **新建组件**

``` bash
$ min new *name
```

- **开发实时编译**

``` bash
$ min dev
```

- **发布组件**

``` bash
$ min publish
```

## 组件应用

- **安装组件**

在小程序项目中安装一个组件，这里用 [MinUI](https://github.com/meili/minui) 的 loading 组件举例：

``` bash
$ min install @minui/wxc-loading
```

- **更新组件**

``` bash
$ min update @minui/wxc-loading
```

## Min 使用交流群

请添加群助手 wUf18018252882 好友或者扫码加好友，并与群助手对话发送验证码 `10088` 按照指引进群。

![微信群](https://s10.mogucdn.com/mlcdn/c45406/180108_888g0d26e23h9j8fc9e3bd7j3e85h_430x430.jpg_220x330.jpg)

## Links

[Documentation](https://meili.github.io/min)

[Changelog](https://meili.github.io/min/docs/changelog/index.html)

[Contributing](https://github.com/meili/min-cli/blob/master/CONTRIBUTING.md)

[License MIT](https://github.com/meili/min-cli/blob/master/LICENSE)

## 开源协议

本项目基于 [MIT](http://opensource.org/licenses/MIT) License，请自由的享受、参与开源。
npm package: @mindev/min-compiler-babel
Description: min compile babel
Author: Min Team
Latest version: 2.0.1

# min babel 编译器

## 安装

``` bash
$ npm install @mindev/min-compiler-babel --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  compilers: {
    babel: {
      sourceMaps: 'inline',
      presets: [
        'env'
      ],
      plugins: [
        'syntax-export-extensions',
        'transform-class-properties',
        'transform-decorators-legacy',
        'transform-export-extensions'
      ]
    }
  }
}
```

## 参数说明

[Babel](https://github.com/babel/babel)

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-compiler-less
Description: min compile less
Author: Min Team
Latest version: 2.0.1

# min less 编译器

## 安装

``` bash
$ npm install @mindev/min-compiler-less --save-dev
```


## 配置 `min.config.js`

``` js
module.exports = {
  compilers: {
    less: {
      compress: true
    }
  }
}
```

## 参数说明

[Less](https://github.com/less/less.js)

## Tip

- min cli 2.x 版本开始支持
- 不支持 alias 别名
npm package: @mindev/min-compiler-postcss
Description: min compile postcss
Author: Min Team
Latest version: 2.0.2

# min postcss 编译器

## 安装

``` bash
$ npm install @mindev/min-compiler-postcss --save-dev
```


## 配置 `min.config.js`

``` js
import bem from 'postcss-bem'
import calc from 'postcss-calc'
import precss from 'precss'

const bemOptions = {
  defaultNamespace: undefined,
  style: 'suit',
  separators: {
    descendent: '__',
    modifier: '--'
  },
  shortcuts: {
    utility: 'u',
    component: 'b',
    descendent: 'e',
    modifier: 'm',
    when: 'is'
  }
}

module.exports = {
  compilers: {
    postcss: {
      plugins: [
        bem(bemOptions),
        precss,
        calc
      ]
    }
  }
}
```

## 参数说明

[Postcss](https://github.com/postcss/postcss)

## 插件

[PostCSS Plugins](https://github.com/postcss/postcss/blob/master/docs/plugins.md)
[PostCSS.parts](https://www.postcss.parts/)

## Tip

- min cli 2.x 版本开始支持
- 支持 postcss ^5.2.5 版本的插件
- 不支持 alias 别名
npm package: @mindev/min-compiler-pug
Description: min compile pug
Author: Min Team
Latest version: 2.0.1

# min pug 编译器

## 安装

``` bash
$ npm install @mindev/min-compiler-pug --save-dev
```


## 配置 `min.config.js`

``` js
module.exports = {
  compilers: {
    pug: {}
  }
}
```

## 参数说明

[pug](https://github.com/pugjs/pug)

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-compiler-sass
Description: min compile sass
Author: Min Team
Latest version: 2.0.2

# min sass 编译器

## 安装

``` bash
$ npm install @mindev/min-compiler-sass --save-dev
```


## 配置 `min.config.js`

``` js
module.exports = {
  compilers: {
    sass: {
      outputStyle: 'compressed'
    }
  }
}
```

## 参数说明

[node-sass](https://github.com/sass/node-sass)

## Tip

- min cli 2.x 版本开始支持
- 不支持 alias 别名
npm package: @mindev/min-compiler-stylus
Description: min compile stylus
Author: Min Team
Latest version: 2.0.2

# min stylus 编译器

## 安装

``` bash
$ npm install @mindev/min-compiler-stylus --save-dev
```


## 配置 `min.config.js`

``` js
module.exports = {
  compilers: {
    stylus: {
      compress: true
    }
  }
}
```

## 参数说明

[Stylus](http://www.zhangxinxu.com/jq/stylus/js.php)

## Tip

- min cli 2.x 版本开始支持
- 不支持 alias 别名
npm package: @mindev/min-compiler-typescript
Description: min compile typescript
Author: Min Team
Latest version: 2.0.1

# min typescript 编译器

## 安装

``` bash
$ npm install @mindev/min-compiler-typescript --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  compilers: {
    compilerOptions: {
      module: 'system'
    }
  }
}
```

## 参数说明

[TypeScript](https://www.tslang.cn/docs/home.html)

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-lint-eslint
Description: min eslint
Author: Min Team
Latest version: 2.0.1

# min eslint

## 安装

``` bash
$ npm install @mindev/min-lint-eslint --save-dev
```

## 配置 `min.config.js`

``` js
{
  eslint: true
}
```

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-plugin-autoprefixer
Description: min plugin-autoprefixer
Author: Min Team
Latest version: 2.0.1

# min plugin-autoprefixer

## 安装

``` bash
$ npm install @mindev/min-plugin-autoprefixer --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  plugins: {
    autoprefixer: {
      filter: new RegExp('\.(wxss)$'),
      validate (options: PluginHelper.Options) {
        return true
      },
      config: {
        browsers: ['Android >= 2.3', 'Chrome > 20', 'iOS >= 6']
      }
    }
  }
}
```

## 参数说明

[autoprefixer](https://github.com/postcss/autoprefixer#options)

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-plugin-define
Description: min plugin-define
Author: Min Team
Latest version: 2.0.1

# min plugin-define

## 安装

``` bash
$ npm install @mindev/min-plugin-define --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  plugins: {
    define: {
      validate (options: PluginHelper.Options) {
        return true
      },
      config: {
        PRODUCTION: JSON.stringify(true),
        VERSION: JSON.stringify("5fa3b9"),
        BROWSER_SUPPORTS_HTML5: true,
        TWO: {}
      }
    }
  }
}
```

## 参数说明

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-plugin-filemin
Description: min plugin-filemin
Author: Min Team
Latest version: 2.0.1

# min plugin-filemin

## 安装

``` bash
$ npm install @mindev/min-plugin-filemin --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  plugins: {
    filemin: {
      filter: new RegExp('\.(wxml|xml|wxss|json)$'),
      validate (options: PluginHelper.Options) {
        return true
      },
      config: {}
    }
  }
}
```

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-plugin-filesync
Description: min plugin-filesync
Author: Min Team
Latest version: 2.0.1

# min plugin-filesync

## 安装

``` bash
$ npm install @mindev/min-plugin-filesync --save-dev
```

## 配置 `min.config.js`

``` js
interface Config {
  cwd: String
  from: String | Array,
  to: String,
  filter: RegExp,
  validate: Function
  force: Boolean,
  ignore: String | Array
}
```

``` js
module.exports = {
  plugins: {
    filesync: {
      cwd: 'assets'
      from: ['**/*'],
      to: 'img/',
      filter: /\.png$/,
      validate (filename: string) {
        return true
      }
      force: true,
      ignore: ['*.jpg']
    },

    // or
    filesync: {
      img: {
        cwd: 'assets'
        from: '**/*',
        to: '/'
      },
      wxFile: {
        cwd: 'pages'
        from: '**/*',
        filter: /index\.(wxml|wxss|js|json)$/,
        to: '/'
      }
    },

    // or
    filesync: [
      // for img
      {
        cwd: 'assets'
        from: ['**/*.jpg', '**/*.jpeg', '**/*.png', '**/*.gif', '**/*.webp'],
        to: '/'
      },
      // for wxFile
      {
        cwd: 'pages'
        from: ['**/*.wxml', '**/*.wxss', '**/*.js', '**/*.json'],
        to: '/'
      }
    ]
  }
}
```

## 参数说明

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-plugin-imagemin
Description: min plugin-imagemin
Author: Min Team
Latest version: 2.0.1

# min plugin-imagemin

## 安装

``` bash
$ npm install @mindev/min-plugin-imagemin --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  plugins: {
    imagemin: {
      filter: new RegExp('\.(jpg|png|jpeg)$'),
      validate (options: PluginHelper.Options) {
        return true
      },
      config: {
        jpg: {},
        png: {
          quality: '65-80'
        },
        webp: {
          quality: 50
        }
      }
    }
  }
}
```

## 参数说明

[imagemin](https://github.com/imagemin/imagemin)

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-plugin-uglifyjs
Description: min plugin-uglifyjs
Author: Min Team
Latest version: 2.0.1

# min plugin-uglifyjs

## 安装

``` bash
$ npm install @mindev/min-plugin-uglifyjs --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  plugins: {
    uglifyjs: {
      filter: new RegExp('\.(js)$'),
      validate (options: PluginHelper.Options) {
        return true
      },
      config: {
        warnings: false
      }
    }
  }
}
```

## 参数说明

[UglifyJS](https://github.com/mishoo/UglifyJS2)

## Tip

- min cli 2.x 版本开始支持
npm package: @mindev/min-plugin-unit2rpx
Description: min plugin-unit2rpx
Author: Min Team
Latest version: 2.0.1

# min plugin-unit2rpx

## 安装

``` bash
$ npm install @mindev/min-plugin-unit2rpx --save-dev
```

## 配置 `min.config.js`

``` js
module.exports = {
  plugins: {
    unit2rpx: {
      filter: new RegExp('\.(wxss)$'),
      validate (options: PluginHelper.Options) {
        return true
      },
      config: {
        px: 1,
        rem: 100
      }
    }
  }
}
```

## Tip

- min cli 2.x 版本开始支持
npm package: @mindfiredigital/ignix-ui
Description: Ignix UI component library
Author: Mindfire Digital
Latest version: 1.4.1

# Ignix UI

[![NPM Version](https://img.shields.io/npm/v/@mindfiredigital/ignix-ui.svg)](https://www.npmjs.com/package/@mindfiredigital/ignix-ui)
[![License](https://img.shields.io/npm/l/@mindfiredigital/ignix-ui.svg)](https://github.com/mindfiredigital/ignix-ui/blob/main/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](../../CONTRIBUTING.md)

**Ignix UI** is a powerful command-line interface designed to streamline the development workflow for creating, managing, and customizing components in the Ignix UI library.

## Overview

The Ignix UI provides components for your project. It has sets of components for different use cases.

## Features

- **Component Scaffolding**: Generate new components from predefined or custom templates.
- **Customizable Templates**: Extend and override default templates to match your project's needs.
- **Tailwind CSS Integration**: Seamlessly integrate with Tailwind CSS for styling.
- **Interactive Prompts**: User-friendly prompts to guide you through the development process.

## Installation

To install the Ignix UI, use your preferred package manager:

```bash
# Using pnpm (recommended)
pnpm add -D @mindfiredigital/ignix-ui

# Using npm
npm install --save-dev @mindfiredigital/ignix-ui

# Using yarn
yarn add -D @mindfiredigital/ignix-ui
```

## Documentation

For full documentation, visit [mindfiredigital.github.io/ignix-ui](https://mindfiredigital.github.io/ignix-ui/).

## Contributing

Please follow our [contributing guidelines](https://mindfiredigital.github.io/ignix-ui/docs/contribution-guide/how-to-contribute).
npm package: @mindfiredigital/page-builder-web-component
Description: UI Page builder Web-Component
Latest version: 5.0.14

<h1 align="center">PageBuilder</h1><br><br>
<p align="center">
<a href="https://www.npmjs.com/package/@mindfiredigital/page-builder"><img src="https://img.shields.io/npm/v/@mindfiredigital/page-builder.svg?sanitize=true" alt="Version"></a>
<a href="https://www.npmjs.com/package/@mindfiredigital/page-builder"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs"></a>
</p>

<br>

<p align="center"> lightweight page builder library designed for creating static web pages with a drag-and-drop interface. This component library generates HTML output and supports customization options. Built with TypeScript and vanilla JavaScript for performance, it includes modular components, responsive previews, and data handling for layout storage and retrieval. </p>

<br>

## Live Demo

Click the button below to open the project on StackBlitz.

<a href="https://stackblitz.com/edit/stackblitz-starters-3d4yfpj4?file=index.html" target="_blank">
  <img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz">
</a>

## Screenshot

 <p align="center">
   <img alt="Screenshot of the Page builder" src="https://res.cloudinary.com/dodvwsaqj/image/upload/v1737367074/landing_sdtu4q.png"\>
</p>

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Getting Started with npm](#getting-started-with-npm)
- [Contributing](#contributing)
- [License](#license)

<br>

## Features

- **Component Structure**: Drag-and-drop components (text, images, buttons, headers, containers, etc.) to create a layout.
- **Responsive Preview**: Preview page layouts in different device modes (Desktop, Tablet, Mobile).
- **Configuration Sidebar**: Customize component properties like text, color, padding, and margin via a configuration sidebar.
- **Data Storage**: Save layout configurations in JSON format for easy retrieval and editing.
- **Layers**: Enabling users to manage component hierarchy visually.
- **Output HTML**: Export the final HTML layout for use in static web pages or other applications.

<br>

## Installation

To install the `@mindfiredigital/page-builder-web-component` npm package in your project, use the following command:

```bash
npm install @mindfiredigital/page-builder-web-component
```

<br>

## Getting Started with npm

- **Initialization**: Initialize the PageBuilder in your project.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Builder Demo</title>
  </head>
  <body>
    <page-builder></page-builder>
    <script type="module" defer>
      import '@mindfiredigital/page-builder-web-component';
    </script>
  </body>
</html>
```

<br>

## Contributing

We welcome contributions from the community. If you'd like to contribute to the `Pagebuilder` npm package, please follow our [Contributing Guidelines](CONTRIBUTING.md).
<br>

## License

Copyright (c) Mindfire Digital llp. All rights reserved.

Licensed under the MIT license.
npm package: @mindfiredigital/textigniter-angular
Description: Angular wrapper for TextIgniter rich text editor
Latest version: 1.2.2

# TextIgniter

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build text-igniter
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:
   ```bash
   cd dist/text-igniter
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

```javascript
//app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TextIgniterModule } from 'text-igniter';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, TextIgniterModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'demo-app';
  config = {
    showToolbar: true,
    features: [
      'bold',
      'italic',
      'underline',
      'hyperlink',
      'fontFamily',
      'fontSize',
      'alignLeft',
      'alignCenter',
      'alignRight',
      'unorderedList',
      'orderedList',
      'image',
      'fontColor',
      'bgColor',
      'getHtmlContent',
      'loadHtmlContent'
    ]
  }
}
```

```html
<!--app.component.html-->
<ngx-text-igniter [config]="config"></ngx-text-igniter>
```
npm package: @mindful-web/dependency-tool
Description: Command line tool for managing Mindful Web project dependencies.
Author: Jacob Bare
Latest version: 1.57.0


# Mindful Web Dependency Tool
Command line tool for managing Mindful Web project dependencies.

## Installation
Add `@mindful-web/dependency-tool` as a project dependency via Yarn or npm. You can also add this package globally and use it will all of your `@mindful-web` projects, via `yarn global add @mindful-web/dependency-tool`.

## Usage

### Upgrading deps
Once installed, run via the command line and target the project path you'd like to update:

```sh
mindful-web-dependencies upgrade ../path-to-your-project
```

If the package uses Yarn workspaces, all sub-packages will also be updated.
npm package: @mindful-web/express-apollo
Description: Apollo GraphQL SSR Client for Mindful Web+Express apps
Author: Jacob Bare
Latest version: 1.0.0

# Mindful Web Apollo GraphQL SSR Client for Express
Creates a per-request Apollo GraphQL client via Express middleware.

## Installation
This package is dependent on the `graphql` library.
```
yarn add @mindful-web/express-apollo graphql@^14.0.0
```

## Usage
To use, apply the middleware to your Express app (or router instance):
```js
const express = require('express');
const { apolloClient } = require('@mindful-web/express-apollo');

const app = express();

app.use(apolloClient('http://your-mindful-web-graphql-uri'));

// Apollo is now availabe on the req object, as well as res.locals
app.get('/', (req, res) => {
  const { apollo } = req;
  const query = '{ ping }';
  apollo.query({ query }).then(result => res.json(result));
});

app.listen(1234);
```
npm package: @mindful-web/github-release-notes
Description: Generates release notes for the currently tagged version, or for a range of tags/commit hashes.
Author: Jacob Bare
Latest version: 1.0.0

# Websites Release Notes Generator
Generates release notes for the currently tagged version, or for a range of tags/commit hashes.

## Usage
Note: you must have a GitHub personal access token to execute these scripts. You can create an access token via https://github.com/settings/tokens and then set the `GITHUB_PERSONAL_ACCESS_TOKEN` variable in a `.env` file within the project root.

- Install dependencies
- Run `./node_modules/.bin/website-release-notes` from the project root to generate notes based off the current project tag

This will output the tag name and generate the release name and notes.

Example:
```
v0.11.1

Ox Georgetown Nemata

8 PRs totaling 33 commits in 50 files [+414 / -148]

- #249 BC-OGJ-eventsLink @Alixers505
- #250 Remove link to site license info @solocommand
- #253 Add GTXcel link to site license banner @solocommand
- #252 BC-magBtns-mobile: added top margin for item__button @Alixers505
- #255 BC-ILS/VSD: added /events to resources nav @Alixers505
- #256 CS2430-LFW: updated subscribe form link @Alixers505
- #254 NativeX "templateless" delivery support @zarathustra323
- #251 Wufoo survey integration @solocommand
```
npm package: @mindful-web/graphql-fragment-types
Description: Provides fragment types for the Mindful Web GraphQL API. For use with Apollo GraphQL clients.
Author: Jacob Bare
Latest version: 1.0.0

# Mindful Web GraphQL Fragment Types
Provides fragment types for the Mindful Web GraphQL API. For use with Apollo GraphQL clients.

## Usage
```js
import introspectionQueryResultData from '@mindful-web/graphql-fragment-types';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';

const fragmentMatcher = new IntrospectionFragmentMatcher({ introspectionQueryResultData });
const cache = new InMemoryCache({ fragmentMatcher });

export default new ApolloClient({ cache });
```

## Developing / Building
To build a new version of `types.json`, run the following command inside the monorepo.
```
GRAPHQL_URL=[the graphql url to build from] node packages/graphql-fragment-types/build.js
```
npm package: @mindful-web/leaders-program
Description: Leaders Program Vue components
Author: Jacob Bare
Latest version: 1.52.0

# leaders-sandbox

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @mindful-web/marko-node-require
Description: Custom Node extension resolver/compiler for Marko files.
Author: Jacob Bare
Latest version: 1.57.0

# MarkoJS Node Require
Overrides the default `marko/node-require` logic to only compile `.marko` files that are new or out-of-date (as opposed to compiling everything).

Load as the first module in your app's entrypoint via
```js
require('@mindful-web/marko-node-require');
```
npm package: @mindful-web/marko-web-gtm
Description: Google Tag Manager (GAM) Marko components for Mindful Web websites
Author: Jacob Bare
Latest version: 1.57.0

# Mindful Web Marko Web GTM Components
Google Tag Manager components for Mindful Web/Marko websites.

## Installation
Once you have a GTM container ID, you can enable GTM in your mindful-web-marko-web application. To do so, include this package and add the following two tags to your app:

## Usage: Marko

### `marko-web-gtm-init`
This component initializes the GTM container(s) specified, and allows a standard set of inputs to be used for projects utilizing this package solo and for projects using the `marko-web-deferred-script-loader` package.

To load GTM normally, include the following calls, specifying only your container id(s) and any of the optional arguments: `start`, `push`:
```marko
<marko-web-document ...input>
  <@head>
    <marko-web-gtm-init container-id="GTM-XXXXXX" start=true />
    <${input.head} />
  </@head>
  <@above-wrapper>
    <marko-web-gtm-noscript container-id="GTM-XXXXXX" />
  </@above-wrapper>
</marko-web-document>
```

To defer GTM, ensure the `marko-web-deferred-script-loader` package is installed and enabled, and then specify the relevant `on`, `request-frame`, and `target-tag` parameters along with your component call.
```marko
<marko-web-document ...input>
  <@head>
    <marko-web-gtm-init
      container-id="GTM-XXXXXX"
      start=true
      on="load"
      request-frame=true
      target-tag="body"
    />
    <${input.head} />
  </@head>
  <@above-wrapper>
    <marko-web-gtm-noscript container-id="GTM-XXXXXX" />
  </@above-wrapper>
</marko-web-document>
```

To specify an alternative datalayer name, use the `name="fooLayer"` parameter1.

To pre-push data to the datalayer, you can use the `push={ foo: 'bar' }` parameter. See the `marko-web-gtm-push` component for more details.

To automatically start your containers, send the `start=true` parameter with your `init` component. Otherwise, you must manually start the GTM container with the `marko-web-gtm-start` component.

### `marko-web-gtm-noscript`

### `marko-web-gtm-start`
### `marko-web-gtm-push`
### `marko-web-gtm-slot`
### `marko-web-gtm-track-bus-event`
### `marko-web-gtm-track-inview-event`
### `marko-web-gtm-track-load-more`

## Usage: Vue/Browser

### `track-bus-event`

### `track-in-view-event`

### `track-load-more`
npm package: @mindful-web/marko-web-identity-x-mailchimp
Description: Marko IdentityX+Mailchimp integration
Author: Josh Worden
Latest version: 1.59.1

Mailchimp
===

This package integrates the Marko Web website framework with the Mailchimp ESP/CDP.

## Usage

Add the package to your package's dependencies using yarn:
```sh
yarn add @mindful-web/marko-web-identity-x-mailchimp
# or
yarn workspace @my/workspace-name add @mindful-web/marko-web-identity-x-mailchimp
```

Generate IdentityX and Mailchimp configs:
```js
const IdentityXConfig = require('@mindful-web/marko-web-identity-x/config');
const MaichimpConfig = require('@mindful-web/marko-web-identity-x-mailchimp/src/config');

const idxConfig = new IdentityXConfig({
  // ...
});
const mcConfig = new MailchimpConfig({
  // @see src/config.js for details
  // at minimum specify accessToken, accountId, listId, and datacenter
})
```

## Configuration
The `MailchimpConfig` class requires, at minimum, the Mailchimp access token, account identifier, and datacenter. These values can be obtained from the Mailchimp API.

### Access Token
The OAuth2 access token for the [Mindful Data Connector](https://github.com/parameter1/data-connector/tree/main/producers/mailchimp/client) application. This is generated during the OAuth2 auth dance.

### Account Identifier
This value is returned from the [root](https://mailchimp.com/developer/marketing/api/root/) endpoint.

### Datacenter
This value is returned when exchangingan OAuth token for an access token. It is also available from the [root](https://mailchimp.com/developer/marketing/api/root/) endpoint.

### List Identifier
The audience list identifier can be retrieved using the [lists]() API.

### Merge Field Map
While optional, the merge field map defines what Mailchimp merge fields will map to IdentityX custom fields (or core fields).

Mailchimp administrators can change, remove, or rename any merge field within their account. The default set of merge fields includes `EMAIL`, `FNAME`, `LNAME`, and `ADDRESS`.

In order for standard fields to map, they must be specified within the merge field map:
```js
const config = new MailchimpConfig({
  // ...
  mergeFieldMap: new Map([
    ['FNAME', { type: 'text', field: 'givenName' }],
    // ..
  ]),
});
```

### Hooks
The default behavior for this package can be overwritten by specifiying a custom function under the `hook` config key.

```js
const config = new MailchimpConfig({
  // ...
  hooks: {
    onChangeEmailSuccess: async (args) => {
      args.log('custom handler!', args);
    },
  },
});
```
npm package: @mindful-web/marko-web-leaders
Description: Marko Wrapper for the Leaders Program
Author: Jacob Bare
Latest version: 1.59.2

# Mindful Web Marko Wrapper for the Leaders Program

## Installation

1. Include `@mindful-web/marko-web-leaders` as a project/website dependency.

2. Include the Browser plugin.
```js
// your-site/browser/index.js
import Leaders from '@mindful-web/marko-web-leaders/browser';

Leaders(Browser);

export default Browser;
```

3. Include the styles.
```scss
// your-site/server/styles/index.scss
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,600,700&display=swap");
@import "@mindful-web/marko-web-leaders/scss/leaders";
```

4. Include the dropdown portal component in your template or document root. _Include immediately after the opening `<body>` tag!_ **<< Don't forget this step >>**
```marko
<!-- your-site/server/components/document.marko -->
<marko-web-document ...input>
  <@head>
    <!-- ... head components here -->
  </@head>
  <@above-container>
    <marko-web-leaders-dropdown-portal />
    <!-- ... other components here -->
    <${input.aboveContainer} />
  </@above-container>
</marko-web-document>
```

5. Include the `<marko-web-leaders>` component where you'd like it displayed.
```marko
<!-- your-site/server/templates/index.marko -->
<marko-web-leaders props={
  sectionAlias: "leaders",
  open: null,
  expanded: false,
  headerImgSrc: "https://img.packworld.com/files/base/pmmi/all/leaders/pw.png",
  headerImgAlt: "Leaders in Packaging 2019",
  columns: 1,
  offsetTop: 105,
  mediaQueries: [
    { prop: "open", value: "right", query: "(min-width: 1490px)" },
    { prop: "columns", value: 2, query: "(min-width: 700px)" },
    { prop: "displayCallout", value: false, query: "(max-width: 660px)" },
  ],
}/>
```
npm package: @mindful-web/marko-web-photoswipe
Description: ## Installation
Author: Jacob Bare
Latest version: 1.57.0

# Mindful Web Marko Wrapper for Photoswipe

## Installation

1. Include `@mindful-web/marko-web-photoswipe` as a project/website dependency.

2. Include the Browser plugin.
```js
// your-site/browser/index.js
import PhotoSwipe from '@mindful-web/marko-web-photoswipe/browser';

PhotoSwipe(Browser);

export default Browser;
```

3. Include the styles.
```scss
// your-site/server/styles/index.scss
@import "@mindful-web/marko-web-photoswipe/scss/main";
```

4. If you're using the default theme (or something similar) you'll need to adjust the photoswipe z-index:
```scss
$pswp__root-z-index: $theme-site-header-z-index + 1 !default;
@import "@mindful-web/marko-web-photoswipe/scss/main";
```

## Usage

### Create a Content Image Gallery
You must specify a body gallery ID as well as an image selector.

1. On the page contents, append a unique gallery ID and display some images, e.g.:
```marko
<default-theme-page-contents attrs={ "data-gallery-id": content.id }>
  <marko-web-page-image width=720 obj=content.primaryImage />
  <marko-web-content-body obj=content />
</default-theme-page-contents>
```

2. Immediately after this block, load the gallery component:
```marko
import { getAsArray } from "@mindful-web/object-path";

$ const images = resolved.getEdgeNodesFor("images");

<marko-web-photoswipe-images images=images>
  <@props thumbnail-click-selectors=`[data-gallery-id="${id}"] [data-image-id]` />
</marko-web-photoswipe-images>
```

3. Make sure you're returning the images from GraphQL
```js
const gql = require('graphql-tag');

module.exports = gql`
fragment ContentPageFragment on Content {
  id
  name
  images(input:{ pagination: { limit: 100 }, sort: { order: values } }) {
    edges {
      node {
        id
        src
        alt
        displayName
        caption
        credit
      }
    }
  }
}
`;

```
npm package: @mindful-web/marko-web-reveal-ad
Description: Custom Reveal Ad Marko/Vue components for Mindful Web websites
Author: Jacob Bare
Latest version: 1.57.0

# Mindful Web Marko Web Reveal Ad Components

## Installation
1. Add `@mindful-web/marko-web-revel-ad` to your project/site.

2. Include the Browser plugin.
  ```js
  // your-site/browser/index.js
  import RevealAd from '@mindful-web/marko-web-reveal-ad/browser';

  RevealAd(Browser);

  export default Browser;
  ```

3. Include the styles
  ```scss
  // your-site/server/styles/index.scss
  @import "@mindful-web/marko-web-reveal-ad/scss/reveal-ad";
  ```

4. Load the listener component on all pages, as close to the opening `<body>` tag as possible. This is usually handled in a common site `document.marko` component
  ```marko
  <marko-web-document ...input>
    <@head>
      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
      <link rel="manifest" href="/site.webmanifest">
      <marko-web-gam-init />
      <${input.head} />
      <marko-web-gam-enable />
      <marko-web-gam-targeting key-values={ uri: req.path } />
    </@head>
    <@above-container>
      <marko-web-reveal-ad-listener />
      <default-theme-site-header />
      <default-theme-site-menu />
      <${input.aboveContainer} />
    </@above-container>
  </marko-web-document>
  ```
npm package: @mindful-web/marko-web-social-sharing
Description: Social Sharing Marko/Vue components for Mindful Web websites
Author: Jacob Bare
Latest version: 1.57.0

# Mindful Web Marko Web Social Sharing Components

## Installation

1. Include `@mindful-web/marko-web-social-sharing` as a project/website dependency.

2. Include the Browser plugin.
```js
// your-site/browser/index.js
import SocialSharing from '@mindful-web/marko-web-social-sharing/browser';

SocialSharing(Browser);
// ...

export default Browser;
```

3. Include the default styles:
```scss
@import "@mindful-web/marko-web-social-sharing/scss/buttons";
```

## Usage

Include the sharing component where you'd like the icons to appear:

```marko
<marko-web-social-sharing
  path=content.siteContext.path
  providers=["email", "facebook", "linkedin", "twitter", "pinterest", "print"]
/>
```
npm package: @mindful-web/section-query-generator
Description: Utility function for generating section query data for mindful-web content
Author: Josh Worden
Latest version: 1.57.0

Mindful Web section query generator
===

This utility can be used to regenerate the Mindful Web content `sectionQuery` field.

## Usage
To use, import the package and await the exported function, supplying the relevant tenant key and an active (connected) MongoDB client.

*Note*: You **must** use the [`@mindful-web/db`](https://github.com/parameter1/mindful-web/tree/main/packages/db) MongoDB client/factory.

```js
const buildFn = require('@mindful-web/section-query-generator');
const { createMongoClient } = require('@mindful-web/db');

const { NODE_ENV, MONGO_DSN } = process.env;
const appname = `myapp v1.0 (env: ${NODE_ENV})`;

const client = createMongoClient(MONGO_DSN, { appname });
await client.connect();

await buildFn({ tenant: 'my_tenant_key', client });

await client.close();
```

## Arguments

| Option | Description | Default value
| - | - | - |
| `tenant` | (Required) A Mindful Web tenant key
| `client` | (Required) A connected MongoDB client
| `context` | (Optional) Additional context for the BaseDB instance | `{}`
| `logger` | (Optional) A function to log debug information to | `console.log`
| `maxDate` | (Option) A Date indicating how far in the future to check for schedules | `2038-01-01`
| `createIndexes` | (Optional) A Boolean indicating if indexes should be built | `false`
npm package: @mindfulai/rl-engine
Description: A lightweight Reinforcement Learning engine for NPM usage, built with Q-learning logic.
Author: Your Name
Latest version: 1.0.0

# @mindfulai/rl-engine

A lightweight Reinforcement Learning engine for NPM usage, built with Q-learning logic.

## Features
- Q-table initialization
- ε-greedy action selection
- Q-learning update
- Easily configurable

## Installation
```
npm install @mindfulai/rl-engine
```

## Usage
```ts
import { initQTable, RLAgent } from "@mindfulai/rl-engine";

const states = ["happy", "sad", "neutral"];
const actions = ["suggest_music", "recommend_meditation", "show_quote"];
const qTable = initQTable(states, actions);

const agent = new RLAgent(qTable);

const state = "sad";
const action = agent.chooseAction(state);
agent.update(state, action, 1, "neutral");

console.log(agent.getQTable());
```
npm package: @mindfulauth/core
Description: Mindful Auth core authentication library for Astro 6
Author: Mindful Auth
Latest version: 3.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @mindful-auth/core - ASTRO 6 Beta

Core authentication library for Mindful Auth, designed for Astro 6 applications.

## License
MIT