{"id":18285512,"url":"https://github.com/bemit/create-amp-page-starter","last_synced_at":"2025-04-09T06:16:52.155Z","repository":{"id":83066276,"uuid":"297127502","full_name":"bemit/create-amp-page-starter","owner":"bemit","description":"⚡ AMP page starter, build handling, 1-click deployment with netlify cms and styled with @formanta/sass.","archived":false,"fork":false,"pushed_at":"2022-06-09T20:10:46.000Z","size":2787,"stargazers_count":1,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T00:32:59.530Z","etag":null,"topics":["accelerated-mobile-pages","amp","frontmatter","ssr","static-site-generator","twig"],"latest_commit_sha":null,"homepage":"https://create-amp-page.netlify.app/","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/bemit.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":"2020-09-20T17:26:04.000Z","updated_at":"2023-07-25T21:55:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"3fcf01fb-4a90-4ed7-b395-c1cf53b87993","html_url":"https://github.com/bemit/create-amp-page-starter","commit_stats":null,"previous_names":[],"tags_count":7,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-amp-page-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-amp-page-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-amp-page-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bemit%2Fcreate-amp-page-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bemit","download_url":"https://codeload.github.com/bemit/create-amp-page-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987285,"owners_count":21028895,"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":["accelerated-mobile-pages","amp","frontmatter","ssr","static-site-generator","twig"],"created_at":"2024-11-05T13:16:55.053Z","updated_at":"2025-04-09T06:16:52.132Z","avatar_url":"https://github.com/bemit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create AMP Page Starter ⚡\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/c2214cb4-af67-4525-a4ce-a4c68d3fa70d/deploy-status)](https://app.netlify.com/sites/create-amp-page/deploys)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\nStarting point for [AMP](https://amp.dev) pages generated with [create-amp-page](https://github.com/bemit/create-amp-page) and using [@formanta/sass](https://formanta.bemit.codes) for styling. Directly deploy with [netlify cms](https://www.netlifycms.org/) as git managed static site generator!\n\n[![Deploy to Netlify](https://img.shields.io/badge/Deploy%20to%20netlify-success?style=for-the-badge\u0026logo=netlify\u0026labelColor=0e1e25\u0026color=00C7B7)](https://app.netlify.com/start/deploy?repository=https://github.com/bemit/create-amp-page-starter) [![Run on CodeSandbox](https://img.shields.io/badge/run%20on%20CodeSandbox-blue?labelColor=fff\u0026logoColor=505050\u0026style=for-the-badge\u0026logo=codesandbox)](https://codesandbox.io/s/github/bemit/create-amp-page-starter)\n\n    npm i\n    npm start\n\n    # or\n    npm run build\n\n    # test driven UI development with cypress:\n    npm run tdd-ui\n\n    npm run tasks\n    npm run clean\n\nOpen [localhost:4488/defaultPage](http://localhost:4488/defaultPage) for your local page preview and change something in `src/*`!\n\n[![Features](https://img.shields.io/badge/Features-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#features)\n\n[![File Structure](https://img.shields.io/badge/File%20Structure-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#default-file-structure)\n\n[![Netlify CMS](https://img.shields.io/badge/Netlify%20CMS-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#netlify-cms)\n\n[![Component Library](https://img.shields.io/badge/Component%20Library-blue?labelColor=333\u0026color=f4f4f4\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333)](#amp-component-library)\n\n[![License](https://img.shields.io/badge/License-blue?labelColor=333\u0026style=for-the-badge\u0026logo=vercel\u0026logoColor=333\u0026color=f4f4f4)](#license)\n\n## Features\n\nProvides a basic file structure and uses the gulp build tasks of [create-amp-page](https://github.com/bemit/create-amp-page), with additionally: markdown and netlify cms.\n\n- uses `.scss` files\n- page data as `.json` and/or `.md` with frontmatter\n- twig templates and pages\n    - pages by template files in `src/html/pages`\n    - pages with folders of frontmatter / collections\n    - using page filename for\n        - frontmatter files resolution\n        - links generation (e.g. canonical)\n    - use custom data, functions, filters and more\n- media optimizing for png, jpg, gif, svg\n- markdown to HTML generation, preinstalled markdown-it plugins for extended syntax\n- basic Twig template for AMP or none AMP pages\n    - `ampEnabled = true` as template variable enables the needed AMP parts\n    - HTML for AMP scripts\n    - inline CSS parts for AMP, also where the CSS is injected by gulp task\n    - `amp` attribute at `html` tag\n- AMP Optimizer and removing unused CSS for production\n- Headless Netlify CMS for site generation supported\n    - uses also frontmatter\n    - git repository management and netlify CI/CD\n    - identity management by netlify, github and more\n    - **easily removable** when not wanted:\n        - delete `public/admin` folder and remove the netlify cms part in `src/html/_base.twig` block `body_end_script`\n\n## Default File Structure\n\n- `build` dist folder after running `npm run build` or while `npm run start`\n- `public` with general files in root like `manifest.json`\n- `public/admin` config and setup files for netlify cms\n- `src/api` may be used as mock api\n- `src/data` contains the page frontmatter and data\n- `src/html` is the base for all twig templates\n- `src/html/pages` will be build to individual HTML pages\n- `src/media` may contain images\n- `src/styles/main.scss` is the style sheet\n\n## Netlify CMS\n\nThis starter repository supports one click deployment on netlify, in your netlify project the identity handling must be setup - and you are ready! The template files, scripts and content schemas are already configured.\n\nSetup identity management and adjust the email templates:\n\n1. Setup netlify project\n    - In netlify project, under identity: click `enable identity`\n    - Click on `Settings \u0026 Usage`\n    - Scroll to `Registration preferences` and change to `Invite only`\n    - Optional, recommended: add external providers with default config like GitHub\n    - Scroll to `Git Gateway` and enable it\n    - Now the general **identity handling is working**\n2. **Change email** template paths in netlify, read why below\n    - `Invitation template` to: `/email/invitation.html`\n    - `Confirmation template` to: `/email/confirmation.html`\n    - `Recovery template` to: `/email/recovery.html`\n    - `Email change template` to: `/email/email-change.html`\n3. **Invite yourself** in the project's identity management\n4. Ready to login under `https://\u003cyour-page-name\u003e.netlify.app/admin/`, your page is published at `https://\u003cyour-page-name\u003e.netlify.app/`\n5. Check `netlify.toml` for deployment settings like basic auth, edit the CMS content schema in `public/admin/config.yml`\n\nThis is an AMP boilerplate and can't use netlifys custom JS login redirect-handling, the login would be buggy: after accepting the invite you will be directed to `/`, this triggers the login correctly (JWT exchange) when the identity widget is loaded, but you will not be redirected to `/admin/` again. To solve this, the email templates must be changed and `/admin/` added between domain and `#` before the tokens, the templates at `src/email/` are already adjusted. For `ampEnabled=false` the identity widget will be loaded by default in frontend, you may remove it in `src/html/_base.twig`. The email templates are copied to `build/email` as netlify needs normal HTTP access.\n\nTake a look at the [authentication documentation for netlify cms](https://www.netlifycms.org/docs/add-to-your-site/#authentication), check how to [configure the cms](https://www.netlifycms.org/docs/configuration-options/) and checkout the [default widgets](https://www.netlifycms.org/docs/widgets/#default-widgets).\n\n## AMP Component Library\n\nThis starter will contain more and more ready to use AMP components and their CMS definitions when needed.\n\n**Universal Twig functions**, used within templates, are included in `create-amp-page`, check out the [function docs](https://github.com/bemit/create-amp-page#twig-functions)\n\n### Twig Embed Image\n\nDisplays an `img` or `amp-img` tag using `ampEnabled`, `layout` defaults to 'responsive'. Set's width and height using `getImage` fn, adds sha1 cachebuster.\n\n\u003e todo: srcset and image resizing support\n\n```twig\n{% embed 'blocks/image.twig' with {\n    src: '/media/img-01.png',\n    alt: 'A blog hero image',\n    classes: 'mb2',\n    layout: 'responsive',\n} %}\n{% endembed %}\n```\n\n## PWA / Javascript Support\n\nThis is not really AMP compatible, or harder to develop e.g. SSL for local `amp-script` debugging and max. 150KB of total script sizes. Suites non-AMP pages perfectly. Use with AMP when you know what you do!\n\nCheckout the separate [create-page-starter repository](https://github.com/bemit/create-page-starter), it has babel+webpack configured with Typescript and React.\n\n## License\n\nThis project is free software distributed under the **MIT License**.\n\nSee: [LICENSE](LICENSE).\n\n### Contributors\n\nBy committing your code/creating a pull request to this repository you agree to release the code under the MIT License attached to the repository.\n\n## Copyright\n\n2022 | [Michael Becker](https://mlbr.xyz), [bemit UG (haftungsbeschränkt)](https://bemit.codes)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbemit%2Fcreate-amp-page-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbemit%2Fcreate-amp-page-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbemit%2Fcreate-amp-page-starter/lists"}