open-index/open-npm huggingface dataset:
npm package: @hhhallan/notion-parse-mdx
Description: Convert Notion pages to Markdown with frontmatter - (Kodaps) / Convert to MDX pages - (hhhallan)
Author: David Hockley
Latest version: 0.0.14

# notion-parse
An NPM module for downloading and Notion content and saving it as Markdown for NextJS. In short this takes the data from a page in a database and saves the data as FrontMatter and the content as Markdown. The second part is done by the excellent notion-to-md module.

I use this to download my Notion content and save it as Markdown for my NextJS blog. It's a work in progress, but it's working for me so far.

I also use ContentLayer to make sure my fontmatter has the right fields.

## Usage

Here is how I use the module in my NextJS project.

I have a .env file with the following variables :

```.env
NOTION_SECRET=secret_blablablablabla

NOTION_PORTFOLIO_DATABASE_ID=18abababababababababba
NOTION_NEWSLETTER_DATABASE_ID=19abababababababababba
NOTION_POST_DATABASE_ID=20abababababababababba
````

I then have this script that I run to download the content from Notion and save it as Markdown :

```js

// @ts-check

const NotionParse = require('@kodaps/notion-parse');
const dotenv = require('dotenv');

dotenv.config();

const go = async () => {

  if (process.env.NOTION_SECRET) {
    await NotionParse.parseNotion(process.env.NOTION_SECRET, './src/content', [
      {
        databaseId: process.env.NOTION_PORTFOLIO_DATABASE_ID || '',
        contentType: 'Portfolio'
      },
      {
        databaseId: process.env.NOTION_POST_DATABASE_ID || '',
        contentType: 'Post',
        languageField: 'lang',
        filterFields: [ 'translation', 'createdAt', 'status', 'Type']
      },
    ])
  }

};

go().then(() => {
  console.log('Done');
});

```

This supposed several things :
1. that the files are stored in a subfolder of the folder passed in as parameter (here `./src/content`) based on the content type
2. that the ContentLayer type names map to the subfolders. So for instance for the `Post` content type, the files will be stored in `./src/content/post`
3. that the Notion token and database IDs are stored in environment variables, and that there is one database per content type
4. That the title of the content is stored in a 'title' field in Notion
npm package: @hhimanshu/react-ts-starter
Description: Be sure to read **all** of this document carefully, and follow the guidelines within.
Author: Harit Himanshu
Latest version: 1.0.0
Deprecated: I published it incorrectly

### What it contains
- ReactJS support with TypeScript
- Testing support using Jest and React Testing Library
- Formatting support using Prettier
- ESLint support
- Ability to collect code coverage via Jest
- Support for Storybook

### Commands
- `npm i` to install dependencies.
- `npm start` to develop locally.
- `npm test` to test and see the code coverage.
- `npm run build` to create a production build.
- `npx serve dist -l 6666` to serve production build on port `6666`.
- `npm run storybook` to start storybook in development mode.
- `npm run build-storybook` to create production build for storybook.
- `npx serve storybook-static -l 5858` to serve production build for storybook on port `5858`.
npm package: @hhimanshu/ts-react-components-lib
Description: [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) ![npm](https://img.shields.io/npm/v/@hhimanshu/ts-react-components-lib)
Author: hhimanshu
Latest version: 1.2.0

# TypeScript React Component Library
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
![npm](https://img.shields.io/npm/v/@hhimanshu/ts-react-components-lib)


This library is published on `npm` and demonstrates how to write your own React components in TypeScript and publish them as `npm` package.

## Features  

- [x] React components written in TypeScript
- [x] Leverages [TSDX](https://tsdx.io/) to create library
- [x] Use of [`styled-components`](https://styled-components.com/) for styling
- [x] Connected with [Storybook](https://storybook.js.org/)
- [x] Integrated tests with [Jest](https://jestjs.io/) and [Testing Library](https://testing-library.com/)
- [x] Linting support using [Prettier](https://prettier.io/)
- [x] Integrated Continuous Integration (CI) using [GitHub Actions](https://github.com/hhimanshu/ts-react-components-lib/actions/workflows/main.yml)
- [x] Integrated Continuous Deployment (CD) to using [Github Actions](https://github.com/hhimanshu/ts-react-components-lib/actions/workflows/release.yml)
- [x] Uses [Semantic Release](https://semantic-release.gitbook.io/semantic-release/) for releasing the library
- [x] Publishes to [npm](https://www.npmjs.com/package/@h2_demo/p2)
- [x] Publishes Storybook to Chromatic


## Commands
- `yarn install` to install the necessary dependencies  
- `yarn start` to start developing your components  
- `yarn test` to test your components  
- `yarn lint` to lint your code  
- `yarn lint --fix` to fix linting issues in your code  
- `yarn prepare` to create the production bundle  
- `yarn storybook` to start `storybook` in development mode (starts as a new process)  
- `yarn build-storybook` to create production version of storybook for the project. This can be deployment to platforms such as Vercel, Gatsby, Surge, or Firebase hosting  
- `yarn size` tells you size of your library for the production bundle
npm package: @hhiruko/water.css
Description: A fork of water.css (original by Kognise) with custom modifications by hhiruko
Author: hhiruko
Latest version: 3.0.5

<h1 align="center">Water.css</h1>
<p align="center">🌊 A drop-in collection of CSS styles to make simple websites just a little nicer</p>

[![Water.css](/assets/logo.svg)](https://hhiruko.github.io/water.css/)

<br>

Forked and updated to support `theme-dark` and `theme-light` class selectors to allow manual style switch without swapping to another `CSS` file. In the original `water.css`, each theme has seperate files.

## How to use
By default, `water.css` will try to serve styles according to user's system preferences. However, you can manually override the behaviour by adding `theme-dark` or `theme-light` class selectors to the `<body>` tag. Removing the class will lead to automatic theme handling. E.g:
```html
<!-- This will alway load dark theme -->
<body class="theme-dark">
    ...
</body>
```

## Link stylesheet
Use the prebuilt `dist/water.min.css` file directly in your project. Make sure the corresponding `dist/water.min.css.map` file is in the same folder, so browsers can use it for debugging.

## CDN
You can also get it from jsDelivr:
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hhiruko/water.css/dist/water.min.css">
```

## NPM
1. Install the package from npm:
    ```
    npm i @hhiruko/water.css
    ```
2. Import the package:
   ```
   import '@hhiruko/water.css';
   ```

## Build from source:
1. Install dependencies:
    ```
    npm i
    ```
2. To build a minified version, run:
    ```
    npm run build
    ```