Merge pull request #230 from kontent-ai/timezone-example

Timezone example

package.json

@@ -23,6 +23,7 @@
     "lint": "npm run lint --workspaces",
     "lint:fix": "run lint --workspaces -- --fix",
     "test": "npm run test --workspaces",
+    "clean:site": "npm run clean --workspace=@kontent-ai/gatsby-starter-kontent-hello-world",
     "build": "npm run build --workspaces",
     "build:source": "npm run build --workspace=@kontent-ai/gatsby-source",
     "build:components": "npm run build --workspace=@kontent-ai/gatsby-components ",

site/README.md

@@ -69,6 +69,10 @@ The best solution is to use [Kontent.ai Image transformation API](https://docs.k
 
 > See the ["author page"](./src/pages/author.js) as a showcase, how you could render the profile photo different way ([live preview](https://kontent-gatsby-packages.netlify.app/author)).
 
+## Timezone
+
+If you want to see how to fetch the timezone information, see the See the ["articles page"](./src/pages/articles.js).
+
 ---
 
 Based on [official Gatsby Hello World starter](https://github.com/gatsbyjs/gatsby-starter-hello-world).

site/src/pages/articles.js

@@ -14,11 +14,12 @@ const Articles = (props) => {
         ));
 
         return (<div style={{ padding: ".5em", margin: ".5em", background: "silver" }}>
+          <div><strong>({variant.preferred_language}{variant.preferred_language !== variant.system.language ? ` -> ${variant.system.language}` : null})</strong></div>
+          <div><i>Date:</i> {variant.elements.date.value}{variant.elements.date.display_timezone && ` (${variant.elements.date.display_timezone})`}</div>
           <div>
-            <strong>({variant.preferred_language}{variant.preferred_language !== variant.system.language ? ` -> ${variant.system.language}` : null})</strong>
-              Title: {variant.elements.title.value}
+            <i>Title:</i> {variant.elements.title.value}
           </div>
-          <div>Description: {variant.elements.description.value}</div>
+          <div><i>Description:</i> {variant.elements.description.value}</div>
           <div style={{ padding: "0.5em", display: "flex", flexWrap: "wrap" }}>{tags}</div>
         </div>
         )
@@ -60,6 +61,10 @@ export const query = graphql`
           title {
             value
           }
+          date {
+            value
+            display_timezone
+          }
           description {
             value
           }