• Stars
    star
    584
  • Rank 76,554 (Top 2 %)
  • Language
    HTML
  • License
    Other
  • Created almost 9 years ago
  • Updated 18 days ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The AMP Project Website.

amp.dev

Staging Production

The official homepage of the AMP Project.

Contributing

We welcome contributions to amp.dev.

  • Bug reports and feature requests: something missing or not working on amp.dev? Please file an issue here.
  • Documentation & Guides: see this guide for more information on how to contribute documentation to amp.dev.
  • Code samples & demos: see this guide for more information on how to contribute sample code to amp.dev.

Note: fixing spelling mistakes and other small changes are often easiest by directly editing the file on Github.

Inline editing on Github

Setup

Note: Setting up amp.dev requires a working Python 3 environment on your machine which might not be easy to get going. You can skip this by using the Docker-based setup.

Requirements

Note: For those intending to conduct development on this repository beyond fixing typos, Linux and macOS are the only currently supported operating systems. Windows is not supported at this time.

  1. Install the LTS version of Node.js. An easy way to do so is by using nvm.

    $ nvm install --lts
  2. If it has not already been done, install Python 3 and ensure pip is properly set up by adding the pip user base binary directory to $PATH.

    macOS

    1. Install Homebrew.
    2. Run the following command to ensure everything is up to date. Xcode version 10.3 or the most recent stable version is required.
      $ brew doctor
    3. Run the following command to install Python. Version 3.7 is required at latest.
      $ brew install python libyaml
    4. Run the following command to add the pip user base binary directory to $PATH.
      $ echo "export PATH=\"$(python -m site --user-base)/bin\":\$PATH" >> ~/.bash_profile
    5. Run the following command for the changes to take effect.
      $ source ~/.bash_profile

    Linux (Debian-based)

    Note: If using Linux, refer to the section of pip's official documentation titled Ensure you can run pip from the command line for pip installation troubleshooting.

    1. Run the following command to add the pip user base binary directory to $PATH.
      $ echo "export PATH=\"$(python -m site --user-base)/bin\":\$PATH" >> ~/.bashrc
    2. Run the following command for the changes to take effect.
      $ source ~/.bashrc
    3. Run the following command to use a faster YAML parser.
      $ sudo apt install -y python-yaml libyaml-dev
  3. Install Grow, the static site generator used to build amp.dev. Do so by using pip instead of its installer. Using pip will enable importing from the grow package in Python later on.

Note: Be sure to use the pip command associated with Python 3 as Grow 1 depends on Python 3.

Mac

  LDFLAGS="-L$(brew --prefix)/lib" CFLAGS="-I$(brew --prefix)/include" pip3 install --global-option="--with-libyaml" --force pyyaml
  pip3 install --user grow

Linux

 $ pip3 install --global-option="--with-libyaml" --force pyyaml
 $ pip3 install --user grow

Fork & clone the repository

To get started with contributing to amp.dev, you first need to fork the repository. Once you've done that you can clone the repository:

$ git clone https://github.com/YOUR-USERNAME/amp.dev

... and then install the dependencies via NPM:

$ cd amp.dev
$ npm install

Develop

If it's your first time working on amp.dev, it is recommended to bootstrap your local environment. To do so, make sure you have set up a valid GitHub access token in an environment variable named AMP_DOC_TOKEN like so:

$ export AMP_DOC_TOKEN="c59f6..."

This command enables the import from GitHub to run flawlessly. The actual import occurs by running the following command, which will also build the Playground and Boilerplate Generator once.

$ npm run bootstrap

Tip: Due to bad network conditions or GitHub's API rate-limiting there might be errors during import. Try running the above command with the -- --queue-imports flag to prevent them.

You can then start developing in your local environment with the command below. The task will take care of building and copying all files, watching them for changes, and rebuilding them when needed. Beware that changes to the Express backend require the Gulp task to be restarted.

$ npm run develop

This command prints a lot to the shell and will most likely end on Server ready. Press ctrl-c to quit.. Seeing this line means everything went fine so far unless otherwise stated in the logs; the site should be available at http://localhost:8080/. The service running on port 8081 is only Grow rendering the pages.

You can contribute your changes back to the main repository by creating a pull request.

Setup with Docker

We provide a Dockerfile for development based on one of the official Python-images. When using this you can skip setting up Python and a local installation of Grow on your machine. Though make sure you completed all other installation steps, like cloning the repository, installing all Node.js dependencies and exporting a valid GitHub token as outlined in Fork & clone the repository and Develop. When those steps are completed instead of running the project with npm run develop you can build a development Docker image with the followiung command, run from the project root directory:

$ npx gulp developImageBuild

After the image has been successfully built start a container with the following command:

$ npx gulp developContainer

This command also mounts the pages directory, meaning all changes you are doing to any of the markdown files in pages/content are reflected to the container and can be reviewed without rebuilding the image.

Maintenance

Documents

Made changes to a lot of Grow documents at once and not quite sure if all references are still valid? You can run npm run lint:grow to pick up broken ones.

Run a test build

To run a local test build that does all the minifying and vends the static pages instead of proxying them through to Grow you can run:

$ npm run build:local
$ npm run start:local

Tip: For more rapid local testing, it may be preferable to only build a subset of specified locales. Run the following command with --locales being a comma seperated list of locale abbreviations you want to build, e.g. en,fr or even just en.

npm run build:local -- --locales <list of locales>

Build

Caution: starting a build will automatically clean all locations of possible remainings from previous builds. Make sure you don't have anything there that you want to keep - additionally check your working copy for eventual unintended local changes.

npm run build:local -- --locales <list of locales>

To perform a build run the following command with --env being one of the following valid environments: development, local, staging or production:

$ npx gulp build --env <environment>

This command builds all parts of the project and might take a while. Usually, all builds on amp-dev-staging.appspot.com and amp.dev are built using Travis CI. In case you want to reproduce one of those remote builds in your local environment, you can fetch the build artifacts by running:

$ npx gulp fetchArtifacts --travis-build <build_number>

Copyright 2019 The AMP HTML Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

More Repositories

1

amphtml

The AMP web component framework.
JavaScript
14,887
star
2

worker-dom

The same DOM API and Frameworks you know, but in a Web Worker.
TypeScript
3,206
star
3

amp-wp

Enable AMP on your WordPress site, the WordPress way.
PHP
1,790
star
4

amp-by-example

DEPRECATED: AMP by Example has been merged into amp.dev
HTML
752
star
5

amp-toolbox

A collection of AMP tools making it easier to publish and host AMP pages.
HTML
450
star
6

samples

HTML
444
star
7

ampstart

AMP Start source code and templates .
HTML
419
star
8

rollup-plugin-closure-compiler

Leverage Closure Compiler to minify and optimize JavaScript with Rollup.
TypeScript
292
star
9

amppackager

Tool to improve AMP URLs via Signed Exchanges
Go
140
star
10

remapping

Remap sequential sourcemaps through transformations to point at the original source code
TypeScript
103
star
11

meta

Information about the AMP open source project.
78
star
12

filesize

Monitor the size of files in your project specified within package.json.
TypeScript
75
star
13

amp-toolbox-php

AMP Optimizer PHP library
PHP
73
star
14

amp-sw

A drop in service worker library to help your AMP pages gain network resiliency in 1 line
JavaScript
70
star
15

ampbench

AMPBench: AMP URL validation and troubleshooting tools (DEPRECATED)
JavaScript
66
star
16

wg-amp4email

Responsible for the AMP4Email project. Facilitator: @nainar
56
star
17

bentojs.dev

Bento Website
SCSS
49
star
18

eleventy-plugin-amp

Quickly build interactive websites with Eleventy & AMP.
JavaScript
46
star
19

bento

An easy to use component library that helps you achieve a great page experience
39
star
20

amp-viewer

Objective-C
38
star
21

amp-react-prototype

A scratch pad to experiment with React rendered AMP Components
JavaScript
36
star
22

amp-github-apps

GitHub Apps for the AMP Project
TypeScript
34
star
23

wg-stories

Responsible for implementing and improving AMP's story format (amp-story). Facilitator: @newmuis
28
star
24

meta-ac

The AMP Advisory Committee
25
star
25

animations

TypeScript
23
star
26

cloudflare-amp-optimizer

Implementation of AMP Optimizer for Cloudflare Workers
JavaScript
22
star
27

design-docs

Design docs contributed to AMP.
20
star
28

wg-bento

JavaScript
17
star
29

amp-react

JavaScript
17
star
30

meta-tsc

The AMP Technical Steering Committee
16
star
31

amp-email-viewer

TypeScript
16
star
32

wg-outreach

Responsible for helping developers who use AMP remain productive and keeping the AMP community healthy. This includes maintaining and enhancing AMP's developer-facing sites and documentation, maintaining communication channels, organizing community events, etc. Facilitator: @sebastianbenz
JavaScript
15
star
33

amp-readiness

AMP Readiness is a chrome extension allows you to quickly see what technologies used on the page are AMP compatible.
JavaScript
14
star
34

error-tracker

AMP Project's error logging server
JavaScript
13
star
35

wg-components

Responsible for AMP components, the overall health of AMP Pages, analytics features, and integrations with partner technologies. Facilitator: @alanorozco
11
star
36

wg-access-subscriptions

Responsible for user specific controlled access to AMP content (amp-subscriptions, amp-access and related extensions) Facilitator: @jpettitt Slack: #wg-access-subs
11
star
37

cdn-worker

CDN worker source code
TypeScript
10
star
38

amphtml-build-artifacts

This repository contains build artifacts related to the ampproject/amphtml project
10
star
39

bento-compiler

Server-render AMP Components with worker-dom
HTML
9
star
40

validator-java

A validator for the AMP HTML format implemented in Java
Java
9
star
41

wg-monetization

Responsible for monetization features and integrations in AMP. Facilitator: @powerivq
8
star
42

wg-caching

Responsible for AMP's validator and features related to AMP caches. Facilitator: @Gregable
8
star
43

px-toolbox-php

PHP
8
star
44

storybook-addon-amp

The storybook AMP addon
TypeScript
8
star
45

cdn-configuration

Configuration settings for AMP Project CDNs
TypeScript
7
star
46

wg-performance

Monitoring and improving AMP's load and runtime performance for compliant documents. Facilitator: @erwinmombay
7
star
47

amp-status

HTML
7
star
48

amp-wp-qa-tester

Easily test pre-release versions of the AMP Plugin for WordPress.
PHP
6
star
49

wg-analytics

Deprecated Working Group, previously responsible for analytics features.
6
star
50

wg-viewers

Responsible for ensuring support for AMP viewers and for the amp-viewer project. Facilitator: @gmajoulet
5
star
51

amp-closure-compiler

JavaScript
5
star
52

wg-runtime

Responsible for AMP's core runtime, such as layout/rendering and data binding. Facilitator: @jridgewell
4
star
53

wg-infra

Responsible for AMP's infrastructure, including building, testing and release. Facilitator: @danielrozenberg
4
star
54

wg-codeofconduct

Responsible for enforcing AMP's Code of Conduct. (The Technical Steering Committee delegates its responsibility for enforcement of the Code of Conduct to this Working Group.) Facilitator: @nainar
3
star
55

npw

A workspace-aware npm wrapper to aid with developing in monorepos
JavaScript
3
star
56

wg-approvers

Responsible for approving changes that have a significant impact on AMP's behavior or significant new features as described in the feature and bug fix process. Facilitator: @dvoytenko
3
star
57

wg-foundation-onboarding

Responsible for work/coordination related to AMP completing the OpenJS Foundation onboarding
3
star
58

error-reporting

Contains production error tracking issues.
2
star
59

wg-security-privacy

2
star