chore: prepare changeset process

peerigon · Apr 23, 2024 · bc2366d · bc2366d
1 parent fd6debf
commit bc2366d
Show file tree

Hide file tree

Showing 23 changed files with 246 additions and 64 deletions.
diff --git a/.changeset/fuzzy-items-listen.md b/.changeset/fuzzy-items-listen.md
diff --git a/README.md b/README.md
diff --git a/README.md b/README.md
@@ -0,0 +1,96 @@
+# `<Hx>uberschrift 🧢</Hx>`
+
+**Zero-dependency magic heading levels for React and Vue.js**
+
+---
+
+[![npm version badge](https://img.shields.io/npm/v/uberschrift?style=flat-square)](https://npmjs.com/package/uberschrift)<br />
+[![npm version badge](https://img.shields.io/npm/v/vueberschrift?style=flat-square)](https://npmjs.com/package/vueberschrift)<br />
+[![Issue badge](https://img.shields.io/github/issues/peerigon/uberschrift?style=flat-square)](https://github.com/peerigon/uberschrift/issues)<br />
+[![CI badge](https://github.com/peerigon/uberschrift/actions/workflows/ci.yml/badge.svg)](https://github.com/peerigon/uberschrift/actions/workflows/pull_request.yml)
+
+---
+
+## [📖 Full Documentation](https://uberschrift.peerigon.io)
+
+## 🛠️ Usage
+
+### ⚛️ React
+
+```sh
+npm install uberschrift
+```
+
+`page.tsx`:
+
+```tsx
+import { Hx, HxBoundary } from "uberschrift";
+
+<Hx>Outside of the top level: this will be an h1</Hx>
+
+<HxBoundary>
+ <Hx>Within the top level: this will be an h2</Hx>
+
+ <HxBoundary>
+ <Hx>Within the 2nd level: this will be an h3</Hx>
+
+ <HxBoundary>
+ <Hx>Within the 3rd level: this will be an h4</Hx>
+ </HxBoundary>
+
+ <Hx>Again within the 2nd level: this will be an h3</Hx>
+ </HxBoundary>
+</HxBoundary>
+```
+
+renders as:
+
+```html
+<h1>Outside of the top level: this will be an h1</h1>
+<h2>Within the top level: this will be an h2</h2>
+<h3>Within the 2nd level: this will be an h3</h3>
+<h4>Within the 3rd level: this will be an h4</h4>
+<h3>Again within the 2nd level: this will be an h3</h3>
+```
+
+### 🌲 Vue.js
+
+```sh
+npm install vueberschrift
+```
+
+`App.vue`:
+
+```html
+<script setup lang="ts">
+ import { Hx, HxBoundary } from "vueberschrift";
+</script>
+
+<template>
+ <Hx>Outside of the top level: this will be an h1</Hx>
+ <HxBoundary>
+ <Hx>Within the top level: this will be an h2</Hx>
+
+ <HxBoundary>
+ <Hx>Within the 2nd level: this will be an h3</Hx>
+ </HxBoundary>
+ </HxBoundary>
+</template>
+```
+
+---
+
+## Sponsors
+
+[<img src="https://assets.peerigon.com/peerigon/logo/peerigon-logo-flat-spinat.png" width="150" />](https://peerigon.com)
+
+---
+
+## 👩‍💻 Development
+
+```sh
+npm install
+npx turbo dev
+npx turbo test
+npx turbo build
+```
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -0,0 +1,9 @@
+# @uberschrift/docs
+
+## 2.0.0
+
+Include vueberschrift
+
+## 1.0.0
+
+Initial release
diff --git a/apps/docs/app/routes/_index.mdx b/apps/docs/app/routes/_index.mdx
@@ -1,7 +1,7 @@
 import { Hx, HxBoundary } from "uberschrift";
 import { Clipboardable } from "../components/clipboardable";
 
-Zero-dependency magic heading levels for React
+Zero-dependency magic heading levels for React and Vue.js
 
 ```tsx
 <Hx>I'm the h1!'</Hx>
@@ -66,11 +66,16 @@ uberschrift provides you with two components: one we call `<Hx>` (as in "heading
 ---
 
 <Hx>Usage 🛠️</Hx>
+<HxBoundary>
+
+<Hx>⚛️ React</Hx>
 
 <Clipboardable content="npm install uberschrift">
+
 ```sh
 npm install uberschrift
 ```
+
 </Clipboardable>
 
 <HxBoundary>
@@ -82,51 +87,84 @@ npm install uberschrift
 <Clipboardable content={`import { Hx, HxBoundary } from "uberschrift";
 
 <Hx>Outside of the top level: this will be an h1</Hx>
-
 <HxBoundary>
- <Hx>Within the top level: this will be an h2</Hx>
-
- <HxBoundary>
- <Hx>Within the 2nd level: this will be an h3</Hx>
+ <Hx>Within the top level: this will be an h2</Hx>
 
  <HxBoundary>
-  <Hx>Within the 3rd level: this will be an h4</Hx>
+  <Hx>Within the 2nd level: this will be an h3</Hx>
  </HxBoundary>
 
- <Hx>Again within the 2nd level: this will be an h3</Hx>
- </HxBoundary>
 </HxBoundary>`}>
 ```tsx
 import { Hx, HxBoundary } from "uberschrift";
 
 <Hx>Outside of the top level: this will be an h1</Hx>
-
 <HxBoundary>
- <Hx>Within the top level: this will be an h2</Hx>
-
- <HxBoundary>
- <Hx>Within the 2nd level: this will be an h3</Hx>
+ <Hx>Within the top level: this will be an h2</Hx>
 
  <HxBoundary>
-  <Hx>Within the 3rd level: this will be an h4</Hx>
+  <Hx>Within the 2nd level: this will be an h3</Hx>
  </HxBoundary>
 
- <Hx>Again within the 2nd level: this will be an h3</Hx>
- </HxBoundary>
 </HxBoundary>
 ```
 </Clipboardable>
+</HxBoundary>
+<HxBoundary>
 
-renders as:
+</HxBoundary>
+<Hx>🌲 Vue.js</Hx>
 
-```html
-<h1>Outside of the top level: this will be an h1</h1>
-<h2>Within the top level: this will be an h2</h2>
-<h3>Within the 2nd level: this will be an h3</h3>
-<h4>Within the 3rd level: this will be an h4</h4>
-<h3>Again within the 2nd level: this will be an h3</h3>
+<Clipboardable content="npm install vueberschrift">
+
+```sh
+npm install vueberschrift
 ```
 
+</Clipboardable>
+
+<HxBoundary>
+
+<Hx>Example 📇</Hx>
+
+`App.vue`:
+
+<Clipboardable content={`<script setup lang="ts">
+import { Hx, HxBoundary } from "vueberschrift";
+</script>
+
+<template>
+ <Hx>Outside of the top level: this will be an h1</Hx>
+ <HxBoundary>
+ <Hx>Within the top level: this will be an h2</Hx>
+
+ <HxBoundary>
+ <Hx>Within the 2nd level: this will be an h3</Hx>
+ </HxBoundary>
+
+ </HxBoundary>
+
+</template>`}>
+```html
+<script setup lang="ts">
+import { Hx, HxBoundary } from "vueberschrift";
+</script>
+
+<template>
+ <Hx>Outside of the top level: this will be an h1</Hx>
+ <HxBoundary>
+ <Hx>Within the top level: this will be an h2</Hx>
+
+ <HxBoundary>
+ <Hx>Within the 2nd level: this will be an h3</Hx>
+ </HxBoundary>
+
+ </HxBoundary>
+
+</template>
+```
+</Clipboardable>
+</HxBoundary>
 </HxBoundary>
 
 <Hx>FAQ 🤯</Hx>
@@ -141,20 +179,15 @@ Example for Chakra:
 
 ```tsx
 import { Hx, HxBoundary } from "uberschrift";
-import {
- Heading as ChakraHeading,
- HeadingProps,
-} from "@chakra-ui/react";
+import { Heading as ChakraHeading, HeadingProps } from "@chakra-ui/react";
 
 const Heading = (props: HeadingProps) => <ChakraHeading {...props} as={Hx} />;
 
 // …
 
-<Heading size="xl">…</Heading>
+<Heading size="xl">…</Heading>;
 ```
 
-
-
 <Hx>How does it handle heading elements nested below the 6th level? 7️⃣</Hx>
 
 The [HTML Spec](https://html.spec.whatwg.org/#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) only allows h1 through h6 as elements and for most documents this should be more than enough.
@@ -183,8 +216,8 @@ In fact, you can use that context with `useHx` if you need it:
 import { useHx } from "uberschrift";
 
 const {
- Element, // string, e.g "h4"
- level  // number => 4
+ Element, // string, e.g "h4"
+ level, // number => 4
 } = useHx();
 ```
 
@@ -200,4 +233,4 @@ const {
 
 ---
 
-[Legal Notice](https://www.peerigon.com/en/legal/)
+[Legal Notice](https://www.peerigon.com/en/legal/), reactExample
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@uberschrift/docs",
- "version": "1.0.0",
+ "version": "2.0.0",
  "sideEffects": false,
  "type": "module",
  "scripts": {

diff --git a/apps/nextjs-example/CHANGELOG.md b/apps/nextjs-example/CHANGELOG.md
@@ -0,0 +1,5 @@
+# nextjs-example
+
+## 1.0.0
+
+Initial release
diff --git a/apps/nextjs-example/package.json b/apps/nextjs-example/package.json
@@ -1,6 +1,6 @@
 {
  "name": "nextjs-example",
- "version": "0.0.0",
+ "version": "1.0.0",
  "private": true,
  "scripts": {
  "dev": "next dev",

diff --git a/apps/react-vite-chakra-ui-example/CHANGELOG.md b/apps/react-vite-chakra-ui-example/CHANGELOG.md
@@ -0,0 +1,5 @@
+# @uberschrift/vite-chakra-ui-example
+
+## 1.0.0
+
+Initial release
diff --git a/apps/react-vite-chakra-ui-example/package.json b/apps/react-vite-chakra-ui-example/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@uberschrift/vite-chakra-ui-example",
  "private": true,
- "version": "0.0.0",
+ "version": "1.0.0",
  "type": "module",
  "scripts": {
  "dev": "vite",

diff --git a/apps/react-vite-example/CHANGELOG.md b/apps/react-vite-example/CHANGELOG.md
@@ -0,0 +1,5 @@
+# @uberschrift/vite-example
+
+## 1.0.0
+
+Initial release
diff --git a/apps/react-vite-example/package.json b/apps/react-vite-example/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@uberschrift/vite-example",
  "private": true,
- "version": "0.0.0",
+ "version": "1.0.0",
  "type": "module",
  "scripts": {
  "dev": "vite",

diff --git a/apps/react-vite-mui-example/CHANGELOG.md b/apps/react-vite-mui-example/CHANGELOG.md
@@ -0,0 +1,5 @@
+# @uberschrift/vite-mui-example
+
+## 1.0.0
+
+Initial release
diff --git a/apps/react-vite-mui-example/package.json b/apps/react-vite-mui-example/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@uberschrift/vite-mui-example",
  "private": true,
- "version": "0.0.0",
+ "version": "1.0.0",
  "type": "module",
  "scripts": {
  "dev": "vite",

diff --git a/apps/vue-vite-example/CHANGELOG.md b/apps/vue-vite-example/CHANGELOG.md
@@ -0,0 +1,5 @@
+# vue-vite-example
+
+## 1.0.0
+
+Initial release
diff --git a/apps/vue-vite-example/package.json b/apps/vue-vite-example/package.json
@@ -1,7 +1,7 @@
 {
  "name": "vue-vite-example",
  "private": true,
- "version": "0.0.0",
+ "version": "1.0.0",
  "type": "module",
  "scripts": {
  "dev": "vite",

diff --git a/packages/eslint-config/CHANGELOG.md b/packages/eslint-config/CHANGELOG.md
@@ -0,0 +1,9 @@
+# @uberschrift/eslint-config
+
+## 2.0.0
+
+Include vueberschrift
+
+## 1.0.0
+
+Initial release