wkocjan/gatsby-contentful-portfolio

Portfolio theme for Gatsby

Hello, I'm Wojciech! 👋

I’m a Product Engineer with a Front-end focus.

I learned HTML and launched my first website back in 2001 when I was in high school. Since then I've experienced the web industry in many different roles and angles.

I enjoy the entire scope of the product development process. I care not only about the code, but always try to understand the product, and the problem it solves.

I'm a fan of agile/lean methodologies. I like working remotely and know how to do it effectively. I’m constantly learning new stuff, usually by working on side projects.

👷 I'm currently working on TeamBuddy - the app which helps build and maintain a great team culture.

gatsby-contentful-portfolio's Issues

Creating Pages For Tags

Each of my posts on Contentful has some associated categories with it. For example, one post might contain:

major: "HCD"
year: "1st Year"
tools: ["R", "Python", "Wordpress"]

On the website:

I am trying to create a page for each of these categories and tags. For example, if a user clicks on Photoshop, they should be taken to a page tags/photoshop and all posts containing that tag should be listed out.

Fortunately, I was able to find this guide to help me do this. However, the guide is not for Contentful data so I'm having a bit of trouble on how to do this. I have created the tagsTemplate.jsx and but I'm stuck at creating the actual pages.

My gatsby-node.js file looks like this:

const path = require(`path`)
const _ = require('lodash');

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type contentfulPortfolioDescriptionTextNode implements Node {
      description: String
      major: String
      author: String
      tools: [String]
      files: [ContentfulAsset]
      contact: String
    }
    type ContentfulPortfolio implements Node {
      description: contentfulPortfolioDescriptionTextNode
      gallery: [ContentfulAsset]
      id: ID!
      name: String!
      related: [ContentfulPortfolio]
      slug: String!
      major: String!
      files: [ContentfulAsset]
      author: String!
      tools: [String]!
      year: String!
      thumbnail: ContentfulAsset
      url: String
      contact: String
    }
  `
  createTypes(typeDefs)
}

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    graphql(`
      {
        portfolio: allContentfulPortfolio {
          nodes {
            slug
            tools
          }
        }
      }
    `).then(({ errors, data }) => {
      if (errors) {
        reject(errors)
      }

      if (data && data.portfolio) {
        const component = path.resolve("./src/templates/portfolio-item.jsx")
        data.portfolio.nodes.map(({ slug }) => {
          createPage({
            path: `/${slug}`,
            component,
            context: { slug },
          })
        })
      }
       
      const tools = data.portfolio.nodes.tools;
      const tagTemplate = path.resolve(`src/templates/tagsTemplate.js`);
      let tags = [];
      // Iterate through each post, putting all found tags into `tags`
      tags = tags.concat(tools);
       // Eliminate duplicate tags
      tags = _.uniq(tags);
      
       // Make tag pages
       tags.forEach(tag => {
        createPage({
          path: `/tags/${_.kebabCase(tag)}/`,
          component: tagTemplate,
          context: {
            tag,
          },
        });
      });
      resolve()
    })
  })
}

When I visit the page for one of the tags I know exists (like photoshop), I get a 404. What am I doing wrong and how can I fix it?

how 2 add content?

please tell me how to add content ?? how to set up contentful.com ?

403 error

Hi,

Thank you for the great theme.
I keep getting a 403 error after I run npm run setup and input my details.
Any idea what could be causing this? The space id and tokens are correct not sure what to change.

Thanks

Fetching list of assets with names and links from Contentful

Hi!
First of all, thank you so much for the great theme. It has helped my project speed up by a factor of many weeks. I'm new to Gatsby (migrated from Hugo) and Contentful and GraphQL, so I'm making many mistakes but trying to learn alongside.

I've been trying to fetch a list of the names and associated links of all attached assets for a particular item. In my content type, I have a new field with the ID files, which is of the Media type. Each post now has a set of three-four files (CSVs, etc) that are uploaded with it. I assumed that this would be returned as an array of ContentfulAsset objects, so I've added the following to my gatsby-node.js:

    type contentfulPortfolioDescriptionTextNode implements Node {
      description: String
      major: String
      author: String
      tools: [String]
      files: [ContentfulAsset]
    }
    type ContentfulPortfolio implements Node {
      description: contentfulPortfolioDescriptionTextNode
      gallery: [ContentfulAsset]
      id: ID!
      name: String!
      related: [ContentfulPortfolio]
      slug: String!
      major: String!
      files: [ContentfulAsset]
      author: String!
      tools: [String]!
      year: String!
      thumbnail: ContentfulAsset
      url: String
    }

And in my portfolio-item.jsx, I have this:

export const query = graphql`
  query PortfolioItemQUery($slug: String!) {
    item: contentfulPortfolio(slug: { eq: $slug }) {
      description {
        description
      }
      major  
      author
      tools 
      files {
          file {
           fileName
           url
           }
        }
      name
      year
      related {
        ...PortfolioCard
      }
      url
    }
  }
`

Even after declaring it in props, I am not seeing any return of even messy text when I try out { files }.

It gives me the following error:

Error: Objects are not valid as a React child (found: object with keys {file}). If you meant to render a collection of children, use an array instead.

What am I doing wrong? How do I structure the query such that I receive:

1. File Name (the Title field while attaching the asset on contentful)
2. A link to the asset.

Hi, how i can edit import to netlify cms

HI, thanks for your amaizing portfollio, but i would like to edit the content on netlify cms, can u help me

Changing field type

Hi,

Just wondering is there a simple way to change the description from long text to a rich text field?
Maybe in the query in the portfolio item? I don't see a way in Contentful.

Would be very grateful. The theme is excellent just want to add images with the body text for a blog and I'm not an expert with queries. Many thanks!

delete the dumy content

Thanks for your effort on this template, my question please how could I delete the dummy contentful content like Iceland, Spain due to when I deleted from contentful or the json file it shows an error so could you please tell me how can I deleted it.
Thanks.

Difficulty deploying on Netlify when it works locally

Hello,

Thank you so much for this amazing Gatsby starter. I love it, and it is exactly what I have been looking for! It is logically designed and very clean and simple!

However, when I try to deploy the site on Netlify, the build fails. It does seem to build correctly locally, using either gatsby build or gatsby develop.

I am pasting the deploy log below, but I don't know if this is helpful. Please let me know if I can do anything else. Again, thank you so much.

8:01:20 PM: Build ready to start
8:01:24 PM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
8:01:24 PM: build-image tag: v3.4.1
8:01:24 PM: buildbot version: 8c957a6d09a03023cea4239847cc73a9cb64eeb7
8:01:24 PM: Fetching cached dependencies
8:01:24 PM: Failed to fetch cache, continuing with build
8:01:24 PM: Starting to prepare the repo for build
8:01:25 PM: No cached dependencies found. Cloning fresh repo
8:01:25 PM: git clone https://github.com/piyawill/portfolio
8:01:26 PM: Preparing Git Reference refs/heads/master
8:01:27 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'public' versus 'public/' in the Netlify UI
8:01:27 PM: Starting build script
8:01:27 PM: Installing dependencies
8:01:27 PM: Python version set to 2.7
8:01:29 PM: v12.18.0 is already installed.
8:01:30 PM: Now using node v12.18.0 (npm v6.14.4)
8:01:30 PM: Started restoring cached build plugins
8:01:30 PM: Finished restoring cached build plugins
8:01:30 PM: Attempting ruby version 2.7.1, read from environment
8:01:31 PM: Using ruby version 2.7.1
8:01:32 PM: Using PHP version 5.6
8:01:32 PM: 5.2 is already installed.
8:01:32 PM: Using Swift version 5.2
8:01:32 PM: Started restoring cached node modules
8:01:32 PM: Finished restoring cached node modules
8:01:32 PM: Installing NPM modules using NPM version 6.14.4
8:02:50 PM: > [email protected] install /opt/build/repo/node_modules/sharp
8:02:50 PM: > (node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)
8:02:50 PM: info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-linux-x64.tar.gz
8:02:53 PM: > [email protected] postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
8:02:53 PM: > node -e "try{require('./postinstall')}catch(e){}"
8:02:53 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js
8:02:53 PM: > node -e "try{require('./postinstall')}catch(e){}"
8:02:54 PM: > [email protected] postinstall /opt/build/repo/node_modules/core-js-pure
8:02:54 PM: > node -e "try{require('./postinstall')}catch(e){}"
8:02:56 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby-telemetry
8:02:56 PM: > node src/postinstall.js || true
8:02:56 PM: > [email protected] postinstall /opt/build/repo/node_modules/mozjpeg
8:02:56 PM: > node lib/install.js
8:02:57 PM: ✔ mozjpeg pre-build test passed successfully
8:02:57 PM: > [email protected] postinstall /opt/build/repo/node_modules/pngquant-bin
8:02:57 PM: > node lib/install.js
8:02:57 PM: ✔ pngquant pre-build test passed successfully
8:02:57 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli
8:02:57 PM: > node scripts/postinstall.js
8:02:57 PM: > [email protected] postinstall /opt/build/repo/node_modules/gatsby
8:02:57 PM: > node scripts/postinstall.js
8:02:58 PM: > [email protected] postinstall /opt/build/repo/node_modules/swiper
8:02:58 PM: > echo "Love Swiper? Support Vladimir's work by donating or pledging on patreon: > https://patreon.com/vladimirkharlampidi
8:02:58 PM: "
8:02:58 PM: Love Swiper? Support Vladimir's work by donating or pledging on patreon: > https://patreon.com/vladimirkharlampidi
8:02:58 PM: > [email protected] postinstall /opt/build/repo
8:02:58 PM: > node ./bin/hello.js
8:02:58 PM: Hey there! 👋
8:02:58 PM: Thanks for giving the gatsby-contentful-portfolio a try. 🎉
8:02:58 PM: To get you going really quickly this project includes a setup step.
8:02:58 PM: npm run setup automates the following steps for you:
8:02:58 PM: - creates a config file .env
8:02:58 PM: - imports a predefined content model
8:02:58 PM: When this is done run:
8:02:58 PM: gatsby develop to start a development environment at localhost:8000
8:02:58 PM: or
8:02:58 PM: gatsby build to create a production ready static site in ./public
8:03:01 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
8:03:01 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:03:01 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
8:03:01 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:03:01 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/babel-plugin-add-module-exports/node_modules/fsevents):
8:03:01 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:03:01 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
8:03:01 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
8:03:01 PM: added 3142 packages from 2035 contributors and audited 3156 packages in 88.429s
8:03:04 PM: 175 packages are looking for funding
8:03:04 PM: run npm fund for details
8:03:04 PM: found 7 vulnerabilities (2 low, 5 high)
8:03:04 PM: run npm audit fix to fix them, or npm audit for details
8:03:04 PM: NPM modules installed
8:03:05 PM: Started restoring cached go cache
8:03:05 PM: Finished restoring cached go cache
8:03:05 PM: go version go1.14.4 linux/amd64
8:03:05 PM: go version go1.14.4 linux/amd64
8:03:05 PM: Installing missing commands
8:03:05 PM: Verify run directory
8:03:06 PM: ​
8:03:06 PM: ┌─────────────────────────────┐
8:03:06 PM: │ Netlify Build │
8:03:06 PM: └─────────────────────────────┘
8:03:06 PM: ​
8:03:06 PM: ❯ Version
8:03:06 PM: @netlify/build 3.3.5
8:03:06 PM: ​
8:03:06 PM: ❯ Flags
8:03:06 PM: deployId: 5f6163e04af55900083f6cb4
8:03:06 PM: mode: buildbot
8:03:06 PM: ​
8:03:06 PM: ❯ Current directory
8:03:06 PM: /opt/build/repo
8:03:06 PM: ​
8:03:06 PM: ❯ Config file
8:03:06 PM: No config file was defined: using default values.
8:03:06 PM: ​
8:03:06 PM: ❯ Context
8:03:06 PM: production
8:03:06 PM: ​
8:03:06 PM: ┌───────────────────────────────────┐
8:03:06 PM: │ 1. Build command from Netlify app │
8:03:06 PM: └───────────────────────────────────┘
8:03:06 PM: ​
8:03:06 PM: $ gatsby build
8:03:09 PM: error We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.
8:03:09 PM:
8:03:09 PM: Error: Contentful space ID and the access token need to be provided.
8:03:09 PM:
8:03:09 PM: - gatsby-config.js:6 Object.
8:03:09 PM: /opt/build/repo/gatsby-config.js:6:9
8:03:09 PM:
8:03:09 PM: - v8-compile-cache.js:178 Module._compile
8:03:09 PM: [repo]/[v8-compile-cache]/v8-compile-cache.js:178:30
8:03:09 PM:
8:03:09 PM: - loader.js:1158 Object.Module._extensions..js
8:03:09 PM: internal/modules/cjs/loader.js:1158:10
8:03:09 PM:
8:03:09 PM: - loader.js:986 Module.load
8:03:09 PM: internal/modules/cjs/loader.js:986:32
8:03:09 PM:
8:03:09 PM: - loader.js:879 Function.Module._load
8:03:09 PM: internal/modules/cjs/loader.js:879:14
8:03:09 PM:
8:03:09 PM: - loader.js:1026 Module.require
8:03:09 PM: internal/modules/cjs/loader.js:1026:19
8:03:09 PM:
8:03:09 PM: - v8-compile-cache.js:159 require
8:03:09 PM: [repo]/[v8-compile-cache]/v8-compile-cache.js:159:20
8:03:09 PM:
8:03:09 PM: - get-config-file.ts:30 getConfigFile
8:03:09 PM: [repo]/[gatsby]/src/bootstrap/get-config-file.ts:30:20
8:03:09 PM:
8:03:09 PM: - initialize.ts:113 initialize
8:03:09 PM: [repo]/[gatsby]/src/services/initialize.ts:113:50
8:03:09 PM:
8:03:09 PM: - index.ts:40 bootstrap
8:03:09 PM: [repo]/[gatsby]/src/bootstrap/index.ts:40:15
8:03:09 PM:
8:03:09 PM: - build.ts:89 build
8:03:09 PM: [repo]/[gatsby]/src/commands/build.ts:89:47
8:03:09 PM:
8:03:09 PM:
8:03:09 PM: not finished open and validate gatsby-configs - 0.064s
8:03:09 PM: ​
8:03:09 PM: ┌─────────────────────────────┐
8:03:09 PM: │ "build.command" failed │
8:03:09 PM: └─────────────────────────────┘
8:03:09 PM: ​
8:03:09 PM: Error message
8:03:09 PM: Command failed with exit code 1: gatsby build
8:03:09 PM: ​
8:03:09 PM: Error location
8:03:09 PM: In Build command from Netlify app:
8:03:09 PM: gatsby build
8:03:09 PM: ​
8:03:09 PM: Resolved config
8:03:09 PM: build:
8:03:09 PM: command: gatsby build
8:03:09 PM: commandOrigin: ui
8:03:09 PM: environment:
8:03:09 PM: - CONTENTFUL_DELIVERY_TOKEN
8:03:09 PM: - CONTENTFUL_SPACE_ID
8:03:09 PM: publish: /opt/build/repo/public
8:03:10 PM: Caching artifacts
8:03:10 PM: Started saving node modules
8:03:10 PM: Finished saving node modules
8:03:10 PM: Started saving build plugins
8:03:10 PM: Finished saving build plugins
8:03:10 PM: Started saving pip cache
8:03:10 PM: Finished saving pip cache
8:03:10 PM: Started saving emacs cask dependencies
8:03:10 PM: Finished saving emacs cask dependencies
8:03:10 PM: Started saving maven dependencies
8:03:10 PM: Finished saving maven dependencies
8:03:10 PM: Started saving boot dependencies
8:03:10 PM: Finished saving boot dependencies
8:03:10 PM: Started saving go dependencies
8:03:10 PM: Finished saving go dependencies
8:03:13 PM: Error running command: Build script returned non-zero exit code: 1
8:03:13 PM: Failing build: Failed to build site
8:03:13 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
8:03:13 PM: Finished processing build request in 1m48.636974151s