{"id":21074901,"url":"https://github.com/nextlevelshit/gatsby-plugin-react-scroll-cards","last_synced_at":"2025-08-31T20:05:25.323Z","repository":{"id":51043490,"uuid":"213002335","full_name":"nextlevelshit/gatsby-plugin-react-scroll-cards","owner":"nextlevelshit","description":"Ggenerate a full-height scroll menu with abstracts of each card. Cards can be clicked and opened in a separate modal.","archived":false,"fork":false,"pushed_at":"2021-05-25T17:15:11.000Z","size":47,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-14T03:29:29.823Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextlevelshit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-05T13:15:54.000Z","updated_at":"2019-10-08T15:26:55.000Z","dependencies_parsed_at":"2022-08-02T16:15:17.173Z","dependency_job_id":null,"html_url":"https://github.com/nextlevelshit/gatsby-plugin-react-scroll-cards","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nextlevelshit/gatsby-plugin-react-scroll-cards","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-scroll-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-scroll-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-scroll-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-scroll-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextlevelshit","download_url":"https://codeload.github.com/nextlevelshit/gatsby-plugin-react-scroll-cards/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fgatsby-plugin-react-scroll-cards/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266780371,"owners_count":23983040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T19:18:35.917Z","updated_at":"2025-07-24T01:38:47.136Z","avatar_url":"https://github.com/nextlevelshit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003egatsby-plugin-react-scroll-cards\u003c/h1\u003e\n  \u003csup\u003eGatsbyJS Plugin · React · TailwindCSS · lodash · React Scrollspy\u003c/sup\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\nThis GatsbyJS plugin is generating a full-height scroll menu with abstracts of each card. Cards can be clicked and opened in a separate modal.\n\n## Dependencies\n\nTo use this plugin correctly you should have installed [`gatsby-plugin-sass`](https://www.gatsbyjs.org/packages/gatsby-plugin-sass/), `tailwindcss`, `lodash` and `react-scrollspy`.\n\n1. Install `gatsby-plugin-sass`, `tailwindcss`, `lodash` and `react-scrollspy`\n   ```shell\n   yarn add gatsby-plugin-sass tailwindcss lodash react-scrollspy\n   # or\n   npm install --save gatsby-plugin-sass tailwindcss lodash react-scrollspy\n   ```\n\n1. Configure `gatsby-config.js`\n   ```javascript\n   module.exports = {\n     plugins: [\n      {\n        resolve: `gatsby-plugin-sass`,\n        options: {\n          postCssPlugins: [\n            require('tailwindcss'),\n            // require('./tailwind.config.js'), // Optionally add your personal tailwind config\n          ]\n        },\n      },\n       // ...\n     ]\n     // ...\n   }\n   ```\n\n\u003c!-- ## Learning Resources (optional)\n\nIf there are other tutorials, docs, and learning resources that are necessary or helpful to someone using this plugin, please link to those here. --\u003e\n\n## Install\n\n1. Install `gatsby-plugin-react-scroll-cards`\n   ```shell\n   yarn add gatsby-plugin-react-scroll-cards\n   # or\n   npm i --save-dev gatsby-plugin-react-scroll-cards\n   ```\n\n2. Configure `gatsby-config.js`\n   ```javascript\n   module.exports = {\n     plugins: [\n      {\n        resolve: `gatsby-plugin-sass`,\n        options: {\n          postCssPlugins: [\n            require('tailwindcss'),\n            // require('./tailwind.config.js'), // Optionally add your personal tailwind config\n          ]\n        },\n      },\n      `gatsby-plugin-react-scroll-cards`,\n      // ...\n     ],\n     // ...\n   }\n   ```\n\n## Available options\n\nThese are the default options and can/should be modified.\n`nodes` is the only required property.\nAll the rest is optional.\n\n```javascript\ncssVariables: {\n  iconSize: `0.6rem`,\n  bg: `255, 255, 255`\n},\nhasIndicator: true,\nindicatorClass: `nls-scroll-cards__indicator`,\nindicatorTitleClass: `nls-scroll-cards__indicator__title`,\nindicatorTitleActiveClass: `nls-scroll-cards__indicator__title--active`,\nitemClass: `nls-scroll-cards__item`,\nitemContentClass: `nls-scroll-cards__item__content`,\nindicatorSubTitleClass: `nls-scroll-cards__indicator__subtitle`,\nlinkTitle: `Read whole article`,\nnodes: [\n  {\n    frontmatter: {\n      title: `Nothing to see here ...`,\n    },\n    headings: [],\n    html: `There was no content uploaded yet.`,\n  }\n],\nscrollOffset: -200,\nwrapperClass: `nls-scroll-cards`\n```\n\n## When do I use this plugin?\n\n...\n\n\n## Examples of usage\n\n...\n\n\n## Examples\n\n...\n\n\u003c!-- ## How to run tests\n\n## How to develop locally\n\n## How to contribute\n\nIf you have unanswered questions, would like help with enhancing or debugging the plugin, it is nice to include instructions for people who want to contribute to your plugin. --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextlevelshit%2Fgatsby-plugin-react-scroll-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextlevelshit%2Fgatsby-plugin-react-scroll-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextlevelshit%2Fgatsby-plugin-react-scroll-cards/lists"}