open-index/open-npm huggingface dataset:
npm package: @commonpub/layer
Description: Shared Nuxt 3 layer that provides the complete CommonPub application — pages, components, composables, server routes, plugins, and theme CSS. This is the primary way to build a CommonPub-powered site.
Latest version: 0.7.27

# @commonpub/layer

Shared Nuxt 3 layer that provides the complete CommonPub application — pages, components, composables, server routes, plugins, and theme CSS. This is the primary way to build a CommonPub-powered site.

## Installation

```bash
npm install @commonpub/layer
```

In your `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  extends: ['@commonpub/layer'],
});
```

## Configuration

Create a `commonpub.config.ts` in your project root:

```ts
import { defineCommonPubConfig } from '@commonpub/config';

export default defineCommonPubConfig({
  instance: {
    name: 'My Community',
    domain: 'example.com',
    contentTypes: ['project', 'article', 'blog', 'explainer'],
  },
  features: {
    content: true,
    social: true,
    hubs: true,
    docs: true,
    learning: true,
    admin: true,
  },
  auth: {
    methods: ['email'],
  },
});
```

Create `server/utils/config.ts` to load the config on the server side. See `apps/shell/server/utils/config.ts` for a complete example with environment variable overrides.

## What's Included

### Pages (70+ routes)

Content CRUD, hub feeds, learning paths, docs sites, admin panel, federation management, user profiles, messaging, notifications, search, and more.

### Components (100+)

Content editor (`CpubEditor`), content cards, author rows, comment sections, engagement bars, federation UI, notification items, message threads, block renderers, and more.

### Composables (19)

`useAuth`, `useFeatures`, `useBlockEditor`, `useContentSave`, `useEngagement`, `useFederation`, `useMessages`, `useNotifications`, `useTheme`, and more.

### Server

API routes for all CommonPub features, auth middleware, federation endpoints, and Nitro plugins.

### Theme

CSS custom properties with 3 built-in themes (base, dark, generics). Consumer apps override with their own `theme.css`.

## Customization

The layer is designed to be extended:

- **Override components**: Place a component with the same name in your app's `components/` directory
- **Override pages**: Place a page at the same route path in your app's `pages/` directory
- **Custom theme**: Add CSS custom property overrides in your app's assets
- **Feature flags**: Enable/disable features via `commonpub.config.ts`

## Dependencies

This layer depends on all `@commonpub/*` packages:

- `@commonpub/schema` — Database tables and validators
- `@commonpub/config` — Configuration and feature flags
- `@commonpub/server` — Business logic
- `@commonpub/auth` — Authentication
- `@commonpub/protocol` — ActivityPub federation
- `@commonpub/ui` — Headless UI components
- `@commonpub/editor` — TipTap block editor
- `@commonpub/docs` — Documentation module
- `@commonpub/learning` — Learning path engine

## License

AGPL-3.0-or-later
npm package: @commonweb/core
Description: **CommonWeb** is a lightweight library with no external dependencies that allows you to create web apps easy and fast using a set of already defined components or use the library internals to create you ourn custom elements easily and efficiently.
Latest version: 1.0.0-rc-14

# CommonWeb

**CommonWeb** is a lightweight library with no external dependencies that allows you to create web apps easy and fast
using a set of already defined components
or use the library internals to create you ourn custom elements easily and efficiently.

### Summary

* It helps you create reusable and customizable web components without the need for heavy frameworks or external
  dependencies.
* It offers a simple and intuitive API for creating custom elements based on native web standards.
* It saves you time and effort, and helps you create more efficient and scalable web applications.

## Installation

**NPM**

```bash 
    npm install --save @commonweb/core
```

**Add the script to your HTML**
Add the CDN script tag to the <head> of your HTML file, and start using CommonWeb components to build your app!.

```html

<script src="https://unpkg.com/mi-paquete-js@latest/dist/mi-paquete-js.min.js"></script>
```

## Usage


```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/mi-paquete-js@latest/dist/mi-paquete-js.min.js"></script>
</head>
<body>
<!--the context attribute is just been used as css selector-->
<static-template context data='{"name":"World", "frameworks": [{"name":"React"},{"name":"Angular"}] }'>
  <h4>Hello! {{@host.data.name}}</h4>
  <ul>
    <template for-each="{{@[context].data.frameworks}}">
      <!--The list is under the for-each context so data refers to the item on the iteration-->
      <li>{{@host.data.name}}</li>
    </template>
  </ul>
</static-template>
</body>
</html>
```

## License

[MIT](https://choosealicense.com/licenses/mit/)