open-index/open-npm huggingface dataset:
npm package: @maier/eslint-config-base
Description: Base eslint shared config
Author: maier
Latest version: 0.2.0

Basic [eslint](https://eslint.org) rule configuration - intended to set a base from which to override for specific use-cases.

`eslintrc.js` example:

```js
module.exports = {
    root: true,
    extends: [
        '@maier/base'
    ],
    rules: {
        // ...additional project specific rules
    }
};
```
npm package: @maier/eslint-config-node
Description: NodeJS eslint shared config
Author: maier
Latest version: 0.1.0

Node specific [eslint](https://eslint.org) rule configuration - extends @maier/base

`eslintrc.js` example:

```js
module.exports = {
    root: true,
    extends: [
        '@maier/base',
        '@maier/node'
    ],
    rules: {
        // ...additional project specific rules
    }
};
```
npm package: @maier/eslint-config-node-cmd
Description: NodeJS command line tool eslint shared config
Author: maier
Latest version: 0.1.0

Node *command line utility* specific [eslint](https://eslint.org) rule configuration - extends @maier/base, @maier/node


`eslintrc.js` example:

```js
module.exports = {
    root: true,
    extends: [
        '@maier/base',
        '@maier/node',
        '@maier/node-cmd'
    ],
    rules: {
        // ...additional project specific rules
    }
};
```
npm package: @maiertech/components
Description: React component library for @maiertech websites.
Author: Thilo Maier
Latest version: 0.24.0
Deprecated: Package no longer supported.

---
title: '@maiertech/components'
---

Package
[`@maiertech/components`](https://github.com/maiertech/design-system/tree/master/packages/components)
is a library of React components built with [Theme UI](https://theme-ui.com).

## Install

Run

    yarn add @maiertech/components

to add it to your dependencies. Install peer dependencies
[`react`](https://www.npmjs.com/package/react),
[`react-dom`](https://www.npmjs.com/package/react-dom) and
[`theme-ui`](https://www.npmjs.com/package/theme-ui).

You need to wrap your app with `ThemeProvider` from `theme-ui`. You can provide
a theme, e.g., [`@maiertech/preset`](/preset)):

```jsx
import { ThemeProvider } from 'theme-ui';
import preset from '@maiertech/preset';

const app = (
  <ThemeProvider theme={preset}>
    <App />
  </ThemeProvider>
);
```

The preset should not make any changes to to breakpoints, which are
[Styled System's default breakpoints](https://styled-system.com/api/#defaults)
`['40em', '52em', '64em']`.

Import components like this:

```jsx
import { PostPreview, Tags } from '@maiertech/components';
```

## Docs

Read the docs at https://design-system.maier.tech/components. You can run the
docs locally with

    yarn workspace docs run dev

## Contributing

Work with two terminals. In the first terminal run

    yarn workspace @undataforum/components run watch

and in the second terminal run

    yarn workspace docs run dev

The first command watches for changes in the `@maiertech/components` workspace
and bundles the `@maiertech/components` package whenever it detects changes. The
second command launches the docs, which use the local `@maiertech/components`
package as dependency.
npm package: @maiertech/eslint-config
Description: Sharable config for ESLint.
Author: Thilo Maier
Latest version: 4.0.0
Deprecated: Package no longer supported.

# @maiertech/eslint-config

[![NPM version](https://img.shields.io/npm/v/@maiertech/eslint-config.svg)](https://www.npmjs.com/package/@maiertech/eslint-config)

This package provides an ESLint config for
[@maiertech](https://github.com/maiertech) projects as an extensible
[shared config](https://eslint.org/docs/developer-guide/shareable-configs). Run

```bash
npm i --save-dev eslint @maiertech/eslint-config
```

to install. Then create `.eslintrc.json` in your project root with

```json
{
  "extends": "@maiertech"
}
```

or add a `eslintConfig` prop with the same content to your `package.json`.

This ESLint config is based on
[eslint-config-react-app](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app):

- It comes with
  [these accessibility checks enabled](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app#accessibility-checks).
- It comes with [Jest](https://jestjs.io/) support.
- It does not contain any formatting rules. Check
  [here](https://create-react-app.dev/docs/setting-up-your-editor/#formatting-code-automatically)
  for the recommended setup to use [Prettier](https://prettier.io/) for
  formatting. You can use
  [@maiertech/prettier-config](https://github.com/maiertech/prettier-config) as
  your Prettier config.

## ESM support

This package supports CJS only, because
[ESLint does not support ESM configuration at this time](https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-file-formats).
npm package: @maiertech/gatsby-plugin-blog
Description: This Gatsby plugin encapsulates the logic for programmatically creating post pages for a blog.
Author: Thilo Maier
Latest version: 0.2.1
Deprecated: Package no longer supported. Use at your own risk.

# @maiertech/gatsby-plugin-blog

This plugin can be used with a Gatsby project or with a [Gatsby theme](https://www.gatsbyjs.org/docs/themes/).
It encapsulates the logic for programmatically creating post pages.

## Installation

```bash
yarn add @mdotasia/gatsby-plugin-blog
```

## Configuration

Posts reside in a directory that can be configured, e.g. `content/posts`, referred to as the posts directory. For each post create a subdirectory inside the posts directory. This plugin uses the following conventions:

- The subdirectory name is the slug, e.g. `my-first-post`.
- The post is an MDX file called `index.mdx`.

Use plugin [`gatsby-source-filesystem`](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/) to configure the parent directory of the posts directory in the `plugins` array in `gatsby-config.js`, e.g.

```js
{
  resolve: "gatsby-source-filesystem",
  options: {
    name: 'content',
    path: 'content'
  }
}
```

Add `@maiertech/gatsby-plugin-blog` to `plugins` in `gatsby-config.js`. For the minimal configuration you need to provide the `template` option, e.g.

```js
{
  resolve: "@mdotasia/gatsby-plugin-blog",
  options: {
    template: `src/templates/post.jsx`
  }
}
```

You can use the following options:

| Option       | Default | Description                                                                                                                                |
| :----------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------- |
| `pathPrefix` | `""`    | Blog posts are mapped to `/<slug>` by default. If a `pathPrefix` is set, they are mapped to `<pathPrefix>/<slug>`.                         |
| `postsDir`   | `posts` | The default is `posts` in one of your sources defined with `gatsby-source-filesystem`.                                                     |
| `template`   |         | Bring your own template. Template receives `id`, `path` and `context`, which contains `prev` and `next`, which contain `path` and `title`. |

The frontmatter of each post needs to inlcude the following properties, which are used in the underlying GraphQL query:

| Property | Type         | Description  |
| :------- | :----------- | :----------- |
| `title`  | string       | Post title.  |
| `date`   | `YYYY-MM-DD` | Post date.   |
| `author` | string       | Post author. |
npm package: @maiertech/gatsby-plugin-tags
Description: This Gatsby plugin encapsulates the logic for programmatically creating tag pages.
Author: Thilo Maier
Latest version: 0.1.0
Deprecated: Package no longer supported.

# @maiertech/gatsby-plugin-tags

This plugin can be used with a Gatsby project or with a [Gatsby theme](https://www.gatsbyjs.org/docs/themes/).
It encapsulates the logic for programmatically creating tag pages.

## Installation

```bash
yarn add @maiertech/gatsby-plugin-tags
```

## Configuration

You can only tag pages of type `Mdx`. Plugin options:

| Option       | Default       | Description                                                                                                                                                                                                                                                       |
| :----------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dateFormat` | `MMM D, YYYY` | Date format for tagged items.                                                                                                                                                                                                                                     |
| `type`       | `post`        | Type of `Mdx` pages for which tag pages are created. Another plugin such as [`@maiertech/gatsby-plugin-blog`](https://github.com/maiertech/gatsby-themes/tree/master/plugins/blog) creates field `type`, e.g. post. The `path` for a tag page is `<type>s/<tag>`. |
| `template`   |               | Bring your own template. Template receives `path` and `context`, which contains `values` and `tag`. `values` contains all items tagged with `tag` and sorted chronologically (latest item first).                                                                 |

Add `@maiertech/gatsby-plugin-tags` to your `plugins` array in `gatsby-node.js`:

```js
{
  resolve: "@maiertech/gatsby-plugin-tags",
  options: {
    type: 'post'
    template: 'src/templates/tag.jsx',
  }
}
```

You can create multiple sets of tag pages for different types. Add one configuration per type. Here is another configuration:

```js
{
  resolve: "@maiertech/gatsby-plugin-tags",
  options: {
    dateFormat: 'D MMM YYYY'
    type: 'video'
    template: 'src/templates/tag.jsx',
  }
}
```

The frontmatter of each item to be tagged needs to include the following properties:

| Property | Type             | Description |
| :------- | :--------------- | :---------- |
| `date`   | `YYYY-MM-DD`     | Item date.  |
| `tags`   | array of strings | Item tags.  |
| `title`  | string           | Item title. |
npm package: @maiertech/gatsby-theme-base
Description: An opinionated theme to jump start a Gatsby site.
Author: Thilo Maier
Latest version: 0.7.2
Deprecated: Package no longer supported.

# @maiertech/gatsby-theme-base

## Site metadata

This theme exports an `SEO` component. For this component to work, you need to
define the following
[site metadata](https://www.gatsbyjs.com/docs/gatsby-config/#sitemetadata) in
your site's `gatsby-config.js`:

| Key             | Required | Description                                                              |
| :-------------- | :------- | :----------------------------------------------------------------------- |
| siteTitle       | ✓        | Site title displayed in header.                                          |
| seoTitle        | ✓        | SEO title used for title template and as default title.                  |
| siteDescription |          | Optional site description for SEO of the homepage.                       |
| siteUrl         | ✓        | URL from which the production site is served. Used for sitemap creation. |
| siteTwitter     | ✓        | Site Twitter username for SEO.                                           |

## Plugins

| Plugin                                                                                     | Description                                |
| :----------------------------------------------------------------------------------------- | :----------------------------------------- |
| [gatsby-plugin-react-helmet](https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/) | Required to make the `SEO` component work. |
npm package: @maiertech/preset
Description: Theme UI preset for @maiertech websites.
Author: Thilo Maier
Latest version: 0.5.2
Deprecated: Package no longer supported.

---
title: '@maiertech/preset'
---

Package
[`@maiertech/preset`](https://github.com/maiertech/design-system/tree/master/packages/preset)
is a [Theme UI](https://theme-ui.com/) preset. It

1. uses
   [`@theme-ui/preset-base`](https://github.com/system-ui/theme-ui/tree/master/packages/preset-base)
   for defaults,
1. sets the colors for the
   [Theme UI color scheme](https://theme-ui.com/theming#colors),
1. customizes [theme scales](https://theme-ui.com/theme-spec/#theme-scales),
1. customizes variants for
   [Theme UI components](https://theme-ui.com/components),
1. customizes variants for [`@maiertech/components`](/components), and
1. customizes styles for MDX content.

## Defaults

You can lookup the defaults
[here](https://github.com/system-ui/theme-ui/blob/master/packages/preset-base/src/index.ts).

## Colors

This preset supports the following colors from the
[Theme UI color scheme](https://theme-ui.com/theming#colors):

| Key          | Description                                                                                          |
| :----------- | :--------------------------------------------------------------------------------------------------- |
| `text`       | Text color. Should have AAA contrast with `background`.                                              |
| `background` | Background color. Should have AAA contrast with `text`.                                              |
| `primary`    | Primary brand color for links, buttons, etc. Should have at least AA contrast with `background`.     |
| `secondary`  | A secondary brand color for alternative styling. Should have at least AA contrast with `background`. |
| `highlight`  | A background color for highlighting text. Should have at least AA contrast with `text`.              |

You can customize these colors in your project with the `colors` key. There are
different ways to go about choosing colors. You can start with an
[expertly-crafted pallette like Tailwind's](https://tailwindcss.com/docs/customizing-colors).
Or use a pallette generator like [Palx](https://palx.jxnblk.com/). Use
[Colorable](https://colorable.jxnblk.com/) to determine the constrast between
two colors.

## Contributing

Work with two terminals. In the first terminal run

    yarn workspace @maiertech/preset run watch

and in the second terminal run

    yarn workspace docs run dev

The first command watches for changes in the `@maiertech/preset` workspace and
bundles the `@maiertech/preset` package whenever it detects changes. The second
command launches the docs, which use the local `@maiertech/preset` package as
dependency.
npm package: @maiertech/prettier-config
Description: Sharable config for Prettier.
Author: Thilo Maier
Latest version: 2.0.0

# @maiertech/prettier-config

[![NPM version](https://img.shields.io/npm/v/@maiertech/prettier-config.svg)](https://www.npmjs.com/package/@maiertech/prettier-config)

This package is a sharable config for [Prettier](https://prettier.io/)
[@maiertech](https://github.com/maiertech) projects. Run

    npm i -D prettier @maiertech/prettier-config

to install.

Then create `.prettierrc.json` in your project root with

```json
"@maiertech/prettier-config"
```

as content or add

```json
"prettier": "@maiertech/prettier-config",
```

to your `package.json`.