{"id":17125746,"url":"https://github.com/ccampbell/aftershave","last_synced_at":"2025-04-13T06:26:17.565Z","repository":{"id":14483338,"uuid":"17195859","full_name":"ccampbell/aftershave","owner":"ccampbell","description":"Compiled javascript templates","archived":false,"fork":false,"pushed_at":"2016-07-29T16:55:44.000Z","size":94,"stargazers_count":17,"open_issues_count":4,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T23:02:17.552Z","etag":null,"topics":["javascript","javascript-templates","templating"],"latest_commit_sha":null,"homepage":"https://www.npmjs.org/package/aftershave","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/ccampbell.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":"2014-02-26T02:14:28.000Z","updated_at":"2024-10-11T19:41:05.000Z","dependencies_parsed_at":"2022-09-13T02:41:33.424Z","dependency_job_id":null,"html_url":"https://github.com/ccampbell/aftershave","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccampbell%2Faftershave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccampbell%2Faftershave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccampbell%2Faftershave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccampbell%2Faftershave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ccampbell","download_url":"https://codeload.github.com/ccampbell/aftershave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248672251,"owners_count":21143247,"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","javascript-templates","templating"],"created_at":"2024-10-14T18:45:42.698Z","updated_at":"2025-04-13T06:26:17.523Z","avatar_url":"https://github.com/ccampbell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Aftershave\n\nTo make you feel good after shaving off your mustache.\n\n## Installation\n\nTo install run\n\n```\nnpm install -g aftershave\n```\n\nAfter that\n\n```\naftershave --help\n```\n\n## About\n\nAftershave is a slightly different approach to javascript templating.  Rather than parse and compile on the fly as your code executes, it precompiles templates into a vanilla javascript module you can include.\n\nThis makes it way faster than other template engines since all it is doing is string concatenation.  It also provides a simple, clean syntax and allows any regular javascript code.  Most other templating systems require you to learn a special syntax.\n\nFor example, this template:\n\n```html\n\u003cul\u003e\n    {% for (var i = 0, i \u003c fruits.length; i++) %}\n        \u003cli\u003e{{ fruits[i] }}\u003c/li\u003e\n    {% end %}\n\u003c/ul\u003e\n```\n\nCompiles into this:\n\n```javascript\nAftershave.templates.fruits = function(args) {\n    var _t = '\u003cul\u003e ';\n    for (var i = 0; i \u003c args.fruits.length; i++) {\n        _t += ' \u003cli\u003e' + args.fruits[i] + '\u003c/li\u003e ';\n    }\n    _t += '\u003c/ul\u003e';\n    return _t;\n};\n```\n\nThen to execute this, you would include the generated template file and call\n\n```javascript\nAftershave.render('fruits', {\n    fruits: ['apple', 'blueberry', 'orange']\n});\n```\n\n## Usage\n\n```\naftershave /path/to/file1.html /path/to/directory --output /path/to/templates.js\n```\n\nThis will compile all the templates in the specified locations to `/path/to/templates.js`.  That module will expose an aftershave module to node.js or the browser to use to render your templates.\n\nYou can do the same thing from node.js also\n\n```javascript\nvar aftershave = require('aftershave');\n\n// WARNING: this should not be called multiple times\n// only call this once to generate the compiled templates then use `require` and\n// render them that way\naftershave.process(['/path/to/file1.html', '/path/to/directory'], '/path/to/templates.js');\n\nvar templates = require('/path/to/templates.js');\nvar output = templates.render('some-name', {cool: true});\n```\n\n## Documentation\n\nAftershave templates are pretty heavily inspired by [tornado templates](http://www.tornadoweb.org/en/stable/template.html).  The syntax is very similar.\n\n#### Variables\n\nWrapping a variable in `{{ foo }}` will render it inline directly in the template.\n\n#### Code blocks\n\nAnything else should be placed inside `{%` and `%}` tags.  You can use any javascript code.  Any code that surrounds a block should be followed by a `{% end %}` tag.  For example:\n\n```html\n\u003cp\u003e\n    {% if (word.length \u003e 25) %}\n        Wow that is a long word\n    {% else %}\n        That is a normal sized word\n    {% end %}\n\u003c/p\u003e\n```\n\n#### Helpers\n\nThere are a few built in helper functions\n\n##### Escape\n\nBy default aftershave does not escape variables.\n\nTo escape a variable just wrap it in a function call:\n\n```html\n\u003cp\u003eThe email you entered is: {% escape(email) %}\u003c/p\u003e\n```\n\n##### Render\n\nIf you call the render function it will render a sub template at this point.  This is convenient if you have modules that you want to include on multiple pages and don't want to duplicate the code.\n\n```html\n{% render('partial/user_grid.html', {users: users}) %}\n```\n\nWhen templates are compiled the file extension is stripped out of the template name so it is optional to include it here.  Aftershave should process a single level of sub-directories to allow you to better organize your templates.\n\n##### Other helpers\n\nAny other function call you include will be mapped to a helpers object in the generated code.  You can then pass it in.  For example if you wanted to add a helper function to translate text into another language you could do something like this:\n\nIn **template.html**\n\n```html\n\u003ch1\u003e{% translate('Hello!') %}\u003c/h1\u003e\n```\n\nIn **something.js** after including the generated template code\n\n```javascript\nAftershave.helpers.translate = function(text) {\n    // determine language\n    var language = getUserLanguage();\n    if (text == 'Hello!' \u0026\u0026 language == 'spanish') {\n        return '¡Hola!';\n    }\n};\n```\n\n#### Extending other templates\n\nAftershave let's you extend any other templates.  This let's you do things like have default sections in one place that are overridden by subtemplates.  For example you might want to use different layouts for a complex site.\n\n**master.phtml**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n    \u003ctitle\u003e{% block title %}Default Title{% end %}\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    {{ content }}\n    {% renderJavascript() %}\n\u003c/body\u003e\n```\n\n**home.phtml**\n\n```html\n{% extends master.phtml %}\n{% addJavascript('/static/js/home.js') %}\n{% block title %}This is the homepage{% end %}\n{% block content %}\n    \u003cp\u003eThe content goes here.\u003c/p\u003e\n{% end %}\n```\n\nNext you need to define the javascript helpers somewhere in your code:\n\n```javascript\nfunction ViewHelpers() {\n    var self = this;\n    self.jsFiles = [];\n\n    return {\n        addJavascript: function(path) {\n            self.jsFiles.push(path);\n        },\n\n        renderJavascript: function() {\n            var finalJs = '';\n            for (var i = 0; i \u003c self.jsFiles.length; i++) {\n                finalJs += '\u003cscript src=\"' + self.jsFiles[i] + '\"\u003e\u003c/script\u003e';\n            }\n            return finalJs;\n        }\n    }\n};\n\n// call this with each request\naftershave.helpers = new ViewHelpers();\n```\n\nNow if you run `Aftershave.render('home')` the final rendered template will look like this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n    \u003ctitle\u003eThis is the homepage\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cp\u003eThe content goes here.\u003c/p\u003e\n    \u003cscript src=\"/static/js/home.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nAny variables are replaced in the parent template.  The `{% block %}` tags let you specify a default value for a certain section.  If the subtemplate did not pass in a title then the title would fall back to the default title `Default Title`.\n\nIf you do not wrap a section in a `{% block %}` tag in the parent template and then do not pass that variable into the child template it will render as `'undefined'`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccampbell%2Faftershave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fccampbell%2Faftershave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccampbell%2Faftershave/lists"}