├── devlink ├── types.js ├── Brands.d.ts ├── Features.d.ts ├── AboutHero.d.ts ├── devlink.d.ts ├── AboutInformation.d.ts ├── Footer.d.ts ├── Stats.d.ts ├── PageHeading.d.ts ├── PricingGrid.d.ts ├── Hero.d.ts ├── Cta.d.ts ├── Pricing.d.ts ├── _Builtin │ ├── Video.d.ts │ ├── index.d.ts │ ├── index.js │ ├── Facebook.d.ts │ ├── Twitter.d.ts │ ├── YouTubeVideo.d.ts │ ├── Map.d.ts │ ├── Video.js │ ├── Facebook.js │ ├── Typography.js │ ├── Twitter.js │ ├── BackgroundVideo.d.ts │ ├── YouTubeVideo.js │ ├── Tabs.d.ts │ ├── Dropdown.d.ts │ ├── BackgroundVideo.js │ ├── Dropdown.js │ ├── Map.js │ ├── Navbar.d.ts │ ├── Slider.d.ts │ ├── Basic.js │ ├── Tabs.js │ ├── Form.d.ts │ └── Navbar.js ├── Details.d.ts ├── Navbar.d.ts ├── JobListing.d.ts ├── Newnav.d.ts ├── index.d.ts ├── index.js ├── PageHeading.js ├── interactions.d.ts ├── types.d.ts ├── Cta.js ├── PricingGrid.js ├── PageHeading.module.css ├── AboutInformation.module.css ├── Footer.module.css ├── JobListing.js ├── AboutHero.js ├── AboutInformation.js ├── Hero.js ├── Navbar.js ├── PricingGrid.module.css ├── Footer.js ├── Navbar.module.css ├── JobListing.module.css ├── utils.d.ts ├── Stats.module.css ├── AboutHero.module.css ├── Cta.module.css ├── Newnav.js ├── Details.js ├── Features.module.css ├── Newnav.module.css ├── Brands.js ├── Brands.module.css ├── interactions.js ├── Details.module.css ├── Hero.module.css ├── Pricing.module.css ├── Stats.js ├── utils.js ├── Features.js └── Pricing.js ├── components ├── index.js └── Chart.js ├── .eslintrc.json ├── public ├── favicon.ico ├── vercel.svg └── next.svg ├── next.config.js ├── .webflowrc.js ├── pages ├── _document.tsx ├── _app.tsx ├── api │ ├── jobs.js │ └── jobs │ │ ├── featured.js │ │ └── [id].js ├── about.tsx ├── jobs │ └── [id].jsx ├── jobs.tsx └── index.tsx ├── fetchJob.js ├── .gitignore ├── tsconfig.json ├── package.json ├── styles ├── globals.css └── Home.module.css └── README.md /devlink/types.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | export * from "./Chart"; 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Webflow-Examples/devlink-job-board/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /devlink/Brands.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | declare function Brands(props: { as?: React.ElementType }): React.JSX.Element; 4 | -------------------------------------------------------------------------------- /devlink/Features.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | declare function Features(props: { as?: React.ElementType }): React.JSX.Element; 4 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /devlink/AboutHero.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | declare function AboutHero(props: { 4 | as?: React.ElementType; 5 | }): React.JSX.Element; 6 | -------------------------------------------------------------------------------- /devlink/devlink.d.ts: -------------------------------------------------------------------------------- 1 | type IXData = any; 2 | 3 | type IXEngine = { 4 | init: (data: IXData) => void; 5 | }; 6 | 7 | export const createIX2Engine: () => IXEngine; 8 | -------------------------------------------------------------------------------- /devlink/AboutInformation.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | declare function AboutInformation(props: { 4 | as?: React.ElementType; 5 | }): React.JSX.Element; 6 | -------------------------------------------------------------------------------- /devlink/Footer.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Footer(props: { 5 | as?: React.ElementType; 6 | year?: React.ReactNode; 7 | }): React.JSX.Element; 8 | -------------------------------------------------------------------------------- /devlink/Stats.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Stats(props: { 5 | as?: React.ElementType; 6 | chart?: Types.Devlink.Slot; 7 | }): React.JSX.Element; 8 | -------------------------------------------------------------------------------- /devlink/PageHeading.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function PageHeading(props: { 5 | as?: React.ElementType; 6 | headingText?: React.ReactNode; 7 | }): React.JSX.Element; 8 | -------------------------------------------------------------------------------- /devlink/PricingGrid.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function PricingGrid(props: { 5 | as?: React.ElementType; 6 | pricingHeading?: React.ReactNode; 7 | }): React.JSX.Element; 8 | -------------------------------------------------------------------------------- /devlink/Hero.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Hero(props: { 5 | as?: React.ElementType; 6 | buttonText?: React.ReactNode; 7 | buttonLink?: Types.Basic.Link; 8 | }): React.JSX.Element; 9 | -------------------------------------------------------------------------------- /devlink/Cta.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Cta(props: { 5 | as?: React.ElementType; 6 | headingText?: React.ReactNode; 7 | button?: Types.Devlink.RuntimeProps; 8 | }): React.JSX.Element; 9 | -------------------------------------------------------------------------------- /.webflowrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | host: "https://api.webflow.com", 3 | rootDir: "./devlink", 4 | siteId: process.env.WF_SITE_ID, 5 | authToken: process.env.WF_SITE_TOKEN, // An environment variable is recommended for this field. 6 | cssModules: true, 7 | }; 8 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /devlink/Pricing.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Pricing(props: { 5 | as?: React.ElementType; 6 | employerPrice?: React.ReactNode; 7 | pricingBottom?: Types.Devlink.Slot; 8 | applicantPricing?: React.ReactNode; 9 | }): React.JSX.Element; 10 | -------------------------------------------------------------------------------- /devlink/_Builtin/Video.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { Embed } from "../types"; 3 | declare type VideoProps = { 4 | className?: string; 5 | options: Embed.Video; 6 | }; 7 | export declare function Video({ 8 | className, 9 | options, 10 | ...props 11 | }: VideoProps): JSX.Element; 12 | export {}; 13 | -------------------------------------------------------------------------------- /devlink/_Builtin/index.d.ts: -------------------------------------------------------------------------------- 1 | export * from "./Basic"; 2 | export * from "./Tabs"; 3 | export * from "./Dropdown"; 4 | export * from "./Navbar"; 5 | export * from "./Facebook"; 6 | export * from "./Typography"; 7 | export * from "./Twitter"; 8 | export * from "./Form"; 9 | export * from "./Map"; 10 | export * from "./Slider"; 11 | export * from "./Video"; 12 | export * from "./YouTubeVideo"; 13 | export * from "./BackgroundVideo"; 14 | -------------------------------------------------------------------------------- /devlink/_Builtin/index.js: -------------------------------------------------------------------------------- 1 | export * from "./Basic"; 2 | export * from "./Tabs"; 3 | export * from "./Dropdown"; 4 | export * from "./Navbar"; 5 | export * from "./Facebook"; 6 | export * from "./Typography"; 7 | export * from "./Twitter"; 8 | export * from "./Form"; 9 | export * from "./Map"; 10 | export * from "./Slider"; 11 | export * from "./Video"; 12 | export * from "./YouTubeVideo"; 13 | export * from "./BackgroundVideo"; 14 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | import '@/devlink/global.css' 3 | import type { AppProps } from 'next/app' 4 | import { InteractionsProvider, createIX2Engine } from '@/devlink' 5 | 6 | export default function App({ Component, pageProps }: AppProps) { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /devlink/Details.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Details(props: { 5 | as?: React.ElementType; 6 | company?: React.ReactNode; 7 | location?: React.ReactNode; 8 | category?: React.ReactNode; 9 | description?: React.ReactNode; 10 | benefits?: React.ReactNode; 11 | applyText?: React.ReactNode; 12 | applyLink?: Types.Basic.Link; 13 | }): React.JSX.Element; 14 | -------------------------------------------------------------------------------- /devlink/Navbar.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Navbar(props: { 5 | as?: React.ElementType; 6 | homeText?: React.ReactNode; 7 | homeLink?: Types.Basic.Link; 8 | aboutText?: React.ReactNode; 9 | aboutLink?: Types.Basic.Link; 10 | jobsText?: React.ReactNode; 11 | jobsLink?: Types.Basic.Link; 12 | brandLink?: Types.Basic.Link; 13 | }): React.JSX.Element; 14 | -------------------------------------------------------------------------------- /devlink/JobListing.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function JobListing(props: { 5 | as?: React.ElementType; 6 | companyName?: React.ReactNode; 7 | listingName?: React.ReactNode; 8 | location?: React.ReactNode; 9 | applyText?: React.ReactNode; 10 | applyLink?: Types.Basic.Link; 11 | learnText?: React.ReactNode; 12 | learnLink?: Types.Basic.Link; 13 | }): React.JSX.Element; 14 | -------------------------------------------------------------------------------- /devlink/_Builtin/Facebook.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | declare type FacebookProps = React.PropsWithChildren<{ 3 | className?: string; 4 | layout?: string; 5 | width?: number; 6 | height?: number; 7 | url?: string; 8 | locale?: string; 9 | }>; 10 | export declare function Facebook({ 11 | className, 12 | layout, 13 | width, 14 | height, 15 | url, 16 | locale, 17 | ...props 18 | }: FacebookProps): JSX.Element; 19 | export {}; 20 | -------------------------------------------------------------------------------- /fetchJob.js: -------------------------------------------------------------------------------- 1 | export async function fetchJob(id) { 2 | const options = { 3 | headers: { 4 | Authorization: `Bearer ${process.env.JOBS_KEY}`, 5 | }, 6 | }; 7 | 8 | try { 9 | const res = await fetch( 10 | `https://api.airtable.com/v0/${process.env.AIRTABLE_BASE_ID}/Jobs/${id}`, 11 | options 12 | ); 13 | const data = await res.json(); 14 | return data; 15 | } catch (e) { 16 | console.error(`An error occurred: ${e}`); 17 | throw e; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /devlink/Newnav.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as Types from "./types"; 3 | 4 | declare function Newnav(props: { 5 | as?: React.ElementType; 6 | brandLink?: Types.Basic.Link; 7 | homeText?: React.ReactNode; 8 | homeLink?: Types.Basic.Link; 9 | aboutText?: React.ReactNode; 10 | aboutLink?: Types.Basic.Link; 11 | jobsText?: React.ReactNode; 12 | jobsLink?: Types.Basic.Link; 13 | postText?: React.ReactNode; 14 | postLink?: Types.Basic.Link; 15 | postJob?: Types.Devlink.RuntimeProps; 16 | }): React.JSX.Element; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | *.env 31 | .webflowrc.json 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | next-env.d.ts 39 | -------------------------------------------------------------------------------- /devlink/_Builtin/Twitter.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | declare type TwitterSize = "m" | "l"; 3 | declare type TwitterMode = "follow" | "tweet"; 4 | declare type TwitterProps = React.PropsWithChildren<{ 5 | className?: string; 6 | mode?: TwitterMode; 7 | url?: string; 8 | text?: string; 9 | size?: TwitterSize; 10 | }>; 11 | declare global { 12 | interface Window { 13 | twttr: any; 14 | } 15 | } 16 | export declare function Twitter({ 17 | className, 18 | url, 19 | mode, 20 | size, 21 | text, 22 | ...props 23 | }: TwitterProps): JSX.Element; 24 | export {}; 25 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /devlink/index.d.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | export * as _Builtin from "./_Builtin"; 4 | export * from "./interactions"; 5 | export * from "./utils"; 6 | export * from "./devlink"; 7 | export * from "./AboutHero"; 8 | export * from "./AboutInformation"; 9 | export * from "./Brands"; 10 | export * from "./Cta"; 11 | export * from "./Details"; 12 | export * from "./Features"; 13 | export * from "./Footer"; 14 | export * from "./Hero"; 15 | export * from "./JobListing"; 16 | export * from "./Navbar"; 17 | export * from "./Newnav"; 18 | export * from "./PageHeading"; 19 | export * from "./Pricing"; 20 | export * from "./PricingGrid"; 21 | export * from "./Stats"; 22 | -------------------------------------------------------------------------------- /devlink/index.js: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | export * as _Builtin from "./_Builtin"; 4 | export * from "./interactions"; 5 | export * from "./utils"; 6 | export * from "./devlink"; 7 | export * from "./AboutHero"; 8 | export * from "./AboutInformation"; 9 | export * from "./Brands"; 10 | export * from "./Cta"; 11 | export * from "./Details"; 12 | export * from "./Features"; 13 | export * from "./Footer"; 14 | export * from "./Hero"; 15 | export * from "./JobListing"; 16 | export * from "./Navbar"; 17 | export * from "./Newnav"; 18 | export * from "./PageHeading"; 19 | export * from "./Pricing"; 20 | export * from "./PricingGrid"; 21 | export * from "./Stats"; 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "paths": { 18 | "@/*": ["./*"] 19 | } 20 | }, 21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /devlink/_Builtin/YouTubeVideo.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare type YouTubeVideoProps = { 3 | className?: string; 4 | title: string; 5 | videoId: string; 6 | aspectRatio?: number; 7 | startAt?: number; 8 | showAllRelatedVideos?: boolean; 9 | controls?: boolean; 10 | autoplay?: boolean; 11 | muted?: boolean; 12 | privacyMode?: boolean; 13 | }; 14 | export declare function YouTubeVideo({ 15 | className, 16 | title, 17 | videoId, 18 | aspectRatio, 19 | startAt, 20 | showAllRelatedVideos, 21 | controls, 22 | autoplay, 23 | muted, 24 | privacyMode, 25 | ...props 26 | }: YouTubeVideoProps): JSX.Element; 27 | export {}; 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "job-board", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@types/node": "18.16.3", 13 | "@types/react": "18.2.0", 14 | "@types/react-dom": "18.2.1", 15 | "@webflow/webflow-cli": "^1.2.2", 16 | "chart.js": "^4.3.0", 17 | "dotenv": "^16.0.3", 18 | "eslint": "8.39.0", 19 | "eslint-config-next": "13.3.1", 20 | "next": "13.3.1", 21 | "react": "18.2.0", 22 | "react-chartjs-2": "^5.2.0", 23 | "react-dom": "18.2.0", 24 | "typescript": "5.0.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /pages/api/jobs.js: -------------------------------------------------------------------------------- 1 | export const config = { 2 | api: { 3 | externalResolver: true, 4 | }, 5 | }; 6 | 7 | export default function handler(req, res) { 8 | res.setHeader("Cache-Control", "s-maxage=300, stale-while-revalidate"); 9 | const options = { 10 | headers: { 11 | Authorization: `Bearer ${process.env.JOBS_KEY}`, 12 | }, 13 | }; 14 | fetch( 15 | `https://api.airtable.com/v0/${process.env.AIRTABLE_BASE_ID}/Jobs?view=Grid%20view`, 16 | options 17 | ) 18 | .then((response) => response.json()) 19 | .then((usefulData) => { 20 | res.json(usefulData); 21 | }) 22 | .catch((e) => { 23 | console.error(`An error occurred: ${e}`); 24 | }); 25 | } 26 | -------------------------------------------------------------------------------- /pages/api/jobs/featured.js: -------------------------------------------------------------------------------- 1 | export const config = { 2 | api: { 3 | externalResolver: true, 4 | }, 5 | }; 6 | 7 | export default function handler(req, res) { 8 | res.setHeader("Cache-Control", "s-maxage=300, stale-while-revalidate"); 9 | const options = { 10 | headers: { 11 | Authorization: `Bearer ${process.env.JOBS_KEY}`, 12 | }, 13 | }; 14 | fetch( 15 | `https://api.airtable.com/v0/${process.env.AIRTABLE_BASE_ID}/Jobs?view=Featured`, 16 | options 17 | ) 18 | .then((response) => response.json()) 19 | .then((usefulData) => { 20 | res.json(usefulData); 21 | }) 22 | .catch((e) => { 23 | console.error(`An error occurred: ${e}`); 24 | }); 25 | } 26 | -------------------------------------------------------------------------------- /pages/api/jobs/[id].js: -------------------------------------------------------------------------------- 1 | export const config = { 2 | api: { 3 | externalResolver: true, 4 | }, 5 | }; 6 | 7 | export default function handler(req, res) { 8 | res.setHeader("Cache-Control", "s-maxage=300, stale-while-revalidate"); 9 | const { id } = req.query; 10 | const options = { 11 | headers: { 12 | Authorization: `Bearer ${process.env.JOBS_KEY}`, 13 | }, 14 | }; 15 | fetch( 16 | `https://api.airtable.com/v0/${process.env.AIRTABLE_BASE_ID}/Jobs/${id}`, 17 | options 18 | ) 19 | .then((response) => response.json()) 20 | .then((usefulData) => { 21 | res.json(usefulData); 22 | }) 23 | .catch((e) => { 24 | console.error(`An error occurred: ${e}`); 25 | }); 26 | } 27 | -------------------------------------------------------------------------------- /devlink/_Builtin/Map.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare global { 3 | interface Window { 4 | google: { 5 | maps: any; 6 | }; 7 | } 8 | } 9 | declare type MapWidgetProps = { 10 | className?: string; 11 | apiKey: string; 12 | zoom?: number; 13 | latlng?: string; 14 | mapStyle?: "roadmap" | "satellite" | "hybrid" | "terrain"; 15 | tooltip?: string; 16 | title?: string; 17 | enableScroll?: boolean; 18 | enableTouch?: boolean; 19 | }; 20 | export declare function MapWidget({ 21 | apiKey, 22 | mapStyle, 23 | zoom, 24 | latlng, 25 | tooltip, 26 | title, 27 | enableScroll, 28 | enableTouch, 29 | className, 30 | ...props 31 | }: MapWidgetProps): JSX.Element; 32 | export default Map; 33 | -------------------------------------------------------------------------------- /devlink/PageHeading.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as _Builtin from "./_Builtin"; 3 | import * as _utils from "./utils"; 4 | import _styles from "./PageHeading.module.css"; 5 | 6 | export function PageHeading({ 7 | as: _Component = _Builtin.Section, 8 | headingText = "Heading", 9 | }) { 10 | return ( 11 | <_Component className={_utils.cx(_styles, "section", "title")} tag="div"> 12 | <_Builtin.Container className={_utils.cx(_styles, "container")} tag="div"> 13 | <_Builtin.Heading 14 | className={_utils.cx(_styles, "title-heading")} 15 | tag="h1" 16 | > 17 | {headingText} 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /devlink/interactions.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { CSSModules } from "./types"; 3 | declare type IXData = any; 4 | declare type IXEngine = { 5 | init: (data: IXData) => void; 6 | }; 7 | declare type InteractionProviderProps = { 8 | children: React.ReactNode; 9 | createEngine: () => IXEngine; 10 | }; 11 | export declare const InteractionsProvider: React.FC; 12 | export declare const useInteractions: ( 13 | data: IXData, 14 | styles?: CSSModules | undefined 15 | ) => void; 16 | export declare function triggerIXEvent( 17 | element: HTMLElement | null | undefined, 18 | active: boolean 19 | ): void; 20 | export declare function useIXEvent( 21 | element: HTMLElement | null | undefined, 22 | active: boolean 23 | ): void; 24 | export {}; 25 | -------------------------------------------------------------------------------- /devlink/_Builtin/Video.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { cj } from "../utils"; 3 | const getAspectRatio = ({ width, height }) => 4 | height && width ? height / width : 0; 5 | export function Video({ 6 | className = "", 7 | options = { height: 0, width: 0, title: "", url: "" }, 8 | ...props 9 | }) { 10 | const { height, title, url, width } = options; 11 | return ( 12 |
17 | 39 |
40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /devlink/_Builtin/Typography.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | export function Heading({ tag = "h1", ...props }) { 3 | return React.createElement(tag, props); 4 | } 5 | export function Paragraph(props) { 6 | return React.createElement("p", props); 7 | } 8 | export function Emphasized(props) { 9 | return ; 10 | } 11 | export function Strong(props) { 12 | return React.createElement("strong", props); 13 | } 14 | export function Figure({ className = "", figure, ...props }) { 15 | const { type, align } = figure; 16 | if (align) { 17 | className += `w-richtext-align-${align} `; 18 | } 19 | if (type) { 20 | className += `w-richtext-align-${type} `; 21 | } 22 | return
; 23 | } 24 | export function Figcaption(props) { 25 | return
; 26 | } 27 | export function Subscript(props) { 28 | return ; 29 | } 30 | export function Superscript(props) { 31 | return ; 32 | } 33 | export function RichText({ tag = "div", className = "", ...props }) { 34 | return React.createElement(tag, { 35 | className: className + " w-richtext", 36 | ...props, 37 | }); 38 | } 39 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /devlink/_Builtin/Twitter.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { isUrl, loadScript } from "../utils"; 3 | const modeDict = { 4 | follow: "createFollowButton", 5 | tweet: "createShareButton", 6 | }; 7 | const sizeDict = { 8 | m: "medium", 9 | l: "large", 10 | }; 11 | export function Twitter({ 12 | className = "", 13 | url = "https://webflow.com", 14 | mode = "tweet", 15 | size = "m", 16 | text = "Check out this site", 17 | ...props 18 | }) { 19 | const ref = React.useRef(null); 20 | if (!isUrl(url)) { 21 | if (mode === "tweet") { 22 | url = "https://webflow.com/"; 23 | } else if (mode === "follow") { 24 | url = "webflow"; 25 | } 26 | } 27 | React.useEffect(() => { 28 | let isComponentMounted = true; 29 | loadScript("https://platform.twitter.com/widgets.js").then(() => { 30 | if (isComponentMounted) { 31 | if (window.twttr) { 32 | const twitterButtonOption = window.twttr.widgets[modeDict[mode]]; 33 | if (twitterButtonOption) { 34 | twitterButtonOption(url, ref?.current, { 35 | size: sizeDict[size], 36 | text, 37 | }); 38 | } 39 | } 40 | } 41 | }); 42 | return () => { 43 | isComponentMounted = false; 44 | }; 45 | }, []); 46 | return ( 47 |
52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /devlink/Cta.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as _Builtin from "./_Builtin"; 3 | import * as _utils from "./utils"; 4 | import _styles from "./Cta.module.css"; 5 | 6 | export function Cta({ 7 | as: _Component = _Builtin.Section, 8 | headingText = "Find your next job, today", 9 | button = {}, 10 | }) { 11 | return ( 12 | <_Component className={_utils.cx(_styles, "section")} tag="section"> 13 | <_Builtin.Container 14 | className={_utils.cx(_styles, "container", "center")} 15 | tag="div" 16 | > 17 | <_Builtin.Heading className={_utils.cx(_styles, "mb2")} tag="h2"> 18 | {headingText} 19 | 20 | <_Builtin.Paragraph className={_utils.cx(_styles, "mw-70ch", "mb2")}> 21 | { 22 | "Welcome to the Visual Developers Job Board - your one-stop destination for discovering the most exciting opportunities in Webflow, no-code, and traditional development. Empower your career by connecting with innovative companies that value creativity and technical expertise in equal measure." 23 | } 24 | 25 | <_Builtin.Link 26 | className={_utils.cx(_styles, "button")} 27 | button={true} 28 | options={{ 29 | href: "#", 30 | }} 31 | {...button} 32 | > 33 | {"Get started"} 34 | 35 | 36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /devlink/_Builtin/BackgroundVideo.d.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | declare type BackgroundVideoWrapperProps = { 3 | tag?: keyof HTMLElementTagNameMap; 4 | className?: string; 5 | sources?: string[]; 6 | posterImage?: ""; 7 | autoPlay?: boolean; 8 | loop?: boolean; 9 | children?: React.ReactElement; 10 | }; 11 | export declare const BackgroundVideoWrapper: ({ 12 | tag, 13 | className, 14 | autoPlay, 15 | loop, 16 | sources, 17 | posterImage, 18 | children, 19 | }: BackgroundVideoWrapperProps) => JSX.Element; 20 | declare type BackgroundVideoPlayPauseButtonProps = { 21 | className?: string; 22 | children: React.ReactElement< 23 | | BackgroundVideoPlayPauseButtonPlayingProps 24 | | BackgroundVideoPlayPauseButtonPausedProps 25 | >[]; 26 | }; 27 | export declare const BackgroundVideoPlayPauseButton: ({ 28 | children, 29 | className, 30 | }: BackgroundVideoPlayPauseButtonProps) => JSX.Element; 31 | declare type BackgroundVideoPlayPauseButtonPlayingProps = { 32 | children: React.ReactNode; 33 | }; 34 | export declare const BackgroundVideoPlayPauseButtonPlaying: ({ 35 | children, 36 | }: BackgroundVideoPlayPauseButtonPlayingProps) => JSX.Element; 37 | declare type BackgroundVideoPlayPauseButtonPausedProps = { 38 | children: React.ReactNode; 39 | }; 40 | export declare const BackgroundVideoPlayPauseButtonPaused: ({ 41 | children, 42 | }: BackgroundVideoPlayPauseButtonPausedProps) => JSX.Element; 43 | export {}; 44 | -------------------------------------------------------------------------------- /devlink/_Builtin/YouTubeVideo.js: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { cj } from "../utils"; 3 | const DEFAULT_16_9_RATIO = 0.5617021276595745; 4 | export function YouTubeVideo({ 5 | className = "", 6 | title, 7 | videoId, 8 | aspectRatio = DEFAULT_16_9_RATIO, 9 | startAt = 0, 10 | showAllRelatedVideos = false, 11 | controls = true, 12 | autoplay = false, 13 | muted = false, 14 | privacyMode = false, 15 | ...props 16 | }) { 17 | const baseUrl = privacyMode 18 | ? "https://www.youtube-nocookie.com/embed" 19 | : "https://www.youtube.com/embed"; 20 | const urlParams = Object.entries({ 21 | startAt, 22 | showAllRelatedVideos, 23 | controls, 24 | autoplay, 25 | muted, 26 | }) 27 | .map(([k, v]) => `${k}=${Number(v)}`) 28 | .join("&"); 29 | const iframeStyle = { 30 | position: "absolute", 31 | left: 0, 32 | top: 0, 33 | width: "100%", 34 | height: "100%", 35 | pointerEvents: "auto", 36 | }; 37 | return ( 38 |
43 |