bagseye/barcadia

I'm a Front-end developer based in Inverness 🏴󠁧󠁢󠁳󠁣󠁴󠁿

The vast majority of my daily work is building bespoke WordPress themes, but I also dabble in the dark-arts of React and Gatsby. When I get the time.

barcadia's Issues

Update template and navigation queries

https://www.gatsbyjs.com/blog/content-querying-with-gatsby-contentful/

Initial Getting Started fails on a clean install

Running this command from README returns errors on a clean install

gatsby new my-barcadia-starter https://github.com/bagseye/barcadia

DEPENDENCY ERRORS:

success Created starter directory layout
info Installing packages...

npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm WARN deprecated [email protected]: No longer maintained. Use lru-cache version 7.6 or higher, and provide an asynchronous fetchMethod option.
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Multer 1.x is affected by CVE-2022-24434. This is fixed in v1.4.4-lts.1 which drops support for versions of Node.js before 6. Please upgrade to at least Node.js 6 and version 1.4.4-lts.1 of Multer. If you need support for older versions of Node.js, we are open to accepting patches that would fix the CVE on the main 1.x release line, whilst maintaining compatibility with Node.js 0.10.
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: critical regex denial of service bug fixed in 1.2.1 patch
npm WARN deprecated [email protected]: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

ERRORS:

npm ERR! code 1
npm ERR! path /Users/jerdog/dev/personal/jerdog-me-barcadia/node_modules/lmdb
npm ERR! command failed
npm ERR! command sh -c node-gyp-build
npm ERR! CXX(target) Release/obj.target/lmdb/src/lmdb-js.o
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.10.9 found at "/opt/homebrew/opt/[email protected]/bin/python3.10"
npm ERR! gyp info spawn /opt/homebrew/opt/[email protected]/bin/python3.10
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/jerdog/dev/personal/jerdog-me-barcadia/node_modules/lmdb/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/jerdog/Library/Caches/node-gyp/19.3.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/jerdog/Library/Caches/node-gyp/19.3.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/jerdog/Library/Caches/node-gyp/19.3.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/jerdog/dev/personal/jerdog-me-barcadia/node_modules/lmdb',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../src/lmdb-js.cpp:1:
npm ERR! In file included from ../src/lmdb-js.h:32:
npm ERR! In file included from ../../nan/nan.h:178:
npm ERR! ../../nan/nan_callbacks.h:55:23: error: no member named 'AccessorSignature' in namespace 'v8'
npm ERR! typedef v8::Localv8::AccessorSignature Sig;
npm ERR! ~~~~^
npm ERR! In file included from ../src/lmdb-js.cpp:1:
npm ERR! In file included from ../src/lmdb-js.h:32:
npm ERR! ../../nan/nan.h:2544:8: error: no matching member function for call to 'SetAccessor'
npm ERR! tpl->SetAccessor(
npm ERR! ~~~~~^~~~~~~~~~~
npm ERR! /Users/jerdog/Library/Caches/node-gyp/19.3.0/include/node/v8-template.h:814:8: note: candidate function not viable: no known conversion from 'imp::Sig' (aka 'int') to 'v8::SideEffectType' for 7th argument
npm ERR! void SetAccessor(
npm ERR! ^
npm ERR! /Users/jerdog/Library/Caches/node-gyp/19.3.0/include/node/v8-template.h:807:8: note: candidate function not viable: no known conversion from 'imp::NativeGetter' (aka 'void ()(v8::Localv8::Name, const v8::PropertyCallbackInfov8::Value &)') to 'v8::AccessorGetterCallback' (aka 'void ()(Localv8::String, const PropertyCallbackInfov8::Value &)') for 2nd argument
npm ERR! void SetAccessor(
npm ERR! ^
npm ERR! 2 errors generated.
npm ERR! make: *** [Release/obj.target/lmdb/src/lmdb-js.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: make failed with exit code: 2
npm ERR! gyp ERR! stack at ChildProcess.onExit (/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/lib/build.js:203:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:293:12)
npm ERR! gyp ERR! System Darwin 22.2.0
npm ERR! gyp ERR! command "/opt/homebrew/Cellar/node/19.3.0/bin/node" "/opt/homebrew/lib/node_modules/npm/node_modules/@npmcli/run-script/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd /Users/jerdog/dev/personal/jerdog-me-barcadia/node_modules/lmdb
npm ERR! gyp ERR! node -v v19.3.0
npm ERR! gyp ERR! node-gyp -v v9.3.1
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:

ERROR UNKNOWN

Command failed with exit code 1: npm install

Error: Command failed with exit code 1: npm install

• error.js:60 makeError
  [lib]/[gatsby-cli]/[execa]/lib/error.js:60:11

• index.js:118 handlePromise
  [lib]/[gatsby-cli]/[execa]/index.js:118:26

• task_queues:95 processTicksAndRejections
  node:internal/process/task_queues:95:5

• init-starter.js:135 install
  [lib]/[gatsby-cli]/lib/init-starter.js:135:7

• init-starter.js:202 clone
  [lib]/[gatsby-cli]/lib/init-starter.js:202:3

• init-starter.js:343 initStarter
  [lib]/[gatsby-cli]/lib/init-starter.js:343:5

• create-cli.js:458
  [lib]/[gatsby-cli]/lib/create-cli.js:458:9

This template / starter pack looks to be out of date. Any reasonably quick resolutions? Is this still supported?

Develop fail

I'm new in Gatsby.
While running gatsby develop all images except one of them (blogs page cover "iphone-camera.jpg") are missed.
All demo pictures in images folder are there. But while generating its missing.
How can I assign images?

gatsby develop fails - "Cannot query field "references""

Great starter, thanks for sharing! ✌

I get this when running gatsby develop:

ERROR in 
/home/jeff/shadow/projects/barcadia-wordpress/src/pages/news/{contentfu
lPost.url}.js
  26:9  error  Cannot query field "references" on type
"ContentfulPostContent"  graphql/template-strings

I'm a Contentful noob, but as far as I can make out, references is reserved for paid Contentful plans, and as such the data isn't present upon syncing with a free account.

A quick fix for me was to remove this content from the Graphql query in src/pages/news/{contentfulPost.url}.js

Resulting in this:

export const data = graphql`
    query postQuery($id: String) {
        contentfulPost(id: { eq: $id }) {
        title
        introduction
        content {
            raw
        }
        createdAt(formatString: "DD MMMM, YYYY")
        }
    }
    `

Apart from one missing image, I haven't noticed any drastic impact and it's got me up and running.

Another Gatsby Develop Fails

I have imported the example content into my free Contentful account. New to Gatsby and Contentful - perhaps this is too big a bite for me... Any help with this?

jweirich@LAPTOP-97G89Q4N:~/projects/barcadia$ gatsby develop
success load gatsby config - 0.036s
success load plugins - 0.529s
success onPreInit - 0.006s
success initialize cache - 0.050s
success copy gatsby files - 0.291s
success Compiling Gatsby Functions - 0.132s
success onPreBootstrap - 0.143s
success createSchemaCustomization - 0.183s
success Contentful: Sync changed items - 0.075s - 1/1 13.38/s
info Contentful: 0 new/updated entries
info Contentful: 0 deleted entries
info Contentful: 15 cached entries
info Contentful: 0 new/updated assets
info Contentful: 25 cached assets
info Contentful: 0 deleted assets
success Contentful: Fetch data (s1oiqlt103tb-master) - 0.256s
info Creating 3 Contentful Page nodes
info Creating 4 Contentful Post nodes
info Creating 5 Contentful Product nodes
info Creating 3 Contentful FAQ nodes
info Creating 25 Contentful asset nodes
success Contentful: Create nodes (s1oiqlt103tb-master) - 0.053s
success Contentful: Process data (s1oiqlt103tb-master) - 0.166s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.585s
success building schema - 0.588s
success createPages - 0.001s
success createPagesStatefully - 0.229s
info Total nodes: 97, SitePage nodes: 17 (use --verbose for breakdown)
success Checking for changed pages - 0.004s
success write out redirect data - 0.009s
success onPostBootstrap - 0.007s
info bootstrap finished - 4.205s
success onPreExtractQueries - 0.003s

 ERROR 

(node:155803) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 end listeners
added to [PassThrough]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)


 ERROR 

(node:155803) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 end listeners
added to [PassThrough]. Use emitter.setMaxListeners() to increase limit


 ERROR 

(node:155803) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 end listeners
added to [PassThrough]. Use emitter.setMaxListeners() to increase limit


 ERROR 

(node:155803) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 end listeners
added to [PassThrough]. Use emitter.setMaxListeners() to increase limit


 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "references" on type "ContentfulPostContent".

If you don't expect "references" to exist on the type "ContentfulPostContent" it is most likely a typo.
However, if you expect "references" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please
try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL
 explorer to see which fields you can query and what shape they have
- You want to optionally use your field "references" and right now it is not used anywhere. Therefore
Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with
 that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you
don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for
"ContentfulPostContent":
https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

File: src/pages/news/{contentfulPost.url}.js:25:9

failed extract queries from components - 3.066s
success write out requires - 0.007s
success run page queries - 0.009s - 1/1 114.39/s
warn Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({
'lib/mappings.wasm': ... }) before using SourceMapConsumer

File: .cache/app.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({
'lib/mappings.wasm': ... }) before using SourceMapConsumer

File: .cache/polyfill-entry.js

failed Building development bundle - 9.132s
ERROR in ./.cache/app.js
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 
'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm (/home/jweirich/projects/barcadia/node_modules/source-map/lib/read-wasm.js:8:13)
    at wasm (/home/jweirich/projects/barcadia/node_modules/source-map/lib/wasm.js:25:16)
    at /home/jweirich/projects/barcadia/node_modules/source-map/lib/source-map-consumer.js:264:14
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Object._loader
(/home/jweirich/projects/barcadia/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js:81:9)

ERROR in ./.cache/polyfill-entry.js
Module build failed (from ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js):
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 
'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm (/home/jweirich/projects/barcadia/node_modules/source-map/lib/read-wasm.js:8:13)
    at wasm (/home/jweirich/projects/barcadia/node_modules/source-map/lib/wasm.js:25:16)
    at /home/jweirich/projects/barcadia/node_modules/source-map/lib/source-map-consumer.js:264:14
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at Object._loader
(/home/jweirich/projects/barcadia/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js:81:9)

develop compiled with 2 errors
success Writing page-data.json files to public directory - 0.165s - 3/17 103.14/s
```

Include animations

Add site-wide animations using Framer Motion.

Documentation and methods found here -
https://www.framer.com/motion/

Mobile menu fails the appropriate size when dropdown is opened

Hi, I don't know if it my issue only but when I open the dropdown it messes with the menu being visible.

A quick fix could be setting a max-height: 100vh to the .menu class or alternatively setting it to position absolute...

gatsby develops exits without error

I cloned this respository, imported the example-config.json into contentful using the appropriate management key, placed space ID and delivery API key into the environment variables and then ran gatsby develop but the terminal exits after this message:

success load gatsby config - 0.065s
success load plugins - 2.930s
success onPreInit - 0.011s
success initialize cache - 0.640s
success copy gatsby files - 0.790s
success Compiling Gatsby Functions - 0.457s
success onPreBootstrap - 0.504s
success createSchemaCustomization - 0.915s
success Contentful: Sync all items - 0.656s - 39/39 59.48/s
info Contentful: 15 new/updated entries
info Contentful: 0 deleted entries
info Contentful: 0 cached entries
info Contentful: 24 new/updated assets
info Contentful: 0 cached assets
info Contentful: 0 deleted assets
success Contentful: Fetch data (fy77mx0i50hq-master) - 5.326s
info Creating 3 Contentful Page nodes
info Creating 4 Contentful Post nodes
info Creating 5 Contentful Product nodes
info Creating 3 Contentful FAQ nodes
info Creating 24 Contentful asset nodes
success Contentful: Create nodes (MYSPACEID-master) - 0.917s
success Contentful: Process data (MYSPACEID-master) - 0.973s
success Checking for changed pages - 0.003s
success source and transform nodes - 6.537s
success building schema - 0.743s
success createPages - 0.002s
success createPagesStatefully - 0.242s
info Total nodes: 79, SitePage nodes: 17 (use --verbose for breakdown)
success Checking for changed pages - 0.003s
success write out redirect data - 0.004s
success onPostBootstrap - 0.004s
info bootstrap finished - 19.065s
success onPreExtractQueries - 0.001s
⠦ extract queries from components
c:\dev\lmdb-store\dependencies\lmdb\libraries\liblmdb\mdb.c:4422: Assertion 'i == x' failed in mdb_txn_commit()

I am clueless about what the error is let alone how to resolve it. Any help is appreciated.

Update Readme

Update readme to include content more relevant to site.

Areas to include

• including Contentful
• Updating images

Just completely broken

Broken dependency links, deprecated API calls, this list goes on and on...this theme will not build in 2024, don't waste your time with it.

gatsby develop fails

Your site looks fantastic. I'm still learning Gatsby, but I've created two sites now using Contentful, so I know the basics. So, I have my space id and token set up properly. The develop fails with TypeError: Cannot read property 'products' of undefined and then multiple GraphQL errors as it appears to be looking for both Products and Features data. Does the data need to be populated into Contentful first for this to work? Thank you.

Include SEO component

Create and include SEO component.

Based on documentation found here:

https://www.gatsbyjs.org/docs/add-seo-component/

Blog posts page sometimes loads without blog posts on it

When navigating from page to page or reloading the blog page the blog posts on it sometimes disappear. This is weird behavior because the site is prebuilt and is just a number of static files with no requests to the Contentful backend when it is in production, right?
You can see this issue even on your deployed example: https://barcadia.netlify.app/blogs
Here's a screenshot:

"Cannot access Contentful space"

Hey there. I'm starting to learn Gatsby and I loved your template design, so I decided to use it to get started.

As I started following the instructions on the README file I faced an obstacle at $ gatsby develop. I got the following message:

Cannot access Contentful space "***********05}" on environment "master" with access token
"*****************************************oF8}". Make sure to double check them! (value)



  Error: Cannot access Contentful space "***********05}" on environment "master" with access token "*****
  ************************************oF8}". Make sure to double check them! (value)

I suspected I was using the wrong API, so I tried the personal token, and got the same return. I updated npm as some of the packages were outdated. Still getting the same error. I'm copy&pasting the codes from the contenful website, so I know those are correct.
What am I missing?

Thanks in advance