This is page 3 of 24. Use http://codebase.md/cloudflare/docs/imgs/playground-ai-screenshot.png?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/sass/_callouts.scss:
--------------------------------------------------------------------------------
```scss
1 | aside {
2 | background: #eff9fc;
3 | display: block;
4 | font-size: 14px;
5 | line-height: 24px;
6 | margin: 16px 0;
7 | padding: 24px 24px 24px 80px;
8 | position: relative;
9 |
10 | strong {
11 | color: $color-brightblue;
12 | text-transform: uppercase;
13 | }
14 |
15 | code {
16 | font-size: 13px;
17 | }
18 |
19 | &::before {
20 | float: left;
21 | word-wrap: normal;
22 | white-space: nowrap;
23 | margin-left: -36px;
24 |
25 | content: '';
26 | height: 70px;
27 | left: 44px;
28 | position: absolute;
29 | top: 50%;
30 | transform: translateY(-50%);
31 | width: 70px;
32 | }
33 |
34 | &.note {
35 | &::before {
36 | background: url(/static/img/docs/icon_note.svg) center/cover no-repeat;
37 | }
38 | }
39 |
40 | &.caution {
41 | background: #fff6f6;
42 |
43 | strong {
44 | color: #ff5252;
45 | }
46 |
47 | &::before {
48 | background: url(/static/img/docs/icon_important.svg) center/cover no-repeat;
49 | }
50 |
51 | }
52 |
53 | &.warning {
54 | background: #fff6f6;
55 |
56 | strong {
57 | color: #ff5252;
58 | }
59 |
60 | &::before {
61 | background: url(/static/img/docs/icon_important.svg) center/cover no-repeat;
62 |
63 | }
64 | }
65 |
66 | &.success {
67 | background-color: #f2fff8;
68 |
69 | strong {
70 | color: #00e676;
71 | }
72 |
73 | &::before {
74 | background: url(/static/img/docs/icon_tip.svg) center/cover no-repeat;
75 | top: 45%;
76 | }
77 | }
78 |
79 | &.read {
80 | background-color: #fffcef;
81 |
82 | strong {
83 | color: #edc10a;
84 | }
85 |
86 | &::before {
87 | background: url(/static/img/docs/icon_read.svg) center/cover no-repeat;
88 | }
89 | }
90 | }
91 |
92 | .rtl aside {
93 | padding: 24px 80px 24px 24px;
94 |
95 | &::before {
96 | left: auto;
97 | margin: 0 -36px 0 0;
98 | right: 44px;
99 | }
100 | }
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/lines.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 410.35 259.51"><defs><style>.cls-1{isolation:isolate;}.cls-2{mix-blend-mode:multiply;}.cls-3,.cls-4,.cls-5{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-3{stroke:url(#linear-gradient);}.cls-4{stroke:url(#linear-gradient-2);}.cls-5{stroke:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="6119.59" y1="-6234.66" x2="6412.19" y2="-6234.66" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, 7361.51, -4997.55)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="13196.37" y1="-11327.94" x2="13357.44" y2="-11327.94" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -14769.29, 9126.48)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="3406.45" y1="5843.93" x2="3584.22" y2="5843.93" gradientTransform="translate(3816.81 5909.58) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Art"><g class="cls-2"><line class="cls-3" x1="2.62" y1="255.85" x2="331.51" y2="19.85"/><line class="cls-4" x1="258.54" y1="39.06" x2="80.79" y2="166.61"/></g><line class="cls-5" x1="235.22" y1="127.63" x2="407.73" y2="3.65"/></g></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/lines.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 410.35 259.51"><defs><style>.cls-1{isolation:isolate;}.cls-2{mix-blend-mode:multiply;}.cls-3,.cls-4,.cls-5{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-3{stroke:url(#linear-gradient);}.cls-4{stroke:url(#linear-gradient-2);}.cls-5{stroke:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" x1="1842.38" y1="1440.65" x2="2134.98" y2="1440.65" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, 1895.65, 1882.07)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="12569.56" y1="-11677.24" x2="12730.62" y2="-11677.24" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -14207.45, 9572.85)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="-1497.57" y1="13169.93" x2="-1319.8" y2="13169.93" gradientTransform="translate(-1087.21 13235.58) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Art"><g class="cls-2"><line class="cls-3" x1="2.62" y1="255.85" x2="331.51" y2="19.85"/><line class="cls-4" x1="258.54" y1="39.06" x2="80.79" y2="166.61"/></g><line class="cls-5" x1="235.22" y1="127.63" x2="407.73" y2="3.65"/></g></g></g></svg>
```
--------------------------------------------------------------------------------
/content/latest/list-event.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title@: Events
3 | $path: /latest/event/
4 | $parent: /content/latest/latest.html
5 |
6 | $localization:
7 | path: /{locale}/latest/event/
8 |
9 | class: latest-events
10 | ---
11 | {% set events = g.doc('/content/includes/events.yaml', locale=doc.locale) %}
12 |
13 | <section class="hero">
14 | <amp-img
15 | noloading
16 | height=100
17 | width=100
18 | src="{{events.hero.hero_icon}}">
19 | </amp-img>
20 | <h1 class="title">{{_(events.hero.title)}}</h1>
21 | </section>
22 | <section class="upcoming">
23 | <div class="label">{{_(events.upcoming.label)}}</div>
24 | {% if events.upcoming_events is sequence %}
25 | {% for post in events.upcoming_events %}
26 | {% with past = false, meta = false %}
27 | {% include "/views/partials/post-item.html" %}
28 | {% endwith %}
29 | {% endfor %}
30 | {% else %}
31 | <div class="no-upcoming">
32 | <amp-img
33 | noloading
34 | height=62
35 | width=62
36 | src="{{events.upcoming.empty_icon}}">
37 | </amp-img>
38 | <h4 class="empty-label">{{_(events.upcoming.empty_title)}}</h4>
39 | <p class="empty-text small underlined">{{_(events.upcoming.empty_text)|safe}}</p>
40 | </div>
41 | {% endif %}
42 | </section>
43 |
44 | {% if events.past_events %}
45 | <section class="past">
46 | <div class="label">{{_(events.past.label)}}</div>
47 | {% for post in events.past_events %}
48 | {% if loop.index <= 3 %}
49 | {% with past = true, meta = false %}
50 | {% include "/views/partials/post-item.html" %}
51 | {% endwith %}
52 | {% endif %}
53 | {% endfor %}
54 | <a class="underlined cta" href="{{g.doc('/content/latest/list-past-event.html').url.path}}">{{_(events.past.cta)}}</a>
55 | </section>
56 | {% endif %}
57 |
```
--------------------------------------------------------------------------------
/scripts/update_tweets.js:
--------------------------------------------------------------------------------
```javascript
1 | #!/usr/bin/env node
2 |
3 | // dependencies
4 | var fs = require('fs');
5 | var moment = require('moment');
6 |
7 | // config
8 | var yamlPath = '../content/includes/tweets.yaml';
9 | var count = 5;
10 |
11 | // import RSS feed from blog with feed parser
12 | var FeedParser = require('feedparser');
13 | var request = require('request');
14 |
15 | // setup feed parser
16 | var req = request('https://queryfeed.net/tw?q=%40amphtml');
17 | var feedparser = new FeedParser();
18 | var body = 'tweets:\n';
19 |
20 | req.on('response', function (res) {
21 | var stream = this;
22 | if (res.statusCode != 200) return this.emit('error', new Error('Bad status code'));
23 | stream.pipe(feedparser);
24 | });
25 |
26 | feedparser.on('end', function() {
27 | fs.writeFileSync(yamlPath, body);
28 | console.log("Tweets successfully updated.");
29 | });
30 |
31 | feedparser.on('readable', function () {
32 | var item;
33 | while (item = this.read()) {
34 |
35 | // write into the body for the homepage excerpt file
36 | if (--count >= 0) {
37 |
38 | var author = item.title.match(/^\@([^\s]+) (.+)/);
39 | var tweetId = item.link.substr(20).split('/')[2];
40 |
41 | body += `
42 | - origin_name: ${ author[2] }
43 | origin_id: ${ author[1] }
44 | origin_href: https://twitter.com/${ author[1] }`;
45 |
46 | if (author[1] !== 'AMPhtml') {
47 | body += `
48 | retweet_id: AMPhtml
49 | retweet_href: https://twitter.com/amphtml`;
50 | }
51 |
52 | var description = item.description
53 | .replace(/\<img class=\"Emoji[^\>]+alt=\"([^\"]+)\"[^\>]+\>/g, "$1")
54 | .replace(/\n/g, '');
55 |
56 | body += `
57 | tweet_id: ${ tweetId }
58 | date_data: ${ moment(item.date).format() }
59 | date: ${ moment(item.date).format("MMMM D, YYYY") }
60 | text: >
61 | ${ description }
62 | `;
63 | }
64 |
65 |
66 |
67 | }
68 | });
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Komponen Eksperimental
3 | ---
4 |
5 | [Komponen eksperimental AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments)
6 | adalah fitur rilis yang masih belum siap untuk penggunaan luas, jadi komponen ini dilindungi dengan status eksperimental.
7 |
8 | Pengembang dan pengguna dapat ikut serta menggunakan fitur ini sebelum dirilis sepenuhnya.
9 | Namun perlu diperhatikan, karena mungkin terdapat bug di dalamnya atau memiliki efek samping yang tidak terduga.
10 |
11 | ## Ikut serta dalam Saluran Dev AMP
12 |
13 | Saluran Konsol Dev AMP adalah cara untuk mengikutsertakan browser menggunakan versi pustaka JS AMP yang lebih baru.
14 |
15 | Untuk mengikutsertakan browser dalam Saluran Dev AMP,
16 | buka [laman eksperimental AMP](https://cdn.ampproject.org/experiments.html)
17 | dan aktifkan eksperimen "Saluran Dev AMP".
18 |
19 | ## Mengaktifkan komponen eksperimental
20 |
21 | Untuk konten yang disajikan dari [https://cdn.ampproject.org](https://cdn.ampproject.org),
22 | buka [laman eksperimen AMP](https://cdn.ampproject.org/experiments.html)
23 | dan aktifkan (atau nonaktifkan) komponen eksperimental dengan mengalihkan pengalih ke aktif (atau nonaktif). Ikut serta akan menetapkan cookie di browser yang akan mengaktifkan eksperimen pada semua laman AMP yang disajikan melalui Cache Google AMP.
24 |
25 | Untuk konten yang disajikan dari domain lain, eksperimen dapat dialihkan di konsol devtools jika mode pengembangan aktif menggunakan:
26 |
27 | [sourcecode:js]
28 | AMP.toggleExperiment('experiment')
29 | [/sourcecode]
30 |
31 | File AMP yang menyertakan fitur eksperimental akan gagal saat
32 | [validasi AMP](/docs/guides/validate.html).
33 | Hapus komponen eksperimental ini dari dokumen AMP yang siap produksi.
34 |
```
--------------------------------------------------------------------------------
/assets/sass/pages/_who.scss:
--------------------------------------------------------------------------------
```scss
1 | .who {
2 | .content h1 {
3 | text-align: center;
4 | }
5 |
6 | .inline-toc {
7 | display: none;
8 | }
9 |
10 | amp-accordion > section:last-child {
11 | border-bottom: 0;
12 | }
13 |
14 | .who-container {
15 | margin-top: 60px;
16 | }
17 |
18 | .item-container {
19 | column-count: 4;
20 | column-gap: $grid-gutters;
21 | list-style: none;
22 |
23 | .item {
24 | padding: 5px 0;
25 | -webkit-column-break-inside: avoid;
26 | -moz-column-break-inside: avoid;
27 | -o-column-break-inside: avoid;
28 | -ms-column-break-inside: avoid;
29 | column-break-inside: avoid;
30 | }
31 | }
32 |
33 | .browser-container {
34 | display: flex;
35 | justify-content: space-between;
36 | margin: 30px auto;
37 | padding: 0 20px;
38 | text-align: center;
39 |
40 | .browser {
41 | flex: 0 1 75px;
42 | margin: 10px;
43 | }
44 |
45 | .browser-title {
46 | @extend %text-label;
47 | color: $color-grey-md;
48 | }
49 | }
50 |
51 | hr {
52 | border: 0;
53 | border-bottom: 1px solid $color-grey-lt;
54 | border-top: 1px solid $color-grey-lt;
55 | height: 0;
56 | margin: 80px auto;
57 | }
58 |
59 | @include max-screen($tablet-portrait-breakpoint) {
60 | .item-container {
61 | column-count: 3;
62 | }
63 | }
64 |
65 | @include max-screen($mobile-breakpoint) {
66 | .content h1 {
67 | text-align: left;
68 | }
69 |
70 | .inline-toc {
71 | display: block;
72 | }
73 |
74 | .who-container,
75 | .browser-container {
76 | margin: 20px 0;
77 | }
78 |
79 | .browser-container {
80 | flex-wrap: wrap;
81 | }
82 |
83 | hr {
84 | margin: 30px auto;
85 | }
86 | }
87 |
88 | @include max-screen($mobile-medium-breakpoint) {
89 | .item-container {
90 | column-count: 2;
91 | }
92 |
93 | .browser-container {
94 | &::after {
95 | content: '';
96 | flex: 0 0 75px;
97 | margin: 10px;
98 | visibility: hidden;
99 | }
100 | }
101 | }
102 | }
103 |
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_layers.svg:
--------------------------------------------------------------------------------
```
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1,.cls-3{fill:#fff;stroke-miterlimit:10;}.cls-1,.cls-2,.cls-3{fill-opacity:0.8;}.cls-1{stroke:url(#linear-gradient);}.cls-2{fill:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="45.97" y1="92.08" x2="89.99" y2="92.08" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="47" y1="85.12" x2="89" y2="85.12" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="45.97" y1="77.17" x2="89.99" y2="77.17" xlink:href="#linear-gradient"/></defs><title>design_icon_layers</title><polygon class="cls-1" points="47 92.08 68 80.15 89 92.08 69 104 47 92.08"/><polygon class="cls-2" points="47 85.12 68 73.2 89 85.12 69 97.05 47 85.12"/><polygon class="cls-3" points="47 77.17 68 65.25 89 77.17 69 89.1 47 77.17"/><ellipse class="cls-4" cx="73.02" cy="76.06" rx="1.43" ry="1.44" transform="translate(-11.07 139.67) rotate(-83.27)"/><ellipse class="cls-4" cx="80.69" cy="64.09" rx="1.43" ry="1.44" transform="translate(7.59 136.72) rotate(-83.27)"/><ellipse class="cls-4" cx="86.63" cy="70.41" rx="1.43" ry="1.44" transform="translate(6.55 148.2) rotate(-83.27)"/><ellipse class="cls-4" cx="91.82" cy="63.74" rx="1.43" ry="1.44" transform="translate(17.76 147.46) rotate(-83.27)"/><ellipse class="cls-4" cx="92.44" cy="53.02" rx="1.43" ry="1.44" transform="translate(28.96 138.61) rotate(-83.27)"/></svg>
```
--------------------------------------------------------------------------------
/views/about-casestudies.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 | <div class="container lg">
10 | <div class="content">
11 | <article class="post">
12 | <span class="post-tag">{{_('Case Studies')}}</span>
13 | <h1 class="post-title">{{ _(doc.titles('page')) or _(doc.title) }}</h1>
14 | <div class="post-content">
15 | <div class="inline-toc">
16 | <ul>
17 | <li>
18 | <a href="{{g.url('/content/learn/case-studies.html', locale=doc.locale).path}}"{% if doc.base == 'case-studies' %} class="active"{% endif %}>All</a>
19 | </li>
20 | {% for item in g.collection('/content/learn/case-studies/category').docs(recursive=false, locale=doc.locale) %}
21 | <li>
22 | <a href="{{item.url.path}}"{% if item.title|slug == doc.base %} class="active"{% endif %}>{{_(item.title)}}</a>
23 | </li>
24 | {% endfor %}
25 | </ul>
26 | </div>
27 |
28 | {{doc.html|render|safe}}
29 |
30 | <div class="card-container grid case">
31 | {% for item in g.collection('/content/learn/case-studies').docs(recursive=false, locale=doc.locale)|reverse %}
32 | {% if doc.base == 'case-studies' or doc.base == item.category|slug %}
33 | {% with doc = item, isCase = true %}
34 | {% include "/views/partials/grid-card.html" %}
35 | {% endwith %}
36 | {% endif %}
37 | {% endfor %}
38 | </div>
39 | </div>
40 | </article>
41 | </div>
42 | </div>
43 |
44 | {% with cta = doc.cta %}
45 | {% include "/views/partials/footer-cta.html" %}
46 | {% endwith %}
47 | {% include "/views/partials/footer.html" %}
48 |
49 | {% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/_mixins.scss:
--------------------------------------------------------------------------------
```scss
1 | @mixin max-screen($max-width) {
2 | @media only screen and (max-width: $max-width) {
3 | @content;
4 | }
5 | }
6 |
7 | @mixin min-screen($min-width) {
8 | @media only screen and (min-width: $min-width + 1px) {
9 | @content;
10 | }
11 | }
12 |
13 | @mixin min-max-screen($min-width, $max-width) {
14 | @media only screen and (min-width: $min-width + 1px) and (max-width: $max-width) {
15 | @content;
16 | }
17 | }
18 |
19 | @mixin retina-screen($density:2) {
20 | @media
21 | only screen and (-webkit-min-device-pixel-ratio: $density),
22 | only screen and (min-device-pixel-ratio: $density),
23 | only screen and (min-resolution: 1dppx * $density) {
24 | @content;
25 | }
26 | }
27 |
28 | %no-break {
29 | hyphens: manual;
30 | overflow-wrap: normal;
31 | white-space: nowrap;
32 | word-break: normal;
33 | word-wrap: normal;
34 | }
35 |
36 | %break {
37 | // hyphens: auto;
38 | overflow-wrap: break-word;
39 | white-space: normal;
40 | word-break: break-word;
41 | word-wrap: break-word;
42 | }
43 |
44 | %text-label {
45 | font-size: 14px;
46 | font-weight: 400;
47 | letter-spacing: .56px;
48 | line-height: 16px;
49 | text-transform: uppercase;
50 |
51 | @include max-screen($mobile-breakpoint) {
52 | font-size: 12px;
53 | }
54 | }
55 |
56 | %text-base {
57 | font-weight: 300;
58 | text-transform: none;
59 | }
60 |
61 | %text-body {
62 | font-size: 20px;
63 | line-height: 28px;
64 |
65 | @include max-screen($mobile-breakpoint) {
66 | font-size: 16px;
67 | line-height: 26px;
68 | }
69 | }
70 |
71 | %text-small {
72 | color: $color-black-95;
73 | font-size: 16px;
74 | line-height: 26px;
75 |
76 | @include max-screen($mobile-breakpoint) {
77 | font-size: 14px;
78 | }
79 | }
80 |
81 | %text-smaller {
82 | color: $color-black-95;
83 | font-size: 14px;
84 | line-height: 26px;
85 | }
86 |
87 | %text-light {
88 | @extend %text-label;
89 | color: $color-grey-md;
90 | margin-bottom: 15px;
91 | }
92 |
93 | %link-inherit {
94 | font-size: inherit;
95 | font-weight: inherit;
96 | letter-spacing: inherit;
97 | line-height: inherit;
98 | text-transform: none;
99 | }
100 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/who_lines2.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 414.52 409.9"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="-1694.08" y1="126.2" x2="-1447.63" y2="126.2" gradientTransform="translate(1716.9 -203.9) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-1655.24" y1="100.74" x2="-1319.16" y2="100.74" gradientTransform="translate(1716.9 -203.9) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="-1775.54" y1="129.19" x2="-1582.81" y2="129.19" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="-1721.52" y1="219.76" x2="-1430.58" y2="219.76" gradientTransform="translate(1716.9 -203.9) rotate(-9.79)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>who_lines2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="294.51" y1="81.78" x2="86.25" y2="293.36"/><line class="cls-2" x1="411.31" y1="3.16" x2="125.67" y2="293.35"/><line class="cls-3" x1="3.21" y1="291.17" x2="165.09" y2="126.71"/><line class="cls-4" x1="324.35" y1="154.54" x2="77.98" y2="406.76"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/adtech/adtech_icon_intro.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70.03 61.04"><defs><style>.cls-1,.cls-3,.cls-4,.cls-5,.cls-6{fill:#fff;}.cls-1{fill-opacity:0.7;stroke:url(#linear-gradient);}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-miterlimit:10;}.cls-2{fill:none;stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}</style><linearGradient id="linear-gradient" y1="30.52" x2="36.09" y2="30.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="20.51" y1="44.16" x2="59.53" y2="5.14" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="24.05" y1="27.62" x2="29" y2="22.67" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="11.05" y1="39.62" x2="16" y2="34.67" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="40.05" y1="37.62" x2="45" y2="32.67" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="64.05" y1="14.62" x2="69" y2="9.67" xlink:href="#linear-gradient"/></defs><title>adtech_icon_intro</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="0.68 18.71 35.59 0.82 35.59 42.05 0.5 60.21 0.68 18.71"/><polyline class="cls-2" points="13.53 37.15 26.53 25.15 42.53 35.15 66.53 12.15"/><circle class="cls-3" cx="26.53" cy="25.15" r="3"/><circle class="cls-4" cx="13.53" cy="37.15" r="3"/><circle class="cls-5" cx="42.53" cy="35.15" r="3"/><circle class="cls-6" cx="66.53" cy="12.15" r="3"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Componenti sperimentali
3 | ---
4 |
5 | I [componenti sperimentali AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) sono funzioni che sono state rilasciate ma che non sono ancora pronte per essere utilizzate pubblicamente, quindi sono protette da uno stato sperimentale.
6 |
7 | Gli sviluppatori e gli utenti possono decidere di utilizzare queste funzioni prima che vengano rilasciate completamente, ma devono prestare attenzione perché potrebbero contenere bug o avere effetti collaterali imprevisti.
8 |
9 | ## Attivare l'AMP Dev Channel
10 |
11 | L'AMP Dev Console Channel consente di attivare l'utilizzo di una versione più recente delle librerie JS AMP in un browser.
12 |
13 | Per attivare l'AMP Dev Channel nel tuo browser, visita la [pagina degli esperimenti AMP](https://cdn.ampproject.org/experiments.html) e attiva l'esperimento relativo al canale.
14 |
15 | ## Attivare un componente sperimentale
16 |
17 | Per i contenuti pubblicati da [https://cdn.ampproject.org](https://cdn.ampproject.org), visita la [pagina degli esperimenti AMP](https://cdn.ampproject.org/experiments.html) e attiva (o disattiva) qualsiasi componente sperimentale utilizzando la relativa opzione. Quando attivi un componente sperimentale, nel browser viene impostato un cookie che attiverà l'esperimento per tutte le pagine AMP pubblicate tramite la cache AMP di Google.
18 |
19 | Per i contenuti pubblicati da qualsiasi altro dominio, è possibile attivare/disattivare gli esperimenti nella console devtools (quando è attiva la modalità sviluppo) utilizzando:
20 |
21 | [sourcecode:js]
22 | AMP.toggleExperiment('experiment')
23 | [/sourcecode]
24 |
25 | Tutti i file AMP che includono funzioni sperimentali non supereranno la [convalida AMP](/docs/guides/validate.html).
26 | Rimuovi questi componenti sperimentali per i documenti AMP pronti per la produzione.
27 |
```
--------------------------------------------------------------------------------
/views/blog_detail.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% block main %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | <div class="container md">
6 | <div class="content">
7 | <article class="post">
8 | <div class="post-meta">
9 | <a class="post-type" href="{{g.doc('/content/latest/list-' ~ doc.type|lower ~ '.html', locale=doc.locale).url.path}}">{{ doc.type }}</a>
10 | <span class="post-date">{{ doc.date }}</span>
11 | </div>
12 |
13 | <h1 class="post-title">{{ doc.title }}</h1>
14 |
15 | <div class="post-sheet">
16 | {% include "/views/partials/share.html" %}
17 | <div class="author-meta small">
18 | <div class="author-avatar">
19 | <amp-img
20 | noloading
21 | height=50
22 | width=50
23 | src="{{doc.avatar}}">
24 | </amp-img>
25 | </div>
26 | By <span class="author-name">{{ doc.author }}</span>
27 | <div class="author-role">{{ doc.role }}</div>
28 | </div>
29 | <div class="post-content">
30 | {{doc.html|render|safe}}
31 | </div>
32 | </div>
33 | </article>
34 | </div>
35 |
36 | {% if doc.prev() %}
37 | <div class="post-footer list">
38 | <h2>Previous Posts</h2>
39 | <div class="card-container grid case">
40 | {% with post = doc.prev(), past = false, meta = true %}
41 | {% include "/views/partials/post-item.html" %}
42 | {% endwith %}
43 |
44 | {% if doc.prev().prev() %}
45 | {% with post = doc.prev().prev(), past = false, meta = true %}
46 | {% include "/views/partials/post-item.html" %}
47 | {% endwith %}
48 | {% endif %}
49 | </div>
50 | </div>
51 | {% endif %}
52 | </div>
53 | </div>
54 | {% include "/views/partials/footer.html" %}
55 |
56 | {% endblock %}
57 |
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Testkomponenten
3 | ---
4 |
5 | [AMP-Testkomponenten](https://github.com/ampproject/amphtml/tree/master/tools/experiments) sind veröffentlichte Funktionen, die noch nicht zur allgemeinen Nutzung bereitgestellt wurden. Aus diesem Grund werden sie durch den Teststatus geschützt.
6 |
7 | Entwickler und Nutzer können der Nutzung dieser Funktionen zustimmen, um sie auszuprobieren, bevor sie für die Öffentlichkeit freigegeben werden.
8 | Die Nutzer sollten beim Einsatz dieser Komponenten aber Vorsicht walten lassen, weil die Funktionen Fehler enthalten oder unerwartete Nebeneffekte haben können.
9 |
10 | ## AMP-Dev-Version aktivieren
11 |
12 | Mit dem Channel für die AMP-Dev-Version wird dafür gesorgt, dass ein Browser eine aktuellere Version der AMP-JS-Bibliotheken verwendet.
13 |
14 | Um den Channel der AMP-Dev-Version für Ihren Browser zu aktivieren, rufen Sie die [Seite für AMP-Tests](https://cdn.ampproject.org/experiments.html) auf und aktivieren Sie den Test "AMP-Dev-Version".
15 |
16 | ## Testkomponente aktivieren
17 |
18 | Inhalte aus [https://cdn.ampproject.org](https://cdn.ampproject.org) finden Sie auf der [Seite für AMP-Tests](https://cdn.ampproject.org/experiments.html). Dort können Sie die einzelnen Testkomponenten aktivieren oder deaktivieren. Durch die Aktivierung wird ein Cookie in Ihrem Browser gesetzt, durch den der Test für alle AMP-Seiten aktiviert wird, die über den AMP-Cache von Google bereitgestellt werden.
19 |
20 | Für Inhalte aus anderen Domains können die Tests in der DevTools-Konsole wie folgt aktiviert oder deaktiviert werden, wenn der Entwicklungsmodus aktiviert ist:
21 |
22 | [sourcecode:js]
23 | AMP.toggleExperiment('experiment')
24 | [/sourcecode]
25 |
26 | Bei AMP-Dateien mit Testfunktionen [schlägt die AMP-Validierung fehl](/docs/guides/validate.html).
27 | Bei produktionsbereiten AMP-Dokumenten müssen die Testkomponenten entfernt werden.
28 |
```
--------------------------------------------------------------------------------
/content/docs/reference/experimental@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Componentes experimentais
3 | ---
4 |
5 | Os [Componentes experimentais das AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) são elementos lançados que ainda não estão prontos para uso amplo. Por essa razão, esses componentes são protegidos por um status experimental.
6 |
7 | Os desenvolvedores e os usuários podem optar por usar esses recursos antes que eles sejam completamente liberados.
8 | No entanto, eles devem ser usados com cautela, pois podem conter bugs ou produzir efeitos colaterais inesperados.
9 |
10 | ## Optar pelo Canal Dev AMP
11 |
12 | O AMP Dev Console Channel é uma maneira de fazer com que o navegador use uma versão mais recente das bibliotecas de JS AMP.
13 |
14 | Para fazer com que seu navegador opte pelo AMP Dev Console Channel, acesse a [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) e ative o experimento "AMP Dev Console Channel".
15 |
16 | ## Ativar um componente experimental
17 |
18 | Para conteúdo veiculado por [https://cdn.ampproject.org](https://cdn.ampproject.org), acesse a [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) e ative (ou desative) qualquer componente experimental clicando em "On" (ou "Off"). A ativação de um experimento definirá um cookie no seu navegador que ativará o experimento em todas as páginas AMP veiculadas por meio do cache de AMP do Google.
19 |
20 | Para conteúdo veiculado por qualquer outro domínio, os experimentos poderão ser ativados ou desativados no console de ferramentas do desenvolvedor quando o modo de desenvolvimento estiver ativado usando:
21 |
22 | [sourcecode:js]
23 | AMP.toggleExperiment('experiment')
24 | [/sourcecode]
25 |
26 | Nenhum arquivo das AMP que inclua recursos experimentais passará na [validação de AMP](/docs/guides/validate.html).
27 | Remova os componentes experimentais de documentos de AMP prontos para produção.
28 |
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Composants expérimentaux
3 | ---
4 |
5 | Les [composants expérimentaux AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) désignent des nouvelles fonctionnalités qui ne sont pas encore prêtes à être utilisées par le grand public et sont donc encore à l'état expérimental.
6 |
7 | Les développeurs et les utilisateurs peuvent choisir de tester ces fonctionnalités avant leur sortie définitive.
8 | Toutefois, ces fonctionnalités doivent être utilisées avec prudence, car elles peuvent contenir des bugs ou avoir des effets secondaires inattendus.
9 |
10 | ## Activer la version en développement d'AMP
11 |
12 | La version en développement d'AMP permet d'activer une nouvelle version des bibliothèques AMP JS dans votre navigateur.
13 |
14 | Pour activer cette version, consultez la page [Composants expérimentaux AMP](https://cdn.ampproject.org/experiments.html) et activez le composant "AMP Dev Channel" (version en développement d'AMP).
15 |
16 | ## Activer un composant expérimental
17 |
18 | Pour le contenu diffusé depuis [https://cdn.ampproject.org](https://cdn.ampproject.org), consultez la page [Composants expérimentaux AMP](https://cdn.ampproject.org/experiments.html) et activez (ou désactivez) les composants de votre choix. Lorsque vous activez un composant, un cookie est placé dans votre navigateur. Il active le composant sur toutes les pages AMP diffusées par le biais du cache AMP Google.
19 |
20 | Pour le contenu diffusé depuis d'autres domaines, il est possible d'activer les composants expérimentaux dans la console des outils de développement en mode développement à l'aide de :
21 |
22 | [sourcecode:js]
23 | AMP.toggleExperiment('experiment')
24 | [/sourcecode]
25 |
26 | Tout fichier AMP comprenant des fonctionnalités expérimentales échouera à la [validation AMP](/docs/guides/validate.html).
27 | Supprimez ces composants expérimentaux pour les documents AMP prêts pour la production.
28 |
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/lines1.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 477.07 231.68"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="-18905.04" y1="-12660.22" x2="-18703.04" y2="-12660.22" gradientTransform="translate(19075.12 12478.01) rotate(-0.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0dd0ff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-2" x1="29.51" y1="266" x2="284.3" y2="266" gradientTransform="translate(70.2 -127) rotate(-0.78)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="1739.43" y1="-1557.99" x2="1962.06" y2="-1557.99" gradientTransform="translate(-1710.05 1366.74) rotate(8.56)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-4" x1="-20099.87" y1="-11409.63" x2="-19897.88" y2="-11409.63" gradientTransform="translate(-19954.32 -11028.64) rotate(179.22)" xlink:href="#linear-gradient"/></defs><title>lines1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="197.48" y1="3.62" x2="2.67" y2="147.48"/><line class="cls-2" x1="354.26" y1="45.61" x2="107.18" y2="228.06"/><line class="cls-3" x1="474.46" y1="13.88" x2="229.31" y2="188.98"/><line class="cls-4" x1="100.98" y1="178.98" x2="295.79" y2="35.12"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_intro.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 76.17 60.26"><defs><style>.cls-1{fill:none;stroke:#0389ff;stroke-miterlimit:10;}.cls-1,.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3{fill:#fff;stroke-linejoin:round;}.cls-2,.cls-3,.cls-5{fill-opacity:0.7;}.cls-2{stroke:url(#linear-gradient);}.cls-3{stroke:url(#linear-gradient-2);}.cls-4{opacity:0.7;fill:url(#linear-gradient-3);}.cls-5{fill:#0dd7ff;}</style><linearGradient id="linear-gradient" x1="4.73" y1="36.01" x2="24.67" y2="36.01" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="11001.87" y1="26.75" x2="11033.76" y2="26.75" gradientTransform="matrix(-1, 0, 0, 1, 11057.41, 0)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="27.17" y1="26.02" x2="33.44" y2="9.26" xlink:href="#linear-gradient"/></defs><title>publisher_icon_intro</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><path class="cls-1" d="M.5,24.67,20.65,14.39l-.44-.19a.41.41,0,0,1,0-.74L25.13,11a2.06,2.06,0,0,1,1.75,0l.35.15L47,.82l.41,33.72L27.64,44.82,26.41,44,19,47.7l2.06.82L.91,58.39Z"/><polygon class="cls-2" points="5.23 26.45 24.17 12.26 24.17 46.88 5.23 59.76 5.23 26.45"/><polygon class="cls-3" points="55.03 6.62 24.15 12.26 24.15 46.88 55.03 39.93 55.03 6.62"/><polygon class="cls-4" points="26.89 10.95 32.48 8.12 33.81 8.63 33.81 24.12 31.34 22.2 28.77 27 28.36 11.51 26.89 10.95"/><circle class="cls-5" cx="62.48" cy="26.67" r="1.06"/><circle class="cls-5" cx="67.04" cy="17.23" r="1.06"/><circle class="cls-5" cx="71.91" cy="21.35" r="1.06"/><circle class="cls-5" cx="75.12" cy="16.01" r="1.06"/><circle class="cls-5" cx="74.65" cy="8.09" r="1.06"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_content.scss:
--------------------------------------------------------------------------------
```scss
1 | // page content
2 |
3 | .container {
4 | .content {
5 | margin: 0 auto;
6 | min-width: 0;
7 | padding: 100px 0;
8 | transition: all .25s ease;
9 | width: 100%;
10 | word-break: break-word;
11 |
12 | /* These are technically the same, but use both */
13 | overflow-wrap: break-word;
14 | word-wrap: break-word;
15 |
16 | /* Instead use this non-standard one: */
17 | word-break: break-word;
18 |
19 | /* Adds a hyphen where the word breaks, if supported (No Blink) */
20 | // hyphens: auto;
21 | }
22 | }
23 |
24 | // docs
25 | .main {
26 | align-items: stretch;
27 | display: flex;
28 | margin-left: 350px;
29 | min-height: 100vh;
30 |
31 | h1 {
32 | font-size: 40px;
33 | font-weight: 100;
34 | line-height: 50px;
35 | margin-top: 0;
36 | }
37 |
38 | h2 {
39 | border-top: 3px solid $color-grey-lt;
40 | font-size: 30px;
41 | line-height: 40px;
42 | margin-top: 30px;
43 | padding-top: 20px;
44 | }
45 |
46 | h3 {
47 | font-size: 24px;
48 | line-height: 32px;
49 | margin-top: 30px;
50 | }
51 |
52 | a {
53 | font-size: 16px;
54 | }
55 |
56 | aside {
57 | a {
58 | font-size: 14px;
59 | }
60 | }
61 |
62 | .content {
63 | flex-grow: 1;
64 | -webkit-flex-grow: 1;
65 | max-width: 1000px;
66 | padding-bottom: 60px;
67 | padding-top: 70px;
68 |
69 | ul,
70 | ol {
71 | margin-left: 40px;
72 | }
73 | }
74 |
75 | amp-img,
76 | amp-youtube,
77 | amp-iframe {
78 | margin: 1em 0;
79 | }
80 | }
81 |
82 | .rtl .main {
83 | margin: 0 350px 0 auto;
84 |
85 | .content {
86 | // ul,
87 | // ol {
88 | // margin-left: 0;
89 | // margin-right: 40px;
90 | // }
91 | }
92 | }
93 |
94 | @include max-screen($mobile-breakpoint) {
95 | .container {
96 | .content {
97 | max-width: 100%;
98 | padding: 70px 0;
99 | }
100 | }
101 |
102 | .main {
103 | flex-direction: column;
104 | margin-left: 0;
105 |
106 | h1 {
107 | font-size: 26px;
108 | line-height: 40px;
109 | font-weight: 300;
110 | }
111 |
112 | h2 {
113 | font-size: 20px;
114 | line-height: 28px;
115 | }
116 |
117 | h3 {
118 | font-size: 18px;
119 | line-height: 26px;
120 | }
121 |
122 | a {
123 | font-size: 14px;
124 | }
125 | }
126 |
127 | .rtl .main {
128 | margin-right: 0;
129 | }
130 | }
131 |
```
--------------------------------------------------------------------------------
/assets/img/home/lines3.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 359.59 377.35"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}</style><linearGradient id="linear-gradient" x1="7421.99" y1="5159.15" x2="7706.91" y2="5159.15" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, 6789.79, 6576.99)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-3638.04" y1="11335.84" x2="-3383.2" y2="11335.84" gradientTransform="translate(3703.99 -11241.92)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79bd"/><stop offset="0.5" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="-1468.69" y1="11340.8" x2="-1183.76" y2="11340.8" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, 3345.65, -10790.36)" xlink:href="#linear-gradient-2"/><linearGradient id="linear-gradient-4" x1="13156.86" y1="5654.2" x2="13371.48" y2="5654.2" gradientTransform="translate(13422.22 5836.65) rotate(180)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd0ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient></defs><title>lines 3</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="2.62" y1="373.7" x2="322.69" y2="144.03"/><line class="cls-2" x1="318.16" y1="3.65" x2="68.59" y2="184.18"/><line class="cls-3" x1="356.97" y1="70.15" x2="36.91" y2="299.82"/><line class="cls-4" x1="53.37" y1="257.68" x2="262.74" y2="107.21"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/reference/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Componentes experimentales
3 | ---
4 |
5 | Los [componentes experimentales de AMP](https://github.com/ampproject/amphtml/tree/master/tools/experiments) son funciones que no están listas para usarse de forma generalizada; de ahí que se protejan con el estado de "experimentales".
6 |
7 | Los desarrolladores y los usuarios pueden habilitar el uso de estas funciones antes de que se publiquen definitivamente,
8 | pero deben usarlas con precaución, ya que pueden contener errores o efectos secundarios inesperados.
9 |
10 | ## Habilitar el canal para desarrolladores de AMP
11 |
12 | El canal de la consola para desarrolladores de AMP es una forma de habilitar un navegador para que utilice una versión más reciente de las bibliotecas JavaScript de AMP.
13 |
14 | Para habilitar tu navegador en el canal para desarrolladores de AMP, ve a la [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) y activa el experimento "Canal para desarrolladores de AMP".
15 |
16 | ## Habilitar un componente experimental
17 |
18 | En el caso de contenido publicado desde [https://cdn.ampproject.org](https://cdn.ampproject.org), ve a la [página de experimentos de AMP](https://cdn.ampproject.org/experiments.html) y habilita (o inhabilita) los componentes experimentales activándolos (o desactivándolos). Al habilitar esta opción, se definirá una cookie en el navegador que habilitará el experimento en todas las páginas de AMP que se publiquen a través de Google AMP Cache.
19 |
20 | En el caso de contenido publicado desde cualquier otro dominio, los experimentos se podrán activar desde la consola DevTools cuando el modo de desarrollo se haya habilitado mediante:
21 |
22 | [sourcecode:js]
23 | AMP.toggleExperiment('experiment')
24 | [/sourcecode]
25 |
26 | Los archivos de AMP que incluyan funciones experimentales no superarán la [validación de AMP](/docs/guides/validate.html).
27 | Quita estos componentes experimentales de los documentos de AMP listos para la producción.
28 |
```
--------------------------------------------------------------------------------
/assets/img/logo-blue.svg:
--------------------------------------------------------------------------------
```
1 | <svg width="175" height="60" viewBox="0 0 175 60" xmlns="http://www.w3.org/2000/svg"><title>AMP-Brand-Blue</title><g fill="#0379C4" fill-rule="evenodd"><path d="M92.938 34.265h7.07l-2.38-7.015c-.153-.445-.334-.97-.54-1.574-.21-.603-.414-1.256-.615-1.96-.188.715-.384 1.378-.585 1.988-.202.61-.392 1.136-.57 1.58l-2.38 6.98zm16.632 9.794h-4.656c-.522 0-.95-.122-1.29-.362-.336-.24-.57-.548-.7-.923l-1.528-4.465h-9.844l-1.53 4.465c-.116.328-.348.625-.69.888-.344.264-.765.396-1.263.396h-4.692L93.4 18.44h6.147L109.57 44.06zM130.562 33.736c.22.48.43.975.63 1.48.202-.518.415-1.02.64-1.505.225-.487.456-.96.693-1.416l6.645-12.954c.12-.224.24-.397.365-.52.124-.123.264-.214.417-.273.154-.06.33-.088.524-.088h5.27v25.6h-5.295V29.324c0-.714.035-1.49.106-2.32l-6.858 13.168c-.213.41-.5.72-.862.932-.362.21-.773.316-1.235.316h-.816c-.462 0-.873-.104-1.235-.315-.363-.21-.65-.52-.864-.932l-6.893-13.187c.047.41.083.818.106 1.222.023.405.035.778.035 1.117V44.06h-5.295v-25.6h5.269c.194 0 .37.028.523.087.154.06.293.15.417.274.125.123.246.296.365.52l6.663 13.006c.237.446.464.91.684 1.39M160.99 31.013h3.127c1.563 0 2.688-.37 3.376-1.108.687-.738 1.03-1.77 1.03-3.094 0-.585-.088-1.12-.266-1.6-.178-.48-.448-.893-.808-1.24-.363-.344-.82-.612-1.37-.8-.55-.187-1.206-.28-1.963-.28h-3.127v8.123zm0 4.483v8.562h-6.006V18.442h9.133c1.824 0 3.39.214 4.7.64 1.308.43 2.387 1.018 3.233 1.77.847.75 1.473 1.634 1.875 2.653.403 1.02.604 2.122.604 3.306 0 1.278-.208 2.45-.622 3.518-.416 1.065-1.05 1.98-1.902 2.742-.853.762-1.934 1.357-3.243 1.784-1.308.43-2.857.642-4.646.642h-3.127zM40.674 27.253L27.968 48.196h-2.302l2.276-13.647-7.048.01h-.1c-.633 0-1.148-.51-1.148-1.137 0-.27.254-.727.254-.727l12.664-20.92 2.34.01-2.332 13.668 7.084-.008.112-.002c.635 0 1.15.51 1.15 1.14 0 .254-.1.478-.245.668zM30.288 0C13.56 0 0 13.432 0 30 0 46.57 13.56 60 30.288 60c16.73 0 30.29-13.431 30.29-30 0-16.568-13.56-30-30.29-30z"/></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/publishers/publisher_icon_simple.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 101.89 99.69"><defs><style>.cls-1,.cls-2{fill:#fff;fill-opacity:0.7;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke-miterlimit:10;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3,.cls-4,.cls-5{fill:none;}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{fill:#0dd4ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="-5.17" y1="84.96" x2="66.47" y2="13.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd4ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="13.37" y1="94.53" x2="85.01" y2="22.89" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="41.54" y1="67.41" x2="59.85" y2="49.1" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="31.78" y1="73.19" x2="45.37" y2="59.59" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="54.45" y1="57.75" x2="68.78" y2="43.43" xlink:href="#linear-gradient"/></defs><title>publisher_icon_simple</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><polygon class="cls-1" points="60.8 56.48 0.5 89.29 0.5 41.8 60.8 9 60.8 56.48"/><polygon class="cls-2" points="79.34 66.05 19.04 98.85 19.04 51.37 79.34 18.57 79.34 66.05"/><line class="cls-3" x1="53.6" y1="43.24" x2="47.79" y2="73.27"/><polyline class="cls-4" points="41.01 55.35 30.36 70.36 42.95 70.84"/><polyline class="cls-5" points="58.44 45.66 70.06 46.15 58.44 61.64"/><circle class="cls-6" cx="86.9" cy="21.49" r="1.15"/><circle class="cls-6" cx="91.89" cy="11.15" r="1.15"/><circle class="cls-6" cx="97.23" cy="15.67" r="1.15"/><circle class="cls-6" cx="100.74" cy="9.82" r="1.15"/><circle class="cls-6" cx="100.23" cy="1.15" r="1.15"/></g></g></svg>
```
--------------------------------------------------------------------------------
/views/about-who.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 | <div class="container xl about-who-block">
10 | <div class="hero-images">
11 | <amp-img class="triangle"
12 | noloading
13 | width=1424
14 | height=2095
15 | layout=responsive
16 | src="/static/img/about/who-use-amp/{{doc.hero.triangle_img}}">
17 | </amp-img>
18 | <amp-img class="lines"
19 | noloading
20 | width=579
21 | height=481
22 | layout=responsive
23 | src="/static/img/about/who-use-amp/{{doc.hero.line_img}}">
24 | </amp-img>
25 | <amp-img class="phones"
26 | noloading
27 | width=3104
28 | height=1926
29 | layout=responsive
30 | srcset="{{doc.hero.hero_img_base + '.png 3104w'}},
31 | {{doc.hero.hero_img_base + '@1_5x.png 2049w'}},
32 | {{doc.hero.hero_img_base + '@1x.png 1552w'}}"
33 | src="{{doc.hero.hero_img_base + '.png'}}">
34 | </amp-img>
35 | </div>
36 | <section class="hero">
37 | <h1 class="title">{{_(doc.hero.title)}}</h1>
38 | <p class="subtitle">{{_(doc.hero.subtitle)}}</p>
39 | </section>
40 | <section class="user-categories card-container">
41 | {% for card in doc.cards %}
42 | <a class="card" id="{{card.name|slug}}" href="{{g.doc('/content/learn/who/' ~ card.name|slug ~ '.yaml', locale=doc.locale).url.path}}">
43 | <amp-img
44 | noloading
45 | height=150
46 | layout=fixed-height
47 | src="/static/img/about/who-use-amp/{{card.icon}}">
48 | </amp-img>
49 | <h4 class="user-name">{{card.name}}</h4>
50 | <div class="underlined cta user-link">{{_(card.cta)}}</div>
51 | </a>
52 | {% endfor %}
53 | </section>
54 | </div>
55 |
56 | {% with cta = doc.cta %}
57 | {% include "/views/partials/footer-cta.html" %}
58 | {% endwith %}
59 | {% include "/views/partials/footer.html" %}
60 |
61 | {% endblock %}
```
--------------------------------------------------------------------------------
/views/grid_page.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 | <div class="container lg">
10 | <div class="content">
11 | <article class="post">
12 | <h1 class="post-title">{{_(doc.title)}}</h1>
13 | <div class="post-content">
14 | {{doc.html|render|safe}}
15 |
16 | {% if doc.collectionPath %}
17 | {% set collection = doc.collectionPath %}
18 | {% elif doc.collection.title == doc.title %}
19 | {% set collection = doc.collection.pod_path %}
20 | {% else %}
21 | {% set collection = (doc.collection.pod_path + '/' + doc.base) %}
22 | {% endif %}
23 |
24 | {% if doc.sections %}
25 | {% for section in doc.sections %}
26 | <h2 class="card-section-heading">{{_(section.title)}}</h2>
27 | <div class="card-container grid">
28 | {% set sectionIndex = loop.index0 %}
29 | {% for item in g.collection(collection).docs(recursive=false, locale=doc.locale) %}
30 | {% if item.group == sectionIndex %}
31 | {% with doc = item %}
32 | {% include "/views/partials/grid-card.html" %}
33 | {% endwith %}
34 | {% endif %}
35 | {% endfor %}
36 | </div>
37 | {% endfor %}
38 | {% else %}
39 | <div class="card-container grid">
40 | {% for item in g.collection(collection).docs(recursive=false, locale=doc.locale) %}
41 | {% with doc = item %}
42 | {% include "/views/partials/grid-card.html" %}
43 | {% endwith %}
44 | {% endfor %}
45 | </div>
46 | {% endif %}
47 | </div>
48 | </article>
49 | </div>
50 | </div>
51 |
52 | {% if doc.cta %}
53 | {% with cta = doc.cta %}
54 | {% include "/views/partials/footer-cta.html" %}
55 | {% endwith %}
56 | {% endif %}
57 |
58 | {% include "/views/partials/footer.html" %}
59 |
60 | {% endblock %}
61 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/ads_icon.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 61.19 89.34"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#fff;stroke-width:0.87px;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;}.cls-2,.cls-3{fill-opacity:0.7;stroke-linecap:round;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:#fff;stroke:url(#linear-gradient-2);}.cls-4{fill-opacity:0.8;fill:url(#linear-gradient-3);}.cls-5{fill:#0dd7ff;opacity:0.7;}</style><linearGradient id="linear-gradient" x1="-5.87" y1="72.19" x2="42.72" y2="23.59" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#7ad5fc"/></linearGradient><linearGradient id="linear-gradient-2" x1="13.46" y1="82.86" x2="63.4" y2="32.92" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="37.02" y1="63.72" x2="52.82" y2="47.92" xlink:href="#linear-gradient"/></defs><title>ads_icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M36.23,32.51"/><path class="cls-1" d="M18.55,51.77"/><path class="cls-2" d="M36.42,58.57.43,78.49V37.21l36-19.92ZM4,43.74,29.86,29.45M11.76,47.89,4.36,52.1m0,4.24,7.4-4.21"/><path class="cls-3" d="M56.42,68.57l-36,19.92V47.21l36-19.92ZM24,53.74,49.86,39.45M31.76,57.89l-7.4,4.21m0,4.24,7.4-4.21"/><polygon class="cls-4" points="50.57 59.88 39.27 65.96 39.27 51.76 50.57 45.68 50.57 59.88"/><circle class="cls-5" cx="60.04" cy="1.15" r="1.15" transform="translate(0.02 3.08) rotate(-2.94)"/><circle class="cls-5" cx="55.58" cy="11.73" r="1.15" transform="translate(-0.53 2.86) rotate(-2.94)"/><circle class="cls-5" cx="50.03" cy="7.5" r="1.15" transform="translate(-0.32 2.57) rotate(-2.94)"/><circle class="cls-5" cx="46.82" cy="13.51" r="1.15" transform="translate(-0.63 2.42) rotate(-2.94)"/><circle class="cls-5" cx="47.77" cy="22.14" r="1.15" transform="translate(-1.07 2.48) rotate(-2.94)"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/_sprite.scss:
--------------------------------------------------------------------------------
```scss
1 | @import 'sprite_generated';
2 |
3 | $sprite: map-get($icons, sprite) !default;
4 | $baseFontSize: 16px !default;
5 |
6 | // Gets an attribute from the sass map
7 | @function sprite-attr($icon, $attr) {
8 | $newIcon: map-get($icons, $icon);
9 | @if $newIcon == null {
10 | @warn "Can't find an icon with the name #{$icon}";
11 | }
12 | @return map-get($newIcon, $attr);
13 | }
14 |
15 | @function icon-attr($icon) {
16 | $attr: (
17 | width: sprite-attr($icon, width),
18 | height: sprite-attr($icon, height),
19 | x: sprite-attr($icon, backgroundX),
20 | y: sprite-attr($icon, backgroundY)
21 | );
22 |
23 | @return $attr;
24 | }
25 |
26 | // Sets background image and size
27 | %sprite {
28 | display: inline-block;
29 | background-image: url(map-get($sprite, svgPath));
30 | background-size: map-get($sprite, width) map-get($sprite, height);
31 | }
32 |
33 | // For use with the gulp sprite plugin
34 | @mixin sprite($icon, $type: all) {
35 | @if $type == all {
36 | // Shares the backgrounds
37 | @extend %sprite;
38 | }
39 |
40 | $iconMap: icon-attr($icon);
41 |
42 | // Outputs dimensions
43 | @if $type == all or $type == size {
44 | width: map-get($iconMap, width);
45 | height: map-get($iconMap, height);
46 | }
47 |
48 | // Outputs background position
49 | @if $type == all or $type == bg {
50 | background-position: map-get($iconMap, x) map-get($iconMap, y);
51 | }
52 |
53 | }
54 |
55 | // Sets background image and size
56 | %masked-sprite {
57 | display: inline-block;
58 | mask-image: url(map-get($sprite, svgPath));
59 | mask-size: map-get($sprite, width) map-get($sprite, height);
60 | background-color: #000;
61 | }
62 |
63 | // For use with the gulp sprite plugin
64 | @mixin masked-sprite($icon, $type: all) {
65 | @if $type == all {
66 | // Shares the backgrounds
67 | @extend %masked-sprite;
68 | }
69 |
70 | $iconMap: icon-attr($icon);
71 |
72 | // Outputs dimensions
73 | @if $type == all or $type == size {
74 | width: map-get($iconMap, width);
75 | height: map-get($iconMap, height);
76 | }
77 |
78 | // Outputs background position
79 | @if $type == all or $type == bg {
80 | mask-position: map-get($iconMap, x) map-get($iconMap, y);
81 | }
82 |
83 | }
```
--------------------------------------------------------------------------------
/scripts/component_categories.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "amp-ad": "ads-analytics",
3 | "amp-analytics": "ads-analytics",
4 | "amp-call-tracking": "ads-analytics",
5 | "amp-experiment": "ads-analytics",
6 | "amp-pixel": "ads-analytics",
7 | "amp-auto-ads": "ads-analytics",
8 | "amp-sticky-ad": "ads-analytics",
9 |
10 | "amp-access-laterpay": "dynamic-content",
11 | "amp-access": "dynamic-content",
12 | "amp-bind": "dynamic-content",
13 | "amp-form": "dynamic-content",
14 | "amp-install-serviceworker": "dynamic-content",
15 | "amp-list": "dynamic-content",
16 | "amp-live-list": "dynamic-content",
17 | "amp-mustache": "dynamic-content",
18 | "amp-selector": "dynamic-content",
19 | "amp-user-notification": "dynamic-content",
20 |
21 | "amp-accordion": "layout",
22 | "amp-app-banner": "layout",
23 | "amp-carousel": "layout",
24 | "amp-fx-flying-carpet": "layout",
25 | "amp-fx-parallax": "layout",
26 | "amp-iframe": "layout",
27 | "amp-lightbox": "layout",
28 | "amp-sidebar": "layout",
29 |
30 | "amp-anim": "media",
31 | "amp-apester-media": "media",
32 | "amp-audio": "media",
33 | "amp-brid-player": "media",
34 | "amp-brightcove": "media",
35 | "amp-dailymotion": "media",
36 | "amp-google-vrview-image": "media",
37 | "amp-hulu": "media",
38 | "amp-image-lightbox": "media",
39 | "amp-img": "media",
40 | "amp-izlesene": "media",
41 | "amp-jwplayer": "media",
42 | "amp-kaltura-player": "media",
43 | "amp-o2-player": "media",
44 | "amp-ooyala-player": "media",
45 | "amp-playbuzz": "media",
46 | "amp-reach-player": "media",
47 | "amp-soundcloud": "media",
48 | "amp-springboard-player": "media",
49 | "amp-video": "media",
50 | "amp-vimeo": "media",
51 | "amp-youtube": "media",
52 |
53 | "amp-animation": "presentation",
54 | "amp-dynamic-css-classes": "presentation",
55 | "amp-fit-text": "presentation",
56 | "amp-font": "presentation",
57 | "amp-viz-vega": "presentation",
58 |
59 | "amp-facebook": "social",
60 | "amp-gfycat": "social",
61 | "amp-instagram": "social",
62 | "amp-pinterest": "social",
63 | "amp-reddit": "social",
64 | "amp-share-tracking": "social",
65 | "amp-social-share": "social",
66 | "amp-twitter": "social",
67 | "amp-vine": "social"
68 | }
```
--------------------------------------------------------------------------------
/content/includes/menu.yaml:
--------------------------------------------------------------------------------
```yaml
1 | menu:
2 | - href: /content/learn/overview.html
3 | copy@: About
4 | collection: learn
5 | children:
6 | - href: /content/learn/overview.html
7 | copy@: "What is AMP?"
8 | - href: /content/learn/about-how.yaml
9 | copy@: "How AMP Works"
10 | - href: /content/learn/amp-design-principles.yaml
11 | copy@: "Design Principles"
12 | - href: /content/learn/who-uses-amp.yaml
13 | copy@: "Who is AMP for?"
14 | collection: learn/who
15 | - href: /content/learn/case-studies.html
16 | copy@: "Case Studies"
17 | collection: learn/case-studies
18 | - href: /content/docs/get_started/general/create.md
19 | copy@: Docs
20 | collection: docs
21 | children:
22 | - href: /content/docs/get_started/general/create.md
23 | copy@: "Getting started"
24 | - href: /content/docs/get_started/general/create.md
25 | copy@: "Tutorials"
26 | collection: docs/get_started
27 | - href: /content/docs/guides/author_develop/responsive_amp.md
28 | copy@: "Guides"
29 | collection: docs/guides
30 | - href: /content/docs/reference/components.md
31 | copy@: "Reference"
32 | collection: docs/reference
33 | - href: https://ampbyexample.com/
34 | copy@: "Examples"
35 | - href: /content/docs/contribute/contribute.md
36 | copy@: "Contribute"
37 | collection: docs/contribute
38 | - href: /content/latest/latest.html
39 | copy@: The Latest
40 | collection: latest
41 | children:
42 | - href: /content/latest/latest.html
43 | copy@: "What's New"
44 | - href: /content/latest/list-blog.html
45 | copy@: "News"
46 | - href: /content/latest/list-event.html
47 | copy@: "Events"
48 | - href: /content/latest/roadmap.html
49 | copy@: "Roadmap"
50 | - href: /content/support/support.md
51 | copy@: Support
52 | collection: support
53 | children:
54 | - href: /content/support/faqs.md
55 | copy@: "FAQs"
56 | collection: support/faqs
57 | - href: /content/support/developer.md
58 | copy@: "Developer Support"
59 | collection: support/developer
60 | - href: /assets/img/brand-guidelines.pdf
61 | static: true
62 | copy@: "Brand Guidelines"
63 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/iframes.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Include Iframes
3 | $order: 2
4 | components:
5 | - iframe
6 | toc: true
7 | ---
8 | [TOC]
9 |
10 |
11 | Learn how to display include media content in your pages, and how to use iframes
12 | to display advanced content outside of AMP's limitations.
13 |
14 | ## The basics
15 |
16 | Display an iframe in your page using the
17 | [`amp-iframe`](/docs/reference/components/amp-iframe.html) element.
18 |
19 | Iframes are especially useful in AMP to display content not supported in the
20 | main page context, such as content requiring user-authored JavaScript.
21 |
22 | `amp-iframe` requirements:
23 |
24 | * Must be at least **600px** or **75%** of the first viewport away from the top.
25 | * Can only request resources via HTTPS, and they must not be in the same origin
26 | as the container, unless they do not specify allow-same-origin.
27 |
28 | {% call callout('Tip', type='note') %}
29 | Learn more at the [full specification for <code>amp-iframe</code>](/docs/reference/components/amp-iframe.html).
30 | {% endcall %}
31 |
32 | ## Include the script
33 |
34 | To include an `amp-iframe` in your page,
35 | first include the following script to the `<head>`, which loads the additional
36 | code for the extended component:
37 |
38 | [sourcecode:html]
39 | <script async custom-element="amp-iframe"
40 | src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
41 | [/sourcecode]
42 |
43 | ## Write the markup
44 |
45 | An example `amp-iframe` from the
46 | [released.amp example](https://github.com/ampproject/amphtml/blob/master/examples/released.amp.html):
47 |
48 | [sourcecode:html]
49 | <amp-iframe width=300 height=300
50 | sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
51 | layout="responsive"
52 | frameborder="0"
53 | src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
54 | </amp-iframe>
55 | [/sourcecode]
56 |
57 | ## Examples
58 |
59 | More advanced examples can be found in our [advanced demo page](https://ampbyexample.com/components/amp-iframe/), which is embedded
60 | as `<amp-iframe>` below:
61 |
62 | <amp-iframe width=300 height=300
63 | sandbox="allow-scripts allow-same-origin"
64 | layout="responsive"
65 | frameborder="0"
66 | src="https://ampbyexample.com/components/amp-iframe/embed">
67 | </amp-iframe>
```
--------------------------------------------------------------------------------
/pwa/pwa.html:
--------------------------------------------------------------------------------
```html
1 | <!doctype html>
2 | <html>
3 | <head>
4 | <meta charset="utf-8">
5 | <title>PWA</title>
6 | <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
7 | <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto">
8 |
9 | <!-- pwa.html should run at `/pwa` -->
10 | <script>
11 | if (window.location.pathname.indexOf('/examples') == 0) {
12 | window.location.assign('/pwa');
13 | }
14 | </script>
15 |
16 | <script src="https://cdn.ampproject.org/shadow-v0.js"></script>
17 |
18 | <style>
19 | body {
20 | margin: 0;
21 | font-family: Roboto, Arial;
22 | }
23 |
24 | header {
25 | position: fixed;
26 | top: 0;
27 | left: 0;
28 | right: 0;
29 | height: 56px;
30 | background: rgba(0, 0, 0, 0.9);
31 | color: #eee;
32 | display: flex;
33 | align-content: center;
34 | align-items: center;
35 | justify-content: center;
36 | font-size: 18px;
37 | }
38 |
39 | .container {
40 | min-height: 100vh;
41 | background: #eee;
42 | overflow: hidden;
43 | }
44 |
45 | .stream {
46 | margin: 64px 8px;
47 | }
48 |
49 | .card {
50 | background: #fff;
51 | box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
52 | padding: 8px;
53 | margin: 8px 0;
54 | }
55 |
56 | .card a {
57 | text-decoration: none;
58 | }
59 |
60 | .card h4 {
61 | margin: 8px 0;
62 | font-size: 16px;
63 | color: rgba(0,0,0,0.95);
64 | }
65 |
66 | .card .detail {
67 | margin: 8px 0;
68 | font-size: 14px;
69 | color: rgba(0,0,0,0.87);
70 | }
71 |
72 | .amp-slot {
73 | padding: 16px;
74 | font-size: larger;
75 | background: cyan;
76 | }
77 | </style>
78 | </head>
79 | <body>
80 | <header>
81 | PWA Chronicles
82 | </header>
83 | <div class="container">
84 |
85 | <div id="doc-container" class="doc-container">
86 | Document will appear here
87 | </div>
88 | <template id="amp-slot-template">
89 | <div class="amp-slot" slot="slot1" onclick="alert('This is not allowed and I don\'t care!');">
90 | This content comes from parent shell! Including forbidden elements, styles, etc.
91 | <img src="/examples/img/[email protected]" style="width: 40px; height: 40px;">
92 | </div>
93 | </template>
94 | </div>
95 |
96 | <!-- Must be in the very end. -->
97 | <script src="/pwa.js"></script>
98 | </body>
99 | </html>
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/design_icon_future.svg:
--------------------------------------------------------------------------------
```
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1{fill:#fff;}.cls-1,.cls-5{opacity:0.7;}.cls-2,.cls-4{fill:none;stroke-linecap:round;stroke-miterlimit:10;}.cls-2{stroke:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{stroke:url(#linear-gradient-3);}.cls-5{fill:#0dd7ff;}</style><linearGradient id="linear-gradient" x1="61.36" y1="79.2" x2="88.83" y2="85.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c4"/><stop offset="0.51" stop-color="#0389ff"/><stop offset="1" stop-color="#0dd7ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="63.79" y1="68.02" x2="91.26" y2="74" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="63.6" y1="18.37" x2="71.82" y2="19.65" gradientTransform="translate(11.58 58.93) rotate(3.43)" xlink:href="#linear-gradient"/></defs><title>design_icon_future</title><path class="cls-1" d="M89,76.54c-.5-7.69-4.07-13.77-9.48-15C72.21,60,64.3,67.89,61.86,79.27s1.51,21.91,8.82,23.52S85.89,96.48,88.34,85.1"/><path class="cls-2" d="M88.91,75.46c-.75-7.17-4.23-12.74-9.39-13.88C72.21,60,64.3,67.89,61.86,79.27s1.51,21.91,8.82,23.52S85.89,96.48,88.34,85.1"/><polygon class="cls-3" points="92.43 71.61 91.61 71.04 88.79 75.09 84.96 71.99 84.33 72.77 89 76.54 92.43 71.61"/><polyline class="cls-4" points="75.52 76.26 74.95 86.03 81.58 82.87"/><ellipse class="cls-5" cx="98.02" cy="78.06" rx="1.43" ry="1.44" transform="translate(9.02 166.27) rotate(-83.27)"/><ellipse class="cls-5" cx="105.69" cy="66.09" rx="1.43" ry="1.44" transform="translate(27.67 163.31) rotate(-83.27)"/><ellipse class="cls-5" cx="106.63" cy="73.41" rx="1.43" ry="1.44" transform="translate(21.23 170.71) rotate(-83.27)"/><ellipse class="cls-5" cx="53.86" cy="92.31" rx="1.43" ry="1.44" transform="translate(-52.11 106.23) rotate(-67.22)"/><ellipse class="cls-5" cx="43.18" cy="101.7" rx="1.43" ry="1.44" transform="translate(-67.3 102.14) rotate(-67.22)"/><ellipse class="cls-5" cx="39.22" cy="93.98" rx="1.43" ry="1.44" transform="translate(-62.61 93.76) rotate(-67.22)"/></svg>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_design-principles.scss:
--------------------------------------------------------------------------------
```scss
1 | .design-principles {
2 |
3 | .wrap {
4 | &::after {
5 | content: '';
6 | position: absolute;
7 | z-index: -1;
8 | }
9 |
10 | &::after {
11 | background: url(/static/img/about/design-principles/bg2.svg) bottom left/contain no-repeat;
12 | bottom: 0;
13 | height: 69vw;
14 | left: 0;
15 | width: 50vw;
16 | }
17 | }
18 |
19 | .title {
20 | margin: 100px auto;
21 | max-width: 500px;
22 | text-align: center;
23 |
24 | h1, p {
25 | color: white;
26 | }
27 | }
28 |
29 | .principles {
30 | background: white;
31 | display: flex;
32 | margin: 0 auto 100px;
33 | max-width: 90%;
34 | padding: 60px 100px 60px 30px;
35 | position: relative;
36 |
37 | &::before, &::after {
38 | content: '';
39 | position: absolute;
40 | }
41 |
42 | &::before {
43 | background: url(/static/img/about/design-principles/lines1.svg) center/contain no-repeat;
44 | height: 232px;
45 | right: -360px;
46 | top: -130px;
47 | width: 477px;
48 | }
49 |
50 | &::after {
51 | background: url(/static/img/about/design-principles/lines2.svg) center/contain no-repeat;
52 | bottom: -30px;
53 | height: 200px;
54 | left: -280px;
55 | width: 259px;
56 | }
57 | }
58 |
59 | .principles-col {
60 | flex: 1 1 auto;
61 | width: 0;
62 | }
63 |
64 | .principle {
65 | display: inline-flex;
66 | padding: 40px 0;
67 |
68 | &:last-child {
69 | .text::after {
70 | display: none;
71 | }
72 | }
73 |
74 | .image {
75 | left: 20px;
76 | height: 150px;
77 | min-height: 150px;
78 | min-width: 150px;
79 | position: relative;
80 | top: -30px;
81 | width: 150px;
82 | }
83 |
84 | .text {
85 | position: relative;
86 |
87 | &::after {
88 | background: $gradient-med;
89 | bottom: -35px;
90 | content: '';
91 | height: 3px;
92 | position: absolute;
93 | transform: rotate(180deg);
94 | width: 100%;
95 | }
96 | }
97 | }
98 |
99 | @include max-screen($tablet-breakpoint) {
100 | .wrap::after {
101 | height: 270vw;
102 | width: 150vw;
103 | }
104 |
105 | .principles {
106 | display: block;
107 | padding: 20px;
108 | }
109 |
110 | .principles-col {
111 | width: auto;
112 |
113 | &:first-child .principle:last-child .text::after {
114 | display: block;
115 | }
116 | }
117 |
118 | .principle {
119 | display: block;
120 |
121 | .image {
122 | left: 0;
123 | margin: -40px auto;
124 | }
125 |
126 | .text {
127 | margin: 0 auto;
128 | max-width: 500px;
129 | }
130 | }
131 | }
132 | }
```
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
```javascript
1 | var autoprefixer = require('gulp-autoprefixer');
2 | var exec = require('child_process').exec;
3 | var plumber = require('gulp-plumber');
4 | var gulp = require('gulp');
5 | var sass = require('gulp-sass');
6 | var svgSprite = require('gulp-svg-sprite');
7 |
8 | var Path = {
9 | CSS_SOURCES: './assets/sass/**/*.scss',
10 | CSS_OUT_DIR: './assets/css/'
11 | };
12 |
13 | gulp.task('import-docs', function (cb) {
14 | exec('cd ./scripts && ./import_docs.js', function (err, stdout, stderr) {
15 | if (err instanceof Error) {
16 | cb(err);
17 | }
18 | //console.log(stdout);
19 | cb();
20 | });
21 | });
22 |
23 | gulp.task('optimize-images', function (cb) {
24 | return gulp.src('./assets/img/symbols/*.svg')
25 | .pipe(svgSprite({
26 | mode: {
27 | css: {
28 | sprite: "../sprite.svg",
29 | bust: false,
30 | render: {
31 | scss: {
32 | template: "./assets/img/symbols/template.scss",
33 | dest: "../../sass/_sprite_generated.scss"
34 | }
35 | }
36 | }
37 | }
38 | }))
39 | .pipe(gulp.dest('./assets/img/'));
40 | });
41 |
42 | gulp.task('update-blog-links', function (cb) {
43 | exec('cd ./scripts && ./update_blog_links.js', function (err, stdout, stderr) {
44 | if (err instanceof Error) {
45 | cb(err);
46 | }
47 | //console.log(stdout);
48 | cb();
49 | });
50 | });
51 |
52 | gulp.task('update-tweets', function (cb) {
53 | exec('cd ./scripts && ./update_tweets.js', function (err, stdout, stderr) {
54 | if (err instanceof Error) {
55 | cb(err);
56 | }
57 | //console.log(stdout);
58 | cb();
59 | });
60 | });
61 |
62 | gulp.task('update-platforms-page', ['import-docs'], function (cb) {
63 | return exec('cd ./scripts && ./update_platforms_page.js', function (err, stdout, stderr) {
64 | if (err instanceof Error) {
65 | cb(err);
66 | }
67 | //console.log(stdout);
68 | cb();
69 | });
70 | });
71 |
72 | gulp.task('sass', function() {
73 | return gulp.src(Path.CSS_SOURCES)
74 | .pipe(plumber())
75 | .pipe(sass({
76 | outputStyle: 'compressed'
77 | }).on('error', sass.logError))
78 | .pipe(autoprefixer())
79 | .pipe(gulp.dest(Path.CSS_OUT_DIR));
80 | });
81 |
82 | gulp.task('watch', function() {
83 | gulp.watch([Path.CSS_SOURCES], ['sass']);
84 | });
85 |
86 |
87 | gulp.task('build', ['update-blog-links', 'update-tweets', 'import-docs', 'update-platforms-page', 'optimize-images', 'sass']);
88 | gulp.task('default', ['update-platforms-page', 'sass', 'watch']);
89 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/placeholders.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Placeholders & fallbacks
3 | $order: 3
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 |
9 | In the spirit of perceived performance and progressive enhancement, it's best practise in AMP to provide placeholders and fallbacks wherever possible.
10 |
11 | Some elements will even reward you for doing it by relaxing restrictions – for example, if you provide a placeholder for [`<amp-iframe>`](/docs/reference/components/amp-iframe.html#iframe-with-placeholder), it can be used near the top of the page (which won't work without).
12 |
13 | ## Placeholders
14 |
15 | The element marked with the `placeholder` attribute acts
16 | as a placeholder for the parent AMP element.
17 | If specified, a `placeholder` element must be a direct child of the AMP element.
18 | An element marked as a `placeholder` will always `fill` the parent AMP element.
19 |
20 | [sourcecode:html]
21 | <amp-anim src="animated.gif" width=466 height=355 layout="responsive">
22 | <amp-img placeholder src="preview.png" layout="fill"></amp-img>
23 | </amp-anim>
24 | [/sourcecode]
25 |
26 | By default, the placeholder is immediately shown for the AMP element,
27 | even if the AMP element's resources have not been downloaded or initialized.
28 | Once ready, the AMP element typically hides its placeholder and shows the content.
29 |
30 | {% call callout('Note', type='note') %}
31 | The placeholder doesn’t have to be an AMP element;
32 | any HTML element can act as the placeholder.
33 | {% endcall %}
34 |
35 | ## Fallbacks
36 |
37 | Use the `fallback` attribute to indicate the fallback behavior
38 | for any element the browser doesn’t support.
39 | For example, use the `fallback` attribute to communicate to the user
40 | that the browser doesn’t support a particular feature:
41 |
42 | [sourcecode:html]
43 | <amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
44 | poster="myvideo-poster.jpg">
45 | <div fallback>
46 | <p>Your browser doesn’t support HTML5 video.</p>
47 | </div>
48 | </amp-video>
49 | [/sourcecode]
50 |
51 | The `fallback` attribute can be set on any HTML element, not just AMP elements.
52 | If specified, the `fallback` element must be a direct child of the AMP element.
53 |
54 | ## Hiding loading indicators
55 |
56 | Many AMP elements are whitelisted to show a "loading indicator",
57 | which is a basic animation that shows that the element has not yet fully loaded.
58 | Elements can opt out of this behavior by adding the `noloading` attribute.
59 |
```
--------------------------------------------------------------------------------
/assets/sass/_config.scss:
--------------------------------------------------------------------------------
```scss
1 | // old colors - clean up later
2 | $color-darkgrey: #797c82;
3 | $color-midblue: #0379c4;
4 |
5 | // new colors
6 | $color-ampblue: #1c79c0;
7 | $color-buildblue: #1573ca;
8 | $color-brightblue: #0389ff;
9 | $color-brightbluefaded: rgba(3, 137, 255, .05);
10 | $color-lightblue: #0dd3ff;
11 | $color-lightbluefaded: rgba(13, 211, 255, .05);
12 | $color-lightestblue: rgba(13, 210, 250, .1);
13 | $color-white: #fff;
14 | $color-black: #000;
15 | $color-black-95: #333;
16 | $color-grey-md: #959595;
17 | $color-grey-ltmd: #b3b3b3;
18 | $color-grey-lt: #ededed;
19 | $color-bluegrey: #acbac1;
20 | $color-lightgrey: #f9f9f9;
21 |
22 | // gradients
23 | $gradient-angle: 36deg;
24 | $gradient-bold: linear-gradient(to right, $color-ampblue, $color-brightblue, $color-lightblue);
25 | $gradient-med: linear-gradient(to right, $color-brightblue, $color-lightblue);
26 | $gradient-med-faded: linear-gradient(to right, $color-brightbluefaded, $color-lightbluefaded);
27 | $gradient-light: linear-gradient(to right, $color-lightblue, $color-lightblue, $color-white);
28 | $gradient-anglebold: linear-gradient($gradient-angle, $color-lightblue, $color-brightblue, $color-ampblue);
29 | $gradient-anglemed: linear-gradient($gradient-angle, $color-lightblue, $color-brightblue);
30 | $gradient-anglebuild: linear-gradient($gradient-angle, $color-buildblue, $color-brightblue);
31 | $gradient-anglelight: linear-gradient($gradient-angle, $color-lightblue 40%, $color-brightblue);
32 | // $gradient-anglelight: linear-gradient($gradient-angle, $color-ampblue, $color-brightblue, $color-lightblue);
33 |
34 | $header-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.10);
35 |
36 | //$font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
37 | $font-family: 'Roboto', sans-serif;
38 | $font-family-mono: 'Roboto Mono', Menlo, Monaco, Consolas, "Courier New", monospace;
39 | $font-size-xs: 14px;
40 |
41 | $container-size: 3000px;
42 | $container-size-mobile: 320px;
43 | $grid-margin: 22px;
44 | $grid-gutters: 20px;
45 |
46 | $mobile-breakpoint: 956px;
47 | $mobile-medium-breakpoint: 460px;
48 | $mobile-baby-breakpoint: 320px;
49 | $tablet-breakpoint: 1024px;
50 | $tablet-portrait-breakpoint: 768px;
51 | $toc-breakpoint: 1100px;
52 |
53 | $header-padding: 40px;
54 | $header-mobile-padding: 30px;
55 | $header-height: 140px;
56 |
57 | $share-button-size: 63px;
58 | $share-button-distance: 10px;
59 | $share-button-size-full: $share-button-size + $share-button-distance;
```
--------------------------------------------------------------------------------
/content/docs/guides/deploy/analytics_amp.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Configure Analytics
3 | $order: 0
4 | ---
5 |
6 | ## Decide before you start
7 |
8 | All analytics solutions are built upon knowing what data you need,
9 | and how you intend to analyze that data. Decide before you start:
10 |
11 | * Will you use third-party analytics tools to analyze user engagement,
12 | or your own in-house solution?
13 | * What user behaviors will you measure to understand user engagement?
14 |
15 | ### Send data to vendor or self?
16 |
17 | If you have your own in-house solution for measuring user engagement,
18 | the only thing you will need to integrate AMP analytics with that solution is a URL.
19 | This is where you will send the data.
20 | You can also send data to various URLs.
21 | For example, you can send page view data to one URL,
22 | and social engagement data to another URL.
23 |
24 | AMP analytics is specifically designed to measure once and report to many.
25 | If you are already working with one or more analytics vendors,
26 | check the
27 | [amp-analytics specification](/docs/reference/extended/amp-analytics.html)
28 | to see if they’ve integrated their solution with AMP.
29 | If they have, simply link to their docs from the specification
30 | and start following the instructions.
31 |
32 | If the analytics vendor hasn’t integrated with AMP,
33 | reach out to the vendor to ask for their support.
34 | We also encourage you to [create an issue in the AMP project](https://github.com/ampproject/amphtml/issues/new)
35 | requesting that the vendor be added.
36 | See also
37 | [Integrating your analytics tools in AMP HTML](https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/integrating-analytics.md).
38 |
39 | ### What data do you need?
40 |
41 | What data about your users will you capture in order to measure engagement?
42 | You must identify this data before you can configure it.
43 |
44 | Key data points to consider:
45 |
46 | * Will you track only page views, or additional user engagement patterns
47 | (see also [amp-pixel or amp-analytics](/docs/guides/analytics/analytics_basics.html#use-amp-pixel-or-amp-analytics))?
48 | * What kinds of data will you capture about your users, your content,
49 | the device or browser (see also [Variable substitution](/docs/guides/analytics/analytics_basics.html#variable-substitution))?
50 | * How will you identify your users (see also [User identification](/docs/guides/analytics/analytics_basics.html#user-identification))?
51 |
```
--------------------------------------------------------------------------------
/assets/sass/_footer.scss:
--------------------------------------------------------------------------------
```scss
1 | footer {
2 | background-color: $color-white;
3 | padding: 30px 0;
4 | position: relative;
5 |
6 | a {
7 | line-height: 0;
8 | }
9 |
10 | .footer-image {
11 | margin: 0 10px;
12 |
13 | &.twitter {
14 | @include sprite(twitter);
15 | }
16 |
17 | &.wordpress {
18 | @include sprite(wordpress);
19 | }
20 | }
21 |
22 | .footer-icons {
23 | align-items: center;
24 | display: flex;
25 | flex-direction: row;
26 | justify-content: center;
27 | }
28 |
29 | .footer-privacy {
30 | color: #ccc;
31 | font-size: 12px;
32 | font-weight: 300;
33 | left: 20px;
34 | position: absolute;
35 | text-transform: none;
36 | }
37 | }
38 |
39 | .footer-cta {
40 | background: $gradient-bold;
41 | display: block;
42 | padding: 20px 30px;
43 | position: relative;
44 | z-index: 1;
45 |
46 | .cta-line {
47 | position: absolute;
48 |
49 | &.left {
50 | height: 140px;
51 | left: 0;
52 | top: -50px;
53 | width: 156px;
54 | }
55 |
56 | &.right {
57 | bottom: -30px;
58 | height: 107.5px;
59 | right: -50px;
60 | width: 175px;
61 | }
62 |
63 | &.right-half {
64 | bottom: 0;
65 | height: 77.5px;
66 | right: -50px;
67 | width: 175px;
68 | overflow: hidden;
69 | }
70 | }
71 |
72 | .inner {
73 | position: relative;
74 | margin: 0 auto;
75 | max-width: 1200px;
76 | width: 80%;
77 |
78 | h2 {
79 | text-transform: none;
80 | }
81 |
82 | h2, .link-text {
83 | color: $color-white;
84 | display: inline-block;
85 | }
86 |
87 | .link-text {
88 | color: white;
89 | position: absolute;
90 | right: 0;
91 | top: 50%;
92 | transform: translateY(-50%);
93 |
94 | &::after {
95 | background: url(/static/img/arrow.svg) center/cover no-repeat;
96 | content: '';
97 | display: inline-block;
98 | height: 12px;
99 | margin-left: 10px;
100 | width: 12px;
101 | }
102 | }
103 | }
104 | }
105 |
106 | .rtl .footer-cta {
107 | .inner .link-text {
108 | left: 0;
109 | right: auto;
110 |
111 | &::after {
112 | margin: 0 10px 0 0;
113 | transform: rotate(180deg);
114 | }
115 | }
116 | }
117 |
118 | @include max-screen(1000px) {
119 | .footer-cta .inner {
120 | width: 90%;
121 | }
122 | }
123 |
124 | @include max-screen($mobile-breakpoint) {
125 | .footer-cta {
126 | overflow: hidden;
127 |
128 | .cta-line.right,
129 | .cta-line.right-half {
130 | bottom: 10px;
131 | right: -100px;
132 | height: 107.5px;
133 | }
134 |
135 | .inner {
136 | text-align: center;
137 | width: 100%;
138 |
139 | h1, .link-text {
140 | display: block;
141 | }
142 |
143 | .link-text {
144 | margin-top: 20px;
145 | position: static;
146 | }
147 | }
148 | }
149 | }
150 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Monetisasi Penerbit
3 |
4 | faq:
5 | - title@: Bagaimana cara kerja iklan di Accelerated Mobile Pages?
6 | answer@: |
7 | Tujuan Proyek Accelerated Mobile Pages adalah memastikan monetisasi iklan yang efektif di web seluler ketika merangkul pendekatan yang berfokus pada pengguna. Dengan konteks tersebut, tujuannya adalah untuk memberikan dukungan bagi rentang format, jaringan, dan teknologi iklan yang komprehensif di Accelerated Mobile Pages. Oleh karena itu, mereka yang terlibat dalam proyek ini juga akan terlibat dalam penyusunan Praktik Iklan Berkelanjutan untuk memastikan bahwa iklan di file AMP cepat, aman, menarik, dan efektif bagi pengguna.
8 | - title@: Apakah penerbit dapat menjual inventaris iklan mereka sendiri?
9 | answer@: |
10 | Ya, sama seperti situs web mereka yang sudah ada, penerbit mengontrol inventaris iklan dan cara mereka menjualnya.
11 | - title@: Bagaimana langganan dan paywall berfungsi dengan Accelerated Mobile Pages?
12 | answer@: |
13 | Mendukung langganan dan paywall adalah tujuan inti dari proyek Accelerated Mobile Pages. Saat ini AMP mendukung framework dengan akses fleksibel yang membuat penerbit dapat mengontrol pengalaman tampilan dokumen pelanggan, pengguna yang diukur, dan pengguna anonim.
14 | - title@: Bagaimana penanganan analisis di format AMP ini?
15 | answer@: |
16 | Tujuan desain inti proyek ini adalah untuk memastikan penerbit dapat memperoleh wawasan analisis yang kuat. Sementara dukungan analisis di rilis demo sangat terbatas, spek diharapkan memiliki dukungan untuk koleksi informasi analisis, dan berintegrasi dengan sistem pihak ke-3 tanpa mengorbankan kecepatan atau ukuran file AMP. Beberapa penyedia analisis [berpartisipasi](https://www.ampproject.org/who/#analytics) dalam proyek ini.
17 | - title@: Apakah penerbit menerima kredit untuk lalu lintas dari perspektif pengukuran?
18 | answer@: |
19 | Ya, file AMP sama dengan situs Anda lainnya – ruang ini adalah kanvas penerbit.
20 | - title@: Bagaimana cara menjadi bagian dari proyek ini?
21 | answer@: |
22 | Kami menyambut individu dan perusahaan yang ingin terlibat untuk mengisi [Github](https://github.com/ampproject/amphtml/issues/new), jadi, kami dapat menambahkan Anda ke daftar distribusi dan terus mengabari Anda jika ada informasi baru.
23 | ---
24 |
```
--------------------------------------------------------------------------------
/content/support/faqs/publisher-monetization.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Publisher Monetization
3 | $order: 2
4 | $parent: /content/support/faqs.md
5 | class: faqs
6 |
7 | cta:
8 | title@: Next FAQ
9 | link_text@: Supported Platforms and Browsers
10 | link_url: /content/support/faqs/supported-platforms.md
11 |
12 | faq:
13 | - title@: How does advertising work on Accelerated Mobile Pages?
14 | answer@: |
15 | A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the mobile web while embracing a user-centric approach. There is currently support for a comprehensive range of ad formats, ad networks and technologies in Accelerated Mobile Pages. As part of that, those involved with the project are also engaged in crafting Sustainable Ad Practices to ensure that ads in AMP files are fast, safe, compelling and effective for users.
16 | - title@: Are publishers able to sell their own ad inventory?
17 | answer@: |
18 | Yes, as with their existing websites, publishers control their ad inventory and how they sell it.
19 | - title@: How do subscriptions and paywalls work with Accelerated Mobile Pages?
20 | answer@: |
21 | It is a core objective of the Accelerated Mobile Pages project to support subscriptions and paywalls. AMP currently supports a flexible access framework where publishers can control the document viewing experience for subscribers, metered users and anonymous users.
22 | - title@: How are analytics being handled in this AMP format?
23 | answer@: |
24 | Ensuring publishers are able to get robust analytics insight is a core design goal for the project. AMP currently supports the collection of analytics information using features like amp-analytics, which can integrate with 3rd party systems without compromising the AMP file speed or size. Several analytics providers are [participating](https://www.ampproject.org/who/#analytics) in the project.
25 | - title@: Do publishers receive credit for the traffic from a measurement perspective?
26 | answer@: |
27 | Yes, an AMP file is the same as the rest of your site – this space is the publisher’s canvas.
28 | - title@: How do I become a part of this project?
29 | answer@: |
30 | We welcome interested individuals and companies who want to get involved to get in touch via [GitHub](https://github.com/ampproject/amphtml/issues/new), so that we can add you to a distribution list and keep you posted on any new information.
31 | ---
32 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/ads_on_amp/ads_getting_started.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title : "Getting Started"
3 | $order : 0
4 | ---
5 |
6 | ## Three Easy Steps to Serving Ads on Your AMP Page
7 |
8 | Not sure how to get started? In this short guide, you’ll learn how to quickly and easily serve ads on your AMP page.
9 |
10 | ### 1. Add the `<amp-ads>` component to your AMP page:
11 |
12 | [sourcecode:html]
13 | <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
14 | [/sourcecode]
15 |
16 | By adding the `amp-ads` component, you've added the ads framework to your AMP page.
17 |
18 | ### 2. Specify the ad server or ad network in the `type` attribute:
19 |
20 | [sourcecode:html]
21 | <amp-ad
22 | type="a9">
23 | </amp-ad>
24 | [/sourcecode]
25 |
26 | [Here](https://www.ampproject.org/docs/reference/components/amp-ad#supported-ad-networks) is a list of supported ad networks.
27 |
28 | ### 3. Specify your ad unit’s height and width:
29 |
30 | [sourcecode:html]
31 | <amp-ad width="300"
32 | height="250"
33 | type="a9"
34 | data-aax_size="300x250"
35 | data-aax_pubname="test123"
36 | data-aax_src="302">
37 | </amp-ad>
38 | [/sourcecode]
39 |
40 | By defining your ad unit's height and weight, you've specified the ad size on your AMP page.
41 |
42 | {% call callout('Note', type='note') %}
43 | The additional data attributes are telling the ad network to pull the right size and pub from their servers. Each ad network has different attributes to send. [Learn more](https://www.ampproject.org/docs/reference/components/amp-ad#supported-ad-networks).
44 | {% endcall %}
45 |
46 | ### 4. [OPTIONAL] Specify a placeholder:
47 |
48 | [sourcecode:html]
49 | <amp-ad width="300"
50 | height="200"
51 | type="doubleclick"
52 | data-slot="/4119129/doesnt-exist">
53 | <amp-img placeholder src="placeholder-image.jpg"></amp-img>
54 | </amp-ad>
55 | [/sourcecode]
56 |
57 | AMP supports an optional placeholder attribute. Depending on the ad network, you can choose to show a placeholder until the ad is available for viewing. This provides a better user experience by preventing a blank space from showing:
58 |
59 | ### 5. [OPTIONAL] Specify a fallback attribute:
60 |
61 | [sourcecode:html]
62 | <amp-ad width="300"
63 | height="200"
64 | type="doubleclick"
65 | data-slot="/4119129/doesnt-exist">
66 | <amp-img fallback src="fallback-image.jpg"></amp-img>
67 | </amp-ad>
68 | [/sourcecode]
69 |
70 | AMP supports an optional fallback attribute. Depending on the ad network, you can choose to show this fallback element if no ad is available to serve.
71 |
72 | ### 6. Congratulations! You are now serving ads on your AMP page!
73 |
```
--------------------------------------------------------------------------------
/content/docs/reference/experimental.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Experimental features
3 | $order: 5
4 | ---
5 |
6 | [AMP experimental components](https://github.com/ampproject/amphtml/tree/master/tools/experiments)
7 | are released features not yet ready for wide use, so they are protected by an experimental status.
8 |
9 | Developers and users can opt-in to using these features before they are fully released.
10 | But they should be used with caution, as they may contain bugs or have unexpected side effects.
11 |
12 | ## Opt into the AMP Dev Channel
13 |
14 | The AMP Dev Channel is a way to opt a browser into using a newer version of the AMP JS libraries.
15 |
16 | The AMP Dev Channel release **may be less stable** and it may contain features not available to all users. Opt into this option if you'd like to help test new versions of AMP, report bugs or build documents that require a new feature that is not yet available to everyone.
17 |
18 | Opting into Dev Channel is great to:
19 |
20 | - test and play with new features not yet available to all users.
21 | - use in Q&A to ensure that your site is compatible with the next version of AMP.
22 |
23 | If you find an issue that appears to only occur in the Dev Channel version of AMP, [file an issue](https://github.com/ampproject/amphtml/issues/new) with a description of the problem. Always include a URL to a page that reproduces the issue.
24 |
25 | To opt your browser into the AMP Dev Channel, go to [the AMP experiments page](https://cdn.ampproject.org/experiments.html) and activate the "AMP Dev Channel" experiment. To get notified about important/breaking changes about AMP, subscribe to the [amphtml-announce](https://groups.google.com/forum/#!forum/amphtml-announce) mailing list.
26 |
27 | ## Enable an experimental component
28 |
29 | For content served from [https://cdn.ampproject.org](https://cdn.ampproject.org),
30 | go to the [AMP experiments page](https://cdn.ampproject.org/experiments.html)
31 | and enable (or disable) any experimental component by toggling them on (or off). Opting in will set a cookie on your browser that will enable the experiment on all AMP pages served through the Google AMP Cache.
32 |
33 | For content served from any other domain, experiments can be toggled in the devtools console when development mode is enabled using:
34 |
35 | [sourcecode:js]
36 | AMP.toggleExperiment('experiment')
37 | [/sourcecode]
38 |
39 | Any AMP file that includes experimental features will fail
40 | [AMP validation](/docs/guides/validate.html).
41 | Remove these experimental components for production-ready AMP documents.
42 |
```
--------------------------------------------------------------------------------
/views/case-study.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | <div class="post-detail-block">
9 | {{ navmarkup|safe }}
10 | <div class="container md">
11 | <div class="content">
12 | <article class="post">
13 | <div class="post-header">
14 | <div class="post-meta">
15 | <span class="post-date">{{doc.date}}</span>
16 | </div>
17 | {% if doc.logo %}
18 | <amp-img layout="responsive"
19 | src="/static/img/{{doc.logo.src}}"
20 | width="{{doc.logo.width}}"
21 | height="{{doc.logo.height}}"
22 | class="post-logo"></amp-img>
23 | {% endif %}
24 | <h1 class="post-title">{{ doc.headline or doc.title }}</h1>
25 | </div>
26 |
27 | {% if doc.results %}
28 | <div class="post-results {% if doc.results|length > 3%} post-results--small {% endif %}">
29 | {% for result in doc.results %}
30 | <div class="result">
31 | <p class="result-stat">{{result.stat}}</p>
32 | <p class="result-description">{{result.description}}</p>
33 | </div>
34 | {% endfor %}
35 | </div>
36 | {% endif %}
37 |
38 | <div class="post-sheet">
39 | {% include "/views/partials/share.html" %}
40 | <div class="post-content">
41 | {{doc.html|render|safe}}
42 |
43 | {% if doc.download %}
44 | <p class="post-download">
45 | <a class="underlined cta" href="/static/img/{{doc.download}}">{{_('Download PDF Case study')}}</a>
46 | </p>
47 | {% endif %}
48 | </div>
49 | </div>
50 | </article>
51 |
52 | {% if doc.prev() %}
53 | <div class="post-footer">
54 | <h2>{{_('Previous Posts')}}</h2>
55 | <div class="card-container grid case">
56 | {% with doc = g.doc(doc.prev().pod_path, locale=doc.locale), isCase = true %}
57 | {% include "/views/partials/grid-card.html" %}
58 | {% endwith %}
59 |
60 | {% if doc.prev().prev() %}
61 | {% with doc = g.doc(doc.prev().prev().pod_path, locale=doc.locale), isCase = true %}
62 | {% include "/views/partials/grid-card.html" %}
63 | {% endwith %}
64 | {% endif %}
65 | </div>
66 | </div>
67 | {% endif %}
68 | </div>
69 | </div>
70 | </div>
71 |
72 | {% include "/views/partials/footer.html" %}
73 |
74 | {% endblock %}
```
--------------------------------------------------------------------------------
/assets/sass/pages/_post-detail.scss:
--------------------------------------------------------------------------------
```scss
1 | .post-detail {
2 | @extend .bg-triangle-bottom;
3 |
4 | .post-sheet {
5 | position: relative;
6 | background: $color-white;
7 | padding: 40px 11.9% 100px 11.9%;
8 | }
9 |
10 | .post-meta {
11 | text-align: center;
12 |
13 | .post-type,
14 | .post-date {
15 | @extend %text-label;
16 | display: inline-block;
17 | }
18 |
19 | .post-type {
20 | color: $color-ampblue;
21 |
22 | &::after {
23 | content: '|';
24 | margin: 0 .8em 0 1.15em;
25 | }
26 | }
27 |
28 | .post-date {
29 | color: $color-grey-md;
30 | }
31 | }
32 |
33 | .post-title {
34 | margin: 25px 0 65px 0;
35 | text-align: center;
36 | }
37 |
38 | .author-meta {
39 | margin-bottom: 45px;
40 | text-align: center;
41 |
42 | amp-img {
43 | border-radius: 50%;
44 | margin: 0 0 12px 0;
45 | }
46 |
47 | .author-name {
48 | color: $color-ampblue;
49 | }
50 |
51 | .author-role {
52 | @extend %text-label;
53 | color: $color-grey-ltmd;
54 | margin-top: 8px;
55 | }
56 | }
57 |
58 | .post-content {
59 | p,
60 | li {
61 | @extend %text-small;
62 | letter-spacing: 0;
63 | }
64 |
65 | a {
66 | @extend %link-inherit;
67 | color: $color-ampblue;
68 | }
69 |
70 | strong {
71 | font-weight: 400;
72 | }
73 |
74 | // code {
75 | // color: $color-black;
76 | // }
77 |
78 | code,
79 | code a {
80 | // border: 0;
81 | font-size: 11px;
82 | // font-weight: 400;
83 | // padding: 0;
84 | }
85 |
86 | p {
87 | em,
88 | em a {
89 | @extend %text-body;
90 | font-style: normal;
91 | }
92 | }
93 |
94 | amp-img {
95 | margin: 50px auto;
96 | }
97 | }
98 |
99 | &:not(.roadmap) {
100 | .post-content {
101 | ul,
102 | ol {
103 | padding-left: .7em;
104 | }
105 |
106 | li {
107 | list-style: none;
108 | position: relative;
109 |
110 | &::before {
111 | color: $color-ampblue;
112 | content: '\2022 ';
113 | left: -.8em;
114 | position: absolute;
115 | }
116 | }
117 | }
118 | }
119 |
120 | .share-module {
121 | right: -115px;
122 | top: 27px;
123 | }
124 |
125 | .post-footer {
126 | padding: 0 11.9%;
127 | position: relative;
128 | z-index: 1;
129 |
130 | h2 {
131 | text-align: center;
132 | }
133 |
134 | a.post-title,
135 | .post-meta {
136 | text-align: left;
137 | text-align: start;
138 | }
139 | }
140 |
141 | &.post-blog img {
142 | height: auto;
143 | }
144 |
145 | @include max-screen($mobile-breakpoint) {
146 | .post-sheet {
147 | padding: 50px 6% 40px 6%;
148 | }
149 |
150 | .post-meta,
151 | .post-title {
152 | text-align: left;
153 | text-align: start;
154 | }
155 |
156 | .post-content {
157 | code,
158 | code a {
159 | font-size: 11px;
160 | }
161 | }
162 | }
163 |
164 | @include max-screen(1121px) {
165 | .share-module {
166 | right: -35px;
167 | top: -32px;
168 | }
169 | }
170 | }
171 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Zyski dla wydawców
3 |
4 | faq:
5 | - title@: Jak działają reklamy w standardzie Accelerated Mobile Pages?
6 | answer@: |
7 | Celem projektu Accelerated Mobile Pages jest zapewnienie zyskowności reklam internetowych przy zachowaniu podejścia skoncentrowanego na użytkowniku. W takim kontekście chcemy zapewnić obsługę szerokiej gamy formatów reklamowych, sieci reklamowych i technologii w ramach standardu Accelerated Mobile Pages. Częścią projektu jest również zaangażowanie uczestników w przygotowanie zrównoważonych najlepszych praktyk reklamowych, które zapewnią szybkość, bezpieczeństwo, atrakcyjność i efektywność reklam AMP.
8 | - title@: Czy wydawcy mogą sprzedawać własne zasoby reklamowe?
9 | answer@: |
10 | Tak, ponieważ podobnie jak w przypadku należących do nich witryn to dostawcy kontrolują posiadane zasoby reklamowe oraz sprawy związane z ich sprzedażą.
11 | - title@: Jak w przypadku standardu Accelerated Mobile Pages działają subskrypcje oraz treści płatne?
12 | answer@: |
13 | Obsługa subskrypcji i treści płatnych to główny cel projektu Accelerated Mobile Pages. Technologia AMP obecnie obsługuje elastyczną strukturę, za pomocą której wydawcy mogą kontrolować sposób wyświetlania dokumentów przez subskrybentów, użytkowników zarejestrowanych oraz użytkowników anonimowych.
14 | - title@: Jak wygląda analityka w przypadku formatu AMP?
15 | answer@: |
16 | Podstawowym celem projektowym całego przedsięwzięcia jest zapewnienie wydawcom szczegółowych analiz statystycznych. Choć wersja demonstracyjna obsługuje funkcje analityczne w bardzo ograniczony sposób, oczekujemy, że docelowo technologia będzie dostarczać znacznie więcej danych analitycznych. Możliwa również będzie integracja z systemami innych firm bez strat szybkości lub rozmiaru plików AMP. W projekcie [uczestniczy](https://www.ampproject.org/who/#analytics) kilku dostawców rozwiązań analitycznych.
17 | - title@: Czy wydawcy mogą być pewni, że narzędzia analityczne zarejestrują cały ruch internetowy?
18 | answer@: |
19 | Tak, plik AMP jest taki sam, jak reszta witryny – ta przestrzeń należy do wydawcy.
20 | - title@: Jak mogę się stać częścią projektu?
21 | answer@: |
22 | Osoby oraz firmy zainteresowane wzięciem udziału w projekcie prosimy o wypełnienie wniosku w [GitHubie](https://github.com/ampproject/amphtml/issues/new). Wszyscy chętni zostaną dodani do listy dystrybucyjnej i będą otrzymywać najnowsze informacje o naszej inicjatywie.
23 | ---
24 |
```
--------------------------------------------------------------------------------
/content/docs/contribute/contribute.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: How to Contribute
3 | $order: 0
4 | $path: /contribute/
5 | $localization:
6 | path: /{locale}/{base}/
7 | ---
8 |
9 | The AMP Project would not be possible without help from all members of the community
10 | whether you are a developer, content creator or provider of services relevant to AMP.
11 | There are many ways for you to contribute.
12 |
13 | ### Reporting issues with AMP
14 | If you have feedback or are experiencing technical issues with AMP, please file it using the [issue tracker](https://github.com/ampproject/amphtml/issues). If you're having issues with [ampproject.org](https://ampproject.org), please use the [docs issue tracker](https://github.com/ampproject/docs/issues) instead.
15 |
16 | ### Providing technical contributions to AMP
17 |
18 | The AMP Project strongly encourages technical contributions!
19 |
20 | We hope you'll become an ongoing participant in our open source community, but we also welcome one-off contributions for the issues you're particularly passionate about.
21 |
22 | #### Helping with code
23 |
24 | To get started with contributing code to the AMP Project read through [the CONTRIBUTING file](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md), which includes details of the process by which a feature or bug fix goes from concept to submission and how you can participate in technical designs and discussions. If you're new to open source we have some [tips for getting started](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#contributing-code).
25 |
26 | #### Helping with documentation
27 |
28 | Documentation is important for the entire AMP community, and we would appreciate your help in making our documentation better! We've got all sorts of documentation--examples for users of AMP, docs to help AMP Project contributors, etc.
29 |
30 | [ampproject.org](https://ampproject.org) is where most people get familiar with AMP. You can contribute to documentation in the [ampproject docs GitHub project](https://github.com/ampproject/docs). (You can even make [the page you are reading](https://github.com/ampproject/docs/blob/master/content/docs/contribute/contribute.md) better!)
31 |
32 | [ampbyexample.com](https://ampbyexample.com) provides examples of how to use AMP. You can improve it at the [amp-by-example GitHub project](https://github.com/ampproject/amp-by-example/).
33 |
34 | You can also help make things better for other contributors to the AMP Project by improving our documentation in the [amphtml GitHub project](https://github.com/ampproject/amphtml).
35 |
36 |
37 |
38 |
```
--------------------------------------------------------------------------------
/content/support/faqs/publisher-monetization@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Monetização de editores
3 |
4 | faq:
5 | - title@: Como funciona a publicidade nas Accelerated Mobile Pages?
6 | answer@: |
7 | Um dos objetivos do projeto das Accelerated Mobile Pages é garantir uma monetização de anúncios eficaz com a Web para dispositivos móveis usando uma abordagem centrada no usuário. Nesse contexto, o objetivo é oferecer suporte a uma ampla variedade de formatos de anúncio, redes de anúncios e tecnologias nas Accelerated Mobile Pages. Como parte disso, aqueles envolvidos com o projeto também estão engajados na elaboração de práticas sustentáveis de anúncios a fim de garantir que os anúncios nos arquivos AMP sejam rápidos, seguros, atrativos e eficazes para os usuários.
8 | - title@: Os editores podem vender o próprio inventário de anúncios?
9 | answer@: |
10 | Sim. Como nos sites atuais, os editores podem controlar o inventário de anúncios e a forma de vendê-lo.
11 | - title@: Como as assinaturas e paywalls funcionam nas Accelerated Mobile Pages?
12 | answer@: |
13 | Oferecer suporte a assinaturas e paywalls é um dos objetivos básicos do projeto das Accelerated Mobile Pages. Atualmente, as AMP são compatíveis com uma estrutura de acesso flexível, na qual os editores podem controlar a experiência de visualização de documentos para assinantes, usuários monitorados e usuários anônimos.
14 | - title@: Como as análises estão sendo tratadas no formato AMP?
15 | answer@: |
16 | Garantir que os editores possam ter insights a partir de análises confiáveis é um objetivo de desenvolvimento fundamental para o projeto. Embora o suporte para análises seja muito limitado na versão demonstrativa, as especificações deverão ter suporte para a coleta de informações de análise, além da integração com sistemas de terceiros sem comprometer a velocidade ou o tamanho do arquivo das AMP. Vários provedores de análise estão [participando](https://www.ampproject.org/who/#analytics) do projeto.
17 | - title@: Os editores recebem crédito pelo tráfego a partir de uma perspectiva de medição?
18 | answer@: |
19 | Sim. Um arquivo das AMP é o mesmo que o resto do site, este espaço é a tela do editor.
20 | - title@: Como posso fazer parte do projeto?
21 | answer@: |
22 | As pessoas e as empresas que queiram participar podem preencher o formulário no [Github](https://github.com/ampproject/amphtml/issues/new). Dessa forma, podemos adicionar os interessados à lista de distribuição e mantê-los informados sobre as novidades.
23 | ---
24 |
```
