chore: add demo site + restructure to yarn workspace

.gitignore

@@ -1,5 +1,70 @@
-node_modules
-config.js
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# dotenv environment variable files
+.env*
+!.env.EXAMPLE
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
 
 # Yarn
 yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity

.prettierignore

@@ -0,0 +1,2 @@
+.cache
+public

demo/.env.EXAMPLE

@@ -0,0 +1,5 @@
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=
+CLOUDINARY_CLOUD_NAME=
+
+CLOUDINARY_SOURCE_PREFIX=

demo/gatsby-config.js

@@ -0,0 +1,32 @@
+require('dotenv').config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby Source Cloudinary Starter`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-image`,
+    },
+    {
+      resolve: `gatsby-source-cloudinary`,
+      options: {
+        cloudName: process.env.CLOUDINARY_CLOUD_NAME,
+        apiKey: process.env.CLOUDINARY_API_KEY,
+        apiSecret: process.env.CLOUDINARY_API_SECRET,
+        resourceType: `image`,
+        context: true,
+        maxResults: 10,
+        prefix: process.env.CLOUDINARY_SOURCE_PREFIX,
+      },
+    },
+    {
+      resolve: `gatsby-transformer-cloudinary`,
+      options: {
+        transformTypes: ['CloudinaryMedia'],
+      },
+    },
+  ],
+};

demo/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "demo",
+  "private": true,
+  "description": "A simple demo to for gatsby-source-cloudinary",
+  "version": "0.1.0",
+  "dependencies": {
+    "gatsby": "^4.14.1",
+    "gatsby-plugin-image": "2.23.1",
+    "gatsby-source-cloudinary": "0.2.0",
+    "gatsby-transformer-cloudinary": "3.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
+  },
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  }
+}

demo/src/pages/404.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+const NotFoundPage = () => (
+  <main>
+    <h1>404: Not Found</h1>
+    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
+  </main>
+);
+
+export default NotFoundPage;

demo/src/pages/index.js

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { graphql } from 'gatsby';
+import { GatsbyImage, getImage } from 'gatsby-plugin-image';
+
+export default function IndexPage({ data }) {
+  return (
+    <div style={{ fontFamily: 'monospace', textAlign: 'center' }}>
+      <header>
+        <h1>Gatsby Source Plugin Demo</h1>
+      </header>
+
+      <main>
+        <table>
+          <colgroup>
+            <col style={{ width: '20%', backgroundColor: 'ghostwhite' }} />
+            <col
+              span="4"
+              style={{
+                width: '20%',
+                backgroundColor: 'floralwhite',
+              }}
+            />
+          </colgroup>
+
+          <tr>
+            <th>gatsby-source-cloudinary</th>
+            <th colSpan={5}>
+              gatsby-source-cloudinary + gatsby-transformer-cloudinary +
+              gatsby-plugin-image
+            </th>
+          </tr>
+
+          <tr>
+            <th>Plain</th>
+            <th>Grayscle</th>
+            <th>Tint</th>
+            <th>Ken Burns</th>
+            <th>Plain</th>
+          </tr>
+
+          {data.allCloudinaryMedia.nodes.map((media) => {
+            const { secure_url } = media;
+            const example1Image = getImage(media.example1ImageData);
+            const example2Image = getImage(media.example2ImageData);
+            const example3Image = getImage(media.example3ImageData);
+            const gatsbyImage = getImage(media);
+
+            return (
+              <tr>
+                <td>
+                  <img
+                    width="300"
+                    style={{ maxWidth: '100%', display: 'block' }}
+                    src={secure_url}
+                    alt="no alt :("
+                  />
+                </td>
+                <td>
+                  <GatsbyImage
+                    style={{ maxWidth: '100%' }}
+                    image={example1Image}
+                    alt="no alt"
+                  />
+                </td>
+                <td>
+                  <GatsbyImage image={example2Image} alt="no alt" />
+                </td>
+                <td>
+                  <GatsbyImage image={example3Image} alt="no alt" />
+                </td>
+                <td>
+                  <GatsbyImage image={gatsbyImage} alt="no alt" />
+                </td>
+              </tr>
+            );
+          })}
+        </table>
+      </main>
+    </div>
+  );
+}
+
+export const query = graphql`
+  query {
+    allCloudinaryMedia {
+      nodes {
+        secure_url
+        gatsbyImageData(width: 300, placeholder: BLURRED)
+        example1ImageData: gatsbyImageData(
+          width: 300
+          transformations: ["e_grayscale"]
+          placeholder: TRACED_SVG
+        )
+        example2ImageData: gatsbyImageData(
+          width: 300
+          transformations: ["e_tint:equalize:80:blue:blueviolet"]
+          backgroundColor: "PaleTurquoise"
+        )
+        example3ImageData: gatsbyImageData(
+          width: 300
+          transformations: ["e_zoompan"]
+          chained: ["e_loop", "f_gif"]
+          backgroundColor: "Lavender"
+        )
+      }
+    }
+  }
+`;

package.json

@@ -1,22 +1,17 @@
 {
-  "name": "gatsby-source-cloudinary",
-  "version": "0.2.0",
-  "description": "Gatsby source plugin to fetch files from Cloudinary into Gatsby.",
-  "main": "gatsby-node.js",
-  "repository": "https://github.com/Chuloo/gatsby-source-cloudinary.git",
+  "private": true,
+  "workspaces": [
+    "plugin",
+    "demo"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "develop": "yarn workspace demo develop",
+    "build": "yarn workspace demo build",
+    "serve": "yarn workspace demo serve",
+    "clean": "yarn workspace demo clean",
+    "format": "prettier --write \".\""
   },
-  "keywords": [
-    "gatsby",
-    "gatsby-plugin",
-    "cloudinary",
-    "gatsby-source-cloudinary"
-  ],
-  "author": "Ugonna William Imoh",
-  "license": "MIT",
-  "dependencies": {
-    "cloudinary": "^1.30.0",
-    "lodash": "^4.17.21"
+  "devDependencies": {
+    "prettier": "^2.6.2"
   }
 }

plugin/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "gatsby-source-cloudinary",
+  "version": "0.2.0",
+  "description": "Gatsby source plugin to fetch files from Cloudinary into Gatsby.",
+  "main": "gatsby-node.js",
+  "repository": "https://github.com/cloudinary-devs/gatsby-source-cloudinary",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "cloudinary",
+    "gatsby-source-cloudinary"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "cloudinary": "^1.30.0",
+    "lodash": "^4.17.21"
+  }
+}