{"id":13608135,"url":"https://github.com/marpple/ttl-pug","last_synced_at":"2025-04-12T14:32:08.440Z","repository":{"id":96137285,"uuid":"119002729","full_name":"marpple/ttl-pug","owner":"marpple","description":"ES6 tagged template literals like Pug","archived":true,"fork":false,"pushed_at":"2019-04-30T09:15:27.000Z","size":11,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-07T13:39:33.184Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/marpple.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-01-26T03:48:38.000Z","updated_at":"2024-08-28T10:03:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"329b311a-394c-49af-87fd-a6b9ef1a0334","html_url":"https://github.com/marpple/ttl-pug","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Fttl-pug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Fttl-pug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Fttl-pug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marpple%2Fttl-pug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marpple","download_url":"https://codeload.github.com/marpple/ttl-pug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248581273,"owners_count":21128139,"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-08-01T19:01:24.562Z","updated_at":"2025-04-12T14:32:08.152Z","avatar_url":"https://github.com/marpple.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# ttl-pug\nES6 tagged template literals like Pug\n\n## Getting Started\n\n### 1. plain\n```javascript\nimport pug, {html, escape, unescape, map, scat, el, elpug, elhtml} from '/ttl-pug/ttl-pug.js';\n\nconst links = [\n  { name: 'MARPPLE', url: 'https://marpple.com', is_app: true },\n  { name: 'abym', url: 'https://abym.co.kr', is_app: true },\n  { name: 'blog', url: 'https://marpple.github.io' },\n  { name: 'GitHub', url: 'https://github.com/marpple' }\n];\n\nlet demo1 = document.createElement('div');\ndemo1.setAttribute('id', 'demo1');\ndemo1.innerHTML = `\n  \u003ch1\u003e1: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    ${links.map(link =\u003e\n      `\u003cli\u003e\u003ca href=\"${link.url}\"\u003e${link.name}\u003c/a\u003e\u003c/li\u003e`\n    ).join('')}\n  \u003c/ul\u003e\n`;\ndocument.querySelector('#content').appendChild(demo1);\n```\n\n```html\n\u003cdiv id=\"demo1\"\u003e\n  \u003ch1\u003e1: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.github.io\"\u003eblog\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/marpple\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 2. with html\n```javascript\nlet demo2 = document.createElement('div');\ndemo2.setAttribute('id', 'demo2');\ndemo2.innerHTML = html`\n  \u003ch1\u003e2: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    ${links.map(link =\u003e\n      `\u003cli\u003e\u003ca href=\"${link.url}\"\u003e${link.name}\u003c/a\u003e\u003c/li\u003e`\n    )}\n  \u003c/ul\u003e\n`;\ndocument.querySelector('#content').appendChild(demo2);\n```\n\n```html\n\u003cdiv id=\"demo2\"\u003e\n  \u003ch1\u003e2: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.github.io\"\u003eblog\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/marpple\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 3. html, el\n```javascript\nvar str = html`\n  \u003cdiv id=\"demo3\"\u003e\n    \u003ch1\u003e3: Link\u003c/h1\u003e\n    \u003cul class=\"list\"\u003e\n      ${links.map(link =\u003e\n        `\u003cli\u003e\u003ca href=\"${link.url}\"\u003e${link.name}\u003c/a\u003e\u003c/li\u003e`\n      )}\n    \u003c/ul\u003e\n  \u003c/div\u003e\n`;\nvar element = el(str);\ndocument.querySelector('#content').appendChild(element);\n```\n\n```html\n\u003cdiv id=\"demo3\"\u003e\n  \u003ch1\u003e3: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.github.io\"\u003eblog\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/marpple\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 4. elhtml\n```javascript\ndocument\n  .querySelector('#content')\n  .appendChild(elhtml`\n    \u003cdiv id=\"demo4\"\u003e\n      \u003ch1\u003e4: Link\u003c/h1\u003e\n      \u003cul class=\"list\"\u003e\n        ${links.map(link =\u003e\n          `\u003cli\u003e\u003ca href=\"${link.url}\"\u003e${link.name}\u003c/a\u003e\u003c/li\u003e`\n        )}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  `);\n```\n\n```html\n\u003cdiv id=\"demo4\"\u003e\n  \u003ch1\u003e4: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.github.io\"\u003eblog\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/marpple\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 5. pug, el\n```javascript\nvar str = pug`\n  #demo5\n    h1 5: Link\n    ul.list\n      ${links.map(link =\u003e pug`\n        li\n          a[href=\"${link.url}\"] ${link.name}`\n      )}\n`;\nvar element = el(str);\ndocument.querySelector('#content').appendChild(element);\n```\n\n```html\n\u003cdiv id=\"demo5\"\u003e\u003ch1\u003e5: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.github.io\"\u003eblog\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/marpple\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 6. elpug\n```javascript\ndocument\n  .querySelector('#content')\n  .appendChild(elpug`\n    #demo6\n      h1 6: Link\n      ul.list\n        ${links\n          .filter(link =\u003e link.is_app)\n          .map(link =\u003e pug`\n            li\n              a[href=\"${link.url}\"] ${link.name}`\n        )}\n  `);\n```\n\n\n```html\n\u003cdiv id=\"demo6\"\u003e\u003ch1\u003e6: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 7. elpug, map(support array, array-like, Object, Set, Map, typeof list[Symbol.iterator] == 'function')\n```javascript\nvar links2 = new Set(links);\ndocument\n  .querySelector('#content')\n  .appendChild(elpug`\n    #demo7\n      h1 7: Link\n      ul.list\n        ${map(links2, link =\u003e pug`\n          li\n            a[href=\"${link.url}\"] ${link.name}`\n        )}\n  `);\n```\n\n```html\n\u003cdiv id=\"demo7\"\u003e\u003ch1\u003e7: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.github.io\"\u003eblog\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/marpple\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 8. plain, el, scat(support array, array-like, Object, Set, Map, typeof list[Symbol.iterator] == 'function')\n```javascript\nvar links3 = {\n  MARPPLE: { name: 'MARPPLE', url: 'https://marpple.com', is_app: true },\n  abym: { name: 'abym', url: 'https://abym.co.kr', is_app: true },\n  blog: { name: 'blog', url: 'https://marpple.github.io' },\n  GitHub: { name: 'GitHub', url: 'https://github.com/marpple' }\n};\ndocument\n  .querySelector('#content')\n  .appendChild(el(`\n    \u003cdiv id=\"demo8\"\u003e\n      \u003ch1\u003e8: Link\u003c/h1\u003e\n      \u003cul class=\"list\"\u003e\n        ${scat(links3, link =\u003e\n          `\u003cli\u003e\u003ca href=\"${link.url}\"\u003e${link.name}\u003c/a\u003e\u003c/li\u003e`\n        )}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  `));\n```\n\n```html\n\u003cdiv id=\"demo8\"\u003e\n  \u003ch1\u003e8: Link\u003c/h1\u003e\n  \u003cul class=\"list\"\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.com\"\u003eMARPPLE\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://abym.co.kr\"\u003eabym\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://marpple.github.io\"\u003eblog\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://github.com/marpple\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n### 9. escape, unescape\n```javascript\nvar str = '\u003cul class=\"test\"\u003e\u003cli\u003ehi\u003c/li\u003e\u003c/ul\u003e';\ndocument\n  .querySelector('#content')\n  .appendChild(el(`\n    \u003cdiv id=\"demo9\"\u003e\n      \u003ch1\u003e9: escape, unescape\u003c/h1\u003e\n      \u003cdiv\u003e${escape(str)}\u003c/div\u003e\n      \u003cdiv\u003e${unescape(escape(str))}\u003c/div\u003e\n    \u003c/div\u003e\n  `));\n```\n\n```html\n\u003cdiv id=\"demo9\"\u003e\n  \u003ch1\u003e9: escape, unescape\u003c/h1\u003e\n  \u003cdiv\u003e\u0026lt;ul class=\"test\"\u0026gt;\u0026lt;li\u0026gt;hi\u0026lt;/li\u0026gt;\u0026lt;/ul\u0026gt;\u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cul class=\"test\"\u003e\n      \u003cli\u003ehi\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarpple%2Fttl-pug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarpple%2Fttl-pug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarpple%2Fttl-pug/lists"}