feat: refactor page interface (#345)

* set front matter under page instead of page.attributes

* replace the term "page attributes" with "page data"

* Revert "replace the term "page attributes" with "page data""

This reverts commit 022e71c.

* Revert "Revert "replace the term "page attributes" with "page data"""

This reverts commit 386c74c.

* fix BC break for page.attributes

* Update docs

* Update docs

* Update docs

Author: saltysugar

packages/saber-plugin-feed/lib/index.js

@@ -51,30 +51,26 @@ exports.apply = (api, options = {}) => {
 
     await Promise.all(
       [...api.pages.values()].map(async page => {
-        if (page.attributes.type !== 'post' || page.attributes.draft) {
+        if (page.type !== 'post' || page.draft) {
           return
         }
 
-        const matchedLocalePath = api.pages.getMatchedLocalePath(
-          page.attributes.permalink
-        )
+        const matchedLocalePath = api.pages.getMatchedLocalePath(page.permalink)
         if (localePath !== matchedLocalePath) {
           return
         }
 
-        const content = await api.renderer.renderPageContent(
-          page.attributes.permalink
-        )
+        const content = await api.renderer.renderPageContent(page.permalink)
         posts.push({
-          title: page.attributes.title,
-          id: page.attributes.permalink,
-          link: resolveURL(siteConfig.url, page.attributes.permalink),
+          title: page.title,
+          id: page.permalink,
+          link: resolveURL(siteConfig.url, page.permalink),
           // Strip HTML tags in excerpt and use it as description (a.k.a. summary)
           description:
             page.excerpt && page.excerpt.replace(/<(?:.|\n)*?>/gm, ''),
           content,
-          date: page.attributes.updatedAt,
-          published: page.attributes.createdAt
+          date: page.updatedAt,
+          published: page.createdAt
         })
       })
     )

packages/saber-plugin-git-modification-time/README.md

@@ -1,10 +1,10 @@
 # saber-plugin-git-modification-time
 
-> Use the author time of the last commit as page.attributes.updatedAt
+> Use the author time of the last commit as `page.updatedAt`
 
 Why? See [#9785](https://github.com/gatsbyjs/gatsby/issues/9785).
 
-**tl;dr** `page.attributes.updatedAt` defaults to `file.mtime` which will change on platforms like Netlify. We restore the value to author time of the last commit instead.
+**tl;dr** `page.updatedAt` defaults to `file.mtime` which will change on platforms like Netlify. We restore the value to author time of the last commit instead.
 
 ## Install
 

packages/saber-plugin-git-modification-time/lib/index.js

@@ -15,7 +15,7 @@ exports.apply = api => {
         page.internal.absolute
       ])
       if (stdout) {
-        page.attributes.updatedAt = new Date(stdout)
+        page.updatedAt = new Date(stdout)
       }
     }
   })

packages/saber-plugin-git-modification-time/package.json

@@ -1,7 +1,7 @@
 {
   "name": "saber-plugin-git-modification-time",
   "version": "0.0.3",
-  "description": "Use the author time of the last commit as page.attributes.updatedAt",
+  "description": "Use the author time of the last commit as page.updatedAt",
   "license": "MIT",
   "main": "lib/index.js",
   "files": [

packages/saber-plugin-netlify-redirect/lib/index.js

@@ -38,9 +38,7 @@ exports.apply = api => {
       }
     }
 
-    const allPermalinks = [...api.pages.values()].map(
-      page => page.attributes.permalink
-    )
+    const allPermalinks = [...api.pages.values()].map(page => page.permalink)
     for (const permalink of allPermalinks) {
       if (permalink.endsWith('.html')) {
         const fromPath = permalink.replace(/\.html$/, '')

packages/saber-plugin-query-posts/README.md

@@ -36,9 +36,9 @@ Then in the layout component `layouts/index.vue`, `page.posts` and `page.paginat
     <slot name="default" />
 
     <ul>
-      <li v-for="post in page.posts" :key="post.attributes.permalink">
-        <saber-link :to="post.attributes.permalink">
-          {{ post.attributes.title }}
+      <li v-for="post in page.posts" :key="post.permalink">
+        <saber-link :to="post.permalink">
+          {{ post.title }}
         </saber-link>
       </li>
     </ul>
@@ -49,7 +49,6 @@ Then in the layout component `layouts/index.vue`, `page.posts` and `page.paginat
     <saber-link :to="page.pagination.nextLink" v-if="page.pagination.hasNext">
       Next Page →
     </saber-link>
-
   </div>
 </template>
 
@@ -62,7 +61,7 @@ export default {
 
 ## Tags
 
-This plugin will automatically generate tag pages at `/tags/:tag` when you're using `tags` in page attributes, e.g. in a Markdown post:
+This plugin will automatically generate tag pages at `/tags/:tag` when you're using `tags` in page data, e.g. in a Markdown post:
 
 ```markdown
 ---
@@ -109,7 +108,7 @@ You can access the tag name in the layout component via `this.page.tag`.
 
 ## Categories
 
-This plugin will automatically generate category pages at `/categories/:tag` when you're using `categories` in page attributes, e.g. in a Markdown post:
+This plugin will automatically generate category pages at `/categories/:tag` when you're using `categories` in page data, e.g. in a Markdown post:
 
 ```markdown
 ---

packages/saber-plugin-query-posts/lib/index.js

@@ -51,33 +51,31 @@ exports.apply = (api, options = {}) => {
     categoriesMap = Object.assign({}, categoriesMap)
 
     for (const page of api.pages.values()) {
-      if (page.attributes.draft) {
+      if (page.draft) {
         continue
       }
 
-      const matchedLocalePath = api.pages.getMatchedLocalePath(
-        page.attributes.permalink
-      )
+      const matchedLocalePath = api.pages.getMatchedLocalePath(page.permalink)
       if (matchedLocalePath !== currentLocalePath) {
         continue
       }
 
-      if (page.attributes.injectAllPosts) {
+      if (page.injectAllPosts) {
         injectPostsToPages.add(page)
         continue
       }
 
-      if (page.attributes.type === 'post') {
+      if (page.type === 'post') {
         const pagePublicFields = api.pages.getPagePublicFields(page)
         allPosts.add(pagePublicFields)
 
         // Group posts for tag pages
-        const tags = [].concat(page.attributes.tags || [])
+        const tags = [].concat(page.tags || [])
         if (tags.length > 0) {
-          page.tags = []
+          page.tagsInfo = []
           for (const tag of tags) {
             const tagSlug = getIdFromMap(tagsMap, tag)
-            page.tags.push({
+            page.tagsInfo.push({
               name: tag,
               permalink: renderPermalink(permalinks.tag, {
                 name: tagSlug,
@@ -92,18 +90,18 @@ exports.apply = (api, options = {}) => {
 
         // Group posts for category pages
         const categories = []
-          .concat(page.attributes.categories || [])
+          .concat(page.categories || [])
           .map(v => (Array.isArray(v) ? v : v.split('/')))
 
         if (categories.length > 0) {
-          page.categories = []
+          page.categoriesInfo = []
           for (const category of categories) {
             for (const index of category.keys()) {
               const categorySlug = category
                 .slice(0, index + 1)
                 .map(name => getIdFromMap(categoriesMap, name))
                 .join('/')
-              page.categories.push({
+              page.categoriesInfo.push({
                 // The base name of the category
                 name: category[index],
                 permalink: renderPermalink(permalinks.category, {
@@ -130,15 +128,13 @@ exports.apply = (api, options = {}) => {
       injectToPages(
         new Set([
           {
-            attributes: {
-              isTagPage: true,
-              layout: 'tag',
-              permalink: renderPermalink(permalinks.tag, {
-                name: tag,
-                slug: tag
-              }),
+            isTagPage: true,
+            layout: 'tag',
+            permalink: renderPermalink(permalinks.tag, {
+              name: tag,
               slug: tag
-            },
+            }),
+            slug: tag,
             internal: {
               id: `internal_blog__tag__${tag}`,
               // So that this page will be removed before next `onCreatePages` hook in watch mode
@@ -158,15 +154,13 @@ exports.apply = (api, options = {}) => {
       injectToPages(
         new Set([
           {
-            attributes: {
-              isCategoryPage: true,
-              layout: 'category',
-              permalink: renderPermalink(permalinks.category, {
-                name: category,
-                slug: category
-              }),
+            isCategoryPage: true,
+            layout: 'category',
+            permalink: renderPermalink(permalinks.category, {
+              name: category,
               slug: category
-            },
+            }),
+            slug: category,
             internal: {
               id: `internal_blog__category__${category}`,
               // So that this page will be removed before next `onCreatePages` hook in watch mode
@@ -188,23 +182,23 @@ exports.apply = (api, options = {}) => {
       if (pages.size > 0) {
         const date = new Date()
         const sortedPosts = [...posts].sort((a, b) => {
-          const aDate = new Date(a.attributes.date || a.attributes.createdAt)
-          const bDate = new Date(b.attributes.date || b.attributes.createdAt)
+          const aDate = new Date(a.createdAt)
+          const bDate = new Date(b.createdAt)
           return aDate > bDate ? -1 : 1
         })
 
         for (const page of pages) {
           const paginatedPosts = paginate(
             sortedPosts,
-            Object.assign({}, paginationOptions, page.attributes.injectAllPosts)
+            Object.assign({}, paginationOptions, page.injectAllPosts)
           )
           const totalPages = paginatedPosts.length
 
           for (const [index, posts] of paginatedPosts.entries()) {
             const permalink =
               index === 0
-                ? page.attributes.permalink
-                : urlJoin(page.attributes.permalink, `page/${index + 1}`)
+                ? page.permalink
+                : urlJoin(page.permalink, `page/${index + 1}`)
             const newPage = Object.assign({}, page, {
               internal: Object.assign({}, page.internal, {
                 id:
@@ -215,22 +209,17 @@ exports.apply = (api, options = {}) => {
                   page.internal.parent ||
                   (index === 0 ? undefined : page.internal.id)
               }),
-              attributes: Object.assign({}, page.attributes, {
-                permalink,
-                createdAt: page.attributes.createdAt || date,
-                updatedAt: page.attributes.updatedAt || date
-              }),
+              permalink,
+              createdAt: page.createdAt || date,
+              updatedAt: page.updatedAt || date,
               posts,
               pagination: {
                 hasPrev: index !== totalPages - 1,
                 hasNext: index !== 0,
                 total: totalPages,
                 current: index + 1,
-                prevLink: getPaginationLink(
-                  index + 2,
-                  page.attributes.permalink
-                ),
-                nextLink: getPaginationLink(index, page.attributes.permalink)
+                prevLink: getPaginationLink(index + 2, page.permalink),
+                nextLink: getPaginationLink(index, page.permalink)
               }
             })
             Object.assign(newPage, pageProp)

packages/saber-plugin-transformer-html/lib/index.js

@@ -10,9 +10,9 @@ exports.apply = api => {
         page.content
       )
       const { html, blocks } = extractSFCBlocks(body)
+      Object.assign(page, frontmatter)
       page.content = html
       page.internal.hoistedTags = blocks
-      Object.assign(page.attributes, frontmatter)
     },
     getPageComponent(page) {
       return `<template>

packages/saber-plugin-transformer-pug/lib/index.js

@@ -21,9 +21,9 @@ exports.apply = api => {
         basedir: dirname
       })
       const { html: pageContent, blocks } = extractSFCBlocks(html)
+      Object.assign(page, frontmatter)
       page.content = pageContent
       page.internal.hoistedTags = blocks
-      Object.assign(page.attributes, frontmatter)
     },
     getPageComponent(page) {
       return `<template>

packages/saber/example/saber-node.js

@@ -1,5 +1,5 @@
 exports.onCreatePage = function(page) {
-  if (page.attributes.permalink === '/') {
-    page.attributes.foo = 'ass'
+  if (page.permalink === '/') {
+    page.foo = 'ass'
   }
 }