create-amp-page
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    Create AMP Page

    Fast development of fast pages.

    npm (scoped) npm (scoped) Travis (.com) master build PRs Welcome Typed try starter template

    Static site generator built with gulp tasks, using Twig templates, optimized for building AMP pages.

    Support for Sass, CSS optimizing, CSS into head injection, media file compressing, automatic resizing of images by srcset, endless copy tasks, Twig global and optional per-page data with JSON and/or frontmatter, browsersync with custom static server middlewares, AMP Optimizer or HTML Minifier (for non-AMP), remove unused CSS (currently only for inline CSS). Different ways to define pages, can be connected with e.g. netlify cms.

    Checkout the starter template!

    Quick Start

    1. Create a project folder, init your project with npm init

    2. Create a Gulpfile.js and paste the following content in it. For all options and docs see the AmpCreatorOptions typing.

    const path = require('path')
    const {ampCreator} = require('create-amp-page')
    
    module.exports = ampCreator({
        port: 4488,
        paths: {
            styles: 'src/styles',
            stylesInject: 'main.css',
            html: 'src/html',
            htmlPages: 'src/html/pages',
            media: 'src/media',
            /* copy: [
                {src: ['./src/api/*'], prefix: 1},
                {src: ['./public/*'], prefix: 2},
            ], */
            dist: 'build',
            distMedia: 'media',
            distStyles: 'styles',
        },
        twig: {
            // custom global template data
            data: {},
        },
        // faster rebuilds on dev:
        ampOptimize: process.env.NODE_ENV === 'production',
        cleanInlineCSS: process.env.NODE_ENV === 'production',
        prettyUrlExtensions: ['html'],
    })

    3. Add those scripts into package.json:

    {
        "scripts": {
            "tasks": "gulp --tasks",
            "start": "cross-env NODE_ENV=development gulp watch",
            "build": "cross-env NODE_ENV=production gulp build",
            "clean": "gulp clean"
        }
    }

    4. Create a postcss.config.js with:

    module.exports = {
        plugins: [
            require('cssnano')({
                preset: ['default', {
                    discardComments: {
                        removeAll: true,
                    },
                }],
            }),
        ],
    }

    5. Add your src folders & files, minimum for this config: src/styles/main.scss and src/html/pages/index.twig and src/media/.gitkeep

    6. Install this SSR: npm i --save create-amp-page

    7. Run npm start and happy coding!

    Starter Template

    Checkout this AMP page start for a preconfigured template repository.

    Page generations

    Two integrated ways of page generation:

    1. One page per template file
    2. One page per content file, but for multiple files one template

    First is also called twig-as-entrypoint, here the config paths.htmlPages is used as root folder for single pages.

    Second is also called frontmatter-as-entrypoint or collections, here the config collections can be used to define multiple folders and map them to their dist. The folder must contain frontmatter files, for each folder the files are rendered against one template. It is possible to have another fmMap logic for each folder.

    Twig Functions

    getImage

    Get metadata and sizing for image, caches the read-result for each execution, purging cache on each watch trigger of html.

    • params:
      • src is the relative path to media folder incl. media folder
      • srcset is an array of objects, define in which image sizes the image should be resized
        • w = width in pixels, internally it calculates the other value proportional
    • returns:
      • src path to file
      • width of file
      • height of file
      • hash sha1 hash of file content

    getImage Twig Example

    Template using getImage(src, srcset) to fetch metadata and resize images when needed:

    {% set image = getImage(src, srcset) %}
    <amp-img
        src="{{ image.src ~ '?key=' ~ (image.hash|slice(0,12)) }}"
        width="{{ image.width }}"
        height="{{ image.height }}"
        {# generate srcset with same syntax like `getImage` #}
        srcset="{% for set in srcset %}{{ addImageSuffix(image.src, '_'~set.w~'w') ~ '?key=' ~ (image.hash|slice(0,12))~' '~set.w~'w' }}{% if loop.index < (srcset|length) %}, {% endif %}{% endfor %}"
        sizes="{{ sizes }}"
        layout="responsive"
    ></amp-img>

    Embed then in file, pixels at srcset:

    {% embed 'image.twig' with {
        src: '/media/img-01.png',
        alt: 'A blog hero image',
        classes: 'flex',
        srcset: [
            {w: '320'},
            {w: '680'},
            {w: '920'}
        ],
        sizes: '(max-width: 320px) 320px, (max-width: 600px) 680px',
    } %}
    {% endembed %}

    Generates HTML like:

     <amp-img
        src="/media/img-01.png?key=2l8ybbe1tjSP"
        width="1280" height="421"
        srcset="/media/img-01_320w.png?key=2l8ybbe1tjSP 320w, /media/img-01_680w.png?key=2l8ybbe1tjSP 680w, /media/img-01_920w.png?key=2l8ybbe1tjSP 920w"
        sizes="(max-width: 320px) 320px, (max-width: 600px) 680px"
    layout="responsive"
    ></amp-img>

    addImageSuffix

    Add an image suffix between name and extension:

    {{ addImageSuffix(image.src, '_suffix') }}

    embedScript

    To embed e.g. css or js files directly in build template, uses the src relative to configured dist:

    {{ embedScript('js/main.js') }}

    License

    This project is free software distributed under the MIT License.

    See: LICENSE.

    © 2020 Michael Becker

    Versions

    See github release notes for updates, especially incompatibilities, for features check the current AmpCreatorOptions typing.

    This project adheres to semver.

    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.

    Install

    npm i create-amp-page

    DownloadsWeekly Downloads

    5

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    50.9 kB

    Total Files

    30

    Last publish

    Collaborators

    • avatar