Skip to content

feat: Adds JobBoard component with Greenhouse integration#12

Open
KirklandGee wants to merge 1 commit intoWebflow-Examples:mainfrom
KirklandGee:add/job-board
Open

feat: Adds JobBoard component with Greenhouse integration#12
KirklandGee wants to merge 1 commit intoWebflow-Examples:mainfrom
KirklandGee:add/job-board

Conversation

@KirklandGee
Copy link

Component: JobBoard

Description

A dynamic job board component that fetches and displays open positions from the Greenhouse API. Features a grid layout of job cards, each showing the job title, department, location, and an apply link. Includes interactive department and location filter dropdowns at the top, a loading spinner during data fetch, an error state for failed API calls, and an empty state when no jobs match filters. Supports pagination with a 'Load More' button for large job lists. Cards display in a multi-column grid on desktop and stack vertically on mobile devices. The component connects to any Greenhouse account via a board token prop and handles all API communication, error handling, and responsive layout transitions automatically.

What's Included

  • React component with scoped CSS (no Tailwind, no shadcn)
  • Colors via CSS site variables: var(--background-primary, #ffffff), etc.
  • Typography via inheritance: font-family: inherit; color: inherit;
  • Full prop surface (JobBoard.webflow.tsx) — 20+ props for developers/agencies
  • Simple prop surface (JobBoardSimple.webflow.tsx) — core text/link props for clients
  • All CSS classes prefixed with wf-job-board- for Shadow DOM safety

Testing

  • npm install && npm run dev runs locally
  • npx webflow library share imports successfully
  • Full and simple prop surfaces render in Webflow canvas
  • Site variables wire up correctly

Generated component following the Webflow code components scaffold pattern.
Includes full and simple prop surface variations.
@KirklandGee KirklandGee changed the title Add JobBoard component feat: Adds JobBoard component with Greenhouse integration Feb 26, 2026
@socket-security
Copy link

@socket-security
Copy link

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
License policy violation: npm caniuse-lite under CC-BY-4.0

Location: Package overview

From: ?npm/@vitejs/plugin-react@5.1.4npm/@webflow/webflow-cli@1.12.2npm/caniuse-lite@1.0.30001774

ℹ Read more on: This package | This alert | What is a license policy violation?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/caniuse-lite@1.0.30001774. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
License policy violation: npm lodash under CC0-1.0 AND MIT

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/lodash@4.17.23

ℹ Read more on: This package | This alert | What is a license policy violation?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/lodash@4.17.23. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
License policy violation: npm memfs under Unlicense

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/memfs@3.6.0

ℹ Read more on: This package | This alert | What is a license policy violation?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/memfs@3.6.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
License policy violation: npm vite

Location: Package overview

From: job-board/package.jsonnpm/vite@7.3.1

ℹ Read more on: This package | This alert | What is a license policy violation?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Find a package that does not violate your license policy or adjust your policy to allow this package's license.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/vite@7.3.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Dynamic code execution: npm @babel/plugin-transform-async-generator-functions

Eval Type: Function

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/@babel/plugin-transform-async-generator-functions@7.29.0

ℹ Read more on: This package | This alert | What is dynamic code execution?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@babel/plugin-transform-async-generator-functions@7.29.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Dynamic code execution: npm @babel/plugin-transform-explicit-resource-management

Eval Type: Function

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/@babel/plugin-transform-explicit-resource-management@7.28.6

ℹ Read more on: This package | This alert | What is dynamic code execution?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@babel/plugin-transform-explicit-resource-management@7.28.6. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Dynamic code execution: npm async-generator-function

Eval Type: Function

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/async-generator-function@1.0.0

ℹ Read more on: This package | This alert | What is dynamic code execution?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/async-generator-function@1.0.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Network access: npm babel-plugin-polyfill-corejs3 in module globalThis["fetch"]

Module: globalThis["fetch"]

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/babel-plugin-polyfill-corejs3@0.14.0

ℹ Read more on: This package | This alert | What is network access?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/babel-plugin-polyfill-corejs3@0.14.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Dynamic code execution: npm babel-plugin-polyfill-corejs3

Eval Type: Function

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/babel-plugin-polyfill-corejs3@0.14.0

ℹ Read more on: This package | This alert | What is dynamic code execution?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/babel-plugin-polyfill-corejs3@0.14.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Dynamic code execution: npm generator-function

Eval Type: Function

Location: Package overview

From: ?npm/@webflow/webflow-cli@1.12.2npm/generator-function@2.0.1

ℹ Read more on: This package | This alert | What is dynamic code execution?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Avoid packages that use dynamic code execution like eval(), since this could potentially execute any code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/generator-function@2.0.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Deprecated by its maintainer: npm koa-compose

Reason: koa-compose@4.2.0 is a breaking version, please either use <= v4.1 or upgrade to v5.x once it is released

From: ?npm/@webflow/webflow-cli@1.12.2npm/koa-compose@4.2.0

ℹ Read more on: This package | This alert | What is a deprecated package?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Research the state of the package and determine if there are non-deprecated versions that can be used, or if it should be replaced with a new, supported solution.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/koa-compose@4.2.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn Medium
Deprecated by its maintainer: npm memfs with reason "this will be v4"

Reason: this will be v4

From: ?npm/@webflow/webflow-cli@1.12.2npm/memfs@3.6.0

ℹ Read more on: This package | This alert | What is a deprecated package?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Research the state of the package and determine if there are non-deprecated versions that can be used, or if it should be replaced with a new, supported solution.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/memfs@3.6.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant