This is page 2 of 24. Use http://codebase.md/cloudflare/docs/imgs/claudemcp.gif?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .editorconfig
├── .eslintrc.json
├── .firebaserc
├── .github
│ └── workflows
│ └── semgrep.yml
├── .gitignore
├── .travis.yml
├── assets
│ ├── extra
│ │ └── brand_assets.zip
│ ├── img
│ │ ├── about
│ │ │ ├── case-studies
│ │ │ │ └── bg_lines.png
│ │ │ ├── design-principles
│ │ │ │ ├── bg1.svg
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── design_icon_break.svg
│ │ │ │ ├── design_icon_fast.svg
│ │ │ │ ├── design_icon_future.svg
│ │ │ │ ├── design_icon_layers.svg
│ │ │ │ ├── design_icon_priorities.svg
│ │ │ │ ├── design_icon_ux.svg
│ │ │ │ ├── design_icon_whitelist.svg
│ │ │ │ ├── lines1.svg
│ │ │ │ └── lines2.svg
│ │ │ ├── how-amp-works
│ │ │ │ ├── line_behind.svg
│ │ │ │ └── lines_front.svg
│ │ │ ├── overview
│ │ │ │ ├── bg2.svg
│ │ │ │ ├── herobg.svg
│ │ │ │ ├── herolines1.svg
│ │ │ │ ├── herolines2.svg
│ │ │ │ ├── line4.svg
│ │ │ │ ├── lines3.svg
│ │ │ │ ├── what_phone.png
│ │ │ │ ├── what_phone@1_5x.png
│ │ │ │ └── [email protected]
│ │ │ └── who-use-amp
│ │ │ ├── adtech
│ │ │ │ ├── adtech_icon_customize.svg
│ │ │ │ ├── adtech_icon_intro.svg
│ │ │ │ ├── adtech_icon_reach.svg
│ │ │ │ ├── adtech_icon_revenue.svg
│ │ │ │ ├── indexexchange_logo.png
│ │ │ │ ├── lines.svg
│ │ │ │ ├── sharethrough_logo.png
│ │ │ │ ├── teads_logo.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── advertisers
│ │ │ │ ├── advertiser_phone_wired.png
│ │ │ │ ├── advertiser_phone_wired@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── advertisers_bg.svg
│ │ │ │ ├── advertisers_icon_audience.svg
│ │ │ │ ├── advertisers_icon_everywhere.svg
│ │ │ │ ├── advertisers_icon_intro.svg
│ │ │ │ ├── advertisers_icon_ROI.svg
│ │ │ │ └── advertisers_lines.svg
│ │ │ ├── amp-ads
│ │ │ │ ├── ads_icon.svg
│ │ │ │ ├── cloudflare_logo.png
│ │ │ │ ├── doubleclick_logo.png
│ │ │ │ ├── google_logo.png
│ │ │ │ ├── lines_bottom1.svg
│ │ │ │ ├── lines_bottom2.svg
│ │ │ │ ├── lines.svg
│ │ │ │ ├── roi_icon.svg
│ │ │ │ ├── speed_icon.svg
│ │ │ │ └── triplelift_logo.png
│ │ │ ├── card_developers.png
│ │ │ ├── card_developers.svg
│ │ │ ├── card_smb.png
│ │ │ ├── card_smb.svg
│ │ │ ├── hero_triangle.png
│ │ │ ├── publishers
│ │ │ │ ├── globo_logo.svg
│ │ │ │ ├── nyt_logo.svg
│ │ │ │ ├── publisher_icon_business.svg
│ │ │ │ ├── publisher_icon_fast.svg
│ │ │ │ ├── publisher_icon_intro.svg
│ │ │ │ ├── publisher_icon_simple.svg
│ │ │ │ ├── publisher_phone_cnn.png
│ │ │ │ ├── publisher_phone_cnn@1_5x.png
│ │ │ │ ├── [email protected]
│ │ │ │ ├── wapo_logo.png
│ │ │ │ └── wired_logo.png
│ │ │ ├── who_icon_adtech.svg
│ │ │ ├── who_icon_advertisers.svg
│ │ │ ├── who_icon_publishers.svg
│ │ │ ├── who_lines1.svg
│ │ │ ├── who_lines2.svg
│ │ │ ├── who_phones_hero.png
│ │ │ ├── who_phones_hero@1_5x.png
│ │ │ └── [email protected]
│ │ ├── amp_favicon.png
│ │ ├── amp-conf
│ │ │ └── speakers
│ │ │ ├── alex.jpg
│ │ │ ├── ali.jpg
│ │ │ ├── ardan.jpg
│ │ │ ├── beck.jpg
│ │ │ ├── bez.jpg
│ │ │ ├── chen.jpg
│ │ │ ├── dane.jpg
│ │ │ ├── eric.jpg
│ │ │ ├── gina.jpg
│ │ │ ├── honey.jpg
│ │ │ ├── jeremy.jpg
│ │ │ ├── john.jpg
│ │ │ ├── le.jpg
│ │ │ ├── madison.jpg
│ │ │ ├── malte.jpg
│ │ │ ├── malteandrudy.jpg
│ │ │ ├── mariko.jpg
│ │ │ ├── matthew.jpg
│ │ │ ├── mike.jpg
│ │ │ ├── natalia.jpg
│ │ │ ├── nicole.jpg
│ │ │ ├── paul.jpg
│ │ │ ├── ranna.jpg
│ │ │ ├── richard.jpg
│ │ │ ├── rudy.jpg
│ │ │ ├── sam.jpg
│ │ │ ├── sarah.jpg
│ │ │ ├── sebastian.jpg
│ │ │ ├── senthil.jpg
│ │ │ ├── sriram.jpg
│ │ │ ├── vadim.jpg
│ │ │ ├── vamsee.jpg
│ │ │ ├── will.jpg
│ │ │ └── yamini.jpg
│ │ ├── arrow-blue.svg
│ │ ├── arrow.svg
│ │ ├── background.jpg
│ │ ├── blog-icon.svg
│ │ ├── brand-guidelines.pdf
│ │ ├── case-studies
│ │ │ ├── gizmodo_logo.png
│ │ │ ├── gizmodo_phone1.png
│ │ │ ├── gizmodo_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_phone2.png
│ │ │ ├── gizmodo_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── gizmodo_thumb.jpg
│ │ │ ├── gizmodo.pdf
│ │ │ ├── hearst_framed.png
│ │ │ ├── hearst_framed2.png
│ │ │ ├── hearst_logo.png
│ │ │ ├── hearst_thumb.jpg
│ │ │ ├── hearst.pdf
│ │ │ ├── milestone_home_framed.png
│ │ │ ├── milestone_logo.png
│ │ │ ├── milestone_search_framed.png
│ │ │ ├── milestone_thumb.jpg
│ │ │ ├── milestone.pdf
│ │ │ ├── plista_graphic.png
│ │ │ ├── plista_logo.png
│ │ │ ├── plista_thumb.jpg
│ │ │ ├── plista.pdf
│ │ │ ├── relay_media_logo.png
│ │ │ ├── relay_media_thumb.jpg
│ │ │ ├── relay_media.pdf
│ │ │ ├── relaymedia_phone1.png
│ │ │ ├── relaymedia_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── relaymedia_phone2.png
│ │ │ ├── relaymedia_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_logo.png
│ │ │ ├── slate_phone1.png
│ │ │ ├── slate_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_phone2.png
│ │ │ ├── slate_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── slate_thumb.jpg
│ │ │ ├── slate.pdf
│ │ │ ├── teads_logo.png
│ │ │ ├── teads_logo2.png
│ │ │ ├── teads_phone.png
│ │ │ ├── teads_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── teads_thumb.jpg
│ │ │ ├── teads.pdf
│ │ │ ├── terra_framed1.png
│ │ │ ├── terra_framed2.png
│ │ │ ├── terra_logo.png
│ │ │ ├── terra_thumb.jpg
│ │ │ ├── terra.pdf
│ │ │ ├── wapo_logo.png
│ │ │ ├── wapo_thumb.png
│ │ │ ├── wapo.pdf
│ │ │ ├── washingtonpost_phone.png
│ │ │ ├── washingtonpost_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_logo.png
│ │ │ ├── wired_phone1.png
│ │ │ ├── wired_phone1@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_phone2.png
│ │ │ ├── wired_phone2@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── wired_thumb.jpg
│ │ │ └── wired.pdf
│ │ ├── cheveron-down.svg
│ │ ├── close.svg
│ │ ├── comment.png
│ │ ├── docs
│ │ │ ├── icon_important.svg
│ │ │ ├── icon_note.svg
│ │ │ ├── icon_read.svg
│ │ │ ├── icon_tip.svg
│ │ │ ├── responsive_amp_img.png
│ │ │ ├── too_much_css.png
│ │ │ ├── validator_console_imgerror.png
│ │ │ ├── validator_errors.png
│ │ │ ├── validator_extension_imgerror.png
│ │ │ ├── validator_icon_invalid.png
│ │ │ ├── validator_icon_link.png
│ │ │ ├── validator_icon_valid.png
│ │ │ ├── validator_mandatory_error.png
│ │ │ ├── validator_web_ui.png
│ │ │ └── validator_webui_imgerror.png
│ │ ├── enforce-comment.png
│ │ ├── footer
│ │ │ ├── line-left.png
│ │ │ ├── line-right-2.png
│ │ │ └── line-right.png
│ │ ├── github.png
│ │ ├── hamburger.svg
│ │ ├── home
│ │ │ ├── bg_experience.png
│ │ │ ├── home_hero_phone.png
│ │ │ ├── home_hero_phone@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── home_icon_flexibility.svg
│ │ │ ├── home_icon_performance.svg
│ │ │ ├── home_phone_ebay.png
│ │ │ ├── home_phone_ebay@1_5x.png
│ │ │ ├── [email protected]
│ │ │ ├── lines2.svg
│ │ │ ├── lines3.svg
│ │ │ ├── shapebg.svg
│ │ │ ├── teads_logo.svg
│ │ │ ├── wapo_logo.png
│ │ │ └── wired_logo.png
│ │ ├── ic_open_in_new_black.svg
│ │ ├── ic_open_in_new_white.svg
│ │ ├── icons
│ │ │ ├── 120.png
│ │ │ ├── 144.png
│ │ │ ├── 152.png
│ │ │ ├── 168.png
│ │ │ ├── 180.png
│ │ │ ├── 192.png
│ │ │ ├── 48.png
│ │ │ ├── 512.png
│ │ │ ├── 72.png
│ │ │ ├── 96.png
│ │ │ └── any.svg
│ │ ├── latest
│ │ │ ├── events
│ │ │ │ ├── event_empty.png
│ │ │ │ ├── event_empty.svg
│ │ │ │ └── event_hero.svg
│ │ │ ├── icon_audience.png
│ │ │ ├── icon_audience.svg
│ │ │ ├── icon_calendar.png
│ │ │ ├── icon_calendar.svg
│ │ │ ├── icon_location.png
│ │ │ ├── icon_location.svg
│ │ │ ├── icon_retweet.png
│ │ │ ├── icon_retweet.svg
│ │ │ ├── icon_twitter.svg
│ │ │ ├── latest_hero.jpg
│ │ │ ├── line_hero_back.svg
│ │ │ └── line_hero_front.svg
│ │ ├── liveblog-pagination.png
│ │ ├── login-button.png
│ │ ├── logo-blue.svg
│ │ ├── logout-button.png
│ │ ├── malte.jpg
│ │ ├── motions
│ │ │ └── amp-lines-motions.png
│ │ ├── nav
│ │ │ ├── back_arrow.png
│ │ │ ├── back_arrow.svg
│ │ │ ├── close.png
│ │ │ ├── close.svg
│ │ │ ├── next_level.png
│ │ │ └── next_level.svg
│ │ ├── partners
│ │ │ ├── adobe_analytics.png
│ │ │ ├── chartbeat.png
│ │ │ ├── comscore.png
│ │ │ ├── ggl_bw.png
│ │ │ ├── ggl.png
│ │ │ ├── li.png
│ │ │ ├── nuzzel.png
│ │ │ ├── parsely.png
│ │ │ ├── pinterest.png
│ │ │ ├── tw.png
│ │ │ └── wp.png
│ │ ├── platforms
│ │ │ ├── chrome.png
│ │ │ ├── criteo.png
│ │ │ ├── edge.png
│ │ │ ├── firefox.png
│ │ │ ├── google.png
│ │ │ ├── inmobi.png
│ │ │ ├── kargo.png
│ │ │ ├── mediavine.png
│ │ │ ├── opera.png
│ │ │ ├── plista.png
│ │ │ ├── safari.png
│ │ │ └── yahoo.png
│ │ ├── publishers
│ │ │ ├── abril.png
│ │ │ ├── asahi.png
│ │ │ ├── atlantic_media.png
│ │ │ ├── bbc_news.png
│ │ │ ├── buzzfeed.png
│ │ │ ├── condenast.png
│ │ │ ├── daily_mail.png
│ │ │ ├── economist.png
│ │ │ ├── editora_globo.png
│ │ │ ├── el_pais.png
│ │ │ ├── fairfax_media.png
│ │ │ ├── folha_de_s.paulo.png
│ │ │ ├── franzfurter_allgemeine.png
│ │ │ ├── ft.png
│ │ │ ├── gannett.png
│ │ │ ├── guardian.png
│ │ │ ├── hearst.png
│ │ │ ├── huffington_post.png
│ │ │ ├── la_stampa.png
│ │ │ ├── les_echos.png
│ │ │ ├── mainichi.png
│ │ │ ├── mashable.png
│ │ │ ├── mcclatchy.png
│ │ │ ├── new_york_times.png
│ │ │ ├── newscorp_australia.png
│ │ │ ├── nine_msn.png
│ │ │ ├── nrc.png
│ │ │ ├── ny_daily_news.png
│ │ │ ├── nypost.png
│ │ │ ├── pearson.png
│ │ │ ├── sankei.png
│ │ │ ├── telegraph.png
│ │ │ ├── time.png
│ │ │ ├── uol.png
│ │ │ ├── us_news.png
│ │ │ ├── vox_media.png
│ │ │ ├── wallstreetjournal.png
│ │ │ ├── washington_post.png
│ │ │ └── zeit_online.png
│ │ ├── quotes
│ │ │ ├── chartbeat.jpg
│ │ │ ├── ebay.jpg
│ │ │ ├── faz.jpg
│ │ │ ├── folha.jpg
│ │ │ ├── google.jpg
│ │ │ ├── guardian.jpg
│ │ │ ├── hearst.jpg
│ │ │ ├── lastampa.jpg
│ │ │ ├── newyorktimes.jpeg
│ │ │ ├── twitter.jpg
│ │ │ └── vox.jpg
│ │ ├── return-parameter.png
│ │ ├── sprite.svg
│ │ ├── symbols
│ │ │ ├── carat-down.svg
│ │ │ ├── carat.svg
│ │ │ ├── caret-right.svg
│ │ │ ├── close.svg
│ │ │ ├── lang-icon.svg
│ │ │ ├── logo-blue-standalone.svg
│ │ │ ├── return.svg
│ │ │ ├── search.svg
│ │ │ ├── share-close.svg
│ │ │ ├── share.svg
│ │ │ ├── template.scss
│ │ │ ├── twitter.svg
│ │ │ ├── video-play.svg
│ │ │ └── wordpress.svg
│ │ └── twitter.png
│ ├── manifest.json
│ ├── sass
│ │ ├── _accordions.scss
│ │ ├── _animated_lines.scss
│ │ ├── _animations.scss
│ │ ├── _bg-triangle.scss
│ │ ├── _callouts.scss
│ │ ├── _cards.scss
│ │ ├── _carousel.scss
│ │ ├── _config.scss
│ │ ├── _content-post.scss
│ │ ├── _content-section.scss
│ │ ├── _content.scss
│ │ ├── _doc-nav.scss
│ │ ├── _footer.scss
│ │ ├── _global.scss
│ │ ├── _grid.scss
│ │ ├── _header.scss
│ │ ├── _inline-toc.scss
│ │ ├── _lang_switcher.scss
│ │ ├── _large-cta.scss
│ │ ├── _lightbox.scss
│ │ ├── _mixins.scss
│ │ ├── _nav.scss
│ │ ├── _points.scss
│ │ ├── _post-item.scss
│ │ ├── _responsive.scss
│ │ ├── _search.scss
│ │ ├── _share.scss
│ │ ├── _sidebar.scss
│ │ ├── _sprite_generated.scss
│ │ ├── _sprite.scss
│ │ ├── _syntax_highlighting.scss
│ │ ├── _tables.scss
│ │ ├── _toc.scss
│ │ ├── about-how.min.scss
│ │ ├── about-overview.min.scss
│ │ ├── about-who-vertical.min.scss
│ │ ├── about-who.min.scss
│ │ ├── blog.min.scss
│ │ ├── case-study.min.scss
│ │ ├── design-principles.min.scss
│ │ ├── docs.min.scss
│ │ ├── home.min.scss
│ │ ├── list.min.scss
│ │ ├── main.min.scss
│ │ ├── pages
│ │ │ ├── _about-how.scss
│ │ │ ├── _about-overview.scss
│ │ │ ├── _about-who-vertical.scss
│ │ │ ├── _about-who.scss
│ │ │ ├── _case-study.scss
│ │ │ ├── _design-principles.scss
│ │ │ ├── _events.scss
│ │ │ ├── _faqs.scss
│ │ │ ├── _home.scss
│ │ │ ├── _latest.scss
│ │ │ ├── _list.scss
│ │ │ ├── _post-detail.scss
│ │ │ ├── _roadmap.scss
│ │ │ ├── _who.scss
│ │ │ └── amp-conf.scss
│ │ └── section.min.scss
│ └── video
│ ├── amp-phone.mp4
│ └── amp-phone.webm
├── content
│ ├── contribute
│ │ └── governance.md
│ ├── docs
│ │ ├── _blueprint.yaml
│ │ ├── blank.html
│ │ ├── build.md
│ │ ├── contribute
│ │ │ ├── _blueprint.yaml
│ │ │ ├── contribute.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── file-a-bug.md
│ │ │ └── github.md
│ │ ├── contribute.md
│ │ ├── get_started
│ │ │ ├── _blueprint.yaml
│ │ │ ├── create
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── basic_markup.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── basic_markup@zh_CN.md
│ │ │ │ ├── include_image.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── include_image@zh_CN.md
│ │ │ │ ├── prepare_for_discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── prepare_for_discovery@zh_CN.md
│ │ │ │ ├── presentation_layout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── presentation_layout@zh_CN.md
│ │ │ │ ├── preview_and_validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── preview_and_validate@zh_CN.md
│ │ │ │ ├── publish.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── publish@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── publish@zh_CN.md
│ │ │ ├── create.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── create@zh_CN.md
│ │ │ ├── live_blog.md
│ │ │ ├── [email protected]
│ │ │ ├── login_requiring
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── add_comment.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── login.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── logout.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── summary.md
│ │ │ │ └── [email protected]
│ │ │ ├── login_requiring.md
│ │ │ └── [email protected]
│ │ ├── getting-started.md
│ │ ├── guides
│ │ │ ├── _blueprint.yaml
│ │ │ ├── author_develop
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads_on_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── ads_getting_started.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── ads_tips.md
│ │ │ │ │ └── [email protected]
│ │ │ │ ├── ads_on_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── amp_replacements.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── iframes.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── art_direction.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── control_layout@zh_CN.md
│ │ │ │ │ ├── custom_fonts.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── placeholders.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── style_pages@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── style_pages@zh_CN.md
│ │ │ │ ├── responsive_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── responsive_amp@zh_CN.md
│ │ │ │ ├── third_party_components.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── third_party_components@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── third_party_components@zh_CN.md
│ │ │ ├── author_develop.md
│ │ │ ├── debug
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── validate.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── validate@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── validate@zh_CN.md
│ │ │ ├── debug.md
│ │ │ ├── deploy
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── analytics_amp
│ │ │ │ │ ├── _blueprint.yaml
│ │ │ │ │ ├── analytics_basics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── analytics_basics@zh_CN.md
│ │ │ │ │ ├── deep_dive_analytics.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── deep_dive_analytics@zh_CN.md
│ │ │ │ │ ├── use_cases.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── use_cases@pt_BR.md
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ ├── [email protected]
│ │ │ │ │ └── use_cases@zh_CN.md
│ │ │ │ ├── analytics_amp.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── analytics_amp@zh_CN.md
│ │ │ │ ├── discovery.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@pt_BR.md
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── discovery@zh_CN.md
│ │ │ │ ├── engagement.md
│ │ │ │ └── [email protected]
│ │ │ ├── deploy.md
│ │ │ └── embed
│ │ │ ├── _blueprint.yaml
│ │ │ └── login-paywalls.md
│ │ ├── guides.md
│ │ ├── reference
│ │ │ ├── _blueprint.yaml
│ │ │ ├── common_attributes.md
│ │ │ ├── components
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── ads-analytics
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── dynamic-content
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── layout
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── media
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ ├── presentation
│ │ │ │ │ └── _blueprint.yaml
│ │ │ │ └── social
│ │ │ │ └── _blueprint.yaml
│ │ │ ├── components.md
│ │ │ ├── experimental.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── experimental@zh_CN.md
│ │ │ ├── validation_errors.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── validation_errors@pt_BR.md
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── validation_errors@zh_CN.md
│ │ ├── reference.md
│ │ └── tutorials.md
│ ├── includes
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017.yaml
│ │ ├── amp-iframe.md
│ │ ├── blog_feed.yaml
│ │ ├── doc.yaml
│ │ ├── events.yaml
│ │ ├── home.yaml
│ │ ├── html-example.md
│ │ ├── latest.yaml
│ │ ├── list-blog.yaml
│ │ ├── lists.yaml
│ │ ├── menu.yaml
│ │ ├── roadmap.yaml
│ │ └── tweets.yaml
│ ├── latest
│ │ ├── _blueprint.yaml
│ │ ├── blog
│ │ │ ├── _blueprint.yaml
│ │ │ ├── 1056.md
│ │ │ ├── ads-on-the-web-will-get-better-with-amp-heres-how.md
│ │ │ ├── amp-roadmap-update-for-mid-q1-2017.md
│ │ │ ├── amp-up-for-amp-conf-2017.md
│ │ │ ├── grow-your-business-with-ads-on-amp.md
│ │ │ ├── new-default-placeholders-for-ads-in-amp.md
│ │ │ ├── new-industry-benchmarks-for-mobile-page-speed.md
│ │ │ ├── speeding-up-news-apps-with-amp.md
│ │ │ ├── whats-in-an-amp-url.md
│ │ │ └── why-amp-caches-exist.md
│ │ ├── latest.html
│ │ ├── list-blog.html
│ │ ├── list-event.html
│ │ ├── list-past-event.html
│ │ └── roadmap.html
│ ├── learn
│ │ ├── _blueprint.yaml
│ │ ├── about-amp.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-amp@zh_CN.md
│ │ ├── about-how.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── about-how@zh_CN.yaml
│ │ ├── amp-design-principles.yaml
│ │ ├── browsers.md
│ │ ├── case-studies
│ │ │ ├── _blueprint.yaml
│ │ │ ├── category
│ │ │ │ ├── _blueprint.yaml
│ │ │ │ ├── advertisers.md
│ │ │ │ └── publishers.md
│ │ │ ├── gizmodo.md
│ │ │ ├── hearst.md
│ │ │ ├── milestone.md
│ │ │ ├── plista.md
│ │ │ ├── relay_media.md
│ │ │ ├── slate.md
│ │ │ ├── teads.md
│ │ │ ├── terra.md
│ │ │ ├── washingtonpost.md
│ │ │ └── wired.md
│ │ ├── case-studies.html
│ │ ├── how-amp-works.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── how-amp-works@zh_CN.md
│ │ ├── metrics.html
│ │ ├── overview.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.yaml
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.yaml
│ │ ├── who
│ │ │ ├── _blueprint.yaml
│ │ │ ├── ad-tech-platforms.yaml
│ │ │ ├── advertisers.yaml
│ │ │ ├── amp-ads.yaml
│ │ │ └── publishers.yaml
│ │ └── who-uses-amp.yaml
│ ├── pages
│ │ ├── _blueprint.yaml
│ │ ├── amp-conf-2017
│ │ │ ├── _blueprint.yaml
│ │ │ ├── accessibility.html
│ │ │ └── code-of-conduct.html
│ │ ├── amp-conf-2017.html
│ │ ├── home.html
│ │ ├── how-it-works.html
│ │ └── metrics_chart.html
│ └── support
│ ├── _blueprint.yaml
│ ├── developer
│ │ ├── _blueprint.yaml
│ │ ├── documentation-bug.md
│ │ ├── mailing-list.md
│ │ ├── platform-bug.md
│ │ ├── slack.md
│ │ └── stack-overflow.md
│ ├── developer.md
│ ├── faqs
│ │ ├── _blueprint.yaml
│ │ ├── overview.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── overview@zh_CN.md
│ │ ├── platform-involvement.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── platform-involvement@zh_CN.md
│ │ ├── publisher-monetization.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@pt_BR.md
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── publisher-monetization@zh_CN.md
│ │ └── supported-platforms.md
│ ├── faqs.md
│ ├── platform.md
│ ├── support.md
│ ├── vendor
│ │ ├── _blueprint.yaml
│ │ └── amp-certification.md
│ └── vendor.md
├── CONTRIBUTING.md
├── firebase.json
├── gulpfile.js
├── LICENSE
├── npm-shrinkwrap.json
├── package.json
├── podspec.yaml
├── pwa
│ ├── google7199ce9da1ad191b.html
│ ├── pwa.html
│ ├── pwa.js
│ └── service-worker.js
├── README.md
├── scripts
│ ├── component_categories.json
│ ├── import_docs.js
│ ├── import_docs.json
│ ├── update_blog_links.js
│ ├── update_platforms_page.js
│ └── update_tweets.js
├── translations
│ ├── ar
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── de
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── es
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── fr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── id
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── it
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ja
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ko
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── messages.pot
│ ├── pl
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── pt_BR
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── ru
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── th
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ ├── tr
│ │ └── LC_MESSAGES
│ │ └── messages.po
│ └── zh_CN
│ └── LC_MESSAGES
│ └── messages.po
└── views
├── about-casestudies.html
├── about-how.html
├── about-overview.html
├── about-who-vertical.html
├── about-who.html
├── base.html
├── blank.html
├── blog_detail.html
├── case-study.html
├── design-principles.html
├── doc.html
├── grid_page.html
├── list_page.html
├── partials
│ ├── breadcrumb-nav.html
│ ├── doc_nav.html
│ ├── faq-accordion.html
│ ├── footer-cta.html
│ ├── footer.html
│ ├── grid-card.html
│ ├── head.html
│ ├── header.html
│ ├── lang_switcher.html
│ ├── large-cta.html
│ ├── lines.html
│ ├── nav.html
│ ├── points.html
│ ├── post-item.html
│ ├── promo_banner.html
│ ├── search.html
│ ├── share.html
│ ├── sidebar.html
│ └── sub_nav.html
└── section_page.html
```
# Files
--------------------------------------------------------------------------------
/assets/sass/_responsive.scss:
--------------------------------------------------------------------------------
```scss
1 |
2 |
3 | .desktop-up,
4 | .desktop-only {
5 | display: none;
6 | visibility: hidden;
7 | @include min-screen($mobile-breakpoint) {
8 | display: block;
9 | visibility: visible;
10 | }
11 | }
12 |
13 | .tablet-up {
14 | display: none;
15 | visibility: hidden;
16 | @include min-screen($tablet-breakpoint) {
17 | display: block;
18 | visibility: visible;
19 | }
20 | }
21 |
22 | .tablet-down {
23 | display: none;
24 | visibility: hidden;
25 | @include max-screen($tablet-breakpoint) {
26 | display: block;
27 | visibility: visible;
28 | }
29 | }
30 |
31 | .mobile-down {
32 | display: none;
33 | visibility: hidden;
34 | @include max-screen($mobile-breakpoint) {
35 | display: block;
36 | visibility: visible;
37 | }
38 | }
39 |
40 | .mobile-show {
41 | @include max-screen($mobile-breakpoint) {
42 | display: block;
43 | }
44 | }
45 |
46 | .mobile-hide {
47 | @include max-screen($mobile-breakpoint) {
48 | display: none;
49 | }
50 | }
51 |
52 | .tablet-show {
53 |
54 | @include max-screen($tablet-breakpoint) {
55 | display: block;
56 | }
57 | }
58 |
59 | .tablet-hide {
60 |
61 | @include max-screen($tablet-breakpoint) {
62 | display: none;
63 | }
64 | }
65 |
```
--------------------------------------------------------------------------------
/content/docs/contribute/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: So können Sie zum Projekt beitragen
3 | ---
4 |
5 | ### AMP-Probleme
6 |
7 | Verwenden Sie für Feedback zum Projekt die [amphtml-Problemverfolgung](https://github.com/ampproject/amphtml/issues).
8 |
9 | ### Dokumentationsprobleme
10 |
11 | Für Fehler oder Inkonsistenzen auf dieser Website steht Ihnen der [Problem-Tracker für die Dokumentation](https://github.com/ampproject/docs/issues) zur Verfügung.
12 |
13 | ### Quellcode freigeben
14 |
15 | Sie möchten sich an der Fehlerbeseitigung beteiligen oder AMP noch schneller machen? Wir freuen uns über jede Hilfe!
16 |
17 | In [der CONTRIBUTING-Datei](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md) finden Sie Informationen für Beitragende zum AMP-Projekt. Die [DEVELOPING-Datei](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md) enthält die Dokumentation zum zu den internen Dateien der AMP-Bibliothek. Außerdem werden [Tipps für den Einstieg](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md#starter-issues) gegeben.
18 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Incluir una imagen
3 | ---
4 |
5 | La mayoría de las etiquetas HTML se pueden usar directamente en AMP HTML, pero algunas, como `<img>`, se reemplazan por etiquetas AMP HTML personalizadas equivalentes o ligeramente optimizadas (y unas pocas etiquetas problemáticas se inhabilitan directamente; consulta [etiquetas HTML en la especificación](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
6 |
7 | Para demostrar el aspecto que tendría el marcado adicional, a continuación te mostramos el código requerido para integrar una imagen a la página:
8 |
9 | [sourcecode:html]
10 | <amp-img src="bienvenido.jpg" alt="Bienvenido" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | Para saber por qué reemplazamos etiquetas como `<img>` por `<amp-img>` y cuántas hay disponibles, consulta [Incluir Iframes y medios](/docs/guides/amp_replacements.html).
14 |
15 | <a class="go-button button" href="/es/docs/get_started/create/presentation_layout.html">Continuar con el paso 3</a>
16 |
```
--------------------------------------------------------------------------------
/assets/img/symbols/lang-icon.svg:
--------------------------------------------------------------------------------
```
1 | <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0 0h24v24H0z" fill="none"/>
3 | <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>
4 | </svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Aggiunta di un’immagine
3 | ---
4 |
5 | La maggior parte dei tag HTML può essere utilizzata direttamente in HTML AMP, tuttavia alcuni tag, come `<img>`, vengono sostituiti con tag HTML AMP personalizzati equivalenti o leggermente ottimizzati (inoltre alcuni tag problematici sono stati del tutto esclusi, vedi [Tag HTML nelle specifiche](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
6 |
7 | Per illustrare il possibile aspetto del markup supplementare, ecco il codice necessario per incorporare un’immagine nella pagina:
8 |
9 | [sourcecode:html]
10 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | Per capire perché stiamo sostituendo tag come `<img>` con `<amp-img>` e quanti di essi sono disponibili, vai alla sezione [Includere Iframe ed elementi multimediali](/docs/guides/amp_replacements.html).
14 |
15 | <a class="go-button button" href="/it/docs/get_started/create/presentation_layout.html">Vai al Passaggio 3</a>
16 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Dołączanie obrazów
3 | ---
4 |
5 | Większość tagów HTML może być używanych bezpośrednio w kodzie AMP HTML, ale niektóre z nich, na przykład znacznik `<img>`, są zastępowane przez równoważne lub nieznacznie rozszerzone, niestandardowe tagi AMP HTML (a kilka problematycznych znaczników zostało zdecydowanie wykluczonych, zobacz [Tagi HTML w specyfikacji](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
6 |
7 | Przedstawiony poniżej kod wymagany do umieszczenia obrazu na stronie demonstruje wygląd tych dodatkowych znaczników:
8 |
9 | [sourcecode:html]
10 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | Uzasadnienie zamiany znaczników w rodzaju `<img>` na `<amp-img>` oraz informacje o liczbie dostępnych znaczników znajdziesz w części [Dołączanie ramek iframe i multimediów](/docs/guides/amp_replacements.html).
14 |
15 | <a class="go-button button" href="/pl/docs/get_started/create/presentation_layout.html">Przejdź do kroku 3</a>
16 |
```
--------------------------------------------------------------------------------
/views/partials/grid-card.html:
--------------------------------------------------------------------------------
```html
1 | {% set goto = g.url(doc.goto, locale=doc.locale).path if doc.goto and 'http' not in doc.goto %}
2 |
3 | <a class="card" href="{{goto or doc.goto or doc.url.path}}">
4 | <div class="card-inner">
5 | {% if isCase %}
6 | <div class="card-meta">
7 | <span class="card-type text-label">{{_(doc.category)}}</span>
8 | <span class="card-date light">{{doc.date}}</span>
9 | </div>
10 | <div class="card-logo">
11 | <amp-img alt="{{doc.title}}"
12 | height="{{doc.logo.height}}"
13 | layout="fixed"
14 | noloading
15 | src="/static/img/{{doc.logo.src}}"
16 | width="{{doc.logo.width}}"></amp-img>
17 | </div>
18 | {% endif %}
19 |
20 | <div class="card-title">
21 | {% if isCase %}<h4>{% else %}<h2>{% endif %}
22 | {{doc.headline or doc.title}}
23 | {% if isCase %}</h4>{% else %}</h2>{% endif %}
24 | </div>
25 |
26 | <div class="card-link">
27 | <p class="text-label"> {% if isCase %} {{_('Read the Case Study')}}
28 | {% else %} {{_('Learn More')}} {% endif %} </p>
29 | </div>
30 | </div>
31 | </a>
32 |
```
--------------------------------------------------------------------------------
/views/partials/share.html:
--------------------------------------------------------------------------------
```html
1 | {% set lists = g.doc('/content/includes/lists.yaml', locale=doc.locale) %}
2 | <amp-accordion class="share-module">
3 | <section class="control">
4 | <header>
5 | <div class="toggle-buttons">
6 | <div class="button-open"><p class="text-label">{{_(lists.share)}}</p></div>
7 | <div class="button-close"></div>
8 | </div>
9 | </header>
10 | <p></p>
11 | </section>
12 | <section expanded class="share-content">
13 | <header></header>
14 | <div class="share-buttons">
15 | <amp-social-share
16 | width="63"
17 | height="63"
18 | type="facebook"
19 | data-param-app_id="206123646531919"></amp-social-share>
20 | <amp-social-share
21 | width="63"
22 | height="63"
23 | type="gplus"></amp-social-share>
24 | <amp-social-share
25 | width="63"
26 | height="63"
27 | type="linkedin"></amp-social-share>
28 | <amp-social-share
29 | width="63"
30 | height="63"
31 | type="twitter"></amp-social-share>
32 | </div>
33 | </section>
34 | </amp-accordion>
```
--------------------------------------------------------------------------------
/assets/img/docs/icon_important.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 65 65"><defs><style>.cls-1,.cls-2{fill:#fff;}.cls-1{fill-opacity:0.7;stroke:#ff5252;stroke-linejoin:round;}.cls-2{opacity:0.7;}.cls-3{fill:#ff5252;}</style><symbol id="New_Symbol_2" data-name="New Symbol 2" viewBox="0 0 36.32 32.27"><polygon class="cls-1" points="0.5 31.77 18.16 0.5 35.82 31.77 0.5 31.77"/><circle class="cls-2" cx="18.16" cy="24.8" r="1.53"/><path class="cls-3" d="M18.16,23.77a1,1,0,1,1-1,1,1,1,0,0,1,1-1m0-1a2,2,0,1,0,2,2,2,2,0,0,0-2-2Z"/><polygon class="cls-2" points="17 21.23 16.21 13.01 20.11 13.01 19.32 21.23 17 21.23"/><path class="cls-3" d="M19.56,13.51l-.69,7.22H17.45l-.69-7.22h2.79m1.1-1h-5l.1,1.09.69,7.22.09.91h3.24l.09-.91.69-7.22.1-1.09Z"/></symbol></defs><title>icon_important1</title><g id="Layer_1" data-name="Layer 1"><use id="New_Symbol_2-3" data-name="New Symbol 2" width="36.32" height="32.27" transform="translate(14.15 15.48)" xlink:href="#New_Symbol_2"/></g></svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Inclure une image
3 | ---
4 |
5 | La plupart des balises HTML peuvent être utilisées directement dans AMP HTML, mais certaines, comme la balise `<img>`, sont remplacées par des balises équivalentes ou des balises AMP HTML personnalisées légèrement améliorées (et quelques balises problématiques sont purement interdites, voir les [balises HTML dans la spécification](https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md)).
6 |
7 | Pour découvrir à quoi ressemblerait un balisage supplémentaire, voici le code requis pour intégrer une image dans la page :
8 |
9 | [sourcecode:html]
10 | <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
11 | [/sourcecode]
12 |
13 | Pour savoir pourquoi nous remplaçons les balises, telles que `<img>` par `<amp-img>`, et combien sont disponibles, accédez à [Inclure des iframes et des éléments multimédias](/docs/guides/amp_replacements.html).
14 |
15 | <a class="go-button button" href="/fr/docs/get_started/create/presentation_layout.html">Continuer à l'Étape 3</a>
16 |
```
--------------------------------------------------------------------------------
/content/includes/latest.yaml:
--------------------------------------------------------------------------------
```yaml
1 | hero:
2 | sub_title@: Follow AMP
3 | title@: The Latest News
4 | content@: The open-source AMP Project helps you create mobile optimized content that loads in an instant.
5 | hero_img: /static/img/latest/latest_hero.jpg
6 | lines_back_img: /static/img/latest/line_hero_back.svg
7 | lines_front_img: /static/img/latest/line_hero_front.svg
8 |
9 | feed:
10 | title@: What's hot?
11 | icon_audience: /static/img/latest/icon_audience.png
12 | icon_calendar: /static/img/latest/icon_calendar.png
13 | icon_location: /static/img/latest/icon_location.png
14 | category_event@: Events
15 | category_roadmap@: Roadmap
16 | category_blog@: Blog
17 | more_posts@: See More
18 | more_posts_href: /content/latest/list-blog.html
19 | add_to_calendar@: Add to Calendar
20 |
21 | twitter:
22 | title@: Follow us on Twitter
23 | icon_twitter: /static/img/latest/icon_twitter.svg
24 | icon_retweet: /static/img/latest/icon_retweet.png
25 | account_id: AMPhtml
26 | account_href: https://twitter.com/amphtml
27 | follow_cta@: Follow AMP
28 | follow_href: https://twitter.com/intent/follow?screen_name=AMPhtml
29 |
```
--------------------------------------------------------------------------------
/content/docs/contribute/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Comment participer
3 | ---
4 |
5 | ### Problèmes relatifs au projet AMP
6 |
7 | Veuillez nous faire part de vos commentaires sur le projet en utilisant l'[outil amphtml de suivi des problèmes](https://github.com/ampproject/amphtml/issues).
8 |
9 | ### Problèmes liés à la documentation
10 |
11 | Si vous voulez signaler des bugs ou des incohérences sur ce site Web, utilisez plutôt l'[outil docs de suivi des problèmes](https://github.com/ampproject/docs/issues).
12 |
13 | ### Contribuer au code source
14 |
15 | Vous voulez aider à corriger des bugs ou à rendre l'AMP encore plus rapide ? Votre aide est la bienvenue.
16 |
17 | Veuillez consulter le fichier [CONTRIBUTION](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md) pour plus d'informations sur la contribution au projet AMP, le fichier [DÉVELOPPEMENT](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md) pour parcourir les documents relatifs à la bibliothèque AMP et les [astuces pour faire vos premiers pas](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md#starter-issues).
18 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Keterlibatan Platform dan Perusahaan Teknologi
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Monetisasi Penerbit
7 | link_url: /content/support/faqs/publisher-monetization.md
8 |
9 | faq:
10 | - title@: Bagaimana cara platform pelanggan terlibat dalam Accelerated Mobile Pages?
11 | answer@: |
12 | Proyek ini terbuka untuk semua orang, dan anggota proyek yang sudah ada sangat antusias untuk terlibat dengan platform pelanggan pada inisiatif. Google membuka cache untuk digunakan oleh siapa pun secara gratis, termasuk platform pelanggan yang ingin menampilkan konten AMP di lingkungan mereka. Terus terhubung melalui [Github](https://github.com/ampproject/amphtml/issues/new) dan kami akan menjawab pertanyaan Anda secepat yang kami bisa.
13 | - title@: Bagaimana cara vendor iklan atau teknologi terlibat dalam Accelerated Mobile Pages?
14 | answer@: |
15 | Tinjau [pedoman berkontribusi](https://github.com/ampproject/amphtml/tree/master/3p#ads) dan terus terhubung lewat [Github](https://github.com/ampproject/amphtml/issues/new).
16 | ---
17 |
```
--------------------------------------------------------------------------------
/content/docs/contribute/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Cómo colaborar
3 | ---
4 |
5 | ### Problemas con AMP
6 |
7 | Introduce tus comentarios sobre el proyecto en el [sistema de seguimiento de problemas con amphtml](https://github.com/ampproject/amphtml/issues).
8 |
9 | ### Problemas con la documentación
10 |
11 | Si detectas errores o incoherencias en este sitio web, abre una incidencia en el [sistema de seguimiento de problemas con la documentación](https://github.com/ampproject/docs/issues).
12 |
13 | ### Contribuir con software libre
14 |
15 | ¿Quieres corregir errores o a hacer que las páginas AMP sean aún más rápidas? Estaremos encantados de que nos ayudes.
16 |
17 | Consulta [el archivo sobre contribuciones](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md) para obtener información sobre cómo contribuir al proyecto AMP y el [archivo sobre desarrollo](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md) para obtener documentación sobre el funcionamiento interno de la biblioteca de AMP y [consejos sobre cómo empezar](https://github.com/ampproject/amphtml/blob/master/DEVELOPING.md#starter-issues).
18 |
```
--------------------------------------------------------------------------------
/content/support/faqs/platform-involvement@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Envolvimento de empresas de tecnologia e plataformas
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Monetização de editores
7 | link_url: /content/support/faqs/publisher-monetization.md
8 |
9 | faq:
10 | - title@: Como uma plataforma de consumidores pode se envolver com as Accelerated Mobile Pages?
11 | answer@: |
12 | O projeto está aberto a todos, e os atuais membros estão muito entusiasmados com o envolvimento de plataformas de consumidores na iniciativa. O Google abriu seu cache para uso gratuito por qualquer pessoa, inclusive plataformas de consumidores que gostariam de exibir conteúdo AMP no ambiente delas. Entre em contato por meio do [Github](https://github.com/ampproject/amphtml/issues/new) e responderemos às perguntas o mais rápido possível
13 | - title@: Como um fornecedor de publicidade ou tecnologia pode usar as Accelerated Mobile Pages?
14 | answer@: |
15 | Revise as [diretrizes de contribuição](https://github.com/ampproject/amphtml/tree/master/3p#ads) e entre em contato por meio do [Github](https://github.com/ampproject/amphtml/issues/new).
16 | ---
17 |
```
--------------------------------------------------------------------------------
/assets/sass/_accordions.scss:
--------------------------------------------------------------------------------
```scss
1 | amp-accordion {
2 | section {
3 | border-bottom: 2px solid $color-grey-lt;
4 | }
5 | }
6 |
7 | .accordion-header,
8 | .accordion-content {
9 | margin: 20px 0;
10 | padding: 0 25px 0 65px;
11 | }
12 |
13 | .accordion-header {
14 | background-color: transparent;
15 | border: 0;
16 | }
17 |
18 | .accordion-title {
19 | margin: 0;
20 | position: relative;
21 | transition: color 0.3s;
22 |
23 | &:hover {
24 | color: $color-ampblue;
25 | }
26 |
27 | &::before,
28 | &::after {
29 | background: $gradient-med;
30 | content: '';
31 | display: inline-block;
32 | height: 2px;
33 | left: -40px;
34 | position: absolute;
35 | top: 50%;
36 | width: 8px;
37 | }
38 |
39 | &::after {
40 | transform: rotate(90deg);
41 | }
42 |
43 | section[expanded] &::after {
44 | content: none;
45 | }
46 | }
47 |
48 | .accordion-content {
49 | p:first-child {
50 | margin-top: 0;
51 | }
52 |
53 | p:last-child {
54 | margin-bottom: 2px;
55 | }
56 | }
57 |
58 | @include max-screen($mobile-breakpoint) {
59 | amp-accordion {
60 | section {
61 | border-bottom: 1px solid $color-grey-lt;
62 | }
63 | }
64 |
65 | .accordion-header,
66 | .accordion-content {
67 | margin: 15px 0;
68 | padding: 0 0 0 30px;
69 | }
70 |
71 | .accordion-title::before,
72 | .accordion-title::after {
73 | left: -30px;
74 | }
75 | }
76 |
```
--------------------------------------------------------------------------------
/assets/img/about/how-amp-works/lines_front.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 185.95 167.1"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="-27541.86" y1="-23784.58" x2="-27401.09" y2="-23784.58" gradientTransform="translate(27587.04 23877.25)" gradientUnits="userSpaceOnUse"><stop offset="0.03" stop-color="#0dd7ff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="linear-gradient-2" x1="-30880.84" y1="-6883.24" x2="-30741.71" y2="-6883.24" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, -29203, -11707.65)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0389ff"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>lines_front</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="48.37" y1="160.15" x2="182.76" y2="25.17"/><line class="cls-2" x1="3.19" y1="163.92" x2="163.2" y2="3.17"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/platform-involvement.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Platform and Technology Company Involvement
3 | $order: 1
4 | $parent: /content/support/faqs.md
5 | class: faqs
6 |
7 | cta:
8 | title@: Next FAQ
9 | link_text@: Publisher Monetization
10 | link_url: /content/support/faqs/publisher-monetization.md
11 |
12 | faq:
13 | - title@: How can a consumer platform get involved in Accelerated Mobile Pages?
14 | answer@: |
15 | The project is open to everyone, and existing members of the project are very enthusiastic to engage with consumer platforms on the initiative. Google has opened its cache for use for free by anyone, including to consumer platforms that would like to display AMP content in their environment. Please get in touch via [GitHub](https://github.com/ampproject/amphtml/issues/new) and we will address your questions as quickly as we can.
16 | - title@: How can an advertising or technology vendor get involved in Accelerated Mobile Pages?
17 | answer@: |
18 | Please review the [contributing guidelines](https://github.com/ampproject/amphtml/tree/master/3p#ads) and get in touch via [GitHub](https://github.com/ampproject/amphtml/issues/new).
19 | ---
20 |
```
--------------------------------------------------------------------------------
/content/pages/amp-conf-2017/accessibility.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title: AMP Conf 2017 - Accessibility
3 | noglobalnote: 1
4 | class: amp-conf
5 |
6 | components:
7 | - iframe
8 | stylesheet: pages/amp-conf.css
9 | ---
10 |
11 | {% set conf = g.doc('/content/includes/amp-conf-2017.yaml', locale=doc.locale) %}
12 |
13 | <section class="code-of-conduct amp-conf-section">
14 |
15 | <div class="wrapper">
16 |
17 | <h3>AMP Conf Accessibility</h3>
18 |
19 | <p>The AMP Conf is an inclusive conference and wants to be accessible.</p>
20 |
21 | <p>We make sure that the AMP Conf is well accessible to people with physical disabilities, by both checking with the venue owner and by visiting them personally beforehand.</p>
22 |
23 | <p>However, we are aware that accessibility issues are diverse and this does not cover everything.</p>
24 |
25 | <p>If you are interested in our conference, but have any kind of accessibility problem that needs to be resolved before you can attend, please <a href="mailto:[email protected]">get in contact</a>.</p>
26 |
27 | <p>If you are in need of an assistant, they will not be required to request a ticket.</p>
28 |
29 | <p>We would love to welcome you to AMP Conf!</p>
30 |
31 | </div>
32 |
33 | </section>
34 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Zaangażowanie platform i firm technologicznych
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Zyski dla wydawców
7 | link_url: /content/support/faqs/publisher-monetization.md
8 |
9 | faq:
10 | - title@: W jaki sposób platforma konsumencka może wziąć udział w projekcie Accelerated Mobile Pages?
11 | answer@: |
12 | Projekt jest otwarty dla wszystkich, a jego obecni członkowie bardzo entuzjastycznie podchodzą do tematu zaangażowania platform konsumenckich. Google bezpłatnie udostępnia swoją pamięć podręczną wszystkim, w tym platformom konsumenckim, które chcą wyświetlać treści AMP. Można się z nami skontaktować poprzez [GitHub](https://github.com/ampproject/amphtml/issues/new) – na pytania odpowiemy tak szybko, jak to będzie możliwe.
13 | - title@: W jaki sposób reklamodawcy i dostawcy technologii mogą wziąć udział w projekcie Accelerated Mobile Pages?
14 | answer@: |
15 | Przeczytaj [wskazówki dotyczące dołączenia do projektu](https://github.com/ampproject/amphtml/tree/master/3p#ads) i skontaktuj się z nami za pośrednictwem [GitHubu](https://github.com/ampproject/amphtml/issues/new).
16 | ---
17 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/preview_and_validate.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Preview and Validate
3 | $order: 3
4 | ---
5 |
6 | Preview the AMP page just as you would preview any other static HTML site. There’s no build step or preprocessing required. Either:
7 |
8 | - **Open it directly in the browser from the file system** (certain elements might not work due to XMLHttpRequests failing).
9 | - **Use a local web server like Apache 2 or Nginx**.
10 | *(Tip: For a quick web server, run `python -m SimpleHTTPServer`.)*
11 |
12 | Next, make sure that your AMP page **is actually valid AMP**, or it won’t get discovered and distributed by third-party platforms like Google Search. To validate:
13 |
14 | 1. Open your page in your browser.
15 | 1. Add "`#development=1`" to the URL, for example, `http://localhost:8000/released.amp.html#development=1`.
16 | 1. Open the [Chrome DevTools console](https://developers.google.com/web/tools/chrome-devtools/debug/console/) and check for validation errors.
17 |
18 | [Learn more about validation](/docs/guides/validate.html), and what to do when you get errors.
19 |
20 | <a class="go-button button" href="/docs/get_started/create/prepare_for_discovery.html">Continue to Step 5</a>
21 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Beteiligung von Plattformen und Technologieunternehmen
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Monetarisierung für Publisher
7 | link_url: /content/support/faqs/publisher-monetization.md
8 |
9 | faq:
10 | - title@: Wie können sich Verbraucherplattformen am Projekt Accelerated Mobile Pages beteiligen?
11 | answer@: |
12 | Das Projekt steht allen offen. Die aktuellen Teilnehmer würden sich sehr gern auch mit Verbraucherplattformen über die Initiative austauschen. Der Cache von Google steht allen kostenlos zur Verfügung. Dies schließt auch Verbraucherplattformen ein, die AMP-Inhalte in ihrer Umgebung nutzen wollen. [Kontaktieren Sie uns über GitHub](https://github.com/ampproject/amphtml/issues/new). Wir werden uns dann schnellstmöglich um Ihre Fragen kümmern.
13 | - title@: Wie können sich Werbeunternehmen oder Technologieanbieter an Accelerated Mobile Pages beteiligen?
14 | answer@: |
15 | Bitte lesen Sie die [Richtlinien für Beitragende](https://github.com/ampproject/amphtml/tree/master/3p#ads) und [kontaktieren Sie uns über GitHub](https://github.com/ampproject/amphtml/issues/new).
16 | ---
17 |
```
--------------------------------------------------------------------------------
/content/includes/html-example.md:
--------------------------------------------------------------------------------
```markdown
1 | [sourcecode:html]
2 | <!doctype html>
3 | <html ⚡>
4 | <head>
5 | <meta charset="utf-8">
6 | <link rel="canonical" href="hello-world.html">
7 | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
8 | <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
9 | <script async src="https://cdn.ampproject.org/v0.js"></script>
10 | </head>
11 | <body>Hello World!</body>
12 | </html>
13 | [/sourcecode]
14 |
```
--------------------------------------------------------------------------------
/assets/sass/_content-post.scss:
--------------------------------------------------------------------------------
```scss
1 | // post content for docs
2 |
3 | // Components table
4 |
5 | .post-title {
6 | color: $color-ampblue;
7 | margin: 0 75px;
8 | padding: 0 15px;
9 | }
10 |
11 | .post-content {
12 | @extend %text-small;
13 | margin: 0 75px;
14 | padding: 0 15px;
15 |
16 | a {
17 | text-transform: none;
18 | }
19 |
20 | .button {
21 | &:before {
22 | display: none;
23 | }
24 | }
25 |
26 | td:first-child a:hover {
27 | text-decoration: none;
28 | }
29 |
30 | th.col-twenty,
31 | td.col-twenty {
32 | min-width: 90px;
33 | }
34 | }
35 |
36 | @include min-screen($toc-breakpoint) {
37 | .post.has-toc {
38 | .post-title,
39 | .post-content {
40 | margin: 0 190px 0 15px;
41 | }
42 | }
43 |
44 | .rtl {
45 | .post.has-toc {
46 | .post-title,
47 | .post-content {
48 | margin: 0 15px 0 190px;
49 | }
50 | }
51 | }
52 | }
53 |
54 | @include max-screen($toc-breakpoint) {
55 | .post.has-toc {
56 | .post-title,
57 | .post-content {
58 | margin: 0;
59 | }
60 | }
61 |
62 | .rtl {
63 | .post.has-toc {
64 | .post-title,
65 | .post-content {
66 | margin: 0;
67 | }
68 | }
69 | }
70 | }
71 |
72 | @include max-screen($tablet-breakpoint) {
73 | .post-title,
74 | .post-content {
75 | margin: 0 15px;
76 | }
77 | }
78 |
79 | @include max-screen($mobile-breakpoint) {
80 | .post-title,
81 | .post-content {
82 | margin: 0;
83 | }
84 | }
85 |
```
--------------------------------------------------------------------------------
/assets/img/about/design-principles/lines2.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 258.63 200.18"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="5059.93" y1="-6711.71" x2="5314.71" y2="-6711.71" gradientTransform="translate(5221.47 -6687.02) rotate(179.22)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0382ff"/><stop offset="1" stop-color="#0dd0ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-22509.5" y1="-6753.17" x2="-22307.5" y2="-6753.17" gradientTransform="translate(22657.11 6571.41) 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></defs><title>lines2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="2.67" y1="186.07" x2="249.75" y2="3.62"/><line class="cls-2" x1="255.95" y1="52.71" x2="61.15" y2="196.56"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Coinvolgimento di piattaforme e aziende tecnologiche
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Monetizzazione per i publisher
7 | link_url: /content/support/faqs/publisher-monetization.md
8 |
9 | faq:
10 | - title@: Come fa una piattaforma di consumo a partecipare al progetto Accelerated Mobile Pages?
11 | answer@: |
12 | Il progetto è aperto a tutti e i membri attuali sono entusiasti di relazionarsi con le piattaforme di consumo nell'ambito dell'iniziativa. Google ha messo a disposizione gratuitamente la sua cache per tutti, incluse le piattaforme di consumo che vorrebbero visualizzare i contenuti AMP nel loro ambiente. Contattaci tramite [GitHub](https://github.com/ampproject/amphtml/issues/new) e cercheremo di rispondere alle tue domande nel più breve tempo possibile.
13 | - title@: Come fa un fornitore di servizi pubblicitari o tecnologici a partecipare al progetto Accelerated Mobile Pages?
14 | answer@: |
15 | Leggi le [linee guida per la partecipazione](https://github.com/ampproject/amphtml/tree/master/3p#ads) e contattaci tramite [GitHub](https://github.com/ampproject/amphtml/issues/new).
16 | ---
17 |
```
--------------------------------------------------------------------------------
/content/pages/metrics_chart.html:
--------------------------------------------------------------------------------
```html
1 | ---
2 | $title: Metrics Embed
3 | $path: /metrics_chart.html
4 | $hidden: true
5 | $view: /views/blank.html
6 | ---
7 | <html>
8 | <head>
9 | <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
10 | <script type="text/javascript">
11 | google.charts.load('current', {'packages':['corechart']}); // Don't need to specify chart libraries!
12 | google.charts.setOnLoadCallback(drawVisualization);
13 |
14 | function drawVisualization() {
15 |
16 | var wrapper = new google.visualization.ChartWrapper({
17 | chartType: 'LineChart',
18 | dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1eujM6jDffZpOuwyZqji1Q6fpoEm8VZ5YO61-OMpmmw8/edit?usp=sharing&gid=37439685',
19 | query: 'SELECT A,B,C,D,E,F ORDER BY A',
20 | options: {
21 | 'title': 'Page load average across percentiles',
22 | 'vAxis': {
23 | format:'#ms'
24 | }
25 | },
26 | containerId: 'vis_div'
27 | });
28 | wrapper.draw()
29 | }
30 | </script>
31 | </head>
32 | <body style="font-family: Arial;border: 0 none;">
33 | <div id="vis_div" style="height: 500px;"></div>
34 | </body>
35 | </html>
```
--------------------------------------------------------------------------------
/assets/img/symbols/video-play.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3 | <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
4 | <title>Group 2</title>
5 | <desc>Created with Sketch.</desc>
6 | <defs></defs>
7 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8 | <g id="AMP---3" sketch:type="MSArtboardGroup" transform="translate(-135.000000, -383.000000)">
9 | <g id="Group-2" sketch:type="MSLayerGroup" transform="translate(137.000000, 385.000000)">
10 | <circle id="Oval-5" stroke="#FFFFFF" stroke-width="3" sketch:type="MSShapeGroup" cx="13" cy="13" r="13"></circle>
11 | <path d="M19.1724988,13.1973605 L9.58254916,18.9280578 L9.58254916,7.46666319 L19.1724988,13.1973605 L19.1724988,13.1973605 Z" id="Rectangle-36" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
12 | </g>
13 | </g>
14 | </g>
15 | </svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Create a login-requiring AMP page
3 | $order: 2
4 | numbered: 1
5 | ---
6 | Some user interactions with a page, such as leaving a comment, could be conditioned by a login flow. You can implement a login flow with AMP by using the [amp-access](https://www.ampproject.org/docs/reference/components/amp-access) component combined with the [amp-form](https://www.ampproject.org/docs/reference/components/amp-form) component.
7 | {% call callout('Tip', type='success') %}
8 | To see a sample implementation, visit the [comment section sample](https://ampbyexample.com/samples_templates/comment_section/) at [ampbyexample.com](https://ampbyexample.com).
9 | {% endcall %}
10 |
11 | The [comment section sample](https://ampbyexample.com/samples_templates/comment_section/) combines `amp-access` and `amp-form` to create a comment section which is enabled only when an user has logged in. In order to explain how this sample works, let's follow the set of actions that will be performed once you land on the page.
12 |
13 | {% include "/views/partials/sub_nav.html" %}
14 |
15 | <a class="button go-button" href="/docs/get_started/login_requiring/login.html">Continue to Step 1</a>
16 |
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Participación de plataformas y empresas tecnológicas
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Obtención de ingresos del editor
7 | link_url: /content/support/faqs/publisher-monetization.md
8 |
9 | faq:
10 | - title@: ¿Cómo puede una plataforma de consumidores participar en Accelerated Mobile Pages?
11 | answer@: |
12 | El proyecto está abierto a todo el mundo, y los miembros actuales están encantados de colaborar en esta iniciativa con plataformas de usuarios. Google ha abierto su caché para que todo el mundo pueda utilizarla de forma gratuita, incluidas las plataformas de consumidores que quieran mostrar contenido de AMP en su entorno. Ponte en contacto con nosotros a través de [GitHub](https://github.com/ampproject/amphtml/issues/new) y responderemos a tus preguntas lo antes posible.
13 | - title@: ¿Cómo puede un proveedor de tecnología o publicidad participar en Accelerated Mobile Pages?
14 | answer@: |
15 | Consulta las [directrices de contribución](https://github.com/ampproject/amphtml/tree/master/3p#ads) y ponte en contacto con nosotros a través de [GitHub](https://github.com/ampproject/amphtml/issues/new).
16 | ---
17 |
```
--------------------------------------------------------------------------------
/assets/sass/_inline-toc.scss:
--------------------------------------------------------------------------------
```scss
1 | .inline-toc {
2 | margin: 50px 0;
3 |
4 | ul,
5 | ol {
6 | list-style: none;
7 | margin: 0 auto;
8 | text-align: center;
9 | }
10 |
11 | li {
12 | display: inline-block;
13 | margin: 0 25px;
14 | }
15 |
16 | a {
17 | color: $color-grey-md;
18 | font-size: 20px;
19 | font-weight: 300;
20 | letter-spacing: .56px;
21 | line-height: 28px;
22 | position: relative;
23 | text-transform: none;
24 |
25 | &:hover,
26 | &.active {
27 | color: $color-black-95;
28 |
29 | &::before {
30 | background: $gradient-med;
31 | bottom: -5px;
32 | content: '';
33 | height: 1px;
34 | left: 0;
35 | position: absolute;
36 | right: 0;
37 | }
38 | }
39 | }
40 | }
41 |
42 | @include max-screen($mobile-breakpoint) {
43 | .inline-toc {
44 | margin: 25px 0;
45 |
46 | ul,
47 | ol {
48 | border-left: 1px solid $color-brightblue;
49 | text-align: left;
50 | text-align: start;
51 | }
52 |
53 | li {
54 | display: block;
55 | line-height: 16px;
56 | margin: 15px 20px;
57 | width: 100%;
58 | }
59 |
60 | a {
61 | color: $color-black-95;
62 | font-size: 16px;
63 | line-height: 26px;
64 | }
65 | }
66 |
67 | .rtl .inline-toc {
68 | ul, ol {
69 | border-left: 0;
70 | border-right: 1px solid $color-brightblue;
71 | }
72 | }
73 | }
74 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/lines_bottom1.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 325.31 236.98"><defs><style>.cls-1,.cls-2{fill:none;stroke-miterlimit:10;stroke-width:9px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="-5.18" y1="10739.49" x2="279.74" y2="10739.49" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, 1769.69, -10500.97)" 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="8071.64" y1="-13287.35" x2="8286.26" y2="-13287.35" gradientTransform="translate(8302.72 -13171.39) 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_bottom1</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="322.69" y1="3.66" x2="2.62" y2="233.33"/><line class="cls-2" x1="19.09" y1="191.19" x2="228.46" y2="40.72"/></g></g></svg>
```
--------------------------------------------------------------------------------
/content/support/faqs/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title@: Participation des plates-formes et des entreprises technologiques
3 |
4 | cta:
5 | title@: Next FAQ
6 | link_text@: Monétisation des éditeurs
7 | link_url: /content/support/faqs/publisher-monetization.md
8 |
9 | faq:
10 | - title@: Comment une plate-forme pour les consommateurs peut-elle s'impliquer dans le projet AMP ?
11 | answer@: |
12 | Le projet est ouvert à tous. Ses membres actuels sont très enthousiastes à l'idée de collaborer sur cette initiative avec les plates-formes pour les consommateurs. Google ouvre gratuitement son cache à toute personne, y compris les plates-formes pour les consommateurs qui souhaiteraient afficher du contenu AMP dans leur environnement. Vous pouvez nous contacter via [GitHub](https://github.com/ampproject/amphtml/issues/new). Nous répondrons à vos questions le plus rapidement possible.
13 | - title@: Comment un annonceur ou un fournisseur de technologies peut-il participer au projet AMP ?
14 | answer@: |
15 | Veuillez consulter les [consignes en matière de contribution](https://github.com/ampproject/amphtml/tree/master/3p#ads) et nous contacter via [GitHub](https://github.com/ampproject/amphtml/issues/new).
16 | ---
17 |
```
--------------------------------------------------------------------------------
/content/contribute/governance.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Open Source Governance
3 | $order: 4
4 | ---
5 |
6 |
7 | The AMP Project's chief and primary concern is with the development of AMP HTML, an open-source runtime shared by many producers and consumers of (mostly) static web content. Its governance model thus reflects only the need to steer engineering direction, and not any other activities, which would be out of scope.
8 |
9 | Our governance model is as follows:
10 |
11 | * There is a single Tech Lead, who will have the final say on all decisions regarding technical direction.
12 | * The Tech Lead directs the Core Committers, whose members include the Tech Lead and those who have been appointed by the Tech Lead as Core Committers.
13 | * In the event the Tech Lead is unable to perform his or her duties, or abdicates, the Core Committers can select a new Tech Lead from amongst themselves.
14 | * In the event there are no Core Committers, Google Inc. will appoint one.
15 |
16 | ## Core Committers:
17 |
18 | * Tech Lead: Malte Ubl (@cramforce)
19 | * Dima Voytenko (@dvoytenko)
20 | * Erwin Mombay (@erwinmombay)
21 | * Justin Ridgewell (@jridgewell)
22 | * Mohammad Khatib (@mkhatib)
23 | * Sriram Krishnan (@sriramkrish85)
24 | * Yuxi Chen (@muxin)
25 | * Yuxuan Zhou (@zhouyx)
26 |
```
--------------------------------------------------------------------------------
/views/base.html:
--------------------------------------------------------------------------------
```html
1 | <!DOCTYPE html>
2 | <html ⚡ {% if doc.locale.is_rtl %} dir="rtl" lang="ar"{% else %}lang="{{doc.locale}}"{% endif %}>
3 | {% include "/views/partials/head.html" %}
4 |
5 | <body class="{{doc.class}}{% if doc.locale.is_rtl %} rtl{% endif %}">
6 |
7 | <amp-analytics type="googleanalytics" id="analytics-ga">
8 | <script type="application/json">
9 | {
10 | "vars": {
11 | "account": "UA-67833617-1"
12 | },
13 | "triggers": {
14 | "trackPageview": {
15 | "on": "visible",
16 | "request": "pageview"
17 | }
18 | }
19 | }
20 | </script>
21 | </amp-analytics>
22 |
23 | {% set menu_doc = g.doc('/content/includes/menu.yaml', locale=doc.locale) %}
24 | {% with menu = menu_doc.fields.menu %}
25 | {% include "/views/partials/sidebar.html" %}
26 | {% include "/views/partials/header.html" %}
27 | {% endwith %}
28 |
29 | {% macro callout(title, type='note') -%}
30 | <aside class="{{ type }}">
31 | <strong>{{ title }} — </strong>
32 | <span>{{ caller() }}</span>
33 | </aside>
34 | {%- endmacro %}
35 |
36 | <div class="wrap">
37 | {% block main %}
38 | <div class="content">
39 |
40 | {{doc.html|render|safe}}
41 |
42 | {% include "/views/partials/footer.html" %}
43 | </div>
44 | {% endblock %}
45 | </div>
46 |
47 | </body>
48 | </html>
49 |
```
--------------------------------------------------------------------------------
/assets/img/cheveron-down.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="12px" height="8px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 | <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
4 | <title>open</title>
5 | <desc>Created with Sketch.</desc>
6 | <defs></defs>
7 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 | <g id="AMP---Mobile" transform="translate(-330.000000, -1227.000000)">
9 | <g id="Benifits" transform="translate(0.000000, 470.000000)">
10 | <g id="openness" transform="translate(0.000000, 728.000000)">
11 | <g id="open" transform="translate(336.000000, 33.000000) rotate(-180.000000) translate(-336.000000, -33.000000) translate(324.000000, 21.000000)">
12 | <polygon id="Shape" fill="#666666" points="12 8 6 14 7.4 15.4 12 10.8 16.6 15.4 18 14"></polygon>
13 | <rect id="bounds" x="-5.68434189e-14" y="-5.68434189e-14" width="24" height="24"></rect>
14 | </g>
15 | </g>
16 | </g>
17 | </g>
18 | </g>
19 | </svg>
```
--------------------------------------------------------------------------------
/assets/img/close.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3 | <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
4 | <title>Line</title>
5 | <desc>Created with Sketch.</desc>
6 | <defs></defs>
7 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8 | <g id="AMP---video---in-line" sketch:type="MSArtboardGroup" transform="translate(-1178.000000, -29.000000)" stroke="#FFFFFF" stroke-linecap="square">
9 | <path d="M1184.26382,35 L1179.36809,30.1042708 L1179,29.7361805 L1179.73618,29 L1180.10427,29.3680903 L1185,34.2638195 L1189.89573,29.3680903 L1190.26382,29 L1191,29.7361805 L1190.63191,30.1042708 L1185.73618,35 L1190.63191,39.8957292 L1191,40.2638195 L1190.26382,41 L1189.89573,40.6319097 L1185,35.7361805 L1180.10427,40.6319097 L1179.73618,41 L1179,40.2638195 L1179.36809,39.8957292 L1184.26382,35 Z" id="Line" sketch:type="MSShapeGroup"></path>
10 | </g>
11 | </g>
12 | </svg>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_about-how.scss:
--------------------------------------------------------------------------------
```scss
1 | .about-how {
2 | .hero {
3 | margin: 100px auto;
4 | max-width: 500px;
5 | text-align: center;
6 | }
7 |
8 | .video {
9 | margin: 0 auto;
10 | max-width: 800px;
11 | padding: 0 30px;
12 | position: relative;
13 | z-index: 1;
14 | }
15 |
16 | .points {
17 | background: white;
18 | margin: -350px 0 200px;
19 | padding-top: 450px;
20 |
21 | &::before, &::after {
22 | content: '';
23 | position: absolute;
24 | }
25 |
26 | &::before {
27 | background: url(/static/img/latest/line_hero_back.svg) center/contain no-repeat;
28 | height: 285px;
29 | right: -60px;
30 | top: -110px;
31 | width: 285px;
32 | z-index: 1;
33 | }
34 |
35 | &::after {
36 | background: url(/static/img/latest/line_hero_front.svg) center/contain no-repeat;
37 | height: 285px;
38 | right: -80px;
39 | top: -60px;
40 | width: 285px;
41 | z-index: -1;
42 | }
43 | }
44 |
45 | @include max-screen($tablet-portrait-breakpoint) {
46 | .wrap {
47 | &::after {
48 | display: none;
49 | }
50 |
51 | &::before {
52 | top: -750px;
53 | }
54 | }
55 |
56 | .hero {
57 | margin-bottom: 30px;
58 | }
59 |
60 | .points {
61 | background: none;
62 | margin: 30px 0;
63 | padding-top: 0;
64 |
65 | &::before, &::after {
66 | display: none;
67 | }
68 | }
69 | }
70 | }
```
--------------------------------------------------------------------------------
/assets/img/blog-icon.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="16px" height="15px" viewBox="0 0 16 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
3 | <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
4 | <title>Page 1</title>
5 | <desc>Created with Sketch.</desc>
6 | <defs></defs>
7 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
8 | <g id="AMP---3" sketch:type="MSArtboardGroup" transform="translate(-161.000000, -1403.000000)" fill="#9B9B9B">
9 | <g id="blogGroup-9" sketch:type="MSLayerGroup" transform="translate(138.000000, 1312.000000)">
10 | <g id="Blog-Post" transform="translate(0.000000, 58.000000)" sketch:type="MSShapeGroup">
11 | <path d="M23,35.001 L39,35.001 L39,33 L23,33 L23,35.001 Z M23,39.001 L39,39.001 L39,37.001 L23,37.001 L23,39.001 Z M23,43.001 L39,43.001 L39,41 L23,41 L23,43.001 Z M23,47.001 L33,47.001 L33,45.001 L23,45.001 L23,47.001 Z" id="Page-1"></path>
12 | </g>
13 | </g>
14 | </g>
15 | </g>
16 | </svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Prepara tu página para la detección y la distribución
3 | ---
4 |
5 | En algunos casos, podrías tener una versión AMP y una versión no AMP de la misma página; por ejemplo, un artículo informativo. Considera lo siguiente: Si la Búsqueda de Google encuentra la versión no AMP de esa página, *¿cómo sabe que existe una versión AMP?*
6 |
7 | ## Vinculación de páginas con<link>
8 |
9 | Para resolver este problema, agregamos información sobre la página AMP a la página no AMP y viceversa en forma de etiquetas `<link>` en el `<head>`.
10 |
11 | Agrega lo siguiente a la página no AMP:
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.ejemplo.com/url/al/documento/amp.html">
15 | [/sourcecode]
16 |
17 | Y esto a la página AMP
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.ejemplo.com/url/al/documento/completo.html">
21 | [/sourcecode]
22 |
23 | ## ¿Qué sucede si tengo una sola página?
24 |
25 | Si solo tienes una página y es AMP, debes agregarle el vínculo canónico. Este luego simplemente apuntará a sí mismo.
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.ejemplo.com/url/al/documento/amp.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/es/docs/get_started/create/publish.html">Continuar con el paso 6</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/login_requiring/logout.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Logout
3 | $order: 2
4 | ---
5 |
6 | Similar to the login button, the presence of the logout button is conditionally dependent on the state of the `amp-access` component:
7 |
8 | [sourcecode:html]
9 | <button amp-access="loggedIn" amp-access-hide tabindex="0" on="tap:amp-access.login-sign-out" class="button-primary comment-button">Logout</button>
10 | [/sourcecode]
11 |
12 | When you click the Logout button, you are directed to the URL that you specified in the `amp-access` JSON configuration, as part of the login object:
13 |
14 | [sourcecode:json]
15 | {
16 | "login": {
17 | "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
18 | "sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
19 | }
20 | }
21 | [/sourcecode]
22 |
23 | Similar to the login, when the AMPByExample server receives a logout request, it uses the return URL query parameter automatically added by the AMP library and redirects to it, adding `#success=true`. By this time, you are back on the initial page; the AMPByExample cookie previously created for the login page (called `ABE_LOGGED_IN`) would be cleared at this point.
24 |
25 | <a class="go-button button" href="/docs/get_started/login_requiring/summary.html">Continue to Step 4</a>
26 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Sayfanızı Keşif ve Dağıtım için Hazırlayın
3 | ---
4 |
5 | Bazı durumlarda, aynı sayfanın hem AMP olmayan hem de AMP sürümüne sahip olmak isteyebilirsiniz; örneğin, bir haber makalesi. Bunu düşünün: Google Arama bu sayfanın AMP olmayan bir sürümünü bulursa, *bir AMP versiyonu olduğunu nasıl anlar*?
6 |
7 | ## <bağlantılı sayfaları bağlama>
8 |
9 | Bu sorunu çözmek için, AMP olmayan sayfaya AMP sayfası ile bilgileri, AMP sayfasına ise AMP olmayan sayfa bilgilerini `<head>` içindeki `<link>` etiketi şeklinde ekleriz.
10 |
11 | AMP olmayan sayfaya aşağıdakileri ekleyin:
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
15 | [/sourcecode]
16 |
17 | Ve AMP sayfasına bunu ekleyin
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
21 | [/sourcecode]
22 |
23 | ## Sadece tek bir sayfam varsa ne olur?
24 |
25 | Sadece tek bir sayfanız var ve bu sayfa bir AMP sayfasıysa, yine de standart bağlantıyı eklemeniz gerekir, bu bağlantı daha sonra yalnızca kendini gösterecektir:
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/tr/docs/get_started/create/publish.html">Adım 6 ile devam edin</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/prepare_for_discovery@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Preparar sua página para descoberta e distribuição
3 | ---
4 |
5 | Em alguns casos, você pode querer uma versão não AMP e uma versão AMP da mesma página, por exemplo, no caso de um artigo de notícia. Considere o seguinte: se a Pesquisa do Google encontrar uma versão não AMP dessa página, *como saberá que há uma versão AMP dela*?
6 |
7 | ## Páginas vinculadas com um link<>
8 |
9 | Para solucionar esse problema, adicionamos informações sobre a página AMP na página não AMP e vice-versa, na forma de tags de `<link>` no elemento `<head>`.
10 |
11 | Adicione o seguinte à página não AMP:
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
15 | [/sourcecode]
16 |
17 | Adicione isto à página AMP
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
21 | [/sourcecode]
22 |
23 | ## E se eu só tiver uma página?
24 |
25 | Se você só tiver uma página, e essa página for AMP, ainda assim deverá adicionar o link canônico a ela, mas ele simplesmente apontará para a própria página:
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/pt_br/docs/get_started/create/publish.html">Continuar para a etapa 6</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/presentation_layout.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Modify Presentation and Layout
3 | $order: 2
4 | ---
5 |
6 | ## Modify the presentation
7 |
8 | AMPs are web pages; any styling to the page and its elements is done using common CSS properties. Style elements using class or element selectors in an inline stylesheet in the `<head>`, called `<style amp-custom>`:
9 |
10 | [sourcecode:html]
11 | <style amp-custom>
12 | /* any custom style goes here */
13 | body {
14 | background-color: white;
15 | }
16 | amp-img {
17 | background-color: gray;
18 | border: 1px solid black;
19 | }
20 | </style>
21 | [/sourcecode]
22 |
23 | Every AMP page can only have a single embedded stylesheet, and there are certain selectors you’re not allowed to use. [Learn all about styling](/docs/guides/responsive/style_pages.html).
24 |
25 | ## Control the layout
26 |
27 | AMP follows stricter rules when laying out elements on the page. On a normal HTML page, you almost exclusively use CSS to lay out elements. But for performance reasons, AMP requires all elements to have an explicit size set from the get-go.
28 |
29 | Learn all about how AMP renders and layouts a page and how you can modify the layout in [How to Control Layout](/docs/guides/responsive/control_layout.html).
30 |
31 | <a class="button go-button" href="/docs/get_started/create/preview_and_validate.html">Continue to Step 4</a>
32 |
```
--------------------------------------------------------------------------------
/assets/sass/_sprite_generated.scss:
--------------------------------------------------------------------------------
```scss
1 | $icons: (
2 | sprite: (width: 99px, height: 74px, svgPath: '/static/img/sprite.svg'),
3 | carat: (width: 15.53px, height: 8.3px, backgroundX: -35.36px, backgroundY: -54.2px),
4 | carat-down: (width: 16px, height: 8.3px, backgroundX: -60px, backgroundY: -43.66px),
5 | caret-right: (width: 6.12px, height: 11.88px, backgroundX: -84px, backgroundY: -14.93px),
6 | close: (width: 15.71px, height: 15.71px, backgroundX: -19.65px, backgroundY: -54.2px),
7 | lang-icon: (width: 24px, height: 24px, backgroundX: -60px, backgroundY: 0px),
8 | logo-blue-standalone: (width: 30px, height: 30px, backgroundX: -30px, backgroundY: 0px),
9 | return: (width: 6.05px, height: 10.71px, backgroundX: -90.12px, backgroundY: -14.93px),
10 | search: (width: 24.6px, height: 24.2px, backgroundX: 0px, backgroundY: -30px),
11 | share: (width: 19.65px, height: 19.04px, backgroundX: 0px, backgroundY: -54.2px),
12 | share-close: (width: 14.93px, height: 14.93px, backgroundX: -84px, backgroundY: 0px),
13 | twitter: (width: 22.93px, height: 19.66px, backgroundX: -60px, backgroundY: -24px),
14 | video-play: (width: 30px, height: 30px, backgroundX: 0px, backgroundY: 0px),
15 | wordpress: (width: 24.03px, height: 24.03px, backgroundX: -24.6px, backgroundY: -30px),
16 | );
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/preview_and_validate@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Visualizar e validar
3 | ---
4 |
5 | Visualize a página AMP exatamente como visualizaria qualquer outro site HTML estático. Não é necessário uma etapa de compilação ou de pré-processamento. Uma das possibilidades:
6 |
7 | - **Abra a página diretamente no navegador a partir do sistema de arquivos** (certos elementos podem não funcionar devido a uma falha de XMLHttpRequests)
8 | - **Use um servidor da Web local, como o Apache 2 ou Nginx**.
9 | *(Dica: Para um servidor da Web rápido, execute `python -m SimpleHTTPServer`.)*
10 |
11 | Depois, certifique-se de que sua página AMP** seja realmente válida para AMP**, caso contrário, ela não será descoberta e distribuída por plataformas de terceiros como a Pesquisa do Google. Para validar:
12 |
13 | 1. Abra sua página no navegador.
14 | 1. Adicione "`#development=1`“ ao URL, por exemplo,`http://localhost:8000/released.amp.html#development=1`.
15 | 1. Abra o [console Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) e verifique se há erros de validação.
16 |
17 | [Saiba mais sobre validação](/docs/guides/validate.html) e o que fazer quando ocorrerem erros.
18 |
19 | <a class="go-button button" href="/pt_br/docs/get_started/create/prepare_for_discovery.html">Continuar para a etapa 5</a>
20 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Przygotowanie strony do wykrywania i rozpowszechniania
3 | ---
4 |
5 | Czasami dana strona, na przykład artykuł wiadomości, potrzebna jest w wersji AMP i tradycyjnej. Rozważmy następujący przypadek: Jeśli usługa Szukaj w Google znajdzie wersję tradycyjną tej strony, *skąd będzie wiedziała, że istnieje również wersja AMP tej strony*?
6 |
7 | ## Powiązanie stron za pomocą elementu <link>
8 |
9 | Aby rozwiązać ten problem, do każdej wersji strony dodaliśmy informacje o drugiej wersji, używając znaczników `<link>` w sekcji `<head>`.
10 |
11 | Dodaj następujący wpis do strony w wersji tradycyjnej:
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
15 | [/sourcecode]
16 |
17 | A ten do strony AMP:
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
21 | [/sourcecode]
22 |
23 | ## A co, jeśli jest tylko jedna strona?
24 |
25 | Jeśli jest tylko jedna wersja strony i jest to wersja AMP, nadal konieczne jest dodanie do niej linku kanonicznego, które w takim wypadku wskaże tę samą stronę:
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/pl/docs/get_started/create/publish.html">Przejdź do kroku 6</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Prévisualiser et valider
3 | ---
4 |
5 | Prévisualisez la page AMP comme tout autre site HTML statique. Aucune étape de création ni aucun prétraitement ne sont requis. Soit :
6 |
7 | - **Ouvrez la page directement dans le navigateur à partir du système de fichiers** (certains éléments peuvent ne pas fonctionner en raison de l'échec de XMLHttpRequests). Soit :
8 | - **Utilisez un serveur Web local, tel qu'Apache 2 ou Nginx**.
9 | *(Conseil: Pour un serveur Web rapide, exécutez `python -m SimpleHTTPServer`.)*
10 |
11 | Ensuite, vérifiez que votre page AMP **est une page AMP valide**. Dans le cas contraire, elle ne pourra pas être détectée ni distribuée par des plateforme tierces telles que Google Search. Pour valider :
12 |
13 | 1. Ouvrez votre page dans votre navigateur.
14 | 1. Ajoutez « `#development=1` » à l'URL, par exemple, `http://localhost:8000/released.amp.html#development=1`.
15 | 1. Ouvrez la [console Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) et vérifiez les erreurs de validation.
16 |
17 | [En savoir plus sur la validation](/docs/guides/validate.html) et la procédure à suivre en cas d'erreurs.
18 |
19 | <a class="go-button button" href="/fr/docs/get_started/create/prepare_for_discovery.html">Continuer à l'Étape 5</a>
20 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/prepare_for_discovery.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Prepare Your Page for Discovery and Distribution
3 | $order: 4
4 | ---
5 |
6 | In some cases, you might want to have both a non-AMP and an AMP version of the same page, for example, a news article. Consider this: If Google Search finds the non-AMP version of that page, *how does it know there’s a "paired" AMP version of it*?
7 |
8 | ## Linking pages with `<link>`
9 |
10 | In order to establish that a non-AMP page and an AMP page should be treated as being "paired" together, we add information about the AMP page to the non-AMP page and vice versa, in the form of `<link>` tags in the `<head>`.
11 |
12 | Add the following to the non-AMP page:
13 |
14 | [sourcecode:html]
15 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
16 | [/sourcecode]
17 |
18 | And this to the AMP page
19 |
20 | [sourcecode:html]
21 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
22 | [/sourcecode]
23 |
24 | ## What if I only have one page?
25 |
26 | If you only have one page, and that page is an AMP page, you must still add the canonical link to it, which will then simply point to itself:
27 |
28 | [sourcecode:html]
29 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
30 | [/sourcecode]
31 |
32 | <a class="go-button button" href="/docs/get_started/create/publish.html">Continue to Step 6</a>
```
--------------------------------------------------------------------------------
/views/design-principles.html:
--------------------------------------------------------------------------------
```html
1 | {% extends "/views/base.html" %}
2 |
3 | {% set navmarkup %}
4 | {% include "/views/partials/breadcrumb-nav.html" %}
5 | {% endset %}
6 |
7 | {% block main %}
8 | {{ navmarkup|safe }}
9 |
10 | <div class="container xl">
11 | <div class="title">
12 | <h1>{{_(doc.title)}}</h1>
13 | <p class="subtitle">{{_(doc.subtitle)}}</p>
14 | </div>
15 |
16 | <div class="principles">
17 | <div class="principles-col">
18 | {% for principle in doc.principles %}
19 | <div class="principle">
20 | <div class="image">
21 | <amp-img
22 | noloading
23 | width=150
24 | height=150
25 | layout=responsive
26 | src="/static/img/about/design-principles/{{principle.icon}}">
27 | </amp-img>
28 | </div>
29 | <div class="text">
30 | <h3>{{_(principle.title)}}</h3>
31 | <p>{{_(principle.description)|markdown|safe}}</p>
32 | </div>
33 | </div>
34 | {% if loop.index0 == 3 %}
35 | </div>
36 | <div class="principles-col">
37 | {% endif %}
38 | {% endfor %}
39 | </div>
40 | </div>
41 | </div>
42 |
43 | {% with cta = doc.cta %}
44 | {% include "/views/partials/footer-cta.html" %}
45 | {% endwith %}
46 | {% include "/views/partials/footer.html" %}
47 | {% endblock %}
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Pratinjau dan Validasi
3 | ---
4 |
5 | Pratinjau halaman AMP seperti Anda ingin mem-pratinjau situs HTML statis lainnya. Tidak ada langkah pembangunan atau prapemrosesan yang diperlukan. Gunakan salah satu cara berikut:
6 |
7 | - **Membukanya secara langsung dalam browser dari sistem file** (elemen tertentu mungkin tidak berfungsi karena gagalnya XMLHttpRequests).
8 | - **Menggunakan server web lokal seperti Apache 2 atau Nginx**.
9 | *(Tip: Untuk server web yang cepat, jalankan `python -m SimpleHTTPServer`.)*
10 |
11 | Berikutnya, pastikan bahwa halaman AMP Anda **benar-benar merupakan halaman AMP yang valid**, jika tidak maka halaman tidak akan ditemukan dan didistribusikan oleh platform pihak ketiga seperti Google Penelusuran. Untuk memvalidasi:
12 |
13 | 1. Buka halaman Anda di browser.
14 | 1. Tambahkan "`#development=1`" ke URL, misalnya, `http://localhost:8000/released.amp.html#development=1`.
15 | 1. Buka [konsol Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/debug/console/) dan periksa kesalahan validasi.
16 |
17 | [Ketahui selengkapnya mengenai validasi](/docs/guides/validate.html), dan tindakan yang harus Anda lakukan jika menjumpai kesalahan.
18 |
19 | <a class="go-button button" href="/id/docs/get_started/create/prepare_for_discovery.html">Lanjutkan ke Langkah 5</a>
20 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Anteprima e convalida
3 | ---
4 |
5 | Visualizza l’anteprima della pagina AMP esattamente come faresti con qualsiasi altro sito HTML statico. Non sono necessarie fasi di build o di pre-elaborazione. Puoi scegliere tra:
6 |
7 | - **Aprire la pagina direttamente nel browser dal file system** (è possibile che alcuni elementi non funzionino a causa di un errore XMLHttpRequests).
8 | - **Usare un server web locale come Apache 2 o Nginx**.
9 | *(Suggerimento. Per attivare rapidamente un server web esegui il comando `python -m SimpleHTTPServer`.)*
10 |
11 | Successivamente assicurati che la pagina AMP **sia effettivamente valida**, in caso contrario non sarà individuata e distribuita da piattaforme di terzi come Ricerca Google. Per la convalida:
12 |
13 | 1. Apri la pagina nel tuo browser.
14 | 1. Aggiungi "`#development=1`" all’URL, ad esempio, `http://localhost:8000/released.amp.html#development=1`.
15 | 1. Apri la [Chrome DevTools console](https://developers.google.com/web/tools/chrome-devtools/debug/console/) e verifica se sono presenti errori di convalida.
16 |
17 | [Consulta ulteriori informazioni sulla convalida](/docs/guides/validate.html) e scopri cosa fare se vengono rilevati errori.
18 |
19 | <a class="go-button button" href="/it/docs/get_started/create/prepare_for_discovery.html">Vai al Passaggio 5</a>
20 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Preparazione della pagina per il rilevamento e la distribuzione
3 | ---
4 |
5 | In alcuni casi potresti aver necessità di una versione AMP e non AMP della stessa pagina, ad esempio per un comunicato stampa. Considera quanto segue: Se Ricerca Google trova la versione non AMP di quella pagina, *come fa a sapere che ne esiste anche una versione AMP*?
6 |
7 | ## Collegamente delle pagine con <link>
8 |
9 | Per risolvere questo problema aggiungiamo delle informazioni sulla pagina AMP alla pagina non AMP e viceversa, sotto forma di tag `<link>` in `<head>`.
10 |
11 | Aggiungi quanto segue nella pagina non AMP:
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
15 | [/sourcecode]
16 |
17 | Aggiungi questo nella pagina AMP:
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
21 | [/sourcecode]
22 |
23 | ## Cosa succede in caso di pagine in un solo formato?
24 |
25 | Se la tua pagina è in un solo formato e stai usando una pagina AMP, devi comunque aggiungervi il link tradizionale, che a questo punto rimanda semplicemente a sé stesso:
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/it/docs/get_started/create/publish.html">Vai al Passaggio 6</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Préparer votre page pour la détection et la distribution
3 | ---
4 |
5 | Dans certains cas, vous pouvez avoir besoin de deux versions (non-AMP et AMP) de la même page. Par exemple, pour un article d'actualités. Supposons ce qui suit : Si Google Search trouve la version non-AMP de cette page, *comment sait-il qu'il en existe également une version AMP *?
6 |
7 | ## Relier les pages avec <link>
8 |
9 | Pour résoudre ce problème, nous ajoutons des informations sur la page AMP dans la page non-AMP et vice versa, sous forme de balises `<link>` dans `<head>`.
10 |
11 | Ajoutez ce qui suit sur la page non-AMP :
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
15 | [/sourcecode]
16 |
17 | Et ce qui suit sur la page AMP
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
21 | [/sourcecode]
22 |
23 | ## Que se passe-t-il si je n'ai qu'une seule page ?
24 |
25 | Si vous n'avez qu'une seule page, et que cette page est une page AMP, vous devez tout de même lui ajouter le lien canonique, qui dans ce cas pointe simplement vers elle-même :
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/fr/docs/get_started/create/publish.html">Continuer à l'Étape 6</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Versión preliminar y validación
3 | ---
4 |
5 | Accede a la versión preliminar de la página AMP como lo harías con cualquier otro sitio HTML estático. No hay pasos de compilación ni procesamientos previos obligatorios. Tienes una de las siguientes opciones:
6 |
7 | - **Abrirla directamente en el navegador desde el sistema de archivos** (ciertos elementos podrían no funcionar debido a errores en XMLHttpRequests).
8 | - **Usar un servidor web local como Apache 2 o Nginx**.
9 | *(Sugerencia: Para acceder a un servidor web rápido, ejecuta `python -m SimpleHTTPServer`)*.
10 |
11 | A continuación, asegúrate de que tu página AMP **sea válida**; de lo contrario, no podrá detectarse ni distribuirse mediante plataformas de terceros como la Búsqueda de Google. Para la validación:
12 |
13 | 1. Abre tu página en el navegador.
14 | 1. Agrega “`#development=1`” a la URL; por ejemplo, `http://localhost:8000/released.amp.html#development=1`.
15 | 1. Abre la [consola DevTools de Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) y busca errores de validación.
16 |
17 | [Obtén más información acerca de la validación](/docs/guides/validate.html) y de lo que debes hacer cuando encuentres errores.
18 |
19 | <a class="go-button button" href="/es/docs/get_started/create/prepare_for_discovery.html">Continuar con el paso 5</a>
20 |
```
--------------------------------------------------------------------------------
/assets/img/icons/any.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2 | <svg width="62px" height="62px" viewBox="0 0 62 62" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 | <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
4 | <title>AMP-Brand-Blue-Icon</title>
5 | <desc>Created with Sketch.</desc>
6 | <defs></defs>
7 | <g id="amp-logo-internal-site" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 | <g id="AMP-Brand-Blue-Icon" fill="#0379C4">
9 | <path d="M41.6288667,28.1614333 L28.6243667,49.8035667 L26.2683667,49.8035667 L28.5975,35.7016667 L21.3838,35.7109667 C21.3838,35.7109667 21.3156,35.7130333 21.2835667,35.7130333 C20.6336,35.7130333 20.1076333,35.1870667 20.1076333,34.5371 C20.1076333,34.2581 20.367,33.7858667 20.367,33.7858667 L33.3291333,12.1695667 L35.7244,12.1799 L33.3363667,26.3035 L40.5872667,26.2942 C40.5872667,26.2942 40.6647667,26.2931667 40.7019667,26.2931667 C41.3519333,26.2931667 41.8779,26.8191333 41.8779,27.4691 C41.8779,27.7326 41.7745667,27.9640667 41.6278333,28.1604 L41.6288667,28.1614333 Z M31,0 C13.8787,0 0,13.8797333 0,31 C0,48.1213 13.8787,62 31,62 C48.1202667,62 62,48.1213 62,31 C62,13.8797333 48.1202667,0 31,0 L31,0 Z" id="Fill-1"></path>
10 | </g>
11 | </g>
12 | </svg>
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Seite für die Auffindbarkeit und Bereitstellung vorbereiten
3 | ---
4 |
5 | Vielleicht gibt es bei Ihnen in manchen Fällen von der gleichen Seite, zum Beispiel einem Nachrichtenartikel, sowohl eine Nicht-AMP-Version als auch eine AMP-Version. Wenn die Google-Suche nun die Nicht-AMP-Version der Seite findet, *woher weiß sie, dass es auch noch eine AMP-Version gibt?*
6 |
7 | ## Seiten mit `<link>` verknüpfen
8 |
9 | Um dieses Problem zu lösen, fügen wir Informationen zur AMP-Seite auf der Nicht-AMP-Seite ein und umgekehrt. Dies geschieht in Form von `<link>`-Tags im `<head>`-Element.
10 |
11 | Fügen Sie Ihrer Nicht-AMP-Seite den folgenden Code hinzu:
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
15 | [/sourcecode]
16 |
17 | Und diesen der AMP-Seite:
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
21 | [/sourcecode]
22 |
23 | ## Was ist, wenn ich nur eine Seite habe?
24 |
25 | Wenn Sie nur eine Seite haben und es sich dabei um eine AMP-Seite handelt, müssen Sie trotzdem den kanonischen Link hinzufügen. Dieser verweist dann einfach auf sich selbst:
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/de/docs/get_started/create/publish.html">Weiter mit Schritt 6</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Menyiapkan Halaman Anda untuk Pencarian dan Distribusi
3 | ---
4 |
5 | Dalam beberapa kasus, Anda mungkin menginginkan versi non-AMP dan AMP dari halaman yang sama, misalnya, artikel berita. Pertimbangkan ini: Jika Google Penelusuran menemukan versi non-AMP dari halaman itu, *bagaimana Google Penelusuran mengetahui bahwa ada versi AMP dari halaman itu*?
6 |
7 | ## Menautkan halaman dengan <link>
8 |
9 | Untuk menyelesaikan masalah ini, kami menambahkan informasi tentang halaman AMP ke halaman non-AMP dan sebaliknya, dalam bentuk tag `<link>` dalam `<head>`.
10 |
11 | Tambahkan yang berikut ini ke halaman non-AMP:
12 |
13 | [sourcecode:html]
14 | <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
15 | [/sourcecode]
16 |
17 | Tambahkan ini ke halaman AMP
18 |
19 | [sourcecode:html]
20 | <link rel="canonical" href="https://www.example.com/url/to/full/document.html">
21 | [/sourcecode]
22 |
23 | ## Bagaimana jika saya memiliki satu halaman saja?
24 |
25 | Jika Anda hanya menautkan satu halaman, dan halaman itu adalah halaman AMP, Anda masih harus menambahkan tautan kanonis ke halaman itu, yang kemudian hanya akan menunjuk pada halaman itu sendiri:
26 |
27 | [sourcecode:html]
28 | <link rel="canonical" href="https://www.example.com/url/to/amp/document.html">
29 | [/sourcecode]
30 |
31 | <a class="go-button button" href="/id/docs/get_started/create/publish.html">Lanjutkan ke Langkah 6</a>
32 |
```
--------------------------------------------------------------------------------
/content/docs/guides/author_develop/responsive_amp/custom_fonts.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Custom fonts
3 | $order: 5
4 | toc: true
5 | ---
6 | [TOC]
7 |
8 |
9 | AMP pages can’t include external stylesheets, with the exception of custom fonts.
10 | You can embed custom fonts into your page in two ways:
11 |
12 | 1. Through a `<link>` tag (white-listed font providers only)
13 | 2. Via `@font-face` (no restrictions, all fonts allowed)
14 |
15 | ### 1. Using `<link>`
16 |
17 | Use a `<link>` tag (usually in the head of your page), like so:
18 |
19 | [sourcecode:html]
20 | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
21 | [/sourcecode]
22 |
23 | The following origins are whitelisted and allowed for font serving via link tags:
24 |
25 | * Typography.com: **https://cloud.typography.com**
26 | * Fonts.com: **https://fast.fonts.net**
27 | * Google Fonts: **https://fonts.googleapis.com**
28 | * Font Awesome: **https://maxcdn.bootstrapcdn.com**
29 |
30 | ### 2. Using `@font-face`
31 |
32 | Alternatively, you can use [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
33 | within your AMP stylesheet:
34 |
35 | [sourcecode:html]
36 | <style amp-custom>
37 | @font-face {
38 | font-family: "Bitstream Vera Serif Bold";
39 | src: url("https://somedomain.org/VeraSeBd.ttf");
40 | }
41 |
42 | body {
43 | font-family: "Bitstream Vera Serif Bold", serif;
44 | }
45 | </style>
46 | [/sourcecode]
47 |
48 | {% call callout('Note', type='note') %}
49 | Fonts included via `@font-face` must be fetched
50 | via the HTTP or HTTPS scheme.
51 | {% endcall %}
52 |
53 |
54 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Memodifikasi Presentasi dan Layout
3 | ---
4 |
5 | ## Memodifikasi presentasi
6 |
7 | AMP adalah laman web, setiap penerapan gaya pada halaman dan elemen-elemennya dilakukan menggunakan properti CSS umum. Elemen gaya menggunakan pemilih kelas atau elemen dalam stylesheet sisipan dalam `<head>` yang disebut dengan `<style amp-custom>`:
8 |
9 | [sourcecode:html]
10 | <style amp-custom>
11 | /* any custom style goes here */
12 | body {
13 | background-color: white;
14 | }
15 | amp-img {
16 | background-color: gray;
17 | border: 1px solid black;
18 | }
19 | </style>
20 | [/sourcecode]
21 |
22 | Setiap halaman AMP hanya bisa memiliki satu sylesheet yang disematkan, dan ada pemilih tertentu yang tidak bisa Anda gunakan. [Ketahui semua tentang penggayaan](/docs/guides/responsive/style_pages.html).
23 |
24 | ## Mengontrol layout
25 |
26 | AMP mengikuti aturan yang lebih ketat saat melayout elemen pada halaman. Pada halaman HTML biasa, Anda hampir pasti menggunakan CSS secara eksklusif untuk melayout elemen. Namun karena alasan kinerja, AMP mewajibkan semua elemen untuk memiliki set ukuran eksplisit dari get-go.
27 |
28 | Ketahui tentang cara AMP merender dan melayout halaman dan cara Anda bisa memodifikasi layout dalam [Cara Mengontrol Layout](/docs/guides/responsive/control_layout.html).
29 |
30 | <a class="go-button button" href="/id/docs/get_started/create/preview_and_validate.html">Lanjutkan ke Langkah 4</a>
31 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: In der Vorschau ansehen und validieren
3 | ---
4 |
5 | Sie können sich Ihre AMP-Seite genau wie jede andere statische HTML-Seite in der Vorschau ansehen. Dazu ist weder ein Build-Schritt noch eine Vorverarbeitung nötig. Sie haben folgende Möglichkeiten:
6 |
7 | - **Direkt im Browser über das Dateisystem öffnen.** Bestimmte Elemente funktionieren aufgrund von Fehlern bei XMLHttpRequests eventuell nicht.
8 | - **Lokalen Webserver wie Apache 2 oder Nginx verwenden.**
9 | *Tipp: Einen schnellen Webserver erhalten Sie durch Ausführen von `python -m SimpleHTTPServer`.*
10 |
11 | Als Nächstes müssen Sie sich vergewissern, dass **Ihre AMP-Seite gültig ist**, da sie sonst von Drittanbieter-Plattformen wie der Google-Suche nicht gefunden und angezeigt werden kann. So validieren Sie Ihre AMP-Seite:
12 |
13 | 1. Öffnen Sie die Seite im Browser.
14 | 1. Fügen Sie "`#development=1`" an die URL an, also z. B. `http://localhost:8000/released.amp.html#development=1`.
15 | 1. Öffnen Sie die [Chrome DevTools-Konsole](https://developers.google.com/web/tools/chrome-devtools/debug/console/) und prüfen Sie, ob Validierungsfehler vorliegen.
16 | </ol>
17 |
18 | [Lesen Sie hier mehr über die Validierung](/docs/guides/validate.html) und was Sie bei Fehlern tun können.
19 |
20 | <a class="go-button button" href="/de/docs/get_started/create/prepare_for_discovery.html">Weiter mit Schritt 5</a>
21 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Modificar la presentación y el diseño
3 | ---
4 |
5 | ## Modificar la presentación
6 |
7 | Las AMP son páginas web; el diseño de estas y de sus elementos se realiza a través de propiedades CSS comunes. Da estilo a los elementos con selectores de clase o elemento en una hoja de estilo en línea en el `<head>` llamada `<style amp-custom>`:
8 |
9 | [sourcecode:html]
10 | <style amp-custom>
11 | /* Cualquier estilo personalizado va aquí */
12 | body {
13 | background-color: white;
14 | }
15 | amp-img {
16 | background-color: gray;
17 | border: 1px solid black;
18 | }
19 | </style>
20 | [/sourcecode]
21 |
22 | Las páginas AMP pueden tener solo una hoja de estilo integrada y hay ciertos selectores que no puedes usar. [Aprende todo acerca del estilo](/docs/guides/responsive/style_pages.html).
23 |
24 | ## Controla el diseño
25 |
26 | AMP sigue reglas estrictas al distribuir elementos en la página. En una página HTML normal, CSS se usa casi exclusivamente para distribuir elementos. Sin embargo, por motivos de rendimiento, AMP requiere que todos los elementos tengan un tamaño explícito configurado desde el principio.
27 |
28 | Aprende todo acerca de cómo AMP representa y diseña una página y cómo puedes modificar el diseño en [Cómo controlar el diseño](/docs/guides/responsive/control_layout.html).
29 |
30 | <a class="go-button button" href="/es/docs/get_started/create/preview_and_validate.html">Continuar con el paso 4</a>
31 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Podgląd i sprawdzanie poprawności
3 | ---
4 |
5 | Podgląd strony AMP można wyświetlić tak samo jak w przypadku dowolnej innej statycznej witryny HTML. Nie ma kroku budowania, nie jest też wymagane przetwarzanie wstępne. Można:
6 |
7 | - **Otworzyć stronę bezpośrednio w przeglądarce z systemu plików** (niektóre elementy mogą nie działać z powodu niepowodzenia żądań XMLHttpRequest).
8 | - **Użyć lokalnego serwera internetowego takiego jak Apache 2 lub Nginx**.
9 | *(Podpowiedź. Aby użyć prostego serwera internetowego, uruchom `python -m SimpleHTTPServer`).*
10 |
11 | Następnie upewnij się, że dana strona AMP **jest rzeczywiście prawidłowym kodem AMP**. W przeciwnym razie strona nie będzie wykrywana i rozpowszechniana przez niezależne platformy takie jak Szukaj w Google. Aby sprawdzić poprawność:
12 |
13 | 1. Otwórz stronę w przeglądarce.
14 | 1. Dodaj parametr „`#development=1`” do adresu URL, na przykład `http://localhost:8000/released.amp.html#development=1`.
15 | 1. Otwórz [konsolę DevTools w przeglądarce Chrome](https://developers.google.com/web/tools/chrome-devtools/debug/console/) i sprawdź, czy wystąpiły błędy sprawdzania poprawności.
16 |
17 | [Dowiedz się o sprawdzaniu poprawności](/docs/guides/validate.html) i o tym, co robić, gdy wystąpią błędy.
18 |
19 | <a class="go-button button" href="/pl/docs/get_started/create/prepare_for_discovery.html">Przejdź do kroku 5</a>
20 |
```
--------------------------------------------------------------------------------
/content/docs/reference/components/_blueprint.yaml:
--------------------------------------------------------------------------------
```yaml
1 | $view: /views/doc.html
2 | $path: /docs/reference/components/{base}.html
3 | $localization:
4 | path: /{locale}/docs/reference/components/{base}.html
5 | $title@: AMP components
6 |
7 | custom_children:
8 | - title@: Ads & Analytics
9 | href: /content/docs/reference/components/ads-analytics/amp-pixel.md
10 | collection: /content/docs/reference/components/ads-analytics
11 | - title@: Dynamic Content
12 | href: /content/docs/reference/components/dynamic-content/amp-access-laterpay.md
13 | collection: /content/docs/reference/components/dynamic-content
14 | - title@: Layout
15 | href: /content/docs/reference/components/layout/amp-accordion.md
16 | collection: /content/docs/reference/components/layout
17 | - title@: Media
18 | href: /content/docs/reference/components/media/amp-img.md
19 | collection: /content/docs/reference/components/media
20 | - title@: Presentation
21 | href: /content/docs/reference/components/presentation/amp-animation.md
22 | collection: /content/docs/reference/components/presentation
23 | - title@: Social
24 | href: /content/docs/reference/components/social/amp-facebook.md
25 | collection: /content/docs/reference/components/social
26 |
27 | navigation:
28 | prev:
29 | section: true
30 | title@: Guides
31 | href: /content/docs/guides/author_develop/responsive_amp.md
32 | next:
33 | subtitle@: Next Reference
34 | title@: AMP HTML Specification
35 | href: /content/docs/reference/spec.md
36 |
```
--------------------------------------------------------------------------------
/assets/sass/_toc.scss:
--------------------------------------------------------------------------------
```scss
1 | .toc {
2 | background: $color-white;
3 | box-shadow: 0 3px 20px 0 rgba(0, 0, 0, .075);
4 | box-sizing: border-box;
5 | position: fixed;
6 | right: 0;
7 | top: $header-height;
8 | bottom: 0;
9 | padding: 50px 20px;
10 | overflow: auto;
11 | width: 200px;
12 |
13 | &::before {
14 | @extend %text-label;
15 | color: $color-ampblue;
16 | content: 'Contents';
17 | }
18 |
19 | ul,
20 | ol {
21 | list-style: none;
22 | margin: 0 auto;
23 |
24 | .main .content & {
25 | margin-left: 0;
26 | }
27 | }
28 |
29 | li {
30 | margin: 15px 0;
31 |
32 | ul {
33 | margin-left: 10px;
34 |
35 | .main .content & {
36 | margin-left: 10px;
37 | }
38 |
39 | a {
40 | color: $color-grey-md;
41 | }
42 | }
43 | }
44 |
45 | a {
46 | @extend %break;
47 | color: $color-black-95;
48 | display: block;
49 | position: relative;
50 | text-transform: none;
51 |
52 | &::before {
53 | display: none;
54 | }
55 |
56 | &:hover,
57 | &.active {
58 | color: $color-ampblue;
59 |
60 | &::before {
61 | background: $gradient-med;
62 | bottom: -5px;
63 | content: '';
64 | height: 1px;
65 | left: 0;
66 | position: absolute;
67 | right: 0;
68 | }
69 |
70 | code {
71 | background: transparent;
72 | color: $color-ampblue;
73 | }
74 | }
75 |
76 | code {
77 | border: 0;
78 | padding: 0;
79 |
80 | &::before {
81 | display: none;
82 | }
83 | }
84 | }
85 | }
86 |
87 | .rtl .toc {
88 | left: 0;
89 | right: auto;
90 | }
91 |
92 | @include max-screen($toc-breakpoint) {
93 | .toc {
94 | display: none;
95 | }
96 | }
97 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/presentation_layout@pt_BR.md:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Modificar a apresentação e o layout
3 | ---
4 |
5 | ## Modificar a apresentação
6 |
7 | AMPs são páginas da Web; qualquer estilo adicionado à página e a seus elementos é feito usando propriedades CSS comuns. Adicione estilos aos elementos usando os seletores de classe ou elemento em uma folha de estilo do `<head>`, que se chama `<style amp-custom>`:
8 |
9 | [sourcecode:html]
10 | <style amp-custom>
11 | /* any custom style goes here */
12 | body {
13 | background-color: white;
14 | }
15 | amp-img {
16 | background-color: gray;
17 | border: 1px solid black;
18 | }
19 | </style>
20 | [/sourcecode]
21 |
22 | Cada página AMP pode ter apenas uma folha de estilo incorporada e há certos seletores que você não tem permissão para usar. [Saiba tudo sobre estilos](/docs/guides/responsive/style_pages.html).
23 |
24 | ## Controlar o layout
25 |
26 | O AMP segue regras mais restritas para o layout dos elementos na página. Em uma página HTML normal, você usa CSS quase que exclusivamente para criar o layout. No entanto, por razões de desempenho, o AMP exige que todos os elementos tenham um conjunto de tamanhos explícito desde o início.
27 |
28 | Saiba mais sobre como o AMP renderiza e faz o layout de uma página e como você pode modificá-lo em [Como controlar o layout](/docs/guides/responsive/control_layout.html).
29 |
30 | <a class="go-button button" href="/pt_br/docs/get_started/create/preview_and_validate.html">Continuar para a etapa 4</a>
31 |
```
--------------------------------------------------------------------------------
/assets/img/about/who-use-amp/amp-ads/lines_bottom2.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 325.31 303.48"><defs><style>.cls-1,.cls-2,.cls-3{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);}</style><linearGradient id="linear-gradient" x1="31.67" y1="93.91" x2="286.51" y2="93.91" 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="1915.96" y1="-693.94" x2="2200.88" y2="-693.94" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -1981.08, 535.75)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="6833.64" y1="-2889.93" x2="7048.26" y2="-2889.93" gradientTransform="translate(7064.72 -2707.48) 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_bottom2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="283.87" y1="3.65" x2="34.3" y2="184.18"/><line class="cls-2" x1="322.69" y1="70.15" x2="2.62" y2="299.82"/><line class="cls-3" x1="19.09" y1="257.68" x2="228.46" y2="107.21"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/sass/pages/_events.scss:
--------------------------------------------------------------------------------
```scss
1 | .latest-events {
2 | .hero {
3 | padding-bottom: 75px;
4 | text-align: center;
5 |
6 | amp-img {
7 | display: inline-block;
8 | margin-bottom: 5px;
9 | }
10 | }
11 |
12 | .label {
13 | @extend %text-label;
14 | border-bottom: solid 2px $color-grey-lt;
15 | color: $color-ampblue;
16 | padding-bottom: 25px;
17 | }
18 |
19 | .upcoming,
20 | .past {
21 | margin-bottom: 60px;
22 |
23 | .post-item {
24 | &:last-of-type {
25 | margin-bottom: 0;
26 | }
27 | }
28 |
29 | .no-upcoming {
30 | background: $gradient-med-faded;
31 | margin: 40px 0 80px 0;
32 | padding: 40px 65px 60px 65px;
33 |
34 | @include max-screen($tablet-portrait-breakpoint) {
35 | padding: 20px 25px 35px 25px;
36 | }
37 |
38 | amp-img {
39 | display: inline-block;
40 | vertical-align: middle;
41 | }
42 |
43 | i-amp-sizer {
44 | width: 31px;
45 | }
46 |
47 | .empty-label {
48 | color: $color-ampblue;
49 | display: inline-block;
50 | margin-left: .6em;
51 | }
52 |
53 | .empty-text a {
54 | font-size: 16px;
55 | font-weight: 300;
56 | line-height: 26px;
57 | padding-bottom: 1px;
58 | text-transform: none;
59 |
60 | @include max-screen($mobile-breakpoint) {
61 | font-size: 14px;
62 | }
63 |
64 | &::after {
65 | background: $gradient-bold;
66 | bottom: -1px;
67 | content: '';
68 | height: 1px;
69 | left: 0;
70 | position: absolute;
71 | right: 0;
72 | }
73 | }
74 | }
75 | }
76 | }
77 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Modyfikowanie prezentacji i układu
3 | ---
4 |
5 | ## Modyfikowanie prezentacji
6 |
7 | Strony AMP to strony internetowe; nadawanie stylu stronie i jej elementom odbywa się przy użyciu typowych właściwości CSS. Można nadawać elementom styl przy użyciu selektorów klas lub elementów w arkuszu stylów wstawionym w sekcji `<head>` nazywanym `<style amp-custom>`:
8 |
9 | [sourcecode:html]
10 | <style amp-custom>
11 | /* any custom style goes here */
12 | body {
13 | background-color: white;
14 | }
15 | amp-img {
16 | background-color: gray;
17 | border: 1px solid black;
18 | }
19 | </style>
20 | [/sourcecode]
21 |
22 | Każda strona AMP może mieć tylko jeden umieszczony arkusz stylów, a niektórych selektorów nie można używać. [Dowiedz się więcej o stosowaniu stylów](/docs/guides/responsive/style_pages.html).
23 |
24 | ## Sterowanie układem
25 |
26 | W kwestii rozmieszczania elementów na stronie w AMP obowiązują bardziej rygorystyczne reguły. Na normalnej stronie HTML do rozmieszczania elementów używa się niemal wyłącznie CSS. Jednak ze względu na wydajność AMP wymaga, aby wszystkie elementy miały od początku ustawiony jawny rozmiar.
27 |
28 | Wszystkie informacje na temat sposobu renderowania stron AMP i układów strony oraz możliwości modyfikacji układu można znaleźć w części [Jak sterować układem](/docs/guides/responsive/control_layout.html).
29 |
30 | <a class="go-button button" href="/pl/docs/get_started/create/preview_and_validate.html">Przejdź do kroku 4</a>
31 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Stil und Layout anpassen
3 | ---
4 |
5 | ## Stil anpassen
6 |
7 | AMPs sind Webseiten, das heißt, der Stil der Seite und ihrer Elemente wird mithilfe allgemeiner CSS-Eigenschaften bearbeitet. Elemente mit Klassen- oder Elementselektoren können Sie in einem Inline-Stylesheet innerhalb des `<head>`-Elements anpassen. Dieses Stylesheet heißt `<style amp-custom>`:
8 |
9 | [sourcecode:html]
10 | <style amp-custom>
11 | /* any custom style goes here */
12 | body {
13 | background-color: white;
14 | }
15 | amp-img {
16 | background-color: gray;
17 | border: 1px solid black;
18 | }
19 | </style>
20 | [/sourcecode]
21 |
22 | Jede AMP-Seite darf nur über ein einziges eingebettetes Stylesheet verfügen und bestimmte Selektoren dürfen nicht verwendet werden. [Weitere Informationen zu Stylesheets](/docs/guides/responsive/style_pages.html)
23 |
24 | ## Layout anpassen
25 |
26 | Für das Layout von Elementen auf der AMP-Seite gelten strengere Regeln. Auf einer normalen HTML-Seite verwenden Sie für das Layout von Elementen fast ausschließlich CSS. Aus Leistungsgründen müssen jedoch bei AMP alle Elemente von Anfang an eine eindeutige Größe besitzen.
27 |
28 | Mehr über das Rendering und Layout von AMP-Seiten und darüber, wie Sie das Layout bearbeiten können, erfahren Sie [im Artikel zu den unterstützten Layouts](/docs/guides/responsive/control_layout.html).
29 |
30 | <a class="button go-button" href="/de/docs/get_started/create/preview_and_validate.html">Weiter mit Schritt 4</a>
31 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Modifica di presentazione e layout
3 | ---
4 |
5 | ## Modifica della presentazione
6 |
7 | Le pagine AMP sono pagine web; l’applicazione di stili alla pagina e ai suoi elementi viene effettuata tramite proprietà CSS comuni. Definisci gli stili degli elementi tramite selettori di classi o elementi in un foglio di stile incorporato nel tag `<head>`, denominato `<style amp-custom>`:
8 |
9 | [sourcecode:html]
10 | <style amp-custom>
11 | /* any custom style goes here */
12 | body {
13 | background-color: white;
14 | }
15 | amp-img {
16 | background-color: gray;
17 | border: 1px solid black;
18 | }
19 | </style>
20 | [/sourcecode]
21 |
22 | Ciascuna pagina AMP può avere solamente un foglio di stile incorporato e l’uso di alcuni selettori non è consentito. [Scopri tutte le informazioni utili sullo stile](/docs/guides/responsive/style_pages.html).
23 |
24 | ## Controllo del layout
25 |
26 | AMP segue regole più severe per il layout degli elementi nella pagina. In una normale pagina HTML, per il layout degli elementi utilizzi quasi esclusivamente CSS. Tuttavia, per questioni legate alle prestazioni, AMP impone in partenza un limite esplicito per tutti gli elementi.
27 |
28 | Scopri in che modo viene eseguito il rendering e il layout di una pagina in AMP e come fare per modificare il layout nella sezione [Come controllare il layout](/docs/guides/responsive/control_layout.html).
29 |
30 | <a class="go-button button" href="/it/docs/get_started/create/preview_and_validate.html">Vai al Passaggio 4</a>
31 |
```
--------------------------------------------------------------------------------
/assets/img/latest/line_hero_back.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 285 285" style="enable-background:new 0 0 285 285;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:url(#SVGID_1_);stroke-width:9;stroke-miterlimit:10;}
7 | .st1{fill:none;stroke:url(#SVGID_2_);stroke-width:9;stroke-miterlimit:10;}
8 | </style>
9 | <g>
10 | <g id="Art">
11 |
12 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="16070.3398" y1="10204.2832" x2="16316.0039" y2="10204.2832" gradientTransform="matrix(-0.99 -0.16 0.16 -0.99 14467.0703 12853.3408)">
13 | <stop offset="0" style="stop-color:#1C79C0"/>
14 | <stop offset="0.5" style="stop-color:#0385FF"/>
15 | <stop offset="1" style="stop-color:#0DD3FF"/>
16 | </linearGradient>
17 | <line class="st0" x1="5" y1="270.8" x2="280" y2="73.5"/>
18 |
19 | <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="15744.8291" y1="1614.5452" x2="15907.0361" y2="1614.5452" gradientTransform="matrix(-0.99 -0.16 0.16 -0.99 15538.6807 4201.2803)">
20 | <stop offset="0" style="stop-color:#1C79C0"/>
21 | <stop offset="0.5" style="stop-color:#0385FF"/>
22 | <stop offset="1" style="stop-color:#0DD3FF"/>
23 | </linearGradient>
24 | <line class="st1" x1="89.4" y1="143" x2="268.5" y2="14.5"/>
25 | </g>
26 | </g>
27 | </svg>
28 |
```
--------------------------------------------------------------------------------
/assets/img/about/overview/lines3.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 563.21 363.22"><defs><style>.cls-1,.cls-2,.cls-3{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);}</style><linearGradient id="linear-gradient" x1="-24507.48" y1="2574.68" x2="-24205.25" y2="2574.68" gradientTransform="translate(24822.71 1809.12) rotate(9.97)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#247bbd"/></linearGradient><linearGradient id="linear-gradient-2" x1="13125.13" y1="15544.69" x2="13399.4" y2="15544.69" gradientTransform="matrix(-1, 0, 0, -1, 13561.86, 15649.68)" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="15653.75" y1="11191.39" x2="15959.72" y2="11191.39" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -13627.37, -13352.94)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29d2fc"/><stop offset="0.5" stop-color="#1987fa"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><title>lines3</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="216.04" y1="255.42" x2="560.56" y2="3.63"/><line class="cls-2" x1="141.48" y1="224.24" x2="410.12" y2="26.33"/><line class="cls-3" x1="347.17" y1="107.81" x2="2.66" y2="359.59"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/about/overview/herolines2.svg:
--------------------------------------------------------------------------------
```
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 358.79 327.39"><defs><style>.cls-1,.cls-2,.cls-3{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);}</style><linearGradient id="linear-gradient" x1="5081.7" y1="2625.25" x2="5366.62" y2="2625.25" gradientTransform="matrix(0.99, 0.16, -0.16, 0.99, -4541.8, -3306.45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.5" stop-color="#0dd6ff"/><stop offset="1" stop-color="#0dd6ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="-15754.96" y1="18564.84" x2="-15470.04" y2="18564.84" gradientTransform="matrix(-0.99, -0.16, 0.16, -0.99, -18212.94, 16028.12)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1c79c3"/><stop offset="0.5" stop-color="#0388ff"/><stop offset="1" stop-color="#0dd6ff"/></linearGradient><linearGradient id="linear-gradient-3" x1="11475.98" y1="4206.83" x2="11690.6" y2="4206.83" gradientTransform="translate(-11446.27 -3927.44) rotate(-0.15)" xlink:href="#linear-gradient"/></defs><title>herolines2</title><g id="Layer_2" data-name="Layer 2"><g id="Art"><line class="cls-1" x1="356.16" y1="3.65" x2="36.72" y2="234.18"/><line class="cls-2" x1="2.63" y1="308.15" x2="322.08" y2="77.62"/><line class="cls-3" x1="252.82" y1="172.71" x2="43.85" y2="323.74"/></g></g></svg>
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_audience.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:url(#SVGID_1_);stroke-linejoin:round;}
7 | .st1{fill:none;stroke:url(#SVGID_2_);stroke-miterlimit:10;}
8 | </style>
9 | <symbol id="New_Symbol_2" viewBox="-5.5 -5.7 11.1 11.4">
10 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-5.53" y1="2.695" x2="5.53" y2="2.695">
11 | <stop offset="0" style="stop-color:#1C79C4"/>
12 | <stop offset="0.51" style="stop-color:#0389FF"/>
13 | <stop offset="1" style="stop-color:#0DD7FF"/>
14 | </linearGradient>
15 | <path class="st0" d="M5,5.2H-5c0-2.8,2.3-5,5-5S5,2.4,5,5.2z"/>
16 | <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-3.19" y1="-2.52" x2="3.2" y2="-2.52">
17 | <stop offset="0" style="stop-color:#1C79C4"/>
18 | <stop offset="0.51" style="stop-color:#0389FF"/>
19 | <stop offset="1" style="stop-color:#0DD7FF"/>
20 | </linearGradient>
21 | <circle class="st1" cx="0" cy="-2.5" r="2.7"/>
22 | </symbol>
23 | <title>icon_audience</title>
24 | <g>
25 | <g id="Art">
26 |
27 | <use xlink:href="#New_Symbol_2" width="11.1" height="11.4" id="New_Symbol_2-3" x="-5.5" y="-5.7" transform="matrix(1 0 0 1 7.5 7.5)" style="overflow:visible;"/>
28 | </g>
29 | </g>
30 | </svg>
31 |
```
--------------------------------------------------------------------------------
/views/partials/nav.html:
--------------------------------------------------------------------------------
```html
1 | {% set usedDoc = usedDoc or doc %}
2 |
3 | {% macro render_item(item) -%}
4 | {% set sub_collection = g.collection(item.collection.pod_path + '/' + item.base) %}
5 | {% set open = sub_collection.pod_path in usedDoc.pod_path[:-3] %}
6 | {% if doc == item %}
7 | <li class="current">
8 | <span>{{_(item.title)}}</span>
9 | {% else %}
10 | <li>
11 | <a href="{{item.goto or item.url.path}}"{% if item.goto %} class="external"{% endif %}>{{_(item.title)}}</a>
12 | {% endif %}
13 | {% if open and sub_collection.exists %}
14 | {{ render_children(item, sub_collection.docs(locale=usedDoc.locale)) }}
15 | {% endif %}
16 | </li>
17 | {% endmacro %}
18 | {% macro tag(item) -%}
19 | {{"ol" if item.numbered else "ul"}}
20 | {%- endmacro %}
21 | {% macro render_children(item, docs) -%}
22 | <{{tag(item)}}>
23 | {% for child in docs %}
24 | {{render_item(child)}}
25 | {% endfor %}
26 | </{{tag(item)}}>
27 | {%- endmacro %}
28 | <nav{% if flat %} class="flat"{% endif %}>
29 | {% if flat %}
30 | <ul>
31 | <li>
32 | <h2>{{_(usedDoc.collection.title)}}</h2>
33 | <ul>
34 | {% for item in usedDoc.collection.docs(recursive=false, locale=usedDoc.locale) %}
35 | {{render_item(item)}}
36 | {% endfor %}
37 | </ul>
38 | </li>
39 | </ul>
40 | {% else %}
41 | <ul>
42 | {% for collection in g.collection('docs').collections() %}
43 | <li>
44 | <h2>{{_(collection.title)}}</h2>
45 | <ul>
46 | {% for item in collection.docs(recursive=false, locale=doc.locale) %}
47 | {{render_item(item)}}
48 | {% endfor %}
49 | </ul>
50 | </li>
51 | {% endfor %}
52 | </ul>
53 | {% endif %}
54 | </nav>
55 |
```
--------------------------------------------------------------------------------
/content/docs/get_started/create/[email protected]:
--------------------------------------------------------------------------------
```markdown
1 | ---
2 | $title: Modifier la présentation et la disposition
3 | ---
4 |
5 | ## Modifier la présentation
6 |
7 | Les pages AMP sont des pages Web ; toute application de style sur la page et sur ses éléments est réalisée à l'aide de propriétés CSS communes. Vous pouvez appliquer un style aux éléments à l'aide de sélecteurs de classe ou d'élément dans une feuille de style en ligne au sein de l'en-tête (`<head>`), appelée `<style amp-custom>` :
8 |
9 | [sourcecode:html]
10 | <style amp-custom>
11 | /* any custom style goes here */
12 | body {
13 | background-color: white;
14 | }
15 | amp-img {
16 | background-color: gray;
17 | border: 1px solid black;
18 | }
19 | </style>
20 | [/sourcecode]
21 |
22 | Chaque page AMP peut intégrer une seule feuille de style uniquement et l'utilisation de certains sélecteurs n'est pas autorisée. [Tout savoir sur les styles](/docs/guides/responsive/style_pages.html).
23 |
24 | ## Contrôler la disposition
25 |
26 | AMP applique des règles strictes en matière de disposition des éléments sur la page. Sur une page HTML standard, vous utilisez presque exclusivement le style CSS pour disposer les éléments. Mais pour des performances optimales, AMP nécessite de définir dès le départ une taille explicite pour tous les éléments.
27 |
28 | Découvrez le rendu et la présentation d'une page AMP et comment vous pouvez modifier la disposition dans [Comment contrôler la disposition](/docs/guides/responsive/control_layout.html).
29 |
30 | <a class="go-button button" href="/fr/docs/get_started/create/preview_and_validate.html">Continuer à l'Étape 4</a>
31 |
```
--------------------------------------------------------------------------------
/assets/img/latest/icon_location.svg:
--------------------------------------------------------------------------------
```
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4 | viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve">
5 | <style type="text/css">
6 | .st0{fill:none;stroke:url(#SVGID_1_);stroke-linejoin:round;}
7 | .st1{fill:none;stroke:url(#SVGID_2_);stroke-miterlimit:10;}
8 | </style>
9 | <symbol id="New_Symbol_1" viewBox="-4.4 -6.3 8.8 12.5">
10 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-4.405" y1="0" x2="4.405" y2="0">
11 | <stop offset="0" style="stop-color:#1C79C4"/>
12 | <stop offset="0.51" style="stop-color:#0389FF"/>
13 | <stop offset="1" style="stop-color:#0DD7FF"/>
14 | </linearGradient>
15 | <path class="st0" d="M3.9-1.8C3.9,1.8,0,5.8,0,5.8s-3.9-4.6-3.9-7.6C-3.9-4-2.2-5.8,0-5.8S3.9-4,3.9-1.8z"/>
16 | <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-1.995" y1="-1.8475" x2="1.995" y2="-1.8475">
17 | <stop offset="0" style="stop-color:#1C79C4"/>
18 | <stop offset="0.51" style="stop-color:#0389FF"/>
19 | <stop offset="1" style="stop-color:#0DD7FF"/>
20 | </linearGradient>
21 | <circle class="st1" cx="0" cy="-1.8" r="1.5"/>
22 | </symbol>
23 | <title>icon_location</title>
24 | <g>
25 | <g id="Art">
26 |
27 | <use xlink:href="#New_Symbol_1" width="8.8" height="12.5" x="-4.4" y="-6.3" transform="matrix(1.08 0 0 1.08 7.4874 7.4762)" style="overflow:visible;"/>
28 | </g>
29 | </g>
30 | </svg>
31 |
```
