{"id":19623823,"url":"https://github.com/appleple/document-outliner","last_synced_at":"2025-04-28T05:30:39.532Z","repository":{"id":33789710,"uuid":"161734020","full_name":"appleple/document-outliner","owner":"appleple","description":"HTML5 outliner","archived":false,"fork":false,"pushed_at":"2023-01-07T02:39:33.000Z","size":3213,"stargazers_count":20,"open_issues_count":25,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-05-29T05:45:57.818Z","etag":null,"topics":["markup","npm"],"latest_commit_sha":null,"homepage":"https://appleple.github.io/document-outliner/","language":"TypeScript","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/appleple.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-12-14T05:04:37.000Z","updated_at":"2023-11-17T23:29:50.000Z","dependencies_parsed_at":"2023-01-15T02:34:31.544Z","dependency_job_id":null,"html_url":"https://github.com/appleple/document-outliner","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fdocument-outliner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fdocument-outliner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fdocument-outliner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appleple%2Fdocument-outliner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appleple","download_url":"https://codeload.github.com/appleple/document-outliner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223768730,"owners_count":17199393,"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":["markup","npm"],"created_at":"2024-11-11T11:35:37.420Z","updated_at":"2024-11-11T11:35:39.278Z","avatar_url":"https://github.com/appleple.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# document-outliner\n[![npm version](https://badge.fury.io/js/document-outliner.svg)](https://badge.fury.io/js/document-outliner)\n[![CircleCI](https://circleci.com/gh/appleple/document-outliner/tree/master.svg?style=shield)](https://circleci.com/gh/appleple/document-outliner/tree/master)\n[![npm download](http://img.shields.io/npm/dm/document-outliner.svg)](https://www.npmjs.com/package/document-outliner)\n[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/document-outliner/master/LICENSE)\n\nA utility to make ol/ul list by using html5 outline algorithm.\n\n**Specifications**\n\n\u003e [Living Standard — Last Updated 11 December 2018](https://html.spec.whatwg.org/multipage/sections.html#outlines)\n\n## Installation\n\n### Vanilla (Plain JavaScript)\n\n#### via npm\n\n```sh\nnpm install document-outliner\n```\n\n#### via yarn\n\n```sh\nyarn add document-outliner\n```\n\n#### vid cdn\n\n```html\n\u003cscript src=\"https://unpkg.com/document-outliner@latest/bundle/document-outliner.js\"\u003e\u003c/script\u003e\n```\n\n### jQuery plugin\n\n#### via cdn\n\n```html\n\u003cscript src=\"https://unpkg.com/document-outliner@latest/bundle/jquery-document-outliner.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Vanilla  (Plain JavaScript)\n\n```javascript\nimport DocumentOutliner from 'document-outliner';\n\nconst outliner = new DocumentOutliner('.js-outline-src');\noutliner.makeList('.js-outline-output', {listType: 'ul'});\n```\n\n### jQuery\n\n```javascript\n$(function () {\n  $('.container').documentOutliner('.output', {link: false});\n});\n```\n\n## Options\n\n| name | description | default |\n|:---|:---|:---|\n| link | create HTML anchor link | true |\n| listType | HTML list type ('ol'\u0026#124;'ul') | 'ol' |\n| listClassName | ol/ul class name | '' |\n| itemClassName | li class name | '' |\n| linkClassName | link class name | '' |\n| anchorName | anchor link name ($1 is to be link number) | 'heading-$1' |\n| levelLimit | limit on number of level | 99 |\n\n## Example\n\n**HTML**\n\n```html\n\u003cdiv class=\"outline\"\u003e\u003c/div\u003e\n\n\u003cdiv class=\"container\"\u003e\n  \u003ch1 id=\"the-tax-book\"\u003eThe Tax Book\u003c/h1\u003e\n  \u003csection\u003e\n    \u003ch1\u003eEarning money\u003c/h1\u003e\n    \u003cp\u003eEarning money is good.\u003c/p\u003e\n    \u003csection\u003e\n      \u003ch1\u003eGetting a job\u003c/h1\u003e\n      \u003cp\u003eTo earn money you typically need a job.\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/section\u003e\n  \u003csection\u003e\n    \u003ch1 id=\"spending-money\"\u003eSpending money\u003c/h1\u003e\n    \u003cp\u003eSpending is what money is mainly used for.\u003c/p\u003e\n    \u003csection\u003e\n      \u003ch1\u003eCheap things\u003c/h1\u003e\n      \u003cp\u003eBuying cheap things often not cost-effective.\u003c/p\u003e\n    \u003c/section\u003e\n    \u003csection\u003e\n      \u003ch1\u003eExpensive things\u003c/h1\u003e\n      \u003cp\u003eThe most expensive thing is often not the most cost-effective either.\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/section\u003e\n  \u003csection\u003e\n    \u003ch1 id=\"investing-money\"\u003eInvesting money\u003c/h1\u003e\n    \u003cp\u003eYou can lend your money to other people.\u003c/p\u003e\n  \u003c/section\u003e\n  \u003csection\u003e\n    \u003ch1 id=\"losing-money\"\u003eLosing money\u003c/h1\u003e\n    \u003cp\u003eIf you spend money or invest money, sooner or later you will lose money.\u003c/p\u003e\n    \u003csection\u003e\n      \u003ch1\u003ePoor judgement\u003c/h1\u003e\n      \u003cp\u003eUsually if you lose money it's because you made a mistake.\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/section\u003e\n\u003c/div\u003e\n```\n\n**JavaScript**\n\n```javascript\nconst outliner = new DocumentOutliner('.container');\noutliner.makeList('.outline', {\n  link: true,\n  listType: 'ul',\n  listClassName: 'list-group',\n  itemClassName: 'list-group-item',\n  anchorName: 'heading-$1'\n});\n```\n\n**Yield**\n\n```html\n\u003cdiv class=\"outline\"\u003e\n  \u003cul class=\"level-1 list-group\"\u003e\n    \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#the-tax-book\" class=\"scrollTo\"\u003eThe Tax Book\u003c/a\u003e\n      \u003cul class=\"level-2 list-group\"\u003e\n        \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#heading-2\" class=\"scrollTo\"\u003eEarning money\u003c/a\u003e\n          \u003cul class=\"level-3 list-group\"\u003e\n            \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#heading-3\" class=\"scrollTo\"\u003eGetting a job\u003c/a\u003e\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#spending-money\" class=\"scrollTo\"\u003eSpending money\u003c/a\u003e\n          \u003cul class=\"level-3 list-group\"\u003e\n            \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#heading-5\" class=\"scrollTo\"\u003eCheap things\u003c/a\u003e\u003c/li\u003e\n            \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#heading-6\" class=\"scrollTo\"\u003eExpensive things\u003c/a\u003e\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#investing-money\" class=\"scrollTo\"\u003eInvesting money\u003c/a\u003e\u003c/li\u003e\n        \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#losing-money\" class=\"scrollTo\"\u003eLosing money\u003c/a\u003e\n          \u003cul class=\"level-3 list-group\"\u003e\n            \u003cli class=\"list-group-item\"\u003e\u003ca href=\"#heading-9\" class=\"scrollTo\"\u003ePoor judgement\u003c/a\u003e\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"container\"\u003e\n  \u003ch1 id=\"the-tax-book\"\u003eThe Tax Book\u003c/h1\u003e\n  \u003csection\u003e\n    \u003ch1 id=\"heading-2\"\u003eEarning money\u003c/h1\u003e\n    \u003cp\u003eEarning money is good.\u003c/p\u003e\n    \u003csection\u003e\n      \u003ch1 id=\"heading-3\"\u003eGetting a job\u003c/h1\u003e\n      \u003cp\u003eTo earn money you typically need a job.\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/section\u003e\n  \u003csection\u003e\n    \u003ch1 id=\"spending-money\"\u003eSpending money\u003c/h1\u003e\n    \u003cp\u003eSpending is what money is mainly used for.\u003c/p\u003e\n    \u003csection\u003e\n      \u003ch1 id=\"heading-5\"\u003eCheap things\u003c/h1\u003e\n      \u003cp\u003eBuying cheap things often not cost-effective.\u003c/p\u003e\n    \u003c/section\u003e\n    \u003csection\u003e\n      \u003ch1 id=\"heading-6\"\u003eExpensive things\u003c/h1\u003e\n      \u003cp\u003eThe most expensive thing is often not the most cost-effective either.\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/section\u003e\n  \u003csection\u003e\n    \u003ch1 id=\"investing-money\"\u003eInvesting money\u003c/h1\u003e\n    \u003cp\u003eYou can lend your money to other people.\u003c/p\u003e\n  \u003c/section\u003e\n  \u003csection\u003e\n    \u003ch1 id=\"losing-money\"\u003eLosing money\u003c/h1\u003e\n    \u003cp\u003eIf you spend money or invest money, sooner or later you will lose money.\u003c/p\u003e\n    \u003csection\u003e\n      \u003ch1 id=\"heading-9\"\u003ePoor judgement\u003c/h1\u003e\n      \u003cp\u003eUsually if you lose money it's because you made a mistake.\u003c/p\u003e\n    \u003c/section\u003e\n  \u003c/section\u003e\n\u003c/div\u003e\n```\n\n## Licence\n\n[MIT](https://github.com/appleple/document-outliner/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Fdocument-outliner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappleple%2Fdocument-outliner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappleple%2Fdocument-outliner/lists"}