Giter Club home page Giter Club logo

create-amp-page-starter's Introduction

Create AMP Page Starter ⚡

Netlify Status PRs Welcome

Starting point for AMP pages generated with create-amp-page and using @formanta/sass for styling. Directly deploy with netlify cms as git managed static site generator!

Deploy to Netlify Run on CodeSandbox

npm i
npm start

# or
npm run build

npm run tasks
npm run clean

# serve `build` with `server.js`
# for checking build version at port :3030
npm run serve

Open localhost:4488 for your local page preview and change something in src/*!

Features

File Structure

Netlify CMS

Component Library

License

Features

Provides a basic file structure and uses the gulp build tasks of create-amp-page, with additionally: markdown and netlify cms.

  • uses .scss files
  • page data as .json and .md with frontmatter
  • twig templates and pages
    • pages by template files in src/html/pages
    • pages with folders of frontmatter / collections
    • using page filename for
      • frontmatter files resolution
      • links generation (e.g. canonical)
    • use custom data, functions, filters and more
  • media optimizing for png, jpg, gif, svg
  • markdown to HTML generation, preinstalled markdown-it plugins for extended syntax
  • basic Twig template for AMP or none AMP pages
    • ampEnabled = true as template variable enables the needed AMP parts
    • HTML for AMP scripts
    • inline CSS parts for AMP, also where the CSS is injected by gulp task
    • amp attribute at html tag
  • AMP Optimizer and removing unused CSS for production
  • Headless Netlify CMS for site generation supported
    • uses also frontmatter
    • git repository management and netlify CI/CD
    • identity management by netlify, github and more
    • easily removable when not wanted:
      • delete public/admin folder and remove the netlify cms part in src/html/_base.twig block foot_js
  • supports easy addition of ESNext and React, see feature/esnext

Default File Structure

  • build dist folder after running npm run build or while npm run start
  • public with general files in root like manifest.json
  • public/admin config and setup files for netlify cms
  • src/api may be used as mock api
  • src/data contains the page frontmatter and data
  • src/html is the base for all twig templates
  • src/html/pages will be build to individual HTML pages
  • src/media may contain images
  • src/styles/main.scss is the style sheet

Netlify CMS

This 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.

Setup identity management and adjust the email templates:

  1. Setup netlify project
    • In netlify project, under identity: click enable identity
    • Click on Settings & Usage
    • Scroll to Registration preferences and change to Invite only
    • Optional, recommended: add external providers with default config like GitHub
    • Scroll to Git Gateway and enable it
    • Now the general identity handling is working
  2. Change email template paths in netlify, read why below
    • Invitation template to: /email/invitation.html
    • Confirmation template to: /email/confirmation.html
    • Recovery template to: /email/recovery.html
    • Email change template to: /email/email-change.html
  3. Invite yourself in the project's identity management
  4. Ready to login under https://<your-page-name>.netlify.app/admin/, your page is published at https://<your-page-name>.netlify.app/
  5. Check netlify.toml for deployment settings like basic auth, edit the CMS content schema in public/admin/config.yml

This 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.

Take a look at the authentication documentation for netlify cms, check how to configure the cms and checkout the default widgets.

AMP Component Library

This starter will contain more and more ready to use AMP components and their CMS definitions when needed.

Universal Twig functions, used within templates, are included in create-amp-page, check out the function docs

Twig Embed Image

Displays an img or amp-img tag using ampEnabled, layout defaults to 'responsive'. Set's width and height using getImage fn, adds sha1 cachebuster.

todo: srcset and image resizing support

{% embed 'blocks/image.twig' with {
    src: '/media/img-01.png',
    alt: 'A blog hero image',
    classes: 'mb2',
    layout: 'responsive',
} %}
{% endembed %}

Feature/ESNext

This is not really AMP compatible, or harder to develop e.g. SSL for local amp-script debugging, max 150KB of total script sizes. Suites non-AMP pages perfectly. Use with AMP when you know what you do!

ESNext Client Side

beta: webpack and babel config with wrap on ampCreator

In feature/esnext a modern webpack & babel buildsetup is preconfigured.

Start coding in ES6+, Typescript and React, use babel plugins and more.

Embed or reference (src) the produced asset files directly.

Check the file level differences between feature/esnext and master starter template. Will be documented here when finalized as easy reproducible steps.

React Static

Render your React directly at the build process, clean and rich HTML for SEO and client side speedup!

alpha: it works, but features need optimizing / coworking-with-twig, like resizing used images

template structure must be adjusted before using snap, as every dynamic thing must be rendered with react and not through twig or react-snap uses a different twig template for each page (seems to be hard)

Enabled in the feature/esnext branch, using react-snap for "server side react rendering" and fixing react-snap#493 through the custom /copy.js, adding the HTML cleaning and optimizing tasks again.

Commands:

# use `snap-build` now instead of `build`
npm run snap-build

License

This project is free software distributed under the MIT License.

See: LICENSE.

Contributors

By committing your code/creating a pull request to this repository you agree to release the code under the MIT License attached to the repository.

Copyright

2020 | Michael Becker, bemit UG (haftungsbeschränkt)

create-amp-page-starter's People

Contributors

elbakerino avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.