/components$1',
27 | },
28 | };
29 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/ProgressWithCustomStroke.tsx:
--------------------------------------------------------------------------------
1 | import { Space, Progress } from 'antd';
2 |
3 | ProgressWithCustomStroke.title = 'ProgressWithCustomStroke';
4 | ProgressWithCustomStroke.url = 'https://ant.design/components/progress/';
5 |
6 | export default function ProgressWithCustomStroke() {
7 | return (
8 |
9 |
16 |
24 |
25 |
33 |
41 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/.github/config.yml:
--------------------------------------------------------------------------------
1 | ##
2 | # Configuration for welcome bot - https://github.com/behaviorbot/welcome
3 | ##
4 |
5 | # Configuration for new-issue-welcome - https://github.com/behaviorbot/new-issue-welcome
6 | newIssueWelcomeComment: >
7 | Thanks for opening your first issue here! Be sure to follow our issue guideline.
8 |
9 | # Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome
10 | # Comment to be posted to on PRs from first time contributors in your repository
11 | newPRWelcomeComment: >
12 | Thanks for opening your first PR here! Be sure to follow our PR guideline.
13 |
14 | ##
15 | # Configuration for request-info - https://github.com/behaviorbot/request-info
16 | ##
17 |
18 | # Comment to reply with (required)
19 | requestInfoReplyComment: >
20 | Hello! Can you provide us with more info for this? And be sure to check our guideline.
21 |
22 | # *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
23 | requestInfoLabelToAdd: needs-more-info
24 |
25 | ##
26 | # Configuration for todo bot - https://todo.jasonet.co
27 | ##
28 |
29 | todo:
30 | keyword: ["@TODO"]
31 | bodyKeyword: ["@TODO_BODY"]
32 | blobLines: 5
33 | autoAssign: false
34 | label: false
35 | reopenClosed: false
36 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "./",
4 | "paths": {
5 | "@src/*": [
6 | "src/*"
7 | ],
8 | "@tests/*": [
9 | "__tests__/*"
10 | ]
11 | },
12 | "allowJs": true,
13 | "noImplicitAny": false,
14 | "strictNullChecks": false,
15 | "allowSyntheticDefaultImports": true,
16 | "jsx": "preserve",
17 | "lib": [
18 | "dom",
19 | "es2017"
20 | ],
21 | "module": "esnext",
22 | "moduleResolution": "node",
23 | "noEmit": true,
24 | "noUnusedLocals": false,
25 | "noUnusedParameters": false,
26 | "preserveConstEnums": true,
27 | "removeComments": false,
28 | "skipLibCheck": true,
29 | "sourceMap": true,
30 | "strict": true,
31 | "sourceRoot": "/",
32 | "inlineSources": true,
33 | "target": "esnext",
34 | "forceConsistentCasingInFileNames": true,
35 | "esModuleInterop": true,
36 | "resolveJsonModule": true,
37 | "isolatedModules": true,
38 | "incremental": true,
39 | "tsBuildInfoFile": ".tsbuildinfo"
40 | },
41 | "exclude": [
42 | "node_modules",
43 | ".storybook"
44 | ],
45 | "include": [
46 | "next-en",
47 | "next-env.d.ts",
48 | "**/*.ts",
49 | "**/*.tsx"
50 | ]
51 | }
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/SwitchablePicker.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { DatePicker, TimePicker, Select, Space } from 'antd';
3 |
4 | const { Option } = Select;
5 |
6 | function PickerWithType({ type, onChange }) {
7 | if (type === 'time') return ;
8 | if (type === 'date') return ;
9 | return ;
10 | }
11 |
12 | /**
13 | * @description
14 | * Switch in different types of pickers by Select.
15 | *
16 | * @see
17 | * [https://ant.design/components/date-picker/](https://ant.design/components/date-picker/)
18 | */
19 | export default function SwitchablePicker() {
20 | const [type, setType] = useState('time');
21 | return (
22 |
23 |
31 | console.log(value)} />
32 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/SEO.tsx:
--------------------------------------------------------------------------------
1 | import { NextSeo } from 'next-seo';
2 |
3 | import { appName, baseUrl } from '@src/config/app';
4 | import seoConfig, { defaultDescription } from '@src/config/seo';
5 | import { OpenGraph } from 'next-seo/lib/types';
6 |
7 | export type SEOProps = {
8 | title: (appName: string) => string | string;
9 | description?: string;
10 | path: string;
11 | images?: typeof seoConfig.openGraph.images;
12 | };
13 |
14 | export function getImageObject(imageUrl: string) {
15 | return {
16 | url: imageUrl,
17 | width: 860,
18 | height: 506,
19 | alt: `Image from ${appName}`,
20 | };
21 | }
22 |
23 | export default function SEO(props: SEOProps) {
24 | let { title, description = defaultDescription, path, images = [] } = props;
25 |
26 | const url = baseUrl + path;
27 |
28 | const openGraph: OpenGraph = {
29 | ...seoConfig.openGraph,
30 | title: typeof title === 'string' ? title : title(appName),
31 | description,
32 | url,
33 | };
34 |
35 | if (images.length > 0) openGraph.images = images;
36 |
37 | return (
38 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/BaseWebPreview/ProgressBar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { ProgressBar } from 'baseui/progress-bar';
3 |
4 | ProgressBarDemo.title = 'ProgressBar';
5 | ProgressBarDemo.url = 'https://v9-9-0.baseweb.design/components/progress-bar';
6 |
7 | const SUCCESS_VALUE = 100;
8 | // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
9 | function useInterval(callback: () => void, delay: number | null) {
10 | const savedCallback = React.useRef(() => {});
11 | // Remember the latest callback.
12 | React.useEffect(() => {
13 | savedCallback.current = callback;
14 | }, [callback]);
15 | // Set up the interval.
16 | React.useEffect((): any => {
17 | function tick() {
18 | savedCallback.current();
19 | }
20 | if (delay !== null) {
21 | let id = setInterval(tick, delay);
22 | return () => clearInterval(id);
23 | }
24 | }, [delay]);
25 | }
26 |
27 | export default function ProgressBarDemo() {
28 | const [value, setValue] = React.useState(0);
29 | useInterval(() => {
30 | if (value < SUCCESS_VALUE) {
31 | setValue(value + 10);
32 | } else {
33 | setValue(0);
34 | }
35 | }, 1000);
36 | return ;
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/DatePickerSize.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { DatePicker, Radio, Space } from 'antd';
3 |
4 | const { RangePicker } = DatePicker;
5 |
6 | DatePickerSize.title = 'DatePickerSize';
7 | DatePickerSize.url = 'https://ant.design/components/date-picker/';
8 |
9 | /**
10 | * @see
11 | * [https://ant.design/components/date-picker/](https://ant.design/components/date-picker/)
12 | */
13 | export default function DatePickerSize() {
14 | const [state, setState] = useState({
15 | size: 'default',
16 | });
17 |
18 | const { size } = state;
19 |
20 | const handleSizeChange = (e) => {
21 | setState({ size: e.target.value });
22 | };
23 |
24 | return (
25 |
26 |
27 | Large
28 | Default
29 | Small
30 |
31 |
32 |
33 |
34 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/ModalDialog.tsx:
--------------------------------------------------------------------------------
1 | import { Modal, Button, Space } from 'antd';
2 |
3 | function info() {
4 | Modal.info({
5 | title: 'This is a notification message',
6 | content: (
7 |
8 |
some messages...some messages...
9 |
some messages...some messages...
10 |
16 | setValue(Array.isArray(date) ? date : [date])}
19 | />
20 | setRange(Array.isArray(date) ? date : [date])}
23 | range
24 | />
25 | setValue(Array.isArray(date) ? date : [date])}
28 | timeSelectStart
29 | />
30 | setValue(Array.isArray(date) ? date : [date])}
33 | quickSelect
34 | range
35 | timeSelectStart
36 | timeSelectEnd
37 | />
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | # App name
2 | NEXT_PUBLIC_APP_NAME="Next.js 10 Template"
3 |
4 | # Base url of this project. Use `.env.local` to override.
5 | NEXT_PUBLIC_BASE_URL="https://nextjs-10-template.vercel.app"
6 |
7 | # Comma separated domains that are allowed to access /api/unfurl endpoint
8 | UNFURL_ALLOW_ORIGINS="localhost"
9 |
10 | # Fathom configs. Use `.env.local` to override.
11 | NEXT_PUBLIC_FATHOM_SITE_ID="some-site-id"
12 | NEXT_PUBLIC_FATHOM_INCLUDED_DOMAINS="example.com,blog.example.com"
13 |
14 | # Adjust this url if using Fathom custom domain
15 | NEXT_PUBLIC_FATHOM_URL="https://cdn.usefathom.com/script.js"
16 |
17 | # Optional public analytic that will be exposed via `/analytic` redirect. Leave empty to disable.
18 | NEXT_PUBLIC_SHARE_ANALYTIC=""
19 |
20 | NEXT_PUBLIC_GITHUB_REPO="https://github.com/wzulfikar/nextjs-10"
21 |
22 | # Stripe config for https://github.com/ynnoj/next-stripe.
23 | # Use `.env.local` to override.
24 | NEXT_PUBLIC_STRIPE_PUBLIC_KEY="some-key"
25 | STRIPE_RESTRICTED_KEY="some-key"
26 | STRIPE_WEBHOOK_SECRET="some-secret"
27 | STRIPE_WEBHOOK_ENDPOINT="${NEXT_PUBLIC_BASE_URL}/api/webhook/stripe"
28 |
29 | # See: https://feedback.fish
30 | NEXT_PUBLIC_FEEDBACK_FISH_PROJECT_ID="some-project-id"
31 |
32 | # Apollo config. Use `.env.local` to override.
33 | APOLLO_KEY=some-key
34 | APOLLO_SERVICE=some-service-name
35 | APOLLO_GRAPH_VARIANT=current
36 | APOLLO_SCHEMA_REPORTING=true
--------------------------------------------------------------------------------
/src/components/base/DotsLoader.tsx:
--------------------------------------------------------------------------------
1 | type DotsLoaderProps = {
2 | size?: 'xs' | 'sm' | 'md' | 'lg';
3 | color?: string;
4 | align?: 'left' | 'center' | 'right';
5 | hidden?: boolean;
6 | };
7 |
8 | const alignments = {
9 | left: 'flex justify-start',
10 | center: 'flex justify-center',
11 | right: 'flex justify-end',
12 | };
13 |
14 | const sizes = {
15 | xs: '2em',
16 | sm: '2.5em',
17 | md: '3em',
18 | lg: '4em',
19 | };
20 |
21 | /**
22 | * `DotsLoader` renders three dots loader that can be useful
23 | * to indicate loading process of inline or embedded components.
24 | */
25 | export default function DotsLoader({
26 | size = 'sm',
27 | color = 'gray',
28 | align = 'center',
29 | hidden = false,
30 | }: DotsLoaderProps) {
31 | return (
32 |
33 |
51 | .
52 | .
53 | .
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/checkly/snippets/takeScreenshot.js:
--------------------------------------------------------------------------------
1 | // [CHECKLY] Omit these lines when adding to checkly
2 | const wait = require('./wait.js');
3 |
4 | async function takeScreenshot({
5 | baseUrl,
6 | playwright,
7 | driver,
8 | viewport,
9 | device = undefined,
10 | path = '/',
11 | screenshotBasePath = '',
12 | locale,
13 | }) {
14 | // Separator for suffix
15 | const separator = '_';
16 |
17 | // Suffix for screenshot name.
18 | // Example: _.chromium.1280x1280.no-device.jpg
19 | const suffix = `--${driver}${separator}${viewport.width}x${
20 | viewport.height
21 | }${separator}${device || 'no-device'}${separator}${locale}`;
22 |
23 | const name = path.replace(/\//g, '_') + `${suffix}.jpg`;
24 |
25 | const options = {
26 | path: screenshotBasePath + name,
27 | fullPage: true,
28 | };
29 |
30 | const browser = await playwright[driver].launch();
31 | const ctx = await browser.newContext({
32 | ...(device ? playwright.devices[device] : {}),
33 | locale,
34 | });
35 | const page = await ctx.newPage();
36 |
37 | await page.setViewportSize(viewport);
38 | await page.goto(baseUrl + path);
39 |
40 | // Wait 2 seconds for additional network requests
41 | await wait(2000);
42 |
43 | await page.screenshot(options);
44 | await browser.close();
45 |
46 | console.log('[INFO] screenshot done:', name);
47 | }
48 |
49 | // [CHECKLY] Omit below lines when adding to checkly
50 | module.exports = takeScreenshot;
51 |
--------------------------------------------------------------------------------
/src/services/stripe-webhook/mock-db.ts:
--------------------------------------------------------------------------------
1 | // Mock db
2 | const db = {
3 | users: {
4 | updateBilling: async (uuid: string, payload) => {
5 | console.log('[mock-db] users.updateBilling:', { uuid, payload });
6 | return { error: undefined };
7 | },
8 | },
9 | customers: {
10 | insert: async ({ id, stripe_customer_id }) => {
11 | console.log('[mock-db] customers.insert:', { id, stripe_customer_id });
12 | return { id, stripe_customer_id, error: undefined };
13 | },
14 | find: async (payload: { uuid?: string; stripe_customer_id?: string }) => {
15 | console.log('[mock-db] customers.find:', payload);
16 | return {
17 | data: {
18 | id: payload.uuid,
19 | stripe_customer_id: payload.stripe_customer_id,
20 | },
21 | error: undefined,
22 | };
23 | },
24 | },
25 | products: {
26 | insert: async (product, opts) => {
27 | console.log('[mock-db] products.insert:', { product, opts });
28 | return { error: null };
29 | },
30 | },
31 | prices: {
32 | insert: async (price, opts) => {
33 | console.log('[mock-db] prices.insert:', { price, opts });
34 | return { error: null };
35 | },
36 | },
37 | subscriptions: {
38 | insert: async (subscription, opts) => {
39 | console.log('[mock-db] subscriptions.insert:', { subscription, opts });
40 | return { error: null };
41 | },
42 | },
43 | };
44 |
45 | export default db;
46 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/ContentPlaceholder.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useMeasure } from 'react-use';
3 |
4 | export default function ContentPlaceholder({
5 | text = undefined,
6 | circle = undefined,
7 | }) {
8 | const [
9 | containerRef,
10 | { width: containerWidth, height: containerHeight },
11 | ] = useMeasure();
12 | const [textRef, { width: textWidth, height: textHeight }] = useMeasure();
13 |
14 | const textStyle = {
15 | marginTop: containerHeight * 0.5 - textHeight * 0.5,
16 | marginLeft: containerWidth * 0.5 - textWidth * 0.5,
17 | };
18 |
19 | return (
20 |
21 | {text && (
22 |
27 | {text}
28 |
29 | )}
30 |
45 |
24 |
29 | Top
30 | Bottom
31 | Left
32 | Right
33 |
34 |
35 |
36 |
1
37 |
38 |
39 |
2
40 |
41 |
42 |
3
43 |
44 |
45 |
4
46 |
47 |
48 |
Some contents...
56 | Some contents...
57 | Some contents...
58 |
59 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/pages/api/stripe/getCustomerPlans.ts:
--------------------------------------------------------------------------------
1 | import initStripe from '@src/lib/stripe/init';
2 |
3 | const stripe = initStripe();
4 |
5 | const recurringInterval = {
6 | day: 'daily',
7 | month: 'monthly',
8 | year: 'yearly',
9 | };
10 |
11 | export default async function handler(req, res) {
12 | const customer_id: string = req.query.customer_id as string;
13 | try {
14 | if (!customer_id.startsWith('cus_')) {
15 | throw Error('Incorrect Customer ID.');
16 | }
17 | const subscriptions = await stripe.subscriptions.list({
18 | customer: customer_id,
19 | status: 'active',
20 | });
21 |
22 | const products = await stripe.products.list({
23 | ids: subscriptions.data.map((sub) => (sub as any).plan.product),
24 | });
25 |
26 | const productMap = {};
27 | products.data.forEach((product) => {
28 | productMap[product.id] = product.name;
29 | });
30 |
31 | const plans: {
32 | amount: number;
33 | product: {
34 | id: string;
35 | name?: string;
36 | };
37 | interval: string;
38 | }[] = subscriptions.data
39 | .map((sub: any) => ({
40 | id: sub.id,
41 | amount: sub.plan.amount,
42 | currency: sub.plan.currency,
43 | cancel_at: sub.cancel_at,
44 | canceled_at: sub.canceled_at,
45 | interval: recurringInterval[sub.plan.interval],
46 | product: {
47 | id: sub.plan.product,
48 | name: productMap[sub.plan.product],
49 | },
50 | }))
51 | .sort((a, b) => (a.cancel_at ? 1 : -1));
52 |
53 | res.status(200).json(plans);
54 | } catch (err) {
55 | res.status(500).json({ statusCode: 500, message: err.message });
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const sitemap = require('nextjs-sitemap-generator');
2 | const withAntdLess = require('next-plugin-antd-less');
3 |
4 | const nextHandlers = require('./next-handlers.js');
5 |
6 | let withBundleAnalyzer = (bundle) => bundle;
7 | if (process.env.ANALYZE === 'true') {
8 | withBundleAnalyzer = require('@next/bundle-analyzer')({
9 | enabled: true,
10 | });
11 | }
12 |
13 | // Generate sitemap.
14 | // See: https://github.com/IlusionDev/nextjs-sitemap-generator
15 | sitemap({
16 | baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
17 | pagesDirectory: __dirname + '/pages',
18 | targetDirectory: 'public/',
19 | ignoredPaths: ['api', '_preview'],
20 | });
21 |
22 | const bundle = withAntdLess({
23 | ...nextHandlers,
24 |
25 | // Uncomment to enable source map in production build.
26 | // See: https://nextjs.org/docs/advanced-features/source-maps
27 | // productionBrowserSourceMaps: true,
28 |
29 | // See: https://github.com/SolidZORO/next-plugin-antd-less
30 | modifyVars: { '@primary-color': '#5046e5' },
31 |
32 | // See: https://github.com/webpack-contrib/css-loader#object
33 | cssLoaderOptions: {
34 | modules: {
35 | auto: true,
36 | },
37 | },
38 |
39 | // Other Config Here...
40 |
41 | webpack(config) {
42 | // `antd` needs moment and moment will include all its locales by default.
43 | // We use `moment-locales-webpack-plugin` to remove unused locales from our build.
44 | if (process.env.NODE_ENV === 'production') {
45 | const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
46 | config.plugins.push(new MomentLocalesPlugin());
47 | }
48 |
49 | return config;
50 | },
51 | });
52 |
53 | module.exports = withBundleAnalyzer(bundle);
54 |
--------------------------------------------------------------------------------
/pages/api/unfurl.ts:
--------------------------------------------------------------------------------
1 | import { unfurl } from 'unfurl.js';
2 |
3 | const isUrl = /https?:\/\//;
4 |
5 | const allowOrigins = process.env.UNFURL_ALLOW_ORIGINS?.split(',');
6 |
7 | function parseWildcardDomain(domain) {
8 | if (domain.startsWith('*')) {
9 | return domain.substr(2).split('.').splice(-2).join('.');
10 | }
11 | if (domain.startsWith('localhost')) {
12 | return 'localhost';
13 | }
14 | return domain;
15 | }
16 |
17 | /**
18 | * @description
19 | * Get open graph metadata from given `url` query. Example:
20 | *
21 | * @example
22 | * ```
23 | * // Get metadata for github.com
24 | * fetch('/api/unfurl?url=https://github.com').then(res => res.json()).then(json => console.log(json));
25 | * ```
26 | *
27 | * @see
28 | * [https://nextjs-10-template.vercel.app/api/unfurl?url=https://github.com](https://nextjs-10-template.vercel.app/api/unfurl?url=https://github.com)
29 | */
30 | async function handler(req, res) {
31 | const url = req.query.url;
32 | const origin = req.headers.origin || req.headers.host;
33 |
34 | // Check origins (wildcard supported)
35 | let allowOrigin = null;
36 | allowOrigins.forEach((domain) => {
37 | if (origin === domain || parseWildcardDomain(origin) === domain) {
38 | allowOrigin = origin;
39 | }
40 | });
41 |
42 | if (allowOrigin) {
43 | res.setHeader('Access-Control-Allow-Origin', allowOrigin);
44 | }
45 |
46 | if (!url) {
47 | return res.send('Please submit a url with querystring', 400);
48 | }
49 |
50 | if (!isUrl.test(url)) {
51 | return res.send('Please only submit http(s) urls', 400);
52 | }
53 |
54 | try {
55 | const result = await unfurl(url);
56 | res.send(result);
57 | } catch (err) {
58 | res.send('unfurl failed: ' + err.message);
59 | }
60 | }
61 |
62 | export default handler;
63 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/ModalWithFooter.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Modal, Button } from 'antd';
3 |
4 | export default function ModalWithFooter() {
5 | const [state, setState] = useState({
6 | loading: false,
7 | visible: false,
8 | });
9 | const { visible, loading } = state;
10 |
11 | const showModal = () => {
12 | setState({ ...state, visible: true });
13 | };
14 |
15 | const handleOk = () => {
16 | setState({ ...state, loading: true });
17 | setTimeout(() => {
18 | setState({ ...state, loading: false, visible: false });
19 | }, 3000);
20 | };
21 |
22 | const handleCancel = () => {
23 | setState({ ...state, visible: false });
24 | };
25 |
26 | return (
27 | <>
28 |
29 |
36 | Return
37 | ,
38 | ,
46 | ,
55 | ]}
56 | >
57 | Some contents...
58 | Some contents...
59 | Some contents...
60 | Some contents...
61 | Some contents...
62 |
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/src/components/ToggleDarkMode.tsx:
--------------------------------------------------------------------------------
1 | import 'react-toggle/style.css';
2 |
3 | import { memo, useEffect, useState } from 'react';
4 | import Toggle from 'react-toggle';
5 | import { HiSun, HiMoon } from 'react-icons/hi';
6 | import { usePrevious } from 'react-use';
7 |
8 | import useDarkMode from '@src/hooks/useDarkMode';
9 | import trackGoal from '@src/utils/trackGoal';
10 |
11 | function ToggleDarkMode({ initialValue = true }) {
12 | const darkMode = useDarkMode(initialValue);
13 |
14 | const [checked, setChecked] = useState(initialValue);
15 |
16 | const prevDarkMode = usePrevious(darkMode.value);
17 |
18 | useEffect(() => {
19 | setChecked(darkMode.value);
20 |
21 | if (!prevDarkMode && darkMode.value) {
22 | // Track if dark mode has been enabled
23 | trackGoal('DarkMode_Enabled');
24 | } else if (prevDarkMode && !darkMode.value) {
25 | // Only track `DarkMode_Disabled` if it was previously enabled
26 | trackGoal('DarkMode_Disabled');
27 | }
28 | }, [darkMode.value]);
29 |
30 | return (
31 |
32 |
46 |
51 | ),
52 | unchecked: (
53 |
54 | ),
55 | }}
56 | onChange={darkMode.toggle}
57 | />
58 |
59 | );
60 | }
61 |
62 | export default memo(ToggleDarkMode);
63 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
36 | ## Build Size
37 |
38 | 
39 |
40 | ## Lighthouse Report
41 |
42 | 
43 |
--------------------------------------------------------------------------------
/next-handlers.js:
--------------------------------------------------------------------------------
1 | const handlers = {
2 | /**
3 | * @description
4 | * Headers allow you to set custom HTTP headers for an incoming request path (Next.js 9.5 and up).
5 | *
6 | * @see
7 | * [https://nextjs.org/docs/api-reference/next.config.js/headers](https://nextjs.org/docs/api-reference/next.config.js/headers)
8 | */
9 | async headers() {
10 | return [
11 | {
12 | source: '/api/unfurl',
13 | headers: [
14 | {
15 | key: 'Cache-Control',
16 | value: 's-maxage=10, stale-while-revalidate',
17 | },
18 | ],
19 | },
20 | ];
21 | },
22 | /**
23 | * @description
24 | * Redirects allow you to redirect an incoming request path to a different destination path (Next.js 9.5 and up).
25 | *
26 | * @see
27 | * [https://nextjs.org/docs/api-reference/next.config.js/redirects](https://nextjs.org/docs/api-reference/next.config.js/redirects)
28 | */
29 | async redirects() {
30 | return [
31 | {
32 | source: '/_preview',
33 | destination: '/_preview/SanityCheck',
34 | permanent: true,
35 | },
36 | {
37 | source: '/github',
38 | destination: process.env.NEXT_PUBLIC_GITHUB_REPO,
39 | permanent: false,
40 | },
41 | {
42 | source: '/analytic',
43 | destination: process.env.NEXT_PUBLIC_SHARE_ANALYTIC || '/404',
44 | permanent: false,
45 | },
46 | ];
47 | },
48 | /**
49 | * @description
50 | * Rewrites allow you to map an incoming request path to a different destination path (Next.js 9.5 and up).
51 | *
52 | * @see
53 | * [https://nextjs.org/docs/api-reference/next.config.js/rewrites](https://nextjs.org/docs/api-reference/next.config.js/rewrites)
54 | */
55 | async rewrites() {
56 | return [
57 | {
58 | source: '/service-worker.js',
59 | destination: '/_next/static/service-worker.js',
60 | },
61 | ];
62 | },
63 | };
64 |
65 | module.exports = handlers;
66 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/DynamicBadge.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Badge, Button, Switch } from 'antd';
3 | import {
4 | MinusOutlined,
5 | PlusOutlined,
6 | QuestionOutlined,
7 | } from '@ant-design/icons';
8 |
9 | const ButtonGroup = Button.Group;
10 |
11 | export default function DynamicBadgePreview() {
12 | const [state, setState] = useState({
13 | count: 5,
14 | show: true,
15 | });
16 |
17 | const increase = () => {
18 | const count = state.count + 1;
19 | setState({ ...state, count });
20 | };
21 |
22 | const decline = () => {
23 | let count = state.count - 1;
24 | if (count < 0) {
25 | count = 0;
26 | }
27 | setState({ ...state, count });
28 | };
29 |
30 | const random = () => {
31 | const count = Math.floor(Math.random() * 100);
32 | setState({ ...state, count });
33 | };
34 |
35 | const onChange = (show) => {
36 | setState({ ...state, show });
37 | };
38 | return (
39 |
40 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
61 |
64 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
33 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
40 | {listData.map((item) => (
41 | -
42 |
43 |
44 | ))}
45 |
46 | );
47 | }
48 |
49 | function getMonthData(value) {
50 | if (value.month() === 8) {
51 | return 1394;
52 | }
53 | }
54 |
55 | function monthCellRender(value) {
56 | const num = getMonthData(value);
57 | return num ? (
58 |
59 |
60 | Backlog number
61 |
62 | ) : null;
63 | }
64 |
65 | export default function CalendarDemo() {
66 | return (
67 | <>
68 |
89 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/ModalDraggable.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef } from 'react';
2 | import { Modal, Button } from 'antd';
3 | import Draggable from 'react-draggable';
4 |
5 | export default function ModalDraggable() {
6 | const [state, setState] = useState({
7 | visible: false,
8 | disabled: true,
9 | bounds: { left: 0, top: 0, bottom: 0, right: 0 },
10 | });
11 |
12 | const draggleRef = useRef(null);
13 |
14 | const showModal = () => {
15 | setState({ ...state, visible: true });
16 | };
17 |
18 | const handleOk = (e) => {
19 | console.log(e);
20 | setState({ ...state, visible: false });
21 | };
22 |
23 | const handleCancel = (e) => {
24 | console.log(e);
25 | setState({ ...state, visible: false });
26 | };
27 |
28 | const onStart = (event, uiData) => {
29 | const { clientWidth, clientHeight } = window?.document?.documentElement;
30 | const targetRect = draggleRef?.current?.getBoundingClientRect();
31 | setState({
32 | ...state,
33 | bounds: {
34 | left: -targetRect?.left + uiData?.x,
35 | right: clientWidth - (targetRect?.right - uiData?.x),
36 | top: -targetRect?.top + uiData?.y,
37 | bottom: clientHeight - (targetRect?.bottom - uiData?.y),
38 | },
39 | });
40 | };
41 |
42 | const { bounds, disabled, visible } = state;
43 |
44 | return (
45 | <>
46 |
47 | {
55 | if (disabled) {
56 | setState({ ...state, disabled: false });
57 | }
58 | }}
59 | onMouseOut={() => {
60 | setState({ ...state, disabled: true });
61 | }}
62 | // fix eslintjsx-a11y/mouse-events-have-key-events
63 | // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
64 | onFocus={() => {}}
65 | onBlur={() => {}}
66 | // end
67 | >
68 | Draggable Modal
69 |
70 | }
71 | visible={visible}
72 | onOk={handleOk}
73 | onCancel={handleCancel}
74 | modalRender={(modal) => (
75 | onStart(event, uiData)}
79 | >
80 | {modal}
81 |
82 | )}
83 | >
84 |
85 | Just don't learn physics at school and your life will be full of
86 | magic and miracles.
87 |
88 |
89 |
90 | Day before yesterday I saw a rabbit, and yesterday a deer, and today,
91 | you.
92 |
93 |
94 |
95 | );
96 | }
97 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/Grid.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 | import { FiExternalLink } from 'react-icons/fi';
3 |
4 | import getGithubUrl from '../getGithubUrl';
5 |
6 | import trackGoal from '@src/utils/trackGoal';
7 |
8 | Grid.Cell = Cell;
9 |
10 | const ctx = createContext({ previewPath: null });
11 | ctx.displayName = 'GridContext';
12 |
13 | /**
14 | * @description
15 | * Utility component to wrap preview components inside a grid cell.
16 | *
17 | * @example
18 | *
19 | *
20 | *
21 | *
22 | *
23 | */
24 | function Cell({ title, url, colspan = '', noExternalFile = false, children }) {
25 | const { previewPath } = useContext(ctx);
26 |
27 | // Infer github url based on cell title and preview path.
28 | // If `noExternalFile` is true, it means that the preview
29 | // is not from external file and thus, we can use
30 | // `index.tsx` instead of `title`.
31 | const githubUrl = getGithubUrl(
32 | previewPath + '/' + (noExternalFile ? 'index.tsx' : title)
33 | );
34 |
35 | return (
36 |
39 |
59 |
{children}
60 |
79 |
80 | {title}
81 |
82 |
83 | {children}
84 |
85 |
20 |
21 |
FadeInTransition
22 |
23 |
24 | FadeInTransition
25 |
26 |
27 |
28 |
29 |
30 |
CollapseTransition
31 |
32 |
33 | CollapseTransition
34 |
35 |
36 |
37 |
38 |
39 |
FadeInScaleTransition
40 |
41 |
42 | FadeInScaleTransition
43 |
44 |
45 |
46 |
47 |
48 |
PopOutTransition
49 |
50 |
51 | PopOutTransition
52 |
53 |
54 |
55 |
56 |
57 |
Rotate90Transition
58 |
59 |
60 | Rotate90Transition
61 |
62 |
63 |
64 |
65 |
66 |
SlideDownTransition
67 |
68 |
69 | SlideDownTransition
70 |
71 |
72 |
73 |
74 |
75 |
SlideOverTransition
76 |
77 |
78 | SlideOverTransition
79 |
80 |
81 |
82 |
37 | {text}
38 |
39 | ),
40 | githubUrl: defaultGithubUrl,
41 | wrapper: wrapper.center,
42 | props: { text: 'Hello world, it works!' },
43 | },
44 | LottiePreview: loadComponent(() => import('./containers/LottiePreview'), {
45 | wrapper: wrapper.center,
46 | githubUrl: getGithubUrl('./containers/LottiePreview'),
47 | props: {
48 | animationUrl:
49 | 'https://assets5.lottiefiles.com/packages/lf20_mc6rrdlr.json',
50 | },
51 | }),
52 | Loader_DotsLoader: loadComponent(
53 | () => import('@src/components/base/DotsLoader'),
54 | {
55 | githubUrl: getGithubUrl('@src/components/base/DotsLoader'),
56 | props: { color: 'gray', size: 'sm', align: 'center' },
57 | }
58 | ),
59 | ContentPlaceholder: loadComponent(
60 | () => import('./containers/ContentPlaceholder'),
61 | {
62 | githubUrl: getGithubUrl('./containers/ContentPlaceholder'),
63 | props: { text: 'This is a placeholder', circle: false },
64 | }
65 | ),
66 | TransitionPreview: loadComponent(
67 | () => import('./containers/TransitionsPreview'),
68 | {
69 | wrapper: wrapper.center,
70 | githubUrl: getGithubUrl('./containers/TransitionsPreview'),
71 | props: {
72 | fadeInTransition: false,
73 | collapseTransition: false,
74 | fadeInScaleTransition: false,
75 | popOutTransition: false,
76 | rotate90Transition: false,
77 | slideDownTransition: false,
78 | slideOverTransition: false,
79 | },
80 | }
81 | ),
82 | TailwindPreview: loadComponent(() => import('./containers/TailwindPreview'), {
83 | githubUrl: getGithubUrl('./containers/TailwindPreview'),
84 | }),
85 | AntdPreview: loadComponent(() => import('./containers/AntdPreview'), {
86 | githubUrl: getGithubUrl('./containers/AntdPreview/index.tsx'),
87 | wrapper: wrapper.center,
88 | }),
89 | BaseWebPreview: loadComponent(() => import('./containers/BaseWebPreview'), {
90 | githubUrl: getGithubUrl('./containers/BaseWebPreview/index.tsx'),
91 | wrapper: wrapper.center,
92 | }),
93 | LinkPreview: loadComponent(() => import('@src/components/LinkPreview'), {
94 | wrapper: wrapper.center,
95 | githubUrl: getGithubUrl('@src/components/LinkPreview/index.tsx'),
96 | props: { url: 'https://github.com' },
97 | }),
98 | StripePreview: {
99 | redirect: '/_preview/StripePreview',
100 | },
101 | VercelPreview: loadComponent(() => import('./containers/VercelPreview'), {
102 | githubUrl: getGithubUrl('./containers/VercelPreview/index.tsx'),
103 | props: { hideDisgui: true },
104 | }),
105 | };
106 |
107 | export default components;
108 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/AntdPreview/Popconfirm.tsx:
--------------------------------------------------------------------------------
1 | import { Popconfirm, message, Button } from 'antd';
2 |
3 | const text = 'Are you sure to delete this task?';
4 |
5 | function confirm() {
6 | message.info('Clicked on Yes.');
7 | }
8 |
9 | PopconfirmDemo.title = 'Popconfirm';
10 | PopconfirmDemo.url = 'https://ant.design/components/popconfirm';
11 |
12 | export default function PopconfirmDemo() {
13 | return (
14 |
15 |
19 |
26 |
27 |
28 |
35 |
36 |
37 |
44 |
45 |
46 |
47 |
48 |
55 |
56 |
57 |
64 |
65 |
66 |
73 |
74 |
75 |
76 |
77 |
84 |
85 |
86 |
93 |
94 |
95 |
102 |
103 |
104 |
105 |
109 |
116 |
117 |
118 |
125 |
126 |
127 |
134 |
135 |
136 |
137 |
90 | {children}
91 |
92 | );
93 |
94 | const mergePreviewProps = { ...props, ...previewProps };
95 |
96 | const PreviewComponent = () => ;
97 |
98 | return (
99 | <>
100 |
101 |
102 |
103 |
104 |
105 |
106 |
109 | {router.query && !hideDisgui && !mergePreviewProps.hideDisgui && (
110 |
119 | )}
120 |
121 |
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import Link from 'next/link';
3 | import { DiGithubBadge } from 'react-icons/di';
4 |
5 | import styles from '@src/styles/Home.module.css';
6 | import ToggleDarkMode from '@src/components/ToggleDarkMode';
7 | import getGithubUrl from '@src/lib/github/getGithubUrl';
8 | import trackGoal from '@src/utils/trackGoal';
9 |
10 | const githubRepo = process.env.NEXT_PUBLIC_GITHUB_REPO;
11 | const repoParts = githubRepo.split('/');
12 | const repoName = repoParts.pop();
13 | const owner = repoParts.pop();
14 |
15 | const githubUrl = getGithubUrl({
16 | owner,
17 | repo: repoName,
18 | branch: 'main',
19 | file: 'pages/index.tsx',
20 | });
21 |
22 | export default function Home() {
23 | return (
24 |
129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/StripePreview/controller.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { loadStripe } from '@stripe/stripe-js';
3 | import {
4 | createCheckoutSession,
5 | createBillingPortalSession,
6 | } from 'next-stripe/client';
7 | import { useAsync } from 'react-use';
8 |
9 | import trackGoal from '@src/utils/trackGoal';
10 | import formatAmountForStripe from '@src/lib/stripe/formatAmountForStripe';
11 | import StripePreview from './elements';
12 |
13 | // Mock custom price
14 | const customPrice = {
15 | id: 'Pay custom amount for Next.js 10 Template',
16 | unit_amount: 150,
17 | currency: 'eur',
18 | product: {
19 | name: 'Custom Amount',
20 | images: [],
21 | },
22 | type: 'one_time',
23 | };
24 |
25 | export default function StripePreviewController({ prices }) {
26 | useEffect(() => {
27 | const session_id = localStorage.getItem('_stripeCheckoutSession');
28 | if (session_id) {
29 | console.log('session_id:', session_id);
30 |
31 | fetch(`/api/stripe/checkPayment?session_id=${session_id}`)
32 | .then((res) => res.json())
33 | .then((paymentIntent) => {
34 | console.log('paymentIntent:', paymentIntent);
35 |
36 | if (paymentIntent.statusCode === 500) {
37 | alert('Payment failed: ' + paymentIntent.message);
38 | return;
39 | }
40 |
41 | if (paymentIntent.payment_status === 'paid') {
42 | trackGoal(
43 | 'StripePreview_PaymentSuccessful',
44 | paymentIntent.amount_total
45 | );
46 | } else {
47 | trackGoal(
48 | 'StripePreview_PaymentFailed',
49 | paymentIntent.amount_total
50 | );
51 | }
52 |
53 | alert('Payment status: ' + paymentIntent.payment_status);
54 | localStorage.removeItem('_stripeCheckoutSession');
55 | });
56 | }
57 | }, []);
58 |
59 | const { value, loading, error } = useAsync(() =>
60 | fetch(
61 | `/api/stripe/getCustomerPlans?customer_id=${getCustomerId()}`
62 | ).then((res) => res.json())
63 | );
64 |
65 | if (error) {
66 | console.error('[stripe] getCustomerPlans failed:', error);
67 | }
68 |
69 | /**
70 | * @description
71 | * Dummy customer id (created for this demo).
72 | *
73 | * Name: Jerod Brekke
74 | * Email: jerod29@ethereal.email
75 | * Webmail: https://ethereal.email
76 | * Password: `McAWyZGARG5zf3SvDU`
77 | */
78 | function getCustomerId() {
79 | return 'cus_JCdi2hmQ4ggKhh';
80 | }
81 |
82 | async function onCheckout(priceId, amount, mode: 'subscription' | 'payment') {
83 | trackGoal('StripePreview_ClickCheckout', amount);
84 |
85 | // Create stripe checkout session
86 | const qty = 1; // Assume user will buy one item
87 |
88 | const isCustomAmount = priceId === customPrice.id;
89 |
90 | // Create line item based on custom amount or preset price
91 | const lineItem = isCustomAmount
92 | ? {
93 | name: customPrice.id,
94 | amount: formatAmountForStripe(amount / 100, customPrice.currency),
95 | currency: customPrice.currency,
96 | quantity: qty,
97 | }
98 | : {
99 | price: priceId,
100 | quantity: qty,
101 | };
102 |
103 | const session = await createCheckoutSession({
104 | customer: getCustomerId(),
105 | success_url: window.location.href,
106 | cancel_url: window.location.href,
107 | line_items: [lineItem],
108 | payment_method_types: ['card'],
109 |
110 | // Use `payment` mode if the `priceId` is one-time purchase
111 | // or `subscription` if it's a recurring payment.
112 | mode: mode,
113 | });
114 |
115 | // Store payment intent for after-payment checking
116 |
117 | const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY);
118 | if (stripe) {
119 | localStorage.setItem('_stripeCheckoutSession', session.id);
120 | stripe.redirectToCheckout({ sessionId: session.id });
121 | }
122 | }
123 |
124 | async function onClickManageSubscription() {
125 | trackGoal('StripePreview_ClickManageSubscription');
126 |
127 | const session = await createBillingPortalSession({
128 | customer: getCustomerId(),
129 | return_url: window.location.href,
130 | });
131 |
132 | window.location.href = session.url;
133 | }
134 |
135 | // Append "N more" if user has multiple subcsriptions.
136 | const currentPlan =
137 | value?.length &&
138 | `${value[0].product.name} (${value[0].interval})` +
139 | (value.length > 1 && ` and ${value.length - 1} more`);
140 |
141 | return (
142 |
148 | );
149 | }
150 |
--------------------------------------------------------------------------------
/src/components/_preview/containers/StripePreview/elements.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import Link from 'next/link';
3 | import { AiFillInfoCircle } from 'react-icons/ai';
4 |
5 | function HintStripeTestCards() {
6 | return (
7 |
8 |
19 |
20 | (eg.
21 | 4242
22 | 4242
23 | 4242
24 | 4242)
25 |
26 | {/* P.S: 4000000000003220 to trigger 3D Secure challenge flow */}
27 |
42 | {prices.map((price) => (
43 | -
47 | _onCheckout(
48 | price.id,
49 | price.unit_amount,
50 | Boolean(recurringSuffix) ? 'subscription' : 'payment'
51 | )
52 | }
53 | >
54 |
55 |
{price.product.name}
56 |
57 |
58 | {(price.unit_amount / 100).toFixed(2)}{' '}
59 | {price.currency.toUpperCase()} {recurringSuffix}
60 |
61 |
66 | ))}
67 |
68 | );
69 | }
70 |
71 | function Section({ title, children }) {
72 | return (
73 |
74 |
75 | {title}
76 |
77 | {children}
78 |
79 | );
80 | }
81 |
82 | export default function StripePreview({
83 | prices,
84 | currentPlan,
85 | onCheckout,
86 | onClickManageSubscription,
87 | }) {
88 | const pricesByType = { one_time: [], recurring: [] };
89 | prices.forEach((price) => pricesByType[price.type].push(price));
90 |
91 | return (
92 |
93 | {/* Header */}
94 |
95 | Stripe Checkout
96 |
97 |
98 | {/* Content */}
99 |
100 |
101 |
102 | {/* One-time products */}
103 |
106 |
107 | {/* Recurring products */}
108 |
109 | Pay monthly:
110 | price.recurring.interval === 'month'
113 | )}
114 | onCheckout={onCheckout}
115 | recurringSuffix="/ mth"
116 | />
117 | Pay yearly:
118 | price.recurring.interval === 'year'
121 | )}
122 | onCheckout={onCheckout}
123 | recurringSuffix="/ yr"
124 | />
125 |
126 |
127 | Current Plan: {currentPlan}.
128 |
134 |
135 |
136 |
137 |
145 |
146 |
79 |
83 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
197 |
198 |
199 |
200 |
30 |
Introducing the Vercel Experts Marketplace
31 |
|
32 |
Explore →
33 |
48 |
93 |
94 |
95 |
Vercel x Tailwind
96 |
97 |
98 |
99 |
100 |
101 | {/* Navbar small (logo only) */}
102 |
103 |
108 |
138 |
143 |
149 |
154 |
160 |
161 |
162 |
163 |
166 |
169 |
170 |
171 |
172 |
173 | Vercel combines the best developer experience with an obsessive
174 | focus on end-user performance. Our platform enables frontend
175 | teams to do their best work.
176 |
177 |
178 |
180 |
181 |