document that The type of your _meta keys should be always string…

… and not `number` (#3342)

* more

* docs

* prettier

docs/pages/docs/guide/organize-files.mdx

@@ -77,12 +77,55 @@ page:
   </FileTree.Folder>
 </FileTree>
 
-<Callout>
-  It's also possible to use the `.jsx`, `.ts`, `.tsx` extensions for `_meta`
-  files (e.g. `_meta.ts`)
-</Callout>
+### Allowed Extensions
 
-For example, you can put this in your `pages/_meta.js` file:
+It's possible to use the `.jsx`, `.ts` and `.tsx` extensions for `_meta` files
+as well (e.g. `_meta.ts`).
+
+### Sorting Pages Alphabetically
+
+You can use ESLint's built-in `sort-keys` rule, append
+`/* eslint sort-keys: error */` comment at the top of your `_meta` file, and you
+will receive ESLint's errors about incorrect order.
+
+### Usage with `next-sitemap`
+
+If you are using
+[next-sitemap](https://github.com/iamvishnusankar/next-sitemap), you will
+probably need to add `exclude: ['*/_meta']{:js}` to your
+`next-sitemap.config.js` file, as it is
+[tricky to exclude `_meta` files from the build](https://github.com/vercel/next.js/issues/8974#issuecomment-542525837).
+
+### Allowed Keys Values
+
+The type of your `_meta` keys should be always `string` and not `number` since
+[numbers are always ordered first](https://dev.to/frehner/the-order-of-js-object-keys-458d)
+for JavaScript objects.
+
+Following:
+
+```js filename="pages/_meta.js"
+export default {
+  foo: '',
+  1992_10_21: '',
+  1: ''
+}
+```
+
+Will be converted to:
+
+{/* prettier-ignore */}
+```js filename="pages/_meta.js"
+export default {
+  '1': '',
+  '19921021': '',
+  foo: ''
+}
+```
+
+## Example
+
+Put this in your `pages/_meta.js` file:
 
 ```js filename="pages/_meta.js"
 export default {
@@ -108,18 +151,6 @@ export default {
 }
 ```
 
-<Callout>
-  You can use ESLint's built-in rule sort keys with a `/* eslint sort-keys:
-  error */` comment to sort your sidebar items alphabetically.
-</Callout>
-
-<Callout type="warning">
-  If you are using
-  [next-sitemap](https://github.com/iamvishnusankar/next-sitemap), you will
-  probably need to add `exclude: ['*/_meta']` to your `next-sitemap.config.js`
-  file, as it is tricky to exclude `_meta` files from the build.
-</Callout>
-
 The extra configurations are passed to the **theme** as additional information.
 Check the corresponding pages for more information:
 

docs/pages/docs/index.mdx

@@ -11,15 +11,10 @@ import { Cards } from 'nextra/components'
 To start using Nextra, you need to select a theme first:
 
 <Cards num={2}>
-  <Cards.Card
-    image
-    arrow
-    title="Documentation theme"
-    href="/docs/docs-theme/start"
-  >
+  <Cards.Card arrow title="Documentation theme" href="/docs/docs-theme/start">
     <>![Documentation theme](/assets/docs-theme.png)</>
   </Cards.Card>
-  <Cards.Card image arrow title="Blog theme" href="/docs/blog-theme/start">
+  <Cards.Card arrow title="Blog theme" href="/docs/blog-theme/start">
     <>![Blog theme](/assets/blog-theme.png)</>
   </Cards.Card>
 </Cards>

docs/pages/showcase.mdx

@@ -173,7 +173,6 @@ export const Card = Object.assign(
   {
     displayName: 'Card',
     defaultProps: {
-      image: true,
       arrow: true,
       target: '_blank',
       rel: 'noreferrer'

examples/blog/pages/posts/callout.mdx

@@ -108,15 +108,10 @@ Contents for step 2.
 ## Cards
 
 <Cards num={2}>
-  <Cards.Card
-    image
-    arrow
-    title="Documentation theme"
-    href="/docs/docs-theme/start"
-  >
+  <Cards.Card arrow title="Documentation theme" href="/docs/docs-theme/start">
     <>![Documentation theme](https://nextra.site/assets/docs-theme.png)</>
   </Cards.Card>
-  <Cards.Card image arrow title="Blog theme" href="/docs/blog-theme/start">
+  <Cards.Card arrow title="Blog theme" href="/docs/blog-theme/start">
     <>![Blog theme](https://nextra.site/assets/blog-theme.png)</>
   </Cards.Card>
 </Cards>