{"_id":"@c1ach0/nppt","_rev":"2-2358d6e6a4bd0efd2b5d055057a3d83c","name":"@c1ach0/nppt","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@c1ach0/nppt","version":"1.0.0","author":{"url":"https://maxence-bessi.com","name":"Maxence Bessi"},"license":"MIT","_id":"@c1ach0/nppt@1.0.0","maintainers":[{"name":"c1ach0","email":"c1ach83500@gmail.com"}],"homepage":"https://nppt.maxence-bessi.com","bugs":{"url":"https://github.com/C1ach0/nppt/issues"},"dist":{"shasum":"0c9cb08598ed324bb78bab7c486f2b105807baff","tarball":"https://registry.npmjs.org/@c1ach0/nppt/-/nppt-1.0.0.tgz","fileCount":40,"integrity":"sha512-aneDiqfqb62dca/FMYJf80yx9u+1j945oB5z4Z5ElSriJ27QcKVJMi3Ey46u+9hb5Bi5CQ6sSSqCTWh+8xvhQQ==","signatures":[{"sig":"MEUCIF3JVtSeVFbl9G69qLhAmkBbLYch6A1qQ32SK3jnGsH6AiEA0tTfmOTAVGZHkgzqNJX8ik6Isgr1EesVt9O9eMfEaVY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62538},"main":"./dist/module.mjs","type":"module","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"gitHead":"c4b374e3efbec5e38c5b7dc2abf39f425fc1b9ba","scripts":{"dev":"npm run dev:prepare && nuxt dev playground","lint":"eslint .","test":"vitest run","prepack":"nuxt-module-build build","release":"npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags","dev:build":"nuxt build playground","test:types":"vue-tsc --noEmit && cd playground && vue-tsc --noEmit","test:watch":"vitest watch","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground"},"_npmUser":{"name":"c1ach0","email":"c1ach83500@gmail.com"},"repository":{"url":"git+https://github.com/C1ach0/nppt.git","type":"git"},"workspaces":["nuxt","nuxt-module","presentation","slides","presenter-view","viewer-mode"],"_npmVersion":"11.7.0","description":"Nuxt Presentation Tools: turn regular Nuxt pages into synchronized viewer and presenter experiences.","directories":{},"_nodeVersion":"24.11.1","dependencies":{"@nuxt/kit":"^4.4.2"},"typesVersions":{"*":{".":["./dist/types.d.mts"]}},"_hasShrinkwrap":false,"devDependencies":{"nuxt":"^4.4.2","eslint":"^10.1.0","vitest":"^4.1.2","vue-tsc":"^3.2.6","typescript":"~6.0.2","@types/node":"latest","changelogen":"^0.6.2","@nuxt/schema":"^4.4.2","@nuxt/devtools":"^3.2.4","@nuxt/test-utils":"^4.0.0","@nuxt/eslint-config":"^1.15.2","@nuxt/module-builder":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/nppt_1.0.0_1775236488272_0.6929096138289259","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@c1ach0/nppt","version":"1.0.1","description":"Nuxt Presentation Tools: turn regular Nuxt pages into synchronized viewer and presenter experiences.","license":"MIT","author":{"name":"Maxence Bessi","url":"https://maxence-bessi.com"},"homepage":"https://nppt.maxence-bessi.com","repository":{"type":"git","url":"git+https://github.com/C1ach0/nppt.git"},"bugs":{"url":"https://github.com/C1ach0/nppt/issues"},"type":"module","exports":{".":{"types":"./dist/types.d.mts","import":"./dist/module.mjs"}},"main":"./dist/module.mjs","typesVersions":{"*":{".":["./dist/types.d.mts"]}},"workspaces":["nuxt","nuxt-module","presentation","slides","presenter-view","viewer-mode"],"scripts":{"prepack":"nuxt-module-build build","dev":"npm run dev:prepare && nuxt dev playground","dev:build":"nuxt build playground","dev:prepare":"nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground","release":"npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags","lint":"eslint .","test":"vitest run","test:watch":"vitest watch","test:types":"vue-tsc --noEmit && cd playground && vue-tsc --noEmit"},"dependencies":{"@nuxt/kit":"^4.4.2"},"devDependencies":{"@nuxt/devtools":"^3.2.4","@nuxt/eslint-config":"^1.15.2","@nuxt/module-builder":"^1.0.2","@nuxt/schema":"^4.4.2","@nuxt/test-utils":"^4.0.0","@types/node":"latest","changelogen":"^0.6.2","eslint":"^10.1.0","nuxt":"^4.4.2","typescript":"~6.0.2","vitest":"^4.1.2","vue-tsc":"^3.2.6"},"gitHead":"9c06323a1af5d6cf442b8b5c430e51ff58f11077","_id":"@c1ach0/nppt@1.0.1","_nodeVersion":"24.11.1","_npmVersion":"11.7.0","dist":{"integrity":"sha512-YuzZ2DqKhW+MRPj8SbWcp2JlErX2ajDjMi5FuxuRQV009vtZQF21kdliM0pbr19oLks/Htq3UEI4rfjQd6eWwA==","shasum":"c5859d42fafc4be34e859841e39d049789e61003","tarball":"https://registry.npmjs.org/@c1ach0/nppt/-/nppt-1.0.1.tgz","fileCount":46,"unpackedSize":65572,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBP2+RsekQr28PTi8usFAnnp2ZAaXfuLxsoveht1Ymg2AiEAjzxiFt2wrxkycNgGNNjozsbEzp8rWqTxLjab/qBpXmg="}]},"_npmUser":{"name":"c1ach0","email":"c1ach83500@gmail.com"},"directories":{},"maintainers":[{"name":"c1ach0","email":"c1ach83500@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nppt_1.0.1_1775386165154_0.10402594664960407"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-03T17:14:48.153Z","modified":"2026-04-05T10:49:25.453Z","1.0.0":"2026-04-03T17:14:48.402Z","1.0.1":"2026-04-05T10:49:25.332Z"},"bugs":{"url":"https://github.com/C1ach0/nppt/issues"},"author":{"name":"Maxence Bessi","url":"https://maxence-bessi.com"},"license":"MIT","homepage":"https://nppt.maxence-bessi.com","repository":{"type":"git","url":"git+https://github.com/C1ach0/nppt.git"},"description":"Nuxt Presentation Tools: turn regular Nuxt pages into synchronized viewer and presenter experiences.","maintainers":[{"name":"c1ach0","email":"c1ach83500@gmail.com"}],"readme":"# NPPT\n\nNPPT is a Nuxt module that adds a presentation layer to existing pages.\n\nThe idea is simple:\n\n- keep your normal site visually intact\n- add a `viewer` mode for the audience\n- add a `presenter` mode with notes, preview and controls\n\nDocumentation and live demo:\n[https://nppt.maxence-bessi.com](https://nppt.maxence-bessi.com)\n\n## What NPPT does\n\nNPPT lets you reuse real Nuxt pages as presentation slides.\n\nInstead of building a separate deck, you annotate parts of your site and NPPT helps you:\n\n- focus one section at a time\n- hide dense content during the presentation\n- show simplified content only during the presentation\n- sync navigation between viewer and presenter windows\n- keep a presenter dashboard with notes, timer and preview\n\nOutside presentation mode, your site should remain a normal site.\n\n## Features\n\n- `v-nppt` directive for step targeting and presenter metadata\n- `NpptHideOnPresentation` to hide content during presentation mode\n- `NpptShowOnPresentation` to show content only during presentation mode\n- `NpptProgress` for a simple viewer progress indicator\n- synchronized `viewer` and `presenter` routes\n- built-in presenter panel\n\n## Installation\n\n```bash\nnpx nuxi module add nppt\n```\n\nOr install it manually:\n\n```bash\nnpm install nppt\n```\n\nThen enable the module in your Nuxt config:\n\n```ts\nexport default defineNuxtConfig({\n  modules: ['nppt'],\n})\n```\n\n## Basic usage\n\n### 1. Mark a step\n\n```vue\n<section\n  v-nppt=\"{\n    step: 1,\n    title: 'Introduction',\n    note: 'Explain the main goal of the page.',\n    keywords: [\n      { label: 'Intro', tone: 'info', size: 'xl' },\n      { label: 'Context', tone: 'neutral', size: 'md' },\n    ],\n  }\"\n>\n  <h1>Welcome</h1>\n</section>\n```\n\n### 2. Hide content during the presentation\n\n```vue\n<NpptHideOnPresentation>\n  <p>\n    This long paragraph stays visible on the normal site,\n    but disappears in presentation mode.\n  </p>\n</NpptHideOnPresentation>\n```\n\n### 3. Show simplified content only during the presentation\n\n```vue\n<NpptShowOnPresentation on=\"viewer\">\n  <p>This shorter version is shown only to the audience.</p>\n</NpptShowOnPresentation>\n```\n\n### 4. Add the presenter panel\n\nPut it once in your app layout or `app.vue`:\n\n```vue\n<template>\n  <NuxtPage />\n  <NpptPresenter />\n</template>\n```\n\n### 5. Add the launcher\n\n```vue\n<template>\n  <NuxtPage />\n  <NpptPresenter />\n  <NpptLauncher />\n</template>\n```\n\nThe launcher opens the viewer window and switches the current tab to presenter mode.\n\n## Available components\n\n### `NpptHideOnPresentation`\n\nHide content only when presentation mode is active.\n\nProps:\n\n- `on?: 'viewer' | 'presenter' | 'any'`\n\nDefault:\n\n- `on=\"any\"`\n\n### `NpptShowOnPresentation`\n\nShow content only when presentation mode is active.\n\nProps:\n\n- `on?: 'viewer' | 'presenter' | 'any'`\n\nDefault:\n\n- `on=\"any\"`\n\n### `NpptProgress`\n\nSimple progress bar for the presentation view, especially useful in `viewer` mode.\n\nProps:\n\n- `on?: 'viewer' | 'presenter' | 'any'`\n- `fixed?: boolean`\n- `top?: string`\n- `right?: string`\n- `bottom?: string`\n- `left?: string`\n- `showLabel?: boolean`\n\nDefault:\n\n- `on=\"viewer\"`\n\n### `NpptPresenter`\n\nBuilt-in presenter dashboard with:\n\n- active title\n- speaker note\n- keywords\n- current path\n- timer\n- viewer preview\n- step and page navigation\n\n### `NpptLauncher`\n\nSmall floating launcher to start presentation mode quickly.\n\n## Directive API\n\n`v-nppt` accepts:\n\n- `step?: number`\n- `title?: string`\n- `note?: string`\n- `next?: string`\n- `hideOn?: 'presenter' | 'viewer'`\n- `keywords?: string | Array<{ label: string; tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger'; size?: 'sm' | 'md' | 'lg' | 'xl' }>`\n\nExample:\n\n```vue\n<section\n  v-nppt=\"{\n    step: 2,\n    title: 'Feature summary',\n    note: 'Summarize the important points.',\n    next: '/about',\n    keywords: 'Summary|info|xl,Sync|success|lg'\n  }\"\n>\n  ...\n</section>\n```\n\n## Presentation modes\n\nNPPT uses a query parameter:\n\n- `?role=viewer`\n- `?role=presenter`\n\nWithout one of these modes, presentation-only content should not appear.\n\nThat is an important project rule:\n\n- normal site mode should stay visually unchanged\n- presentation-specific UI should appear only in presentation mode\n\n## Playground\n\nThe repository includes a small showcase site in `playground/` with 5 example pages:\n\n- `Index`\n- `Article`\n- `Blog`\n- `About`\n- `Contact`\n\nIt demonstrates:\n\n- normal-site rendering\n- simplified viewer rendering\n- content hiding and showing\n- multi-page presentation flow\n\n## Local development\n\n```bash\nnpm install\nnpm run dev:prepare\nnpm run dev\n```\n\nUseful commands:\n\n```bash\nnpm run dev:build\nnpm run lint\nnpm run test\nnpm run test:types\n```\n\n## AI usage\n\nThis project was built with AI-assisted development.\n\nThat includes:\n\n- implementation exploration\n- API iteration\n- playground examples\n- documentation drafting and cleanup\n\nThe product direction, feature choices and final validation remain human decisions.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}