Show thumbnails below tool media carousel

[mre]

Thanks to @paulrrdiaz we have a media carousel for our tool resources now. 🚀

Here's how it looks like:
https://analysis-tools.dev/tool/deepcode

One improvement we discussed was showing thumbnails for each resource below the carousel.
This would give a good overview of all available resources and make the tools pages a little more colorful. 🎨

Example:

Would be cool if the thumbnails were ordered in a grid below the main image, spanning multiple rows if needed.

Resources:

• Updates types.ts to provide typings for ref usage YIZHUANG/react-multi-carousel#45
• https://www.freakyjolly.com/react-slick-carousel-with-custom-navigation-and-lazy-loaded-images-in-slider/

[mre]

The thumbnail for the screenshot can be created from the screenshot image that is part of the repository.
The challenge is to get the thumbnails for the videos. I think the URLs for YouTube and Vimeo follow a fixed schema, but I'm not sure. These are the only two platforms we use right now, so that would totally be enough for now.

[kots14]

I'm new to this repository and I'm interested to work on this. However, I'm unable to understand where exactly this carousel feature is required.
Is it for the landing page : https://analysis-tools.dev/ ?

[mre]

Hey @kots14,
thanks for your message.
The carousel is done, but we'd like to have smaller thumbnails below the carousel on each tools page.
E.g. on https://analysis-tools.dev/tool/deepcode or https://analysis-tools.dev/tool/deepsource.

[kots14]

@mre I get the idea now. Maybe that's why you referred react slick carousel. As I mentioned, I'm interested to work on this issue. May I have it assigned?

[mre]

Absolutely. Go for it! 😊

[kots14]

Thanks for assigning this issue. I'll get back to you if I'm stuck anywhere while developing the feature.

[kots14]

Update - Resolved this issue following this

@mre please help me resolve this

• Is there's anything I need to install or tweak any code, for getting started with development using the master branch?

Issue I'm facing currently :
I was trying to use the current commit bfb98cb (currently the HEAD of master branch). However, I'm getting an error (logs mentioned ⬇️ ) while using yarn develop.

• Note: Initially my forked repository's master branch was 4-5 commits behind. I synced the upstream master and after that I found this.

Error logs:

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 "ToolsYamlFieldsGithubStats":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src/templates/tool.js:235:11

failed extract queries from components - 1.316s
success write out requires - 0.053s
success run page queries - 0.738s - 603/603 817.04/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/xxxxxxxx/website/src/templates/tag.js
  229:13  error  Cannot query field "stargazers_count" on type "ToolsYamlFieldsGithubStats"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


File: src/templates/tag.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/xxxxxxxx/website/src/templates/tool.js
  219:11  error  Cannot query field "stargazers_count" on type "ToolsYamlFieldsGithubStats"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


File: src/templates/tool.js

failed Building development bundle - 7.039s

[mre]

Uh that's weird. Glad you figured it out. Curious to see a diff against master to see what changed.

[kots14]

I think yarn.lock file can be included in .gitignore file. I deleted yarn.lock and installed everything again. Here are all the steps I used according to the link I mentioned previously:

1. Installed gatsby using sudo npm install -g gatsby-cli.
2. Removed yarn.lock.
3. Ran gatsby clean.
4. Removed node_modules folder.
5. Ran yarn install

After following all these steps when I ran yarn develop, it worked in my machine.

[jakubsacha]

I don't think that not versioning yarn.lock file is a good idea.

What you can do is remove the yarn.lock, regenerate it and commit as a part of your PR. Effectively it will update all the dependencies.

[kots14]

Sure, I'll add it in my commit. I was not sure if addition of new yarn.lock file would be accepted in the PR or not. Thanks for guiding me here.

[kots14]

I've opened a PR for this. Please let me know if any changes are required.
analysis-tools-dev/website-next#23

[kots14]

@mre @jakubsacha Please share your reviews on the PR #23, so that I can add the necessary changes if required.

[mre]

Whoops, slipped through the cracks, sorry. I'm on it. 👀