changed post slugs to permalink slugs and improvements in amp pages and updated readme file and version update

Author: shyamlohar

example/site-config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  siteUrl: "https://wp-balsa-preview.draftbox.co", // Site domain. Do not include a trailing slash!
+  siteUrl: "https://wp-libre-preview.draftbox.co", // Site domain. Do not include a trailing slash!
 
   postsPerPage: 10, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)
 
@@ -14,7 +14,7 @@ module.exports = {
   siteIcon: "favicon.png", // Logo in /static dir used for SEO, RSS, and App manifest
   backgroundColor: "#e9e9e9", // Used for Offline Manifest
   themeColor: "#15171A", // Used for Offline Manifest
-  apiUrl: "https://wordpress.theasdfghjkl.com", 
+  apiUrl: "https://wordpress.theasdfghjkl.com",
   subscribeWidget: {
     title: "Subscribe to Draftbox",
     helpText: "Get the latest posts delivered right to your inbox.",
@@ -24,11 +24,11 @@ module.exports = {
     navigation: [
       {
         label: "Home",
-        url: "https://wp-balsa-preview.draftbox.co/",
+        url: "https://wp-libre-preview.draftbox.co/",
       },
       {
         label: "Contact",
-        url: "https://wp-balsa-preview.draftbox.co/contact",
+        url: "https://wp-libre-preview.draftbox.co/contact",
       },
     ],
   },
@@ -37,19 +37,19 @@ module.exports = {
     navigation: [
       {
         label: "Home",
-        url: "https://wp-balsa-preview.draftbox.co/",
+        url: "https://wp-libre-preview.draftbox.co/",
       },
       {
         label: "Sitemap",
-        url: "https://wp-balsa-preview.draftbox.co/sitemap.xml",
+        url: "https://wp-libre-preview.draftbox.co/sitemap.xml",
       },
       {
         label: "RSS",
-        url: "https://wp-balsa-preview.draftbox.co/rss.xml",
+        url: "https://wp-libre-preview.draftbox.co/rss.xml",
       },
       {
         label: "Contact",
-        url: "https://wp-balsa-preview.draftbox.co/contact",
+        url: "https://wp-libre-preview.draftbox.co/contact",
       },
       {
         label: "External Link",

gatsby-wordpress-theme-libre/README.md

@@ -48,21 +48,75 @@ If you want to add this blog theme to an existing site, follow these instruction
 ```js
 //siteConfig.js
 module.exports = {
-  siteUrl: "http://localhost:9000", // Site domain. Do not include a trailing slash!
+  siteUrl: "https://wp-libre-preview.draftbox.co", // Site domain. Do not include a trailing slash!
 
-  postsPerPage: 2, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)
+  postsPerPage: 10, // Number of posts shown on paginated pages (changes this requires sometimes to delete the cache)
 
-  siteTitleMeta: "Wordpress Gatsby Starter", // This allows an alternative site title for meta data for pages.
+  siteTitleMeta: "Built with Draftbox", // This allows an alternative site title for meta data for pages.
   siteDescriptionMeta:
-    "A starter template to build amazing static websites with Wordpress and Gatsby", // This allows an alternative site description for meta data for pages.
+    "Lightning fast, secure front-end for your WordPress or Ghost blog, without coding", // This allows an alternative site description for meta data for pages.
 
   shareImageWidth: 1000, // Change to the width of your default share image
   shareImageHeight: 523, // Change to the height of your default share image
 
-  shortTitle: "Wordpress", // Used for App manifest e.g. Mobile Home Screen
+  shortTitle: "Built with Draftbox", // Used for App manifest e.g. Mobile Home Screen
   siteIcon: "favicon.png", // Logo in /static dir used for SEO, RSS, and App manifest
   backgroundColor: "#e9e9e9", // Used for Offline Manifest
-  themeColor: "#15171A" // Used for Offline Manifest
+  themeColor: "#15171A", // Used for Offline Manifest
+  apiUrl: "https://wordpress.theasdfghjkl.com",
+  subscribeWidget: {
+    title: "Subscribe to Draftbox",
+    helpText: "Get the latest posts delivered right to your inbox.",
+    successMessage: "Thanks for subscribing to Draftbox.",
+  },
+  header: {
+    navigation: [
+      {
+        label: "Home",
+        url: "https://wp-libre-preview.draftbox.co/",
+      },
+      {
+        label: "Contact",
+        url: "https://wp-libre-preview.draftbox.co/contact",
+      },
+    ],
+  },
+  footer: {
+    copyright: "Built with Draftbox",
+    navigation: [
+      {
+        label: "Home",
+        url: "https://wp-libre-preview.draftbox.co/",
+      },
+      {
+        label: "Sitemap",
+        url: "https://wp-libre-preview.draftbox.co/sitemap.xml",
+      },
+      {
+        label: "RSS",
+        url: "https://wp-libre-preview.draftbox.co/rss.xml",
+      },
+      {
+        label: "Contact",
+        url: "https://wp-libre-preview.draftbox.co/contact",
+      },
+      {
+        label: "External Link",
+        url: "https://spectrum.chat/gatsby-js/themes?tab=posts",
+      },
+    ],
+  },
+  socialLinks: {
+    twitter: "https://twitter.com/draftboxhq",
+    facebook: "https://facebook.com/",
+    instagram: "https://www.instagram.com/",
+    linkedin: "https://linkedin.com/",
+    github: "https://github.com/draftbox-co",
+  },
+  contactWidget: {
+    title: "Contact Built with Draftbox",
+    successMessage: "We’ll get in touch with you soon.",
+  },
 };
 ```
 
@@ -115,20 +169,22 @@ If your blog is hosted on wordpress.com you will have to add few extra keys for
          resolve: `@draftbox-co/gatsby-wordpress-theme-libre`,
          options: {
            wordpressConfig,
-           siteConfig: siteConfig
-         }
-       }
-     ]
+           siteConfig: siteConfig,
+         },
+       },
+     ],
    };
    ```
 
 ## Authors
+
 - Arun Priyadarshi ([@Gunnerforlife](https://github.com/Gunnerforlife)) – [Draftbox](https://draftbox.co)
 - Keyur Raval ([@thandaanda](https://github.com/thandaanda)) – [Draftbox](https://draftbox.co)
 - Shyam Lohar ([@shyamlohar](https://github.com/shyamlohar)) – [Draftbox](https://draftbox.co)
 - Tanmay Desai ([@tanmaydesai89](https://github.com/tanmaydesai89)) – [Draftbox](https://draftbox.co)
 
 ## Contributions
+
 PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others.
 
 # Copyright & License

gatsby-wordpress-theme-libre/gatsby-node.js

@@ -50,6 +50,22 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
     },
   });
 
+  createFieldExtension({
+    name: "permaLinkSlug",
+    extend(options, prevFieldConfig) {
+      return {
+        resolve(source, context) {
+          if (source.link) {
+            const pathName = new URL(source.link).pathname;
+            return pathName;
+          } else {
+            return "";
+          }
+        },
+      };
+    },
+  });
+
   createFieldExtension({
     name: "plainExcerpt",
     extend() {
@@ -108,6 +124,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
       plainTitle: String @plainTitle
       tags_custom: [wordpress__TAG] @tags_custom
       featured_media_custom: wordpress__wp_media @featured_media_custom
+      permaLinkSlug: String @permaLinkSlug
     }
   `);
 
@@ -203,7 +220,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           edges {
             node {
               id
-              slug
+              slug: permaLinkSlug
             }
           }
         }
@@ -261,7 +278,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
 
   posts.forEach((post, i, arr) => {
     createPage({
-      path: `/${post.node.slug}`,
+      path: `${post.node.slug}`,
       component: postTemplate,
       context: {
         slug: post.node.slug,
@@ -271,7 +288,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     });
 
     createPage({
-      path: `/${post.node.slug}/amp`,
+      path: `${post.node.slug}amp`,
       component: postAmpTemplate,
       context: {
         slug: post.node.slug,

gatsby-wordpress-theme-libre/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbox-co/gatsby-wordpress-theme-libre",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "license": "MIT",
   "resolutions": {
     "sharp": "0.23.4"

gatsby-wordpress-theme-libre/src/amp-styles/post.amp.css

@@ -636,3 +636,36 @@ select {
   float: left;
   width: 45%;
 }
+
+amp-img img {
+  object-fit: contain;
+}
+
+.tags .tag {
+  margin-left: 10px;
+  color: cornflowerblue;
+}
+
+.tag:hover {
+  color: black;
+}
+
+.comment-button-container {
+  margin: 2.25rem auto;
+  text-align: center;
+}
+
+.comment-button-container button {
+  background: transparent;
+  border-style: solid;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: darkgray;
+  padding: 8px 22px;
+}
+
+.comment-button-container a {
+  color: cornflowerblue;
+  font-weight: 600;
+  text-decoration: none;
+}

gatsby-wordpress-theme-libre/src/templates/post.amp.js

@@ -15,7 +15,7 @@ const PostTemplate = ({ data, location, pageContext }) => {
         <nav className="blog-title">
           <Link to="/">
             <span
-              dangerouslySetInnerHTML={{ __html: pageContext.title }}
+              dangerouslySetInnerHTML={{ __html: data.wordpressPost.title }}
             ></span>
           </Link>
         </nav>
@@ -64,6 +64,24 @@ const PostTemplate = ({ data, location, pageContext }) => {
             className="post-content"
             dangerouslySetInnerHTML={{ __html: data.wordpressPost.content }}
           ></section>
+
+          {data.wordpressPost.tags && data.wordpressPost.tags.length > 0 && (
+            <div className="tags">
+              <span>Tag:</span>
+              <a
+                className="tag"
+                href={`/tag/${data.wordpressPost.tags[0].slug}`}
+              >
+                {data.wordpressPost.tags[0].name}
+              </a>
+            </div>
+          )}
+
+          <div className="comment-button-container">
+            <button>
+              <a href={`${data.wordpressPost.slug}`}>Leave a comment</a>
+            </button>
+          </div>
         </article>
       </main>
     </>
@@ -74,10 +92,10 @@ export default PostTemplate;
 
 export const pageQuery = graphql`
   query($slug: String!) {
-    wordpressPost(slug: { eq: $slug }) {
+    wordpressPost(permaLinkSlug: { eq: $slug }) {
       title
       plainExcerpt
-      slug
+      slug: permaLinkSlug
       content
       date(formatString: "DD MMMM YYYY")
       featured_media: featured_media_custom {
@@ -94,6 +112,10 @@ export const pageQuery = graphql`
         name
         slug
       }
+      tags: tags_custom {
+        name
+        slug
+      }
     }
   }
 `;

gatsby-wordpress-theme-libre/src/templates/post.js

@@ -294,18 +294,18 @@ export default Post;
 
 export const postQuery = graphql`
   query($slug: String, $prev: String, $next: String) {
-    wordpressPost(slug: { eq: $slug }) {
+    wordpressPost(permaLinkSlug: { eq: $slug }) {
       ...WordPressPostData
     }
 
     prev: wordpressPost(id: { eq: $prev }) {
       title
-      slug
+      slug: permaLinkSlug
     }
 
     next: wordpressPost(id: { eq: $next }) {
       title
-      slug
+      slug: permaLinkSlug
     }
   }
 `;

gatsby-wordpress-theme-libre/src/utils/fragments.js

@@ -18,7 +18,7 @@ export const wordPressPostData = graphql`
     content
     excerpt
     plainExcerpt
-    slug
+    slug: permaLinkSlug
     categories {
       name
       slug

yarn.lock

@@ -1738,11 +1738,6 @@
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-0.0.30.tgz#dc1e40f7af3b9c815013a7860e6252f6352a84df"
   integrity sha512-orGL5LXERPYsLov6CWs3Fh6203+dXzJkR7OnddIr2514Hsecwc8xRpzCapshBbKFImCsvS/mk6+FWiN5LyZJAQ==
 
-"@types/eslint-visitor-keys@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
-  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
-
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -1918,6 +1913,11 @@
   version "2.30.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.30.0.tgz#7681c305a6f4341ae2579f5e3a75846c29eee9ce"
   integrity sha512-9kDOxzp0K85UnpmPJqUzdWaCNorYYgk1yZmf4IKzpeTlSAclnFsrLjfwD9mQExctLoLoGAUXq1co+fbr+3HeFw==
+  dependencies:
+    "@types/eslint-visitor-keys" "^1.0.0"
+    "@typescript-eslint/experimental-utils" "2.30.0"
+    "@typescript-eslint/typescript-estree" "2.30.0"
+    eslint-visitor-keys "^1.1.0"
 
 "@typescript-eslint/typescript-estree@2.30.0":
   version "2.30.0"