{"id":17242827,"url":"https://github.com/imcuttle/slider-doc","last_synced_at":"2025-06-25T05:08:52.670Z","repository":{"id":45113218,"uuid":"312277590","full_name":"imcuttle/slider-doc","owner":"imcuttle","description":"Make html element to be slider view","archived":false,"fork":false,"pushed_at":"2022-01-07T14:13:48.000Z","size":2689,"stargazers_count":5,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-17T05:39:23.439Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imcuttle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"License","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-12T12:58:47.000Z","updated_at":"2020-11-20T03:50:54.000Z","dependencies_parsed_at":"2022-09-26T17:30:27.557Z","dependency_job_id":null,"html_url":"https://github.com/imcuttle/slider-doc","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/imcuttle/slider-doc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fslider-doc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fslider-doc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fslider-doc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fslider-doc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imcuttle","download_url":"https://codeload.github.com/imcuttle/slider-doc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fslider-doc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261808075,"owners_count":23212694,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T06:14:10.790Z","updated_at":"2025-06-25T05:08:52.648Z","avatar_url":"https://github.com/imcuttle.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# slider-doc\n\n[![Build status](https://img.shields.io/travis/imcuttle/slider-doc/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/slider-doc)\n[![Test coverage](https://img.shields.io/codecov/c/github/imcuttle/slider-doc.svg?style=flat-square)](https://codecov.io/github/imcuttle/slider-doc?branch=master)\n[![NPM version](https://img.shields.io/npm/v/slider-doc.svg?style=flat-square)](https://www.npmjs.com/package/slider-doc)\n[![NPM Downloads](https://img.shields.io/npm/dm/slider-doc.svg?style=flat-square\u0026maxAge=43200)](https://www.npmjs.com/package/slider-doc)\n[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)\n\n\u003e Make html element to be slider view\n\n一建转换文档为 PPT 演示\n\n[在线 DEMO](http://imcuttle.github.io/slider-doc)\n\n**快捷键列表：**\n\n- ESC / O : 打开整体预览模式\n- Cmd + ESC / Ctrl + ESC: 退出 PPT 模式\n- 方向键：PPT 翻页\n\n## 原理\n\n![image.png](https://i.loli.net/2020/11/18/J9WMnEPr6D7C5aL.png)\n\n解析 DOM 树，生成树结构如下：\n\n```html\n\u003ch1\u003e标题\u003c/h1\u003e\n\u003cp\u003e内容\u003c/p\u003e\n\u003ch2\u003e标题2\u003c/h2\u003e\n\u003cp\u003e内容2\u003c/p\u003e\n```\n\n会解析成\n\n```json5\n{\n  type: 'lvl',\n  level: 1,\n  value: '标题',\n  children: [\n    {\n      type: 'text',\n      value: '内容'\n    },\n    {\n      type: 'lvl',\n      level: 2,\n      value: '标题2',\n      children: [\n        {\n          type: 'text',\n          value: '内容2'\n        }\n      ]\n    }\n  ]\n}\n```\n\n## Installation\n\n```bash\nnpm install slider-doc\n# or use yarn\nyarn add slider-doc\n```\n\n## Usage\n\n```javascript\nimport sliderDoc from 'slider-doc'\n\nconst silder = sliderDoc({\n  lvl0: '.doc h1',\n  lvl1: '.doc h2',\n  lvl2: '.doc h3',\n  lvl3: '.doc h4',\n  lvl4: '.doc h5'\n})\n```\n\n## API\n\n### `sliderDoc(selectors, options?)`\n\n#### `selectors`\n\n- **Type:** [Selectors](https://github.com/big-wheel/wowsearch/tree/master/packages/wowsearch#selectors-1)\n\n同时扩展了 code 类型的 text selector，方便展示代码块\n\n```json5\n{\n  code: '.post pre'\n}\n```\n\n#### `options`\n\n##### `document`\n\n- **Type:** `Document`\n- **Default:** `document`\n\n##### `excludes`\n\n解析 dom 之前，需要剔除的 element\n\n- **Type:** `Selector[]` - see [Selector](https://github.com/big-wheel/wowsearch/tree/master/packages/wowsearch#selector)\n- **Default:** `[]`\n\n##### `revealConfig`\n\nReveal.js 的[配置](https://revealjs.com/config/)\n\n##### `mountContainer`\n\nReveal.js 挂载的节点\n\n- **Type:** `Element`\n- **Default:** `document.body`\n\n##### `renderers`\n\n自定义渲染\n\n- **Type:** `Array\u003c(vNode, ctx, next) =\u003e string\u003e`\n- **Default:** `[]`\n- **Example:**\n\n  ```js\n  ;[\n    (vNode, ctx, next) =\u003e {\n      if (vNode.type === 'text') {\n        return `\u003cspan\u003e${vNode.value}\u003c/span\u003e`\n      }\n      return next()\n    }\n  ]\n  ```\n\n##### `renderSectionAttrs`\n\n渲染外层 Section 时候注入的属性\n\n- **Type:** `(vNode, ctx) =\u003e string`\n- **Default:** `() =\u003e 'data-transition=\"fade-in slide-out\"'`\n\n## Todo\n\n- [ ] Feat: 生成 reveal.js 的 dom 实例，而不是 html，可以带上 dom 交互（如 React 组件）\n\n## Contributing\n\n- Fork it!\n- Create your new branch:  \n  `git checkout -b feature-new` or `git checkout -b fix-which-bug`\n- Start your magic work now\n- Make sure npm test passes\n- Commit your changes:  \n  `git commit -am 'feat: some description (close #123)'` or `git commit -am 'fix: some description (fix #123)'`\n- Push to the branch: `git push`\n- Submit a pull request :)\n\n## Authors\n\nThis library is written and maintained by imcuttle, \u003ca href=\"mailto:imcuttle@163.com\"\u003eimcuttle@163.com\u003c/a\u003e.\n\n## License\n\nMIT - [imcuttle](https://github.com/imcuttle) 🐟\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fslider-doc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimcuttle%2Fslider-doc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fslider-doc/lists"}