search

analysis-tools-dev / website-old

⚙️ Source code of the official Analysis Tools website
https://analysis-tools.dev
MIT License
14 stars 13 forks source link

Show thumbnails below tool media carousel #20

Open mre opened 4 years ago

mre commented 4 years ago

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

image

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: image Would be cool if the thumbnails were ordered in a grid below the main image, spanning multiple rows if needed.

Resources:

mre commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

Absolutely. Go for it! 😊

kots14 commented 4 years ago

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

kots14 commented 4 years ago

Update - Resolved this issue following this

@mre please help me resolve this

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.

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 commented 4 years ago

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

kots14 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

I've opened a PR for this. Please let me know if any changes are required. https://github.com/analysis-tools-dev/website/pull/23

kots14 commented 4 years ago

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

mre commented 4 years ago

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