{"id":26964448,"url":"https://github.com/nicklayb/duplo","last_synced_at":"2025-04-03T06:32:24.541Z","repository":{"id":57502113,"uuid":"186077544","full_name":"nicklayb/duplo","owner":"nicklayb","description":"Duplo is a HTML buiilder based on function calls. Instead of writing whole HTML you can simple call functions.","archived":false,"fork":false,"pushed_at":"2019-06-13T15:15:04.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T02:39:48.913Z","etag":null,"topics":["elixir","functions","html","templating"],"latest_commit_sha":null,"homepage":null,"language":"Elixir","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/nicklayb.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}},"created_at":"2019-05-11T02:17:04.000Z","updated_at":"2019-06-13T15:15:06.000Z","dependencies_parsed_at":"2022-09-13T07:01:58.898Z","dependency_job_id":null,"html_url":"https://github.com/nicklayb/duplo","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/nicklayb%2Fduplo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Fduplo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Fduplo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicklayb%2Fduplo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicklayb","download_url":"https://codeload.github.com/nicklayb/duplo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246948040,"owners_count":20859366,"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":["elixir","functions","html","templating"],"created_at":"2025-04-03T06:31:33.248Z","updated_at":"2025-04-03T06:32:24.533Z","avatar_url":"https://github.com/nicklayb.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Duplo\n\nDuplo is a HTML buiilder based on function calls. Instead of writing whole HTML you can simple call functions.\n\n## Example usage\n\nInstead of\n\n```elixir\ndefmodule MyModule do\n  def render_html(title) do\n    \"\u003ch1 class=\"a class I need\" some-other-attribute=\"This get complicated to prevent typos\"\u003e#{title}\u003c/h1\u003e\"\n  end\nend\n```\n\nIt lets you do\n\n```elixir\ndefmodule MyModule do\n  import Duplo\n\n  def render_html(title) do\n    h1([\n      class: \"a class I need\",\n      some_other_attribute: \"Gets easier to read and to maintain\"\n    ], title)\n  end\nend\n```\n\n## Advanced usage\n\nIn fact, the main purpose of this is composing tags. If you want \"components\" or higher level building blocks, it gets really easy to do.\n\n```elixir\ndefmodule Bootstrap do\n  use Duplo.Tag, [:button, :ul, :li]\n\n  def btn(text, color \\\\ \"primary\") do\n    button([class: \"btn btn-xs btn-#{color}\"], text)\n  end\n\n  @ul_class \"list-group\"\n  @li_class \"list-group-item\"\n  def list(items) do\n    ul(\n      [class: @ul_class],\n      Enum.map(items, fn (item) -\u003e\n        li([class: @li_class], item)\n      end)\n    )\n  end\nend\n```\n\nThis would help ensure consistency between element usage over your website\n\n```elixir\ndefmodule Page do\n  import Bootstrap\n  use Duplo.Tag, [:div]\n\n  def render() do\n    div([], [\n      list([\"First item\", \"Second item\"])\n      btn(\"Submit form\")\n    ])\n  end\nend\n```\n\nPage.render/0 would then output\n\n```html\n\u003cdiv \u003e\n  \u003cul class=\"list-group\"\u003e\n    \u003cli class=\"list-group-item\"\u003eFirst item\u003c/li\u003e\n    \u003cli class=\"list-group-item\"\u003eSecond item\u003c/li\u003e\n  \u003cul\u003e\n  \u003cbutton class=\"btn btn-xs btn-primary\"\u003eSubmit form\u003c/button\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicklayb%2Fduplo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicklayb%2Fduplo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicklayb%2Fduplo/lists"}