This is page 1 of 20. Use http://codebase.md/cloudflare/docs/imgs/claudemcp.gif?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:
--------------------------------------------------------------------------------
```
{
"projects": {
"default": "ampproject-b5f4c",
"staging": "ampproject-staging",
"production": "ampproject-b5f4c",
"custom": "ampproject-custom"
}
}
```
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
```
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
[*.json]
indent_style = space
indent_size = 2
```
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
```
*.mo
.DS_Store
.sass-cache
.idea
node_modules
build
assets/css/*
content/includes/who.yaml
content/docs/contribute/governance.md
content/learn/design-principles.md
content/docs/reference/spec.md
content/docs/reference/components/**/*.md
```
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
```json
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"no-else-return": [
"error"
],
"array-bracket-spacing": [
"error",
"always",
{ "singleValue": false }
],
"brace-style": [
"error",
"1tbs"
]
}
}
```
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
```yaml
language: node_js
node_js:
- node
cache:
directories:
- node_modules # NPM packages
- $(npm config get prefix)/bin/gulp
- $(npm config get prefix)/bin/firebase
- /home/travis/.nvm/versions/node/v7.2.0/lib/node_modules
- $HOME/.cache/pip
- /home/travis/.local/bin
install:
- pip install grow --user
- npm install -g gulp
- npm install -g firebase-tools
- npm install
script:
- 'if [ "${TRAVIS_BRANCH}" = "production" ]; then firebase use production; fi'
- 'if [ "${TRAVIS_BRANCH}" = "master" ]; then firebase use staging; fi'
- grow build
after_success:
- firebase deploy --token "$FIREBASE_TOKEN"
branches:
only:
- production
- master
env:
global:
secure: RRx3CaLmCC0rA+MOYXTI3HTAMc2TI9AQcodUfZhr+vNEL8d0q09EZkYU/TjkRx9VQ1paOT1AmxNQJtHhysIS7B/pSAZoNG9bPC5UXmiZHVLbRB4qPmMMte9zdfKanGY3/g3zt2qOTUVVL4ymDy5xK2uYZ/KgkrDx1gGH3mSoTO6gK79I4nisJYDcRfzI/UUvrNkdjlFYrFnZbnMdnqZSryuv7CrdZWpYtLDryzJ+bcgq6Vr2liiKwmVb+/tff3EblAzBcWMAM4I0MzRaM+Mahw0EEENc24brtVoQTbvSdXXJ9CEIfWjykSyZh0WrZkx3tKY95GDr9PCHEkyI5d2kUGYDbRjjrEuBEdPTcjx6zZ2vXUlVPeDxNwLO1WZwVy0Om1dg/jwPjVDtsubjBaC+4XezJCywaZruGD6Q0iStemMVapN19SbGJzo9uYG8EvVB4OFlmY2l/fOadTIC9YHpYJREhGc2DBW9jHfTK1dgyW1JpnFgieEOSw24gsvbxSSV5db7tJU36Pt1Kkcu3IZnYyHlBUmYKZ24cizh6azfkHRaLvSvdJuvx0euuoz/WOJ77toUD6wPc0/OtrKnkCfQowtciMdnKNhuu4JpegdZ9gQqpV2gQ0XpPgxc4afKCd0L5QiUNFCu1J+fQ0obclqWZpC0VzHdDpNMckv4I7XqnhI=
```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
```markdown
AMPProject.org [](https://travis-ci.org/ampproject/docs)
=========================
You're looking at the source code of the official website of the AMP Project.
Even if you don't plan on contributing, explore how we've built the site for
a good example of how to build a canonical, responsive standalone AMP site.
How to build the site
---------------------
### Install
Install [Grow](http://grow.io) and npm dependencies:
```sh
$ curl https://install.growsdk.org | bash
$ npm install
```
### Get a GitHub token or app id/secret
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.
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.
#### Personal access token
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.)
2. In your shell export the generated personal access token as `AMP_DOC_TOKEN`
#### Application client id and secret
If you prefer not to use a personal access token, you can also create a GitHub application and use its id and secret.
1. Register for a [GitHub application](https://github.com/settings/applications/new)
2. In your shell export the application client id as `AMP_DOC_ID` and the client secret as `AMP_DOC_SECRET`
### Build
```sh
$ grow build
```
This will generate a static, complete build of the site into the **build* folder.
### Develop
Note: Be sure to run `grow build` at least once to pull in reference docs before running the following command.
```sh
$ grow run
```
You can now open http://localhost:8080/ and continue working on the source files, then reload the page to see changes appear.
Support
-------
If you've found an error or inconsistency, please file an issue:
https://github.com/ampproject/docs/issues
Patches are encouraged, and may be submitted by forking this project and
submitting a pull request through GitHub.
License
-------
All image and audio files except in folders "source/img/partners",
"source/img/publishers" and "source/img/quotes" (including *.png, *.jpg, *.svg,
*.mp3, *.wav and *.ogg) are licensed under the CC-BY-NC license. Images in the
excluded folders are not licensed.
All other files are licensed under the Apache 2 license.
- - -
Copyright 2015 Google, Inc.
Licensed to the Apache Software Foundation (ASF) under one or more contributor
license agreements. See the NOTICE file distributed with this work for
additional information regarding copyright ownership. The ASF licenses this
file to you under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
```
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
```markdown
# How to become a contributor and submit your own code
## Contributor License Agreements
We'd love to accept your patches and doc suggestions! Before we can take them, we
have to jump a couple of legal hurdles.
Please fill out either the individual or corporate Contributor License Agreement
(CLA).
* If you are an individual writing original source code and you're sure you
own the intellectual property, then you'll need to sign an [individual CLA]
(https://developers.google.com/open-source/cla/individual).
* If you work for a company that wants to allow you to contribute your work,
then you'll need to sign a [corporate CLA]
(https://developers.google.com/open-source/cla/corporate).
Follow either of the two links above to access the appropriate CLA and
instructions for how to sign and return it. Once we receive it, we'll be able to
accept your pull requests.
## Contributing A Patch
1. Submit an issue describing your proposed change to the repo in question.
1. The repo owner will respond to your issue promptly.
1. If your proposed change is accepted, and you haven't already done so, sign a
Contributor License Agreement (see details above).
1. Fork the desired repo, develop and test your code changes.
1. Ensure that your code adheres to the existing style in the sample to which
you are contributing. Refer to the
[Google Cloud Platform Samples Style Guide]
(https://github.com/GoogleCloudPlatform/Template/wiki/style.html) for the
recommended coding standards for this organization.
1. Ensure that your code has an appropriate set of unit tests which all pass.
1. Submit a pull request.
```
--------------------------------------------------------------------------------
/views/blank.html:
--------------------------------------------------------------------------------
```html
{{doc.html|render|safe}}
```
--------------------------------------------------------------------------------
/content/includes/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title: Partial templates
```
--------------------------------------------------------------------------------
/pwa/google7199ce9da1ad191b.html:
--------------------------------------------------------------------------------
```html
google-site-verification: google7199ce9da1ad191b.html
```
--------------------------------------------------------------------------------
/content/docs/contribute/github.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: GitHub
$order: 3
goto: https://github.com/ampproject/amphtml
---
```
--------------------------------------------------------------------------------
/content/pages/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
path: /{base}/
view: /views/base.html
localization:
path: /{locale}/{base}/
```
--------------------------------------------------------------------------------
/assets/sass/pages/_list.scss:
--------------------------------------------------------------------------------
```scss
.list {
.title {
text-align: center;
}
.event-meta {
margin: 0;
}
}
```
--------------------------------------------------------------------------------
/content/docs/guides/debug.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Debug
$order: 1
goto_internal: /content/docs/guides/debug/validate.md
---
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
path: /amp-conf-2017/{base}/
view: /views/base.html
$localization:
locales:
- en
```
--------------------------------------------------------------------------------
/content/docs/contribute/file-a-bug.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: File a bug
$order: 2
goto: https://github.com/ampproject/amphtml/issues/new
---
```
--------------------------------------------------------------------------------
/content/docs/getting-started.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Getting Started
$order: 0
goto: /content/docs/get_started/general/create.md
---
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Deploy
$order: 2
goto_internal: /content/docs/guides/deploy/analytics_amp.md
---
```
--------------------------------------------------------------------------------
/content/includes/doc.yaml:
--------------------------------------------------------------------------------
```yaml
cta:
title@: Need Dev Support?
link_text@: Visit our FAQ
link_url: /content/support/faqs.md
```
--------------------------------------------------------------------------------
/content/includes/lists.yaml:
--------------------------------------------------------------------------------
```yaml
past_event:
title@: Past Events
blog:
title@: AMP Blog
roadmap:
title@: AMP Roadmap
share@: Share
```
--------------------------------------------------------------------------------
/content/support/developer/mailing-list.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Support Forum
$order: 1
goto: https://groups.google.com/forum/#!forum/amphtml-discuss
group: 0
---
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Author / Develop
$order: 0
goto_internal: /content/docs/guides/author_develop/responsive_amp.md
---
```
--------------------------------------------------------------------------------
/content/learn/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Learn
$path: /learn/{base}/
$view: /views/section_page.html
$localization:
path: /{locale}/learn/{base}/
```
--------------------------------------------------------------------------------
/content/support/developer/stack-overflow.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Stack Overflow Community
$order: 0
goto: https://stackoverflow.com/questions/tagged/amp-html
group: 0
---
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$path: /docs/guides/ads/{base}.html
$view: /views/doc.html
$localization:
path: /{locale}/docs/guides/ads/{base}.html
```
--------------------------------------------------------------------------------
/content/support/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Support
$path: /support/{base}/
$view: /views/section_page.html
$localization:
path: /{locale}/support/{base}/
```
--------------------------------------------------------------------------------
/content/support/developer/platform-bug.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Report a platform bug on GitHub
$order: 3
goto: https://github.com/ampproject/amphtml/issues/new
group: 1
---
```
--------------------------------------------------------------------------------
/content/docs/guides.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Guides
$order: 2
$parent: /content/docs/build.md
$view: /views/grid_page.html
class: bg-triangle-secondary
---
```
--------------------------------------------------------------------------------
/content/latest/blog/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Blog
$path: /latest/blog/{base}/
$view: /views/blog_detail.html
$localization:
path: /{locale}/latest/blog/{base}/
```
--------------------------------------------------------------------------------
/content/support/developer/documentation-bug.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Report a documentation bug on GitHub
$order: 4
goto: https://github.com/ampproject/docs/issues/new
group: 1
---
```
--------------------------------------------------------------------------------
/content/docs/reference.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Reference
$order: 3
$parent: /content/docs/build.md
$view: /views/grid_page.html
class: bg-triangle-secondary
---
```
--------------------------------------------------------------------------------
/content/docs/contribute.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Contribute
$order: 5
$parent: /content/docs/build.md
$view: /views/grid_page.html
class: bg-triangle-secondary
---
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$path: /docs/guides/analytics/{base}.html
$view: /views/doc.html
$localization:
path: /{locale}/docs/guides/analytics/{base}.html
```
--------------------------------------------------------------------------------
/content/support/faqs/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: FAQs
$path: /support/faqs/{base}.html
$view: /views/section_page.html
$localization:
path: /{locale}/support/faqs/{base}.html
```
--------------------------------------------------------------------------------
/assets/img/hamburger.svg:
--------------------------------------------------------------------------------
```
<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
$title@: Debug
$path: /docs/guides/debug/{base}.html
$localization:
path: /{locale}/docs/guides/debug/{base}.html
$view: /views/doc.html
```
--------------------------------------------------------------------------------
/content/docs/guides/embed/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Embed
$path: /docs/guides/embed/{base}.html
$localization:
path: /{locale}/docs/guides/embed/{base}.html
$view: /views/doc.html
```
--------------------------------------------------------------------------------
/content/includes/amp-iframe.md:
--------------------------------------------------------------------------------
```markdown
[sourcecode:html]
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[/sourcecode]
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Deploy
$path: /docs/guides/deploy/{base}.html
$localization:
path: /{locale}/docs/guides/deploy/{base}.html
$view: /views/doc.html
```
--------------------------------------------------------------------------------
/content/learn/case-studies/category/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Case Studies
$path: /case-studies/{base}/
$view: /views/about-casestudies.html
$localization:
path: /{locale}/case-studies/{base}/
```
--------------------------------------------------------------------------------
/content/support/vendor.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Vendor Support
$hidden: true
$order: 3
$parent: /content/support/support.md
$localization:
path: /{locale}/support/{base}/
---
```
--------------------------------------------------------------------------------
/content/support/platform.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Platform Support
$order: 1
$hidden: true
$parent: /content/support/support.md
$localization:
path: /{locale}/support/{base}/
---
```
--------------------------------------------------------------------------------
/content/learn/case-studies/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$path: /case-studies/{base}/
$view: /views/case-study.html
$localization:
path: /{locale}/case-studies/{base}/
stylesheet: pages/case-study.css
```
--------------------------------------------------------------------------------
/content/docs/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Docs
$path: /docs/{base}/
$view: /views/doc.html
$localization:
path: /{locale}/docs/{base}/
build_root: true
index_path: /content/docs/build.md
```
--------------------------------------------------------------------------------
/content/learn/who/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Who Uses AMP
$path: /learn/who-uses-amp/{base}/
$view: /views/about-who-vertical.html
$localization:
path: /{locale}/learn/who-uses-amp/{base}/
```
--------------------------------------------------------------------------------
/content/docs/build.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Docs
$order: 0
$hidden: true
$path: /docs/
$localization:
path: /{locale}/docs/
$view: /views/grid_page.html
class: bg-triangle-primary
---
```
--------------------------------------------------------------------------------
/content/latest/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: The Latest
$path: /latest/{base}/
$view: /views/list_page.html
$localization:
path: /{locale}/latest/{base}/
index_path: /content/latest/latest.html
```
--------------------------------------------------------------------------------
/content/support/developer/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Developer Support
$path: /support/developer/{base}.html
$view: /views/section_page.html
$localization:
path: /{locale}/support/developer/{base}.html
```
--------------------------------------------------------------------------------
/assets/sass/pages/_faqs.scss:
--------------------------------------------------------------------------------
```scss
.faqs {
.wrap amp-accordion {
margin: 100px 0;
}
@include max-screen($mobile-breakpoint) {
.wrap amp-accordion {
margin: 50px 0;
}
}
}
```
--------------------------------------------------------------------------------
/content/support/support.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Support
$order: 0
$hidden: true
$path: /support/
$view: /views/grid_page.html
$localization:
path: /{locale}/support/
class: bg-triangle-primary
---
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Author / Develop
$path: /docs/guides/author-develop/{base}.html
$localization:
path: /{locale}/docs/guides/author-develop/{base}.html
$view: /views/doc.html
```
--------------------------------------------------------------------------------
/content/docs/blank.html:
--------------------------------------------------------------------------------
```html
---
$view: /views/blank.html
$hidden: true
---
<!DOCTYPE html>
<html ⚡{% if doc.locale.is_rtl %} dir="rtl" lang="ar"{% endif %}>
{% include "/views/partials/head.html" %}
```
--------------------------------------------------------------------------------
/content/docs/tutorials.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Tutorials
$order: 1
$parent: /content/docs/build.md
$view: /views/grid_page.html
collectionPath: /content/docs/get_started
class: bg-triangle-secondary
---
```
--------------------------------------------------------------------------------
/content/support/faqs.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: FAQs
$order: 0
$parent: /content/support/support.md
$localization:
path: /{locale}/support/{base}/
$view: /views/grid_page.html
class: bg-triangle-secondary
---
```
--------------------------------------------------------------------------------
/content/docs/reference/components/media/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/reference/components/media/{base}.html
$localization:
path: /{locale}/docs/reference/components/media/{base}.html
$title@: Media - AMP components
```
--------------------------------------------------------------------------------
/content/docs/reference/components/layout/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/reference/components/layout/{base}.html
$localization:
path: /{locale}/docs/reference/components/layout/{base}.html
$title@: Layout - AMP components
```
--------------------------------------------------------------------------------
/content/docs/reference/components/social/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/reference/components/social/{base}.html
$localization:
path: /{locale}/docs/reference/components/social/{base}.html
$title@: Social - AMP components
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/guides/author-develop/responsive/{base}.html
$localization:
path: /{locale}/docs/guides/author-develop/responsive/{base}.html
$title@: Styling & Layout
```
--------------------------------------------------------------------------------
/content/docs/reference/components/ads-analytics/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/reference/components/ads/{base}.html
$localization:
path: /{locale}/docs/reference/components/ads/{base}.html
$title@: Ads & Analytics - AMP components
```
--------------------------------------------------------------------------------
/content/support/developer/slack.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Slack Channel
$order: 2
goto: https://docs.google.com/a/google.com/forms/d/e/1FAIpQLSd83J2IZA6cdR6jPwABGsJE8YL4pkypAbKMGgUZZriU7Qu6Tg/viewform?fbzx=4406980310789882877
group: 0
---
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$path: /docs/get_started/login_requiring/{base}.html
$view: /views/doc.html
$localization:
path: /{locale}/docs/get_started/login_requiring/{base}.html
$title@: Create a login-requiring AMP page
```
--------------------------------------------------------------------------------
/content/docs/reference/components/dynamic-content/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/reference/components/dynamic/{base}.html
$localization:
path: /{locale}/docs/reference/components/dynamic/{base}.html
$title@: Dynamic Content - AMP components
```
--------------------------------------------------------------------------------
/content/docs/reference/components/presentation/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$view: /views/doc.html
$path: /docs/reference/components/presentation/{base}.html
$localization:
path: /{locale}/docs/reference/components/presentation/{base}.html
$title@: Presentation - AMP components
```
--------------------------------------------------------------------------------
/assets/img/nav/back_arrow.svg:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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
'use strict';
self.addEventListener('install', () => {
self.skipWaiting();
});
self.addEventListener('activate', () => {
// immediately claim the currently connected clients
self.clients.claim();
});
```
--------------------------------------------------------------------------------
/views/partials/search.html:
--------------------------------------------------------------------------------
```html
<form action="//www.google.com/search" method="get" class="searchbar" target="_top">
<input class="query" name="q" type="text">
<input name="as_sitesearch" type="hidden" value="www.ampproject.org">
<button name="search" type="submit"></button>
</form>
```
--------------------------------------------------------------------------------
/content/support/developer.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Developer Support
$order: 2
$parent: /content/support/support.md
$localization:
path: /{locale}/support/{base}/
$view: /views/grid_page.html
class: bg-triangle-secondary
sections:
- title@: Community Resources
- title@: Send Feedback
---
```
--------------------------------------------------------------------------------
/assets/sass/_content-section.scss:
--------------------------------------------------------------------------------
```scss
// styles for support and other pages - move later
.post-title {
margin: 0 0 20px 0;
text-align: center;
}
.post-content {
@extend %text-small;
a {
@extend %link-inherit;
}
}
@include max-screen($mobile-breakpoint) {
.post-title {
text-align: left;
}
}
```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
```json
{
"name": "AMPProject.org",
"private": true,
"dependencies": {
"feedparser": "*",
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-plumber": "*",
"gulp-sass": "*",
"gulp-svg-sprite": "^1.3.6",
"moment": "*",
"octonode": "*",
"request": "*"
}
}
```
--------------------------------------------------------------------------------
/assets/img/symbols/template.scss:
--------------------------------------------------------------------------------
```scss
$icons: (
sprite: (width: {{spriteWidth}}px, height: {{spriteHeight}}px, svgPath: '/static/img/sprite.svg'),
{{#shapes}}
{{base}}: (width: {{width.inner}}px, height: {{height.inner}}px, backgroundX: {{position.absolute.x}}px, backgroundY: {{position.absolute.y}}px),
{{/shapes}});
```
--------------------------------------------------------------------------------
/assets/img/ic_open_in_new_black.svg:
--------------------------------------------------------------------------------
```
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<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"/>
</svg>
```
--------------------------------------------------------------------------------
/assets/img/ic_open_in_new_white.svg:
--------------------------------------------------------------------------------
```
<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<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"/>
</svg>
```
--------------------------------------------------------------------------------
/assets/sass/_animations.scss:
--------------------------------------------------------------------------------
```scss
@keyframes cta-line {
0% {
transform-origin: 100% 50%;
transform: scaleX(1);
}
45% {
transform-origin: 100% 50%;
transform: scaleX(0);
}
55% {
transform-origin: 0% 50%;
transform: scaleX(0);
}
100% {
transform-origin: 0% 50%;
transform: scaleX(1);
}
}
```
--------------------------------------------------------------------------------
/content/learn/case-studies/category/publishers.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Publishers
$titles:
page@: Success stories of the domains publishing AMP pages
$order: 1
$parent: /content/learn/case-studies.html
class: case-studies bg-triangle-secondary
cta:
title@: Create your first AMP page
link_text@: Start building now
link_url: /content/docs/get_started/create.md
---
```
--------------------------------------------------------------------------------
/content/learn/case-studies/category/advertisers.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Advertisers
$titles:
page@: Success stories of the domains publishing AMP pages
$order: 2
$parent: /content/learn/case-studies.html
class: case-studies bg-triangle-secondary
cta:
title@: Create your first AMP page
link_text@: Start building now
link_url: /content/docs/get_started/create.md
---
```
--------------------------------------------------------------------------------
/views/partials/faq-accordion.html:
--------------------------------------------------------------------------------
```html
<amp-accordion>
{% for question in doc.faq %}
<section>
<header class="accordion-header">
<h4 class="accordion-title">{{_(question.title)}}</h4>
</header>
<div class="accordion-content">
{{_(question.answer)|markdown|safe}}
</div>
</section>
{% endfor %}
</amp-accordion>
```
--------------------------------------------------------------------------------
/assets/img/symbols/caret-right.svg:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
// @import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_cards.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_about-who.scss';
```
--------------------------------------------------------------------------------
/content/learn/case-studies.html:
--------------------------------------------------------------------------------
```html
---
$title@: Case Studies
$titles:
page@: Success stories of the domains publishing AMP pages
$order: 2
$path: /case-studies/
$parent: /content/learn/overview.yaml
$view: /views/about-casestudies.html
class: case-studies bg-triangle-secondary
cta:
title@: Create your first AMP page
link_text@: Start building now
link_url: /content/docs/get_started/create.md
---
```
--------------------------------------------------------------------------------
/assets/sass/design-principles.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_bg-triangle.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_design-principles.scss';
```
--------------------------------------------------------------------------------
/content/docs/guides/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Guides
$path: /docs/guides/{base}.html
$view: /views/doc.html
$localization:
path: /{locale}/docs/guides/{base}.html
index_path: /content/docs/guides.md
navigation:
prev:
section: true
title@: Tutorials
href: /content/docs/get_started/general/create.md
next:
section: true
title@: Reference
href: /content/docs/reference/components.md
```
--------------------------------------------------------------------------------
/content/docs/contribute/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Contribute
$path: /docs/contribute/{base}/
$view: /views/doc.html
$localization:
path: /{locale}/docs/contribute/{base}/
index_path: /content/docs/contribute.md
navigation:
prev:
section: true
title@: Reference
href: /content/docs/reference/components.md
next:
section: true
title@: Tutorials
href: /content/docs/get_started/general/create.md
```
--------------------------------------------------------------------------------
/assets/img/arrow.svg:
--------------------------------------------------------------------------------
```
<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
$title@: Reference
$path: /docs/reference/{base}.html
$view: /views/doc.html
$localization:
path: /{locale}/docs/reference/{base}.html
index_path: /content/docs/reference.md
navigation:
prev:
section: true
title@: Guides
href: /content/docs/guides/author_develop/responsive_amp.md
next:
section: true
title@: Contribute
href: /content/docs/contribute/contribute.md
```
--------------------------------------------------------------------------------
/assets/img/nav/next_level.svg:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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
.large-cta {
background: $gradient-anglebold;
padding: 100px 0;
position: relative;
text-align: center;
.large-cta-lines {
position: absolute;
&.left {
bottom: -30%;
left: -10%;
}
&.right {
right: -5%;
top: -30%;
}
}
h1, p {
color: $color-white;
margin: 0 auto 50px;
max-width: 600px;
}
h1 + p {
margin-top: -30px;
}
}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
$path: /docs/get_started/create/{base}.html
$view: /views/doc.html
$localization:
path: /{locale}/docs/get_started/create/{base}.html
$title@: Create Your First AMP Page
navigation:
prev:
section: true
title@: Contribute
href: /content/docs/contribute/contribute.md
next:
subtitle@: Next Tutorial
title@: Logins with AMP
href: /content/docs/get_started/login_requiring.md
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Crea tu primera página AMP
---
¿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.
{% include "/views/partials/sub_nav.html" %}
<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
$title@: Tutorials
$view: /views/doc.html
$path: /docs/get_started/{base}.html
$localization:
path: /{locale}/docs/get_started/{base}.html
index_path: /content/docs/getting-started.md
navigation:
prev:
section: true
title@: Contribute
href: /content/docs/contribute/contribute.md
next:
section: true
title@: Guides
href: /content/docs/guides/author_develop/responsive_amp.md
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Tworzenie pierwszej strony AMP
---
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.
{% include "/views/partials/sub_nav.html" %}
<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
---
$title: Criar sua primeira página AMP
---
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.
{% include "/views/partials/sub_nav.html" %}
<a class="button go-button" href="/pt_br/docs/get_started/create/basic_markup.html">Continuar para a etapa 1</a>
```
--------------------------------------------------------------------------------
/assets/sass/about-how.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_bg-triangle.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_syntax_highlighting.scss';
@import '_points.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_about-how.scss';
```
--------------------------------------------------------------------------------
/content/docs/get_started/create.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Create Your First AMP Page
$order: 0
numbered: 1
---
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.
{% include "/views/partials/sub_nav.html" %}
<a class="button go-button" href="/docs/get_started/create/basic_markup.html">Continue to Step 1</a>
```
--------------------------------------------------------------------------------
/assets/sass/about-overview.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_bg-triangle.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_syntax_highlighting.scss';
@import '_accordions.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_about-overview.scss';
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Crea la tua prima pagina AMP
---
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.
{% include "/views/partials/sub_nav.html" %}
<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
---
$title: Créer votre première page AMP
---
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.
{% include "/views/partials/sub_nav.html" %}
<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
---
$title: Summary
$order: 3
---
In this tutorial, we explored how to combine `amp-access` and `amp-form` to create a comment section that requires a login.
To learn more, visit the following resources:
- [amp-access](https://www.ampproject.org/docs/reference/components/amp-access)
- [amp-form](https://www.ampproject.org/docs/reference/components/amp-form)
- ["Comment Section" Example](https://ampbyexample.com/samples_templates/comment_section/)
```
--------------------------------------------------------------------------------
/content/docs/get_started/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Membuat Halaman AMP Pertama Anda
---
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.
{% include "/views/partials/sub_nav.html" %}
<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
---
$title: Ihre erste AMP-Seite
---
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.
{% include "/views/partials/sub_nav.html" %}
<a class="button go-button" href="/de/docs/get_started/create/basic_markup.html">Weiter mit Schritt 1</a>
```
--------------------------------------------------------------------------------
/views/list_page.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container sm">
<div class="content">
{{doc.html|render|safe}}
</div>
</div>
{% if doc.cta %}
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% endif %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/about-who-vertical.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_bg-triangle.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_points.scss';
@import '_large-cta.scss';
@import '_carousel.scss';
@import '_cards.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_about-who-vertical.scss';
```
--------------------------------------------------------------------------------
/assets/img/symbols/logo-blue-standalone.svg:
--------------------------------------------------------------------------------
```
<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
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_content.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_share.scss';
@import '_cards.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_roadmap.scss';
@import 'pages/_post-detail.scss';
@import '_post-item.scss';
@import '_bg-triangle.scss';
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/publish.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Final Steps Before Publishing
$order: 5
---
Congrats! You've tested your page locally and fixed all validation errors, which means your first AMP page is ready to ship.
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/).
```
--------------------------------------------------------------------------------
/scripts/import_docs.json:
--------------------------------------------------------------------------------
```json
[
{
"title": "Design Principles",
"order": 3,
"from": "contributing/DESIGN_PRINCIPLES.md",
"to": "learn/design-principles.md",
"toc": true
},
{
"title": "Open Source Governance",
"order": 4,
"from": "GOVERNANCE.md",
"to": "docs/contribute/governance.md"
},
{
"title": "AMP HTML Specification",
"order": 2,
"from": "spec/amp-html-format.md",
"to": "docs/reference/spec.md"
}
]
```
--------------------------------------------------------------------------------
/assets/sass/_lightbox.scss:
--------------------------------------------------------------------------------
```scss
.lightbox {
background-color: rgba($color-black-95, .9);
&__container {
position: relative;
top: 50%;
padding: 50px;
transform: translateY(-50%);
@include max-screen($mobile-breakpoint) {
padding: 30px;
}
}
&__close {
cursor: pointer;
position: absolute;
right: 5px;
top: 5px;
width: 40px;
height: 40px;
background-image: url('/static/img/close.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 20px;
}
}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Langkah-Langkah Terakhir Sebelum Mempublikasikan
---
Selamat! Anda telah menguji halaman Anda secara lokal dan memperbaiki semua kesalahan validasi, yang berarti halaman AMP pertama Anda siap dikirimkan.
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/).
```
--------------------------------------------------------------------------------
/assets/img/about/overview/bg2.svg:
--------------------------------------------------------------------------------
```
<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
---
$title: Etapas finais antes de publicar
---
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.
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/).
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Abschließende Schritte vor der Veröffentlichung
---
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.
Ü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/).
```
--------------------------------------------------------------------------------
/podspec.yaml:
--------------------------------------------------------------------------------
```yaml
grow_version: ">=0.0.66"
home: /content/pages/home.html
localization:
default_locale: en
locales:
- ar
- de
- en
- es
- fr
- id
- it
- ja
- ko
- pl
- pt_BR
- ru
- th
- tr
- zh_CN
aliases:
en_UK: en_GB
static_dirs:
- static_dir: /assets/
serve_at: /static/
- static_dir: /pwa/
serve_at: /
preprocessors:
- kind: gulp
markdown:
extensions:
- kind: sourcecode
classes: true
deployments:
review:
destination: webreview
server: googwebreview.appspot.com
project: search/amp
name: amp
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Étapes finales avant publication
---
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.
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/).
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Ostatnie kroki przed publikacją
---
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.
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/).
```
--------------------------------------------------------------------------------
/assets/sass/docs.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_content.scss';
@import '_content-post.scss';
@import '_doc-nav.scss';
// @import '_grid.scss';
@import '_lang_switcher.scss';
@import '_syntax_highlighting.scss';
@import '_tables.scss';
@import '_callouts.scss';
@import '_toc.scss';
@import '_cards.scss';
@import '_accordions.scss';
// @import '_lightbox.scss';
@import '_sidebar.scss';
@import '_search.scss';
@import '_footer.scss';
```
--------------------------------------------------------------------------------
/views/partials/footer.html:
--------------------------------------------------------------------------------
```html
<footer>
<div class="container">
<div class="row">
<div class="twelve columns footer-icons">
<a class="footer-privacy" href="https://www.google.com/intl/en/policies/privacy/">{{_('Privacy')}}</a>
<a href="//twitter.com/amphtml">
<div class="footer-image twitter"></div>
</a>
<a href="//amphtml.wordpress.com/">
<div class="footer-image wordpress"></div>
</a>
</div>
</div>
</div>
</footer>
<amp-install-serviceworker src="/service-worker.js?v2" layout="nodisplay"></amp-install-serviceworker>
```
--------------------------------------------------------------------------------
/content/latest/list-past-event.html:
--------------------------------------------------------------------------------
```html
---
$title@: Past Events
$path: /latest/event/past-event
$parent: /content/latest/list-event.html
$localization:
path: /{locale}/latest/event/past-event
class: list
---
{% set lists = g.doc('/content/includes/lists.yaml', locale=doc.locale) %}
{% set events = g.doc('/content/includes/events.yaml', locale=doc.locale) %}
<h1 class="title">{{_(lists.past_event.title)}}</h1>
<section class="post-list">
{% for post in events.past_events %}
{% with past = true, meta = false %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% endfor %}
</section>
```
--------------------------------------------------------------------------------
/content/learn/browsers.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Supported Browsers
$order: 3
$hidden: true
---
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.
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.
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
---
$title: AMP Metrics
$order: 6
class: metrics
$hidden: true
---
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.
<amp-iframe layout="responsive" width="600" height="500" frameborder="0" sandbox="allow-scripts" src="https://ampproject-b5f4c.firebaseapp.com/metrics_chart.html">
<div class="center-content" placeholder>
<amp-img layout="fixed" width="100" height="100" src="/static/img/man.jpg"></amp-img>
<p>Loading data..</p>
</div>
</amp-iframe>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Últimos pasos antes de la publicación
---
¡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.
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/).
```
--------------------------------------------------------------------------------
/assets/img/home/shapebg.svg:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 16 8.3" style="enable-background:new 0 0 16 8.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000333;stroke-width:0.75;stroke-miterlimit:10;}
</style>
<title>carat</title>
<g id="Layer_2">
<g id="Layer_1-2">
<polyline class="st0" points="0.3,0.5 7.9,8 15.3,0.5 "/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/.github/workflows/semgrep.yml:
--------------------------------------------------------------------------------
```yaml
on:
pull_request: {}
workflow_dispatch: {}
push:
branches:
- main
- master
schedule:
- cron: '0 0 * * *'
name: Semgrep config
jobs:
semgrep:
name: semgrep/ci
runs-on: ubuntu-20.04
env:
SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }}
SEMGREP_URL: https://cloudflare.semgrep.dev
SEMGREP_APP_URL: https://cloudflare.semgrep.dev
SEMGREP_VERSION_CHECK_URL: https://cloudflare.semgrep.dev/api/check-version
container:
image: returntocorp/semgrep
steps:
- uses: actions/checkout@v3
- run: semgrep ci
```
--------------------------------------------------------------------------------
/content/docs/guides/embed/login-paywalls.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Login & Paywalls
$order: 7
---
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).
{% call callout('Read on', type='success') %}
Follow the tutorial on how to [implement a login flow with AMP](/docs/reference/content/docs/get_started/advanced/login_requiring.md)
{% endcall %}
```
--------------------------------------------------------------------------------
/assets/img/about/overview/herobg.svg:
--------------------------------------------------------------------------------
```
<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
<div class="language desktop">
<amp-accordion>
<section>
<h6 class="current">
<a class="flag-{{ doc.locale }}"><span>{{ doc.locale.get_language_name() }}</span></a>
</h6>
<div class="others">
<div class="others-inner">
{% for locale in doc.locales if not locale == doc.locale %}
{% set localized_doc = doc.localize(locale) %}
<div><a href="{{ localized_doc.url.path }}" class="flag-{{locale}}"><span>{{locale.get_language_name()}}</span></a></div>
{% endfor %}
</div>
</div>
</section>
</amp-accordion>
</div>
```
--------------------------------------------------------------------------------
/assets/sass/_search.scss:
--------------------------------------------------------------------------------
```scss
.searchbar {
position: absolute;
right: 175px;
top: 23px;
z-index: 2;
@include max-screen(1030px) {
display: none;
}
input {
@extend %text-base;
@extend %text-small;
border: 0;
border-bottom: 1px solid #4d4d4d;
font-family: $font-family;
outline: 0;
vertical-align: bottom;
}
button {
background: url(/static/img/symbols/search.svg) center/cover no-repeat;
border: 0;
cursor: pointer;
height: 24.2px;
position: relative;
top: 3px;
vertical-align: middle;
width: 24.6px;
}
}
.rtl .searchbar {
left: 230px;
right: auto;
}
```
--------------------------------------------------------------------------------
/views/partials/promo_banner.html:
--------------------------------------------------------------------------------
```html
<a href="{{g.doc('/content/pages/amp-conf-2017.html').url.path}}" class="promo">
<div class="promo-inner">
<amp-img class="promo-line left desktop-up"
noloading
height=279
width=312
layout=responsive
src="/static/img/footer/line-left.png">
</amp-img>
<div class="description desktop-up">
{{_('Save the date: Tune in live on March 7/8 or join us in person in NYC for our first-ever AMP Conf.')}}
</div>
<div class="description mobile-down">
{{_('AMP Conf. March 7/8.')}}
</div>
<div class="link">{{_('Learn More')}}</div>
</div>
</a>
```
--------------------------------------------------------------------------------
/content/includes/blog_feed.yaml:
--------------------------------------------------------------------------------
```yaml
section_title: Latest blog posts
blog:
- article:
title: "New Industry Benchmarks for Mobile Page Speed"
href: "https://amphtml.wordpress.com/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/amp/"
date: "February 28, 2017"
- article:
title: "Grow Your Business with Ads on AMP"
href: "https://amphtml.wordpress.com/2017/02/27/grow-your-business-with-ads-on-amp/amp/"
date: "February 27, 2017"
- article:
title: "AMP Roadmap Update for Mid-Q1 2017"
href: "https://amphtml.wordpress.com/2017/02/18/amp-roadmap-update-for-mid-q1-2017/amp/"
date: "February 17, 2017"
```
--------------------------------------------------------------------------------
/assets/sass/case-study.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_content.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_syntax_highlighting.scss';
// @import '_tables.scss';
@import '_callouts.scss';
@import '_inline-toc.scss';
@import '_share.scss';
@import '_cards.scss';
@import '_accordions.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import '_bg-triangle.scss';
@import 'pages/_post-detail.scss';
@import 'pages/_case-study.scss';
```
--------------------------------------------------------------------------------
/assets/sass/_nav.scss:
--------------------------------------------------------------------------------
```scss
nav.breadcrumb {
margin: 15px 20px;
position: absolute;
z-index: 2;
ul {
line-height: 12px;
list-style: none;
}
li,
a {
color: $color-grey-md;
font-size: 12px;
font-weight: 300;
letter-spacing: 0;
line-height: 17px;
text-transform: none;
}
li {
display: inline;
&::after {
content: '\00bb';
margin-left: 5px;
}
&:last-child::after {
content: '';
}
}
}
.rtl nav {
li::after {
margin-left: 0;
margin-right: 5px;
}
}
@include max-screen($mobile-breakpoint) {
nav {
li,
a {
font-size: 10px;
}
}
}
```
--------------------------------------------------------------------------------
/views/partials/points.html:
--------------------------------------------------------------------------------
```html
<section class="points">
{% if points.title %}
<h3>{{_(points.title)}}</h3>
{% endif %}
{% for point in points.pointlist %}
<div class="point" {% if point.id %}id="{{point.id}}"{% endif %}>
<div class="point-text">
<h4>{{_(point.title)}}</h4>
<div class="description small">
{{_(point.description)|markdown|safe}}
</div>
</div>
{% if point.example %}
<div class="point-example">
{% set example = g.doc(point.example, locale=doc.locale) %}
{{example.html|safe}}
</div>
{% endif %}
</div>
{% endfor %}
</section>
```
--------------------------------------------------------------------------------
/content/latest/list-blog.html:
--------------------------------------------------------------------------------
```html
---
$title: Blog
$path: /latest/blog
$parent: /content/latest/latest.html
$localization:
path: /{locale}/latest/blog
class: list
---
{% set lists = g.doc('/content/includes/lists.yaml', locale=doc.locale) %}
{% set blogs = g.doc('/content/includes/list-blog.yaml', locale=doc.locale) %}
<h1 class="title">{{_(lists.blog.title)}}</h1>
<section class="post-list">
{% for post in blogs.blogs %}
{% with past = false, meta = false %}
{% include "/views/partials/post-item.html" %}
{% endwith %}
{% endfor %}
</section>
<a href="https://amphtml.wordpress.com/" class="underlined cta">{{_('See all posts')}}</a>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/advertisers/advertisers_bg.svg:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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
---
$title: Passaggi finali prima della pubblicazione
---
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.
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/).
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Serving Ads on AMP
$order: 8
toc: true
---
<div class="toc">
{% include "/views/partials/sub_nav.html" %}
<ul>
<li><a href="/learn/who/#ads">Supported Platforms</a></li>
<li><a href="/roadmap">Roadmap</a></li>
</ul>
</div>
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.
For optimal results, approach ads on AMP pages in the same manner as ads on non-AMP pages.
<a class="button go-button" href="/docs/guides/ads/ads_getting_started.html">Let's get started!</a>
```
--------------------------------------------------------------------------------
/assets/img/symbols/search.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 24.6 24.2" style="enable-background:new 0 0 24.6 24.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#4D4D4D;stroke-miterlimit:10;}
</style>
<title>icon_search</title>
<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"/>
<line class="st0" x1="3.6" y1="20.4" x2="9.2" y2="14.8"/>
</svg>
```
--------------------------------------------------------------------------------
/assets/sass/section.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_content.scss';
@import '_content-section.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
@import '_syntax_highlighting.scss';
// @import '_tables.scss';
@import '_callouts.scss';
@import '_inline-toc.scss';
@import '_cards.scss';
@import '_accordions.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
// TODO: Make it so I can remove this here..
@import 'pages/_who.scss';
@import 'pages/_faqs.scss';
@import '_bg-triangle.scss';
```
--------------------------------------------------------------------------------
/assets/img/about/how-amp-works/line_behind.svg:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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:
--------------------------------------------------------------------------------
```
<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
{% set usedDoc = usedDoc or doc %}
{% set parentDoc = usedDoc.parent %}
{% set grandparentDoc = parentDoc.parent %}
<nav class="breadcrumb">
<ul>
{% if grandparentDoc %}
<li><a href="{{g.url(grandparentDoc.pod_path, locale=usedDoc.locale).path}}">{{ _(grandparentDoc.titles('breadcrumb')) or _(grandparentDoc.title) }}</a></li>
{% endif %}
{% if parentDoc %}
<li><a href="{{g.url(parentDoc.pod_path, locale=usedDoc.locale).path}}">{{ _(parentDoc.titles('breadcrumb')) or _(parentDoc.title) }}</a></li>
{% endif %}
<li><a href="{{g.url(usedDoc.pod_path, locale=usedDoc.locale).path}}">{{ _(doc.titles('breadcrumb')) or _(usedDoc.title) }}</a></li>
</ul>
</nav>
```
--------------------------------------------------------------------------------
/assets/sass/list.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_content.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
// @import '_syntax_highlighting.scss';
// @import '_tables.scss';
@import '_callouts.scss';
// @import '_toc.scss';
@import '_inline-toc.scss';
// @import '_animated_lines.scss';
@import '_carousel.scss';
@import '_cards.scss';
@import '_accordions.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_list.scss';
@import 'pages/_events.scss';
@import '_post-item.scss';
@import 'pages/_latest.scss';
```
--------------------------------------------------------------------------------
/views/partials/sub_nav.html:
--------------------------------------------------------------------------------
```html
{% macro render_nav_link(item) -%}
{% if item == doc %}
<span>{{ doc.title }}</span>
{% else %}
<a href="{% if item.goto %}{{ item.goto }}{% else %}{{ item.url.path }}{% endif %}">{{ item.title }}</a>
{% endif %}
{%- endmacro %}
{% macro render_children(item, docs) -%}
{% for doc in docs if item.locale == doc.locale %}
{% if loop.first %}{% if item.numbered %}<ol>{% else %}<ul>{% endif %}{% endif %}
<li>
{{ render_nav_link(doc) }}
</li>
{% if loop.last %}{% if item.numbered %}</ol>{% else %}</ul>{% endif %}{% endif %}
{% endfor %}
{%- endmacro %}
{% set sub_collection = g.collection(doc.collection.pod_path + '/' + doc.base) %}
{{ render_children(doc, sub_collection) }}
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_read.svg:
--------------------------------------------------------------------------------
```
<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
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
@import '_content.scss';
@import '_bg-triangle.scss';
@import '_nav.scss';
// @import '_grid.scss';
@import '_lang_switcher.scss';
// @import '_syntax_highlighting.scss';
// @import '_tables.scss';
// @import '_callouts.scss';
// @import '_toc.scss';
// @import '_inline-toc.scss';
// @import '_animated_lines.scss';
@import '_points.scss';
@import '_large-cta.scss';
@import '_carousel.scss';
@import '_cards.scss';
@import '_accordions.scss';
@import '_lightbox.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
```
--------------------------------------------------------------------------------
/views/section_page.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container md">
<div class="content">
<article class="post">
<h1 class="post-title">{{_(doc.title)}}</h1>
<div class="post-content">
{{doc.html|render|safe}}
{% if doc.faq %}
{% include "views/partials/faq-accordion.html" %}
{% endif %}
</div>
</article>
</div>
</div>
{% if doc.cta %}
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% endif %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/img/symbols/share.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" width="19.65" height="19.04" viewBox="0 0 19.65 19.04">
<title>Asset 14</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Art">
<g id="YEK087">
<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"/>
</g>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/sass/home.min.scss:
--------------------------------------------------------------------------------
```scss
@import '_config.scss';
@import '_mixins.scss';
@import '_responsive.scss';
@import '_animations.scss';
@import '_sprite.scss';
@import '_global.scss';
@import '_header.scss';
// @import '_content.scss';
// @import '_bg-triangle.scss';
@import '_nav.scss';
@import '_lang_switcher.scss';
// @import '_syntax_highlighting.scss';
// @import '_tables.scss';
// @import '_callouts.scss';
@import '_toc.scss';
// @import '_inline-toc.scss';
@import '_animated_lines.scss';
// @import '_points.scss';
@import '_large-cta.scss';
@import '_carousel.scss';
@import '_cards.scss';
// @import '_accordions.scss';
// @import '_lightbox.scss';
@import '_search.scss';
@import '_sidebar.scss';
@import '_footer.scss';
@import 'pages/_home.scss';
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_retweet.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 16 10" style="enable-background:new 0 0 16 10;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#00E676;stroke-width:10;stroke-miterlimit:10;}
.st1{fill:#929292;}
</style>
<title>icon_retweet</title>
<g>
<g id="Art">
<rect x="-1441.3" y="-1378.4" class="st0" width="8050.7" height="4722.3"/>
<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
H4.2z"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/img/symbols/twitter.svg:
--------------------------------------------------------------------------------
```
<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
.bg-triangle-primary,
.bg-triangle-secondary,
.bg-triangle-bottom {
.wrap {
overflow: hidden;
position: relative;
&::before,
&::after {
background: $gradient-med-faded;
display: block;
height: 1400px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
&::before {
content: '';
top: 0;
transform: skewY(36deg);
transform-origin: top right;
}
}
}
.bg-triangle-primary {
.wrap::before {
background: $gradient-med;
}
.post-title,
nav.breadcrumb li,
nav.breadcrumb a {
color: $color-white;
}
}
.bg-triangle-bottom {
.wrap::after {
bottom: 0;
content: '';
transform: skewY(-36deg);
transform-origin: bottom right;
}
}
```
--------------------------------------------------------------------------------
/views/doc.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/doc_nav.html" %}
{% endset %}
{% block nav %}
{{ navmarkup|safe }}
{% endblock %}
{% block main %}
<div class="container main">
{{ navmarkup|safe }}
<div class="content">
<article class="post{% if doc.toc %} has-toc{% endif %}">
<h1 class="post-title">{{ doc.title }}</h1>
<div class="post-content">
{{doc.html|render|safe}}
</div>
</article>
</div>
</div>
<div class="doc-footer">
{% set doc_data = g.doc('/content/includes/doc.yaml', locale=doc.locale) %}
{% with cta = doc_data.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% include "/views/partials/footer.html" %}
</div>
{% endblock %}
```
--------------------------------------------------------------------------------
/views/about-how.html:
--------------------------------------------------------------------------------
```html
{% extends "/views/base.html" %}
{% set navmarkup %}
{% include "/views/partials/breadcrumb-nav.html" %}
{% endset %}
{% block main %}
{{ navmarkup|safe }}
<div class="container xl about-overview-block">
<section class="hero">
<div class="text">
<h1>{{_(doc.hero.title)}}</h1>
<p>{{_(doc.hero.subtitle)}}</p>
</div>
</section>
<div class="video">
<amp-youtube
data-videoid="{{doc.video}}"
layout="responsive"
width="480" height="270">
</amp-youtube>
</div>
{% with points = doc.points %}
{% include "/views/partials/points.html" %}
{% endwith %}
</div>
{% with cta = doc.cta %}
{% include "/views/partials/footer-cta.html" %}
{% endwith %}
{% include "/views/partials/footer.html" %}
{% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/_tables.scss:
--------------------------------------------------------------------------------
```scss
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 20px 30px;
text-align: left;
vertical-align: top;
}
tr:nth-child(even) {
background: #eff9fc;
}
.rtl td,
.rtl th {
text-align: right;
}
th.col-fourty,
td.col-fourty {
width: 40%;
}
th.col-thirty,
td.col-thirty {
width: 30%;
}
th.col-twenty,
td.col-twenty,
{
width: 20%;
}
td:first-child {
border-right: 2px solid $color-ampblue;
}
.rtl {
td:first-child {
border-left: 2px solid $color-ampblue;
border-right: 0;
}
}
html, body {
th {
@extend %text-label;
background: $color-white;
border-bottom: 2px solid $color-ampblue;
color: $color-ampblue;
}
}
@include max-screen($mobile-breakpoint) {
td, th {
padding: 5px;
}
th:first-child {
border-right: 2px solid $color-ampblue;
}
}
```
--------------------------------------------------------------------------------
/views/partials/large-cta.html:
--------------------------------------------------------------------------------
```html
<section class="large-cta">
<amp-img class="large-cta-lines left desktop-up"
noloading
height={{large_cta.lines_left_height}}
width={{large_cta.lines_left_width}}
layout=fixed
src="{{large_cta.lines_left}}">
</amp-img>
<amp-img class="large-cta-lines right desktop-up"
noloading
height={{large_cta.lines_right_height}}
width={{large_cta.lines_right_width}}
layout=fixed
src="{{large_cta.lines_right}}">
</amp-img>
<h1>{{_(large_cta.title)}}</h1>
{% if large_cta.subtitle %}
<p>{{_(large_cta.subtitle)}}</p>
{% endif %}
<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>
</section>
```
--------------------------------------------------------------------------------
/views/partials/footer-cta.html:
--------------------------------------------------------------------------------
```html
<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">
<amp-img class="cta-line left desktop-up"
noloading
height=279
width=312
layout=responsive
src="/static/img/footer/line-left.png">
</amp-img>
<amp-img class="cta-line right"
noloading
height=215
width=350
layout=responsive
src="/static/img/footer/line-right.png">
</amp-img>
<div class="cta-line right-half">
<amp-img
noloading
height=215
width=350
layout=responsive
src="/static/img/footer/line-right-2.png">
</amp-img>
</div>
<div class="inner">
<h2>{{_(cta.title)}}</h2>
<div class="link-text">{{_(cta.link_text)}}</div>
</div>
</a>
```
--------------------------------------------------------------------------------
/assets/img/symbols/wordpress.svg:
--------------------------------------------------------------------------------
```
<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
.post-item {
border-bottom: solid 1px $color-grey-lt;
padding: 30px 0 40px 0;
&:last-of-type {
border-bottom: 0;
margin-bottom: 60px;
}
.post-title {
font-weight: 300;
text-transform: none;
h4:hover {
color: $color-ampblue;
}
}
.event-meta {
margin: 10px 0;
.smaller {
color: $color-grey-md;
display: inline-block;
margin-right: 10px;
amp-img {
display: inline-block;
position: relative;
top: 2px;
}
i-amp-sizer {
width: 15px;
}
}
}
.post-excerpt {
margin-top: 12px;
}
.post-meta {
// @extend %text-label;
margin-bottom: 12px;
.time {
color: $color-grey-md;
&::before {
content: '|';
margin-left: .8em;
margin-right: 1.1em;
}
}
}
}
```
--------------------------------------------------------------------------------
/assets/sass/_points.scss:
--------------------------------------------------------------------------------
```scss
.points {
max-width: 1200px;
padding: 100px;
position: relative;
}
.point {
border-bottom: 3px solid #e5f7ff;
padding: 30px;
&:last-child {
border-bottom: 0;
}
}
.point-text {
align-items: flex-start;
display: flex;
h4, .description {
margin: 0 20px;
width: 0;
}
h4 {
flex: 1 1 auto;
}
.description {
flex: 2 1 auto;
a {
text-transform: none;
}
p {
margin-top: 0;
}
}
}
.point-example {
margin: 40px 20px 20px;
}
@include max-screen($tablet-breakpoint) {
.points {
padding: 100px 30px;
}
}
@include max-screen($tablet-portrait-breakpoint) {
.points {
padding: 0;
}
.point {
padding: 30px 0;
.point-text {
display: block;
}
h4, .description {
width: auto;
}
h4 {
margin-bottom: 30px;
}
}
}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/include_image.md:
--------------------------------------------------------------------------------
```markdown
---
$title: Include an Image
$order: 1
---
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)).
To demonstrate what additional markup could look like, here’s the code required to embed an image into the page:
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
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).
<a class="go-button button" href="/docs/get_started/create/presentation_layout.html">Continue to Step 3</a>
```
--------------------------------------------------------------------------------
/content/learn/who-uses-amp.yaml:
--------------------------------------------------------------------------------
```yaml
$title@: Who is AMP for?
$order: 1
class: about-who
$view: /views/about-who.html
$parent: /content/learn/overview.yaml
hero:
title@: Who is AMP for?
subtitle@: Join an ecosystem of 850,000 domains, leading platforms, and 100+ technology providers using AMP.
hero_img_base: /static/img/about/who-use-amp/who_phones_hero
line_img: who_lines1.svg
triangle_img: hero_triangle.png
cards:
- name@: Publishers
cta@: Learn More
icon: who_icon_publishers.svg
# - name@: SMB
# cta@: Learn More
# icon: card_smb.svg
- name@: Ad Tech Platforms
cta@: Learn More
icon: who_icon_adtech.svg
- name@: Advertisers
cta@: Learn More
icon: who_icon_advertisers.svg
# - name@: Developers
# cta@: Learn More
# icon: card_developers.svg
cta:
title@: Success stories
link_text@: Read case studies
link_url: /content/learn/case-studies.html
```
--------------------------------------------------------------------------------
/assets/manifest.json:
--------------------------------------------------------------------------------
```json
{
"name": "AMPProject.org",
"short_name": "AMP",
"start_url": "/",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#0379C4",
"description": "The official website and documentation for the Accelerated Mobile Pages project.",
"icons": [{
"src": "/static/img/icons/48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "/static/img/icons/72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "/static/img/icons/96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "/static/img/icons/144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/static/img/icons/168.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "/static/img/icons/192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/static/img/icons/any.svg",
"sizes": "any"
}]
}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Bilder hinzufügen
---
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).
Hier sehen Sie ein Beispiel für den Code, mit dem Sie ein Bild auf der Seite einbetten:
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
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).
<a class="go-button button" href="/de/docs/get_started/create/presentation_layout.html">Weiter mit Schritt 3</a>
```
--------------------------------------------------------------------------------
/assets/img/latest/line_hero_front.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 285 285" style="enable-background:new 0 0 285 285;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:9;stroke-miterlimit:10;}
</style>
<g>
<g id="Art">
<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)">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.5" style="stop-color:#0DD3FF"/>
<stop offset="1" style="stop-color:#0DD3FF"/>
</linearGradient>
<line class="st0" x1="228.9" y1="14.2" x2="12.2" y2="170"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Bir Görüntü Ekleyin
---
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)).
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:
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
`<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.
<a class="go-button button" href="/tr/docs/get_started/create/presentation_layout.html">Adım 3 ile devam edin</a>
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_twitter.svg:
--------------------------------------------------------------------------------
```
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 45 35" style="enable-background:new 0 0 45 35;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F4F4F4;}
</style>
<title>icon_twitter</title>
<g>
<g id="Art">
<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
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
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
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"/>
</g>
</g>
</svg>
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_tip.svg:
--------------------------------------------------------------------------------
```
<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
---
$title: Incluir uma imagem
---
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)).
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:
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
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).
<a class="go-button button" href="/pt_br/docs/get_started/create/presentation_layout.html">Continuar para a etapa 3</a>
```
--------------------------------------------------------------------------------
/assets/sass/_carousel.scss:
--------------------------------------------------------------------------------
```scss
amp-carousel {
.card-container {
padding-left: 35px;
padding-right: 35px;
}
}
.amp-carousel-button {
background: transparent;
cursor: pointer;
&:before, &:after {
background: $color-bluegrey;
content: '';
display: block;
height: 2px;
width: 20px;
}
&:before {
transform: translate(10px, 10px) rotate(45deg);
}
&:after {
transform: translate(10px, 22px) rotate(-45deg);
}
}
.amp-carousel-button-prev {
left: 0;
transform: translateY(-50%) translateY(-10px) rotateY(180deg);
}
.amp-carousel-button-next {
right: 0;
transform: translateY(-50%) translateY(-10px);
}
.rtl {
.amp-carousel-button-prev {
left: 10px;
}
.amp-carousel-button-next {
right: 10px;
}
}
@include max-screen($mobile-breakpoint) {
amp-carousel {
.amp-carousel-button {
display: none;
}
.card-container {
padding-left: 10px;
padding-right: 10px;
}
}
}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Menyertakan Gambar
---
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)).
Untuk mendemonstrasikan seperti apa tampilan markup tambahan ini, berikut kode yang diperlukan untuk menyematkan sebuah gambar ke dalam halaman:
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
Untuk mengetahui alasan kami mengganti tag seperti `<img>` dengan `<amp-img>`, dan jumlah ketersediaannya, kunjungi [Menyertakan Iframe dan Media](/docs/guides/amp_replacements.html).
<a class="go-button button" href="/id/docs/get_started/create/presentation_layout.html">Lanjutkan ke Langkah 3</a>
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_note.svg:
--------------------------------------------------------------------------------
```
<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>
```
--------------------------------------------------------------------------------
/assets/sass/_responsive.scss:
--------------------------------------------------------------------------------
```scss
.desktop-up,
.desktop-only {
display: none;
visibility: hidden;
@include min-screen($mobile-breakpoint) {
display: block;
visibility: visible;
}
}
.tablet-up {
display: none;
visibility: hidden;
@include min-screen($tablet-breakpoint) {
display: block;
visibility: visible;
}
}
.tablet-down {
display: none;
visibility: hidden;
@include max-screen($tablet-breakpoint) {
display: block;
visibility: visible;
}
}
.mobile-down {
display: none;
visibility: hidden;
@include max-screen($mobile-breakpoint) {
display: block;
visibility: visible;
}
}
.mobile-show {
@include max-screen($mobile-breakpoint) {
display: block;
}
}
.mobile-hide {
@include max-screen($mobile-breakpoint) {
display: none;
}
}
.tablet-show {
@include max-screen($tablet-breakpoint) {
display: block;
}
}
.tablet-hide {
@include max-screen($tablet-breakpoint) {
display: none;
}
}
```
--------------------------------------------------------------------------------
/content/docs/contribute/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: So können Sie zum Projekt beitragen
---
### AMP-Probleme
Verwenden Sie für Feedback zum Projekt die [amphtml-Problemverfolgung](https://github.com/ampproject/amphtml/issues).
### Dokumentationsprobleme
Für Fehler oder Inkonsistenzen auf dieser Website steht Ihnen der [Problem-Tracker für die Dokumentation](https://github.com/ampproject/docs/issues) zur Verfügung.
### Quellcode freigeben
Sie möchten sich an der Fehlerbeseitigung beteiligen oder AMP noch schneller machen? Wir freuen uns über jede Hilfe!
In [der CONTRIBUTING-Datei](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md) finden Sie Informationen für Beitragende zum AMP-Projekt. Die [DEVELOPING-Datei](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md) enthält die Dokumentation zum zu den internen Dateien der AMP-Bibliothek. Außerdem werden [Tipps für den Einstieg](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md#starter-issues) gegeben.
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Incluir una imagen
---
La mayoría de las etiquetas HTML se pueden usar directamente en AMP HTML, pero algunas, como `<img>`, se reemplazan por etiquetas AMP HTML personalizadas equivalentes o ligeramente optimizadas (y unas pocas etiquetas problemáticas se inhabilitan directamente; consulta [etiquetas HTML en la especificación](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Para demostrar el aspecto que tendría el marcado adicional, a continuación te mostramos el código requerido para integrar una imagen a la página:
[sourcecode:html]
<amp-img src="bienvenido.jpg" alt="Bienvenido" height="400" width="800"></amp-img>
[/sourcecode]
Para saber por qué reemplazamos etiquetas como `<img>` por `<amp-img>` y cuántas hay disponibles, consulta [Incluir Iframes y medios](/docs/guides/amp_replacements.html).
<a class="go-button button" href="/es/docs/get_started/create/presentation_layout.html">Continuar con el paso 3</a>
```
--------------------------------------------------------------------------------
/assets/img/symbols/lang-icon.svg:
--------------------------------------------------------------------------------
```
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
</svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Aggiunta di un’immagine
---
La maggior parte dei tag HTML può essere utilizzata direttamente in HTML AMP, tuttavia alcuni tag, come `<img>`, vengono sostituiti con tag HTML AMP personalizzati equivalenti o leggermente ottimizzati (inoltre alcuni tag problematici sono stati del tutto esclusi, vedi [Tag HTML nelle specifiche](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Per illustrare il possibile aspetto del markup supplementare, ecco il codice necessario per incorporare un’immagine nella pagina:
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
Per capire perché stiamo sostituendo tag come `<img>` con `<amp-img>` e quanti di essi sono disponibili, vai alla sezione [Includere Iframe ed elementi multimediali](/docs/guides/amp_replacements.html).
<a class="go-button button" href="/it/docs/get_started/create/presentation_layout.html">Vai al Passaggio 3</a>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Dołączanie obrazów
---
Większość tagów HTML może być używanych bezpośrednio w kodzie AMP HTML, ale niektóre z nich, na przykład znacznik `<img>`, są zastępowane przez równoważne lub nieznacznie rozszerzone, niestandardowe tagi AMP HTML (a kilka problematycznych znaczników zostało zdecydowanie wykluczonych, zobacz [Tagi HTML w specyfikacji](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Przedstawiony poniżej kod wymagany do umieszczenia obrazu na stronie demonstruje wygląd tych dodatkowych znaczników:
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
Uzasadnienie zamiany znaczników w rodzaju `<img>` na `<amp-img>` oraz informacje o liczbie dostępnych znaczników znajdziesz w części [Dołączanie ramek iframe i multimediów](/docs/guides/amp_replacements.html).
<a class="go-button button" href="/pl/docs/get_started/create/presentation_layout.html">Przejdź do kroku 3</a>
```
--------------------------------------------------------------------------------
/views/partials/grid-card.html:
--------------------------------------------------------------------------------
```html
{% set goto = g.url(doc.goto, locale=doc.locale).path if doc.goto and 'http' not in doc.goto %}
<a class="card" href="{{goto or doc.goto or doc.url.path}}">
<div class="card-inner">
{% if isCase %}
<div class="card-meta">
<span class="card-type text-label">{{_(doc.category)}}</span>
<span class="card-date light">{{doc.date}}</span>
</div>
<div class="card-logo">
<amp-img alt="{{doc.title}}"
height="{{doc.logo.height}}"
layout="fixed"
noloading
src="/static/img/{{doc.logo.src}}"
width="{{doc.logo.width}}"></amp-img>
</div>
{% endif %}
<div class="card-title">
{% if isCase %}<h4>{% else %}<h2>{% endif %}
{{doc.headline or doc.title}}
{% if isCase %}</h4>{% else %}</h2>{% endif %}
</div>
<div class="card-link">
<p class="text-label"> {% if isCase %} {{_('Read the Case Study')}}
{% else %} {{_('Learn More')}} {% endif %} </p>
</div>
</div>
</a>
```
--------------------------------------------------------------------------------
/views/partials/share.html:
--------------------------------------------------------------------------------
```html
{% set lists = g.doc('/content/includes/lists.yaml', locale=doc.locale) %}
<amp-accordion class="share-module">
<section class="control">
<header>
<div class="toggle-buttons">
<div class="button-open"><p class="text-label">{{_(lists.share)}}</p></div>
<div class="button-close"></div>
</div>
</header>
<p></p>
</section>
<section expanded class="share-content">
<header></header>
<div class="share-buttons">
<amp-social-share
width="63"
height="63"
type="facebook"
data-param-app_id="206123646531919"></amp-social-share>
<amp-social-share
width="63"
height="63"
type="gplus"></amp-social-share>
<amp-social-share
width="63"
height="63"
type="linkedin"></amp-social-share>
<amp-social-share
width="63"
height="63"
type="twitter"></amp-social-share>
</div>
</section>
</amp-accordion>
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_important.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 65 65"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-1{fill-opacity:0.7;stroke:#ff5252;stroke-linejoin:round;}.cls-2{opacity:0.7;}.cls-3{fill:#ff5252;}</style><symbol id="New_Symbol_2" data-name="New Symbol 2" viewBox="0 0 36.32 32.27"><polygon class="cls-1" points="0.5 31.77 18.16 0.5 35.82 31.77 0.5 31.77"/><circle class="cls-2" cx="18.16" cy="24.8" r="1.53"/><path class="cls-3" d="M18.16,23.77a1,1,0,1,1-1,1,1,1,0,0,1,1-1m0-1a2,2,0,1,0,2,2,2,2,0,0,0-2-2Z"/><polygon class="cls-2" points="17 21.23 16.21 13.01 20.11 13.01 19.32 21.23 17 21.23"/><path class="cls-3" d="M19.56,13.51l-.69,7.22H17.45l-.69-7.22h2.79m1.1-1h-5l.1,1.09.69,7.22.09.91h3.24l.09-.91.69-7.22.1-1.09Z"/></symbol></defs><title>icon_important1</title><g id="Layer_1" data-name="Layer 1"><use id="New_Symbol_2-3" data-name="New Symbol 2" width="36.32" height="32.27" transform="translate(14.15 15.48)" xlink:href="#New_Symbol_2"/></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Inclure une image
---
La plupart des balises HTML peuvent être utilisées directement dans AMP HTML, mais certaines, comme la balise `<img>`, sont remplacées par des balises équivalentes ou des balises AMP HTML personnalisées légèrement améliorées (et quelques balises problématiques sont purement interdites, voir les [balises HTML dans la spécification](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
Pour découvrir à quoi ressemblerait un balisage supplémentaire, voici le code requis pour intégrer une image dans la page :
[sourcecode:html]
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
[/sourcecode]
Pour savoir pourquoi nous remplaçons les balises, telles que `<img>` par `<amp-img>`, et combien sont disponibles, accédez à [Inclure des iframes et des éléments multimédias](/docs/guides/amp_replacements.html).
<a class="go-button button" href="/fr/docs/get_started/create/presentation_layout.html">Continuer à l'Étape 3</a>
```
--------------------------------------------------------------------------------
/content/includes/latest.yaml:
--------------------------------------------------------------------------------
```yaml
hero:
sub_title@: Follow AMP
title@: The Latest News
content@: The open-source AMP Project helps you create mobile optimized content that loads in an instant.
hero_img: /static/img/latest/latest_hero.jpg
lines_back_img: /static/img/latest/line_hero_back.svg
lines_front_img: /static/img/latest/line_hero_front.svg
feed:
title@: What's hot?
icon_audience: /static/img/latest/icon_audience.png
icon_calendar: /static/img/latest/icon_calendar.png
icon_location: /static/img/latest/icon_location.png
category_event@: Events
category_roadmap@: Roadmap
category_blog@: Blog
more_posts@: See More
more_posts_href: /content/latest/list-blog.html
add_to_calendar@: Add to Calendar
twitter:
title@: Follow us on Twitter
icon_twitter: /static/img/latest/icon_twitter.svg
icon_retweet: /static/img/latest/icon_retweet.png
account_id: AMPhtml
account_href: https://twitter.com/amphtml
follow_cta@: Follow AMP
follow_href: https://twitter.com/intent/follow?screen_name=AMPhtml
```
--------------------------------------------------------------------------------
/content/docs/contribute/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Comment participer
---
### Problèmes relatifs au projet AMP
Veuillez nous faire part de vos commentaires sur le projet en utilisant l'[outil amphtml de suivi des problèmes](https://github.com/ampproject/amphtml/issues).
### Problèmes liés à la documentation
Si vous voulez signaler des bugs ou des incohérences sur ce site Web, utilisez plutôt l'[outil docs de suivi des problèmes](https://github.com/ampproject/docs/issues).
### Contribuer au code source
Vous voulez aider à corriger des bugs ou à rendre l'AMP encore plus rapide ? Votre aide est la bienvenue.
Veuillez consulter le fichier [CONTRIBUTION](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md) pour plus d'informations sur la contribution au projet AMP, le fichier [DÉVELOPPEMENT](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md) pour parcourir les documents relatifs à la bibliothèque AMP et les [astuces pour faire vos premiers pas](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md#starter-issues).
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Keterlibatan Platform dan Perusahaan Teknologi
cta:
title@: Next FAQ
link_text@: Monetisasi Penerbit
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: Bagaimana cara platform pelanggan terlibat dalam Accelerated Mobile Pages?
answer@: |
Proyek ini terbuka untuk semua orang, dan anggota proyek yang sudah ada sangat antusias untuk terlibat dengan platform pelanggan pada inisiatif. Google membuka cache untuk digunakan oleh siapa pun secara gratis, termasuk platform pelanggan yang ingin menampilkan konten AMP di lingkungan mereka. Terus terhubung melalui [Github](https://github.com/ampproject/amphtml/issues/new) dan kami akan menjawab pertanyaan Anda secepat yang kami bisa.
- title@: Bagaimana cara vendor iklan atau teknologi terlibat dalam Accelerated Mobile Pages?
answer@: |
Tinjau [pedoman berkontribusi](https://github.com/ampproject/amphtml/tree/master/3p#ads) dan terus terhubung lewat [Github](https://github.com/ampproject/amphtml/issues/new).
---
```
--------------------------------------------------------------------------------
/content/docs/contribute/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title: Cómo colaborar
---
### Problemas con AMP
Introduce tus comentarios sobre el proyecto en el [sistema de seguimiento de problemas con amphtml](https://github.com/ampproject/amphtml/issues).
### Problemas con la documentación
Si detectas errores o incoherencias en este sitio web, abre una incidencia en el [sistema de seguimiento de problemas con la documentación](https://github.com/ampproject/docs/issues).
### Contribuir con software libre
¿Quieres corregir errores o a hacer que las páginas AMP sean aún más rápidas? Estaremos encantados de que nos ayudes.
Consulta [el archivo sobre contribuciones](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md) para obtener información sobre cómo contribuir al proyecto AMP y el [archivo sobre desarrollo](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md) para obtener documentación sobre el funcionamiento interno de la biblioteca de AMP y [consejos sobre cómo empezar](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md#starter-issues).
```
--------------------------------------------------------------------------------
/content/support/faqs/platform-involvement@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Envolvimento de empresas de tecnologia e plataformas
cta:
title@: Next FAQ
link_text@: Monetização de editores
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: Como uma plataforma de consumidores pode se envolver com as Accelerated Mobile Pages?
answer@: |
O projeto está aberto a todos, e os atuais membros estão muito entusiasmados com o envolvimento de plataformas de consumidores na iniciativa. O Google abriu seu cache para uso gratuito por qualquer pessoa, inclusive plataformas de consumidores que gostariam de exibir conteúdo AMP no ambiente delas. Entre em contato por meio do [Github](https://github.com/ampproject/amphtml/issues/new) e responderemos às perguntas o mais rápido possível
- title@: Como um fornecedor de publicidade ou tecnologia pode usar as Accelerated Mobile Pages?
answer@: |
Revise as [diretrizes de contribuição](https://github.com/ampproject/amphtml/tree/master/3p#ads) e entre em contato por meio do [Github](https://github.com/ampproject/amphtml/issues/new).
---
```
--------------------------------------------------------------------------------
/assets/sass/_accordions.scss:
--------------------------------------------------------------------------------
```scss
amp-accordion {
section {
border-bottom: 2px solid $color-grey-lt;
}
}
.accordion-header,
.accordion-content {
margin: 20px 0;
padding: 0 25px 0 65px;
}
.accordion-header {
background-color: transparent;
border: 0;
}
.accordion-title {
margin: 0;
position: relative;
transition: color 0.3s;
&:hover {
color: $color-ampblue;
}
&::before,
&::after {
background: $gradient-med;
content: '';
display: inline-block;
height: 2px;
left: -40px;
position: absolute;
top: 50%;
width: 8px;
}
&::after {
transform: rotate(90deg);
}
section[expanded] &::after {
content: none;
}
}
.accordion-content {
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 2px;
}
}
@include max-screen($mobile-breakpoint) {
amp-accordion {
section {
border-bottom: 1px solid $color-grey-lt;
}
}
.accordion-header,
.accordion-content {
margin: 15px 0;
padding: 0 0 0 30px;
}
.accordion-title::before,
.accordion-title::after {
left: -30px;
}
}
```
--------------------------------------------------------------------------------
/assets/img/about/how-amp-works/lines_front.svg:
--------------------------------------------------------------------------------
```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 185.95 167.1"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="-27541.86" y1="-23784.58" x2="-27401.09" y2="-23784.58" gradientTransform="translate(27587.04 23877.25)" gradientUnits="userSpaceOnUse"><stop offset="0.03" stop-color="#0dd7ff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-2" x1="-30880.84" y1="-6883.24" x2="-30741.71" y2="-6883.24" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, -29203, -11707.65)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>lines_front</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="48.37" y1="160.15" x2="182.76" y2="25.17"/><line class="cls-2" x1="3.19" y1="163.92" x2="163.2" y2="3.17"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/platform-involvement.md:
--------------------------------------------------------------------------------
```markdown
---
$title@: Platform and Technology Company Involvement
$order: 1
$parent: /content/support/faqs.md
class: faqs
cta:
title@: Next FAQ
link_text@: Publisher Monetization
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: How can a consumer platform get involved in Accelerated Mobile Pages?
answer@: |
The project is open to everyone, and existing members of the project are very enthusiastic to engage with consumer platforms on the initiative. Google has opened its cache for use for free by anyone, including to consumer platforms that would like to display AMP content in their environment. Please get in touch via [GitHub](https://github.com/ampproject/amphtml/issues/new) and we will address your questions as quickly as we can.
- title@: How can an advertising or technology vendor get involved in Accelerated Mobile Pages?
answer@: |
Please review the [contributing guidelines](https://github.com/ampproject/amphtml/tree/master/3p#ads) and get in touch via [GitHub](https://github.com/ampproject/amphtml/issues/new).
---
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017/accessibility.html:
--------------------------------------------------------------------------------
```html
---
$title: AMP Conf 2017 - Accessibility
noglobalnote: 1
class: amp-conf
components:
- iframe
stylesheet: pages/amp-conf.css
---
{% set conf = g.doc('/content/includes/amp-conf-2017.yaml', locale=doc.locale) %}
<section class="code-of-conduct amp-conf-section">
<div class="wrapper">
<h3>AMP Conf Accessibility</h3>
<p>The AMP Conf is an inclusive conference and wants to be accessible.</p>
<p>We make sure that the AMP Conf is well accessible to people with physical disabilities, by both checking with the venue owner and by visiting them personally beforehand.</p>
<p>However, we are aware that accessibility issues are diverse and this does not cover everything.</p>
<p>If you are interested in our conference, but have any kind of accessibility problem that needs to be resolved before you can attend, please <a href="mailto:[email protected]">get in contact</a>.</p>
<p>If you are in need of an assistant, they will not be required to request a ticket.</p>
<p>We would love to welcome you to AMP Conf!</p>
</div>
</section>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
---
$title@: Zaangażowanie platform i firm technologicznych
cta:
title@: Next FAQ
link_text@: Zyski dla wydawców
link_url: /content/support/faqs/publisher-monetization.md
faq:
- title@: W jaki sposób platforma konsumencka może wziąć udział w projekcie Accelerated Mobile Pages?
answer@: |
Projekt jest otwarty dla wszystkich, a jego obecni członkowie bardzo entuzjastycznie podchodzą do tematu zaangażowania platform konsumenckich. Google bezpłatnie udostępnia swoją pamięć podręczną wszystkim, w tym platformom konsumenckim, które chcą wyświetlać treści AMP. Można się z nami skontaktować poprzez [GitHub](https://github.com/ampproject/amphtml/issues/new) – na pytania odpowiemy tak szybko, jak to będzie możliwe.
- title@: W jaki sposób reklamodawcy i dostawcy technologii mogą wziąć udział w projekcie Accelerated Mobile Pages?
answer@: |
Przeczytaj [wskazówki dotyczące dołączenia do projektu](https://github.com/ampproject/amphtml/tree/master/3p#ads) i skontaktuj się z nami za pośrednictwem [GitHubu](https://github.com/ampproject/amphtml/issues/new).
---
```
