{"id":13693088,"url":"https://github.com/f/temel","last_synced_at":"2025-03-21T07:30:46.681Z","repository":{"id":140370709,"uuid":"48241009","full_name":"f/temel","owner":"f","description":"Extensible Markup DSL for Crystal","archived":false,"fork":false,"pushed_at":"2017-10-23T21:47:13.000Z","size":9,"stargazers_count":59,"open_issues_count":1,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-17T22:27:47.562Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Crystal","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/f.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}},"created_at":"2015-12-18T15:01:09.000Z","updated_at":"2023-11-17T05:58:04.000Z","dependencies_parsed_at":"2024-01-14T19:13:37.542Z","dependency_job_id":"7e957455-5662-42bb-8ffc-842e6623409c","html_url":"https://github.com/f/temel","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/f%2Ftemel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Ftemel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Ftemel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f%2Ftemel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f","download_url":"https://codeload.github.com/f/temel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244757271,"owners_count":20505364,"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-02T17:01:05.419Z","updated_at":"2025-03-21T07:30:46.357Z","avatar_url":"https://github.com/f.png","language":"Crystal","funding_links":[],"categories":["Template Engine"],"sub_categories":[],"readme":"# Temel\n\nTemel is a markup language for **Crystal**. A simpler alternative to [HTML Builder](http://github.com/crystal-lang/html-builder).\n\n- Custom tag registration with a simple `tag` macro.\n- Supports **Web Components**.\n- Simpler DSL (comparing to HTML::Builder).\n\n```ruby\n# Register tags first.\ntag my_application\ntag hello_world\n\nget \"/\" do\n  html(\n    body({id: \"main\"},\n      my_application hello_world \"Hello World!\"\n    )\n  )\nend\n```\n\nOr, you can alternatively use block based syntax (Just like HTML::Builder) instead of argument based syntax:\n\n```ruby\nget \"/\" do\n  html do\n    body({id: \"main\"}) do\n      my_application hello_world \"Hello World!\"\n    end\n  end\nend\n```\n\nThe output will be:\n```html\n\u003chtml\u003e\n  \u003cbody id=\"main\"\u003e\n    \u003cmy-application\u003e\n      \u003chello-world\u003eHello World!\u003c/hello-world\u003e\n    \u003c/my-application\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Installation\n\nAdd this to your application's `shard.yml`:\n\n```yaml\ndependencies:\n  temel:\n    github: f/temel\n```\n\n## Usage\n\n```ruby\nrequire \"kemal\"\nrequire \"temel\"\n\nget \"/\" do\n  html(\n    body(\n      h1 \"Hello World\"\n    )\n  )\nend\n```\n\n### Using as Template Engine\n\nYou can use Temel as layout engine with functions.\n\n```crystal\n# layout.tpl.cr\ndef layout(content)\n  html(\n    head(\n      title(\"Hello\")\n    ),\n    body(content)\n  )\nend\n```\n\n... just by using Crystal's internals, nothing more...\n\n```crystal\n# hello.tpl.cr\nrequire \"layout.tpl\"\n\ndef hello(where)\n  layout(\"Hello #{where}\")\nend\n```\n\n... use it with Kemal makes everything better.\n```crystal\n# main.cr\nrequire \"hello.tpl\"\n\nget \"/\" do |env|\n  hello(env.params.where)\nend\n```\n\n### Argument Based DSL vs Block Based DSL\n\nArgument based DSL is a bit different than HTML::Builder's.\n\n#### Argument Based DSL\n```ruby\nget \"/\" do\n  html(\n    head(\n      script({src: \"main.js\"})\n    ),\n    body({id: \"main\"},\n      h1 \"Hello World!\",\n      p \"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n    )\n  )\nend\n```\n\n#### Block Based DSL\n```ruby\nget \"/\" do\n  html do [\n    head do\n      script({src: \"main.js\"})\n    end,\n    body({id: \"main\"}) do [\n      h1 \"Hello World!\",\n      p \"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\"\n    ] end\n  ] end\n] end\n```\n\n### Comments\nYou can add HTML comments with Temel.\n\n```ruby\nget \"/\" do\n  html(\n    body(\n      ul(\n        comment(\"ko foreach: myItems\"),\n        li({\"data-bind\": \"text: $data\"}),\n        comment(\"/ko\")\n      )\n    )\n  )\nend\n```\n\n## Using with [Onyx](https://github.com/ozra/onyx-lang)\n\nWorks with Onyx seamlessly.[*](https://github.com/ozra/onyx-lang/issues/60#issuecomment-201954355).\n\n```coffee\nhtml\n   head\n      title \"Testing it out!\"\n      script\n         { type: \"bad-script\" }\n         \"my-fine-file.bad-ass\"\n   body\n      div\n         {id: \"main-div\"}\n\n         if is-welcome ? h1 \"Welcome\" : h2 \"This is it\"\n\n         article\n            h2 \"The fat and the furious\"\n            p\n               \"\n               Long\n               article text\n               here\n               and stuff, mkay Mr. {some-name}!\n               \"\n\n               ul items.map(~\u003e li _1).join\n\n      div {id: \"footer\"},\n         nav ul\n            li a {href: \"asdfsadf\"}, \"Contact\"\n            li a {href: \"bfadfasdf.se\"}, \"About\"\n```\n\n## Development\n\nYou can extend the Temel by adding your own tags.\n\n### Adding a new tag\n\n```\ntag [tagname]\n```\n\nwill register a new tag.\n\n## Contributing\n\n1. Fork it ( https://github.com/f/temel/fork )\n2. Create your feature branch (git checkout -b my-new-feature)\n3. Commit your changes (git commit -am 'Add some feature')\n4. Push to the branch (git push origin my-new-feature)\n5. Create a new Pull Request\n\n## Contributors\n\n- [f](https://github.com/f) Fatih Kadir Akın - creator, maintainer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff%2Ftemel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff%2Ftemel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff%2Ftemel/lists"}