feat(slug): add speakingurl, auto generate slug & new url field

BREAKING CHANGE: `slug` will now only contain the slugified title (no path)
add `url` field, constructed of language, possible `/blog/` prefix and the `slug`

gatsby-node.js

@@ -1,12 +1,12 @@
 const { resolve, join } = require(`path`)
 const { writeFileSync } = require(`fs`)
-const { homepage } = require(`./package.json`)
 const moment = require(`moment`)
 const { compareAsc, parse: parseDate } = require(`date-fns`)
 const mkDir = require(`make-dir`)
 const { Feed } = require(`feed`)
 const { shuffle } = require(`lodash`)
 const R = require(`ramda`)
+const speakingUrl = require(`speakingurl`)
 const { homepage } = require(`./package.json`)
 const { redirects } = require(`./redirects.js`)
 // const dotenv = require(`dotenv`).config({
@@ -60,7 +60,26 @@ const prepareSortedTuple = R.compose(
   sortByDirectory
 )
 const sortEnglishLast = R.sortBy(R.path([`frontmatter`, `lang`]))
-const notIsErrorPage = node => node.frontmatter.is !== `ErrorPage`
+const notIsErrorPage = node => node.frontmatter.layout !== `ErrorPage`
+const isHomePage = node => node.frontmatter.layout === `HomePage`
+// TODO: maybe use slugify?
+const getSlug = node =>
+  speakingUrl(node.frontmatter.slug || node.frontmatter.title, {
+    lang: node.frontmatter.lang,
+  })
+const getUrl = node =>
+  [
+    ``,
+    node.frontmatter.lang,
+    isPost(node) ? `blog` : null,
+    isHomePage(node) ? null : getSlug(node),
+    ``,
+  ]
+    .filter(x => x !== null)
+    .join(`/`)
+// `/${node.frontmatter.lang}${isPost(node) && `/blog`}/${speakingUrl(node.frontmatter.title, {
+//         node.frontmatter.lang,
+//       })}`
 
 exports.onCreateNode = ({ node, actions }) => {
   const { createNodeField } = actions
@@ -74,7 +93,9 @@ exports.onCreateNode = ({ node, actions }) => {
       })
 
     addNodeField(`type`, isPost(node) ? `post` : `page`)
-    addNodeField(`slug`, node.frontmatter.slug)
+    // strip language from slug field
+    addNodeField(`slug`, getSlug(node))
+    addNodeField(`url`, getUrl(node))
     addNodeField(`lang`, node.frontmatter.lang)
     addNodeField(`dateTime`, theMoment.toISOString())
     addNodeField(`dateStr`, theMoment.format(`Y-MM-DD`))
@@ -97,28 +118,24 @@ exports.createPages = async ({ actions, getNodes, graphql }) => {
 
   prepareSortedTuple(PagesAndPosts).forEach((group, index) =>
     sortEnglishLast(group).forEach((node, _, array) => {
-      const { lang, slug } = node.fields
+      const { lang, url, slug } = node.fields
       const { layout, shortId, shortlink, oldId, oldSlug } = node.frontmatter
 
-      createPage({
-        path: node.fields.slug,
-        component: resolve(`./src/templates/${layout}.js`),
-        context: {
-          slug: node.fields.slug,
-          lang: node.fields.lang,
-        },
-      })
+      console.log(`${slug} => ${url}`)
+
+      const component = resolve(`./src/templates/${layout}.js`)
+      const context = { url, slug, lang }
+
+      createPage({ component, path: url, context })
+
       // create root 404
-      if (layout === `404` && node.fields.lang === `en`) {
+      slug === `404` &&
+        lang === `en` &&
         createPage({
+          component,
           path: `/404`,
-          component: resolve(`./src/templates/${layout}.js`),
-          context: {
-            slug: node.fields.slug,
-            lang: node.fields.lang,
-          },
+          context,
         })
-      }
 
       createNodeField({
         node,

package.json

@@ -99,6 +99,7 @@
     "rehype-react": "^3.0.3",
     "slash": "^2.0.0",
     "slugify": "^1.2.9",
+    "speakingurl": "^14.0.1",
     "typeface-amatic-sc": "^0.0.54",
     "typeface-quicksand": "^0.0.54",
     "typography": "^0.16.17",

src/components/ArticlePreview.js

@@ -6,7 +6,7 @@ import { colors } from '@/theme'
 
 const ArticlePreview = ({ article, isVisible, ...props }) => (
   <article css={articleStyles.article(isVisible)} {...props}>
-    <Link to={article.fields.slug}>
+    <Link to={article.fields.url}>
       {article.frontmatter.cover && (
         <Img fluid={article.frontmatter.cover.childImageSharp.fluid} />
       )}
@@ -23,7 +23,7 @@ const ArticlePreview = ({ article, isVisible, ...props }) => (
     <footer css={articleStyles.footer}>
       <div css={articleStyles.footerInner}>
         <time css={articleStyles.time}>{article.fields.dateStrLocalized}</time>
-        <Link to={article.fields.slug}>{`read more`}</Link>
+        <Link to={article.fields.url}>{`read more`}</Link>
       </div>
     </footer>
   </article>

src/components/Footer/index.js

@@ -149,8 +149,8 @@ const Footer = ({
         {legal.length &&
           legal.map(({ node }) => (
             <Link
-              to={node.frontmatter.slug}
-              key={node.frontmatter.slug}
+              to={node.fields.url}
+              key={node.fields.url}
               css={{ marginRight: `.5rem` }}
             >
               {node.frontmatter.title}

src/components/Header/index.js

@@ -43,14 +43,16 @@ class Header extends Component {
         <div css={style.headerTop}>
           <div css={style.topInner}>
             <div css={style.headerBrand}>
-              <Link to={homepage.slug} css={style.headerLink}>
+              <Link to={homepage.fields.url} css={style.headerLink}>
                 <h2>
-                  {homepage.header.title}
-                  {homepage.header.subtitle && ` - ${homepage.header.subtitle}`}
+                  {homepage.frontmatter.header.title}
+                  {homepage.frontmatter.header.subtitle &&
+                    ` - ${homepage.frontmatter.header.subtitle}`}
                 </h2>
               </Link>
             </div>
 
+            {/* TODO: remember lang in local FORAGE? to show correct in 404 */}
             <nav css={style.headerMeta}>
               {meta.map((link, index) => (
                 <div

src/components/MainLayout/fragments.js

@@ -89,13 +89,15 @@ export const Fragments = graphql`
     ) {
       edges {
         node {
+          fields {
+            url
+          }
           frontmatter {
             title
             titleShort
             menu
             slug
             lang
-            #icon
           }
         }
       }
@@ -106,6 +108,9 @@ export const Fragments = graphql`
     homepage: javascriptFrontmatter(
       frontmatter: { lang: { eq: $lang }, layout: { eq: "HomePage" } }
     ) {
+      fields {
+        url
+      }
       frontmatter {
         lang
         title
@@ -124,9 +129,11 @@ export const Fragments = graphql`
     ) {
       edges {
         node {
+          fields {
+            url
+          }
           frontmatter {
             lang
-            slug
             title
           }
         }

src/components/MainLayout/index.js

@@ -48,14 +48,14 @@ const generateMainMenu = items =>
     .map(({ node }) => ({
       title: node.frontmatter.title,
       titleShort: node.frontmatter.titleShort,
-      to: node.frontmatter.slug,
+      to: node.fields.url,
     }))
 
 const generateMetaMenu = ({ translations, getLang, menuItems }) =>
   translations
     .map(x => ({
       ...getLang(x.frontmatter.lang),
-      to: x.frontmatter.slug,
+      to: x.fields.url,
     }))
     .concat(
       menuItems
@@ -64,7 +64,7 @@ const generateMetaMenu = ({ translations, getLang, menuItems }) =>
           title: node.frontmatter.title,
           titleShort: node.frontmatter.titleShort,
           icon: node.frontmatter.icon,
-          to: node.frontmatter.slug,
+          to: node.fields.url,
         }))
     )
 
@@ -76,6 +76,9 @@ const getTranslations = page =>
   [
     ...(page.fields.translations || []),
     {
+      fields: {
+        url: page.fields.url,
+      },
       frontmatter: {
         lang: page.frontmatter.lang,
         slug: page.frontmatter.slug,
@@ -216,7 +219,7 @@ class MainLayout extends Component {
           <meta property="og:site_name" content={site.siteMetadata.title} />
           <meta
             property="og:url"
-            content={`${site.siteMetadata.siteUrl}${page.frontmatter.slug}`}
+            content={`${site.siteMetadata.siteUrl}${page.fields.url}`}
           />
           <meta
             property="og:locale"
@@ -289,7 +292,7 @@ class MainLayout extends Component {
             />
           )} */}
           <html lang={lang} />
-          {/* <body className={slugify(page.frontmatter.slug)} /> */}
+          {/* <body className={slugify(page.fields.url)} /> */}
         </Helmet>
 
         <a href="#main" css={screenReaderAndFocusable}>
@@ -304,7 +307,7 @@ class MainLayout extends Component {
         )}
 
         <Header
-          homepage={homepage.frontmatter}
+          homepage={homepage}
           meta={metaMenu}
           menu={mainMenu}
           logo={SiteMeta.frontmatter.assets.logo.image}

src/components/Newsticker/NewstickerItem.js

@@ -17,21 +17,21 @@ const NewstickerItem = ({ item, readmoreLabel, layout, ...props }) => {
         }}
       >
         {coverImage && (
-          <Link to={item.frontmatter.slug} css={styles.imageWrapper(layout)}>
+          <Link to={item.fields.url} css={styles.imageWrapper(layout)}>
             <Img fluid={coverImage} css={styles.image} />
           </Link>
         )}
 
         <div>
           <h2 css={styles.title(layout)}>
-            <Link to={item.frontmatter.slug}>{item.frontmatter.title}</Link>
+            <Link to={item.fields.url}>{item.frontmatter.title}</Link>
           </h2>
 
           <p css={styles.excerpt}>
             {item.excerpt || item.frontmatter.summary}
 
             {readmoreLabel && (
-              <Link to={item.frontmatter.slug} css={styles.readmoreLink}>
+              <Link to={item.fields.url} css={styles.readmoreLink}>
                 {readmoreLabel}
               </Link>
             )}

src/components/Newsticker/index.js

@@ -134,6 +134,7 @@ export const fragment = graphql`
     html
     fields {
       lang
+      url
     }
   }
 

src/templates/AboutPage.js

@@ -216,7 +216,11 @@ export const query = graphql`
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
       fields {
+        url
         translations {
+          fields {
+            url
+          }
           frontmatter {
             title
             lang

src/templates/BlogPage.js

@@ -161,7 +161,7 @@ const BlogPage = props => {
           </Link>
 
           {filter && (
-            <Link to={props.data.page.frontmatter.slug}>
+            <Link to={props.data.page.fields.url}>
               {props.data.page.frontmatter.sortLabels.all}
             </Link>
           )}
@@ -225,7 +225,11 @@ export const query = graphql`
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
       fields {
+        url
         translations {
+          fields {
+            url
+          }
           frontmatter {
             title
             lang
@@ -299,6 +303,7 @@ export const query = graphql`
             }
           }
           fields {
+            url
             slug
             lang
             dateTime

src/templates/BlogPost.js

@@ -216,7 +216,11 @@ export const query = graphql`
         dateTime
         dateStr
         dateStrLocalized
+        url
         translations {
+          fields {
+            url
+          }
           frontmatter {
             title
             lang
@@ -243,6 +247,9 @@ export const query = graphql`
         }
         suggested {
           excerpt(pruneLength: 135)
+          fields {
+            url
+          }
           frontmatter {
             id
             title

src/templates/ContactPage.js

@@ -219,7 +219,11 @@ export const query = graphql`
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
       fields {
+        url
         translations {
+          fields {
+            url
+          }
           frontmatter {
             title
             lang

src/templates/DonatePage.js

@@ -55,7 +55,11 @@ export const query = graphql`
 
     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
       fields {
+        url
         translations {
+          fields {
+            url
+          }
           frontmatter {
             title
             lang

src/templates/GalleryPage.js

@@ -237,7 +237,11 @@
 
 //     page: javascriptFrontmatter(frontmatter: { slug: { eq: $slug } }) {
 //       fields {
+// url
 //         translations {
+// fields {
+//   url
+// }
 //           frontmatter {
 //             title
 //             lang