Add Files, Clipboard, and first Advanced Apps Patterns

[tomayac]

Fixes https://github.com/GoogleChrome/web.dev/issues/7439

Changes proposed in this pull request:

• Add Files and Clipboard Patterns

[netlify[bot]]

✅ Deploy Preview for web-dev-staging ready!

Name	Link
🔨 Latest commit	d9a5891b2b17b7abef1c6b97d3479e8b4f3aea72
🔍 Latest deploy log	https://app.netlify.com/sites/web-dev-staging/deploys/6340086998d11d00075047ad
😎 Deploy Preview	https://deploy-preview-7645--web-dev-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[chrome-devrel-review-bot]

Hello! This is an automated review by our custom reviewbot. It updates automatically when code or GitHub comments in this pull request are created or updated.

Requested changes

If there are any common problems with the content files you created or modified, they will be listed here.

src/site/content/en/patterns/advanced-apps/audio-effects/index.md

• Please put a blank line before and after each section heading. Some Markdown parsers don't detect the text as a section heading unless there is blank space before and after it. Affected lines: 12, 16, 48

src/site/content/en/patterns/advanced-apps/badges/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/advanced-apps/contacts/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/advanced-apps/contacts/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/advanced-apps/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/advanced-apps/multiple-screens/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/advanced-apps/periodic-background-sync/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/advanced-apps/share/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/advanced-apps/shortcuts/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/copy-images/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/copy-images/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/copy-text/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/copy-text/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/paste-files/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/paste-files/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/paste-images/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/paste-images/index.md

• Please put a blank line before and after each section heading. Some Markdown parsers don't detect the text as a section heading unless there is blank space before and after it. Affected lines: 87

src/site/content/en/patterns/clipboard/paste-text/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/clipboard/paste-text/index.md

• Please put a blank line before and after each section heading. Some Markdown parsers don't detect the text as a section heading unless there is blank space before and after it. Affected lines: 66

src/site/content/en/patterns/files/drag-and-drop-directories/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/drag-and-drop-directories/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/drag-and-drop-files/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/drag-and-drop-files/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/handle-files-opened-from-the-file-explorer/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/open-a-directory/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/open-a-directory/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/open-one-or-multiple-files/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/open-one-or-multiple-files/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/receive-shared-files/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/save-a-file/demo.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/save-a-file/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/files/share-files/index.md

• This file passed all of our automated Markdown audits.

src/site/content/en/patterns/example-set/index.md

• This file passed all of our automated Markdown audits.

[tomayac]

Hi @devnook,

In https://github.com/GoogleChrome/web.dev/pull/7645/commits/8b7b2f7b433e9d6dbc98dd355de37636e272c6fb, I have now reflected your changes from https://github.com/GoogleChrome/web.dev/pull/7875; and it almost works. Since the service worker lives in assets/sw.js, I cannot broaden its scope unfortunately:

https://github.com/GoogleChrome/web.dev/blob/8b7b2f7b433e9d6dbc98dd355de37636e272c6fb/src/site/content/en/patterns/advanced-apps/badges/demo.njk#L35-L39

Any idea? Can we somehow smuggle sw.js one folder level up?

[devnook]

Hi @devnook,

In 8b7b2f7, I have now reflected your changes from #7875; and it almost works. Since the service worker lives in assets/sw.js, I cannot broaden its scope unfortunately:

https://github.com/GoogleChrome/web.dev/blob/8b7b2f7b433e9d6dbc98dd355de37636e272c6fb/src/site/content/en/patterns/advanced-apps/badges/demo.njk#L35-L39

Any idea? Can we somehow smuggle sw.js one folder level up?

I suggest you just move sw.js up a level to badges/sw.js and update the path in index.md static field. If you still want to have it displayed in the code tabs, then probably you'd need to repeat it in assets/ directory too. Let me know if it worked this way!

[tomayac]

@devnook Could you flip the eng LGTM approval bit for src/lib/patterns.js, which makes sure the "CodePen" doesn't show images?

[tomayac]

Thank you all! I will merge this on Monday! Adding the Do Not Merge label in between.