From fd2724ace0d6a64e5e8d25b0762f4f341b5ffab9 Mon Sep 17 00:00:00 2001
From: Michael Novotny
Date: Thu, 12 Oct 2023 18:18:22 -0500
Subject: [PATCH] Changes codeblock filename delimiter (#56712)
Based on feedback from #56603, the `/` can be interpreted as file paths instead of filename separators / delimiters. We'll change them to use pipes `|` instead.
---
.../01-fetching-caching-and-revalidating.mdx | 6 +--
.../06-optimizing/04-metadata.mdx | 4 +-
.../01-metadata/app-icons.mdx | 8 +--
.../01-metadata/opengraph-image.mdx | 12 ++---
.../route-segment-config.mdx | 32 +++++------
.../04-functions/generate-metadata.mdx | 54 +++++++++----------
6 files changed, 58 insertions(+), 58 deletions(-)
diff --git a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx
index f73228c635..3c28cd1ac0 100644
--- a/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx
+++ b/docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx
@@ -107,7 +107,7 @@ fetch('https://...', { next: { revalidate: 3600 } })
Alternatively, to revalidate all `fetch` requests in a route segment, you can use the [Segment Config Options](/docs/app/api-reference/file-conventions/route-segment-config).
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const revalidate = 3600 // revalidate at most every hour
```
@@ -250,7 +250,7 @@ If an error is thrown while attempting to revalidate data, the last successfully
To opt out of caching for individual `fetch` requests, you can set the `cache` option in `fetch` to `'no-store'`. This will fetch data dynamically, on every request.
-```js filename="layout.js / page.js"
+```js filename="layout.js | page.js"
fetch('https://...', { cache: 'no-store' })
```
@@ -262,7 +262,7 @@ If you have multiple `fetch` requests in a route segment (e.g. a Layout or Page)
For example, using `const dynamic = 'force-dynamic'` will cause all data to be fetched at request time, and the segment to be rendered dynamically.
-```js filename="layout.js / page.js"
+```js filename="layout.js | page.js"
// Add
export const dynamic = 'force-dynamic'
```
diff --git a/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx b/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
index 77996a627a..deb9f0e923 100644
--- a/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
+++ b/docs/02-app/01-building-your-application/06-optimizing/04-metadata.mdx
@@ -21,7 +21,7 @@ With both these options, Next.js will automatically generate the relevant `
```
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
openGraph: {
title: 'Next.js',
@@ -571,7 +571,7 @@ export const metadata: Metadata = {
> **Good to know**: We recommend using the [file-based Metadata API](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) for icons where possible. Rather than having to sync the config export with actual files, the file-based API will automatically generate the correct metadata for you.
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
icons: {
icon: '/icon.png',
@@ -595,7 +595,7 @@ export const metadata = {
/>
```
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
icons: {
icon: [{ url: '/icon.png' }, new URL('/icon.png', 'https://example.com')],
@@ -639,7 +639,7 @@ Learn more about [theme-color](https://developer.mozilla.org/docs/Web/HTML/Eleme
**Simple theme color**
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
themeColor: 'black',
}
@@ -651,7 +651,7 @@ export const metadata = {
**With media attribute**
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
themeColor: [
{ media: '(prefers-color-scheme: light)', color: 'cyan' },
@@ -669,7 +669,7 @@ export const metadata = {
A web application manifest, as defined in the [Web Application Manifest specification](https://developer.mozilla.org/docs/Web/Manifest).
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
manifest: 'https://nextjs.org/manifest.json',
}
@@ -683,7 +683,7 @@ export const metadata = {
Learn more about the [Twitter Card markup reference](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup).
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
twitter: {
card: 'summary_large_image',
@@ -707,7 +707,7 @@ export const metadata = {
```
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
twitter: {
card: 'app',
@@ -759,7 +759,7 @@ export const metadata = {
> **Good to know**: The `viewport` meta tag is automatically set with the following default values. Usually, manual configuration is unnecessary as the default is sufficient. However, the information is provided for completeness.
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
viewport: {
width: 'device-width',
@@ -778,7 +778,7 @@ export const metadata = {
### `verification`
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
verification: {
google: 'google',
@@ -801,7 +801,7 @@ export const metadata = {
### `appleWebApp`
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
itunes: {
appId: 'myAppStoreID',
@@ -845,7 +845,7 @@ export const metadata = {
### `alternates`
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
alternates: {
canonical: 'https://nextjs.org',
@@ -881,7 +881,7 @@ export const metadata = {
### `appLinks`
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
appLinks: {
ios: {
@@ -913,7 +913,7 @@ export const metadata = {
Describes a collection of records, documents, or other materials of historical interest ([source](https://www.w3.org/TR/2011/WD-html5-20110113/links.html#rel-archives)).
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
archives: ['https://nextjs.org/13'],
}
@@ -925,7 +925,7 @@ export const metadata = {
### `assets`
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
assets: ['https://nextjs.org/assets'],
}
@@ -937,7 +937,7 @@ export const metadata = {
### `bookmarks`
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
bookmarks: ['https://nextjs.org/13'],
}
@@ -949,7 +949,7 @@ export const metadata = {
### `category`
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
category: 'technology',
}
@@ -963,7 +963,7 @@ export const metadata = {
All metadata options should be covered using the built-in support. However, there may be custom metadata tags specific to your site, or brand new metadata tags just released. You can use the `other` option to render any custom metadata tag.
-```jsx filename="layout.js / page.js"
+```jsx filename="layout.js | page.js"
export const metadata = {
other: {
custom: 'meta',