open-index/open-npm huggingface dataset:
npm package: @jkavuncuoglu/seo-ux-audit-sidebar
Description: SEO & UX Audit Sidebar components for Vue 3
Author: Jeremy Kavuncuoglu
Latest version: 0.1.7

# SEO & UX Audit Sidebar (Vue 3)

![npm version](https://img.shields.io/npm/v/@jkavuncuoglu/seo-ux-audit-sidebar)
![npm downloads](https://img.shields.io/npm/dm/@jkavuncuoglu/seo-ux-audit-sidebar)
![license](https://img.shields.io/npm/l/@jkavuncuoglu/seo-ux-audit-sidebar)
![vue](https://img.shields.io/badge/vue-3.x-brightgreen)

A modular Vue 3 sidebar for quick **Content SEO** and **User Experience (UX)** audits.  
It runs safe, client-side heuristics and shows **pass / warn / fail** statuses with actionable guidance.

👉 Perfect for developers who want lightweight, in-browser SEO & UX checks during development.

---

## 👀 Preview

![SEO & UX Audit Sidebar Preview](https://raw.githubusercontent.com/jkavuncuoglu/seo-audit-sidebar/main/preview.png)  
*Example of the sidebar auditing SEO & UX issues directly inside your app.*

---

## 📦 Installation

**NPM**
```bash
# NPM
npm install @jkavuncuoglu/audit-sidebar

#Yarn
yarn add @jkavuncuoglu/audit-sidebar

#PNPM
pnpm add @jkavuncuoglu/audit-sidebar
```

🚀 Basic Usage
```aiignore
import { createApp } from 'vue'
import AuditSidebarPlugin, { SidebarAudit } from '@jkavuncuoglu/audit-sidebar'
import '@jkavuncuoglu/audit-sidebar/style.css' // optional minimal styles

import App from './App.vue'

const app = createApp(App)

// Install the plugin globally
app.use(AuditSidebarPlugin)

// Mount your app
app.mount('#app')

// OR: use <SidebarAudit /> locally inside your components

```

🧩 Features
- ✅ Content SEO checks: meta title, meta description, H1s, image alts, canonical tag
- ✅ UX checks: viewport tag, mobile-friendliness heuristic, broken links, large images, contrast hints
- ✅ One-click auditing: run all checks at once or trigger individually
- ✅ Local persistence: remembers sidebar state, active tab, and suppressed items via localStorage
- ✅ Lightweight & client-safe: runs entirely in the browser without external calls

🎨 Styling
If you use Tailwind, the components will automatically pick up utility classes.
Without Tailwind, you can import the included fallback CSS:

⚠️ Notes & Limitations
- 🔍 Link checks are heuristic-only (no cross-origin fetches in browser).
- 📑 Duplicate meta detection works per-page; cross-page analysis is out of scope.
- 🌐 Contrast & mobile-friendly checks use basic heuristics; for production audits, pair with Lighthouse or dedicated SEO tools.

🛠️ Troubleshooting
- Sidebar not styled? Ensure you’ve imported style.css or have Tailwind set up.
- Vue version mismatch? Requires Vue 3 (Composition API).
- State not saving? Check if browser storage (localStorage) is enabled.

📄 License

MIT © Jeremy Kavuncuoglu

## Release Notes
See the full changelog in [CHANGELOG.md](./CHANGELOG.md).

---
npm package: @jkba/rxjs-fsm
Description: rxjs-fsm
Author: Jakub Meinlschmidt
Latest version: 1.1.0

# rxjs-fsm

![](https://github.com/jmeinlschmidt/rxjs-fsm/actions/workflows/node.js.yml/badge.svg)
![](https://img.shields.io/npm/dt/@jkba/rxjs-fsm?logo=npm)


This package provides a set of tools for utilizing complete deterministic finite automata (Finite state machine) in RxJS with a focus on functional programming.
Allowing developers to efficiently manage complex state machines in context of reactive programming.

✅ &nbsp;Tree Shakeable (ES modules)  
✅ &nbsp;Fully Typed  
✅ &nbsp;Unit Tests  
✅ &nbsp;Documentation


## Installation

```sh
npm i @jkba/rxjs-fsm
```


## Example Usage

Let's consider the following use-case as an example. It is discussed in detail in a dedicated [blog post](https://blog.jakb.cz/posts/automata-in-rxjs/).

![Automata example](automata-example.png)

In the very first step, let's represent this automata:

```ts
export type Input = 'toggle' | 'hide';
export type State = 'hidden' | 'shown';

export const transitions: StateTransitions<State, Input> = {
  hidden: {
    toggle: 'shown',
    hide: 'hidden',
  },
  shown: {
    toggle: 'hidden',
    hide: 'hidden',
  },
};
```


Suppose we represent inputs as Observables and the initial state as a constant:

```ts
const toggle$ = new Subject<void>();
const hide$ = new Subject<void>();

const initialState: State = 'hidden';
```

It is necessary to create a single input Observable and _mark_ individual values in order to retain proper types. For this purpose, let's use `fsmHelpersFactory` function.

```ts
const { markInput } = fsmHelpersFactory<State, Input>(transitions);

const input$ = merge(
  toggle$.pipe(markInput('toggle')),
  hide$.pipe(markInput('hide')),
);
```

Finally, we can create the machine object:

```ts
const machine = rxjsFsmFactory(transitions, input$, initialState);
```

Listen to the current state:

```ts
machine.selectState().subscribe(console.log);

// Emits only on `hidden` state
machine.selectState('hidden').subscribe(console.log);
```

### Minimalistic

Another approach is to avoid the _machine_ object and use this library in a pipe with an existing Observable:

```ts
const {
  fsm,
  markInput,
} = fsmHelpersFactory<State, Input>(transitions);

const state$ = input$.pipe(fsm(initialState));

state$.subscribe(console.log);
```


## Build

Use `npm link` and then `npm link @jkba/rxjs-fsm` in your project.


## Release

Use `npm version`, don't forget to push the tag and the CI will take care of the rest.


## License

This project is licensed under [MIT License](http://opensource.org/licenses/MIT/).
For the full text of the license, see the [LICENSE](LICENSE) file.