{"id":27440305,"url":"https://github.com/tmpmachine/divless-html","last_synced_at":"2025-04-14T22:39:52.313Z","repository":{"id":143523070,"uuid":"330401535","full_name":"tmpmachine/divless-html","owner":"tmpmachine","description":"One way converter for divless HTML format. Divless HTML is a custom HTML format that uses square brackets and has a nameless div tag.","archived":false,"fork":false,"pushed_at":"2024-04-26T06:25:16.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T06:40:52.789Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tmpmachine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-01-17T13:50:14.000Z","updated_at":"2025-01-06T12:57:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"ae8c4f09-a10d-47dc-a4cb-22077c719dd1","html_url":"https://github.com/tmpmachine/divless-html","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmpmachine%2Fdivless-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmpmachine%2Fdivless-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmpmachine%2Fdivless-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmpmachine%2Fdivless-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tmpmachine","download_url":"https://codeload.github.com/tmpmachine/divless-html/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975309,"owners_count":21192198,"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":["javascript"],"created_at":"2025-04-14T22:39:51.736Z","updated_at":"2025-04-14T22:39:52.296Z","avatar_url":"https://github.com/tmpmachine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# divless.js\nOne way converter for divless HTML format.\n\nVS Code extension : https://github.com/tmpmachine/vsce-divless.\n\nCodetmp7 editor has divless HTML enabled by default : https://github.com/tmpmachine/codetmp.\n\n## Usage Example\nTo integrate this library with your application, use the following code :\n```html\n\u003cscript src=\"divless.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  let html = divless.replace(`\n  \n    [ {bor:1px solid}\n      [p \"Hello world!\"]\n    ]\n  \n  `);\n\u003c/script\u003e\n```\nReturned result :\n```html\n\u003cdiv style=\"border:1px solid\"\u003e\n  \u003cp\u003eHello world!\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Implementing Divless HTML Conversion in Your Application\nPlease read the [divless HTML conversion specification](https://github.com/tmpmachine/divless-html/wiki/Divless-HTML-Conversion-Specification).\n\n## Skip Divless Format\nDivless.js will skip replacing divless HTML format if wrapped inside one of these matching sequence :\n| Start skip | End skip |\n| --- | --- |\n| \u003cstyle\t | \u003c/style\u003e |\n| \u003cscript\t | \u003c/script\u003e |\n| \u0026lt;!--nodivless--\u003e | \u0026lt;!--/nodivless--\u003e |\n\nExample :\n```html\n[btn \"Button 1\"]\n\u003c!--nodivless--\u003e\n[ #my-div\n  Do not replace this part\n]\n\u003c!--/nodivless--\u003e\n[btn \"Button 2\"]\n```\nReturned result :\n```html\n\u003cbutton\u003eButton 1\u003c/button\u003e\n\u003c!--nodivless--\u003e\n[ #my-div\n  Do not replace this part\n]\n\u003c!--/nodivless--\u003e\n\u003cbutton\u003eButton 2\u003c/button\u003e\n```\n\n## Reserved Attribute Prefix\n### ID\nUse `#` to set element ID.\n```html\n[ #my-div\n  Hello World.\n]\n```\nReturned result :\n```html\n\u003cdiv id=\"my-div\"\u003e\n  Hellow World.\n\u003c/div\u003e\n```\n\n### Class\nUse `.` to set element class.\n```html\n[ .class1 .class2\n  Hello World.\n]\n```\nReturned result :\n```html\n\u003cdiv class=\"class1 class2\"\u003e\n  Hellow World.\n\u003c/div\u003e\n```\n\n### Inline Style\nUse `{}` to wrap inline style. CSS properties shortname available below.\n```html\n[ {p:8px 16px} {bor:1px solid} {pos:absolute;top:0} \n  Hello World.\n]\n```\nReturned result :\n```html\n\u003cdiv style=\"padding:8px 16px;border:1px solid;position:absolute;top:0\"\u003e\n  Hellow World.\n\u003c/div\u003e\n```\n\n## Limitation\nCurrently not supporting one line nested tags, for example this one will fail replaced correctly :\n```\n[ [btn 'This is a button inside a div container']]\n```\nSolution: use divless on the inner most element :\n```\n\u003cdiv\u003e[btn 'This is a button inside a div container']\u003c/div\u003e\n```\n\n## HTML Shortname\n| HTML Tag | Shortname |\n| --- | --- |\n| div\t |  |\n| video\t | v |\n| audio\t | au |\n| button\t | btn |\n| canvas\t | can |\n| input\t | in |\n| span\t | s |\n| label\t | l |\n| textarea\t | t |\n| select\t | sel |\n| option\t | opt |\n\n## CSS Shortname\nNote : available only for inline style properties.\n| CSS Property | Shortname |\n| --- | --- |\n| padding\t | p |\n| padding-left\t | pl |\n| padding-top\t | pt |\n| padding-right\t | pr |\n| padding-bottom\t | pb |\n| margin\t | m |\n| margin-left\t | ml |\n| margin-top\t | mt |\n| margin-right\t | mr |\n| margin-bottom\t | mb |\n| text-decoration\t | td |\n| text-transform\t | tt |\n| font-family\t | ff |\n| font-size\t | fs |\n| font-style\t | ft |\n| font-weight\t | fw |\n| text-align\t | ta |\n| white-space\t | ws |\n| float\t | f |\n| overflow\t | ov |\n| min-width\t | mw |\n| min-height\t | mh |\n| max-width\t | Mw |\n| max-height\t | Mh |\n| width\t | w |\n| height\t | h |\n| display\t | d |\n| visibility\t | vis |\n| opacity\t | op |\n| color\t | col |\n| background\t | bg |\n| border-radius\t | rad |\n| border\t | bor |\n| position\t | pos |\n| z-index\t | z |\n| top\t | t |\n| left\t | l |\n| right\t | r |\n| bottom\t | b |\n| line-height\t | lh |\n\n### Flexbox / Grid\n| CSS Property | Shortname |\n|---|---|\n| grid-template-rows\t | rows |\n| grid-template-columns\t | cols |\n| grid-gap\t | Gap |\n| grid-column-start\t | col-start |\n| grid-column-end\t | col-end |\n| grid-row-start\t | row-start |\n| grid-row-end\t | row-end |\n| align-items | ali |\n| align-self | als |\n| justify-content | jt |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmpmachine%2Fdivless-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmpmachine%2Fdivless-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmpmachine%2Fdivless-html/lists"}