This is page 1 of 24. Use http://codebase.md/cloudflare/docs/imgs/claudemcp.gif?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
```
1 | {
2 | "projects": {
3 | "default": "ampproject-b5f4c",
4 | "staging": "ampproject-staging",
5 | "production": "ampproject-b5f4c",
6 | "custom": "ampproject-custom"
7 | }
8 | }
```
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
```
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 |
11 | [*.json]
12 | indent_style = space
13 | indent_size = 2
14 |
```
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
```
1 | *.mo
2 | .DS_Store
3 | .sass-cache
4 | .idea
5 | node_modules
6 |
7 | build
8 | assets/css/*
9 |
10 | content/includes/who.yaml
11 | content/docs/contribute/governance.md
12 | content/learn/design-principles.md
13 | content/docs/reference/spec.md
14 | content/docs/reference/components/**/*.md
15 |
```
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "env": {
3 | "browser": true,
4 | "es6": true
5 | },
6 | "extends": "eslint:recommended",
7 | "rules": {
8 | "indent": [
9 | "error",
10 | 2
11 | ],
12 | "linebreak-style": [
13 | "error",
14 | "unix"
15 | ],
16 | "quotes": [
17 | "error",
18 | "single"
19 | ],
20 | "semi": [
21 | "error",
22 | "always"
23 | ],
24 | "no-else-return": [
25 | "error"
26 | ],
27 | "array-bracket-spacing": [
28 | "error",
29 | "always",
30 | { "singleValue": false }
31 | ],
32 | "brace-style": [
33 | "error",
34 | "1tbs"
35 | ]
36 | }
37 | }
```
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
```yaml
1 | language: node_js
2 | node_js:
3 | - node
4 | cache:
5 | directories:
6 | - node_modules # NPM packages
7 | - $(npm config get prefix)/bin/gulp
8 | - $(npm config get prefix)/bin/firebase
9 | - /home/travis/.nvm/versions/node/v7.2.0/lib/node_modules
10 | - $HOME/.cache/pip
11 | - /home/travis/.local/bin
12 | install:
13 | - pip install grow --user
14 | - npm install -g gulp
15 | - npm install -g firebase-tools
16 | - npm install
17 | script:
18 | - 'if [ "${TRAVIS_BRANCH}" = "production" ]; then firebase use production; fi'
19 | - 'if [ "${TRAVIS_BRANCH}" = "master" ]; then firebase use staging; fi'
20 | - grow build
21 | after_success:
22 | - firebase deploy --token "$FIREBASE_TOKEN"
23 | branches:
24 | only:
25 | - production
26 | - master
27 | env:
28 | global:
29 | secure: RRx3CaLmCC0rA+MOYXTI3HTAMc2TI9AQcodUfZhr+vNEL8d0q09EZkYU/TjkRx9VQ1paOT1AmxNQJtHhysIS7B/pSAZoNG9bPC5UXmiZHVLbRB4qPmMMte9zdfKanGY3/g3zt2qOTUVVL4ymDy5xK2uYZ/KgkrDx1gGH3mSoTO6gK79I4nisJYDcRfzI/UUvrNkdjlFYrFnZbnMdnqZSryuv7CrdZWpYtLDryzJ+bcgq6Vr2liiKwmVb+/tff3EblAzBcWMAM4I0MzRaM+Mahw0EEENc24brtVoQTbvSdXXJ9CEIfWjykSyZh0WrZkx3tKY95GDr9PCHEkyI5d2kUGYDbRjjrEuBEdPTcjx6zZ2vXUlVPeDxNwLO1WZwVy0Om1dg/jwPjVDtsubjBaC+4XezJCywaZruGD6Q0iStemMVapN19SbGJzo9uYG8EvVB4OFlmY2l/fOadTIC9YHpYJREhGc2DBW9jHfTK1dgyW1JpnFgieEOSw24gsvbxSSV5db7tJU36Pt1Kkcu3IZnYyHlBUmYKZ24cizh6azfkHRaLvSvdJuvx0euuoz/WOJ77toUD6wPc0/OtrKnkCfQowtciMdnKNhuu4JpegdZ9gQqpV2gQ0XpPgxc4afKCd0L5QiUNFCu1J+fQ0obclqWZpC0VzHdDpNMckv4I7XqnhI=
30 |
```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
```markdown
1 | AMPProject.org [](https://travis-ci.org/ampproject/docs)
2 | =========================
3 |
4 | You're looking at the source code of the official website of the AMP Project.
5 | Even if you don't plan on contributing, explore how we've built the site for
6 | a good example of how to build a canonical, responsive standalone AMP site.
7 |
8 | How to build the site
9 | ---------------------
10 |
11 | ### Install
12 |
13 | Install [Grow](http://grow.io) and npm dependencies:
14 |
15 | ```sh
16 | $ curl https://install.growsdk.org | bash
17 | $ npm install
18 | ```
19 |
20 | ### Get a GitHub token or app id/secret
21 |
22 | The docs in the reference section of the AMP Project site are not part of this repository; instead they are read from the [amphtml GitHub repository](https://github.com/ampproject/amphtml) "source of truth." When building the site these docs are fetched via GitHub.
23 |
24 | Due to GitHub quotas this fetching will quickly fail unless additional information is provided in the request. This can be either a personal access token or an application id/secret.
25 |
26 | #### Personal access token
27 |
28 | 1. Request a GitHub [personal access token](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Since the docs are fetched from a public repository you only need to select the "public_repo" scope when creating the token. (It's a good practice to limit the token to the scope you need.)
29 | 2. In your shell export the generated personal access token as `AMP_DOC_TOKEN`
30 |
31 | #### Application client id and secret
32 |
33 | If you prefer not to use a personal access token, you can also create a GitHub application and use its id and secret.
34 |
35 | 1. Register for a [GitHub application](https://github.com/settings/applications/new)
36 | 2. In your shell export the application client id as `AMP_DOC_ID` and the client secret as `AMP_DOC_SECRET`
37 |
38 | ### Build
39 |
40 | ```sh
41 | $ grow build
42 | ```
43 |
44 | This will generate a static, complete build of the site into the **build* folder.
45 |
46 |
47 | ### Develop
48 |
49 | Note: Be sure to run `grow build` at least once to pull in reference docs before running the following command.
50 |
51 | ```sh
52 | $ grow run
53 | ```
54 |
55 | You can now open http://localhost:8080/ and continue working on the source files, then reload the page to see changes appear.
56 |
57 | Support
58 | -------
59 |
60 | If you've found an error or inconsistency, please file an issue:
61 | https://github.com/ampproject/docs/issues
62 |
63 | Patches are encouraged, and may be submitted by forking this project and
64 | submitting a pull request through GitHub.
65 |
66 | License
67 | -------
68 |
69 | All image and audio files except in folders "source/img/partners",
70 | "source/img/publishers" and "source/img/quotes" (including *.png, *.jpg, *.svg,
71 | *.mp3, *.wav and *.ogg) are licensed under the CC-BY-NC license. Images in the
72 | excluded folders are not licensed.
73 |
74 | All other files are licensed under the Apache 2 license.
75 |
76 | - - -
77 |
78 | Copyright 2015 Google, Inc.
79 |
80 | Licensed to the Apache Software Foundation (ASF) under one or more contributor
81 | license agreements. See the NOTICE file distributed with this work for
82 | additional information regarding copyright ownership. The ASF licenses this
83 | file to you under the Apache License, Version 2.0 (the "License"); you may not
84 | use this file except in compliance with the License. You may obtain a copy of
85 | the License at
86 |
87 | http://www.apache.org/licenses/LICENSE-2.0
88 |
89 | Unless required by applicable law or agreed to in writing, software
90 | distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
91 | WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
92 | License for the specific language governing permissions and limitations under
93 | the License.
94 |
```
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
```markdown
1 | # How to become a contributor and submit your own code
2 |
3 | ## Contributor License Agreements
4 |
5 | We'd love to accept your patches and doc suggestions! Before we can take them, we
6 | have to jump a couple of legal hurdles.
7 |
8 | Please fill out either the individual or corporate Contributor License Agreement
9 | (CLA).
10 |
11 | * If you are an individual writing original source code and you're sure you
12 | own the intellectual property, then you'll need to sign an [individual CLA]
13 | (https://developers.google.com/open-source/cla/individual).
14 | * If you work for a company that wants to allow you to contribute your work,
15 | then you'll need to sign a [corporate CLA]
16 | (https://developers.google.com/open-source/cla/corporate).
17 |
18 | Follow either of the two links above to access the appropriate CLA and
19 | instructions for how to sign and return it. Once we receive it, we'll be able to
20 | accept your pull requests.
21 |
22 | ## Contributing A Patch
23 |
24 | 1. Submit an issue describing your proposed change to the repo in question.
25 | 1. The repo owner will respond to your issue promptly.
26 | 1. If your proposed change is accepted, and you haven't already done so, sign a
27 | Contributor License Agreement (see details above).
28 | 1. Fork the desired repo, develop and test your code changes.
29 | 1. Ensure that your code adheres to the existing style in the sample to which
30 | you are contributing. Refer to the
31 | [Google Cloud Platform Samples Style Guide]
32 | (https://github.com/GoogleCloudPlatform/Template/wiki/style.html) for the
33 | recommended coding standards for this organization.
34 | 1. Ensure that your code has an appropriate set of unit tests which all pass.
35 | 1. Submit a pull request.
36 |
37 |
```
--------------------------------------------------------------------------------
/views/blank.html:
--------------------------------------------------------------------------------
```html
1 | {{doc.html|render|safe}}
```
--------------------------------------------------------------------------------
/content/includes/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title: Partial templates
2 |
```
--------------------------------------------------------------------------------
/pwa/google7199ce9da1ad191b.html:
--------------------------------------------------------------------------------
```html
1 | google-site-verification: google7199ce9da1ad191b.html
```
--------------------------------------------------------------------------------
/content/docs/contribute/github.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: GitHub
3 | $order: 3
4 | goto: https://github.com/ampproject/amphtml
5 | ---
6 |
```
--------------------------------------------------------------------------------
/content/pages/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | path: /{base}/
2 | view: /views/base.html
3 |
4 | localization:
5 | path: /{locale}/{base}/
```
--------------------------------------------------------------------------------
/assets/sass/pages/_list.scss:
--------------------------------------------------------------------------------
```scss
1 | .list {
2 | .title {
3 | text-align: center;
4 | }
5 |
6 | .event-meta {
7 | margin: 0;
8 | }
9 | }
10 |
```
--------------------------------------------------------------------------------
/content/docs/guides/debug.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Debug
3 | $order: 1
4 | goto_internal: /content/docs/guides/debug/validate.md
5 | ---
6 |
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | path: /amp-conf-2017/{base}/
2 | view: /views/base.html
3 | $localization:
4 | locales:
5 | - en
6 |
```
--------------------------------------------------------------------------------
/content/docs/contribute/file-a-bug.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: File a bug
3 | $order: 2
4 | goto: https://github.com/ampproject/amphtml/issues/new
5 | ---
6 |
```
--------------------------------------------------------------------------------
/content/docs/getting-started.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Getting Started
3 | $order: 0
4 | goto: /content/docs/get_started/general/create.md
5 | ---
6 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Deploy
3 | $order: 2
4 | goto_internal: /content/docs/guides/deploy/analytics_amp.md
5 | ---
6 |
```
--------------------------------------------------------------------------------
/content/includes/doc.yaml:
--------------------------------------------------------------------------------
```yaml
1 | cta:
2 | title@: Need Dev Support?
3 | link_text@: Visit our FAQ
4 | link_url: /content/support/faqs.md
```
--------------------------------------------------------------------------------
/content/includes/lists.yaml:
--------------------------------------------------------------------------------
```yaml
1 | past_event:
2 | title@: Past Events
3 |
4 | blog:
5 | title@: AMP Blog
6 |
7 | roadmap:
8 | title@: AMP Roadmap
9 |
10 | share@: Share
```
--------------------------------------------------------------------------------
/content/support/developer/mailing-list.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Support Forum
3 | $order: 1
4 | goto: https://groups.google.com/forum/#!forum/amphtml-discuss
5 | group: 0
6 | ---
7 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Author / Develop
3 | $order: 0
4 | goto_internal: /content/docs/guides/author_develop/responsive_amp.md
5 | ---
6 |
```
--------------------------------------------------------------------------------
/content/learn/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Learn
2 | $path: /learn/{base}/
3 | $view: /views/section_page.html
4 | $localization:
5 | path: /{locale}/learn/{base}/
```
--------------------------------------------------------------------------------
/content/support/developer/stack-overflow.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Stack Overflow Community
3 | $order: 0
4 | goto: https://stackoverflow.com/questions/tagged/amp-html
5 | group: 0
6 | ---
7 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $path: /docs/guides/ads/{base}.html
2 | $view: /views/doc.html
3 | $localization:
4 | path: /{locale}/docs/guides/ads/{base}.html
5 |
6 |
```
--------------------------------------------------------------------------------
/content/support/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Support
2 | $path: /support/{base}/
3 | $view: /views/section_page.html
4 | $localization:
5 | path: /{locale}/support/{base}/
```
--------------------------------------------------------------------------------
/content/support/developer/platform-bug.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Report a platform bug on GitHub
3 | $order: 3
4 | goto: https://github.com/ampproject/amphtml/issues/new
5 | group: 1
6 | ---
7 |
```
--------------------------------------------------------------------------------
/content/docs/guides.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Guides
3 | $order: 2
4 | $parent: /content/docs/build.md
5 | $view: /views/grid_page.html
6 |
7 | class: bg-triangle-secondary
8 | ---
9 |
```
--------------------------------------------------------------------------------
/content/latest/blog/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Blog
2 | $path: /latest/blog/{base}/
3 | $view: /views/blog_detail.html
4 | $localization:
5 | path: /{locale}/latest/blog/{base}/
```
--------------------------------------------------------------------------------
/content/support/developer/documentation-bug.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Report a documentation bug on GitHub
3 | $order: 4
4 | goto: https://github.com/ampproject/docs/issues/new
5 | group: 1
6 | ---
7 |
```
--------------------------------------------------------------------------------
/content/docs/reference.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Reference
3 | $order: 3
4 | $parent: /content/docs/build.md
5 | $view: /views/grid_page.html
6 |
7 | class: bg-triangle-secondary
8 | ---
9 |
```
--------------------------------------------------------------------------------
/content/docs/contribute.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Contribute
3 | $order: 5
4 | $parent: /content/docs/build.md
5 | $view: /views/grid_page.html
6 |
7 | class: bg-triangle-secondary
8 | ---
9 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $path: /docs/guides/analytics/{base}.html
2 | $view: /views/doc.html
3 | $localization:
4 | path: /{locale}/docs/guides/analytics/{base}.html
5 |
```
--------------------------------------------------------------------------------
/content/support/faqs/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: FAQs
2 | $path: /support/faqs/{base}.html
3 | $view: /views/section_page.html
4 | $localization:
5 | path: /{locale}/support/faqs/{base}.html
6 |
```
--------------------------------------------------------------------------------
/assets/img/hamburger.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -6 24 24"><path fill="%234A4A4A" d="M0 12h18v-2H0v2M0 7h18V5H0v2M0 0v2h18V0H0"/></svg>
```
--------------------------------------------------------------------------------
/content/docs/guides/debug/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Debug
2 | $path: /docs/guides/debug/{base}.html
3 | $localization:
4 | path: /{locale}/docs/guides/debug/{base}.html
5 | $view: /views/doc.html
6 |
```
--------------------------------------------------------------------------------
/content/docs/guides/embed/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Embed
2 | $path: /docs/guides/embed/{base}.html
3 | $localization:
4 | path: /{locale}/docs/guides/embed/{base}.html
5 | $view: /views/doc.html
6 |
```
--------------------------------------------------------------------------------
/content/includes/amp-iframe.md:
--------------------------------------------------------------------------------
```markdown
1 | [sourcecode:html]
2 | <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
3 | [/sourcecode]
4 |
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Deploy
2 | $path: /docs/guides/deploy/{base}.html
3 | $localization:
4 | path: /{locale}/docs/guides/deploy/{base}.html
5 | $view: /views/doc.html
6 |
```
--------------------------------------------------------------------------------
/content/learn/case-studies/category/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Case Studies
2 | $path: /case-studies/{base}/
3 | $view: /views/about-casestudies.html
4 | $localization:
5 | path: /{locale}/case-studies/{base}/
6 |
```
--------------------------------------------------------------------------------
/content/support/vendor.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Vendor Support
3 | $hidden: true
4 | $order: 3
5 | $parent: /content/support/support.md
6 | $localization:
7 | path: /{locale}/support/{base}/
8 | ---
9 |
```
--------------------------------------------------------------------------------
/content/support/platform.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Platform Support
3 | $order: 1
4 | $hidden: true
5 | $parent: /content/support/support.md
6 | $localization:
7 | path: /{locale}/support/{base}/
8 | ---
9 |
```
--------------------------------------------------------------------------------
/content/learn/case-studies/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $path: /case-studies/{base}/
2 | $view: /views/case-study.html
3 | $localization:
4 | path: /{locale}/case-studies/{base}/
5 | stylesheet: pages/case-study.css
6 |
```
--------------------------------------------------------------------------------
/content/docs/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Docs
2 | $path: /docs/{base}/
3 | $view: /views/doc.html
4 | $localization:
5 | path: /{locale}/docs/{base}/
6 | build_root: true
7 | index_path: /content/docs/build.md
```
--------------------------------------------------------------------------------
/content/learn/who/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Who Uses AMP
2 | $path: /learn/who-uses-amp/{base}/
3 | $view: /views/about-who-vertical.html
4 | $localization:
5 | path: /{locale}/learn/who-uses-amp/{base}/
6 |
```
--------------------------------------------------------------------------------
/content/docs/build.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Docs
3 | $order: 0
4 | $hidden: true
5 | $path: /docs/
6 | $localization:
7 | path: /{locale}/docs/
8 | $view: /views/grid_page.html
9 |
10 | class: bg-triangle-primary
11 | ---
12 |
```
--------------------------------------------------------------------------------
/content/latest/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: The Latest
2 | $path: /latest/{base}/
3 | $view: /views/list_page.html
4 | $localization:
5 | path: /{locale}/latest/{base}/
6 | index_path: /content/latest/latest.html
7 |
```
--------------------------------------------------------------------------------
/content/support/developer/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Developer Support
2 | $path: /support/developer/{base}.html
3 | $view: /views/section_page.html
4 | $localization:
5 | path: /{locale}/support/developer/{base}.html
6 |
```
--------------------------------------------------------------------------------
/assets/sass/pages/_faqs.scss:
--------------------------------------------------------------------------------
```scss
1 | .faqs {
2 | .wrap amp-accordion {
3 | margin: 100px 0;
4 | }
5 |
6 | @include max-screen($mobile-breakpoint) {
7 | .wrap amp-accordion {
8 | margin: 50px 0;
9 | }
10 | }
11 | }
12 |
```
--------------------------------------------------------------------------------
/content/support/support.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Support
3 | $order: 0
4 | $hidden: true
5 | $path: /support/
6 | $view: /views/grid_page.html
7 | $localization:
8 | path: /{locale}/support/
9 |
10 | class: bg-triangle-primary
11 | ---
12 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Author / Develop
2 | $path: /docs/guides/author-develop/{base}.html
3 | $localization:
4 | path: /{locale}/docs/guides/author-develop/{base}.html
5 | $view: /views/doc.html
6 |
```
--------------------------------------------------------------------------------
/content/docs/blank.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $view: /views/blank.html
3 | $hidden: true
4 | ---
5 | <!DOCTYPE html>
6 | <html ⚡{% if doc.locale.is_rtl %} dir="rtl" lang="ar"{% endif %}>
7 | {% include "/views/partials/head.html" %}
```
--------------------------------------------------------------------------------
/content/docs/tutorials.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Tutorials
3 | $order: 1
4 | $parent: /content/docs/build.md
5 | $view: /views/grid_page.html
6 |
7 | collectionPath: /content/docs/get_started
8 | class: bg-triangle-secondary
9 | ---
10 |
```
--------------------------------------------------------------------------------
/content/support/faqs.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: FAQs
3 | $order: 0
4 | $parent: /content/support/support.md
5 | $localization:
6 | path: /{locale}/support/{base}/
7 | $view: /views/grid_page.html
8 |
9 | class: bg-triangle-secondary
10 | ---
11 |
```
--------------------------------------------------------------------------------
/content/docs/reference/components/media/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/reference/components/media/{base}.html
3 | $localization:
4 | path: /{locale}/docs/reference/components/media/{base}.html
5 | $title@: Media - AMP components
6 |
```
--------------------------------------------------------------------------------
/content/docs/reference/components/layout/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/reference/components/layout/{base}.html
3 | $localization:
4 | path: /{locale}/docs/reference/components/layout/{base}.html
5 | $title@: Layout - AMP components
6 |
```
--------------------------------------------------------------------------------
/content/docs/reference/components/social/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/reference/components/social/{base}.html
3 | $localization:
4 | path: /{locale}/docs/reference/components/social/{base}.html
5 | $title@: Social - AMP components
6 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/guides/author-develop/responsive/{base}.html
3 | $localization:
4 | path: /{locale}/docs/guides/author-develop/responsive/{base}.html
5 | $title@: Styling & Layout
```
--------------------------------------------------------------------------------
/content/docs/reference/components/ads-analytics/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/reference/components/ads/{base}.html
3 | $localization:
4 | path: /{locale}/docs/reference/components/ads/{base}.html
5 | $title@: Ads & Analytics - AMP components
6 |
```
--------------------------------------------------------------------------------
/content/support/developer/slack.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Slack Channel
3 | $order: 2
4 | goto: https://docs.google.com/a/google.com/forms/d/e/1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877
5 | group: 0
6 | ---
7 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $path: /docs/get_started/login_requiring/{base}.html
2 | $view: /views/doc.html
3 | $localization:
4 | path: /{locale}/docs/get_started/login_requiring/{base}.html
5 | $title@: Create a login-requiring AMP page
6 |
```
--------------------------------------------------------------------------------
/content/docs/reference/components/dynamic-content/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/reference/components/dynamic/{base}.html
3 | $localization:
4 | path: /{locale}/docs/reference/components/dynamic/{base}.html
5 | $title@: Dynamic Content - AMP components
6 |
```
--------------------------------------------------------------------------------
/content/docs/reference/components/presentation/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/reference/components/presentation/{base}.html
3 | $localization:
4 | path: /{locale}/docs/reference/components/presentation/{base}.html
5 | $title@: Presentation - AMP components
6 |
```
--------------------------------------------------------------------------------
/assets/img/nav/back_arrow.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" width="6.05" height="10.71" viewBox="0 0 6.05 10.71"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M5.7.35L.71 5.44l4.99 4.91" data-name="Layer 1"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/symbols/return.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" width="6.05" height="10.71" viewBox="0 0 6.05 10.71"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M5.7.35L.71 5.44l4.99 4.91" data-name="Layer 1"/></svg>
```
--------------------------------------------------------------------------------
/pwa/service-worker.js:
--------------------------------------------------------------------------------
```javascript
1 | 'use strict';
2 |
3 | self.addEventListener('install', () => {
4 | self.skipWaiting();
5 | });
6 |
7 | self.addEventListener('activate', () => {
8 | // immediately claim the currently connected clients
9 | self.clients.claim();
10 | });
11 |
```
--------------------------------------------------------------------------------
/views/partials/search.html:
--------------------------------------------------------------------------------
```html
1 | <form action="//www.google.com/search" method="get" class="searchbar" target="_top">
2 | <input class="query" name="q" type="text">
3 | <input name="as_sitesearch" type="hidden" value="www.ampproject.org">
4 | <button name="search" type="submit"></button>
5 | </form>
```
--------------------------------------------------------------------------------
/content/support/developer.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Developer Support
3 | $order: 2
4 | $parent: /content/support/support.md
5 | $localization:
6 | path: /{locale}/support/{base}/
7 | $view: /views/grid_page.html
8 |
9 | class: bg-triangle-secondary
10 | sections:
11 | - title@: Community Resources
12 | - title@: Send Feedback
13 | ---
14 |
```
--------------------------------------------------------------------------------
/assets/sass/_content-section.scss:
--------------------------------------------------------------------------------
```scss
1 | // styles for support and other pages - move later
2 |
3 | .post-title {
4 | margin: 0 0 20px 0;
5 | text-align: center;
6 | }
7 |
8 | .post-content {
9 | @extend %text-small;
10 |
11 | a {
12 | @extend %link-inherit;
13 | }
14 | }
15 |
16 | @include max-screen($mobile-breakpoint) {
17 | .post-title {
18 | text-align: left;
19 | }
20 | }
21 |
```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "AMPProject.org",
3 | "private": true,
4 | "dependencies": {
5 | "feedparser": "*",
6 | "gulp": "*",
7 | "gulp-autoprefixer": "*",
8 | "gulp-plumber": "*",
9 | "gulp-sass": "*",
10 | "gulp-svg-sprite": "^1.3.6",
11 | "moment": "*",
12 | "octonode": "*",
13 | "request": "*"
14 | }
15 | }
16 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/template.scss:
--------------------------------------------------------------------------------
```scss
1 | $icons: (
2 | sprite: (width: {{spriteWidth}}px, height: {{spriteHeight}}px, svgPath: '/static/img/sprite.svg'),
3 | {{#shapes}}
4 | {{base}}: (width: {{width.inner}}px, height: {{height.inner}}px, backgroundX: {{position.absolute.x}}px, backgroundY: {{position.absolute.y}}px),
5 | {{/shapes}});
```
--------------------------------------------------------------------------------
/assets/img/ic_open_in_new_black.svg:
--------------------------------------------------------------------------------
```
1 | <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0 0h24v24H0z" fill="none"/>
3 | <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
4 | </svg>
```
--------------------------------------------------------------------------------
/assets/img/ic_open_in_new_white.svg:
--------------------------------------------------------------------------------
```
1 | <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0 0h24v24H0z" fill="none"/>
3 | <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
4 | </svg>
```
--------------------------------------------------------------------------------
/assets/sass/_animations.scss:
--------------------------------------------------------------------------------
```scss
1 | @keyframes cta-line {
2 | 0% {
3 | transform-origin: 100% 50%;
4 | transform: scaleX(1);
5 | }
6 |
7 | 45% {
8 | transform-origin: 100% 50%;
9 | transform: scaleX(0);
10 | }
11 |
12 | 55% {
13 | transform-origin: 0% 50%;
14 | transform: scaleX(0);
15 | }
16 |
17 | 100% {
18 | transform-origin: 0% 50%;
19 | transform: scaleX(1);
20 | }
21 | }
```
--------------------------------------------------------------------------------
/content/learn/case-studies/category/publishers.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Publishers
3 | $titles:
4 | page@: Success stories of the domains publishing AMP pages
5 | $order: 1
6 | $parent: /content/learn/case-studies.html
7 | class: case-studies bg-triangle-secondary
8 |
9 | cta:
10 | title@: Create your first AMP page
11 | link_text@: Start building now
12 | link_url: /content/docs/get_started/create.md
13 | ---
14 |
```
--------------------------------------------------------------------------------
/content/learn/case-studies/category/advertisers.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Advertisers
3 | $titles:
4 | page@: Success stories of the domains publishing AMP pages
5 | $order: 2
6 | $parent: /content/learn/case-studies.html
7 | class: case-studies bg-triangle-secondary
8 |
9 | cta:
10 | title@: Create your first AMP page
11 | link_text@: Start building now
12 | link_url: /content/docs/get_started/create.md
13 | ---
14 |
```
--------------------------------------------------------------------------------
/views/partials/faq-accordion.html:
--------------------------------------------------------------------------------
```html
1 | <amp-accordion>
2 | {% for question in doc.faq %}
3 | <section>
4 | <header class="accordion-header">
5 | <h4 class="accordion-title">{{_(question.title)}}</h4>
6 | </header>
7 | <div class="accordion-content">
8 | {{_(question.answer)|markdown|safe}}
9 | </div>
10 | </section>
11 | {% endfor %}
12 | </amp-accordion>
13 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/caret-right.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.12 11.88"><defs><style>.cls-1{fill:none;stroke:#464646;stroke-miterlimit:10;opacity:0.3;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polyline class="cls-1" points="0.37 11.55 5.45 5.94 0.37 0.34"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/symbols/carat.svg:
--------------------------------------------------------------------------------
```
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="15.53" height="8.3" viewBox="0 0 15.53 8.3"><title>carat</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1-2"><polyline points="15.27 8.03 7.62 0.53 0.27 8.03" style="fill:none;stroke:#1c79be;stroke-miterlimit:10;stroke-width:0.75px"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/about-who.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | // @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_nav.scss';
11 | @import '_lang_switcher.scss';
12 | @import '_cards.scss';
13 | @import '_search.scss';
14 | @import '_sidebar.scss';
15 | @import '_footer.scss';
16 |
17 | @import 'pages/_about-who.scss';
18 |
```
--------------------------------------------------------------------------------
/content/learn/case-studies.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title@: Case Studies
3 | $titles:
4 | page@: Success stories of the domains publishing AMP pages
5 | $order: 2
6 | $path: /case-studies/
7 | $parent: /content/learn/overview.yaml
8 | $view: /views/about-casestudies.html
9 | class: case-studies bg-triangle-secondary
10 |
11 | cta:
12 | title@: Create your first AMP page
13 | link_text@: Start building now
14 | link_url: /content/docs/get_started/create.md
15 | ---
16 |
```
--------------------------------------------------------------------------------
/assets/sass/design-principles.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_bg-triangle.scss';
11 | @import '_nav.scss';
12 | @import '_lang_switcher.scss';
13 | @import '_search.scss';
14 | @import '_sidebar.scss';
15 | @import '_footer.scss';
16 |
17 | @import 'pages/_design-principles.scss';
18 |
```
--------------------------------------------------------------------------------
/content/docs/guides/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Guides
2 | $path: /docs/guides/{base}.html
3 | $view: /views/doc.html
4 | $localization:
5 | path: /{locale}/docs/guides/{base}.html
6 | index_path: /content/docs/guides.md
7 |
8 | navigation:
9 | prev:
10 | section: true
11 | title@: Tutorials
12 | href: /content/docs/get_started/general/create.md
13 | next:
14 | section: true
15 | title@: Reference
16 | href: /content/docs/reference/components.md
17 |
```
--------------------------------------------------------------------------------
/content/docs/contribute/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Contribute
2 | $path: /docs/contribute/{base}/
3 | $view: /views/doc.html
4 | $localization:
5 | path: /{locale}/docs/contribute/{base}/
6 | index_path: /content/docs/contribute.md
7 |
8 | navigation:
9 | prev:
10 | section: true
11 | title@: Reference
12 | href: /content/docs/reference/components.md
13 | next:
14 | section: true
15 | title@: Tutorials
16 | href: /content/docs/get_started/general/create.md
```
--------------------------------------------------------------------------------
/assets/img/arrow.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.22 8.18"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;}.cls-2{fill:#fff;}</style></defs><title>arrow</title><g id="Layer_2" data-name="Layer 2"><g id="BG"><line class="cls-1" y1="4.09" x2="8.14" y2="4.09"/><polygon class="cls-2" points="4.83 8.18 4.14 7.45 7.75 4.09 4.14 0.73 4.83 0 9.22 4.09 4.83 8.18"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/reference/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Reference
2 | $path: /docs/reference/{base}.html
3 | $view: /views/doc.html
4 | $localization:
5 | path: /{locale}/docs/reference/{base}.html
6 | index_path: /content/docs/reference.md
7 |
8 | navigation:
9 | prev:
10 | section: true
11 | title@: Guides
12 | href: /content/docs/guides/author_develop/responsive_amp.md
13 | next:
14 | section: true
15 | title@: Contribute
16 | href: /content/docs/contribute/contribute.md
17 |
```
--------------------------------------------------------------------------------
/assets/img/nav/next_level.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5.8" height="10.53" viewBox="0 0 5.8 10.53"><defs><symbol id="a" data-name="New Symbol" viewBox="0 0 5.8 10.53"><path fill="none" stroke="#1c79c4" stroke-miterlimit="10" stroke-width=".75" d="M.27 10.27l5-5.1-5-4.9"/></symbol></defs><use width="5.8" height="10.53" xlink:href="#a" data-name="Layer 2"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/arrow-blue.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.22 8.18"><defs><style>.cls-1{fill:none;stroke:#1c79c0;stroke-miterlimit:10;}.cls-2{fill:#1c79c0;}</style></defs><title>arrow</title><g id="Layer_2" data-name="Layer 2"><g id="BG"><line class="cls-1" y1="4.09" x2="8.14" y2="4.09"/><polygon class="cls-2" points="4.83 8.18 4.14 7.45 7.75 4.09 4.14 0.73 4.83 0 9.22 4.09 4.83 8.18"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/nav/close.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.71" height="15.71" viewBox="0 0 15.71 15.71"><defs><symbol id="a" data-name="New Symbol 1" viewBox="0 0 15.71 15.71"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M15.35.35l-15 15M.43.43l14.85 14.85"/></symbol></defs><use width="15.71" height="15.71" xlink:href="#a" data-name="Layer 2"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/symbols/close.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.71" height="15.71" viewBox="0 0 15.71 15.71"><defs><symbol id="a" data-name="New Symbol 1" viewBox="0 0 15.71 15.71"><path fill="none" stroke="#ccc" stroke-miterlimit="10" d="M15.35.35l-15 15M.43.43l14.85 14.85"/></symbol></defs><use width="15.71" height="15.71" xlink:href="#a" data-name="Layer 2"/></svg>
```
--------------------------------------------------------------------------------
/assets/img/symbols/share-close.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.93 14.93"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.32px;}</style></defs><title>close</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="0.47" y1="0.47" x2="14.47" y2="14.47"/><line class="cls-1" x1="14.47" y1="0.47" x2="0.47" y2="14.47"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_large-cta.scss:
--------------------------------------------------------------------------------
```scss
1 | .large-cta {
2 | background: $gradient-anglebold;
3 | padding: 100px 0;
4 | position: relative;
5 | text-align: center;
6 |
7 | .large-cta-lines {
8 | position: absolute;
9 |
10 | &.left {
11 | bottom: -30%;
12 | left: -10%;
13 | }
14 |
15 | &.right {
16 | right: -5%;
17 | top: -30%;
18 | }
19 | }
20 |
21 | h1, p {
22 | color: $color-white;
23 | margin: 0 auto 50px;
24 | max-width: 600px;
25 | }
26 |
27 | h1 + p {
28 | margin-top: -30px;
29 | }
30 | }
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $path: /docs/get_started/create/{base}.html
2 | $view: /views/doc.html
3 | $localization:
4 | path: /{locale}/docs/get_started/create/{base}.html
5 | $title@: Create Your First AMP Page
6 |
7 | navigation:
8 | prev:
9 | section: true
10 | title@: Contribute
11 | href: /content/docs/contribute/contribute.md
12 | next:
13 | subtitle@: Next Tutorial
14 | title@: Logins with AMP
15 | href: /content/docs/get_started/login_requiring.md
16 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Crea tu primera página AMP
3 | ---
4 |
5 | ¿No estás seguro de cómo empezar? En este tutorial, aprenderás a crear una página AMP HTML básica, organizarla, validar su cumplimiento con AMP y, finalmente, prepararla para su publicación y distribución.
6 |
7 | {% include "/views/partials/sub_nav.html" %}
8 |
9 | <a class="button go-button" href="/es/docs/get_started/create/basic_markup.html">Continuar con el paso 1</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Tutorials
2 | $view: /views/doc.html
3 | $path: /docs/get_started/{base}.html
4 | $localization:
5 | path: /{locale}/docs/get_started/{base}.html
6 | index_path: /content/docs/getting-started.md
7 |
8 | navigation:
9 | prev:
10 | section: true
11 | title@: Contribute
12 | href: /content/docs/contribute/contribute.md
13 | next:
14 | section: true
15 | title@: Guides
16 | href: /content/docs/guides/author_develop/responsive_amp.md
17 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Tworzenie pierwszej strony AMP
3 | ---
4 |
5 | Nie wiesz jak zacząć? W tym samouczku dowiesz się, jak utworzyć podstawową stronę AMP HTML, jak ją przygotować, jak sprawdzić jej zgodność z AMP i na koniec jak ją przygotować do publikowania i rozpowszechniania.
6 |
7 | {% include "/views/partials/sub_nav.html" %}
8 |
9 | <a class="button go-button" href="/pl/docs/get_started/create/basic_markup.html">Przejdź do kroku 1</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Criar sua primeira página AMP
3 | ---
4 |
5 | Não sabe como começar? Neste tutorial, você aprenderá a criar uma página básica em AMP HTML, como lançá-la e validar sua conformidade com o AMP e, finalmente, como prepará-la para publicação e distribuição.
6 |
7 | {% include "/views/partials/sub_nav.html" %}
8 |
9 | <a class="button go-button" href="/pt_br/docs/get_started/create/basic_markup.html">Continuar para a etapa 1</a>
10 |
```
--------------------------------------------------------------------------------
/assets/sass/about-how.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_bg-triangle.scss';
11 | @import '_nav.scss';
12 | @import '_lang_switcher.scss';
13 | @import '_syntax_highlighting.scss';
14 | @import '_points.scss';
15 | @import '_search.scss';
16 | @import '_sidebar.scss';
17 | @import '_footer.scss';
18 |
19 | @import 'pages/_about-how.scss';
20 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Create Your First AMP Page
3 | $order: 0
4 | numbered: 1
5 | ---
6 |
7 | Not sure how to get started? In this tutorial, you’ll learn how to create a basic AMP HTML page, how to stage it and validate that it’s AMP compliant, and finally how to get it ready for publication and distribution.
8 |
9 | {% include "/views/partials/sub_nav.html" %}
10 |
11 | <a class="button go-button" href="/docs/get_started/create/basic_markup.html">Continue to Step 1</a>
12 |
```
--------------------------------------------------------------------------------
/assets/sass/about-overview.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_bg-triangle.scss';
11 | @import '_nav.scss';
12 | @import '_lang_switcher.scss';
13 | @import '_syntax_highlighting.scss';
14 | @import '_accordions.scss';
15 | @import '_search.scss';
16 | @import '_sidebar.scss';
17 | @import '_footer.scss';
18 |
19 | @import 'pages/_about-overview.scss';
20 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Crea la tua prima pagina AMP
3 | ---
4 |
5 | Non sai bene come iniziare? Con questo tutorial scoprirai come creare una pagina HTML AMP di base, come prepararla e convalidarla in modo da renderla conforme al formato AMP e infine come predisporla per la pubblicazione e la distribuzione.
6 |
7 | {% include "/views/partials/sub_nav.html" %}
8 |
9 | <a class="button go-button" href="/it/docs/get_started/create/basic_markup.html">Vai al Passaggio 1</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Créer votre première page AMP
3 | ---
4 |
5 | Vous ne savez pas par où commencer ? Dans ce didacticiel, vous allez découvrir comment créer une page AMP HTML de base, comment l'organiser et vérifier sa conformité AMP et enfin, comment la préparer pour sa publication et sa distribution.
6 |
7 | {% include "/views/partials/sub_nav.html" %}
8 |
9 | <a class="button go-button" href="/fr/docs/get_started/create/basic_markup.html">Continuer à l'Étape 1</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/summary.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Summary
3 | $order: 3
4 | ---
5 |
6 | In this tutorial, we explored how to combine `amp-access` and `amp-form` to create a comment section that requires a login.
7 |
8 | To learn more, visit the following resources:
9 |
10 | - [amp-access](https://www.ampproject.org/docs/reference/components/amp-access)
11 | - [amp-form](https://www.ampproject.org/docs/reference/components/amp-form)
12 | - ["Comment Section" Example](https://ampbyexample.com/samples_templates/comment_section/)
13 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Membuat Halaman AMP Pertama Anda
3 | ---
4 |
5 | Tidak tahu cara memulainya? Dalam tutorial ini, Anda akan mempelajari cara membuat halaman AMP HTML, cara menggelarnya, dan memvalidasi bahwa halaman tersebut sesuai dengan AMP, dan terakhir cara menyiapkannya untuk dipublikasikan dan didistribusikan.
6 |
7 | {% include "/views/partials/sub_nav.html" %}
8 |
9 | <a class="button go-button" href="/id/docs/get_started/create/basic_markup.html">Lanjutkan ke Langkah 1</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Ihre erste AMP-Seite
3 | ---
4 |
5 | Sie wissen nicht genau, wie Sie anfangen sollen? In dieser Anleitung erfahren Sie, wie Sie eine einfache AMP-HTML-Seite erstellen, sie testen, ihre Übereinstimmung mit den AMP-Anforderungen überprüfen und sie schließlich für die Veröffentlichung und Bereitstellung vorbereiten.
6 |
7 | {% include "/views/partials/sub_nav.html" %}
8 |
9 | <a class="button go-button" href="/de/docs/get_started/create/basic_markup.html">Weiter mit Schritt 1</a>
10 |
```
--------------------------------------------------------------------------------
/views/list_page.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 | <div class="container sm">
10 | <div class="content">
11 |
12 | {{doc.html|render|safe}}
13 |
14 | </div>
15 | </div>
16 |
17 | {% if doc.cta %}
18 | {% with cta = doc.cta %}
19 | {% include "/views/partials/footer-cta.html" %}
20 | {% endwith %}
21 | {% endif %}
22 |
23 | {% include "/views/partials/footer.html" %}
24 |
25 | {% endblock %}
26 |
```
--------------------------------------------------------------------------------
/assets/sass/about-who-vertical.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_bg-triangle.scss';
11 | @import '_nav.scss';
12 | @import '_lang_switcher.scss';
13 | @import '_points.scss';
14 | @import '_large-cta.scss';
15 |
16 | @import '_carousel.scss';
17 | @import '_cards.scss';
18 | @import '_search.scss';
19 | @import '_sidebar.scss';
20 | @import '_footer.scss';
21 |
22 | @import 'pages/_about-who-vertical.scss';
23 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/logo-blue-standalone.svg:
--------------------------------------------------------------------------------
```
1 | <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><title>Slice 1</title><path d="M20.004 13.627l-6.25 10.47h-1.13l1.118-6.823-3.466.005h-.05c-.31 0-.564-.256-.564-.57 0-.134.125-.363.125-.363l6.228-10.46 1.15.006-1.146 6.833 3.483-.004h.055c.312 0 .566.255.566.57 0 .127-.05.24-.12.334zM14.896 0C6.67 0 0 6.716 0 15c0 8.285 6.67 15 14.896 15 8.228 0 14.896-6.715 14.896-15 0-8.284-6.668-15-14.896-15z" fill="#0379C4" fill-rule="evenodd"/></svg>
```
--------------------------------------------------------------------------------
/assets/sass/blog.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_content.scss';
11 | @import '_nav.scss';
12 | @import '_lang_switcher.scss';
13 | @import '_share.scss';
14 |
15 | @import '_cards.scss';
16 | @import '_search.scss';
17 | @import '_sidebar.scss';
18 | @import '_footer.scss';
19 |
20 | @import 'pages/_roadmap.scss';
21 | @import 'pages/_post-detail.scss';
22 | @import '_post-item.scss';
23 | @import '_bg-triangle.scss';
24 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/publish.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Final Steps Before Publishing
3 | $order: 5
4 | ---
5 |
6 | Congrats! You've tested your page locally and fixed all validation errors, which means your first AMP page is ready to ship.
7 |
8 | Get acquainted with how AMP works and how all the elements behave by digging through the left hand navigation, and for more general information about tools that can help you get your content production ready, head over to [Getting Started With Your Development Workflow](https://developers.google.com/web/tools/setup/).
9 |
```
--------------------------------------------------------------------------------
/scripts/import_docs.json:
--------------------------------------------------------------------------------
```json
1 | [
2 | {
3 | "title": "Design Principles",
4 | "order": 3,
5 | "from": "contributing/DESIGN_PRINCIPLES.md",
6 | "to": "learn/design-principles.md",
7 | "toc": true
8 | },
9 | {
10 | "title": "Open Source Governance",
11 | "order": 4,
12 | "from": "GOVERNANCE.md",
13 | "to": "docs/contribute/governance.md"
14 | },
15 | {
16 | "title": "AMP HTML Specification",
17 | "order": 2,
18 | "from": "spec/amp-html-format.md",
19 | "to": "docs/reference/spec.md"
20 | }
21 | ]
```
--------------------------------------------------------------------------------
/assets/sass/_lightbox.scss:
--------------------------------------------------------------------------------
```scss
1 | .lightbox {
2 | background-color: rgba($color-black-95, .9);
3 |
4 | &__container {
5 | position: relative;
6 | top: 50%;
7 | padding: 50px;
8 | transform: translateY(-50%);
9 |
10 | @include max-screen($mobile-breakpoint) {
11 | padding: 30px;
12 | }
13 | }
14 |
15 | &__close {
16 | cursor: pointer;
17 | position: absolute;
18 | right: 5px;
19 | top: 5px;
20 | width: 40px;
21 | height: 40px;
22 | background-image: url('/static/img/close.svg');
23 | background-repeat: no-repeat;
24 | background-position: center;
25 | background-size: 20px;
26 | }
27 |
28 | }
29 |
30 |
31 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Langkah-Langkah Terakhir Sebelum Mempublikasikan
3 | ---
4 |
5 | Selamat! Anda telah menguji halaman Anda secara lokal dan memperbaiki semua kesalahan validasi, yang berarti halaman AMP pertama Anda siap dikirimkan.
6 |
7 | Kenali cara kerja AMP dan semua sifat elemen dengan mencoba-coba navigasi di sebelah kiri, dan dapatkan informasi umum lainnya mengenai berbagai alat yang bisa membantu mempersiapkan produksi materi Anda dengan mengunjungi [Memulai Alur Kerja Pengembangan Anda](https://developers.google.com/web/tools/setup/).
8 |
```
--------------------------------------------------------------------------------
/assets/img/about/overview/bg2.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1090.4 819.45"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-196.04" y1="948.26" x2="607.05" y2="364.79" gradientUnits="userSpaceOnUse"><stop offset="0.5" stop-color="#0387fd"/><stop offset="1" stop-color="#0dd5fd"/></linearGradient></defs><title>bg2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="0.26 816.44 0 0 1090.4 819.45 0.26 816.44"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/publish@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Etapas finais antes de publicar
3 | ---
4 |
5 | Parabéns! Você testou sua página localmente e corrigiu todos os erros de validação, o que quer dizer que sua primeira página AMP está pronta para ser publicada.
6 |
7 | Familiarize-se com a forma como o AMP funciona e como todos os elementos se comportam explorando o menu de navegação à esquerda; para saber mais sobre ferramentas que podem ajudá-lo a preparar seu conteúdo para produção, acesse [Primeiros passos com o fluxo de trabalho de desenvolvimento](https://developers.google.com/web/tools/setup/).
8 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Abschließende Schritte vor der Veröffentlichung
3 | ---
4 |
5 | Glückwunsch! Sie haben Ihre Seite lokal getestet und alle Validierungsfehler behoben. Das heißt, Ihre erste AMP-Seite ist bereit für die Veröffentlichung.
6 |
7 | Über die Navigation auf der linken Seite erfahren Sie mehr über die Funktionsweise von AMP und das Verhalten der verschiedenen Elemente. Weitere allgemeine Informationen zu Tools für die Erstellung und Vorbereitung von Inhalten [finden Sie in der Einführung zum Entwicklungsworkflow](https://developers.google.com/web/tools/setup/).
8 |
```
--------------------------------------------------------------------------------
/podspec.yaml:
--------------------------------------------------------------------------------
```yaml
1 | grow_version: ">=0.0.66"
2 | home: /content/pages/home.html
3 |
4 | localization:
5 | default_locale: en
6 | locales:
7 | - ar
8 | - de
9 | - en
10 | - es
11 | - fr
12 | - id
13 | - it
14 | - ja
15 | - ko
16 | - pl
17 | - pt_BR
18 | - ru
19 | - th
20 | - tr
21 | - zh_CN
22 | aliases:
23 | en_UK: en_GB
24 |
25 | static_dirs:
26 | - static_dir: /assets/
27 | serve_at: /static/
28 | - static_dir: /pwa/
29 | serve_at: /
30 |
31 | preprocessors:
32 | - kind: gulp
33 |
34 | markdown:
35 | extensions:
36 | - kind: sourcecode
37 | classes: true
38 |
39 | deployments:
40 | review:
41 | destination: webreview
42 | server: googwebreview.appspot.com
43 | project: search/amp
44 | name: amp
45 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Étapes finales avant publication
3 | ---
4 |
5 | Félicitations ! Vous avez testé votre page en local et corrigé toutes les erreurs de validation. Votre première page AMP est donc prête pour envoi.
6 |
7 | Familiarisez-vous avec le fonctionnement d'AMP et le comportement de tous les éléments en parcourant le menu de navigation à gauche. Et pour obtenir des informations générales sur les outils utilisés lors de la préparation du contenu pour production, accédez à [Premiers pas avec le workflow de développement](https://developers.google.com/web/tools/setup/).
8 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Ostatnie kroki przed publikacją
3 | ---
4 |
5 | Gratulacje! Po przetestowaniu strony lokalnie i usunięciu wszystkich błędów sprawdzania poprawności Twoja pierwsza strona AMP może ujrzeć światło dzienne.
6 |
7 | Poznaj zasady działania AMP i zachowanie wszystkich elementów, wykorzystując łącza nawigacyjne z lewej strony. W celu uzyskania bardziej ogólnych informacji o narzędziach, które mogą pomóc w przygotowaniu treści do produkcji, przejdź do artykułu [Wprowadzenie do organizacji pracy podczas programowania](https://developers.google.com/web/tools/setup/).
8 |
```
--------------------------------------------------------------------------------
/assets/sass/docs.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_content.scss';
11 | @import '_content-post.scss';
12 | @import '_doc-nav.scss';
13 | // @import '_grid.scss';
14 | @import '_lang_switcher.scss';
15 | @import '_syntax_highlighting.scss';
16 | @import '_tables.scss';
17 | @import '_callouts.scss';
18 | @import '_toc.scss';
19 |
20 | @import '_cards.scss';
21 | @import '_accordions.scss';
22 | // @import '_lightbox.scss';
23 | @import '_sidebar.scss';
24 | @import '_search.scss';
25 | @import '_footer.scss';
26 |
```
--------------------------------------------------------------------------------
/views/partials/footer.html:
--------------------------------------------------------------------------------
```html
1 | <footer>
2 | <div class="container">
3 | <div class="row">
4 | <div class="twelve columns footer-icons">
5 | <a class="footer-privacy" href="https://www.google.com/intl/en/policies/privacy/">{{_('Privacy')}}</a>
6 | <a href="//twitter.com/amphtml">
7 | <div class="footer-image twitter"></div>
8 | </a>
9 | <a href="//amphtml.wordpress.com/">
10 | <div class="footer-image wordpress"></div>
11 | </a>
12 | </div>
13 | </div>
14 | </div>
15 | </footer>
16 |
17 | <amp-install-serviceworker src="/service-worker.js?v2" layout="nodisplay"></amp-install-serviceworker>
18 |
```
--------------------------------------------------------------------------------
/content/latest/list-past-event.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title@: Past Events
3 | $path: /latest/event/past-event
4 | $parent: /content/latest/list-event.html
5 |
6 | $localization:
7 | path: /{locale}/latest/event/past-event
8 |
9 | class: list
10 | ---
11 | {% set lists = g.doc('/content/includes/lists.yaml', locale=doc.locale) %}
12 | {% set events = g.doc('/content/includes/events.yaml', locale=doc.locale) %}
13 |
14 | <h1 class="title">{{_(lists.past_event.title)}}</h1>
15 | <section class="post-list">
16 | {% for post in events.past_events %}
17 | {% with past = true, meta = false %}
18 | {% include "/views/partials/post-item.html" %}
19 | {% endwith %}
20 | {% endfor %}
21 | </section>
22 |
```
--------------------------------------------------------------------------------
/content/learn/browsers.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Supported Browsers
3 | $order: 3
4 | $hidden: true
5 | ---
6 |
7 | In general we support the **2 latest versions of major browsers** like Chrome, Firefox, Edge, Safari and Opera. We support desktop, phone, tablet and the web view version of these respective browsers.
8 |
9 | Beyond that, the core AMP library and built-in elements should aim for very wide browser support and we accept fixes for all browsers with market share greater than 1 percent.
10 |
11 | In particular, we try to maintain "it might not be perfect but isn't broken"-support for the Android 4.0 system browser and Chrome 28+ on phones.
```
--------------------------------------------------------------------------------
/content/learn/metrics.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title: AMP Metrics
3 | $order: 6
4 | class: metrics
5 | $hidden: true
6 | ---
7 |
8 | Let's get real – how are sites using AMP performing in the real world? The following stats on average page load performance are provided by Google and are continuously updated.
9 |
10 | <amp-iframe layout="responsive" width="600" height="500" frameborder="0" sandbox="allow-scripts" src="https://ampproject-b5f4c.firebaseapp.com/metrics_chart.html">
11 | <div class="center-content" placeholder>
12 | <amp-img layout="fixed" width="100" height="100" src="/static/img/man.jpg"></amp-img>
13 | <p>Loading data..</p>
14 | </div>
15 | </amp-iframe>
16 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Últimos pasos antes de la publicación
3 | ---
4 |
5 | ¡Felicitaciones! Probaste tu página de forma local y solucionaste los errores de validación. Esto significa que estás listo para lanzar tu primera página AMP.
6 |
7 | Obtén información acerca de cómo funciona AMP y cómo se comportan todos los elementos explorando el panel de navegación de la izquierda. Para obtener información general acerca de las herramientas que te pueden ayudar a preparar tu producción de contenido, consulta [Primeros pasos para tu flujo de trabajo de desarrollo](https://developers.google.com/web/tools/setup/).
8 |
```
--------------------------------------------------------------------------------
/assets/img/home/shapebg.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 711.96 1047.36"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="264.56" y1="971.07" x2="973.71" y2="261.93" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#1c79c4"/></linearGradient></defs><title>shapebg</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="711.96 0 0 717.26 711.96 1047.36 711.96 0"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/symbols/carat-down.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 16 8.3" style="enable-background:new 0 0 16 8.3;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:#000333;stroke-width:0.75;stroke-miterlimit:10;}
7 | </style>
8 | <title>carat</title>
9 | <g id="Layer_2">
10 | <g id="Layer_1-2">
11 | <polyline class="st0" points="0.3,0.5 7.9,8 15.3,0.5 "/>
12 | </g>
13 | </g>
14 | </svg>
15 |
```
--------------------------------------------------------------------------------
/.github/workflows/semgrep.yml:
--------------------------------------------------------------------------------
```yaml
1 |
2 | on:
3 | pull_request: {}
4 | workflow_dispatch: {}
5 | push:
6 | branches:
7 | - main
8 | - master
9 | schedule:
10 | - cron: '0 0 * * *'
11 | name: Semgrep config
12 | jobs:
13 | semgrep:
14 | name: semgrep/ci
15 | runs-on: ubuntu-20.04
16 | env:
17 | SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }}
18 | SEMGREP_URL: https://cloudflare.semgrep.dev
19 | SEMGREP_APP_URL: https://cloudflare.semgrep.dev
20 | SEMGREP_VERSION_CHECK_URL: https://cloudflare.semgrep.dev/api/check-version
21 | container:
22 | image: returntocorp/semgrep
23 | steps:
24 | - uses: actions/checkout@v3
25 | - run: semgrep ci
26 |
```
--------------------------------------------------------------------------------
/content/docs/guides/embed/login-paywalls.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Login & Paywalls
3 | $order: 7
4 | ---
5 |
6 | Web pages may require to control the document viewing experience for logged in users, and in case of news pages, for subscribers, metered users and anonymous users. While publishing AMP pages, it's possible to hide sections of a page based on an authorization flow by using the [amp-access](https://www.ampproject.org/docs/reference/components/amp-access).
7 |
8 | {% call callout('Read on', type='success') %}
9 | Follow the tutorial on how to [implement a login flow with AMP](/docs/reference/content/docs/get_started/advanced/login_requiring.md)
10 | {% endcall %}
```
--------------------------------------------------------------------------------
/assets/img/about/overview/herobg.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 718.05 1051.5"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-20785.6" y1="705.08" x2="-20133.24" y2="231.12" gradientTransform="matrix(-1, 0, 0, 1, -19820.82, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d5fb"/><stop offset="0.5" stop-color="#198af9"/></linearGradient></defs><title>herobg</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="717.84 1051.5 718.05 0 0 523.37 717.84 1051.5"/></g></g></svg>
```
--------------------------------------------------------------------------------
/views/partials/lang_switcher.html:
--------------------------------------------------------------------------------
```html
1 | <div class="language desktop">
2 | <amp-accordion>
3 | <section>
4 | <h6 class="current">
5 | <a class="flag-{{ doc.locale }}"><span>{{ doc.locale.get_language_name() }}</span></a>
6 | </h6>
7 | <div class="others">
8 | <div class="others-inner">
9 | {% for locale in doc.locales if not locale == doc.locale %}
10 | {% set localized_doc = doc.localize(locale) %}
11 | <div><a href="{{ localized_doc.url.path }}" class="flag-{{locale}}"><span>{{locale.get_language_name()}}</span></a></div>
12 | {% endfor %}
13 | </div>
14 | </div>
15 | </section>
16 | </amp-accordion>
17 | </div>
```
--------------------------------------------------------------------------------
/assets/sass/_search.scss:
--------------------------------------------------------------------------------
```scss
1 | .searchbar {
2 | position: absolute;
3 | right: 175px;
4 | top: 23px;
5 | z-index: 2;
6 |
7 | @include max-screen(1030px) {
8 | display: none;
9 | }
10 |
11 | input {
12 | @extend %text-base;
13 | @extend %text-small;
14 | border: 0;
15 | border-bottom: 1px solid #4d4d4d;
16 | font-family: $font-family;
17 | outline: 0;
18 | vertical-align: bottom;
19 | }
20 |
21 | button {
22 | background: url(/static/img/symbols/search.svg) center/cover no-repeat;
23 | border: 0;
24 | cursor: pointer;
25 | height: 24.2px;
26 | position: relative;
27 | top: 3px;
28 | vertical-align: middle;
29 | width: 24.6px;
30 | }
31 | }
32 |
33 | .rtl .searchbar {
34 | left: 230px;
35 | right: auto;
36 | }
```
--------------------------------------------------------------------------------
/views/partials/promo_banner.html:
--------------------------------------------------------------------------------
```html
1 | <a href="{{g.doc('/content/pages/amp-conf-2017.html').url.path}}" class="promo">
2 | <div class="promo-inner">
3 | <amp-img class="promo-line left desktop-up"
4 | noloading
5 | height=279
6 | width=312
7 | layout=responsive
8 | src="/static/img/footer/line-left.png">
9 | </amp-img>
10 |
11 | <div class="description desktop-up">
12 | {{_('Save the date: Tune in live on March 7/8 or join us in person in NYC for our first-ever AMP Conf.')}}
13 | </div>
14 | <div class="description mobile-down">
15 | {{_('AMP Conf. March 7/8.')}}
16 | </div>
17 | <div class="link">{{_('Learn More')}}</div>
18 | </div>
19 | </a>
```
--------------------------------------------------------------------------------
/content/includes/blog_feed.yaml:
--------------------------------------------------------------------------------
```yaml
1 |
2 | section_title: Latest blog posts
3 |
4 | blog:
5 |
6 | - article:
7 | title: "New Industry Benchmarks for Mobile Page Speed"
8 | href: "https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/"
9 | date: "February 28, 2017"
10 |
11 | - article:
12 | title: "Grow Your Business with Ads on AMP"
13 | href: "https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/"
14 | date: "February 27, 2017"
15 |
16 | - article:
17 | title: "AMP Roadmap Update for Mid-Q1 2017"
18 | href: "https://amphtml.wordpress.com/2017/02/18/amp-roadmap-update-for-mid-q1-2017/amp/"
19 | date: "February 17, 2017"
20 |
```
--------------------------------------------------------------------------------
/assets/sass/case-study.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_content.scss';
11 | @import '_nav.scss';
12 | @import '_lang_switcher.scss';
13 | @import '_syntax_highlighting.scss';
14 | // @import '_tables.scss';
15 | @import '_callouts.scss';
16 | @import '_inline-toc.scss';
17 | @import '_share.scss';
18 |
19 | @import '_cards.scss';
20 | @import '_accordions.scss';
21 | @import '_search.scss';
22 | @import '_sidebar.scss';
23 | @import '_footer.scss';
24 |
25 | @import '_bg-triangle.scss';
26 | @import 'pages/_post-detail.scss';
27 | @import 'pages/_case-study.scss';
28 |
```
--------------------------------------------------------------------------------
/assets/sass/_nav.scss:
--------------------------------------------------------------------------------
```scss
1 | nav.breadcrumb {
2 | margin: 15px 20px;
3 | position: absolute;
4 | z-index: 2;
5 |
6 | ul {
7 | line-height: 12px;
8 | list-style: none;
9 | }
10 |
11 | li,
12 | a {
13 | color: $color-grey-md;
14 | font-size: 12px;
15 | font-weight: 300;
16 | letter-spacing: 0;
17 | line-height: 17px;
18 | text-transform: none;
19 | }
20 |
21 | li {
22 | display: inline;
23 |
24 | &::after {
25 | content: '\00bb';
26 | margin-left: 5px;
27 | }
28 |
29 | &:last-child::after {
30 | content: '';
31 | }
32 | }
33 | }
34 |
35 | .rtl nav {
36 | li::after {
37 | margin-left: 0;
38 | margin-right: 5px;
39 | }
40 | }
41 |
42 | @include max-screen($mobile-breakpoint) {
43 | nav {
44 | li,
45 | a {
46 | font-size: 10px;
47 | }
48 | }
49 | }
50 |
```
--------------------------------------------------------------------------------
/views/partials/points.html:
--------------------------------------------------------------------------------
```html
1 | <section class="points">
2 | {% if points.title %}
3 | <h3>{{_(points.title)}}</h3>
4 | {% endif %}
5 | {% for point in points.pointlist %}
6 | <div class="point" {% if point.id %}id="{{point.id}}"{% endif %}>
7 | <div class="point-text">
8 | <h4>{{_(point.title)}}</h4>
9 | <div class="description small">
10 | {{_(point.description)|markdown|safe}}
11 | </div>
12 | </div>
13 | {% if point.example %}
14 | <div class="point-example">
15 | {% set example = g.doc(point.example, locale=doc.locale) %}
16 | {{example.html|safe}}
17 | </div>
18 | {% endif %}
19 | </div>
20 | {% endfor %}
21 | </section>
22 |
```
--------------------------------------------------------------------------------
/content/latest/list-blog.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title: Blog
3 | $path: /latest/blog
4 | $parent: /content/latest/latest.html
5 |
6 | $localization:
7 | path: /{locale}/latest/blog
8 |
9 | class: list
10 | ---
11 | {% set lists = g.doc('/content/includes/lists.yaml', locale=doc.locale) %}
12 | {% set blogs = g.doc('/content/includes/list-blog.yaml', locale=doc.locale) %}
13 |
14 | <h1 class="title">{{_(lists.blog.title)}}</h1>
15 | <section class="post-list">
16 | {% for post in blogs.blogs %}
17 | {% with past = false, meta = false %}
18 | {% include "/views/partials/post-item.html" %}
19 | {% endwith %}
20 | {% endfor %}
21 | </section>
22 | <a href="https://amphtml.wordpress.com/" class="underlined cta">{{_('See all posts')}}</a>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_bg.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 622.55 973"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="277.08" y1="1125.29" x2="835.05" y2="567.32" gradientTransform="translate(622.01 1327.14) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#1c79c4"/></linearGradient></defs><title>advertisers_bg</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="0 973 622.54 471 0 0 0 973"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/bg1.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1473.01 1390.31"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-13553.32" y1="936.47" x2="-11773.98" y2="-356.3" gradientTransform="matrix(-1, 0, 0, 1, -11754.11, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0389ff"/><stop offset="1" stop-color="#1c79c4"/></linearGradient></defs><title>bg1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="0 328.73 1473.01 1390.31 1473.01 0 0 0 0 328.73"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Passaggi finali prima della pubblicazione
3 | ---
4 |
5 | Complimenti! Hai testato la tua pagina localmente e hai eliminato tutti gli errori di convalida, questo significa che la tua prima pagina AMP è pronta per la distribuzione.
6 |
7 | Prendi dimestichezza con il formato AMP e con il modo in cui interagiscono tutti gli elementi facendo riferimento agli approfondimenti accessibili dal menu di navigazione di sinistra. Per ulteriori informazioni generali sugli strumenti che possono aiutarti a distribuire subito il tuo contenuto, consulta la pagina [Guida introduttiva al flusso di lavoro di sviluppo](https://developers.google.com/web/tools/setup/).
8 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Serving Ads on AMP
3 | $order: 8
4 | toc: true
5 | ---
6 | <div class="toc">
7 | {% include "/views/partials/sub_nav.html" %}
8 | <ul>
9 | <li><a href="/learn/who/#ads">Supported Platforms</a></li>
10 | <li><a href="/roadmap">Roadmap</a></li>
11 | </ul>
12 | </div>
13 |
14 | AMP pages are just web pages with some extra features (and a few limitations), making them consistently faster and more user-friendly. Many of the best practices in this guide are consistent across non-AMP pages.
15 |
16 | For optimal results, approach ads on AMP pages in the same manner as ads on non-AMP pages.
17 |
18 | <a class="button go-button" href="/docs/guides/ads/ads_getting_started.html">Let's get started!</a>
19 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/search.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 24.6 24.2" style="enable-background:new 0 0 24.6 24.2;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:#4D4D4D;stroke-miterlimit:10;}
7 | </style>
8 | <title>icon_search</title>
9 | <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.7085 12.6794)" class="st0" cx="13.5" cy="10.8" rx="5.8" ry="5.8"/>
10 | <line class="st0" x1="3.6" y1="20.4" x2="9.2" y2="14.8"/>
11 | </svg>
12 |
```
--------------------------------------------------------------------------------
/assets/sass/section.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_content.scss';
11 | @import '_content-section.scss';
12 | @import '_nav.scss';
13 | @import '_lang_switcher.scss';
14 | @import '_syntax_highlighting.scss';
15 | // @import '_tables.scss';
16 | @import '_callouts.scss';
17 | @import '_inline-toc.scss';
18 |
19 | @import '_cards.scss';
20 | @import '_accordions.scss';
21 | @import '_search.scss';
22 | @import '_sidebar.scss';
23 | @import '_footer.scss';
24 |
25 | // TODO: Make it so I can remove this here..
26 | @import 'pages/_who.scss';
27 | @import 'pages/_faqs.scss';
28 | @import '_bg-triangle.scss';
29 |
```
--------------------------------------------------------------------------------
/assets/img/about/how-amp-works/line_behind.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 166.39 167.1"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:9px;stroke:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-32909.39" y1="-18901.65" x2="-32770.26" y2="-18901.65" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, 29421.05, 24063.05)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>line_behind</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="163.2" y1="3.17" x2="3.19" y2="163.92"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/bg2.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 736.49 1017.78"><defs><style>.cls-1{opacity:0.05;fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-18487.6" y1="1437.79" x2="-19263.25" y2="2001.34" gradientTransform="translate(-9013.68 17000.99) rotate(124.86)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.5" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>bg2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="0 1017.78 0 0 736.49 512.99 3.81 1017.47 0 1017.78"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/overview/line4.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 254.39 191.21"><defs><style>.cls-1{fill:none;stroke-miterlimit:10;stroke-width:9px;stroke:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-9075.32" y1="-7140.87" x2="-8820.65" y2="-7140.87" gradientTransform="matrix(1, 0, 0, 1, 9086.11, 7222.77)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#29d2fc"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>line4</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="2.67" y1="187.59" x2="251.72" y2="3.62"/></g></g></svg>
```
--------------------------------------------------------------------------------
/views/partials/breadcrumb-nav.html:
--------------------------------------------------------------------------------
```html
1 | {% set usedDoc = usedDoc or doc %}
2 | {% set parentDoc = usedDoc.parent %}
3 | {% set grandparentDoc = parentDoc.parent %}
4 |
5 | <nav class="breadcrumb">
6 | <ul>
7 | {% if grandparentDoc %}
8 | <li><a href="{{g.url(grandparentDoc.pod_path, locale=usedDoc.locale).path}}">{{ _(grandparentDoc.titles('breadcrumb')) or _(grandparentDoc.title) }}</a></li>
9 | {% endif %}
10 |
11 | {% if parentDoc %}
12 | <li><a href="{{g.url(parentDoc.pod_path, locale=usedDoc.locale).path}}">{{ _(parentDoc.titles('breadcrumb')) or _(parentDoc.title) }}</a></li>
13 | {% endif %}
14 |
15 | <li><a href="{{g.url(usedDoc.pod_path, locale=usedDoc.locale).path}}">{{ _(doc.titles('breadcrumb')) or _(usedDoc.title) }}</a></li>
16 | </ul>
17 | </nav>
18 |
```
--------------------------------------------------------------------------------
/assets/sass/list.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_content.scss';
11 | @import '_nav.scss';
12 | @import '_lang_switcher.scss';
13 | // @import '_syntax_highlighting.scss';
14 | // @import '_tables.scss';
15 | @import '_callouts.scss';
16 | // @import '_toc.scss';
17 | @import '_inline-toc.scss';
18 | // @import '_animated_lines.scss';
19 |
20 | @import '_carousel.scss';
21 | @import '_cards.scss';
22 | @import '_accordions.scss';
23 | @import '_search.scss';
24 | @import '_sidebar.scss';
25 | @import '_footer.scss';
26 |
27 | @import 'pages/_list.scss';
28 | @import 'pages/_events.scss';
29 | @import '_post-item.scss';
30 | @import 'pages/_latest.scss';
31 |
```
--------------------------------------------------------------------------------
/views/partials/sub_nav.html:
--------------------------------------------------------------------------------
```html
1 | {% macro render_nav_link(item) -%}
2 | {% if item == doc %}
3 | <span>{{ doc.title }}</span>
4 | {% else %}
5 | <a href="{% if item.goto %}{{ item.goto }}{% else %}{{ item.url.path }}{% endif %}">{{ item.title }}</a>
6 | {% endif %}
7 | {%- endmacro %}
8 |
9 | {% macro render_children(item, docs) -%}
10 | {% for doc in docs if item.locale == doc.locale %}
11 | {% if loop.first %}{% if item.numbered %}<ol>{% else %}<ul>{% endif %}{% endif %}
12 | <li>
13 | {{ render_nav_link(doc) }}
14 | </li>
15 | {% if loop.last %}{% if item.numbered %}</ol>{% else %}</ul>{% endif %}{% endif %}
16 | {% endfor %}
17 | {%- endmacro %}
18 |
19 | {% set sub_collection = g.collection(doc.collection.pod_path + '/' + doc.base) %}
20 | {{ render_children(doc, sub_collection) }}
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_read.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65"><defs><style>.cls-1,.cls-2{fill:#fff;fill-opacity:0.7;}.cls-1,.cls-2,.cls-3,.cls-4{stroke:#edc10a;}.cls-1,.cls-2,.cls-4{stroke-miterlimit:10;}.cls-2{stroke-linecap:square;}.cls-3,.cls-4{fill:none;}.cls-3{stroke-linejoin:round;}</style></defs><title>icon_read1</title><g id="Layer_1" data-name="Layer 1"><polyline class="cls-1" points="19.04 44.98 19.04 13.57 45.21 13.57 45.21 42.38"/><path class="cls-2" d="M45.21,47.63H20.83c-1,0-1.8-1.16-1.8-2.6v0c0-1.43.8-2.6,1.8-2.6H45.21"/><line class="cls-3" x1="41.63" y1="44.98" x2="21.66" y2="44.98"/><polygon class="cls-4" points="40.63 28.46 36.97 24.24 33.3 28.46 33.3 13.57 40.63 13.57 40.63 28.46"/></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/main.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | @import '_content.scss';
11 | @import '_bg-triangle.scss';
12 | @import '_nav.scss';
13 | // @import '_grid.scss';
14 | @import '_lang_switcher.scss';
15 | // @import '_syntax_highlighting.scss';
16 | // @import '_tables.scss';
17 | // @import '_callouts.scss';
18 | // @import '_toc.scss';
19 | // @import '_inline-toc.scss';
20 | // @import '_animated_lines.scss';
21 | @import '_points.scss';
22 | @import '_large-cta.scss';
23 |
24 | @import '_carousel.scss';
25 | @import '_cards.scss';
26 | @import '_accordions.scss';
27 | @import '_lightbox.scss';
28 | @import '_search.scss';
29 | @import '_sidebar.scss';
30 | @import '_footer.scss';
31 |
```
--------------------------------------------------------------------------------
/views/section_page.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 | <div class="container md">
10 | <div class="content">
11 | <article class="post">
12 | <h1 class="post-title">{{_(doc.title)}}</h1>
13 | <div class="post-content">
14 | {{doc.html|render|safe}}
15 | {% if doc.faq %}
16 | {% include "views/partials/faq-accordion.html" %}
17 | {% endif %}
18 | </div>
19 | </article>
20 | </div>
21 | </div>
22 |
23 | {% if doc.cta %}
24 | {% with cta = doc.cta %}
25 | {% include "/views/partials/footer-cta.html" %}
26 | {% endwith %}
27 | {% endif %}
28 |
29 | {% include "/views/partials/footer.html" %}
30 |
31 | {% endblock %}
32 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/share.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" width="19.65" height="19.04" viewBox="0 0 19.65 19.04">
2 | <title>Asset 14</title>
3 | <g id="Layer_2" data-name="Layer 2">
4 | <g id="Art">
5 | <g id="YEK087">
6 | <path d="M10.88,3.64c0-.6,0-1.19,0-1.77s0-1,0-1.51c0-.12.06-.33.12-.34a.49.49,0,0,1,.38.11Q13.56,2,15.72,4L19.4,7.21c.34.3.34.35,0,.64l-7.86,7a1,1,0,0,1-.22.19.45.45,0,0,1-.31,0,.32.32,0,0,1-.13-.25c0-.86,0-1.73,0-2.59,0-.28,0-.55,0-.88a12.28,12.28,0,0,0-1.5.08A11.24,11.24,0,0,0,1.28,17a15,15,0,0,0-.75,1.69,1.75,1.75,0,0,0-.06.18c0,.14-.11.24-.28.22S0,18.9,0,18.75c0-.56,0-1.12.06-1.68a19.72,19.72,0,0,1,1.07-5.49A12.52,12.52,0,0,1,4.89,6a9.83,9.83,0,0,1,5.85-2.35Z" style="fill: #fff"/>
7 | </g>
8 | </g>
9 | </g>
10 | </svg>
11 |
```
--------------------------------------------------------------------------------
/assets/sass/home.min.scss:
--------------------------------------------------------------------------------
```scss
1 | @import '_config.scss';
2 | @import '_mixins.scss';
3 | @import '_responsive.scss';
4 | @import '_animations.scss';
5 |
6 | @import '_sprite.scss';
7 |
8 | @import '_global.scss';
9 | @import '_header.scss';
10 | // @import '_content.scss';
11 | // @import '_bg-triangle.scss';
12 | @import '_nav.scss';
13 | @import '_lang_switcher.scss';
14 | // @import '_syntax_highlighting.scss';
15 | // @import '_tables.scss';
16 | // @import '_callouts.scss';
17 | @import '_toc.scss';
18 | // @import '_inline-toc.scss';
19 | @import '_animated_lines.scss';
20 | // @import '_points.scss';
21 | @import '_large-cta.scss';
22 |
23 | @import '_carousel.scss';
24 | @import '_cards.scss';
25 | // @import '_accordions.scss';
26 | // @import '_lightbox.scss';
27 | @import '_search.scss';
28 | @import '_sidebar.scss';
29 | @import '_footer.scss';
30 |
31 | @import 'pages/_home.scss';
32 |
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_retweet.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 16 10" style="enable-background:new 0 0 16 10;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:#00E676;stroke-width:10;stroke-miterlimit:10;}
7 | .st1{fill:#929292;}
8 | </style>
9 | <title>icon_retweet</title>
10 | <g>
11 | <g id="Art">
12 | <rect x="-1441.3" y="-1378.4" class="st0" width="8050.7" height="4722.3"/>
13 | <path class="st1" d="M11.8,2.2v3.5H9.2l3.4,3.4L16,5.8h-2.6V0.6H7.3v1.7H11.8z M4.2,7.8V4.2h2.6L3.4,0.9L0,4.2h2.5v5.2h6.1V7.8
14 | H4.2z"/>
15 | </g>
16 | </g>
17 | </svg>
18 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/twitter.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.93 19.66"><defs><style>.cls-1{fill:#ccc;fill-rule:evenodd;}</style></defs><title>Asset 5</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M20.23,3.11A4.93,4.93,0,0,0,22.3.36a9.13,9.13,0,0,1-3,1.2A4.58,4.58,0,0,0,15.88,0a4.84,4.84,0,0,0-4.7,5,5.19,5.19,0,0,0,.12,1.13A13.14,13.14,0,0,1,1.6.91,5.16,5.16,0,0,0,1,3.4,5,5,0,0,0,3.05,7.53,4.54,4.54,0,0,1,.92,6.91V7A4.9,4.9,0,0,0,4.7,11.84,4.38,4.38,0,0,1,3.46,12a4.43,4.43,0,0,1-.88-.09A4.75,4.75,0,0,0,7,15.37,9.13,9.13,0,0,1,1.12,17.5,8.88,8.88,0,0,1,0,17.43a12.83,12.83,0,0,0,7.21,2.23c8.66,0,13.39-7.56,13.39-14.12,0-.22,0-.43,0-.64a9.84,9.84,0,0,0,2.35-2.57,9,9,0,0,1-2.7.78Zm0,0"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_bg-triangle.scss:
--------------------------------------------------------------------------------
```scss
1 | .bg-triangle-primary,
2 | .bg-triangle-secondary,
3 | .bg-triangle-bottom {
4 | .wrap {
5 | overflow: hidden;
6 | position: relative;
7 |
8 | &::before,
9 | &::after {
10 | background: $gradient-med-faded;
11 | display: block;
12 | height: 1400px;
13 | left: 0;
14 | position: absolute;
15 | width: 100%;
16 | z-index: -1;
17 | }
18 |
19 | &::before {
20 | content: '';
21 | top: 0;
22 | transform: skewY(36deg);
23 | transform-origin: top right;
24 | }
25 | }
26 | }
27 |
28 | .bg-triangle-primary {
29 | .wrap::before {
30 | background: $gradient-med;
31 | }
32 |
33 | .post-title,
34 | nav.breadcrumb li,
35 | nav.breadcrumb a {
36 | color: $color-white;
37 | }
38 | }
39 |
40 | .bg-triangle-bottom {
41 | .wrap::after {
42 | bottom: 0;
43 | content: '';
44 | transform: skewY(-36deg);
45 | transform-origin: bottom right;
46 | }
47 | }
48 |
```
--------------------------------------------------------------------------------
/views/doc.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/doc_nav.html" %}
5 | {% endset %}
6 |
7 | {% block nav %}
8 | {{ navmarkup|safe }}
9 | {% endblock %}
10 |
11 | {% block main %}
12 | <div class="container main">
13 | {{ navmarkup|safe }}
14 | <div class="content">
15 | <article class="post{% if doc.toc %} has-toc{% endif %}">
16 |
17 | <h1 class="post-title">{{ doc.title }}</h1>
18 |
19 | <div class="post-content">
20 | {{doc.html|render|safe}}
21 | </div>
22 |
23 | </article>
24 | </div>
25 | </div>
26 |
27 | <div class="doc-footer">
28 | {% set doc_data = g.doc('/content/includes/doc.yaml', locale=doc.locale) %}
29 | {% with cta = doc_data.cta %}
30 | {% include "/views/partials/footer-cta.html" %}
31 | {% endwith %}
32 | {% include "/views/partials/footer.html" %}
33 | </div>
34 | {% endblock %}
35 |
```
--------------------------------------------------------------------------------
/views/about-how.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 |
10 | <div class="container xl about-overview-block">
11 | <section class="hero">
12 | <div class="text">
13 | <h1>{{_(doc.hero.title)}}</h1>
14 | <p>{{_(doc.hero.subtitle)}}</p>
15 | </div>
16 | </section>
17 |
18 | <div class="video">
19 | <amp-youtube
20 | data-videoid="{{doc.video}}"
21 | layout="responsive"
22 | width="480" height="270">
23 | </amp-youtube>
24 | </div>
25 |
26 |
27 | {% with points = doc.points %}
28 | {% include "/views/partials/points.html" %}
29 | {% endwith %}
30 | </div>
31 |
32 | {% with cta = doc.cta %}
33 | {% include "/views/partials/footer-cta.html" %}
34 | {% endwith %}
35 | {% include "/views/partials/footer.html" %}
36 |
37 | {% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/_tables.scss:
--------------------------------------------------------------------------------
```scss
1 | table {
2 | border-collapse: collapse;
3 | width: 100%;
4 | }
5 |
6 | td, th {
7 | padding: 20px 30px;
8 | text-align: left;
9 | vertical-align: top;
10 | }
11 |
12 | tr:nth-child(even) {
13 | background: #eff9fc;
14 | }
15 |
16 | .rtl td,
17 | .rtl th {
18 | text-align: right;
19 | }
20 |
21 | th.col-fourty,
22 | td.col-fourty {
23 | width: 40%;
24 | }
25 |
26 | th.col-thirty,
27 | td.col-thirty {
28 | width: 30%;
29 | }
30 |
31 | th.col-twenty,
32 | td.col-twenty,
33 | {
34 | width: 20%;
35 | }
36 |
37 | td:first-child {
38 | border-right: 2px solid $color-ampblue;
39 | }
40 |
41 | .rtl {
42 | td:first-child {
43 | border-left: 2px solid $color-ampblue;
44 | border-right: 0;
45 | }
46 | }
47 |
48 | html, body {
49 | th {
50 | @extend %text-label;
51 | background: $color-white;
52 | border-bottom: 2px solid $color-ampblue;
53 | color: $color-ampblue;
54 | }
55 | }
56 |
57 | @include max-screen($mobile-breakpoint) {
58 | td, th {
59 | padding: 5px;
60 | }
61 |
62 | th:first-child {
63 | border-right: 2px solid $color-ampblue;
64 | }
65 | }
```
--------------------------------------------------------------------------------
/views/partials/large-cta.html:
--------------------------------------------------------------------------------
```html
1 | <section class="large-cta">
2 | <amp-img class="large-cta-lines left desktop-up"
3 | noloading
4 | height={{large_cta.lines_left_height}}
5 | width={{large_cta.lines_left_width}}
6 | layout=fixed
7 | src="{{large_cta.lines_left}}">
8 | </amp-img>
9 | <amp-img class="large-cta-lines right desktop-up"
10 | noloading
11 | height={{large_cta.lines_right_height}}
12 | width={{large_cta.lines_right_width}}
13 | layout=fixed
14 | src="{{large_cta.lines_right}}">
15 | </amp-img>
16 | <h1>{{_(large_cta.title)}}</h1>
17 | {% if large_cta.subtitle %}
18 | <p>{{_(large_cta.subtitle)}}</p>
19 | {% endif %}
20 | <a href="{% if large_cta.cta_url.startswith('http') %}{{ large_cta.cta_url }}{% else %}{{ g.doc(large_cta.cta_url, locale=doc.locale).url.path }}{% endif %}" class="button light"><span>{{_(large_cta.cta)}}</span></a>
21 | </section>
22 |
```
--------------------------------------------------------------------------------
/views/partials/footer-cta.html:
--------------------------------------------------------------------------------
```html
1 | <a href="{% if cta.link_url.startswith('http') %}{{ cta.link_url }}{% else %}{{ g.doc(cta.link_url, locale=doc.locale).url.path }}{% endif %}" class="footer-cta">
2 | <amp-img class="cta-line left desktop-up"
3 | noloading
4 | height=279
5 | width=312
6 | layout=responsive
7 | src="/static/img/footer/line-left.png">
8 | </amp-img>
9 | <amp-img class="cta-line right"
10 | noloading
11 | height=215
12 | width=350
13 | layout=responsive
14 | src="/static/img/footer/line-right.png">
15 | </amp-img>
16 | <div class="cta-line right-half">
17 | <amp-img
18 | noloading
19 | height=215
20 | width=350
21 | layout=responsive
22 | src="/static/img/footer/line-right-2.png">
23 | </amp-img>
24 | </div>
25 |
26 | <div class="inner">
27 | <h2>{{_(cta.title)}}</h2>
28 | <div class="link-text">{{_(cta.link_text)}}</div>
29 | </div>
30 | </a>
31 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/wordpress.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.03 24.03"><defs><style>.cls-1{fill:#ccc;fill-rule:evenodd;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M22.55,6.25a8.91,8.91,0,0,1,.08,1.24,11.33,11.33,0,0,1-.92,4.3L18.06,22.4a12,12,0,0,0,4.5-16.15ZM12.23,13.07,8.62,23.54A12,12,0,0,0,16,23.34a1,1,0,0,1-.09-.16L12.23,13.07Zm7.9-1.66a6.33,6.33,0,0,0-1-3.31A5.62,5.62,0,0,1,18,5.28a2.08,2.08,0,0,1,2-2.13h.15A12,12,0,0,0,2,5.42l.77,0C4,5.43,6,5.28,6,5.28a.5.5,0,0,1,.07,1s-.65.08-1.37.11L9,19.39l2.63-7.88L9.78,6.38c-.65,0-1.26-.11-1.26-.11a.5.5,0,0,1,.08-1s2,.15,3.16.15S15,5.28,15,5.28a.5.5,0,0,1,.07,1s-.65.08-1.37.11L18,19.29l1.2-4a11.23,11.23,0,0,0,.91-3.88ZM0,12A12,12,0,0,0,6.77,22.82L1,7.12A11.94,11.94,0,0,0,0,12Zm0,0"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_post-item.scss:
--------------------------------------------------------------------------------
```scss
1 | .post-item {
2 | border-bottom: solid 1px $color-grey-lt;
3 | padding: 30px 0 40px 0;
4 |
5 | &:last-of-type {
6 | border-bottom: 0;
7 | margin-bottom: 60px;
8 | }
9 |
10 | .post-title {
11 | font-weight: 300;
12 | text-transform: none;
13 |
14 | h4:hover {
15 | color: $color-ampblue;
16 | }
17 | }
18 |
19 | .event-meta {
20 | margin: 10px 0;
21 | .smaller {
22 | color: $color-grey-md;
23 | display: inline-block;
24 | margin-right: 10px;
25 |
26 | amp-img {
27 | display: inline-block;
28 | position: relative;
29 | top: 2px;
30 | }
31 |
32 | i-amp-sizer {
33 | width: 15px;
34 | }
35 | }
36 | }
37 |
38 | .post-excerpt {
39 | margin-top: 12px;
40 | }
41 |
42 | .post-meta {
43 | // @extend %text-label;
44 | margin-bottom: 12px;
45 |
46 | .time {
47 | color: $color-grey-md;
48 |
49 | &::before {
50 | content: '|';
51 | margin-left: .8em;
52 | margin-right: 1.1em;
53 | }
54 | }
55 | }
56 | }
57 |
```
--------------------------------------------------------------------------------
/assets/sass/_points.scss:
--------------------------------------------------------------------------------
```scss
1 | .points {
2 | max-width: 1200px;
3 | padding: 100px;
4 | position: relative;
5 | }
6 |
7 | .point {
8 | border-bottom: 3px solid #e5f7ff;
9 | padding: 30px;
10 |
11 | &:last-child {
12 | border-bottom: 0;
13 | }
14 | }
15 |
16 | .point-text {
17 | align-items: flex-start;
18 | display: flex;
19 |
20 | h4, .description {
21 | margin: 0 20px;
22 | width: 0;
23 | }
24 |
25 | h4 {
26 | flex: 1 1 auto;
27 | }
28 |
29 | .description {
30 | flex: 2 1 auto;
31 |
32 | a {
33 | text-transform: none;
34 | }
35 |
36 | p {
37 | margin-top: 0;
38 | }
39 | }
40 | }
41 |
42 | .point-example {
43 | margin: 40px 20px 20px;
44 | }
45 |
46 | @include max-screen($tablet-breakpoint) {
47 | .points {
48 | padding: 100px 30px;
49 | }
50 | }
51 |
52 | @include max-screen($tablet-portrait-breakpoint) {
53 | .points {
54 | padding: 0;
55 | }
56 |
57 | .point {
58 | padding: 30px 0;
59 |
60 | .point-text {
61 | display: block;
62 | }
63 |
64 | h4, .description {
65 | width: auto;
66 | }
67 |
68 | h4 {
69 | margin-bottom: 30px;
70 | }
71 | }
72 | }
73 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/include_image.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Include an Image
3 | $order: 1
4 | ---
5 |
6 | Most HTML tags can be used directly in AMP HTML, but certain tags, such as the `<img>` tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags (and a few problematic tags are outright banned, see [HTML Tags in the specification](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
7 |
8 | To demonstrate what additional markup could look like, here’s the code required to embed an image into the page:
9 |
10 | [sourcecode:html]
11 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
12 | [/sourcecode]
13 |
14 | To learn why we’re replacing tags like `<img>` with `<amp-img>`, and how many are available, head to [Include Iframes and Media](/docs/guides/amp_replacements.html).
15 |
16 | <a class="go-button button" href="/docs/get_started/create/presentation_layout.html">Continue to Step 3</a>
17 |
```
--------------------------------------------------------------------------------
/content/learn/who-uses-amp.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $title@: Who is AMP for?
2 | $order: 1
3 | class: about-who
4 | $view: /views/about-who.html
5 | $parent: /content/learn/overview.yaml
6 |
7 | hero:
8 | title@: Who is AMP for?
9 | subtitle@: Join an ecosystem of 850,000 domains, leading platforms, and 100+ technology providers using AMP.
10 | hero_img_base: /static/img/about/who-use-amp/who_phones_hero
11 | line_img: who_lines1.svg
12 | triangle_img: hero_triangle.png
13 |
14 | cards:
15 | - name@: Publishers
16 | cta@: Learn More
17 | icon: who_icon_publishers.svg
18 |
19 | # - name@: SMB
20 | # cta@: Learn More
21 | # icon: card_smb.svg
22 |
23 | - name@: Ad Tech Platforms
24 | cta@: Learn More
25 | icon: who_icon_adtech.svg
26 |
27 | - name@: Advertisers
28 | cta@: Learn More
29 | icon: who_icon_advertisers.svg
30 |
31 | # - name@: Developers
32 | # cta@: Learn More
33 | # icon: card_developers.svg
34 |
35 | cta:
36 | title@: Success stories
37 | link_text@: Read case studies
38 | link_url: /content/learn/case-studies.html
39 |
```
--------------------------------------------------------------------------------
/assets/manifest.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "AMPProject.org",
3 | "short_name": "AMP",
4 | "start_url": "/",
5 | "display": "standalone",
6 | "background_color": "#fff",
7 | "theme_color": "#0379C4",
8 | "description": "The official website and documentation for the Accelerated Mobile Pages project.",
9 | "icons": [{
10 | "src": "/static/img/icons/48.png",
11 | "sizes": "48x48",
12 | "type": "image/png"
13 | }, {
14 | "src": "/static/img/icons/72.png",
15 | "sizes": "72x72",
16 | "type": "image/png"
17 | }, {
18 | "src": "/static/img/icons/96.png",
19 | "sizes": "96x96",
20 | "type": "image/png"
21 | }, {
22 | "src": "/static/img/icons/144.png",
23 | "sizes": "144x144",
24 | "type": "image/png"
25 | }, {
26 | "src": "/static/img/icons/168.png",
27 | "sizes": "168x168",
28 | "type": "image/png"
29 | }, {
30 | "src": "/static/img/icons/192.png",
31 | "sizes": "192x192",
32 | "type": "image/png"
33 | }, {
34 | "src": "/static/img/icons/any.svg",
35 | "sizes": "any"
36 | }]
37 | }
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Bilder hinzufügen
3 | ---
4 |
5 | Die meisten HTML-Tags können direkt im AMP-HTML-Code verwendet werden, aber manche Tags wie das `<img>`-Tag werden durch gleichwertige oder leicht verbesserte benutzerdefinierte AMP-HTML-Tags ersetzt. Einige problematische HTML-Tags werden auch komplett ausgeschlossen, [wie in der Spezifikation angegeben](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md).
6 |
7 | Hier sehen Sie ein Beispiel für den Code, mit dem Sie ein Bild auf der Seite einbetten:
8 |
9 | [sourcecode:html]
10 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | Weshalb wir Tags wie `<img>` durch `<amp-img>` ersetzen und wie viele es gibt, erfahren Sie unter [iFrames und Medien einschließen](/docs/guides/amp_replacements.html).
14 |
15 | <a class="go-button button" href="/de/docs/get_started/create/presentation_layout.html">Weiter mit Schritt 3</a>
16 |
```
--------------------------------------------------------------------------------
/assets/img/latest/line_hero_front.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 285 285" style="enable-background:new 0 0 285 285;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:url(#SVGID_1_);stroke-width:9;stroke-miterlimit:10;}
7 | </style>
8 | <g>
9 | <g id="Art">
10 |
11 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="6075.584" y1="-7105.7598" x2="6297.5864" y2="-7105.7598" gradientTransform="matrix(1 0 0 -1 -6066.02 -7013.6899)">
12 | <stop offset="0" style="stop-color:#FFFFFF"/>
13 | <stop offset="0.5" style="stop-color:#0DD3FF"/>
14 | <stop offset="1" style="stop-color:#0DD3FF"/>
15 | </linearGradient>
16 | <line class="st0" x1="228.9" y1="14.2" x2="12.2" y2="170"/>
17 | </g>
18 | </g>
19 | </svg>
20 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Bir Görüntü Ekleyin
3 | ---
4 |
5 | HTML etiketlerinin birçoğu AMP HTML›de kullanılabilir, ancak `<img>` etiketi gibi bazı etiketler eşdeğeri ya da biraz geliştirilmiş özel AMP HTML etiketleri ile değiştirilir (ve sorunlu etiketlerden birkaçı tamamen yasaklanır, bkz.[Spesifikasyondaki HTML Etiketleri](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
6 |
7 | Ek işaretlerin nasıl görüneceğini örneklendirmek için, sayfaya bir görüntü yerleştirmek için gerekli kod burada verilmiştir:
8 |
9 | [sourcecode:html]
10 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | `<img>` gibi etiketleri `<amp-img>` ile neden değiştirdiğimizi ve kaç tane mevcut olduğunu öğrenmek için, [Bilgi İletim Birimleri ve Medya Ekle](/docs/guides/amp_replacements.html) bölümüne gidin.
14 |
15 | <a class="go-button button" href="/tr/docs/get_started/create/presentation_layout.html">Adım 3 ile devam edin</a>
16 |
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_twitter.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 45 35" style="enable-background:new 0 0 45 35;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:#F4F4F4;}
7 | </style>
8 | <title>icon_twitter</title>
9 | <g>
10 | <g id="Art">
11 | <path class="st0" d="M43.8,4.3c-1.6,0.7-3.3,1.2-5,1.4c1.8-1.1,3.2-2.8,3.8-4.9c-1.7,1-3.6,1.7-5.6,2.1c-3.3-3.5-8.9-3.7-12.4-0.4
12 | c-2.3,2.1-3.2,5.3-2.5,8.4c-7-0.4-13.6-3.7-18.1-9.2c-2.3,4-1.1,9.1,2.7,11.7c-1.4,0-2.8-0.4-4-1.1c0,0,0,0.1,0,0.1
13 | c0,4.2,2.9,7.8,7,8.6c-1.3,0.4-2.7,0.4-4,0.1c1.1,3.6,4.4,6,8.2,6.1C10.9,29.7,7.1,31,3.2,31c-0.7,0-1.4,0-2.1-0.1
14 | c4,2.6,8.7,3.9,13.4,3.9c16.1,0,24.9-13.3,24.9-24.9c0-0.4,0-0.8,0-1.1C41.2,7.6,42.7,6,43.8,4.3L43.8,4.3z"/>
15 | </g>
16 | </g>
17 | </svg>
18 |
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_tip.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-2,.cls-3{stroke:#00e676;stroke-miterlimit:10;}.cls-2,.cls-3{fill:none;}.cls-3{stroke-linecap:round;}</style></defs><title>icon_tip1</title><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M41.63,33.11a9.15,9.15,0,1,0-16.46,5.5h0a16.83,16.83,0,0,1,3.39,9.61H36.4a16.83,16.83,0,0,1,3.39-9.61h0A9.1,9.1,0,0,0,41.63,33.11Z"/><path class="cls-2" d="M34.39,33.14a1.29,1.29,0,1,1,1.29,1.29H29.28a1.29,1.29,0,1,1,1.29-1.29V48.22h3.82Z"/><line class="cls-3" x1="32.48" y1="11.86" x2="32.48" y2="18.93"/><line class="cls-3" x1="17.9" y1="16.91" x2="22.9" y2="21.91"/><line class="cls-3" x1="11.88" y1="31.5" x2="18.95" y2="31.5"/><line class="cls-3" x1="53.12" y1="31.46" x2="46.05" y2="31.46"/><line class="cls-3" x1="47.07" y1="16.88" x2="42.07" y2="21.88"/><rect class="cls-2" x="28.52" y="48.22" width="7.92" height="3.62"/></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/include_image@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Incluir uma imagem
3 | ---
4 |
5 | A maioria das tags HTML podem ser usadas diretamente em AMP HTML, mas algumas, como a tag `<img>`, são substituídas por tags AMP HTML equivalentes ou ligeiramente melhoradas e personalizadas (e algumas poucas tags problemáticas são diretamente eliminadas, consulte [Tags HTML na especificação](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
6 |
7 | Para demonstrar qual seria a aparência de uma marcação adicional, veja o código necessário para incorporar uma imagem na página:
8 |
9 | [sourcecode:html]
10 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | Para saber por que estamos substituindo tags como `<img>` por `<amp-img>` e quantas estão disponíveis, consulte [Incluir iframes e mídia](/docs/guides/amp_replacements.html).
14 |
15 | <a class="go-button button" href="/pt_br/docs/get_started/create/presentation_layout.html">Continuar para a etapa 3</a>
16 |
```
--------------------------------------------------------------------------------
/assets/sass/_carousel.scss:
--------------------------------------------------------------------------------
```scss
1 | amp-carousel {
2 | .card-container {
3 | padding-left: 35px;
4 | padding-right: 35px;
5 | }
6 | }
7 |
8 | .amp-carousel-button {
9 | background: transparent;
10 | cursor: pointer;
11 |
12 | &:before, &:after {
13 | background: $color-bluegrey;
14 | content: '';
15 | display: block;
16 | height: 2px;
17 | width: 20px;
18 | }
19 |
20 | &:before {
21 | transform: translate(10px, 10px) rotate(45deg);
22 | }
23 |
24 | &:after {
25 | transform: translate(10px, 22px) rotate(-45deg);
26 | }
27 | }
28 |
29 | .amp-carousel-button-prev {
30 | left: 0;
31 | transform: translateY(-50%) translateY(-10px) rotateY(180deg);
32 | }
33 |
34 | .amp-carousel-button-next {
35 | right: 0;
36 | transform: translateY(-50%) translateY(-10px);
37 | }
38 |
39 | .rtl {
40 | .amp-carousel-button-prev {
41 | left: 10px;
42 | }
43 |
44 | .amp-carousel-button-next {
45 | right: 10px;
46 | }
47 | }
48 |
49 | @include max-screen($mobile-breakpoint) {
50 | amp-carousel {
51 | .amp-carousel-button {
52 | display: none;
53 | }
54 |
55 | .card-container {
56 | padding-left: 10px;
57 | padding-right: 10px;
58 | }
59 | }
60 | }
61 |
62 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Menyertakan Gambar
3 | ---
4 |
5 | Sebagian besar tag HTML bisa digunakan secara langsung dalam AMP HTML, namun tag tertentu seperti tag `<img>`, diganti dengan yang setara atau tag AMP HTML khusus yang telah sedikit disempurnakan (dan beberapa tag bermasalah langsung dicekal, lihat [Tag HTML dalam spesifikasi](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
6 |
7 | Untuk mendemonstrasikan seperti apa tampilan markup tambahan ini, berikut kode yang diperlukan untuk menyematkan sebuah gambar ke dalam halaman:
8 |
9 | [sourcecode:html]
10 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | Untuk mengetahui alasan kami mengganti tag seperti `<img>` dengan `<amp-img>`, dan jumlah ketersediaannya, kunjungi [Menyertakan Iframe dan Media](/docs/guides/amp_replacements.html).
14 |
15 | <a class="go-button button" href="/id/docs/get_started/create/presentation_layout.html">Lanjutkan ke Langkah 3</a>
16 |
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_note.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65"><defs><style>.cls-1{fill:#fff;fill-opacity:0.7;}.cls-1,.cls-2,.cls-3,.cls-4{stroke:#0389ff;}.cls-1,.cls-3,.cls-4{stroke-miterlimit:10;}.cls-2,.cls-3,.cls-4{fill:none;}.cls-2{stroke-linejoin:round;}.cls-4{stroke-linecap:round;}</style></defs><title>icon_note1</title><g id="Layer_1" data-name="Layer 1"><polygon class="cls-1" points="40.41 45.75 40.41 45.75 18.28 45.75 18.28 18.26 45.77 18.26 45.77 41.31 40.41 45.75"/><polygon class="cls-2" points="45.77 41.28 40.64 41.31 40.74 45.75 45.77 41.28"/><line class="cls-3" x1="22.2" y1="28.36" x2="39.35" y2="28.36"/><line class="cls-3" x1="22.2" y1="31.5" x2="33.79" y2="31.5"/><line class="cls-3" x1="22.2" y1="34.64" x2="36.35" y2="34.64"/><path class="cls-4" d="M23.18,17.81a1.84,1.84,0,0,1,1.76-1.3h0"/><path class="cls-4" d="M24.95,16.51a1.83,1.83,0,0,1,1.84,1.82v4.62a1.83,1.83,0,0,1-1.84,1.82h0a1.83,1.83,0,0,1-1.84-1.82V20.71"/></g></svg>
```
