{"id":18950318,"url":"https://github.com/clay/amphora-amp","last_synced_at":"2026-03-28T06:30:18.363Z","repository":{"id":46939619,"uuid":"132941877","full_name":"clay/amphora-amp","owner":"clay","description":"AMP HTML renderer for component data structures","archived":false,"fork":false,"pushed_at":"2023-11-28T03:22:21.000Z","size":555,"stargazers_count":0,"open_issues_count":22,"forks_count":0,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-02-12T00:42:07.337Z","etag":null,"topics":["amp-html","amphora"],"latest_commit_sha":null,"homepage":"","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/clay.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,"publiccode":null,"codemeta":null}},"created_at":"2018-05-10T18:51:47.000Z","updated_at":"2022-09-26T15:47:46.000Z","dependencies_parsed_at":"2024-11-08T13:25:01.855Z","dependency_job_id":"a7dc6c37-5f9b-4222-b468-a57d4d790276","html_url":"https://github.com/clay/amphora-amp","commit_stats":{"total_commits":34,"total_committers":6,"mean_commits":5.666666666666667,"dds":0.2647058823529411,"last_synced_commit":"2b9ebd61e5c7ccfe182362310e9b610471103e2d"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clay%2Famphora-amp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clay%2Famphora-amp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clay%2Famphora-amp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clay%2Famphora-amp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clay","download_url":"https://codeload.github.com/clay/amphora-amp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239946915,"owners_count":19723018,"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":["amp-html","amphora"],"created_at":"2024-11-08T13:22:22.749Z","updated_at":"2026-03-28T06:30:18.296Z","avatar_url":"https://github.com/clay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Amphora AMP HTML\n\n[![CircleCI](https://circleci.com/gh/clay/amphora-amp/tree/master.svg?style=svg)](https://circleci.com/gh/clay/amphora-amp/tree/master) [![Coverage Status](https://coveralls.io/repos/github/clay/amphora-amp/badge.svg?branch=master)](https://coveralls.io/github/clay/amphora-amp?branch=master)\n\nThe [AMP HTML Format](https://www.ampproject.org/docs/) renderer for Clay components.\n\n## Install\n`$ npm install --save amphora-amp`\n\n## Integration\n\n### Basic Configuration\n\nFirst, ensure that you have a compatible version of Amphora installed (v3.x or greater) and require `amphora-amp` at the from wherever you are running Amphora.\n\n```\nconst amphoraAmp = require('amphora-amp');\n```\n\n### Component Rendering\n\nTo make a Clay component renderable for AMP HTML, add a `amp.template.hbs` file to your component's directory.  Additionally if you need to include styles for your component you will need to add an `amp` variation of your component in your `public/css` directory which will be inlined similarly to how CSS is inlined for [amphora-html](https://github.com/clay/amphora-html).  An example directory structure might look like:\n\n```\ncomponents\n  clay-paragraph\n    amp.template.hbs\npublic\n  css\n    clay-paragraph_amp.css\n```\n\n### Handlebars Helpers\n\nSimilar to `amphora-html`, if your templates require any custom [Handlebars Helpers](http://handlebarsjs.com/block_helpers.html) you can register them with the renderer's Handlebars instance. Simply pass in an object whose keys are the names of your helpers and whose values are the helper themselves. Like so:\n\n```javascript\n// My helpers\nconst helpers = {\n  // set up handlebars helpers that rely on internal services\n  'nameOfHelper': () =\u003e {\n    // helper that does something you need.\n    return 'foobar';\n  }\n};\n\n// Register helpers\namphoraAmp.addHelpers(helpers);\n```\n\n### Register Amphora AMP with your Amphora Instance\n\nNow that you have registered any helpers you can register your renderer with Amphora. Registering consists of providing a `renderers` object whose keys are the extension of an HTTP request and whose values are the renderer.\n\n```javascript\nreturn amphora({\n  app: app,\n  renderers: {\n    amp: amphoraAmp,\n    html: amphoraHtml,\n    default: 'html'\n  },\n  providers: ['apikey', amphoraProvider],\n  sessionStore: redisStore,\n  plugins: [\n    amphoraSearch\n  ]\n});\n```\n\nThis will allow you to render when the extension is explicitly specified (i.e. using a URL like `example.com/article.amp`), if you want to have other routes render using the AMP renderer you will need to create routes in your Express app which include the `:ext` param (see [the amphora rendering logic](https://github.com/clay/amphora/blob/master/lib/render.js#L26)) for how the determination of which extension is considered for a route.  An example of an Express route with this format would be:\n\n```\nvar express = require('express');\nvar app = express();\n\napp.get('/:ext/article/:name', ...);\n```\n\nSo that if we hit a URL like `example.com/amp/article/article.html` it will serve using the AMP renderer.\n\n## Contributing\nWant a feature or find a bug? Create an issue or a PR and someone will get on it.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclay%2Famphora-amp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclay%2Famphora-amp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclay%2Famphora-amp/lists"}