Add Files, Clipboard, and first Advanced Apps Patterns

[tomayac]

Fixes #7439

Changes proposed in this pull request:

• Add Files and Clipboard Patterns

[netlify]

✅ Deploy Preview for web-dev-staging ready!

Name	Link
🔨 Latest commit	d9a5891
🔍 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 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:

web.dev/src/site/content/en/patterns/advanced-apps/badges/demo.njk

Lines 35 to 39 in 8b7b2f7

	const registration = await navigator.serviceWorker.register(
	'assets/sw.js', {
	scope: '.',
	}
	);

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:

web.dev/src/site/content/en/patterns/advanced-apps/badges/demo.njk

Lines 35 to 39 in 8b7b2f7

	const registration = await navigator.serviceWorker.register(
	'assets/sw.js', {
	scope: '.',
	}
	);

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!

[beaufortfrancois]

LGTM! You may want to edit all of date: to today.

[rachelandrew]

Approved with some very small styleguide nits.

[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.