Showing preview only (516K chars total). Download the full file or copy to clipboard to get everything.
Repository: gridaco/cors.sh
Branch: main
Commit: 78f4896c751a
Files: 295
Total size: 447.1 KB
Directory structure:
gitextract_ynffi0i6/
├── .archives/
│ ├── console/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── logo/
│ │ │ └── index.tsx
│ │ ├── next-env.d.ts
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── pages/
│ │ │ ├── [id].tsx
│ │ │ ├── _app.tsx
│ │ │ ├── index.tsx
│ │ │ └── new.tsx
│ │ ├── styles/
│ │ │ ├── Home.module.css
│ │ │ └── globals.css
│ │ └── tsconfig.json
│ └── homepage/
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── components/
│ │ ├── appbar/
│ │ │ ├── appbar-parent-site.tsx
│ │ │ ├── appbar.tsx
│ │ │ └── index.ts
│ │ ├── button/
│ │ │ └── index.tsx
│ │ ├── chatwood/
│ │ │ └── index.jsx
│ │ ├── collabsible-info-card/
│ │ │ └── index.tsx
│ │ ├── cta-footer/
│ │ │ └── index.tsx
│ │ ├── cta-onboarding/
│ │ │ └── index.tsx
│ │ ├── cta-test-it/
│ │ │ └── index.tsx
│ │ ├── demo-terminal/
│ │ │ └── index.tsx
│ │ ├── icons/
│ │ │ └── check-filled.tsx
│ │ ├── index.ts
│ │ ├── logo/
│ │ │ └── index.tsx
│ │ └── pricing/
│ │ ├── card.tsx
│ │ ├── free-for-opensource.tsx
│ │ └── index.ts
│ ├── grida/
│ │ ├── .gitkeep
│ │ ├── AppbarGroup.tsx
│ │ ├── SectionCtaLast.tsx
│ │ ├── SectionDisclaimer.tsx
│ │ ├── SectionHero.tsx
│ │ ├── SectionPricing.tsx
│ │ └── SectionUsage.tsx
│ ├── grida.config.js
│ ├── k/
│ │ ├── examples.ts
│ │ ├── external-links.ts
│ │ ├── host.ts
│ │ ├── index.ts
│ │ └── price.ts
│ ├── layouts/
│ │ ├── payment-required-page.tsx
│ │ ├── pricing-card-list.tsx
│ │ └── step-layout.tsx
│ ├── next-env.d.ts
│ ├── next.config.js
│ ├── package.json
│ ├── pages/
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ ├── disclaimer.tsx
│ │ ├── get-started/
│ │ │ └── index.tsx
│ │ ├── index.tsx
│ │ ├── oauth/
│ │ │ └── callback.tsx
│ │ ├── onboarding/
│ │ │ ├── [id].tsx
│ │ │ ├── complete.tsx
│ │ │ ├── index.tsx
│ │ │ ├── payment-success-with-issue.tsx
│ │ │ └── payment-success.tsx
│ │ └── too-many-requests.tsx
│ ├── public/
│ │ └── robots.txt
│ ├── styles/
│ │ └── globals.css
│ └── tsconfig.json
├── .github/
│ └── ISSUE_TEMPLATE/
│ ├── apply-for-oss-program.yml
│ ├── bug_report.md
│ └── feature_request.md
├── .gitignore
├── .gitmodules
├── .nvmrc
├── .vscode/
│ └── settings.json
├── LICENSE
├── README.md
├── branding/
│ └── readme.md
├── cli/
│ ├── bin.ts
│ ├── index.ts
│ ├── jes.config.js
│ ├── package.json
│ ├── readme.md
│ ├── tsconfig.json
│ ├── update/
│ │ └── index.ts
│ └── version/
│ └── index.ts
├── design/
│ └── readme.md
├── docs/
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── blog/
│ │ ├── 2019-05-28-first-blog-post.md
│ │ ├── 2019-05-29-long-blog-post.md
│ │ ├── 2021-08-01-mdx-blog-post.mdx
│ │ ├── 2021-08-26-welcome/
│ │ │ └── index.md
│ │ └── authors.yml
│ ├── docs/
│ │ ├── guides/
│ │ │ ├── _category_.json
│ │ │ ├── api-instagram/
│ │ │ │ └── index.md
│ │ │ ├── api-tiktok/
│ │ │ │ └── index.md
│ │ │ ├── figma-plugin/
│ │ │ │ └── index.md
│ │ │ └── shopify-app/
│ │ │ └── index.md
│ │ ├── intro.md
│ │ ├── migrate-from-cors.bridged.cc.md
│ │ ├── tutorial-basics/
│ │ │ ├── _category_.json
│ │ │ ├── congratulations.md
│ │ │ ├── create-a-blog-post.md
│ │ │ ├── create-a-document.md
│ │ │ ├── create-a-page.md
│ │ │ ├── deploy-your-site.md
│ │ │ └── markdown-features.mdx
│ │ ├── tutorial-extras/
│ │ │ ├── _category_.json
│ │ │ ├── manage-docs-versions.md
│ │ │ └── translate-your-site.md
│ │ └── what-is-cors.md
│ ├── docusaurus.config.js
│ ├── package.json
│ ├── sidebars.js
│ ├── src/
│ │ └── css/
│ │ └── custom.css
│ └── static/
│ ├── .nojekyll
│ └── index.html
├── examples/
│ ├── a-simple-demo/
│ │ ├── index.html
│ │ └── index.js
│ └── readme.md
├── package.json
├── packages/
│ ├── api/
│ │ ├── index.ts
│ │ └── package.json
│ └── app-ui/
│ ├── components/
│ │ ├── api-key-reveal.tsx
│ │ ├── index.ts
│ │ └── underline-button.tsx
│ ├── layouts/
│ │ ├── form-page-latout.ts
│ │ ├── index.ts
│ │ └── page-close-button.tsx
│ ├── package.json
│ ├── tsconfig.json
│ └── utils/
│ └── index.ts
├── playground/
│ └── readme.md
├── services/
│ ├── auth.proxy.cors.sh/
│ │ ├── .gitignore
│ │ ├── deploy/
│ │ │ ├── prod.sh
│ │ │ └── staging.sh
│ │ ├── handler.ts
│ │ ├── package.json
│ │ ├── readme.md
│ │ └── serverless.yml
│ ├── lagacy/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── lib/
│ │ │ ├── cors.ts
│ │ │ └── utils.ts
│ │ ├── package.json
│ │ ├── serverless.yml
│ │ ├── src/
│ │ │ ├── _util/
│ │ │ │ └── size.ts
│ │ │ ├── app.ts
│ │ │ ├── auth/
│ │ │ │ ├── _tmp_static_api_keys/
│ │ │ │ │ ├── .gitignore
│ │ │ │ │ ├── README.md
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.ts
│ │ │ │ └── static-account-api-key-auth.ts
│ │ │ ├── index.ts
│ │ │ ├── limit/
│ │ │ │ ├── README.md
│ │ │ │ ├── blacklist-origin.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── payload-limit.ts
│ │ │ │ └── unknown-host-limit.ts
│ │ │ └── usage/
│ │ │ ├── README.md
│ │ │ ├── index.ts
│ │ │ └── model.ts
│ │ └── tsconfig.json
│ ├── mail.cors.sh/
│ │ ├── onboarding.mjml
│ │ ├── onboarding_with_payment_success.mjml
│ │ └── render/
│ │ ├── onboarding.subject
│ │ ├── onboarding.template.html
│ │ ├── onboarding_with_payment_success.subject
│ │ └── onboarding_with_payment_success.template.html
│ ├── proxy.cors.sh/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── contributing.md
│ │ ├── deploy/
│ │ │ ├── prod.sh
│ │ │ └── staging.sh
│ │ ├── docs/
│ │ │ └── README.md
│ │ ├── lib/
│ │ │ ├── cors.ts
│ │ │ └── utils.ts
│ │ ├── package.json
│ │ ├── serverless.yml
│ │ ├── src/
│ │ │ ├── _util/
│ │ │ │ ├── size.ts
│ │ │ │ └── x-header.ts
│ │ │ ├── app.ts
│ │ │ ├── auth/
│ │ │ │ ├── _tmp_static_api_keys/
│ │ │ │ │ ├── .gitignore
│ │ │ │ │ ├── README.md
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.ts
│ │ │ │ ├── keys-synced.ts
│ │ │ │ ├── keys-temp.ts
│ │ │ │ ├── keys.ts
│ │ │ │ └── legacy/
│ │ │ │ ├── index.ts
│ │ │ │ └── static-account-api-key-auth.ts
│ │ │ ├── index.ts
│ │ │ ├── k/
│ │ │ │ └── index.ts
│ │ │ ├── limit/
│ │ │ │ ├── README.md
│ │ │ │ ├── blacklist-origin.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── payload-limit.ts
│ │ │ │ └── rate-limit.ts
│ │ │ └── usage/
│ │ │ ├── README.md
│ │ │ ├── dynamo/
│ │ │ │ ├── log.ts
│ │ │ │ ├── model.ts
│ │ │ │ ├── readme.md
│ │ │ │ └── table.yml
│ │ │ ├── index.ts
│ │ │ └── type.ts
│ │ └── tsconfig.json
│ ├── readme.md
│ └── services.cors.sh/
│ ├── .gitignore
│ ├── app.ts
│ ├── auth/
│ │ ├── index.ts
│ │ ├── jwt.ts
│ │ ├── key.ts
│ │ ├── middleware.ts
│ │ └── readme.md
│ ├── clients/
│ │ ├── index.ts
│ │ ├── prisma.ts
│ │ ├── ses.ts
│ │ ├── slack.ts
│ │ └── stripe.ts
│ ├── controllers/
│ │ ├── _telemetry.ts
│ │ └── applications.ts
│ ├── deploy/
│ │ ├── dev.sh
│ │ ├── prod.sh
│ │ └── staging.sh
│ ├── index.ts
│ ├── jest.config.js
│ ├── keygen/
│ │ └── index.ts
│ ├── package.json
│ ├── prisma/
│ │ └── schema.prisma
│ ├── routes/
│ │ ├── applications/
│ │ │ └── index.ts
│ │ ├── auth/
│ │ │ └── index.ts
│ │ ├── index.ts
│ │ ├── onboarding/
│ │ │ └── index.ts
│ │ ├── payments/
│ │ │ ├── index.ts
│ │ │ └── readme.md
│ │ └── webhooks-stripe/
│ │ └── index.ts
│ ├── scripts/
│ │ └── aes-256-cbc-creds.js
│ ├── serverless.yml
│ ├── ses-email-templates/
│ │ └── index.js
│ ├── sync/
│ │ ├── index.ts
│ │ └── type.ts
│ ├── test/
│ │ ├── config.env.test
│ │ └── setup-tests.ts
│ ├── tsconfig.json
│ └── webpack.config.js
└── web/
├── .eslintrc.json
├── .gitignore
├── README.md
├── app/
│ ├── (console)/
│ │ ├── console/
│ │ │ ├── [id]/
│ │ │ │ └── page.tsx
│ │ │ ├── new/
│ │ │ │ └── page.tsx
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (home)/
│ │ ├── contact/
│ │ │ └── page.tsx
│ │ ├── get-started/
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ ├── onboarding/
│ │ │ ├── [id]/
│ │ │ │ └── page.tsx
│ │ │ └── page.tsx
│ │ ├── page.tsx
│ │ ├── pricing/
│ │ │ └── page.tsx
│ │ └── too-many-requests/
│ │ └── page.tsx
│ └── globals.css
├── components/
│ ├── chatwoot/
│ │ └── index.jsx
│ ├── collapsible-info-card.tsx
│ ├── console/
│ │ └── application-list.tsx
│ ├── faq/
│ │ └── index.tsx
│ ├── free-for-opensource/
│ │ └── index.tsx
│ ├── ga.tsx
│ ├── header.tsx
│ ├── home-background.tsx
│ ├── home-hover-card.tsx
│ ├── landing/
│ │ └── send-me-an-api-key-form.tsx
│ ├── logo/
│ │ └── index.tsx
│ └── pricing/
│ ├── index.tsx
│ └── mini.tsx
├── k/
│ ├── examples.ts
│ ├── external-links.ts
│ ├── faq.json
│ ├── host.ts
│ ├── index.ts
│ ├── plans.json
│ ├── plans.test.json
│ └── plans.ts
├── layouts/
│ └── payment-required-page.tsx
├── motions/
│ └── electron/
│ └── index.tsx
├── next.config.js
├── package.json
├── pages/
│ └── onboarding/
│ ├── complete.tsx
│ ├── payment-success-with-issue.tsx
│ └── payment-success.tsx
├── postcss.config.js
├── public/
│ └── robots.txt
├── tailwind.config.ts
├── tsconfig.json
└── utils/
└── email-validation.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .archives/console/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
================================================
FILE: .archives/console/README.md
================================================
# [cors.sh/console](https://cors.sh/console) (`8824`)
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:8824](http://localhost:8824) with your browser to see the result.
## Scheduled Migration
The cors.sh/console is scheduled to be migrated to grida console (console.grida.co).
================================================
FILE: .archives/console/babel.config.js
================================================
module.exports = {
presets: ["next/babel", "linaria/babel"],
plugins: [],
};
================================================
FILE: .archives/console/logo/index.tsx
================================================
import React from "react";
export function Logo({
color = "black",
width = 104,
}: {
width?: React.CSSProperties["width"];
color?: React.CSSProperties["color"];
}) {
return (
<svg
width={width}
height="19"
viewBox="0 0 104 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.4205 7.09091H11.6136C11.5795 6.69318 11.4886 6.33239 11.3409 6.00852C11.1989 5.68466 11 5.40625 10.7443 5.17329C10.4943 4.93466 10.1903 4.75284 9.83239 4.62784C9.47443 4.49716 9.06818 4.43182 8.61364 4.43182C7.81818 4.43182 7.14489 4.625 6.59375 5.01136C6.0483 5.39773 5.63352 5.9517 5.34943 6.6733C5.07102 7.39489 4.93182 8.26136 4.93182 9.27273C4.93182 10.3409 5.07386 11.2358 5.35795 11.9574C5.64773 12.6733 6.06534 13.2131 6.6108 13.5767C7.15625 13.9347 7.8125 14.1136 8.57955 14.1136C9.01705 14.1136 9.40909 14.0597 9.75568 13.9517C10.1023 13.8381 10.4034 13.6761 10.6591 13.4659C10.9148 13.2557 11.1222 13.0028 11.2812 12.7074C11.446 12.4062 11.5568 12.0682 11.6136 11.6932L16.4205 11.7273C16.3636 12.4659 16.1563 13.2187 15.7983 13.9858C15.4403 14.7472 14.9318 15.4517 14.2727 16.0994C13.6193 16.7415 12.8097 17.2585 11.8438 17.6506C10.8778 18.0426 9.75568 18.2386 8.47727 18.2386C6.875 18.2386 5.4375 17.8949 4.16477 17.2074C2.89773 16.5199 1.89489 15.5085 1.15625 14.1733C0.423295 12.8381 0.0568182 11.2045 0.0568182 9.27273C0.0568182 7.32955 0.431818 5.69318 1.18182 4.36364C1.93182 3.02841 2.94318 2.01989 4.21591 1.33807C5.48864 0.650568 6.90909 0.306818 8.47727 0.306818C9.57955 0.306818 10.5938 0.457386 11.5199 0.758522C12.446 1.05966 13.2585 1.5 13.9574 2.07954C14.6563 2.65341 15.2188 3.3608 15.6449 4.2017C16.071 5.04261 16.3295 6.00568 16.4205 7.09091ZM34.6394 9.27273C34.6394 11.2159 34.2616 12.8551 33.5059 14.1903C32.7502 15.5199 31.7303 16.5284 30.4462 17.2159C29.1621 17.8977 27.7303 18.2386 26.1508 18.2386C24.5599 18.2386 23.1224 17.8949 21.8383 17.2074C20.5599 16.5142 19.5428 15.5028 18.7871 14.1733C18.0371 12.8381 17.6621 11.2045 17.6621 9.27273C17.6621 7.32955 18.0371 5.69318 18.7871 4.36364C19.5428 3.02841 20.5599 2.01989 21.8383 1.33807C23.1224 0.650568 24.5599 0.306818 26.1508 0.306818C27.7303 0.306818 29.1621 0.650568 30.4462 1.33807C31.7303 2.01989 32.7502 3.02841 33.5059 4.36364C34.2616 5.69318 34.6394 7.32955 34.6394 9.27273ZM29.7644 9.27273C29.7644 8.22727 29.6252 7.34659 29.3468 6.63068C29.0741 5.90909 28.6678 5.36364 28.128 4.99432C27.5939 4.61932 26.9349 4.43182 26.1508 4.43182C25.3667 4.43182 24.7047 4.61932 24.165 4.99432C23.6309 5.36364 23.2246 5.90909 22.9462 6.63068C22.6735 7.34659 22.5371 8.22727 22.5371 9.27273C22.5371 10.3182 22.6735 11.2017 22.9462 11.9233C23.2246 12.6392 23.6309 13.1847 24.165 13.5597C24.7047 13.929 25.3667 14.1136 26.1508 14.1136C26.9349 14.1136 27.5939 13.929 28.128 13.5597C28.6678 13.1847 29.0741 12.6392 29.3468 11.9233C29.6252 11.2017 29.7644 10.3182 29.7644 9.27273ZM35.9919 18V0.545454H43.526C44.8214 0.545454 45.9549 0.78125 46.9265 1.25284C47.8981 1.72443 48.6538 2.40341 49.1936 3.28977C49.7334 4.17614 50.0032 5.23864 50.0032 6.47727C50.0032 7.72727 49.7248 8.78125 49.168 9.6392C48.6169 10.4972 47.8413 11.1449 46.8413 11.5824C45.847 12.0199 44.6851 12.2386 43.3555 12.2386H38.8555V8.55682H42.401C42.9578 8.55682 43.4322 8.48864 43.8243 8.35227C44.222 8.21023 44.526 7.9858 44.7362 7.67898C44.9521 7.37216 45.0601 6.97159 45.0601 6.47727C45.0601 5.97727 44.9521 5.57102 44.7362 5.25852C44.526 4.94034 44.222 4.70739 43.8243 4.55966C43.4322 4.40625 42.9578 4.32954 42.401 4.32954H40.7305V18H35.9919ZM46.2191 9.98864L50.5828 18H45.4351L41.1737 9.98864H46.2191ZM60.5922 6C60.5468 5.43182 60.3337 4.98864 59.953 4.67045C59.578 4.35227 59.007 4.19318 58.2399 4.19318C57.7513 4.19318 57.3507 4.25284 57.0382 4.37216C56.7314 4.4858 56.5041 4.64205 56.3564 4.84091C56.2087 5.03977 56.132 5.26705 56.1263 5.52273C56.1149 5.73295 56.1519 5.9233 56.2371 6.09375C56.328 6.25852 56.4701 6.40909 56.6632 6.54545C56.8564 6.67614 57.1036 6.79545 57.4047 6.90341C57.7059 7.01136 58.0638 7.10795 58.4786 7.19318L59.9104 7.5C60.8763 7.70455 61.703 7.97443 62.3905 8.30966C63.078 8.64489 63.6405 9.03977 64.078 9.49432C64.5155 9.94318 64.8365 10.4489 65.0411 11.0114C65.2513 11.5739 65.3593 12.1875 65.3649 12.8523C65.3593 14 65.0723 14.9716 64.5041 15.767C63.936 16.5625 63.1235 17.1676 62.0666 17.5824C61.0155 17.9972 59.7513 18.2045 58.274 18.2045C56.757 18.2045 55.4331 17.9801 54.3024 17.5312C53.1774 17.0824 52.3024 16.392 51.6774 15.4602C51.0581 14.5227 50.7456 13.3239 50.7399 11.8636H55.2399C55.2684 12.3977 55.4019 12.8466 55.6405 13.2102C55.8791 13.5739 56.2144 13.8494 56.6462 14.0369C57.0837 14.2244 57.6036 14.3182 58.2059 14.3182C58.7115 14.3182 59.1348 14.2557 59.4757 14.1307C59.8166 14.0057 60.0752 13.8324 60.2513 13.6108C60.4274 13.3892 60.5184 13.1364 60.524 12.8523C60.5184 12.5852 60.4303 12.3523 60.2598 12.1534C60.0951 11.9489 59.8223 11.767 59.4416 11.608C59.061 11.4432 58.5468 11.2898 57.899 11.1477L56.1604 10.7727C54.6149 10.4375 53.3962 9.87784 52.5041 9.09375C51.6178 8.30398 51.1774 7.22727 51.1831 5.86364C51.1774 4.75568 51.4729 3.78693 52.0695 2.95739C52.6718 2.12216 53.5041 1.47159 54.5666 1.00568C55.6348 0.539772 56.8593 0.306818 58.2399 0.306818C59.649 0.306818 60.8678 0.542613 61.8962 1.0142C62.9246 1.4858 63.7172 2.15057 64.274 3.00852C64.8365 3.8608 65.1206 4.85795 65.1263 6H60.5922ZM68.9525 18.2727C68.2934 18.2727 67.7281 18.0426 67.2565 17.5824C66.7906 17.1165 66.5605 16.5511 66.5661 15.8864C66.5605 15.2386 66.7906 14.6847 67.2565 14.2244C67.7281 13.7642 68.2934 13.5341 68.9525 13.5341C69.5775 13.5341 70.1286 13.7642 70.6059 14.2244C71.0889 14.6847 71.3332 15.2386 71.3389 15.8864C71.3332 16.3295 71.2167 16.733 70.9894 17.0966C70.7678 17.4545 70.4781 17.7415 70.1201 17.9574C69.7622 18.1676 69.373 18.2727 68.9525 18.2727ZM82.3966 6C82.3511 5.43182 82.1381 4.98864 81.7574 4.67045C81.3824 4.35227 80.8114 4.19318 80.0443 4.19318C79.5557 4.19318 79.1551 4.25284 78.8426 4.37216C78.5358 4.4858 78.3085 4.64205 78.1608 4.84091C78.0131 5.03977 77.9364 5.26705 77.9307 5.52273C77.9193 5.73295 77.9563 5.9233 78.0415 6.09375C78.1324 6.25852 78.2744 6.40909 78.4676 6.54545C78.6608 6.67614 78.908 6.79545 79.2091 6.90341C79.5102 7.01136 79.8682 7.10795 80.283 7.19318L81.7148 7.5C82.6807 7.70455 83.5074 7.97443 84.1949 8.30966C84.8824 8.64489 85.4449 9.03977 85.8824 9.49432C86.3199 9.94318 86.6409 10.4489 86.8455 11.0114C87.0557 11.5739 87.1636 12.1875 87.1693 12.8523C87.1636 14 86.8767 14.9716 86.3085 15.767C85.7403 16.5625 84.9278 17.1676 83.871 17.5824C82.8199 17.9972 81.5557 18.2045 80.0784 18.2045C78.5614 18.2045 77.2375 17.9801 76.1068 17.5312C74.9818 17.0824 74.1068 16.392 73.4818 15.4602C72.8625 14.5227 72.55 13.3239 72.5443 11.8636H77.0443C77.0727 12.3977 77.2063 12.8466 77.4449 13.2102C77.6835 13.5739 78.0188 13.8494 78.4506 14.0369C78.8881 14.2244 79.408 14.3182 80.0102 14.3182C80.5159 14.3182 80.9392 14.2557 81.2801 14.1307C81.621 14.0057 81.8795 13.8324 82.0557 13.6108C82.2318 13.3892 82.3227 13.1364 82.3284 12.8523C82.3227 12.5852 82.2347 12.3523 82.0642 12.1534C81.8994 11.9489 81.6267 11.767 81.246 11.608C80.8653 11.4432 80.3511 11.2898 79.7034 11.1477L77.9648 10.7727C76.4193 10.4375 75.2006 9.87784 74.3085 9.09375C73.4222 8.30398 72.9818 7.22727 72.9875 5.86364C72.9818 4.75568 73.2773 3.78693 73.8739 2.95739C74.4761 2.12216 75.3085 1.47159 76.371 1.00568C77.4392 0.539772 78.6636 0.306818 80.0443 0.306818C81.4534 0.306818 82.6722 0.542613 83.7006 1.0142C84.729 1.4858 85.5216 2.15057 86.0784 3.00852C86.6409 3.8608 86.925 4.85795 86.9307 6H82.3966ZM88.1319 18V0.545454H92.8705V7.36364H99.1432V0.545454H103.882V18H99.1432V11.1818H92.8705V18H88.1319Z"
fill={color}
/>
</svg>
);
}
================================================
FILE: .archives/console/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
================================================
FILE: .archives/console/next.config.js
================================================
const withLinaria = require("next-linaria");
const withTM = require("next-transpile-modules")([
"@app/ui",
"@cors.sh/service-api",
"@editor-ui/console",
]);
/**
* @type {import('next').NextConfig}
*/
const nextconfig = {
basePath: "/console",
};
module.exports = withTM(withLinaria(nextconfig));
================================================
FILE: .archives/console/package.json
================================================
{
"name": "console.cors.sh",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8824",
"build": "next build",
"start": "next start -p 8824"
},
"dependencies": {
"@cors.sh/service-api": "0.0.0",
"@editor-ui/console": "0.0.0",
"@radix-ui/react-icons": "^1.1.1",
"copy-to-clipboard": "^3.3.3",
"framer-motion": "^8.1.3",
"linaria": "^4.1.2",
"next": "12.2.5",
"next-linaria": "^0.11.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hot-toast": "^2.4.0"
},
"devDependencies": {
"@types/node": "^18.7.15",
"@types/react": "18.0.18",
"next-transpile-modules": "^9.0.0",
"typescript": "4.8.2"
}
}
================================================
FILE: .archives/console/pages/[id].tsx
================================================
import React, { useEffect } from "react";
import styled from "@emotion/styled";
import { Pencil1Icon } from "@radix-ui/react-icons";
import client, { ApplicationWithApiKey } from "@cors.sh/service-api";
import { FormPageLayout, PageCloseButton } from "@app/ui/layouts";
import { Button, TextFormField } from "@editor-ui/console";
import { Logo } from "logo";
import { UnderlineButton } from "@app/ui/components";
import { ApiKeyReveal } from "@app/ui/components";
export default function ApplicationDetailPage({
application,
}: {
application: ApplicationWithApiKey;
}) {
return (
<FormPageLayout>
<PageCloseButton />
<Logo />
<div style={{ height: 80 }} />
<EditableTitle initialValue={application.name} />
<div className="form">
<ApiKeyReveal
keys={{
test: application.apikey_test,
prod: application.apikey_live,
}}
/>
<TextFormField
readonly
label="Application origin URL"
placeholder="http://localhost:3000, https://my-site.com"
helpText="You can add up to 3 urls of your site"
value={application.allowedOrigins?.join(", ")}
// onChange={setAllowedOrigins}
/>
<TextFormField
readonly
label="Restrict Targets (Optional)"
placeholder="http://localhost:3000, https://my-site.com"
helpText="You can restrict target urls for extra security"
value={application.allowedOrigins?.join(", ")}
// onChange={setAllowedOrigins}
/>
<Button height={36}>Save</Button>
<UnderlineButton>Archive application</UnderlineButton>
</div>
</FormPageLayout>
);
}
function EditableTitle({ initialValue = "" }: { initialValue?: string }) {
const [editing, setEditing] = React.useState(false);
const [text, setText] = React.useState(initialValue);
const ref = React.useRef<HTMLInputElement>(null);
useEffect(() => {
if (editing) {
// select all
ref.current?.focus();
ref.current?.setSelectionRange(0, text.length);
}
}, [editing]);
return (
<TitleInputWrapper>
<input
style={{
cursor: editing ? "text" : "pointer",
}}
onDoubleClick={() => setEditing(true)}
onBlur={() => setEditing(false)}
ref={ref}
readOnly={!editing}
contentEditable
onChange={(e) => {
setText(e.target.value);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
setEditing(false);
}
}}
value={text}
/>
<button
className="edit-button"
style={{
visibility: editing ? "hidden" : "visible",
}}
onClick={() => setEditing(true)}
>
<Pencil1Icon />
</button>
</TitleInputWrapper>
);
}
const TitleInputWrapper = styled.div`
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
input {
width: 100%;
box-sizing: border-box;
font-size: 24px;
font-weight: bold;
border: none;
text-align: center;
outline: none;
}
.edit-button {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
opacity: 0;
cursor: pointer;
border: none;
background: none;
outline: none;
transition: opacity 0.2s ease;
}
&:hover {
.edit-button {
opacity: 1;
}
}
`;
export async function getServerSideProps(context: any) {
const { id } = context.query;
// const application = await client.getApplication(id);
// return {
// props: {
// application,
// },
// };
return {
props: {
application: {
id,
name: "my-portfolio-website",
apikey_live: "prod_1223-xasx-xxe2",
apikey_test: "test_xxasdj-xxd9-x2hx",
},
},
};
}
================================================
FILE: .archives/console/pages/_app.tsx
================================================
import React from "react";
import { Toaster } from "react-hot-toast";
import "../styles/globals.css";
import type { AppProps } from "next/app";
function App({ Component, pageProps }: AppProps) {
return (
<>
<Toaster position="bottom-center" />
<Component {...pageProps} />
</>
);
}
export default App;
================================================
FILE: .archives/console/pages/index.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import Link from "next/link";
import { Logo } from "logo";
import { FormPageLayout } from "@app/ui/layouts";
import Head from "next/head";
import { ArrowRightIcon } from "@radix-ui/react-icons";
import { UnderlineButton } from "@app/ui/components";
export default function ConsoleIndex({
applications,
}: {
applications: any[];
}) {
return (
<>
<Head>
<title>CORS.SH - Console</title>
</Head>
<FormPageLayout>
<Logo />
<div style={{ height: 80 }} />
<ApplicationList>
{applications.map((application) => (
<ApplicationItem key={application.id} {...application} />
))}
</ApplicationList>
<div style={{ height: 80 }} />
<div
style={{
display: "flex",
flexDirection: "column",
gap: 8,
}}
>
<UnderlineButton>
<Link href="/new">Create new application</Link>
</UnderlineButton>
<UnderlineButton>
<Link href="/subscriptions">Manage subscription</Link>
</UnderlineButton>
</div>
</FormPageLayout>
</>
);
}
const ApplicationList = styled.div`
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 8px;
`;
function ApplicationItem({
id,
name,
allowedOrigins,
}: {
id: string;
name: string;
allowedOrigins: string[];
}) {
return (
<Link href={`/${id}`}>
<ItemWrap>
<span>
{name} ({id})
</span>
<ArrowRightIcon />
</ItemWrap>
</Link>
);
}
const ItemWrap = styled.div`
flex: 1;
display: flex;
cursor: pointer;
justify-content: space-between;
flex-direction: row;
align-items: center;
flex: none;
border-radius: 4px;
border: solid 1px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
padding: 21px;
&:hover {
border: solid 1px rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.02);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
transition: all 0.2s ease-in-out;
`;
export async function getServerSideProps(context: any) {
// fetch all my applications
return {
props: {
applications: [
{
id: "1",
name: "My app",
},
{
id: "2",
name: "My app 2",
},
],
},
};
}
================================================
FILE: .archives/console/pages/new.tsx
================================================
import React, { useEffect } from "react";
import { Button, TextFormField } from "@editor-ui/console";
import client from "@cors.sh/service-api";
import { useRouter } from "next/router";
import { FormPageLayout } from "@app/ui/layouts";
export default function NewApplicationPage() {
const router = useRouter();
const [name, setName] = React.useState("");
const [allowedOrigins, setAllowedOrigins] = React.useState("");
const [isBusy, setIsBusy] = React.useState(false);
const [isValid, setIsValid] = React.useState(false);
const validateUrls = (urls: string) => {
const lines = urls.split(",").map((line) => line.trim());
for (const line of lines) {
try {
new URL(line);
} catch (e) {
return false;
}
}
return true;
};
const onCreateNewClick = () => {
setIsBusy(true);
client
.createApplication({
name: name,
allowedOrigins: allowedOrigins
.split(",")
.map((origin) => origin.trim()),
})
.then((r) => {
router.push({
pathname: "[id]",
query: { id: r.id },
});
})
.finally(() => {
setIsBusy(false);
});
};
useEffect(() => {
setIsValid(name.length > 0 && validateUrls(allowedOrigins));
}, [name, allowedOrigins]);
return (
<FormPageLayout>
<h1>Create new application</h1>
<div className="form">
<TextFormField
label="Project Name"
placeholder="my-portfolio-website"
onChange={setName}
/>
<TextFormField
label="Your site"
placeholder="http://localhost:3000, https://my-site.com"
helpText="You can add up to 3 urls of your site"
onChange={setAllowedOrigins}
/>
<div style={{ height: 16 }} />
<Button
disabled={!isValid || isBusy}
onClick={onCreateNewClick}
height={"32px"}
>
Create Project
</Button>
</div>
</FormPageLayout>
);
}
================================================
FILE: .archives/console/styles/Home.module.css
================================================
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
width: 45%;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
================================================
FILE: .archives/console/styles/globals.css
================================================
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
================================================
FILE: .archives/console/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"noImplicitAny": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": "."
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
================================================
FILE: .archives/homepage/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
# grida
.env
.grida
================================================
FILE: .archives/homepage/README.md
================================================
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).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
[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`.
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.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
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.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
================================================
FILE: .archives/homepage/babel.config.js
================================================
module.exports = {
presets: ["next/babel", "linaria/babel"],
plugins: [],
};
================================================
FILE: .archives/homepage/components/appbar/appbar-parent-site.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import Image from "next/image";
/**
* `<AppbarParentSite>` ('appbar-parent-site')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=19:1937)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=19:1937)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <AppbarParentSite/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/19:1937 -->
*/
export function AppbarParentSite() {
return (
<RootWrapperAppbarParentSite href="https://grida.co" target="_blank">
<Home>
<Logo64>
<Image
src="/grida-logo-white-128.png"
alt="Grida Logo White"
width={25}
height={25}
/>
</Logo64>
<Grida>Grida</Grida>
</Home>
</RootWrapperAppbarParentSite>
);
}
const RootWrapperAppbarParentSite = styled.a`
cursor: pointer;
background-color: black;
position: relative;
height: 50px;
`;
const Home = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 8px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + -484px)) - 37px));
top: 12px;
width: 73px;
height: 26px;
`;
const Logo64 = styled.div`
width: 25px;
height: 26px;
overflow: hidden;
position: relative;
`;
const LogoShapeOnly = styled.div`
width: 25px;
height: 25px;
position: absolute;
left: 0px;
top: 0px;
`;
const Union = styled.img`
width: 25px;
height: 25px;
object-fit: cover;
position: absolute;
left: 0px;
top: 0px;
`;
const Grida = styled.span`
color: white;
text-overflow: ellipsis;
font-size: 16px;
font-family: Helvetica, sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-align: left;
`;
================================================
FILE: .archives/homepage/components/appbar/appbar.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
/**
* `<Appbar>` ('appbar')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=18:1889)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=18:1889)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <Appbar/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/18:1889 -->
*/
export function Appbar() {
const router = useRouter();
const onGetStartedClick = () => {
router.push("/get-started");
};
return (
<RootWrapperAppbar>
<ContentFrame>
<Leading>
<Home>
<Image
alt="CORS.SH Logo (svg)"
src={"/logo.svg"}
height={20}
width={100}
/>
</Home>
<Menus>
<MenuItem label="Usage" href="#usage" />
<MenuItem label="Playground" href="/playground" />
<MenuItem label="Pricing" href="#pricing" />
<MenuItem
label="Github"
href="https://github.com/gridaco/cors.sh"
/>
</Menus>
</Leading>
<HeaderCtaSignupPlain>
<HeaderCtaSignupPlain_0001>
<GetStarted onClick={onGetStartedClick}>Get started</GetStarted>
</HeaderCtaSignupPlain_0001>
</HeaderCtaSignupPlain>
</ContentFrame>
</RootWrapperAppbar>
);
}
const MenuItem = ({ label, href }: { label: string; href: string }) => {
return (
<MenuContainer href={href}>
<BaseHeaderPrimaryMenu>
{/* <MenuMargin /> */}
<MenuTextContainer>
<MenuText>{label}</MenuText>
</MenuTextContainer>
{/* <Indicator /> */}
</BaseHeaderPrimaryMenu>
</MenuContainer>
);
};
const RootWrapperAppbar = styled.header`
background-color: white;
position: relative;
z-index: 9;
height: 80px;
`;
const ContentFrame = styled.div`
width: 1040px;
overflow: hidden;
position: absolute;
left: calc((calc((50% + 0px)) - 520px));
top: 0px;
bottom: 0px;
`;
const Leading = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 120px;
box-sizing: border-box;
position: absolute;
left: 0px;
top: calc((calc((50% + 0px)) - 30px));
width: 732px;
height: 60px;
`;
const Home = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
flex: none;
gap: 8px;
box-sizing: border-box;
`;
const Menus = styled.nav`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
flex: none;
gap: 36px;
height: 60px;
box-sizing: border-box;
`;
const MenuContainer = styled(Link)`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
flex: none;
box-sizing: border-box;
`;
const BaseHeaderPrimaryMenu = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
flex: none;
gap: 16px;
box-sizing: border-box;
`;
const MenuMargin = styled.div`
height: 2px;
background-color: white;
align-self: stretch;
flex-shrink: 0;
opacity: 0;
`;
const MenuTextContainer = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
flex: none;
box-sizing: border-box;
cursor: pointer;
`;
const MenuText = styled.span`
color: rgb(139, 139, 139);
text-overflow: ellipsis;
font-size: 16px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 500;
text-align: left;
`;
const HeaderCtaSignupPlain = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
position: absolute;
top: calc((calc((50% + 0px)) - 16px));
right: 0px;
min-width: 80px;
height: 32px;
`;
const HeaderCtaSignupPlain_0001 = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
gap: 10px;
border-radius: 35px;
box-sizing: border-box;
`;
const GetStarted = styled.span`
cursor: pointer;
color: black;
text-overflow: ellipsis;
font-size: 16px;
font-family: Roboto, sans-serif;
font-weight: 500;
text-align: right;
`;
================================================
FILE: .archives/homepage/components/appbar/index.ts
================================================
export * from "./appbar";
export * from "./appbar-parent-site";
================================================
FILE: .archives/homepage/components/button/index.tsx
================================================
import React, { forwardRef } from "react";
import styled from "@emotion/styled";
type Props = React.PropsWithRef<
{
onClick?: () => void;
} & React.PropsWithChildren
>;
function _Button({
children,
// @ts-ignore
ref,
onClick,
}: Props) {
return (
<ButtonBase ref={ref} onClick={onClick}>
{children}
</ButtonBase>
);
}
export const Button = forwardRef(_Button);
const ButtonBase = styled.button`
background-color: black;
border-radius: 2px;
padding: 10px;
color: white;
font-size: 14px;
font-family: Inter, sans-serif;
font-weight: 400;
border: none;
outline: none;
cursor: pointer;
:hover {
opacity: 0.8;
}
:disabled {
opacity: 0.5;
}
:active {
opacity: 1;
}
:focus {
}
`;
================================================
FILE: .archives/homepage/components/chatwood/index.jsx
================================================
import React from "react";
class ChatwootWidget extends React.Component {
componentDidMount() {
// Add Chatwoot Settings
window.chatwootSettings = {
hideMessageBubble: false,
position: "right", // This can be left or right
locale: "en", // Language to be set
type: "standard", // [standard, expanded_bubble]
};
// Paste the script from inbox settings except the <script> tag
(function (d, t) {
var BASE_URL = "https://app.chatwoot.com";
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = BASE_URL + "/packs/js/sdk.js";
s.parentNode.insertBefore(g, s);
g.async = !0;
g.onload = function () {
window.chatwootSDK.run({
websiteToken: "uYszA87RExPbaCa66i6w9c8i",
baseUrl: BASE_URL,
});
};
})(document, "script");
}
render() {
return null;
}
}
export default ChatwootWidget;
================================================
FILE: .archives/homepage/components/collabsible-info-card/index.tsx
================================================
import React, { useState } from "react";
import styled from "@emotion/styled";
import * as Collapsible from "@radix-ui/react-collapsible";
import { CaretDownIcon, CaretUpIcon } from "@radix-ui/react-icons";
export function CollapsibleInfoCard({
title,
children,
}: React.PropsWithChildren<{ title: string }>) {
const [open, setOpen] = useState(false);
return (
<Container open={open} onOpenChange={setOpen}>
<Collapsible.Trigger className="trigger">
<h2>{title}</h2>
<div className="icon">{open ? <CaretUpIcon /> : <CaretDownIcon />}</div>
</Collapsible.Trigger>
<Collapsible.Content className="content">{children}</Collapsible.Content>
</Container>
);
}
const Container = styled(Collapsible.Root)`
display: flex;
flex-direction: column;
.trigger {
display: flex;
align-items: center;
flex: 1;
gap: 8px;
justify-content: space-between;
cursor: pointer;
padding: 12px 16px;
border-radius: 4px;
background: #f5f5f5;
border: 1px solid #e5e5e5;
margin-bottom: 8px;
h2 {
font-size: 16px;
font-weight: 500;
margin: 0;
}
.icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
svg {
width: 100%;
height: 100%;
}
}
}
.content {
padding: 16px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.02);
border: 1px solid #e5e5e5;
margin-bottom: 16px;
font-size: 14px;
/* no default padding for ul */
ul {
margin: 0;
padding: 16px;
}
li {
padding: 0;
}
}
/* motion */
.content[data-state="open"] {
animation: slideDown 0.2s ease-out;
}
.content[data-state="closed"] {
animation: slideUp 0.2s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
height: 0;
}
to {
opacity: 1;
height: var(--radix-collapsible-content-height);
}
}
@keyframes slideUp {
from {
opacity: 1;
height: var(--radix-collapsible-content-height);
}
to {
opacity: 0;
height: 0;
}
}
`;
================================================
FILE: .archives/homepage/components/cta-footer/index.tsx
================================================
import styled from "@emotion/styled";
import React from "react";
import { OnboardingCta } from "../cta-onboarding";
export function FooterCtaSection({}: {}) {
return (
<Wrapper>
<HeadingAsH3>Say bye to cors errors</HeadingAsH3>
<ScribbleGuide>
<WeLlSendYouAApiKeyToGetStarted>
We’ll send you an Api key to get started
</WeLlSendYouAApiKeyToGetStarted>
<PointerArtwork
src="/assets/scribble-pointer.png"
alt="image of PointerArtwork"
/>
</ScribbleGuide>
<CtaContainer>
<OnboardingCta />
</CtaContainer>
</Wrapper>
);
}
const Wrapper = styled.div`
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 51px;
box-shadow: 0px 4px 48px 24px rgba(0, 0, 0, 0.04);
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 8px;
min-height: 60vh;
background-color: white;
box-sizing: border-box;
`;
const HeadingAsH3 = styled.h3`
color: black;
text-overflow: ellipsis;
font-size: 64px;
font-family: "Inter", sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-align: center;
align-self: stretch;
flex-shrink: 0;
padding-left: 16px;
padding-right: 16px;
`;
const CtaContainer = styled.div`
display: flex;
z-index: 1;
justify-content: center;
flex-direction: row;
align-items: center;
flex: none;
gap: 16px;
border-radius: 0;
margin-top: 100px;
box-sizing: border-box;
`;
const ScribbleGuide = styled.div`
z-index: 0;
width: 217px;
height: 112px;
position: absolute;
left: -10px;
top: 280px;
`;
const WeLlSendYouAApiKeyToGetStarted = styled.span`
color: rgba(180, 180, 180, 0.7);
text-overflow: ellipsis;
font-size: 24px;
font-family: "Nanum Pen Script", sans-serif;
font-weight: 400;
line-height: 98%;
text-align: left;
position: absolute;
top: 25px;
transform: translateX(-50px) translateY(40px) rotate(-20deg);
transform-origin: top left;
`;
const PointerArtwork = styled.img`
width: 53px;
height: 69px;
object-fit: cover;
position: absolute;
left: calc((calc((50% + 59px)) - 26px));
top: 49px;
transform: rotate(-23deg);
transform-origin: top left;
`;
================================================
FILE: .archives/homepage/components/cta-onboarding/index.tsx
================================================
import React, { useState } from "react";
import styled from "@emotion/styled";
import client from "@cors.sh/service-api";
import { toast } from "react-hot-toast";
export function OnboardingCta() {
const [isBusy, setIsBusy] = useState(false);
const [email, setEmail] = useState("");
const onsend = async () => {
// validate email
if (!validateEmail(email)) {
toast.error(<p>Invalid Email</p>);
return;
}
// send email
setIsBusy(true);
client
.onboardingWithEmail({ email: email })
.then((data) => {
toast.success(
<p>
API Key sent to your email.
<br />
Please check your <b>spam folder</b> as well
</p>
);
// log conversion (signup)
// @ts-ignore
window.gtag("event", "sign_up", {
method: "email",
});
})
.catch((e) => {
toast.error(<p>Something went wrong</p>);
})
.finally(() => {
setIsBusy(false);
});
};
return (
<RootWrapperCta>
<InputGroup>
<RequestInputAsInput
type="email"
autoComplete="email"
placeholder="alice@acme.com"
value={email}
disabled={isBusy}
onKeyDown={(e) => {
if (e.key === "Enter") {
onsend();
}
}}
onChange={(e) => {
setEmail(e.target.value);
}}
/>
</InputGroup>
<ButtonAsButton disabled={isBusy} onClick={onsend}>
Send me an API Key
</ButtonAsButton>
</RootWrapperCta>
);
}
const RootWrapperCta = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
flex: none;
gap: 14px;
box-sizing: border-box;
height: 64px;
`;
const InputGroup = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.12);
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const RequestInputAsInput = styled.input`
width: 400px;
background-color: white;
border-radius: 4px;
padding: 12px 21px;
box-sizing: border-box;
border: none;
color: black;
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
line-height: 98%;
text-align: start;
align-self: stretch;
flex-shrink: 0;
flex: 1;
outline: none;
::placeholder {
color: rgb(181, 181, 181);
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
}
`;
const ButtonAsButton = styled.button`
padding: 0 24px;
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.12);
background-color: black;
border: solid 1px rgb(210, 210, 210);
border-radius: 4px;
color: white;
font-size: 18px;
font-family: "Inter", sans-serif;
font-weight: 400;
line-height: 98%;
outline: none;
cursor: pointer;
align-self: stretch;
flex-shrink: 0;
:hover {
opacity: 0.8;
}
:disabled {
opacity: 0.5;
}
:active {
opacity: 1;
}
:focus {
}
`;
const validateEmail = (email: string) => {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
);
};
================================================
FILE: .archives/homepage/components/cta-test-it/index.tsx
================================================
import React, { useEffect, useState } from "react";
import styled from "@emotion/styled";
import Select from "react-select";
import Axios, { Method } from "axios";
import { toast } from "react-hot-toast";
type TMethod = "GET" | "POST" | "PUT" | "DELETE";
function WarningIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_31_2300)">
<path
d="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_31_2300">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
);
}
const options: { value: TMethod; label: string }[] = [
{ value: "GET", label: "GET" },
{ value: "POST", label: "POST" },
{ value: "PUT", label: "PUT" },
{ value: "DELETE", label: "DELETE" },
];
const style = {
control: (base: any) => ({
...base,
border: 0,
// This line disable the blue border
boxShadow: "none",
backgroundColor: "transparent",
fontFamily: `"Source Code Pro", monospace`,
}),
};
export function TestItOutCta({
onChange,
}: {
onChange?: (value: string) => void;
}) {
const [url, setUrl] = useState("");
const [selectedOption, setSelectedOption] = useState({
value: "GET",
label: "GET",
});
const [isValid, setIsValid] = useState(true);
useEffect(() => {
if (url === "") {
return;
}
try {
new URL(url);
setIsValid(true);
} catch (e) {
setIsValid(false);
}
}, [url]);
const onsend = () => {
Axios.request({
method: selectedOption.value as Method,
url: "https://proxy.cors.sh/" + url,
})
.then(() => {
toast.success(
<>
Request {selectedOption.value} to {url} succeeded.
<br />
use{" "}
<a
href="/playground"
style={{
fontWeight: "bold",
color: "blue",
}}
>
playground
</a>{" "}
for more details
</>
);
})
.catch((e) => {
toast.error(
<>
Request {selectedOption.value} to {url}{" "}
<i
style={{
color: "red",
}}
>
failed with {e.response?.status}
</i>
</>,
{
icon: <WarningIcon />,
}
);
});
};
return (
<RootWrapperCta>
<InputGroup>
<MethodSelect>
<Select
styles={style}
defaultValue={selectedOption}
id="method-select"
instanceId="method-select"
// @ts-ignore
onChange={setSelectedOption}
options={options}
/>
{/* <Type>
<Label>GET</Label>
</Type>
<Menu>
<Line />
<IconsMdiArrowDropDown src="grida://assets-reservation/images/31:2296" />
</Menu> */}
</MethodSelect>
<RequestInputAsInput
type="text"
placeholder="https://acme.com"
value={url}
onKeyDown={(e) => {
if (e.key === "Enter") {
onsend();
}
}}
onChange={(e) => {
setUrl(e.target.value);
onChange?.(e.target.value);
}}
/>
</InputGroup>
<ButtonAsButton disabled={!isValid} onClick={onsend}>
Send
</ButtonAsButton>
</RootWrapperCta>
);
}
const RootWrapperCta = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
flex: none;
gap: 14px;
box-sizing: border-box;
height: 48px;
`;
const InputGroup = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.12);
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const MethodSelect = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 10px;
border-right: solid 1px rgba(0, 0, 0, 0.1);
border-top-left-radius: 4px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 4px;
align-self: stretch;
width: 123px;
background-color: transparent;
box-sizing: border-box;
flex-shrink: 0;
`;
const RequestInputAsInput = styled.input`
flex: 1;
width: 320px;
background-color: transparent;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 0px;
padding: 12px 21px;
box-sizing: border-box;
border: none;
color: black;
font-size: 18px;
font-family: "Source Code Pro", monospace;
font-weight: 400;
line-height: 98%;
text-align: start;
align-self: stretch;
flex-shrink: 0;
flex: 1;
outline: none;
::placeholder {
color: rgb(181, 181, 181);
font-size: 18px;
font-weight: 400;
}
`;
const ButtonAsButton = styled.button`
padding: 0 21px;
box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.12);
background-color: black;
border: solid 1px rgb(210, 210, 210);
border-radius: 4px;
color: white;
font-size: 18px;
font-family: "Source Code Pro", monospace;
font-weight: 500;
line-height: 98%;
outline: none;
cursor: pointer;
align-self: stretch;
flex-shrink: 0;
:hover {
opacity: 0.8;
}
:disabled {
opacity: 0.5;
}
:active {
opacity: 1;
}
:focus {
}
`;
================================================
FILE: .archives/homepage/components/demo-terminal/index.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import { useRouter } from "next/router";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { examples } from "k";
export function DemoTerminal({
target = "https://acme.com",
}: {
target: string;
}) {
const [example, setExample] = React.useState<"fetch" | "axios">("fetch");
const router = useRouter();
return (
<Wrapper>
<Content>
<SyntaxHighlighter language="js">
{examples[example](target)}
</SyntaxHighlighter>
</Content>
<Tabs>
{Object.keys(examples).map((key) => {
return (
<TabItem
onClick={() => {
setExample(key as any);
}}
key={key}
selected={key === example}
>
{key}
</TabItem>
);
})}
</Tabs>
<ViewAllExamples href="/docs/category/guides">
View all examples
</ViewAllExamples>
</Wrapper>
);
}
const Wrapper = styled.div`
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
background-color: #f5f2f0;
border: solid 1px rgba(0, 0, 0, 0.05);
border-radius: 4px;
box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.04);
`;
const Content = styled.span`
color: rgb(68, 68, 68);
text-overflow: ellipsis;
font-size: 16px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 500;
text-align: left;
position: absolute;
left: 40px;
top: 98px;
`;
const Tabs = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
gap: 17px;
box-sizing: border-box;
position: absolute;
left: 40px;
top: 40px;
width: 127px;
height: 19px;
`;
const TabItem = styled.span<{ selected?: boolean }>`
cursor: pointer;
color: rgba(0, 0, 0, ${(p) => (p.selected ? "0.8" : "0.2")});
text-overflow: ellipsis;
font-size: 16px;
font-family: Inter, sans-serif;
font-weight: 400;
text-align: left;
`;
const ViewAllExamples = styled.a`
cursor: pointer;
color: rgba(0, 0, 0, 0.3);
text-overflow: ellipsis;
font-size: 16px;
font-family: Inter, sans-serif;
font-weight: 400;
text-align: left;
position: absolute;
right: 40px;
top: 40px;
`;
================================================
FILE: .archives/homepage/components/icons/check-filled.tsx
================================================
import { Check } from "@mui/icons-material";
export default function CheckFilled({
color = "black",
size = 24,
}: {
size?: number;
color?: string;
}) {
return (
<span
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: size,
height: size,
borderRadius: "50%",
backgroundColor: color,
}}
>
<Check
sx={{
fontSize: size * 0.8,
color: "white",
}}
/>
</span>
);
}
================================================
FILE: .archives/homepage/components/index.ts
================================================
export * from "./appbar";
export * from "./cta-test-it";
export * from "./cta-onboarding";
export * from "./collabsible-info-card";
================================================
FILE: .archives/homepage/components/logo/index.tsx
================================================
import React from "react";
import Image from "next/image";
import { useRouter } from "next/router";
export function Logo({ moveToHome = false }: { moveToHome?: boolean }) {
const router = useRouter();
const onClick = () => {
if (moveToHome) {
router.push("/");
}
};
return <Image onClick={onClick} src={"/logo.svg"} height={20} width={100} />;
}
================================================
FILE: .archives/homepage/components/pricing/card.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import Check from "@mui/icons-material/Check";
/**
* `<PricingCard>` ('pricing-card')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=44:1495)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=44:1495)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <PricingCard/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/44:1495 -->
*/
export function PricingCard({
onStartClick,
startLabel = "Get Started",
features,
price,
description,
name,
unit,
selected,
enableAction = true,
onClick,
}: {
enableAction?: boolean;
onClick?: () => void;
selected?: boolean;
unit?: string;
description?: string;
name: string;
price: string;
onStartClick: () => void;
startLabel?: string;
features: string[];
}) {
return (
<RootWrapperPricingCard
onClick={onClick}
border={selected ? "black" : "transparent"}
>
<Content>
<ReadingArea>
<PriceArea>
<Name>{name}</Name>
<PriceContainer direction={description ? "column" : "row"}>
<Price>{price}</Price>
{unit && <Sub>/ {unit}</Sub>}
{description && <Sub>{description}</Sub>}
</PriceContainer>
</PriceArea>
<FeaturesArea>
{features.map((feature) => (
<PricelistFeatureItem key={feature}>
<Check
sx={{
color: "#A9A9A9",
}}
/>
<FeatureName>{feature}</FeatureName>
</PricelistFeatureItem>
))}
</FeaturesArea>
</ReadingArea>
{enableAction && (
<ButtonAsButton data-highlighted={selected} onClick={onStartClick}>
{startLabel}
</ButtonAsButton>
)}
</Content>
</RootWrapperPricingCard>
);
}
const RootWrapperPricingCard = styled.div<{ border: string }>`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
gap: 10px;
box-shadow: 0px 4px 128px 32px rgba(0, 0, 0, 0.08);
border-radius: 8px;
background-color: white;
box-sizing: border-box;
border: 4px solid ${(p) => p.border};
padding: 40px;
`;
const Content = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
flex: 1;
gap: 142px;
width: 300px;
box-sizing: border-box;
`;
const ReadingArea = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 72px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const PriceArea = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 36px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const Name = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
line-height: 135%;
text-align: left;
align-self: stretch;
flex-shrink: 0;
`;
const PriceContainer = styled.div<{ direction: "column" | "row" }>`
display: flex;
justify-content: flex-start;
flex-direction: ${(p) => p.direction};
align-items: flex-start;
align-items: ${(p) => (p.direction === "column" ? "flex-start" : "center")};
gap: 16px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const Price = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 36px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 500;
line-height: 135%;
text-align: left;
`;
const Sub = styled.span`
color: rgba(109, 109, 109, 0.83);
text-overflow: ellipsis;
font-size: 21px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
text-align: left;
`;
const FeaturesArea = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const PricelistFeatureItem = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 8px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const IconsMdiCheck = styled.img`
width: 24px;
height: 24px;
object-fit: cover;
`;
const FeatureName = styled.span`
color: rgb(83, 83, 83);
text-overflow: ellipsis;
font-size: 16px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
text-align: left;
width: 268px;
flex: 1;
`;
const FeatureName_0001 = styled.span`
color: rgb(83, 83, 83);
text-overflow: ellipsis;
font-size: 16px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
text-align: left;
width: 270px;
flex: 1;
`;
const ButtonAsButton = styled.button`
background-color: black;
border: solid 1px rgb(28, 28, 28);
border-radius: 4px;
padding: 12px 89px;
color: white;
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
outline: none;
cursor: pointer;
align-self: stretch;
flex-shrink: 0;
:hover {
opacity: 0.8;
}
:disabled {
opacity: 0.5;
}
:active {
opacity: 1;
}
:focus {
}
&[data-highlighted="true"] {
background-color: #2562ff;
border: none;
}
`;
================================================
FILE: .archives/homepage/components/pricing/free-for-opensource.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import { useRouter } from "next/router";
import * as k from "../../k";
import CheckFilled from "../icons/check-filled";
const features = [
"1,000,000 requests / month",
"5mb per request",
"Unlimited requests per hour",
"No down time",
];
export function FreeForOpenSource() {
const router = useRouter();
return (
<FreePricingHeroCardLarge>
<Frame315>
<Frame247>
<Frame246>
{features.map((feature, i) => (
<PricelistFeatureItemFeatured key={i}>
<CheckFilled />
<FeatureName_0019>{feature}</FeatureName_0019>
</PricelistFeatureItemFeatured>
))}
</Frame246>
</Frame247>
<Frame314>
<Frame313>
<TextLayout>
<Free>Free</Free>
<ForOpenSource>for Open Source</ForOpenSource>
</TextLayout>
<Frame312>
<Button
onClick={() => {
router.push(k.LINK_APPLY_FOR_OSS_PLAN);
}}
>
<Label>Apply</Label>
</Button>
<LimitedToPublicProjectsThatAreOnGithub>
*Limited to Public Projects that are on Github
</LimitedToPublicProjectsThatAreOnGithub>
</Frame312>
</Frame313>
</Frame314>
</Frame315>
</FreePricingHeroCardLarge>
);
}
const FreePricingHeroCardLarge = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0px 4px 64px 12px rgba(0, 0, 0, 0.08);
border-radius: 8px;
background-color: white;
box-sizing: border-box;
`;
const Label = styled.span`
color: white;
text-overflow: ellipsis;
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
text-align: left;
`;
const Frame315 = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const Frame247 = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-start;
flex: 1;
gap: 10px;
border-radius: 8px;
width: 520px;
background-color: rgb(252, 252, 252);
box-sizing: border-box;
padding: 56px;
`;
const Frame246 = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 24px;
align-self: stretch;
box-sizing: border-box;
flex-shrink: 0;
`;
const PricelistFeatureItemFeatured = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 16px;
align-self: stretch;
height: 32px;
box-sizing: border-box;
flex-shrink: 0;
`;
const Frame245 = styled.img`
width: 24px;
height: 24px;
object-fit: cover;
`;
const FeatureName_0019 = styled.span`
color: rgb(94, 94, 94);
text-overflow: ellipsis;
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
text-align: left;
`;
const Frame314 = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
flex: 1;
gap: 10px;
width: 520px;
background-color: white;
box-sizing: border-box;
padding: 31px 72px;
`;
const Frame313 = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
flex: none;
gap: 24px;
box-sizing: border-box;
`;
const TextLayout = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: flex-end;
flex: none;
gap: 12px;
box-sizing: border-box;
`;
const Free = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 42px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
text-align: left;
`;
const ForOpenSource = styled.span`
color: rgb(99, 99, 99);
text-overflow: ellipsis;
font-size: 32px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
text-align: left;
`;
const Frame312 = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
flex: none;
gap: 14px;
box-sizing: border-box;
`;
const Button = styled.div`
cursor: pointer;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
flex: none;
gap: 10px;
border: solid 1px rgb(28, 28, 28);
border-radius: 4px;
width: 337px;
background-color: black;
box-sizing: border-box;
padding: 12px 89px;
`;
const LimitedToPublicProjectsThatAreOnGithub = styled.span`
color: rgb(154, 154, 154);
text-overflow: ellipsis;
font-size: 16px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
line-height: 135%;
text-align: left;
`;
================================================
FILE: .archives/homepage/components/pricing/index.ts
================================================
export * from "./card";
================================================
FILE: .archives/homepage/grida/.gitkeep
================================================
This directory is reserved for Grida. you may remove this .gitkeep file once the directory is fullfilled.
================================================
FILE: .archives/homepage/grida/AppbarGroup.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import { Appbar, AppbarParentSite } from "../components";
/**
* `<AppbarGroup>` ('appbar-group')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=15:1833)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=15:1833)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <AppbarGroup/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/15:1833 -->
*/
export function AppbarGroup() {
return (
<RootWrapperAppbarGroup>
<AppbarParentSite />
<Appbar />
</RootWrapperAppbarGroup>
);
}
const RootWrapperAppbarGroup = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: stretch;
box-sizing: border-box;
`;
const Frame565 = styled.div`
height: 50px;
overflow: hidden;
background-color: black;
position: relative;
align-self: stretch;
flex-shrink: 0;
`;
const Home = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 8px;
box-sizing: border-box;
position: absolute;
left: 200px;
top: 12px;
width: 171px;
height: 26px;
`;
const Logo64 = styled.div`
width: 25px;
height: 26px;
overflow: hidden;
position: relative;
`;
const LogoShapeOnly = styled.div`
width: 25px;
height: 25px;
position: absolute;
left: 0px;
top: 0px;
`;
const Union = styled.img`
width: 25px;
height: 25px;
object-fit: cover;
position: absolute;
left: 0px;
top: 0px;
`;
const GridaAppServices = styled.span`
color: white;
text-overflow: ellipsis;
font-size: 16px;
font-family: Helvetica, sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-align: left;
`;
================================================
FILE: .archives/homepage/grida/SectionCtaLast.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
/**
* `<SectionCtaLast>` ('section-cta-last')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=15:1600)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=15:1600)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <SectionCtaLast/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/15:1600 -->
*/
export function SectionCtaLast() {
return (
<RootWrapperSectionCtaLast>
<Frame270>
<SayByeToCorsErrors>Say bye to cors errors</SayByeToCorsErrors>
<AndFocusOnYouReDevelopment>
And focus on you’re development
</AndFocusOnYouReDevelopment>
</Frame270>
<ScribbleGuide>
<WeLlSendYouAApiKeyToGetStarted>
We’ll send you a Api key to get started
</WeLlSendYouAApiKeyToGetStarted>
<PointerArtwork
src="/assets/scribble-pointer.png"
alt="image of PointerArtwork"
/>
</ScribbleGuide>
<Frame572>
<Frame549>
<EnterYourEmailAddress>
Enter your email address
</EnterYourEmailAddress>
</Frame549>
<Frame550>
<Frame556>
<SendMeAnApiKey>Send me an API Key</SendMeAnApiKey>
</Frame556>
</Frame550>
</Frame572>
</RootWrapperSectionCtaLast>
);
}
const RootWrapperSectionCtaLast = styled.div`
min-height: 100vh;
background-color: white;
position: relative;
`;
const Frame270 = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 36px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + -1px)) - 337px));
top: 105px;
width: 673px;
height: 137px;
`;
const SayByeToCorsErrors = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 64px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
line-height: 98%;
text-align: center;
`;
const AndFocusOnYouReDevelopment = styled.span`
color: rgb(68, 69, 69);
text-overflow: ellipsis;
font-size: 24px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 500;
line-height: 160%;
text-align: center;
align-self: stretch;
flex-shrink: 0;
`;
const ScribbleGuide = styled.div`
width: 217px;
height: 112px;
position: absolute;
left: 235px;
top: 302px;
`;
const WeLlSendYouAApiKeyToGetStarted = styled.span`
color: rgb(164, 164, 164);
text-overflow: ellipsis;
font-size: 24px;
font-family: "Nanum Pen Script", sans-serif;
font-weight: 400;
line-height: 98%;
text-align: left;
width: 213px;
position: absolute;
left: calc((calc((50% + -2px)) - 107px));
top: 25px;
transform: rotate(-7deg);
transform-origin: top left;
`;
const PointerArtwork = styled.img`
width: 53px;
height: 69px;
object-fit: cover;
position: absolute;
left: calc((calc((50% + 59px)) - 26px));
top: 49px;
transform: rotate(-23deg);
transform-origin: top left;
`;
const Frame572 = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
gap: 14px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + -1px)) - 373px));
top: 414px;
width: 745px;
height: 66px;
`;
const Frame549 = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
flex: none;
gap: 10px;
box-shadow: 0px 4px 48px rgba(0, 0, 0, 0.12);
border: solid 1px rgb(210, 210, 210);
border-radius: 4px;
width: 508px;
background-color: white;
box-sizing: border-box;
padding: 24px;
`;
const EnterYourEmailAddress = styled.span`
color: rgb(181, 181, 181);
text-overflow: ellipsis;
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
letter-spacing: -1px;
line-height: 98%;
text-align: left;
`;
const Frame550 = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
flex: none;
gap: 10px;
box-shadow: 0px 4px 48px rgba(0, 0, 0, 0.12);
border: solid 1px rgb(210, 210, 210);
border-radius: 4px;
height: 66px;
background-color: black;
box-sizing: border-box;
padding: 0px 21px;
`;
const Frame556 = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
gap: 10px;
align-self: stretch;
height: 66px;
box-sizing: border-box;
padding: 10px;
flex-shrink: 0;
`;
const SendMeAnApiKey = styled.span`
color: white;
text-overflow: ellipsis;
font-size: 18px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 500;
letter-spacing: -1px;
line-height: 98%;
text-align: left;
`;
================================================
FILE: .archives/homepage/grida/SectionDisclaimer.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import { motion } from "framer-motion";
/**
*
*/
function useSeoNotImportant() {
const [load, setLoad] = React.useState(false);
React.useEffect(() => {
// load after 5 seconds
setTimeout(() => {
setLoad(true);
}, 5000);
}, []);
return load;
}
/**
* `<SectionDisclaimer>` ('section-disclaimer')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=20:1965)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=20:1965)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <SectionDisclaimer/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/20:1965 -->
*/
export function SectionDisclaimer() {
const load = useSeoNotImportant();
if (!load) {
return <></>;
}
return (
<RootWrapperSectionDisclaimer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
<Disclaimer>DISCLAIMER</Disclaimer>
<Text>
1. This project's intend is to serve developers a reliable cors proxy
service with fast response for their development. Using a cors proxy
service to connect to your own server is not a best practice. We'll
consistently optimize our service infra to keep the paid version
affordable as possible.
<br />
<br />
2. The original code behind cors proxy is by Rob wu's cors-anywhere and
the playground is forked from hoppscotch. both licensed under MIT, and
our project cors.sh is licensed under Apache 2.0.
</Text>
</RootWrapperSectionDisclaimer>
);
}
const RootWrapperSectionDisclaimer = styled(motion.div)`
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
`;
const Disclaimer = styled.span`
color: white;
opacity: 0.5;
text-overflow: ellipsis;
font-size: 18px;
font-family: "Roboto Mono", sans-serif;
font-weight: 500;
text-align: center;
`;
const Text = styled.span`
color: white;
opacity: 0.35;
text-overflow: ellipsis;
font-size: 14px;
font-family: "Roboto Mono", sans-serif;
text-transform: uppercase;
font-weight: 400;
text-align: left;
width: 400px;
`;
================================================
FILE: .archives/homepage/grida/SectionHero.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import { OnboardingCta } from "../components";
import CheckFilled from "../components/icons/check-filled";
import { Close } from "@mui/icons-material";
export function TryPlayground() {
return (
<RootWrapperTryPlayground>
Try it out on playground for requests with body 👉{" "}
<a className="underline" href="/playground">
cors.sh/playground
</a>
</RootWrapperTryPlayground>
);
}
const RootWrapperTryPlayground = styled.span`
color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis;
font-size: 14px;
font-family: Inter, sans-serif;
font-weight: 500;
line-height: 160%;
text-align: left;
width: 356px;
.underline {
text-decoration: underline;
}
`;
/**
* `<SectionHero>` ('section-hero')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=15:1784)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=15:1784)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <SectionHero/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/15:1784 -->
*/
export function SectionHero() {
return (
<RootWrapperSectionHero>
<Headings>
<HeadingAsH1>
Sick of
<br />
cors errors?
</HeadingAsH1>
<Description>
A Fast & Reliable CORS Proxy for your websites
</Description>
</Headings>
<Cta>
<OnboardingCta />
<div style={{ height: 20 }} />
<TryPlayground />
</Cta>
<FeatuersList>
<Item>
<CheckFilled />
<ItemText>Secure</ItemText>
</Item>
<Item>
<CheckFilled />
<ItemText>Reliable</ItemText>
</Item>
<Item>
<CheckFilled />
<ItemText>Fast</ItemText>
</Item>
<Item>
<CheckFilled />
<ItemText>A cors-anywhere mirror</ItemText>
</Item>
</FeatuersList>
<Example>
<X>
<Close sx={{ fontSize: 12 }} />
</X>
<Text>
Access to XMLHttpRequest at 'https://target.domain' from origin
'https://my.site' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
</Text>
</Example>
<FixThisInMinutes>Fix this in minutes</FixThisInMinutes>
<PointerArtwork
src="/assets/scribble-pointer.png"
alt="image of PointerArtwork"
/>
</RootWrapperSectionHero>
);
}
const RootWrapperSectionHero = styled.div`
min-height: 100vh;
background-color: white;
position: relative;
`;
const Headings = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 32px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + -245px)) - 276px));
top: 171px;
width: 551px;
height: 256px;
`;
const HeadingAsH1 = styled.h1`
color: black;
text-overflow: ellipsis;
font-size: 80px;
font-family: Inter, sans-serif;
font-weight: 700;
letter-spacing: -2px;
line-height: 98%;
text-align: left;
`;
const Description = styled.h2`
color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis;
font-size: 21px;
font-family: Inter, sans-serif;
font-weight: 500;
line-height: 160%;
text-align: left;
`;
const Cta = styled.div`
position: absolute;
left: calc((calc((50% + -184px)) - 337px));
top: 517px;
height: 66px;
`;
const FeatuersList = styled.ul`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
gap: 138px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + -42px)) - 478px));
top: 703px;
height: 24px;
margin: 0;
padding: 0;
`;
const Item = styled.li`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
flex: none;
gap: 15px;
box-sizing: border-box;
`;
const Icon = styled.img`
width: 24px;
height: 24px;
object-fit: cover;
`;
const ItemText = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 16px;
font-family: Monaco, sans-serif;
font-weight: 400;
text-align: left;
`;
const Example = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
gap: 10px;
box-shadow: 0px 4px 32px rgba(255, 0, 0, 0.08);
border: solid 1px rgb(255, 46, 46);
border-radius: 4px;
background-color: rgb(252, 240, 240);
box-sizing: border-box;
padding: 10px;
position: absolute;
left: calc((calc((50% + 375px)) - 269px));
top: 247px;
width: 537px;
word-break: break-all;
`;
const X = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
flex: none;
background-color: rgb(233, 22, 6);
border-radius: 50%;
width: 16px;
height: 16px;
gap: 10px;
color: white;
box-sizing: border-box;
margin: 4px 0px 0px;
`;
const Text = styled.span`
color: rgb(233, 22, 6);
text-overflow: ellipsis;
font-size: 18px;
font-family: "Roboto Mono", sans-serif;
font-weight: 400;
letter-spacing: -1px;
line-height: 119%;
text-align: left;
width: 492px;
flex: 1;
`;
const FixThisInMinutes = styled.span`
color: rgb(164, 164, 164);
text-overflow: ellipsis;
font-size: 24px;
font-family: "Nanum Pen Script", sans-serif;
font-weight: 400;
line-height: 98%;
text-align: left;
position: absolute;
left: calc((calc((50% + 102px)) - 84px));
top: 123px;
transform: rotate(-7deg);
transform-origin: top left;
`;
const PointerArtwork = styled.img`
width: 53px;
height: 69px;
object-fit: cover;
position: absolute;
left: calc((calc((50% + 148px)) - 26px));
top: 143px;
transform: rotate(-9deg);
transform-origin: top left;
`;
================================================
FILE: .archives/homepage/grida/SectionPricing.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import { PricingCardsList } from "../layouts/pricing-card-list";
import { useRouter } from "next/router";
import { FreeForOpenSource } from "../components/pricing/free-for-opensource";
import { PRICE_PERSONAL_PRO_MONTHLY } from "../k";
/**
* `<SectionPricing>` ('section-pricing')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=15:1613)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=15:1613)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <SectionPricing/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/15:1613 -->
*/
export function SectionPricing() {
const router = useRouter();
return (
<RootWrapperSectionPricing id="pricing">
<Pricing>Pricing</Pricing>
<div
style={{
display: "flex",
top: 300,
alignItems: "center",
justifyContent: "center",
position: "relative",
}}
>
<PricingCardsList
initialSelection={PRICE_PERSONAL_PRO_MONTHLY}
disableSelection
enableIndividualActions
onGetStartedClick={(price) => {
router.push({ pathname: "/get-started", query: { price } });
}}
/>
</div>
<FreeForOpensourcePosition>
<FreeForOpenSource />
</FreeForOpensourcePosition>
<Line />
</RootWrapperSectionPricing>
);
}
const RootWrapperSectionPricing = styled.div`
height: 1632px;
background-color: white;
position: relative;
`;
const Pricing = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 64px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
line-height: 98%;
text-align: center;
position: absolute;
left: calc((calc((50% + 1px)) - 108px));
top: 88px;
`;
const FreeForOpensourcePosition = styled.div`
position: absolute;
left: calc((calc((50% + 1px)) - 520px));
top: 1184px;
width: 1040px;
height: 312px;
`;
const Line = styled.div`
width: 1039px;
height: 0px;
border-top: solid 1px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc((calc((50% + 1px)) - 520px));
top: 1108px;
`;
const Frame587 = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: flex-start;
gap: 12px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + 0px)) - 52px));
top: 229px;
width: 104px;
height: 14px;
`;
const Monthly = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 14px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
line-height: 98%;
text-align: left;
`;
const Yearly = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 14px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
line-height: 98%;
text-align: left;
`;
================================================
FILE: .archives/homepage/grida/SectionUsage.tsx
================================================
import React from "react";
import styled from "@emotion/styled";
import { useRouter } from "next/router";
import CheckFilled from "../components/icons/check-filled";
import { DemoTerminal } from "../components/demo-terminal";
import { TestItOutCta } from "../components";
/**
* `<SectionUsage>` ('section-usage')
* - [Open in Figma](https://figma.com/file/aPfdtNb1aGFIN9p05cmmVY?node-id=27:2213)
* - [Open in Grida](https://code.grida.co/files/aPfdtNb1aGFIN9p05cmmVY?node=27:2213)
*
*
* ---
* @example
* ```tsx
* import React from "react";
*
* export default function () {
* return (
* <>
* 👇 instanciate widget like below. 👇
* <SectionUsage/>
* </>
* )
* }
* ```
* ---
* @params {any} props - this widget does not requires props. you can pass custom dynamic props to the widget as you want (on typescript, it will raise type check issues).
* ---
* @preview
* 
* ---
* @remarks
* @see {@link https://grida.co/docs} for more information.
* ---
* Code generated by grida.co | engine 0.0.1 (Apache-2.0) | Generated code under CC0 (public domain) *This code is free to use, modify, and redistribute. (aknowledgment is not required)*
*
*
* 
* <!-- Info: Please do not remove this comment unless intended. removing this section will break grida integrations. -->
* <!-- grida.meta.widget_declaration | engine : 0.0.1 | source : figma://aPfdtNb1aGFIN9p05cmmVY/27:2213 -->
*/
export function SectionUsage() {
const [target, setTarget] = React.useState("https://acme.com");
return (
<RootWrapperSectionUsage id="usage">
<Success>
<CheckFilled size={16} color="blue" />
<FetchSuccess>Fetch success!</FetchSuccess>
</Success>
<Headings>
<HeadingAsH2>Simple usage</HeadingAsH2>
<Desc>
You can use the proxy service by simply adding https://proxy.cors.sh/
to your existing api
</Desc>
</Headings>
<Display>
<Line36 />
<Frame586>
<Rectangle865 />
<Rectangle867 />
<Rectangle866 />
<Ellipse42 />
<Ellipse43 />
<Ellipse44 />
<Vector xmlns="http://www.w3.org/2000/svg">
<path
fill="rgb(206, 206, 206)"
d="M19.9995 0C8.97168 0 0 8.9718 0 19.9996C0 31.0273 8.97168 39.9991 19.9995 39.9991C31.0273 39.9991 39.999 31.0275 39.999 19.9996C39.999 8.9718 31.0273 0 19.9995 0ZM16.9143 2.03209C15.2909 3.42189 13.7368 5.15207 12.4882 6.99386C11.9259 7.82338 11.4204 8.67991 10.9714 9.55839L5.06477 9.55839C7.80238 5.65431 12.0295 2.86833 16.9143 2.03209ZM3.96743 11.3281L10.1568 11.3281C9.12399 13.8402 8.53952 16.4995 8.43499 19.208L1.78799 19.208C1.90998 16.3658 2.68476 13.6901 3.96743 11.3281ZM1.79613 20.9777L8.43428 20.9777C8.53609 23.7286 9.11479 26.3636 10.1619 28.8576L4.07149 28.8576C2.7559 26.5013 1.94738 23.8254 1.79613 20.9777ZM5.19702 30.6272L10.9966 30.6272C11.4389 31.4706 11.9366 32.2966 12.4915 33.1033C13.9637 35.2438 15.546 36.836 16.8825 37.9616C12.0892 37.1323 7.93156 34.4251 5.19702 30.6272ZM19.1147 37.4689C17.138 36.0214 14.8111 33.7127 13.0283 30.6272L19.1147 30.6272L19.1147 37.4689ZM19.1147 28.8575L12.1099 28.8575C11.0559 26.573 10.328 23.9377 10.2057 20.9776L19.1145 20.9776L19.1147 28.8575ZM19.1147 19.208L10.2057 19.208C10.3159 16.4567 10.9418 13.8203 12.0738 11.3281L19.1147 11.3281L19.1147 19.208ZM19.1147 9.55839L12.9766 9.55839C13.2782 9.02725 13.6031 8.50318 13.953 7.9869C15.7749 5.29931 17.7719 3.5394 19.1147 2.54212L19.1147 9.55839ZM38.211 19.208L31.5639 19.208C31.4594 16.4995 30.8749 13.8402 29.8421 11.3281L36.0315 11.3281C37.3141 13.6901 38.089 16.3658 38.211 19.208ZM34.9343 9.55839L29.0277 9.55839C28.5788 8.67991 28.0731 7.82338 27.511 6.99386C26.2624 5.15195 24.7077 3.42225 23.0842 2.03197C27.9692 2.86821 32.1964 5.6542 34.9343 9.55839ZM20.8844 2.542C22.2271 3.53928 24.2241 5.29919 26.046 7.98678C26.3959 8.50306 26.7208 9.02713 27.0224 9.55827L20.8844 9.55827L20.8844 2.542ZM20.8844 11.3281L27.9252 11.3281C29.0572 13.8203 29.6831 16.4567 29.7933 19.208L20.8844 19.208L20.8844 11.3281ZM20.8844 20.9777L29.7932 20.9777C29.671 23.9378 28.943 26.5731 27.889 28.8576L20.8842 28.8576L20.8844 20.9777ZM20.8844 30.6272L26.9707 30.6272C25.1879 33.7126 22.861 36.0214 20.8844 37.4689L20.8844 30.6272ZM23.1168 37.9616C24.4531 36.8361 26.0354 35.2436 27.5074 33.1034C28.0623 32.2967 28.56 31.4707 29.0023 30.6273L34.8019 30.6273C32.0675 34.4249 27.91 37.1322 23.1168 37.9616ZM35.9275 28.8575L29.837 28.8575C30.8841 26.3635 31.4628 23.7286 31.5646 20.9776L38.2028 20.9776C38.0515 23.8254 37.2431 26.5013 35.9275 28.8575Z"
/>
</Vector>
</Frame586>
<Frame579>
<Image2 src="/logos-3p/instagram@2x.png" alt="image of Image2" />
</Frame579>
<Frame587>
<ProxyCorsSh>proxy.cors.sh</ProxyCorsSh>
</Frame587>
</Display>
<DemoContainer>
<ReqExample>
<TestItOutCta onChange={setTarget} />
</ReqExample>
<DemoTerminal target={target} />
</DemoContainer>
<Items>
<Item>
<CheckFilled size={16} />
<FetchImagesFromInstagram>
Fetch images from Tiktok
</FetchImagesFromInstagram>
</Item>
<Item>
<CheckFilled size={16} />
<ConnectToYourDevServer>
Connect to your dev server
</ConnectToYourDevServer>
</Item>
<Item>
<CheckFilled size={16} />
<FetchImagesFromInstagram>
Fetch images from Instagram
</FetchImagesFromInstagram>
</Item>
</Items>
{/* <ReqExample>GET https://proxy.cors.sh/https://instagram.com</ReqExample> */}
<Logos>
<Logo src="/logos-3p/instagram.png" alt="instagram" />
<Logo src="/logos-3p/tiktok.png" alt="tiktok" />
<Logo src="/logos-3p/twitter.png" alt="twitter" />
<Logo src="/logos-3p/github.png" alt="github" />
</Logos>
</RootWrapperSectionUsage>
);
}
const RootWrapperSectionUsage = styled.div`
height: 1800px;
background-color: white;
position: relative;
`;
const Success = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 10px;
box-shadow: 0px 4px 32px rgba(48, 94, 255, 0.1);
border: solid 1px rgb(0, 71, 255);
border-radius: 4px;
background-color: rgba(0, 56, 255, 0.81);
box-sizing: border-box;
padding: 10px;
position: absolute;
left: calc((calc((50% + 5px)) - 247px));
top: 604px;
width: 494px;
height: 41px;
`;
const FetchSuccess = styled.span`
color: white;
text-overflow: ellipsis;
font-size: 18px;
font-family: "Source Code Pro", sans-serif;
font-weight: 500;
letter-spacing: -1px;
line-height: 119%;
text-align: left;
width: 451px;
flex: 1;
`;
const Headings = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 32px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + 1px)) - 245px));
top: 92px;
width: 489px;
height: 163px;
`;
const HeadingAsH2 = styled.h2`
color: black;
text-overflow: ellipsis;
font-size: 64px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 700;
line-height: 98%;
text-align: center;
`;
const Desc = styled.p`
color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis;
font-size: 21px;
font-family: Inter, sans-serif;
font-weight: 500;
line-height: 160%;
text-align: center;
width: 489px;
`;
const Display = styled.div`
width: 486px;
height: 105px;
position: absolute;
left: calc((calc((50% + 0px)) - 243px));
top: 407px;
`;
const Line36 = styled.div`
width: 230px;
height: 0px;
border-top: solid 1px rgb(236, 236, 236);
position: absolute;
left: calc((calc((50% + -5px)) - 115px));
top: 53px;
`;
const Frame586 = styled.div`
width: 136px;
height: 105px;
background-color: white;
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
position: absolute;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04);
left: calc((calc((50% + -175px)) - 68px));
top: 0px;
`;
const Rectangle865 = styled.div`
width: 109px;
height: 8px;
background-color: rgb(239, 239, 239);
border-radius: 8px;
position: absolute;
left: 5px;
top: 10px;
`;
const Rectangle867 = styled.div`
width: 15px;
height: 8px;
background-color: rgb(239, 239, 239);
border-radius: 8px;
position: absolute;
left: 116px;
top: 10px;
`;
const Rectangle866 = styled.div`
width: 20px;
height: 6px;
background-color: rgb(217, 217, 217);
border-radius: 2px;
position: absolute;
left: 20px;
top: 3px;
`;
const Ellipse42 = styled.div`
width: 3px;
height: 3px;
background-color: rgb(217, 217, 217);
border-radius: 3px / 3px;
position: absolute;
left: 6px;
top: 5px;
`;
const Ellipse43 = styled.div`
width: 3px;
height: 3px;
background-color: rgb(217, 217, 217);
border-radius: 3px / 3px;
position: absolute;
left: 10px;
top: 5px;
`;
const Ellipse44 = styled.div`
width: 3px;
height: 3px;
background-color: rgb(217, 217, 217);
border-radius: 3px / 3px;
position: absolute;
left: 14px;
top: 5px;
`;
const Vector = styled.svg`
width: 40px;
height: 40px;
position: absolute;
left: 48px;
top: 40px;
right: 48px;
bottom: 25px;
`;
const Frame579 = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
gap: 10px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04);
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
background-color: white;
box-sizing: border-box;
padding: 10px 20px;
position: absolute;
left: calc((calc((50% + 175px)) - 68px));
top: 0px;
width: 136px;
height: 105px;
`;
const Image2 = styled.img`
width: 40px;
height: 40px;
object-fit: cover;
`;
const Frame587 = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
gap: 10px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04);
border: solid 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
background-color: white;
box-sizing: border-box;
padding: 10px 20px;
position: absolute;
left: calc((calc((50% + 0px)) - 51px));
top: 38px;
width: 102px;
height: 29px;
`;
const ProxyCorsSh = styled.span`
color: rgba(0, 0, 0, 0.6);
text-overflow: ellipsis;
font-size: 11px;
font-family: Inter, sans-serif;
font-weight: 700;
line-height: 160%;
text-align: left;
`;
const DemoContainer = styled.div`
position: absolute;
width: 948px;
height: 500px;
left: calc((calc((50% + 0px)) - 474px));
top: 968px;
`;
const Items = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 12px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + 5px)) - 247px));
top: 710px;
width: 494px;
height: 147px;
`;
const Item = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
gap: 10px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04);
border: solid 1px rgb(208, 208, 208);
border-radius: 4px;
align-self: stretch;
background-color: rgba(255, 255, 255, 0.08);
box-sizing: border-box;
padding: 10px;
flex-shrink: 0;
`;
const FetchImagesFromInstagram = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 18px;
font-family: "Source Code Pro", sans-serif;
font-weight: 500;
letter-spacing: -1px;
line-height: 119%;
text-align: left;
width: 451px;
flex: 1;
`;
const ConnectToYourDevServer = styled.span`
color: black;
text-overflow: ellipsis;
font-size: 18px;
font-family: "Source Code Pro", sans-serif;
font-weight: 500;
letter-spacing: -1px;
line-height: 119%;
text-align: left;
width: 451px;
flex: 1;
`;
const ReqExample = styled.span`
position: absolute;
display: flex;
z-index: 1;
top: 570px;
left: 0px;
right: 0px;
justify-content: center;
`;
const Logos = styled.div`
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
gap: 27px;
box-sizing: border-box;
position: absolute;
left: calc((calc((50% + -1px)) - 81px));
top: 295px;
width: 161px;
height: 20px;
`;
const Logo = styled.img`
width: 20px;
height: 20px;
object-fit: cover;
`;
const Logo_0002 = styled.img`
width: 20px;
height: 16px;
object-fit: cover;
`;
================================================
FILE: .archives/homepage/grida.config.js
================================================
// This file is auto-generated by Grida.
/**
* @type {import('grida').GridaConfig}
*/
const config = {
name: 'homepage',
type: 'project',
$schema: 'node_modules/@grida/grida-config-schema/v1.json',
designsource: {
provider: 'figma',
file: 'aPfdtNb1aGFIN9p05cmmVY',
client: 'api.figma.com',
},
fallbackDir: './grida',
framework: {
framework: 'react',
language: 'tsx',
styling: {
type: 'styled-components',
module: '@emotion/styled',
},
component_declaration_style: {
exporting_style: {
type: 'export-named-functional-component',
declaration_syntax_choice: 'function',
export_declaration_syntax_choice: 'export',
exporting_position: 'with-declaration',
},
},
packages: [
'@emotion/styled',
'@emotion/react',
],
},
};
module.exports = config;
================================================
FILE: .archives/homepage/k/examples.ts
================================================
/**
* usage code snippet
*/
export const examples = {
simplest: (
t: string,
key: string = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
) => `fetch('https://proxy.cors.sh/${t}', {
headers: {
'x-cors-api-key': '${key}',
}
}).then(console.log);`,
fetch: (
t: string,
key: string = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
) => `fetch('https://proxy.cors.sh/${t}', {
headers: {
'x-cors-api-key': '${key}',
}
});
// or...
functon fetchWithProxy(url, params){
return fetch(\`https://proxy.cors.sh/\${url}\`,
{
...params,
headers:
{
...params.headers,
'x-cors-api-key': '${key}'
}
});
}
fetchWithProxy('${t}')
`,
axios: (
t: string,
key: string = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
) => `import Axios from "axios";
Axios.get('https://proxy.cors.sh/${t}', {
headers: {
'x-cors-api-key': '${key}',
}
})
// or...
const client = Axios.create({
baseURL: 'https://proxy.cors.sh/' + '${t}',
headers: {
'x-cors-api-key': '${key}',
}
})
client.get('/')
`,
} as const;
================================================
FILE: .archives/homepage/k/external-links.ts
================================================
export const LINK_APPLY_FOR_OSS_PLAN =
"https://github.com/gridaco/cors.sh/issues/new?template=apply-for-oss-program.yml";
================================================
FILE: .archives/homepage/k/host.ts
================================================
export const HOST =
process.env.NODE_ENV === "production"
? "https://cors.sh"
: "http://localhost:8823";
export const SERVER_URL =
process.env.NODE_ENV === "production"
? // TODO: this url is not live.
"https://services.cors.sh"
: "http://localhost:4021";
================================================
FILE: .archives/homepage/k/index.ts
================================================
export * from "./price";
export * from "./external-links";
export * from "./host";
export * from "./examples";
================================================
FILE: .archives/homepage/k/price.ts
================================================
const _PRICE_PERSONAL_PRO_MONTHLY = {
test: "price_1Lda7UAvR3geCh5rVaajCSw6",
live: "price_1LbnTwAvR3geCh5rZm9v8CAy",
} as const;
const _PRICE_PERSONAL_PRO_YEARLY = {
test: "price_1MMpznAvR3geCh5ro9O4Gdlt",
live: "price_1LbnV4AvR3geCh5rMEwJ5Zf1",
};
const _PRICE_ENTERPRISE_PRO_YEARLY = {
test: "price_1MNTfvAvR3geCh5rV0KueWOk",
live: "price_1MNTlpAvR3geCh5r3gqzq2s7",
};
const _PRICE_FREE = "price_1KeF2VAvR3geCh5rq6s4V2P1";
export const PRICE_PERSONAL_PRO_MONTHLY =
process.env.NODE_ENV === "production"
? _PRICE_PERSONAL_PRO_MONTHLY.live
: _PRICE_PERSONAL_PRO_MONTHLY.test;
export const PRICE_PERSONAL_PRO_YEARLY =
process.env.NODE_ENV === "production"
? _PRICE_PERSONAL_PRO_YEARLY.live
: _PRICE_PERSONAL_PRO_YEARLY.test;
export const PRICE_ENTERPRISE_PRO_YEARLY =
process.env.NODE_ENV === "production"
? _PRICE_ENTERPRISE_PRO_YEARLY.live
: _PRICE_ENTERPRISE_PRO_YEARLY.test;
export const PRICE_PAY_AS_YOU_GO = "price_1LegsaAvR3geCh5rBCiuVmDt";
export const PRICE_FREE_MONTHLY = _PRICE_FREE;
interface Price {
id: string;
name: string;
description?: string;
price: string;
unit?: string;
features: string[];
}
const price_free: Price = {
id: PRICE_FREE_MONTHLY,
name: "For Testing",
price: "Free",
features: [
"10,000 requests per month",
"5GB traffic per month",
"100 requests per hour",
"2 Projects",
"3mb per request",
],
};
const price_pro_monthly: Price = {
id: PRICE_PERSONAL_PRO_MONTHLY,
name: "Pro - Monthly",
price: "$4",
unit: "Month",
features: [
"Up to 500,000 requests per month",
"500GB Bandwidth",
"Unlimited Projects",
"No hourly request limit",
"Max 6mb per request",
],
};
const price_pro_yearly: Price = {
id: PRICE_PERSONAL_PRO_YEARLY,
name: "Pro - Save 25% with Annual billing",
price: "$36",
unit: "Year",
features: [
"Up to 500,000 requests per month",
"500GB Bandwidth",
"Unlimited Projects",
"No hourly request limit",
"Max 6mb per request",
],
};
const enterprise_yearly: Price = {
id: PRICE_ENTERPRISE_PRO_YEARLY,
name: "Enterprise",
price: "$499",
unit: "Year",
features: [
"Up to 10,000,000 requests per month",
"1TB Bandwidth",
"Unlimited Projects",
"No hourly request limit",
"Max 6mb per request",
],
};
const price_pay_as_you_go: Price = {
id: PRICE_PAY_AS_YOU_GO,
name: "For Production projects",
description: "From $10 / month",
price: "Pay as you go",
features: [
"5,000,000 requests / month included",
"Unlimited Bandwidth",
"$1 per every next 100,000 requests",
"Unlimited Projects",
"No hourly request limit",
"Max 6mb per request",
],
};
export const prices: Price[] = [
// price_free,
price_pro_monthly,
price_pro_yearly,
// enterprise_yearly,
// price_pay_as_you_go,
];
================================================
FILE: .archives/homepage/layouts/payment-required-page.tsx
================================================
import React from "react";
export function PaymentRequiredPage() {
return <></>;
}
================================================
FILE: .archives/homepage/layouts/pricing-card-list.tsx
================================================
import React, { useState } from "react";
import { PricingCard } from "../components/pricing";
import * as k from "../k";
export function PricingCardsList({
enableIndividualActions,
onGetStartedClick,
initialSelection,
onPriceChange,
disableSelection = false,
}: {
disableSelection?: boolean;
initialSelection?: string;
enableIndividualActions: boolean;
onPriceChange?: (price: string) => void;
onGetStartedClick?: (id: string) => void;
}) {
const [selected, setSelected] = useState(initialSelection);
const onSelected = (id: string) => {
if (disableSelection) return;
setSelected(id);
onPriceChange?.(id);
};
return (
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
gap: 40,
}}
>
{k.prices.map((price) => (
<PricingCard
onClick={() => onSelected(price.id)}
selected={selected === price.id}
key={price.id}
name={price.name}
description={price.description}
price={price.price}
startLabel="Get Started"
unit={price.unit}
features={price.features}
enableAction={enableIndividualActions}
onStartClick={() => {
onGetStartedClick?.(price.id);
}}
/>
))}
</div>
);
}
================================================
FILE: .archives/homepage/layouts/step-layout.tsx
================================================
import styled from "@emotion/styled";
import Head from "next/head";
import React, { useEffect } from "react";
import { Button } from "../components/button";
import { Logo } from "../components/logo";
type Props = {
title: string;
description: string | React.ReactNode;
nextPromptLabel: string;
disableEnterForNext?: boolean;
onNextClick: () => void;
} & React.PropsWithChildren;
export function StepLayout({
title,
description,
nextPromptLabel,
onNextClick,
children,
disableEnterForNext,
}: Props) {
const nextbtnref = React.useRef<HTMLButtonElement>(null);
useEffect(() => {
const listener = (e: KeyboardEvent) => {
if (e.key === "Enter" && !disableEnterForNext) {
onNextClick();
}
};
document.addEventListener("keydown", listener);
return () => {
document.removeEventListener("keydown", listener);
};
}, []);
return (
<Layout id="layout">
<Head>
<title>{title}</title>
<meta name="description" content={title} />
</Head>
<HeadingContaienr>
<Logo moveToHome />
<div style={{ height: 8 }} />
<Heading>{title}</Heading>
<Description>{description}</Description>
</HeadingContaienr>
<div style={{ height: 40 }} />
{children}
<div style={{ height: 40 }} />
<FooterSticky>
{!disableEnterForNext && (
<PressEnterToContinue>Press enter to continue</PressEnterToContinue>
)}
<Button ref={nextbtnref} onClick={onNextClick}>
{nextPromptLabel}
</Button>
</FooterSticky>
</Layout>
);
}
const Layout = styled.div`
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 80px;
outline: none;
border: none;
`;
const Heading = styled.h1`
max-width: 370px;
`;
const Description = styled.p`
color: rgba(0, 0, 0, 0.7);
text-overflow: ellipsis;
font-size: 14px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
text-align: left;
max-width: 600px;
`;
const HeadingContaienr = styled.div`
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 16px;
`;
const PressEnterToContinue = styled.span`
color: rgba(0, 0, 0, 0.8);
text-overflow: ellipsis;
font-size: 14px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 400;
text-align: left;
`;
const FooterSticky = styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
gap: 24px;
flex-direction: row;
`;
================================================
FILE: .archives/homepage/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
================================================
FILE: .archives/homepage/next.config.js
================================================
const withLinaria = require("next-linaria");
const withTM = require("next-transpile-modules")([
"@app/ui",
"@cors.sh/service-api",
"@editor-ui/console",
]);
const CONSOLE_URL = process.env.CONSOLE_URL;
/**
* @type {import('next').NextConfig}
*/
const config = {
rewrites() {
return [
{
source: "/playground",
destination: "https://playground.cors.sh",
},
{
source: "/playground/:path*",
destination: "https://playground.cors.sh/:path*",
},
{
source: "/console",
destination: CONSOLE_URL,
},
{
source: "/console/:path*",
destination: CONSOLE_URL + "/:path*",
},
{
source: "/docs",
destination: "https://docs.cors.sh/intro",
},
{
source: "/docs/:path*",
destination: "https://docs.cors.sh/:path*",
},
];
},
redirects() {
return [
{
source: "/http\\://:path*",
destination: "https://proxy.cors.sh/http\\://:path*",
basePath: false,
permanent: true,
},
{
source: "/https\\://:path*",
destination: "https://proxy.cors.sh/https\\://:path*",
basePath: false,
permanent: true,
},
{
// if pyament is canceled, go back to get started page.
source: "/payments/canceled",
destination: "/get-started",
permanent: true,
},
// {
// source: "/console",
// destination: "https://console.grida.co/cors-proxy",
// permanent: true,
// },
{
source: "/docs",
destination: "/docs/intro",
permanent: true,
},
];
},
};
module.exports = withTM(withLinaria(config));
================================================
FILE: .archives/homepage/package.json
================================================
{
"name": "homepage",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev -p 8823",
"build": "next build",
"start": "next start -p 8823"
},
"dependencies": {
"@cors.sh/service-api": "0.0.0",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@mui/icons-material": "^5.10.3",
"@mui/material": "^5.10.3",
"@radix-ui/react-collapsible": "^1.0.1",
"@types/react-select": "^5.0.1",
"framer-motion": "^8.5.0",
"nanoid": "^4.0.0",
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-select": "^5.4.0",
"react-syntax-highlighter": "^15.5.0",
"sass": "^1.54.8"
},
"devDependencies": {
"@types/node": "^18.7.13",
"@types/react": "18.0.17",
"@types/react-syntax-highlighter": "^15.5.5",
"grida": "^0.0.21",
"next-linaria": "^0.11.0",
"next-transpile-modules": "^9.0.0",
"typescript": "4.8.2"
}
}
================================================
FILE: .archives/homepage/pages/_app.tsx
================================================
import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";
import { Toaster } from "react-hot-toast";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
{/* <!-- Google tag (gtag.js) --> */}
<Script
strategy="afterInteractive"
src="https://www.googletagmanager.com/gtag/js?id=G-XG051N1VS3"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XG051N1VS3');
`}
</Script>
<Head>
<SeoMeta />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="theme-color" content="#000000" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Toaster position="bottom-center" />
<Component {...pageProps} />
</>
);
}
function SeoMeta() {
return (
<>
<meta name="description" content="One CORS Proxy you'll ever need" />
<meta
name="keywords"
content="cors, cors proxy, cors proxy server, free cors proxy, soap, cors playground, cors-anywhere, cors anywhere alternative"
/>
<meta property="og:image" content="/og:image.jpg" />
</>
);
}
================================================
FILE: .archives/homepage/pages/_document.tsx
================================================
import { Head, Html, Main, NextScript } from "next/document";
export default function _Document() {
return (
<Html lang="en">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="*" />
{/* roboto mono */}
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
{/* inter */}
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
{/* Nanum Pen Script */}
<link
href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap"
rel="stylesheet"
></link>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
================================================
FILE: .archives/homepage/pages/disclaimer.tsx
================================================
import React from "react";
export default function DisclaimerPage() {
return <>Disclaimer</>;
}
================================================
FILE: .archives/homepage/pages/get-started/index.tsx
================================================
import React, { useCallback, useRef, useEffect } from "react";
import { useRouter } from "next/router";
import { FormPageLayout } from "@app/ui/layouts";
import { validateUrls } from "@app/ui/utils";
import {
Button,
FormFieldBase,
FormFieldLabel,
TextFormField,
} from "@editor-ui/console";
import Select from "react-select";
import client from "@cors.sh/service-api";
import * as k from "../../k";
import { toast } from "react-hot-toast";
export default function GetstartedPage({ price: _price }: { price: string }) {
const [name, setName] = React.useState("");
const [price, setPrice] = React.useState(_price);
const [allowedOrigins, setAllowedOrigins] = React.useState("");
const [valid, setValid] = React.useState(false);
const [isBusy, setIsBusy] = React.useState(false);
const [isValid, setIsValid] = React.useState(false);
const stateRef = useRef<string>(_price);
stateRef.current = price;
const router = useRouter();
const pricing_options = Object.values(pricing);
const onPriceChange = (price: string) => {
setPrice(price);
};
const onTypeKey = (key: string) => {
// todo: validate key via api
setValid(key.length > 10);
};
const onEnter = () => {
// this is required because onEnter can also be invoked from input's callback
if (valid) {
onNextClick();
}
};
useEffect(() => {
setIsValid(name.length > 0 && validateUrls(allowedOrigins));
}, [name, allowedOrigins]);
const onNextClick = useCallback(async () => {
setIsBusy(true);
try {
// log begin_checkout event
const pricedata = pricing[price];
// @ts-ignore
window.gtag("event", "begin_checkout", {
value: pricedata.value,
currency: pricedata.currency,
items: [
{
item_id: pricedata.id,
item_name: pricedata.label,
},
],
});
} catch (e) {}
try {
// create onboarding application
const form = {
name: name ? name : undefined,
allowedOrigins: allowedOrigins
.split(",")
.map((x) => x.trim())
.filter(Boolean),
priceId: price,
};
const application = await client.onboardingWithForm(form);
const onboarding_id = application.id;
// redirect user to payment page
let redirect;
switch (stateRef.current) {
case k.PRICE_PAY_AS_YOU_GO: {
// TODO: add stripe integration.
redirect = "https://forms.gle/GXDGPAoM9fhZrQh77";
break;
}
case k.PRICE_FREE_MONTHLY: {
// the free plan does not require payments, so we can skip to create new project right away.
redirect =
window.location.protocol + window.location.host + "/console/new";
break;
}
default: {
let params = new URLSearchParams();
params.append("onboarding_id", onboarding_id);
// TODO: multiple search params not supported by accounts.grida.co?redirect_uri=x
redirect = k.SERVER_URL + "/payments/checkout/new" + "?" + params;
break;
}
}
router.replace(redirect);
} catch (e) {
toast.error("Oops. something went wrong. please try again.");
setIsBusy(false);
}
}, [name, allowedOrigins, price]);
return (
<FormPageLayout>
<div
style={{
display: "flex",
flexDirection: "column",
gap: 8,
}}
>
<h1>Get started</h1>
<p>
Ready to use cors.sh? select your plan and let’s create your first
project. <br />
</p>
<p style={{ opacity: 0.5 }}>you can update the fields later</p>
</div>
<div className="form">
<TextFormField
label="Application name"
placeholder="my-portfolio-website"
onEnter={onEnter}
onChange={setName}
/>
<TextFormField
label="Application origin URL"
placeholder="http://localhost:3000, https://my-site.com"
helpText="Add up to 3 urls of your site"
onEnter={onEnter}
onChange={setAllowedOrigins}
/>
{/* pricing plan select */}
<FormFieldBase style={{ width: "100%" }}>
<FormFieldLabel>Plan</FormFieldLabel>
<div style={{ flex: 1, alignSelf: "stretch" }}>
<Select
id="pricing-select"
instanceId="pricing-select"
onKeyDown={(e) => {
if (e.key === "Enter") {
onEnter();
}
}}
//
onChange={(e) => {
e && onPriceChange(e.id);
}}
value={pricing[price]}
options={pricing_options}
/>
</div>
</FormFieldBase>
<div style={{ height: 16 }} />
<Button
disabled={!isValid || isBusy}
onClick={onNextClick}
height={"32px"}
>
Continue
</Button>
</div>
</FormPageLayout>
// <StepLayout
// title="Get started"
// description="Ready to use cors.sh? select your plan and let’s create your first project."
// onNextClick={onNextClick}
// nextPromptLabel="Sign in with Grida and continue"
// >
// <PricingCardsList
// onPriceChange={onPriceChange}
// initialSelection={price}
// />
// </StepLayout>
);
}
const pricing = {
[k.PRICE_PERSONAL_PRO_MONTHLY]: {
id: k.PRICE_PERSONAL_PRO_MONTHLY,
label: "Pro - $4/Mo",
value: 4,
currency: "USD",
},
[k.PRICE_PERSONAL_PRO_YEARLY]: {
id: k.PRICE_PERSONAL_PRO_YEARLY,
label: "Pro - $3/Mo (Pay annualy, save $12)",
value: 36,
currency: "USD",
},
[k.PRICE_ENTERPRISE_PRO_YEARLY]: {
id: k.PRICE_ENTERPRISE_PRO_YEARLY,
label: "Enterprise - $499/Yr",
value: 499,
currency: "USD",
},
// [k.PRICE_FREE_MONTHLY]: {
// id: k.PRICE_FREE_MONTHLY,
// label: "Free",
// },
// [k.PRICE_PAY_AS_YOU_GO]: {},
} as const;
export async function getServerSideProps(context: any) {
const { price } = context.query;
const validate_price_id = (price_id: string | undefined): boolean => {
return price_id?.startsWith("price_") || false;
};
const _price = validate_price_id(price)
? price
: k.PRICE_PERSONAL_PRO_MONTHLY;
return {
props: {
price: _price,
},
};
}
================================================
FILE: .archives/homepage/pages/index.tsx
================================================
import React from "react";
import { AppbarGroup } from "../grida/AppbarGroup";
import { SectionDisclaimer } from "../grida/SectionDisclaimer";
import { SectionHero } from "../grida/SectionHero";
import { SectionPricing } from "../grida/SectionPricing";
import { SectionUsage } from "../grida/SectionUsage";
import ChatwootWidget from "../components/chatwood";
import { FooterCtaSection } from "../components/cta-footer";
import Head from "next/head";
export default function HomePage() {
return (
<>
<Head>
<title>CORS.SH - A Fast & Reliable CORS Proxy for your websites</title>
</Head>
<AppbarGroup />
<SectionHero />
<SectionUsage />
<SectionPricing />
{/* <SectionCtaLast /> */}
<div style={{ height: 120 }} />
<div
style={{
height: 800,
position: "relative",
// black background that starts from 60% to 100% of the height
background:
"linear-gradient(180deg, white 0%, white 50%, #000000 50%, #000000 100%)",
}}
>
<div
style={{
position: "absolute",
top: 40,
left: 0,
right: 0,
maxWidth: 1040,
margin: "120px auto",
}}
>
<FooterCtaSection />
</div>
</div>
<div
style={{
background: "black",
padding: "400px 0",
}}
>
<ClientOnly>
<SectionDisclaimer />
</ClientOnly>
</div>
<ChatwootWidget />
</>
);
}
function ClientOnly({ children, ...delegated }: React.PropsWithChildren) {
const [hasMounted, setHasMounted] = React.useState(false);
React.useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
return <div {...delegated}>{children}</div>;
}
================================================
FILE: .archives/homepage/pages/oauth/callback.tsx
================================================
import React from "react";
import Axios from "axios";
const client = Axios.create({
baseURL: "https://accounts.grida.ngrok.io/oauth",
});
export default function OAuthCallbackPage(props: any) {
return (
<>
<h1>Signed in</h1>
<p>You may now close this page</p>
<pre>
<code>{JSON.stringify(props, null, 2)}</code>
</pre>
</>
);
}
export async function getServerSideProps(context: any) {
const { code, state } = context.query;
try {
// TODO:
const { data } = await client.get("/access_token", {
params: {
client_id: "cors.sh",
client_secret: process.env.GRIDA_OAUTH_CLIENT_SECRET,
code,
},
});
return {
props: {
...data,
},
};
} catch (e) {
console.error(e);
}
return {
props: {},
};
}
================================================
FILE: .archives/homepage/pages/onboarding/[id].tsx
================================================
// TODO: rename this route to /onboarding/continue?id=
import Head from "next/head";
import React from "react";
export default function ContinueOnboardingWithVerification() {
return (
<>
<Head>
<title>Redirecting..</title>
</Head>
<h1>Redirecting..</h1>
</>
);
}
export async function getServerSideProps() {
//
// TODO: fully implement.
// for now, redirect to get-started
return {
redirect: {
destination: "/get-started",
permanent: false,
},
};
}
================================================
FILE: .archives/homepage/pages/onboarding/complete.tsx
================================================
import React, { useEffect } from "react";
import styled from "@emotion/styled";
import { Client, ApplicationWithApiKey } from "@cors.sh/service-api";
import Head from "next/head";
import { FormPageLayout, PageCloseButton } from "@app/ui/layouts";
import { CollapsibleInfoCard } from "components";
import { UnderlineButton } from "@app/ui/components";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { examples } from "k";
import { ApiKeyReveal } from "@app/ui/components";
export default function InitialOnboardingFinalPage({
application,
}: {
application: ApplicationWithApiKey;
}) {
const demo_target_url =
application.allowedOrigins[0] ?? "https://example.com";
return (
<>
<Head>
<title>CORS.SH - Complete</title>
</Head>
<FormPageLayout>
<PageCloseButton />
<>
<h1>
Extend your api call with <u>proxy.cors.sh</u>
</h1>
<p className="description">
<small
style={{
opacity: 0.5,
}}
>
We've sent you an email with the api key.
<br />
Please check your inbox :)
</small>
<br />
<br />
Let’s get rid of the cors errors with proxy.cors.sh like below.
</p>
<div style={{ height: 16 }} />
<div className="body">
{/* <VideoDemo /> */}
<CodeExamples
apikey={application.apikey_test}
target={demo_target_url}
/>
<ApiKeyReveal
keys={{
test: application.apikey_test,
prod: application.apikey_live,
}}
/>
<div
style={{
display: "flex",
flexDirection: "column",
gap: 8,
}}
>
<CollapsibleInfoCard title="View more examples">
<MoreCodeExamples
apikey={application.apikey_test}
target={demo_target_url}
/>
</CollapsibleInfoCard>
{/* <CollapsibleInfoCard title="What's Next?">
<h5>Useful resources</h5>
<ul>
<li>
<a href="https://cors.sh/docs">
<u>Learn how to secure your api key</u>
</a>
</li>
<li>
<a href="https://cors.sh/docs">
<u>Before publishing your website to production</u>
</a>
</li>
<li>
<a href="https://cors.sh/docs">
<u>Create new application on console</u>
</a>
</li>
</ul>
</CollapsibleInfoCard> */}
</div>
</div>
<div style={{ height: 30 }} />
<div
style={{
display: "flex",
flexDirection: "column",
gap: 8,
}}
>
<i style={{ opacity: 0.5 }}>Thank you for using cors.sh 🙏</i>
{/* <UnderlineButton>Move to dashboard</UnderlineButton>
<UnderlineButton>I need help</UnderlineButton> */}
</div>
</>
</FormPageLayout>
</>
);
}
function CodeExamples({ target, apikey }: { target: string; apikey: string }) {
return (
<CodeBlock language="js">{examples.simplest(target, apikey)}</CodeBlock>
);
}
function MoreCodeExamples({
target,
apikey,
}: {
target: string;
apikey: string;
}) {
return <CodeBlock language="js">{examples.axios(target, apikey)}</CodeBlock>;
}
const CodeBlock = styled(SyntaxHighlighter)`
max-height: 240px;
font-size: 12px !important;
`;
// <CodeBlock>
// <pre>
// GET https://proxy.corsh.sh/https://instragram.com/posts/123
// <br />
// -h x-cors-api-key {apikey}
// </pre>
// </CodeBlock>
// const CodeBlock = styled.code`
// background: black;
// color: white;
// border-radius: 4px;
// padding: 20px;
// display: block;
// font-size: 12px;
// line-height: 1.5;
// font-family: monospace;
// overflow: scroll;
// pre {
// margin: 0;
// }
// `;
function VideoDemo() {
return (
<div className="video-demo">
<video
style={{
borderRadius: "4px",
overflow: "hidden",
}}
autoPlay
loop
muted
playsInline
width="100%"
height="100%"
>
<source
src="/console/demo-of-initial-api-key-configuration.mp4"
type="video/mp4"
/>
</video>
</div>
);
}
export async function getServerSideProps(context: any) {
const { app, checkout_session_id } = context.query;
if (!app) {
return {
redirect: {
destination: "/console",
permanent: false,
},
};
}
try {
const client = new Client({
"x-cors-service-checkout-session-id": checkout_session_id,
});
const application = await client.getApplication(app);
return {
props: {
application,
},
};
} catch (e) {
console.error(e);
// 404
return {
notFound: true,
};
}
}
================================================
FILE: .archives/homepage/pages/onboarding/index.tsx
================================================
import React, { useEffect } from "react";
import {
Button,
FormFieldBase,
FormFieldLabel,
TextFormField,
} from "@editor-ui/console";
import Select from "react-select";
import client from "@cors.sh/service-api";
import { useRouter } from "next/router";
import { Cross2Icon } from "@radix-ui/react-icons";
import Head from "next/head";
import { FormPageLayout } from "@app/ui/layouts";
import { validateUrls } from "@app/ui/utils";
import { motion } from "framer-motion";
export default function NewApplicationPage() {
const router = useRouter();
const [step, setStep] = React.useState<"signin" | "setup">("signin");
function Body() {
switch (step) {
case "signin":
return (
<SigninForm
onComplete={() => {
setStep("setup");
}}
/>
);
case "setup":
return <SetupForm />;
}
}
return (
<>
<Head>
<title>CORS.SH - First App</title>
</Head>
<FormPageLayout>
<button
className="close"
onClick={() => {
router.replace("/");
}}
>
<Cross2Icon />
</button>
<Body />
</FormPageLayout>
</>
);
}
function SigninForm({ onComplete }: { onComplete: () => void }) {
const [tmpkey, setTmpkey] = React.useState("");
const [valid, setValid] = React.useState(false);
const onTypeKey = (key: string) => {
// todo: validate key via api
setValid(key.length > 10);
};
const onEnter = () => {
// this is required because onEnter can also be invoked from input's callback
if (valid) {
onComplete();
}
};
return (
<>
<h1>Enter your API key from your inbox to get started</h1>
<div className="form">
<TextFormField
label="API Key"
placeholder="text_xxxx-xxxx-xxxx"
onEnter={onEnter}
onChange={onTypeKey}
/>
</div>
<div style={{ height: 16 }} />
<Button disabled={!valid} onClick={onEnter} height={"32px"}>
Continue
</Button>
</>
);
}
function SetupForm() {
const router = useRouter();
const [name, setName] = React.useState("");
const [allowedOrigins, setAllowedOrigins] = React.useState("");
const [isBusy, setIsBusy] = React.useState(false);
const [isValid, setIsValid] = React.useState(false);
const [isPricingVisible, setIsPricingVisible] = React.useState(false);
const onEnter = () => {
if (!isValid) {
return;
}
setIsBusy(true);
client
.createApplication({
name: name,
allowedOrigins: allowedOrigins
.split(",")
.map((origin) => origin.trim()),
})
.then((r) => {
router.push({
pathname: "[id]",
query: { id: r.id },
});
})
.finally(() => {
setIsBusy(false);
});
};
useEffect(() => {
setIsValid(name.length > 0 && validateUrls(allowedOrigins));
}, [name, allowedOrigins]);
useEffect(() => {
if (isValid) {
setTimeout(() => {
setIsPricingVisible(true);
}, 1800);
}
}, [isValid]);
return (
<>
<h1>Now, Let's configure your first application</h1>
<div className="form">
<TextFormField
label="Application name"
placeholder="my-portfolio-website"
onEnter={onEnter}
onChange={setName}
/>
<TextFormField
label="Application origin URL"
placeholder="http://localhost:3000, https://my-site.com"
helpText="You can add up to 3 urls of your site"
onEnter={onEnter}
onChange={setAllowedOrigins}
/>
{/* pricing plan select */}
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={
isPricingVisible
? {
opacity: 1,
y: 0,
}
: {}
}
transition={{ duration: 0.3, ease: "easeOut" }}
>
<FormFieldBase style={{ width: "100%" }}>
<FormFieldLabel>Plan</FormFieldLabel>
<div style={{ flex: 1, alignSelf: "stretch" }}>
<Select
onKeyDown={(e) => {
if (e.key === "Enter") {
onEnter();
}
}}
options={[
{ value: "pro-monthly", label: "Pro - $4/Mo" },
{
value: "pro-yearly",
label: "Pro - $3/Mo (Pay annualy, save $12)",
},
]}
defaultValue={{ value: "pro", label: "Pro - $4/Mo" }}
/>
</div>
</FormFieldBase>
</motion.div>
<div style={{ height: 16 }} />
<Button disabled={!isValid || isBusy} onClick={onEnter} height={"32px"}>
Continue
</Button>
</div>
</>
);
}
================================================
FILE: .archives/homepage/pages/onboarding/payment-success-with-issue.tsx
================================================
import React from "react";
import client from "@cors.sh/service-api";
import { Button } from "@editor-ui/console";
import Head from "next/head";
export default function PaymentSuccessButThereWasAProblem({
error,
message,
session,
application,
}: {
error: "identity_conflict" | string;
message: string;
session: string;
application: {
id: string;
name: string;
};
}) {
return (
<>
<Head>
<title>CORS.SH - Problem with your subscription</title>
</Head>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100vh",
padding: 80,
textAlign: "center",
}}
>
<h1>There was a problem with your subscription - "{error}"</h1>
<div style={{ height: 40 }} />
<p>{message}</p>
<h5>Your Information</h5>
<p>Copy the data below when you contact customer support</p>
<div style={{ height: 40 }} />
<code>
<pre>session: {session}</pre>
<pre>
application: {application.id} ({application.name})
</pre>
</code>
<div style={{ height: 40 }} />
<a href={`mailto:hello@grida.co`}>
<Button>Contact Support</Button>
</a>
</div>
</>
);
}
export async function getServerSideProps(context: any) {
const { error, message, session_id, application_id, onboarding_id } =
context.query;
if (!session_id || !application_id || !onboarding_id) {
// invalid entry
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
try {
const application = await client.getOnboardingApplication(onboarding_id);
return {
props: {
error,
message,
session: session_id || null,
application,
},
};
} catch (e) {
// 404
return {
notFound: true,
};
}
}
================================================
FILE: .archives/homepage/pages/onboarding/payment-success.tsx
================================================
import React, { useEffect } from "react";
import client from "@cors.sh/service-api";
import { useRouter } from "next/router";
import Head from "next/head";
import { Button, TextFormField } from "@editor-ui/console";
import { FormPageLayout, PageCloseButton } from "@app/ui/layouts";
import { toast } from "react-hot-toast";
// page redirected from stripe once the payment is successful
export default function PaymentSuccessPage({
application,
session,
isOnboarding,
}: {
session: string;
isOnboarding: boolean;
application: {
id: string;
name: string;
allowedOrigins: string[];
};
}) {
const [isBusy, setBusy] = React.useState(false);
const router = useRouter();
useEffect(() => {
// GA4 conversion - Purchase
// @ts-ignore
window.gtag("event", "purchase", {
transaction_id: session,
value: 4,
currency: "USD",
//
});
}, []);
const onNext = () => {
setBusy(true);
// convert to application.
client
.convertApplication(application.id, session)
.then((d) => {
// move to complete
router.push({
pathname: "/onboarding/complete",
query: {
app: d.id,
checkout_session_id: session,
},
});
})
.catch((e) => {
toast.error("Something went wrong. Please try again later.");
})
.finally(() => {
setBusy(false);
});
};
return (
<>
<Head>
<title>CORS.SH - Complete</title>
</Head>
<FormPageLayout>
<PageCloseButton />
<>
<h1>Thank you for your subscription</h1>
<p className="description">
You can now create as many project you want without unlimited hourly
rate :)
<br />
<br />
<b>Let’s finish up your first project.</b>
</p>
<div className="form">
<TextFormField
label="Application name"
placeholder="my-portfolio-website"
value={application.name}
readonly
/>
<TextFormField
label="Application origin URL"
placeholder="http://localhost:3000, https://my-site.com"
readonly
value={application.allowedOrigins.join(", ")}
helpText="You can add up to 3 urls of your site"
/>
<div style={{ height: 16 }} />
<Button onClick={onNext} height={"32px"} disabled={isBusy}>
Continue
</Button>
</div>
</>
</FormPageLayout>
</>
);
}
export async function getServerSideProps(context: any) {
const { session_id, application_id, customer_id, onboarding_id } =
context.query;
if (!session_id) {
// invalid entry
return {
redirect: {
destination: "/",
permanent: false,
},
};
}
if (!onboarding_id) {
return {
redirect: {
destination: "/console",
permanent: false,
},
};
}
try {
const application = await client.getOnboardingApplication(onboarding_id);
return {
props: {
session: session_id || null,
application,
customer_id,
},
};
} catch (e) {
// 404
return {
notFound: true,
};
}
}
================================================
FILE: .archives/homepage/pages/too-many-requests.tsx
================================================
import React from "react";
import { PricingCardsList } from "../layouts/pricing-card-list";
import { StepLayout } from "../layouts/step-layout";
import * as k from "../k";
export default function TooMayRequestsPage() {
return (
<div>
<StepLayout
title="Oops. Too many requests."
description="We’re sorry to tell you that you’ve reached your hourly request limit for free-tier.
Upgrade your plan to remove this limit."
onNextClick={() => {}}
nextPromptLabel="Sign in with Grida and continue"
>
<PricingCardsList
enableIndividualActions={false}
// fallback to personal plan
initialSelection={k.PRICE_PERSONAL_PRO_MONTHLY}
onGetStartedClick={() => {}}
/>
</StepLayout>
</div>
);
}
================================================
FILE: .archives/homepage/public/robots.txt
================================================
# Block all crawlers for /console
User-agent: *
Disallow: /console
# Allow all crawlers
User-agent: *
Allow: /
================================================
FILE: .archives/homepage/styles/globals.css
================================================
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
================================================
FILE: .archives/homepage/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": "."
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
================================================
FILE: .github/ISSUE_TEMPLATE/apply-for-oss-program.yml
================================================
name: Apply for OSS Program
description: Apply your OSS Project for free pro-plan of cors.sh
title: "[Application] for my OSS Project"
labels: [application]
assignees: [softmarshmallow]
body:
- type: checkboxes
attributes:
label: You are applying for validated OSS program
description: Please ensure your project is open to public.
options:
- label: My project is OSS licensed and open to public. (Must have LICENSE file)
required: true
- label: My project has more than **10 ⭐️stars** on Github, which is the required for this program.
required: true
- type: textarea
attributes:
label: Repository URL to your project
description: Copy & paste url to your project repo
validations:
required: true
- type: textarea
attributes:
label: URL to your website
description: Please let us know the url to your website if you have one.
validations:
required: false
- type: textarea
attributes:
label: Expected Quota of usage
description: How much API calls do you expect to occur via your site?
validations:
required: true
- type: textarea
attributes:
label: Details
description: |
examples:
- **Category**: Blockchain
- **License**: MIT
- **Date of release**: 12/25/2023
value: |
- Category:
- License:
- Date of release:
render: markdown
validations:
required: false
- type: textarea
attributes:
label: Anything else?
description: |
Links? References? Anything that will give us more context about the project!
Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
validations:
required: false
- type: markdown
attributes:
value: |
Before you continue..
- I made my repo open to public
- My repo clearly states the license
- I will **star** cors.sh (this repo)
- I will follow Grida on Github
================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Desktop (please complete the following information):**
- OS: [e.g. iOS]
- Browser [e.g. chrome, safari]
- Version [e.g. 22]
**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
**Additional context**
Add any other context about the problem here.
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: ''
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
package-lock.json
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# .DS_Store
.DS_Store
================================================
FILE: .gitmodules
================================================
[submodule "packages/editor-ui"]
path = packages/editor-ui
url = https://github.com/reflect-ui/reflect-editor-ui
================================================
FILE: .nvmrc
================================================
v20.9.0
================================================
FILE: .vscode/settings.json
================================================
{
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true,
"**/node_modules": true
},
"search.exclude": {
"**/node_modules": true,
"**/.build": true,
"**/.lock": true,
"**/*.code-search": true
}
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2022 Grida
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# cors.sh
The only cors proxy service all you'll ever need.
| [Website](https://cors.sh) | [Proxy (proxy.cors.sh)](https://proxy.cors.sh) | [Playground](https://cors.sh/playground) | [Docs](https://cors.sh/docs) |
## Usage
**Quick testing**
Use [cors.sh/playground](https://cors.sh/playground) for testing out your cors blocked request.
**JS**
Add `proxy.cors.sh` to your request. For example,
```js
fetch("https://proxy.cors.sh/https://example.com/");
```
## [`cors.sh/playground`](https://cors.sh/playground), The testing environment (forked from hoppscotch)
- [cors.sh/playground](https://cors.sh/playground)
- [gridaco/playground.cors.sh](https://github.com/gridaco/playground.cors.sh)
- [hoppscotch/hoppscotch](https://github.com/hoppscotch/hoppscotch)
## Projects using CORS.SH
- https://github.com/IMGROOT2/algo
- https://github.com/alejandroch1202/dollar-monitor
- https://github.com/Iconem/search-satellite-imagery/
- https://github.com/PavelLaptev/JSON-to-Figma
- https://github.com/TomRadford/shootdrop
## Contributing
```bash
# clone initially
git clone --recurse-submodules https://github.com/gridaco/cors.sh
# updating submodules (once required)
git submodule update --init --recursive
```
## Disclaimer
1. This project's intend is to serve developers a reliable cors proxy service with fast response for their development.
Using a cors proxy service to connect to your own server is not a best practice.
We'll consistently optimize our service infra to keep the paid version affordable as possible.
2. The original code behind cors proxy is by Rob wu's cors-anywhere and the playground is forked from hoppscotch. both licensed under MIT, and our project cors.sh is also licensed under MIT License.
## TODOs
- Cost optimization - make it more cheap & provide free version to all.
- Management console - Enable usesrs to create projects as much as they want.
- OSS Application pipeline - Make OSS developers to get their api key right-on and get verified later.
================================================
FILE: branding/readme.md
================================================
# branding resources accross the site
- favicon.ico - for `/`, `/docs`, `/playground`
================================================
FILE: cli/bin.ts
================================================
import yargs from "yargs";
import { hideBin } from "yargs/helpers";
import { checkForUpdate } from "./update";
export default async function cli() {
await checkForUpdate();
yargs(hideBin(process.argv))
.option("cwd", {
type: "string",
default: process.cwd(),
requiresArg: false,
})
.option("dry-run", {
type: "boolean",
default: false,
requiresArg: false,
})
.global(["cwd", "dry-run"])
.command(
"init",
"init grida project",
() => {},
({ cwd }) => {
// init(cwd);
}
)
.demandCommand(1)
.parse();
}
================================================
FILE: cli/index.ts
================================================
#!/usr/bin/env node
import cli from "./bin";
process.on("SIGINT", () => {
process.exit(0); // now the "exit" event will fire
});
// if main
if (require.main === module) {
cli();
}
================================================
FILE: cli/jes.config.js
================================================
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
};
================================================
FILE: cli/package.json
================================================
{
"name": "@cors.sh/cli",
"version": "0.0.1",
"private": false,
"license": "Apache-2.0",
"description": "cors.sh cli",
"homepage": "https://cors.sh",
"repository": "https://github.com/gridaco/cors.sh",
"dependencies": {
"@base-sdk-fp/auth": "^0.1.4",
"boxen": "^7.0.0",
"dotenv": "^16.0.1",
"enquirer": "^2.3.6",
"keytar": "^7.9.0",
"node-fetch": "^3.2.10",
"node-machine-id": "^1.1.12",
"open": "^8.4.0",
"ora": "^5.4.0",
"yargs": "^17.2.1"
},
"scripts": {
"clean": "rimraf dist",
"dev": "ts-node index.ts",
"dev:watch": "ts-node-dev index.ts --watch",
"test": "jest",
"build": "ncc build index.ts -o dist -e keytar -e glob -e dotenv",
"prepack": "yarn test && yarn clean && yarn build"
},
"devDependencies": {
"@types/glob": "^7.2.0",
"@types/node": "^18.6.1",
"@types/semver": "^7.3.10",
"@types/which": "^2.0.1",
"@types/yargs": "^17.0.3",
"@vercel/ncc": "^0.34.0",
"jest": "^28.1.3",
"ts-jest": "^28.0.7",
"ts-node": "^10.9.1",
"ts-node-dev": "^2.0.0",
"typescript": "^4.7.4"
},
"bin": {
"cors": "./dist/index.js"
},
"files": [
"dist",
"README.md",
"LICENSE"
],
"publishConfig": {
"access": "public"
}
}
================================================
FILE: cli/readme.md
================================================
# cors.sh management cli
- cors list project
- cors new project
- cors edit project `<id>`
================================================
FILE: cli/tsconfig.json
================================================
{
"compilerOptions": {
"target": "ES2015",
"outDir": "dist",
"module": "CommonJS",
"strict": false,
"resolveJsonModule": true,
"esModuleInterop": true,
"moduleResolution": "node"
},
"exclude": ["dist", "node_modules", "**/*.spec.ts", "__test__"]
}
================================================
FILE: cli/update/index.ts
================================================
import { version, name } from "../version";
import boxen from "boxen";
import semver from "semver";
import fetch from "node-fetch";
import chalk from "chalk";
/**
*
*/
export async function checkForUpdate() {
// fetch latest version from npm
const { version: latestVersion } = (await (
await fetch(`https://registry.npmjs.org/${name}/latest`)
).json()) as { version: string };
// compare versions
if (semver.gt(latestVersion, version)) {
// show update message
console.log(makeUpdateMessage({ latest: latestVersion }));
}
}
function makeUpdateMessage({ latest }: { latest: string }): string {
return boxen(
`${name} ${chalk.green(`v${latest}`)} is now available!
Run \`${chalk.green(`npm i -g ${name}`)}\` to update.`,
{
padding: 1,
margin: 1,
borderStyle: "classic",
textAlignment: "center",
}
);
}
================================================
FILE: cli/version/index.ts
================================================
import { version, name } from "../package.json";
export { version, name };
================================================
FILE: design/readme.md
================================================
# cors.sh design
## Figma file
- https://www.figma.com/file/aPfdtNb1aGFIN9p05cmmVY/cors.sh
================================================
FILE: docs/.gitignore
================================================
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: docs/README.md
================================================
# Website
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
### Installation
```
$ yarn
```
### Local Development
```
$ yarn start
```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
### Build
```
$ yarn build
```
This command generates static content into the `build` directory and can be served using any static contents hosting service.
### Deployment
Using SSH:
```
$ USE_SSH=true yarn deploy
```
Not using SSH:
```
$ GIT_USER=<Your GitHub username> yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
================================================
FILE: docs/babel.config.js
================================================
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
================================================
FILE: docs/blog/2019-05-28-first-blog-post.md
================================================
---
slug: first-blog-post
title: First Blog Post
authors:
name: Gao Wei
title: Docusaurus Core Team
url: https://github.com/wgao19
image_url: https://github.com/wgao19.png
tags: [hola, docusaurus]
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
================================================
FILE: docs/blog/2019-05-29-long-blog-post.md
================================================
---
slug: long-blog-post
title: Long Blog Post
authors: endi
tags: [hello, docusaurus]
---
This is the summary of a very long blog post,
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
<!--truncate-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
================================================
FILE: docs/blog/2021-08-01-mdx-blog-post.mdx
================================================
---
slug: mdx-blog-post
title: MDX Blog Post
authors: [slorber]
tags: [docusaurus]
---
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
:::tip
Use the power of React to create interactive blog posts.
```js
<button onClick={() => alert('button clicked!')}>Click me!</button>
```
<button onClick={() => alert('button clicked!')}>Click me!</button>
:::
================================================
FILE: docs/blog/2021-08-26-welcome/index.md
================================================
---
slug: welcome
title: Welcome
authors: [slorber, yangshun]
tags: [facebook, hello, docusaurus]
---
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
Simply add Markdown files (or folders) to the `blog` directory.
Regular blog authors can be added to `authors.yml`.
The blog post date can be extracted from filenames, such as:
- `2019-05-30-welcome.md`
- `2019-05-30-welcome/index.md`
A blog post folder can be convenient to co-locate blog post images:
The blog supports tags as well!
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
================================================
FILE: docs/blog/authors.yml
================================================
endi:
name: Endilie Yacop Sucipto
title: Maintainer of Docusaurus
url: https://github.com/endiliey
image_url: https://github.com/endiliey.png
yangshun:
name: Yangshun Tay
title: Front End Engineer @ Facebook
url: https://github.com/yangshun
image_url: https://github.com/yangshun.png
slorber:
name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
================================================
FILE: docs/docs/guides/_category_.json
================================================
{
"label": "Guides",
"position": 4,
"link": {
"type": "generated-index",
"description": "Popular use cases of cors proxy"
}
}
================================================
FILE: docs/docs/guides/api-instagram/index.md
================================================
---
sidebar_position: 9
---
# For instagram api
================================================
FILE: docs/docs/guides/api-tiktok/index.md
================================================
---
sidebar_position: 9
---
# For tiktok api
================================================
FILE: docs/docs/guides/figma-plugin/index.md
================================================
---
title: For Figma plugin
sidebar_position: 1
---
# CORS Proxy for developing your figma plugin
## Examples
Figma Assistant by Grida
We've initially made cors.sh for use of our own. The assistant uses cors.sh for requesting to our server.
================================================
FILE: docs/docs/guides/shopify-app/index.md
================================================
---
title: For Shopify app
sidebar_position: 2
---
# CORS Proxy for developing your shopify app
Shopify app
================================================
FILE: docs/docs/intro.md
================================================
---
sidebar_position: 1
---
# Tutorial Intro
Let's discover **Docusaurus in less than 5 minutes**.
## Getting Started
Get started by **creating a new site**.
Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
### What you'll need
- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.
## Generate a new site
Generate a new Docusaurus site using the **classic template**.
The classic template will automatically be added to your project after you run the command:
```bash
npm init docusaurus@latest my-website classic
```
You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
The command also installs all necessary dependencies you need to run Docusaurus.
## Start your site
Run the development server:
```bash
cd my-website
npm run start
```
The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
================================================
FILE: docs/docs/migrate-from-cors.bridged.cc.md
================================================
# Migrate from cors.bridged.cc
If you are a `cors.bridged.cc` user, you will have api key in shape like this `xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx`
You can use the same api key for `cors.sh`, but this will no longer work from October 30, 2022.
To migrate, create new app from cors.sh console and replace the api key from your web app project.
**ACTION REQUIRED:**
- register new app on cors.sh
- replace the existing api key in your web project issued from cors.sh on previous step
- replace `cors.bridged.cc` to `api.cors.sh`
For example with cURL,
Previous
```curl
GET https://cors.bridged.cc/https://google.com
-H 'cors-api-key: xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
```
To..
```curl
GET https://api.cors.sh/https://google.com
-H 'cors-api-key: live_xxxx-xxxx-xxxx-xxxx'
```
================================================
FILE: docs/docs/tutorial-basics/_category_.json
================================================
{
"label": "Tutorial - Basics",
"position": 2,
"link": {
"type": "generated-index",
"description": "5 minutes to learn the most important Docusaurus concepts."
}
}
================================================
FILE: docs/docs/tutorial-basics/congratulations.md
================================================
---
sidebar_position: 6
---
# Congratulations!
You have just learned the **basics of Docusaurus** and made some changes to the **initial template**.
Docusaurus has **much more to offer**!
Have **5 more minutes**? Take a look at **[versioning](../tutorial-extras/manage-docs-versions.md)** and **[i18n](../tutorial-extras/translate-your-site.md)**.
Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610)
## What's next?
- Read the [official documentation](https://docusaurus.io/).
- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout)
- Add a [search bar](https://docusaurus.io/docs/search)
- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase)
- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support)
================================================
FILE: docs/docs/tutorial-basics/create-a-blog-post.md
================================================
---
sidebar_position: 3
---
# Create a Blog Post
Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed...
## Create your first Post
Create a file at `blog/2021-02-28-greetings.md`:
```md title="blog/2021-02-28-greetings.md"
---
slug: greetings
title: Greetings!
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
- name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [greetings]
---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much you like.
```
A new blog post is now available at [http://localhost:3000/blog/greetings](http://localhost:3000/blog/greetings).
================================================
FILE: docs/docs/tutorial-basics/create-a-document.md
================================================
---
sidebar_position: 2
---
# Create a Document
Documents are **groups of pages** connected through:
- a **sidebar**
- **previous/next navigation**
- **versioning**
## Create your first Doc
Create a Markdown file at `docs/hello.md`:
```md title="docs/hello.md"
# Hello
This is my **first Docusaurus document**!
```
A new document is now available at [http://localhost:3000/docs/hello](http://localhost:3000/docs/hello).
## Configure the Sidebar
Docusaurus automatically **creates a sidebar** from the `docs` folder.
Add metadata to customize the sidebar label and position:
```md title="docs/hello.md" {1-4}
---
sidebar_label: 'Hi!'
sidebar_position: 3
---
# Hello
This is my **first Docusaurus document**!
```
It is also possible to create your sidebar explicitly in `sidebars.js`:
```js title="sidebars.js"
module.exports = {
tutorialSidebar: [
{
type: 'category',
label: 'Tutorial',
// highlight-next-line
items: ['hello'],
},
],
};
```
================================================
FILE: docs/docs/tutorial-basics/create-a-page.md
================================================
---
sidebar_position: 1
---
# Create a Page
Add **Markdown or React** files to `src/pages` to create a **standalone page**:
- `src/pages/index.js` → `localhost:3000/`
- `src/pages/foo.md` → `localhost:3000/foo`
- `src/pages/foo/bar.js` → `localhost:3000/foo/bar`
## Create your first React Page
Create a file at `src/pages/my-react-page.js`:
```jsx title="src/pages/my-react-page.js"
import React from 'react';
import Layout from '@theme/Layout';
export default function MyReactPage() {
return (
<Layout>
<h1>My React page</h1>
<p>This is a React page</p>
</Layout>
);
}
```
A new page is now available at [http://localhost:3000/my-react-page](http://localhost:3000/my-react-page).
## Create your first Markdown Page
Create a file at `src/pages/my-markdown-page.md`:
```mdx title="src/pages/my-markdown-page.md"
# My Markdown page
This is a Markdown page
```
A new page is now available at [http://localhost:3000/my-markdown-page](http://localhost:3000/my-markdown-page).
================================================
FILE: docs/docs/tutorial-basics/deploy-your-site.md
================================================
---
sidebar_position: 5
---
# Deploy your site
Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**).
It builds your site as simple **static HTML, JavaScript and CSS files**.
## Build your site
Build your site **for production**:
```bash
npm run build
```
The static files are generated in the `build` folder.
## Deploy your site
Test your production build locally:
```bash
npm run serve
```
The `build` folder is now served at [http://localhost:3000/](http://localhost:3000/).
You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**).
================================================
FILE: docs/docs/tutorial-basics/markdown-features.mdx
================================================
---
sidebar_position: 4
---
# Markdown Features
Docusaurus supports **[Markdown](https://daringfireball.net/projects/markdown/syntax)** and a few **additional features**.
## Front Matter
Markdown documents have metadata at the top called [Front Matter](https://jekyllrb.com/docs/front-matter/):
```text title="my-doc.md"
// highlight-start
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---
// highlight-end
## Markdown heading
Markdown text with [links](./hello.md)
```
## Links
Regular Markdown links are supported, using url paths or relative file paths.
```md
Let's see how to [Create a page](/create-a-page).
```
```md
Let's see how to [Create a page](./create-a-page.md).
```
**Result:** Let's see how to [Create a page](./create-a-page.md).
## Images
Regular Markdown images are supported.
You can use absolute paths to reference images in the static directory (`static/img/docusaurus.png`):
```md
```
You can reference images relative to the current file as well, as shown in [the extra guides](../tutorial-extras/manage-docs-versions.md).
## Code Blocks
Markdown code blocks are supported with Syntax highlighting.
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return (
<h1>Hello, Docusaurus!</h1>
)
}
```
```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
return <h1>Hello, Docusaurus!</h1>;
}
```
## Admonitions
Docusaurus has a special syntax to create admonitions and callouts:
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::
## MDX and React Components
[MDX](https://mdxjs.com/) can make your documentation more **interactive** and allows using any **React components inside Markdown**:
```jsx
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`)
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
```
export const Highlight = ({children, color}) => (
<span
style={{
backgroundColor: color,
borderRadius: '20px',
color: '#fff',
padding: '10px',
cursor: 'pointer',
}}
onClick={() => {
alert(`You clicked the color ${color} with label ${children}`);
}}>
{children}
</span>
);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !
================================================
FILE: docs/docs/tutorial-extras/_category_.json
================================================
{
"label": "Tutorial - Extras",
"position": 3,
"link": {
"type": "generated-index"
}
}
================================================
FILE: docs/docs/tutorial-extras/manage-docs-versions.md
================================================
---
sidebar_position: 1
---
# Manage Docs Versions
Docusaurus can manage multiple versions of your docs.
## Create a docs version
Release a version 1.0 of your project:
```bash
npm run docusaurus docs:version 1.0
```
The `docs` folder is copied into `versioned_docs/version-1.0` and `versions.json` is created.
Your docs now have 2 versions:
- `1.0` at `http://localhost:3000/docs/` for the version 1.0 docs
- `current` at `http://localhost:3000/docs/next/` for the **upcoming, unreleased docs**
## Add a Version Dropdown
To navigate seamlessly across versions, add a version dropdown.
Modify the `docusaurus.config.js` file:
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
navbar: {
items: [
// highlight-start
{
type: 'docsVersionDropdown',
},
// highlight-end
],
},
},
};
```
The docs version dropdown appears in your navbar:
## Update an existing version
It is possible to edit versioned docs in their respective folder:
- `versioned_docs/version-1.0/hello.md` updates `http://localhost:3000/docs/hello`
- `docs/hello.md` updates `http://localhost:3000/docs/next/hello`
================================================
FILE: docs/docs/tutorial-extras/translate-your-site.md
================================================
---
sidebar_position: 2
---
# Translate your site
Let's translate `docs/intro.md` to French.
## Configure i18n
Modify `docusaurus.config.js` to add support for the `fr` locale:
```js title="docusaurus.config.js"
module.exports = {
i18n: {
defaultLocale: 'en',
locales: ['en', 'fr'],
},
};
```
## Translate a doc
Copy the `docs/intro.md` file to the `i18n/fr` folder:
```bash
mkdir -p i18n/fr/docusaurus-plugin-content-docs/current/
cp docs/intro.md i18n/fr/docusaurus-plugin-content-docs/current/intro.md
```
Translate `i18n/fr/docusaurus-plugin-content-docs/current/intro.md` in French.
## Start your localized site
Start your site on the French locale:
```bash
npm run start -- --locale fr
```
Your localized site is accessible at [http://localhost:3000/fr/](http://localhost:3000/fr/) and the `Getting Started` page is translated.
:::caution
In development, you can only use one locale at a same time.
:::
## Add a Locale Dropdown
To navigate seamlessly across languages, add a locale dropdown.
Modify the `docusaurus.config.js` file:
```js title="docusaurus.config.js"
module.exports = {
themeConfig: {
navbar: {
items: [
// highlight-start
{
type: 'localeDropdown',
},
// highlight-end
],
},
},
};
```
The locale dropdown now appears in your navbar:
## Build your localized site
Build your site for a specific locale:
```bash
npm run build -- --locale fr
```
Or build your site to include all the locales at once:
```bash
npm run build
```
================================================
FILE: docs/docs/what-is-cors.md
================================================
---
title: What is CORS?
---
# What is `CORS` ?
`CORS` Cross-Origin Resource Sharing
## Do I need a cors proxy?
In short,
- **NO:** For your own backend
- **YES:** If..
- Your front end is a plugin that runs on top of other sites. (e.g. shopify, figma plugin)
- You are accessign third party api (e.g. instagram, twitter) and the api server responds with limited CORS headers.
## Okay, it seems I don't need cors proxy service, What can I do?
If you're application is a general web app and you have control over the backend, here are some quick guides for each backend frameworks.
- Express
- Koa
- Hapi
- Fastify
- NestJS
- AWS Lambda
================================================
FILE: docs/docusaurus.config.js
================================================
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require("prism-react-renderer/themes/github");
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
/** @type {import('@docusaurus/types').Config} */
const config = {
title: "cors.sh",
tagline: "Get started with CORS.SH",
url: "https://docs.cors.sh",
// @ts-ignore
baseUrl: process.env.BASE_URL,
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "warn",
favicon: "img/favicon.ico",
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: "gridaco", // Usually your GitHub org/user name.
projectName: "cors.sh", // Usually your repo name.
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: "en",
locales: ["en"],
},
presets: [
[
"classic",
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
breadcrumbs: false,
routeBasePath: "/",
path: "docs",
sidebarPath: require.resolve("./sidebars.js"),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl: "https://github.com/gridaco/cors.sh/tree/main/docs/",
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
},
// tracking
googleAnalytics: {
trackingID: "G-XG051N1VS3",
},
theme: {
customCss: require.resolve("./src/css/custom.css"),
},
}),
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
logo: {
alt: "CORS.SH By Grida",
src: "img/logo.svg",
width: 100,
href: "https://cors.sh/",
},
items: [
{
type: "doc",
docId: "intro",
position: "left",
label: "Tutorial",
},
{ to: "/blog", label: "Blog", position: "left" },
{
href: "https://github.com/facebook/docusaurus",
label: "GitHub",
position: "right",
},
],
},
footer: {
style: "light",
links: [
{
title: "Docs",
items: [
{
label: "Tutorial",
to: "/docs/intro",
},
],
},
{
title: "Community",
items: [
{
label: "Slack Channel",
href: "https://grida.co/join-slack",
},
{
label: "Twitter",
href: "https://twitter.com/grida_co",
},
],
},
{
title: "More",
items: [
{
label: "Blog",
to: "/blog",
},
{
label: "GitHub",
href: "https://github.com/gridaco/cors.sh",
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Grida, Inc. Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;
================================================
FILE: docs/package.json
================================================
{
"name": "docs",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids"
},
"dependencies": {
"@docusaurus/core": "2.0.1",
"@docusaurus/preset-classic": "2.0.1",
"@mdx-js/react": "^1.6.22",
"clsx": "^1.2.1",
"prism-react-renderer": "^1.3.5",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "2.0.1"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"engines": {
"node": ">=16.14"
}
}
================================================
FILE: docs/sidebars.js
================================================
/**
* Creating a sidebar enables you to:
- create an ordered group of docs
- render a sidebar for each doc of that group
- provide next/previous navigation
The sidebars can be generated from the filesystem, or explicitly defined here.
Create as many sidebars as you want.
*/
// @ts-check
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
// By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
// But you can create a sidebar manually
/*
tutorialSidebar: [
{
type: 'category',
label: 'Tutorial',
items: ['hello'],
},
],
*/
};
module.exports = sidebars;
================================================
FILE: docs/src/css/custom.css
================================================
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
================================================
FILE: docs/static/.nojekyll
================================================
================================================
FILE: docs/static/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="refresh"
content="0; url=docs/id-of-doc-to-land-on.html"
/>
<script type="text/javascript">
window.location.href = "docs/id-of-doc-to-land-on.html";
</script>
<title>Your Site Title Here</title>
</head>
<body>
If you are not redirected automatically, follow this
<a href="docs/id-of-doc-to-land-on.html">link</a>.
</body>
</html>
================================================
FILE: examples/a-simple-demo/index.html
================================================
================================================
FILE: examples/a-simple-demo/index.js
================================================
================================================
FILE: examples/readme.md
================================================
# Examples directory
================================================
FILE: package.json
================================================
{
"name": "cors.sh",
"version": "0.0.0",
"description": "The only cors proxy service all you'll ever need.",
"repository": "https://github.com/gridaco/cors.sh.git",
"authors": [
"Rob-W",
"hoppscotch",
"softmarshmallow"
],
"license": "MIT",
"private": true,
"workspaces": [
"web",
"homepage",
"console",
"packages/*",
"packages/editor-ui/packages/*"
],
"scripts": {
"homepage": "yarn workspace homepage run dev"
},
"resolutions": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0"
}
}
================================================
FILE: packages/api/index.ts
================================================
import Axios, { AxiosInstance, AxiosError } from "axios";
const HOST =
process.env.NODE_ENV === "production"
? "https://services.cors.sh"
: "http://localhost:4021";
export class Client {
private _client: AxiosInstance;
constructor(credentials: { "x-cors-service-checkout-session-id"?: string }) {
this._client = Axios.create({
baseURL: HOST,
headers: {
...credentials,
},
});
}
async onboardingWithEmail({ email }: { email: string }) {
try {
return (
await this._client.post<OnboardingApplication>(
"/onboarding/with-email",
{ email }
)
).data;
} catch (e) {
if (e instanceof AxiosError) {
switch (e.response?.status) {
case 409:
throw new AlreadySignedUp();
case 429:
throw new OnboardingApiKeyAlreadyRequested();
}
}
}
}
async onboardingWithForm({
name,
allowedOrigins = [],
priceId,
}: {
name?: string;
allowedOrigins?: string[];
priceId?: string;
}) {
return (
await this._client.post<OnboardingApplication>("/onboarding/with-form", {
name: name,
allowedOrigins: allowedOrigins,
priceId: priceId,
})
).data;
}
async getOnboardingApplication(id: string) {
return (await this._client.get<OnboardingApplication>(`/onboarding/${id}`))
.data;
}
async convertApplication(onboarding_id: string, checkout_session_id: string) {
return (
await this._client.post<ApplicationWithApiKey>(
`/onboarding/${onboarding_id}/convert`,
{
checkout_session_id,
}
)
).data;
}
async createApplication(
payload: CreateApplicationRequest
): Promise<CreateAplicationResponse> {
const { data } = await this._client.post<CreateAplicationResponse>(
"/applications",
payload
);
return data;
}
async getApplication(id: string): Promise<ApplicationDetail> {
return (await this._client.get<ApplicationDetail>(`/applications/${id}`))
.data;
}
async listApplications(): Promise<Application[]> {
return (await this._client.get<Application[]>("/applications")).data;
}
async deleteApplication(id: string) {
await this._client.delete(`/applications/${id}`);
}
async updateApplication(id: string, payload: UpdateApplicationRequest) {
await this._client.put(`/applications/${id}`, payload);
}
}
/**
* client that is used for signing in the user.
*/
const _auth_client = Axios.create({
baseURL: HOST,
withCredentials: false,
});
/**
* sign-in to cors.sh service. the authentication flow is..
*
* 1. user sign-in to grida.co (with first pary proxy authentication)
* 2. user calles this function with the token.
* 3. services.cors.sh will set the secure http only cookie.
* 4. use the _signed_client to make future requests.
* @returns
*/
export async function signin({ grida_token }: { grida_token: string }) {
try {
return await _auth_client.post("/auth/signin", {
headers: {
"Proxy-Authorization": `Bearer ${grida_token}`,
},
});
} catch (e) {
return false;
}
}
export class AlreadySignedUp extends Error {
constructor() {
super("already signed up");
}
}
export class OnboardingApiKeyAlreadyRequested extends Error {
constructor() {
super("onboarding api key already requested");
}
}
export interface CreateApplicationRequest {
name: string;
allowedOrigins: string[];
}
export interface Application {
name: string;
id: string;
allowedOrigins: string[];
}
export interface OnboardingApplication {
id: string;
email: string;
name?: string;
allowedOrigins: string[];
priceId?: string;
}
export type ApplicationWithApiKey = Application & {
apikey_test: string;
apikey_live: string;
};
export type ApplicationDetail = ApplicationWithApiKey;
export type CreateA
gitextract_ynffi0i6/
├── .archives/
│ ├── console/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── babel.config.js
│ │ ├── logo/
│ │ │ └── index.tsx
│ │ ├── next-env.d.ts
│ │ ├── next.config.js
│ │ ├── package.json
│ │ ├── pages/
│ │ │ ├── [id].tsx
│ │ │ ├── _app.tsx
│ │ │ ├── index.tsx
│ │ │ └── new.tsx
│ │ ├── styles/
│ │ │ ├── Home.module.css
│ │ │ └── globals.css
│ │ └── tsconfig.json
│ └── homepage/
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── components/
│ │ ├── appbar/
│ │ │ ├── appbar-parent-site.tsx
│ │ │ ├── appbar.tsx
│ │ │ └── index.ts
│ │ ├── button/
│ │ │ └── index.tsx
│ │ ├── chatwood/
│ │ │ └── index.jsx
│ │ ├── collabsible-info-card/
│ │ │ └── index.tsx
│ │ ├── cta-footer/
│ │ │ └── index.tsx
│ │ ├── cta-onboarding/
│ │ │ └── index.tsx
│ │ ├── cta-test-it/
│ │ │ └── index.tsx
│ │ ├── demo-terminal/
│ │ │ └── index.tsx
│ │ ├── icons/
│ │ │ └── check-filled.tsx
│ │ ├── index.ts
│ │ ├── logo/
│ │ │ └── index.tsx
│ │ └── pricing/
│ │ ├── card.tsx
│ │ ├── free-for-opensource.tsx
│ │ └── index.ts
│ ├── grida/
│ │ ├── .gitkeep
│ │ ├── AppbarGroup.tsx
│ │ ├── SectionCtaLast.tsx
│ │ ├── SectionDisclaimer.tsx
│ │ ├── SectionHero.tsx
│ │ ├── SectionPricing.tsx
│ │ └── SectionUsage.tsx
│ ├── grida.config.js
│ ├── k/
│ │ ├── examples.ts
│ │ ├── external-links.ts
│ │ ├── host.ts
│ │ ├── index.ts
│ │ └── price.ts
│ ├── layouts/
│ │ ├── payment-required-page.tsx
│ │ ├── pricing-card-list.tsx
│ │ └── step-layout.tsx
│ ├── next-env.d.ts
│ ├── next.config.js
│ ├── package.json
│ ├── pages/
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ ├── disclaimer.tsx
│ │ ├── get-started/
│ │ │ └── index.tsx
│ │ ├── index.tsx
│ │ ├── oauth/
│ │ │ └── callback.tsx
│ │ ├── onboarding/
│ │ │ ├── [id].tsx
│ │ │ ├── complete.tsx
│ │ │ ├── index.tsx
│ │ │ ├── payment-success-with-issue.tsx
│ │ │ └── payment-success.tsx
│ │ └── too-many-requests.tsx
│ ├── public/
│ │ └── robots.txt
│ ├── styles/
│ │ └── globals.css
│ └── tsconfig.json
├── .github/
│ └── ISSUE_TEMPLATE/
│ ├── apply-for-oss-program.yml
│ ├── bug_report.md
│ └── feature_request.md
├── .gitignore
├── .gitmodules
├── .nvmrc
├── .vscode/
│ └── settings.json
├── LICENSE
├── README.md
├── branding/
│ └── readme.md
├── cli/
│ ├── bin.ts
│ ├── index.ts
│ ├── jes.config.js
│ ├── package.json
│ ├── readme.md
│ ├── tsconfig.json
│ ├── update/
│ │ └── index.ts
│ └── version/
│ └── index.ts
├── design/
│ └── readme.md
├── docs/
│ ├── .gitignore
│ ├── README.md
│ ├── babel.config.js
│ ├── blog/
│ │ ├── 2019-05-28-first-blog-post.md
│ │ ├── 2019-05-29-long-blog-post.md
│ │ ├── 2021-08-01-mdx-blog-post.mdx
│ │ ├── 2021-08-26-welcome/
│ │ │ └── index.md
│ │ └── authors.yml
│ ├── docs/
│ │ ├── guides/
│ │ │ ├── _category_.json
│ │ │ ├── api-instagram/
│ │ │ │ └── index.md
│ │ │ ├── api-tiktok/
│ │ │ │ └── index.md
│ │ │ ├── figma-plugin/
│ │ │ │ └── index.md
│ │ │ └── shopify-app/
│ │ │ └── index.md
│ │ ├── intro.md
│ │ ├── migrate-from-cors.bridged.cc.md
│ │ ├── tutorial-basics/
│ │ │ ├── _category_.json
│ │ │ ├── congratulations.md
│ │ │ ├── create-a-blog-post.md
│ │ │ ├── create-a-document.md
│ │ │ ├── create-a-page.md
│ │ │ ├── deploy-your-site.md
│ │ │ └── markdown-features.mdx
│ │ ├── tutorial-extras/
│ │ │ ├── _category_.json
│ │ │ ├── manage-docs-versions.md
│ │ │ └── translate-your-site.md
│ │ └── what-is-cors.md
│ ├── docusaurus.config.js
│ ├── package.json
│ ├── sidebars.js
│ ├── src/
│ │ └── css/
│ │ └── custom.css
│ └── static/
│ ├── .nojekyll
│ └── index.html
├── examples/
│ ├── a-simple-demo/
│ │ ├── index.html
│ │ └── index.js
│ └── readme.md
├── package.json
├── packages/
│ ├── api/
│ │ ├── index.ts
│ │ └── package.json
│ └── app-ui/
│ ├── components/
│ │ ├── api-key-reveal.tsx
│ │ ├── index.ts
│ │ └── underline-button.tsx
│ ├── layouts/
│ │ ├── form-page-latout.ts
│ │ ├── index.ts
│ │ └── page-close-button.tsx
│ ├── package.json
│ ├── tsconfig.json
│ └── utils/
│ └── index.ts
├── playground/
│ └── readme.md
├── services/
│ ├── auth.proxy.cors.sh/
│ │ ├── .gitignore
│ │ ├── deploy/
│ │ │ ├── prod.sh
│ │ │ └── staging.sh
│ │ ├── handler.ts
│ │ ├── package.json
│ │ ├── readme.md
│ │ └── serverless.yml
│ ├── lagacy/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── lib/
│ │ │ ├── cors.ts
│ │ │ └── utils.ts
│ │ ├── package.json
│ │ ├── serverless.yml
│ │ ├── src/
│ │ │ ├── _util/
│ │ │ │ └── size.ts
│ │ │ ├── app.ts
│ │ │ ├── auth/
│ │ │ │ ├── _tmp_static_api_keys/
│ │ │ │ │ ├── .gitignore
│ │ │ │ │ ├── README.md
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.ts
│ │ │ │ └── static-account-api-key-auth.ts
│ │ │ ├── index.ts
│ │ │ ├── limit/
│ │ │ │ ├── README.md
│ │ │ │ ├── blacklist-origin.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── payload-limit.ts
│ │ │ │ └── unknown-host-limit.ts
│ │ │ └── usage/
│ │ │ ├── README.md
│ │ │ ├── index.ts
│ │ │ └── model.ts
│ │ └── tsconfig.json
│ ├── mail.cors.sh/
│ │ ├── onboarding.mjml
│ │ ├── onboarding_with_payment_success.mjml
│ │ └── render/
│ │ ├── onboarding.subject
│ │ ├── onboarding.template.html
│ │ ├── onboarding_with_payment_success.subject
│ │ └── onboarding_with_payment_success.template.html
│ ├── proxy.cors.sh/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── contributing.md
│ │ ├── deploy/
│ │ │ ├── prod.sh
│ │ │ └── staging.sh
│ │ ├── docs/
│ │ │ └── README.md
│ │ ├── lib/
│ │ │ ├── cors.ts
│ │ │ └── utils.ts
│ │ ├── package.json
│ │ ├── serverless.yml
│ │ ├── src/
│ │ │ ├── _util/
│ │ │ │ ├── size.ts
│ │ │ │ └── x-header.ts
│ │ │ ├── app.ts
│ │ │ ├── auth/
│ │ │ │ ├── _tmp_static_api_keys/
│ │ │ │ │ ├── .gitignore
│ │ │ │ │ ├── README.md
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.ts
│ │ │ │ ├── keys-synced.ts
│ │ │ │ ├── keys-temp.ts
│ │ │ │ ├── keys.ts
│ │ │ │ └── legacy/
│ │ │ │ ├── index.ts
│ │ │ │ └── static-account-api-key-auth.ts
│ │ │ ├── index.ts
│ │ │ ├── k/
│ │ │ │ └── index.ts
│ │ │ ├── limit/
│ │ │ │ ├── README.md
│ │ │ │ ├── blacklist-origin.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── payload-limit.ts
│ │ │ │ └── rate-limit.ts
│ │ │ └── usage/
│ │ │ ├── README.md
│ │ │ ├── dynamo/
│ │ │ │ ├── log.ts
│ │ │ │ ├── model.ts
│ │ │ │ ├── readme.md
│ │ │ │ └── table.yml
│ │ │ ├── index.ts
│ │ │ └── type.ts
│ │ └── tsconfig.json
│ ├── readme.md
│ └── services.cors.sh/
│ ├── .gitignore
│ ├── app.ts
│ ├── auth/
│ │ ├── index.ts
│ │ ├── jwt.ts
│ │ ├── key.ts
│ │ ├── middleware.ts
│ │ └── readme.md
│ ├── clients/
│ │ ├── index.ts
│ │ ├── prisma.ts
│ │ ├── ses.ts
│ │ ├── slack.ts
│ │ └── stripe.ts
│ ├── controllers/
│ │ ├── _telemetry.ts
│ │ └── applications.ts
│ ├── deploy/
│ │ ├── dev.sh
│ │ ├── prod.sh
│ │ └── staging.sh
│ ├── index.ts
│ ├── jest.config.js
│ ├── keygen/
│ │ └── index.ts
│ ├── package.json
│ ├── prisma/
│ │ └── schema.prisma
│ ├── routes/
│ │ ├── applications/
│ │ │ └── index.ts
│ │ ├── auth/
│ │ │ └── index.ts
│ │ ├── index.ts
│ │ ├── onboarding/
│ │ │ └── index.ts
│ │ ├── payments/
│ │ │ ├── index.ts
│ │ │ └── readme.md
│ │ └── webhooks-stripe/
│ │ └── index.ts
│ ├── scripts/
│ │ └── aes-256-cbc-creds.js
│ ├── serverless.yml
│ ├── ses-email-templates/
│ │ └── index.js
│ ├── sync/
│ │ ├── index.ts
│ │ └── type.ts
│ ├── test/
│ │ ├── config.env.test
│ │ └── setup-tests.ts
│ ├── tsconfig.json
│ └── webpack.config.js
└── web/
├── .eslintrc.json
├── .gitignore
├── README.md
├── app/
│ ├── (console)/
│ │ ├── console/
│ │ │ ├── [id]/
│ │ │ │ └── page.tsx
│ │ │ ├── new/
│ │ │ │ └── page.tsx
│ │ │ └── page.tsx
│ │ └── layout.tsx
│ ├── (home)/
│ │ ├── contact/
│ │ │ └── page.tsx
│ │ ├── get-started/
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ ├── onboarding/
│ │ │ ├── [id]/
│ │ │ │ └── page.tsx
│ │ │ └── page.tsx
│ │ ├── page.tsx
│ │ ├── pricing/
│ │ │ └── page.tsx
│ │ └── too-many-requests/
│ │ └── page.tsx
│ └── globals.css
├── components/
│ ├── chatwoot/
│ │ └── index.jsx
│ ├── collapsible-info-card.tsx
│ ├── console/
│ │ └── application-list.tsx
│ ├── faq/
│ │ └── index.tsx
│ ├── free-for-opensource/
│ │ └── index.tsx
│ ├── ga.tsx
│ ├── header.tsx
│ ├── home-background.tsx
│ ├── home-hover-card.tsx
│ ├── landing/
│ │ └── send-me-an-api-key-form.tsx
│ ├── logo/
│ │ └── index.tsx
│ └── pricing/
│ ├── index.tsx
│ └── mini.tsx
├── k/
│ ├── examples.ts
│ ├── external-links.ts
│ ├── faq.json
│ ├── host.ts
│ ├── index.ts
│ ├── plans.json
│ ├── plans.test.json
│ └── plans.ts
├── layouts/
│ └── payment-required-page.tsx
├── motions/
│ └── electron/
│ └── index.tsx
├── next.config.js
├── package.json
├── pages/
│ └── onboarding/
│ ├── complete.tsx
│ ├── payment-success-with-issue.tsx
│ └── payment-success.tsx
├── postcss.config.js
├── public/
│ └── robots.txt
├── tailwind.config.ts
├── tsconfig.json
└── utils/
└── email-validation.ts
SYMBOL INDEX (265 symbols across 117 files)
FILE: .archives/console/logo/index.tsx
function Logo (line 3) | function Logo({
FILE: .archives/console/pages/[id].tsx
function ApplicationDetailPage (line 11) | function ApplicationDetailPage({
function EditableTitle (line 54) | function EditableTitle({ initialValue = "" }: { initialValue?: string }) {
function getServerSideProps (line 139) | async function getServerSideProps(context: any) {
FILE: .archives/console/pages/_app.tsx
function App (line 6) | function App({ Component, pageProps }: AppProps) {
FILE: .archives/console/pages/index.tsx
function ConsoleIndex (line 10) | function ConsoleIndex({
function ApplicationItem (line 56) | function ApplicationItem({
function getServerSideProps (line 99) | async function getServerSideProps(context: any) {
FILE: .archives/console/pages/new.tsx
function NewApplicationPage (line 6) | function NewApplicationPage() {
FILE: .archives/homepage/components/appbar/appbar-parent-site.tsx
function AppbarParentSite (line 40) | function AppbarParentSite() {
FILE: .archives/homepage/components/appbar/appbar.tsx
function Appbar (line 42) | function Appbar() {
FILE: .archives/homepage/components/button/index.tsx
type Props (line 4) | type Props = React.PropsWithRef<
function _Button (line 10) | function _Button({
FILE: .archives/homepage/components/chatwood/index.jsx
class ChatwootWidget (line 3) | class ChatwootWidget extends React.Component {
method componentDidMount (line 4) | componentDidMount() {
method render (line 30) | render() {
FILE: .archives/homepage/components/collabsible-info-card/index.tsx
function CollapsibleInfoCard (line 6) | function CollapsibleInfoCard({
FILE: .archives/homepage/components/cta-footer/index.tsx
function FooterCtaSection (line 5) | function FooterCtaSection({}: {}) {
FILE: .archives/homepage/components/cta-onboarding/index.tsx
function OnboardingCta (line 6) | function OnboardingCta() {
FILE: .archives/homepage/components/cta-test-it/index.tsx
type TMethod (line 7) | type TMethod = "GET" | "POST" | "PUT" | "DELETE";
function WarningIcon (line 9) | function WarningIcon() {
function TestItOutCta (line 51) | function TestItOutCta({
FILE: .archives/homepage/components/demo-terminal/index.tsx
function DemoTerminal (line 7) | function DemoTerminal({
FILE: .archives/homepage/components/icons/check-filled.tsx
function CheckFilled (line 3) | function CheckFilled({
FILE: .archives/homepage/components/logo/index.tsx
function Logo (line 5) | function Logo({ moveToHome = false }: { moveToHome?: boolean }) {
FILE: .archives/homepage/components/pricing/card.tsx
function PricingCard (line 40) | function PricingCard({
FILE: .archives/homepage/components/pricing/free-for-opensource.tsx
function FreeForOpenSource (line 14) | function FreeForOpenSource() {
FILE: .archives/homepage/grida/AppbarGroup.tsx
function AppbarGroup (line 40) | function AppbarGroup() {
FILE: .archives/homepage/grida/SectionCtaLast.tsx
function SectionCtaLast (line 39) | function SectionCtaLast() {
FILE: .archives/homepage/grida/SectionDisclaimer.tsx
function useSeoNotImportant (line 7) | function useSeoNotImportant() {
function SectionDisclaimer (line 56) | function SectionDisclaimer() {
FILE: .archives/homepage/grida/SectionHero.tsx
function TryPlayground (line 7) | function TryPlayground() {
function SectionHero (line 69) | function SectionHero() {
FILE: .archives/homepage/grida/SectionPricing.tsx
function SectionPricing (line 43) | function SectionPricing() {
FILE: .archives/homepage/grida/SectionUsage.tsx
function SectionUsage (line 43) | function SectionUsage() {
FILE: .archives/homepage/k/external-links.ts
constant LINK_APPLY_FOR_OSS_PLAN (line 1) | const LINK_APPLY_FOR_OSS_PLAN =
FILE: .archives/homepage/k/host.ts
constant HOST (line 1) | const HOST =
constant SERVER_URL (line 6) | const SERVER_URL =
FILE: .archives/homepage/k/price.ts
constant PRICE_PERSONAL_PRO_MONTHLY (line 18) | const PRICE_PERSONAL_PRO_MONTHLY =
constant PRICE_PERSONAL_PRO_YEARLY (line 23) | const PRICE_PERSONAL_PRO_YEARLY =
constant PRICE_ENTERPRISE_PRO_YEARLY (line 28) | const PRICE_ENTERPRISE_PRO_YEARLY =
constant PRICE_PAY_AS_YOU_GO (line 33) | const PRICE_PAY_AS_YOU_GO = "price_1LegsaAvR3geCh5rBCiuVmDt";
constant PRICE_FREE_MONTHLY (line 35) | const PRICE_FREE_MONTHLY = _PRICE_FREE;
type Price (line 37) | interface Price {
FILE: .archives/homepage/layouts/payment-required-page.tsx
function PaymentRequiredPage (line 2) | function PaymentRequiredPage() {
FILE: .archives/homepage/layouts/pricing-card-list.tsx
function PricingCardsList (line 4) | function PricingCardsList({
FILE: .archives/homepage/layouts/step-layout.tsx
type Props (line 7) | type Props = {
function StepLayout (line 15) | function StepLayout({
FILE: .archives/homepage/next.config.js
constant CONSOLE_URL (line 8) | const CONSOLE_URL = process.env.CONSOLE_URL;
method rewrites (line 13) | rewrites() {
method redirects (line 41) | redirects() {
FILE: .archives/homepage/pages/_app.tsx
function App (line 7) | function App({ Component, pageProps }: AppProps) {
function SeoMeta (line 38) | function SeoMeta() {
FILE: .archives/homepage/pages/_document.tsx
function _Document (line 3) | function _Document() {
FILE: .archives/homepage/pages/disclaimer.tsx
function DisclaimerPage (line 3) | function DisclaimerPage() {
FILE: .archives/homepage/pages/get-started/index.tsx
function GetstartedPage (line 16) | function GetstartedPage({ price: _price }: { price: string }) {
function getServerSideProps (line 221) | async function getServerSideProps(context: any) {
FILE: .archives/homepage/pages/index.tsx
function HomePage (line 11) | function HomePage() {
function ClientOnly (line 60) | function ClientOnly({ children, ...delegated }: React.PropsWithChildren) {
FILE: .archives/homepage/pages/oauth/callback.tsx
function OAuthCallbackPage (line 8) | function OAuthCallbackPage(props: any) {
function getServerSideProps (line 20) | async function getServerSideProps(context: any) {
FILE: .archives/homepage/pages/onboarding/[id].tsx
function ContinueOnboardingWithVerification (line 6) | function ContinueOnboardingWithVerification() {
function getServerSideProps (line 17) | async function getServerSideProps() {
FILE: .archives/homepage/pages/onboarding/complete.tsx
function InitialOnboardingFinalPage (line 12) | function InitialOnboardingFinalPage({
function CodeExamples (line 113) | function CodeExamples({ target, apikey }: { target: string; apikey: stri...
function MoreCodeExamples (line 119) | function MoreCodeExamples({
function VideoDemo (line 157) | function VideoDemo() {
function getServerSideProps (line 181) | async function getServerSideProps(context: any) {
FILE: .archives/homepage/pages/onboarding/index.tsx
function NewApplicationPage (line 17) | function NewApplicationPage() {
function SigninForm (line 56) | function SigninForm({ onComplete }: { onComplete: () => void }) {
function SetupForm (line 91) | function SetupForm() {
FILE: .archives/homepage/pages/onboarding/payment-success-with-issue.tsx
function PaymentSuccessButThereWasAProblem (line 6) | function PaymentSuccessButThereWasAProblem({
function getServerSideProps (line 60) | async function getServerSideProps(context: any) {
FILE: .archives/homepage/pages/onboarding/payment-success.tsx
function PaymentSuccessPage (line 10) | function PaymentSuccessPage({
function getServerSideProps (line 101) | async function getServerSideProps(context: any) {
FILE: .archives/homepage/pages/too-many-requests.tsx
function TooMayRequestsPage (line 5) | function TooMayRequestsPage() {
FILE: cli/bin.ts
function cli (line 5) | async function cli() {
FILE: cli/update/index.ts
function checkForUpdate (line 10) | async function checkForUpdate() {
function makeUpdateMessage (line 23) | function makeUpdateMessage({ latest }: { latest: string }): string {
FILE: packages/api/index.ts
constant HOST (line 3) | const HOST =
class Client (line 8) | class Client {
method constructor (line 10) | constructor(credentials: { "x-cors-service-checkout-session-id"?: stri...
method onboardingWithEmail (line 19) | async onboardingWithEmail({ email }: { email: string }) {
method onboardingWithForm (line 39) | async onboardingWithForm({
method getOnboardingApplication (line 57) | async getOnboardingApplication(id: string) {
method convertApplication (line 62) | async convertApplication(onboarding_id: string, checkout_session_id: s...
method createApplication (line 73) | async createApplication(
method getApplication (line 83) | async getApplication(id: string): Promise<ApplicationDetail> {
method listApplications (line 88) | async listApplications(): Promise<Application[]> {
method deleteApplication (line 92) | async deleteApplication(id: string) {
method updateApplication (line 96) | async updateApplication(id: string, payload: UpdateApplicationRequest) {
function signin (line 118) | async function signin({ grida_token }: { grida_token: string }) {
class AlreadySignedUp (line 130) | class AlreadySignedUp extends Error {
method constructor (line 131) | constructor() {
class OnboardingApiKeyAlreadyRequested (line 136) | class OnboardingApiKeyAlreadyRequested extends Error {
method constructor (line 137) | constructor() {
type CreateApplicationRequest (line 142) | interface CreateApplicationRequest {
type Application (line 147) | interface Application {
type OnboardingApplication (line 153) | interface OnboardingApplication {
type ApplicationWithApiKey (line 161) | type ApplicationWithApiKey = Application & {
type ApplicationDetail (line 166) | type ApplicationDetail = ApplicationWithApiKey;
type CreateAplicationResponse (line 168) | type CreateAplicationResponse = ApplicationWithApiKey;
type UpdateApplicationRequest (line 170) | type UpdateApplicationRequest = Application;
FILE: packages/app-ui/components/api-key-reveal.tsx
function ApiKeyReveal (line 7) | function ApiKeyReveal({
FILE: packages/app-ui/layouts/page-close-button.tsx
function PageCloseButton (line 5) | function PageCloseButton() {
FILE: services/auth.proxy.cors.sh/handler.ts
constant CORS_API_KEY_HEADER (line 6) | const CORS_API_KEY_HEADER = "x-cors-api-key";
FILE: services/lagacy/lib/cors.ts
type OptionParams (line 8) | interface OptionParams {
function proxyRequest (line 14) | function proxyRequest(req, res, proxy) {
function onProxyResponse (line 63) | function onProxyResponse(proxy, proxyReq, proxyRes, req, res) {
function getHandler (line 118) | function getHandler(options, proxy) {
FILE: services/lagacy/src/_util/size.ts
constant SEC (line 6) | const SEC = 1000;
FILE: services/lagacy/src/auth/static-account-api-key-auth.ts
constant STATIC_CORS_ACCOUNT_API_KEY_HEADER (line 6) | const STATIC_CORS_ACCOUNT_API_KEY_HEADER = "x-cors-grida-api-key";
function validate_api_key (line 36) | function validate_api_key(apikey: string) {
FILE: services/lagacy/src/limit/blacklist-origin.ts
function blacked (line 43) | function blacked(origin: string): boolean {
FILE: services/lagacy/src/limit/payload-limit.ts
constant MAX_TARGET_RESOURCE_MB (line 10) | const MAX_TARGET_RESOURCE_MB = 2;
FILE: services/lagacy/src/limit/unknown-host-limit.ts
function known (line 10) | function known(url: string): boolean {
function isIpAddress (line 27) | function isIpAddress(hostname: string): boolean {
type SingleProxyRequestLimitPolicy (line 31) | interface SingleProxyRequestLimitPolicy {
FILE: services/lagacy/src/usage/index.ts
function logRequest (line 27) | async function logRequest(req: express.Request, res: express.Response) {
function log (line 64) | async function log(request: CorsProxyApiRequest) {
FILE: services/lagacy/src/usage/model.ts
type AppId (line 4) | type AppId = string | "anonymous" | "official-demo";
type CorsProxyApiRequest (line 6) | interface CorsProxyApiRequest {
type CorsProxyApiRequestLog (line 45) | interface CorsProxyApiRequestLog extends CorsProxyApiRequest {
constant CORS_REQUEST_LOG_TABLE_NAME (line 105) | const CORS_REQUEST_LOG_TABLE_NAME = process.env
FILE: services/proxy.cors.sh/lib/cors.ts
type OptionParams (line 8) | interface OptionParams {
function proxyRequest (line 14) | function proxyRequest(req, res, proxy) {
function onProxyResponse (line 63) | function onProxyResponse(proxy, proxyReq, proxyRes, req, res) {
function getHandler (line 118) | function getHandler(options, proxy) {
FILE: services/proxy.cors.sh/src/_util/size.ts
constant SEC (line 6) | const SEC = 1000;
FILE: services/proxy.cors.sh/src/_util/x-header.ts
function headerfrom (line 3) | function headerfrom(
FILE: services/proxy.cors.sh/src/auth/index.ts
function parseApiKey (line 9) | function parseApiKey(req: express.Request): string | undefined | null {
function authorization (line 31) | async function authorization(
type AuthorizationInfo (line 169) | interface AuthorizationInfo {
function anynymous_request_identity (line 176) | function anynymous_request_identity(req: express.Request) {
FILE: services/proxy.cors.sh/src/auth/keys-synced.ts
constant TABLE (line 5) | const TABLE = process.env.DYNAMODB_TABLE_SERVICE_KEYS!;
function verify_synced_key (line 7) | async function verify_synced_key(key: string): Promise<
function find (line 31) | async function find(key: string): Promise<ServiceKeyInfo | null> {
type ServiceKeyInfo (line 48) | interface ServiceKeyInfo {
FILE: services/proxy.cors.sh/src/auth/keys-temp.ts
constant API_KEY_TEMP_AES_KEY (line 4) | const API_KEY_TEMP_AES_KEY: string = process.env.API_KEY_TEMP_AES_KEY!;
constant API_KEY_TEMP_AES_IV (line 5) | const API_KEY_TEMP_AES_IV: string = process.env.API_KEY_TEMP_AES_IV!;
constant TMP_KEY_EXP_IN_DAYS (line 8) | const TMP_KEY_EXP_IN_DAYS = 3;
function validate_tmp_key (line 10) | function validate_tmp_key(signature: string) {
FILE: services/proxy.cors.sh/src/auth/keys.ts
function keyinfo (line 1) | function keyinfo(key: string): {
FILE: services/proxy.cors.sh/src/auth/legacy/static-account-api-key-auth.ts
function validate_api_key (line 29) | function validate_api_key(apikey: string) {
FILE: services/proxy.cors.sh/src/k/index.ts
constant STATIC_CORS_ACCOUNT_API_KEY_HEADERS (line 4) | const STATIC_CORS_ACCOUNT_API_KEY_HEADERS = [
constant RATE_LIMIT_FREE_AUTHORIZED_PER_HOUR (line 9) | const RATE_LIMIT_FREE_AUTHORIZED_PER_HOUR = 500;
constant RATE_LIMIT_FREE_ANONYMOUS_PER_HOUR (line 10) | const RATE_LIMIT_FREE_ANONYMOUS_PER_HOUR = 100;
constant RATE_LIMIT_PAID_PER_MONTH_DEFAULT (line 11) | const RATE_LIMIT_PAID_PER_MONTH_DEFAULT = 500000;
constant RATE_LIMIT_PAID_PER_MONTH_T1 (line 12) | const RATE_LIMIT_PAID_PER_MONTH_T1 = 500000;
constant RATE_LIMIT_PAID_PER_MONTH_T2 (line 13) | const RATE_LIMIT_PAID_PER_MONTH_T2 = 2500000;
FILE: services/proxy.cors.sh/src/limit/blacklist-origin.ts
function blacked (line 43) | function blacked(origin: string): boolean {
FILE: services/proxy.cors.sh/src/limit/payload-limit.ts
constant MAX_TARGET_RESOURCE_MB (line 10) | const MAX_TARGET_RESOURCE_MB = 2;
FILE: services/proxy.cors.sh/src/limit/rate-limit.ts
constant IS_OFFLINE (line 15) | const IS_OFFLINE = process.env.IS_OFFLINE;
constant MONTH28MS (line 126) | const MONTH28MS = 60 * 1000 * 60 * 24 * 28;
FILE: services/proxy.cors.sh/src/usage/dynamo/log.ts
function log (line 19) | async function log(
FILE: services/proxy.cors.sh/src/usage/dynamo/model.ts
constant CORS_REQUEST_LOG_TABLE_NAME (line 52) | const CORS_REQUEST_LOG_TABLE_NAME = process.env
FILE: services/proxy.cors.sh/src/usage/index.ts
type Log (line 4) | type Log = Omit<CorsProxyApiRequestLog, "id">;
function logRequest (line 11) | async function logRequest(req: express.Request, res: express.Response) {
function systemlog (line 57) | function systemlog(request: Log) {
FILE: services/proxy.cors.sh/src/usage/type.ts
type AppId (line 1) | type AppId = string | "anonymous" | "official-demo";
type CorsProxyApiRequest (line 3) | interface CorsProxyApiRequest {
type CorsProxyApiRequestLog (line 42) | interface CorsProxyApiRequestLog extends CorsProxyApiRequest {
FILE: services/services.cors.sh/app.ts
function logErrors (line 7) | function logErrors(err, req, res, next) {
FILE: services/services.cors.sh/auth/jwt.ts
type ServiceUserSignature (line 5) | interface ServiceUserSignature {
function decode_jwt (line 11) | function decode_jwt(token: string): ServiceUserSignature {
function encode_jwt (line 15) | function encode_jwt(service_user_id: string): string {
function verify (line 24) | function verify(token: string) {
FILE: services/services.cors.sh/auth/key.ts
constant SECURE_BROWSER_COOKIE_AUTH_KEY (line 1) | const SECURE_BROWSER_COOKIE_AUTH_KEY = ".cors.sh/auth-token";
FILE: services/services.cors.sh/auth/middleware.ts
function authMiddleware (line 12) | async function authMiddleware(req: Request, res: Response, next) {
function checoutSessionAuthorizer (line 32) | async function checoutSessionAuthorizer(req: Request) {
function standardAuthorizer (line 59) | async function standardAuthorizer(req: Request): Promise<false | { custo...
FILE: services/services.cors.sh/clients/ses.ts
constant SENDER_EMAIL (line 3) | const SENDER_EMAIL = "no-reply@cors.sh";
type EmailBody_Raw (line 6) | interface EmailBody_Raw {
type EmailBody_Html (line 11) | interface EmailBody_Html {
type EmailContent (line 16) | type EmailContent = EmailBody_Raw | EmailBody_Html;
function emailWithTemplate (line 18) | function emailWithTemplate(to: string, template: string, data: object) {
function email (line 29) | async function email(
FILE: services/services.cors.sh/clients/slack.ts
function pretty_key (line 66) | function pretty_key(key: string) {
function slack (line 73) | function slack({ blocks }: { blocks: Array<object> }) {
FILE: services/services.cors.sh/controllers/_telemetry.ts
function logNewOnboardingProc (line 5) | async function logNewOnboardingProc(data: OnboardingApplications) {
function logNewApplication (line 18) | async function logNewApplication(data: Application) {
FILE: services/services.cors.sh/controllers/applications.ts
type CreateOnboardingApplicationBody (line 8) | type CreateOnboardingApplicationBody =
function createOnboardingApplication (line 20) | async function createOnboardingApplication(
function getOnboardingApplication (line 107) | async function getOnboardingApplication(id: string) {
function sendOnboardingEmail (line 123) | async function sendOnboardingEmail(
function signApplication (line 174) | async function signApplication(application: Application) {
function createApplication (line 188) | async function createApplication({
function convertApplication (line 236) | async function convertApplication({
FILE: services/services.cors.sh/keygen/index.ts
constant API_KEY_TEMP_AES_KEY (line 4) | const API_KEY_TEMP_AES_KEY = process.env.API_KEY_TEMP_AES_KEY;
constant API_KEY_TEMP_AES_IV (line 6) | const API_KEY_TEMP_AES_IV: string = process.env.API_KEY_TEMP_AES_IV!;
constant API_KEY_TEST_HASH_SECRET (line 9) | const API_KEY_TEST_HASH_SECRET = process.env.API_KEY_TEST_HASH_SECRET;
constant API_KEY_LIVE_HASH_SECRET (line 10) | const API_KEY_LIVE_HASH_SECRET = process.env.API_KEY_LIVE_HASH_SECRET;
constant API_KEY_HASH_SECRET_BY_TYPE (line 12) | const API_KEY_HASH_SECRET_BY_TYPE = {
type PermanentKey (line 17) | interface PermanentKey {
constant TMP_KEY_PREFIX (line 22) | const TMP_KEY_PREFIX = "temp";
constant TEST_KEY_PREFIX (line 23) | const TEST_KEY_PREFIX = "test";
constant LIVE_KEY_PREFIX (line 24) | const LIVE_KEY_PREFIX = "live";
constant TMP_KEY_EXP_IN_DAYS (line 25) | const TMP_KEY_EXP_IN_DAYS = 3;
function test_key (line 27) | function test_key(signature: string): PermanentKey {
function live_key (line 34) | function live_key(signature: string): PermanentKey {
function sign_temporary_key (line 41) | function sign_temporary_key() {
function sign (line 59) | function sign(signature: string, type: "test" | "live") {
function sign_test_key (line 68) | function sign_test_key(signature: string) {
function sign_live_key (line 76) | function sign_live_key(signature: string) {
function validate_jwt (line 87) | function validate_jwt(token: string) {
function prefix (line 99) | function prefix(type: "test" | "live" | "temp") {
function encrypt (line 110) | function encrypt(data: string | object, type: "test" | "live") {
FILE: services/services.cors.sh/routes/applications/index.ts
function msak (line 79) | function msak(
FILE: services/services.cors.sh/routes/payments/index.ts
constant WEBHOST (line 8) | const WEBHOST = process.env.WEBHOST;
constant WEBURL_CONSOLE (line 9) | const WEBURL_CONSOLE = WEBHOST + "/console";
constant PROTOCOL (line 10) | const PROTOCOL = process.env.NODE_ENV === "production" ? "https" : "http";
FILE: services/services.cors.sh/sync/index.ts
function sync (line 9) | async function sync(application: Application) {
function sync_record (line 36) | function sync_record(
function activate (line 69) | async function activate(id: string, active: boolean) {
FILE: services/services.cors.sh/sync/type.ts
type KeyInfo (line 2) | interface KeyInfo {
FILE: web/app/(console)/console/[id]/page.tsx
function ApplicationDetailPage (line 12) | function ApplicationDetailPage({ params }: {
function EditableTitle (line 64) | function EditableTitle({ initialValue = "" }: { initialValue?: string }) {
FILE: web/app/(console)/console/new/page.tsx
function NewApplicationPage (line 9) | function NewApplicationPage() {
FILE: web/app/(console)/console/page.tsx
function ConsoleIndex (line 13) | function ConsoleIndex() {
FILE: web/app/(console)/layout.tsx
function RootLayout (line 25) | function RootLayout({
function Sidebar (line 57) | function Sidebar() {
function NavItem (line 83) | function NavItem({ children, ...props }: React.PropsWithChildren<React.C...
function ContentArea (line 95) | function ContentArea({ children }: React.PropsWithChildren<{}>) {
FILE: web/app/(home)/contact/page.tsx
function ContactPage (line 4) | function ContactPage() {
FILE: web/app/(home)/get-started/page.tsx
function GetstartedPage (line 23) | function GetstartedPage() {
FILE: web/app/(home)/layout.tsx
function RootLayout (line 22) | function RootLayout({
FILE: web/app/(home)/onboarding/[id]/page.tsx
function ContinueOnboardingWithVerification (line 7) | function ContinueOnboardingWithVerification() {
FILE: web/app/(home)/onboarding/page.tsx
function NewApplicationPage (line 18) | function NewApplicationPage() {
function SigninForm (line 58) | function SigninForm({ onComplete }: { onComplete: () => void }) {
function SetupForm (line 93) | function SetupForm() {
FILE: web/app/(home)/page.tsx
function Home (line 6) | function Home() {
FILE: web/app/(home)/pricing/page.tsx
function Pricing (line 19) | function Pricing() {
FILE: web/app/(home)/too-many-requests/page.tsx
function TooMayRequestsPage (line 7) | function TooMayRequestsPage() {
FILE: web/components/chatwoot/index.jsx
class ChatwootWidget (line 4) | class ChatwootWidget extends React.Component {
method componentDidMount (line 5) | componentDidMount() {
method render (line 31) | render() {
FILE: web/components/collapsible-info-card.tsx
function CollapsibleInfoCard (line 6) | function CollapsibleInfoCard({
FILE: web/components/console/application-list.tsx
function ApplicationItem (line 15) | function ApplicationItem({
FILE: web/components/faq/index.tsx
function FaqItem (line 4) | function FaqItem({ q, a }: { q: string; a: string }) {
FILE: web/components/free-for-opensource/index.tsx
function FreeForOpensourceCard (line 9) | function FreeForOpensourceCard() {
FILE: web/components/header.tsx
function Header (line 7) | function Header() {
FILE: web/components/home-background.tsx
function HomeBackground (line 7) | function HomeBackground() {
function VignettingOverlay (line 36) | function VignettingOverlay({ w }: { w: number }) {
FILE: web/components/home-hover-card.tsx
function HomeCardExample (line 15) | function HomeCardExample() {
function HomeHoverCardV2 (line 68) | function HomeHoverCardV2() {
FILE: web/components/landing/send-me-an-api-key-form.tsx
function SendMeAnApiKeyForm (line 8) | function SendMeAnApiKeyForm() {
FILE: web/components/logo/index.tsx
function Logo (line 3) | function Logo({
FILE: web/components/pricing/index.tsx
function PricingCard (line 5) | function PricingCard({
FILE: web/components/pricing/mini.tsx
function MiniPlanSelect (line 2) | function MiniPlanSelect({
function MiniPriceCard (line 28) | function MiniPriceCard({
FILE: web/k/external-links.ts
constant LINK_APPLY_FOR_OSS_PLAN (line 1) | const LINK_APPLY_FOR_OSS_PLAN =
FILE: web/k/host.ts
constant HOST (line 1) | const HOST =
constant SERVER_URL (line 6) | const SERVER_URL =
FILE: web/layouts/payment-required-page.tsx
function PaymentRequiredPage (line 2) | function PaymentRequiredPage() {
FILE: web/next.config.js
method rewrites (line 4) | rewrites() {
method redirects (line 24) | redirects() {
FILE: web/pages/onboarding/complete.tsx
function InitialOnboardingFinalPage (line 13) | function InitialOnboardingFinalPage({
function CodeExamples (line 117) | function CodeExamples({ target, apikey }: { target: string; apikey: stri...
function MoreCodeExamples (line 123) | function MoreCodeExamples({
function VideoDemo (line 161) | function VideoDemo() {
function getServerSideProps (line 185) | async function getServerSideProps(context: any) {
FILE: web/pages/onboarding/payment-success-with-issue.tsx
function PaymentSuccessButThereWasAProblem (line 11) | function PaymentSuccessButThereWasAProblem({
function getServerSideProps (line 64) | async function getServerSideProps(context: any) {
FILE: web/pages/onboarding/payment-success.tsx
function PaymentSuccessPage (line 14) | function PaymentSuccessPage({
function getServerSideProps (line 102) | async function getServerSideProps(context: any) {
Condensed preview — 295 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (500K chars).
[
{
"path": ".archives/console/.gitignore",
"chars": 386,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".archives/console/README.md",
"chars": 349,
"preview": "# [cors.sh/console](https://cors.sh/console) (`8824`)\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nn"
},
{
"path": ".archives/console/babel.config.js",
"chars": 81,
"preview": "module.exports = {\n presets: [\"next/babel\", \"linaria/babel\"],\n plugins: [],\n};\n"
},
{
"path": ".archives/console/logo/index.tsx",
"chars": 7712,
"preview": "import React from \"react\";\n\nexport function Logo({\n color = \"black\",\n width = 104,\n}: {\n width?: React.CSSProperties["
},
{
"path": ".archives/console/next-env.d.ts",
"chars": 201,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": ".archives/console/next.config.js",
"chars": 308,
"preview": "const withLinaria = require(\"next-linaria\");\nconst withTM = require(\"next-transpile-modules\")([\n \"@app/ui\",\n \"@cors.sh"
},
{
"path": ".archives/console/package.json",
"chars": 702,
"preview": "{\n \"name\": \"console.cors.sh\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev -p 8824\",\n "
},
{
"path": ".archives/console/pages/[id].tsx",
"chars": 3917,
"preview": "import React, { useEffect } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Pencil1Icon } from \"@radix-ui/r"
},
{
"path": ".archives/console/pages/_app.tsx",
"chars": 327,
"preview": "import React from \"react\";\nimport { Toaster } from \"react-hot-toast\";\nimport \"../styles/globals.css\";\nimport type { AppP"
},
{
"path": ".archives/console/pages/index.tsx",
"chars": 2419,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Link from \"next/link\";\nimport { Logo } from \"log"
},
{
"path": ".archives/console/pages/new.tsx",
"chars": 2034,
"preview": "import React, { useEffect } from \"react\";\nimport { Button, TextFormField } from \"@editor-ui/console\";\nimport client from"
},
{
"path": ".archives/console/styles/Home.module.css",
"chars": 1808,
"preview": ".container {\n min-height: 100vh;\n padding: 0 0.5rem;\n display: flex;\n flex-direction: column;\n justify-content: cen"
},
{
"path": ".archives/console/styles/globals.css",
"chars": 275,
"preview": "html,\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n "
},
{
"path": ".archives/console/tsconfig.json",
"chars": 558,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": ".archives/homepage/.gitignore",
"chars": 406,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": ".archives/homepage/README.md",
"chars": 1581,
"preview": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js"
},
{
"path": ".archives/homepage/babel.config.js",
"chars": 81,
"preview": "module.exports = {\n presets: [\"next/babel\", \"linaria/babel\"],\n plugins: [],\n};\n"
},
{
"path": ".archives/homepage/components/appbar/appbar-parent-site.tsx",
"chars": 2823,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Image from \"next/image\";\n/**\n * `<AppbarParentSi"
},
{
"path": ".archives/homepage/components/appbar/appbar.tsx",
"chars": 5358,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Image from \"next/image\";\nimport Link from \"next/"
},
{
"path": ".archives/homepage/components/appbar/index.ts",
"chars": 64,
"preview": "export * from \"./appbar\";\nexport * from \"./appbar-parent-site\";\n"
},
{
"path": ".archives/homepage/components/button/index.tsx",
"chars": 763,
"preview": "import React, { forwardRef } from \"react\";\nimport styled from \"@emotion/styled\";\n\ntype Props = React.PropsWithRef<\n {\n "
},
{
"path": ".archives/homepage/components/chatwood/index.jsx",
"chars": 938,
"preview": "import React from \"react\";\n\nclass ChatwootWidget extends React.Component {\n componentDidMount() {\n // Add Chatwoot S"
},
{
"path": ".archives/homepage/components/collabsible-info-card/index.tsx",
"chars": 2127,
"preview": "import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport * as Collapsible from \"@radix-ui/r"
},
{
"path": ".archives/homepage/components/cta-footer/index.tsx",
"chars": 2236,
"preview": "import styled from \"@emotion/styled\";\nimport React from \"react\";\nimport { OnboardingCta } from \"../cta-onboarding\";\n\nexp"
},
{
"path": ".archives/homepage/components/cta-onboarding/index.tsx",
"chars": 3446,
"preview": "import React, { useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport client from \"@cors.sh/service-api\""
},
{
"path": ".archives/homepage/components/cta-test-it/index.tsx",
"chars": 5793,
"preview": "import React, { useEffect, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport Select from \"react-sele"
},
{
"path": ".archives/homepage/components/demo-terminal/index.tsx",
"chars": 2292,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useRouter } from \"next/router\";\nimport { Prism"
},
{
"path": ".archives/homepage/components/icons/check-filled.tsx",
"chars": 529,
"preview": "import { Check } from \"@mui/icons-material\";\n\nexport default function CheckFilled({\n color = \"black\",\n size = 24,\n}: {"
},
{
"path": ".archives/homepage/components/index.ts",
"chars": 132,
"preview": "export * from \"./appbar\";\nexport * from \"./cta-test-it\";\nexport * from \"./cta-onboarding\";\nexport * from \"./collabsible-"
},
{
"path": ".archives/homepage/components/logo/index.tsx",
"chars": 369,
"preview": "import React from \"react\";\nimport Image from \"next/image\";\nimport { useRouter } from \"next/router\";\n\nexport function Log"
},
{
"path": ".archives/homepage/components/pricing/card.tsx",
"chars": 6440,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport Check from \"@mui/icons-material/Check\";\n/**\n * `"
},
{
"path": ".archives/homepage/components/pricing/free-for-opensource.tsx",
"chars": 4874,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useRouter } from \"next/router\";\nimport * as k "
},
{
"path": ".archives/homepage/components/pricing/index.ts",
"chars": 24,
"preview": "export * from \"./card\";\n"
},
{
"path": ".archives/homepage/grida/.gitkeep",
"chars": 105,
"preview": "This directory is reserved for Grida. you may remove this .gitkeep file once the directory is fullfilled."
},
{
"path": ".archives/homepage/grida/AppbarGroup.tsx",
"chars": 2753,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Appbar, AppbarParentSite } from \"../components"
},
{
"path": ".archives/homepage/grida/SectionCtaLast.tsx",
"chars": 5726,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\n/**\n * `<SectionCtaLast>` ('section-cta-last')\n * - [Op"
},
{
"path": ".archives/homepage/grida/SectionDisclaimer.tsx",
"chars": 3261,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { motion } from \"framer-motion\";\n/**\n *\n */\nfunc"
},
{
"path": ".archives/homepage/grida/SectionHero.tsx",
"chars": 6839,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { OnboardingCta } from \"../components\";\nimport C"
},
{
"path": ".archives/homepage/grida/SectionPricing.tsx",
"chars": 3881,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { PricingCardsList } from \"../layouts/pricing-ca"
},
{
"path": ".archives/homepage/grida/SectionUsage.tsx",
"chars": 12661,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useRouter } from \"next/router\";\nimport CheckFi"
},
{
"path": ".archives/homepage/grida.config.js",
"chars": 871,
"preview": "// This file is auto-generated by Grida.\n\n/**\n * @type {import('grida').GridaConfig}\n */\nconst config = {\n name: 'homep"
},
{
"path": ".archives/homepage/k/examples.ts",
"chars": 1066,
"preview": "/**\n * usage code snippet\n */\nexport const examples = {\n simplest: (\n t: string,\n key: string = \"xxxxxxxx-xxxx-xx"
},
{
"path": ".archives/homepage/k/external-links.ts",
"chars": 125,
"preview": "export const LINK_APPLY_FOR_OSS_PLAN =\n \"https://github.com/gridaco/cors.sh/issues/new?template=apply-for-oss-program.y"
},
{
"path": ".archives/homepage/k/host.ts",
"chars": 283,
"preview": "export const HOST =\n process.env.NODE_ENV === \"production\"\n ? \"https://cors.sh\"\n : \"http://localhost:8823\";\n\nexpo"
},
{
"path": ".archives/homepage/k/index.ts",
"chars": 111,
"preview": "export * from \"./price\";\nexport * from \"./external-links\";\nexport * from \"./host\";\nexport * from \"./examples\";\n"
},
{
"path": ".archives/homepage/k/price.ts",
"chars": 2856,
"preview": "const _PRICE_PERSONAL_PRO_MONTHLY = {\n test: \"price_1Lda7UAvR3geCh5rVaajCSw6\",\n live: \"price_1LbnTwAvR3geCh5rZm9v8CAy\""
},
{
"path": ".archives/homepage/layouts/payment-required-page.tsx",
"chars": 85,
"preview": "import React from \"react\";\nexport function PaymentRequiredPage() {\n return <></>;\n}\n"
},
{
"path": ".archives/homepage/layouts/pricing-card-list.tsx",
"chars": 1348,
"preview": "import React, { useState } from \"react\";\nimport { PricingCard } from \"../components/pricing\";\nimport * as k from \"../k\";"
},
{
"path": ".archives/homepage/layouts/step-layout.tsx",
"chars": 2532,
"preview": "import styled from \"@emotion/styled\";\nimport Head from \"next/head\";\nimport React, { useEffect } from \"react\";\nimport { B"
},
{
"path": ".archives/homepage/next-env.d.ts",
"chars": 201,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": ".archives/homepage/next.config.js",
"chars": 1745,
"preview": "const withLinaria = require(\"next-linaria\");\nconst withTM = require(\"next-transpile-modules\")([\n \"@app/ui\",\n \"@cors.sh"
},
{
"path": ".archives/homepage/package.json",
"chars": 1062,
"preview": "{\n \"name\": \"homepage\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev -p 8823"
},
{
"path": ".archives/homepage/pages/_app.tsx",
"chars": 1515,
"preview": "import \"../styles/globals.css\";\nimport type { AppProps } from \"next/app\";\nimport Head from \"next/head\";\nimport Script fr"
},
{
"path": ".archives/homepage/pages/_document.tsx",
"chars": 901,
"preview": "import { Head, Html, Main, NextScript } from \"next/document\";\n\nexport default function _Document() {\n return (\n <Htm"
},
{
"path": ".archives/homepage/pages/disclaimer.tsx",
"chars": 99,
"preview": "import React from \"react\";\n\nexport default function DisclaimerPage() {\n return <>Disclaimer</>;\n}\n"
},
{
"path": ".archives/homepage/pages/get-started/index.tsx",
"chars": 6482,
"preview": "import React, { useCallback, useRef, useEffect } from \"react\";\nimport { useRouter } from \"next/router\";\nimport { FormPag"
},
{
"path": ".archives/homepage/pages/index.tsx",
"chars": 1862,
"preview": "import React from \"react\";\nimport { AppbarGroup } from \"../grida/AppbarGroup\";\nimport { SectionDisclaimer } from \"../gri"
},
{
"path": ".archives/homepage/pages/oauth/callback.tsx",
"chars": 830,
"preview": "import React from \"react\";\nimport Axios from \"axios\";\n\nconst client = Axios.create({\n baseURL: \"https://accounts.grida."
},
{
"path": ".archives/homepage/pages/onboarding/[id].tsx",
"chars": 520,
"preview": "// TODO: rename this route to /onboarding/continue?id=\n\nimport Head from \"next/head\";\nimport React from \"react\";\n\nexport"
},
{
"path": ".archives/homepage/pages/onboarding/complete.tsx",
"chars": 5364,
"preview": "import React, { useEffect } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Client, ApplicationWithApiKey }"
},
{
"path": ".archives/homepage/pages/onboarding/index.tsx",
"chars": 4970,
"preview": "import React, { useEffect } from \"react\";\nimport {\n Button,\n FormFieldBase,\n FormFieldLabel,\n TextFormField,\n} from "
},
{
"path": ".archives/homepage/pages/onboarding/payment-success-with-issue.tsx",
"chars": 2003,
"preview": "import React from \"react\";\nimport client from \"@cors.sh/service-api\";\nimport { Button } from \"@editor-ui/console\";\nimpor"
},
{
"path": ".archives/homepage/pages/onboarding/payment-success.tsx",
"chars": 3353,
"preview": "import React, { useEffect } from \"react\";\nimport client from \"@cors.sh/service-api\";\nimport { useRouter } from \"next/rou"
},
{
"path": ".archives/homepage/pages/too-many-requests.tsx",
"chars": 796,
"preview": "import React from \"react\";\nimport { PricingCardsList } from \"../layouts/pricing-card-list\";\nimport { StepLayout } from \""
},
{
"path": ".archives/homepage/public/robots.txt",
"chars": 111,
"preview": "# Block all crawlers for /console\nUser-agent: *\nDisallow: /console\n\n# Allow all crawlers\nUser-agent: *\nAllow: /"
},
{
"path": ".archives/homepage/styles/globals.css",
"chars": 319,
"preview": "html,\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n "
},
{
"path": ".archives/homepage/tsconfig.json",
"chars": 529,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": ".github/ISSUE_TEMPLATE/apply-for-oss-program.yml",
"chars": 1983,
"preview": "name: Apply for OSS Program\ndescription: Apply your OSS Project for free pro-plan of cors.sh\ntitle: \"[Application] for m"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 834,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the b"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 595,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your fea"
},
{
"path": ".gitignore",
"chars": 1650,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\npackage-lock.json\n\n# Diagnostic report"
},
{
"path": ".gitmodules",
"chars": 115,
"preview": "[submodule \"packages/editor-ui\"]\n\tpath = packages/editor-ui\n\turl = https://github.com/reflect-ui/reflect-editor-ui\n"
},
{
"path": ".nvmrc",
"chars": 7,
"preview": "v20.9.0"
},
{
"path": ".vscode/settings.json",
"chars": 321,
"preview": "{\n \"files.exclude\": {\n \"**/.git\": true,\n \"**/.svn\": true,\n \"**/.hg\": true,\n \"**/CVS\": true,\n \"**/.DS_Sto"
},
{
"path": "LICENSE",
"chars": 1062,
"preview": "MIT License\n\nCopyright (c) 2022 Grida\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof t"
},
{
"path": "README.md",
"chars": 2046,
"preview": "# cors.sh\n\n\n\nThe only cors proxy service all you'll ever need.\n\n| [Website](ht"
},
{
"path": "branding/readme.md",
"chars": 87,
"preview": "# branding resources accross the site\n\n- favicon.ico - for `/`, `/docs`, `/playground`\n"
},
{
"path": "cli/bin.ts",
"chars": 615,
"preview": "import yargs from \"yargs\";\nimport { hideBin } from \"yargs/helpers\";\nimport { checkForUpdate } from \"./update\";\n\nexport d"
},
{
"path": "cli/index.ts",
"chars": 187,
"preview": "#!/usr/bin/env node\n\nimport cli from \"./bin\";\n\nprocess.on(\"SIGINT\", () => {\n process.exit(0); // now the \"exit\" event w"
},
{
"path": "cli/jes.config.js",
"chars": 135,
"preview": "/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n preset: \"ts-jest\",\n testEnvironme"
},
{
"path": "cli/package.json",
"chars": 1274,
"preview": "{\n \"name\": \"@cors.sh/cli\",\n \"version\": \"0.0.1\",\n \"private\": false,\n \"license\": \"Apache-2.0\",\n \"description\": \"cors."
},
{
"path": "cli/readme.md",
"chars": 92,
"preview": "# cors.sh management cli\n\n- cors list project\n- cors new project\n- cors edit project `<id>`\n"
},
{
"path": "cli/tsconfig.json",
"chars": 282,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"ES2015\",\n \"outDir\": \"dist\",\n \"module\": \"CommonJS\",\n \"strict\": false,\n "
},
{
"path": "cli/update/index.ts",
"chars": 869,
"preview": "import { version, name } from \"../version\";\nimport boxen from \"boxen\";\nimport semver from \"semver\";\nimport fetch from \"n"
},
{
"path": "cli/version/index.ts",
"chars": 76,
"preview": "import { version, name } from \"../package.json\";\n\nexport { version, name };\n"
},
{
"path": "design/readme.md",
"chars": 93,
"preview": "# cors.sh design\n\n## Figma file\n\n- https://www.figma.com/file/aPfdtNb1aGFIN9p05cmmVY/cors.sh\n"
},
{
"path": "docs/.gitignore",
"chars": 233,
"preview": "# Dependencies\n/node_modules\n\n# Production\n/build\n\n# Generated files\n.docusaurus\n.cache-loader\n\n# Misc\n.DS_Store\n.env.lo"
},
{
"path": "docs/README.md",
"chars": 770,
"preview": "# Website\n\nThis website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.\n\n### I"
},
{
"path": "docs/babel.config.js",
"chars": 89,
"preview": "module.exports = {\n presets: [require.resolve('@docusaurus/core/lib/babel/preset')],\n};\n"
},
{
"path": "docs/blog/2019-05-28-first-blog-post.md",
"chars": 389,
"preview": "---\nslug: first-blog-post\ntitle: First Blog Post\nauthors:\n name: Gao Wei\n title: Docusaurus Core Team\n url: https://g"
},
{
"path": "docs/blog/2019-05-29-long-blog-post.md",
"chars": 3116,
"preview": "---\nslug: long-blog-post\ntitle: Long Blog Post\nauthors: endi\ntags: [hello, docusaurus]\n---\n\nThis is the summary of a ver"
},
{
"path": "docs/blog/2021-08-01-mdx-blog-post.mdx",
"chars": 439,
"preview": "---\nslug: mdx-blog-post\ntitle: MDX Blog Post\nauthors: [slorber]\ntags: [docusaurus]\n---\n\nBlog posts support [Docusaurus M"
},
{
"path": "docs/blog/2021-08-26-welcome/index.md",
"chars": 783,
"preview": "---\nslug: welcome\ntitle: Welcome\nauthors: [slorber, yangshun]\ntags: [facebook, hello, docusaurus]\n---\n\n[Docusaurus blogg"
},
{
"path": "docs/blog/authors.yml",
"chars": 446,
"preview": "endi:\n name: Endilie Yacop Sucipto\n title: Maintainer of Docusaurus\n url: https://github.com/endiliey\n image_url: ht"
},
{
"path": "docs/docs/guides/_category_.json",
"chars": 141,
"preview": "{\n \"label\": \"Guides\",\n \"position\": 4,\n \"link\": {\n \"type\": \"generated-index\",\n \"description\": \"Popular use cases"
},
{
"path": "docs/docs/guides/api-instagram/index.md",
"chars": 49,
"preview": "---\nsidebar_position: 9\n---\n\n# For instagram api\n"
},
{
"path": "docs/docs/guides/api-tiktok/index.md",
"chars": 46,
"preview": "---\nsidebar_position: 9\n---\n\n# For tiktok api\n"
},
{
"path": "docs/docs/guides/figma-plugin/index.md",
"chars": 245,
"preview": "---\ntitle: For Figma plugin\nsidebar_position: 1\n---\n\n# CORS Proxy for developing your figma plugin\n\n## Examples\n\nFigma A"
},
{
"path": "docs/docs/guides/shopify-app/index.md",
"chars": 110,
"preview": "---\ntitle: For Shopify app\nsidebar_position: 2\n---\n\n# CORS Proxy for developing your shopify app\n\nShopify app\n"
},
{
"path": "docs/docs/intro.md",
"chars": 1404,
"preview": "---\nsidebar_position: 1\n---\n\n# Tutorial Intro\n\nLet's discover **Docusaurus in less than 5 minutes**.\n\n## Getting Started"
},
{
"path": "docs/docs/migrate-from-cors.bridged.cc.md",
"chars": 789,
"preview": "# Migrate from cors.bridged.cc\n\nIf you are a `cors.bridged.cc` user, you will have api key in shape like this `xxxxxxxx-"
},
{
"path": "docs/docs/tutorial-basics/_category_.json",
"chars": 180,
"preview": "{\n \"label\": \"Tutorial - Basics\",\n \"position\": 2,\n \"link\": {\n \"type\": \"generated-index\",\n \"description\": \"5 minu"
},
{
"path": "docs/docs/tutorial-basics/congratulations.md",
"chars": 862,
"preview": "---\nsidebar_position: 6\n---\n\n# Congratulations!\n\nYou have just learned the **basics of Docusaurus** and made some change"
},
{
"path": "docs/docs/tutorial-basics/create-a-blog-post.md",
"chars": 882,
"preview": "---\nsidebar_position: 3\n---\n\n# Create a Blog Post\n\nDocusaurus creates a **page for each blog post**, but also a **blog i"
},
{
"path": "docs/docs/tutorial-basics/create-a-document.md",
"chars": 992,
"preview": "---\nsidebar_position: 2\n---\n\n# Create a Document\n\nDocuments are **groups of pages** connected through:\n\n- a **sidebar**\n"
},
{
"path": "docs/docs/tutorial-basics/create-a-page.md",
"chars": 1009,
"preview": "---\nsidebar_position: 1\n---\n\n# Create a Page\n\nAdd **Markdown or React** files to `src/pages` to create a **standalone pa"
},
{
"path": "docs/docs/tutorial-basics/deploy-your-site.md",
"chars": 702,
"preview": "---\nsidebar_position: 5\n---\n\n# Deploy your site\n\nDocusaurus is a **static-site-generator** (also called **[Jamstack](htt"
},
{
"path": "docs/docs/tutorial-basics/markdown-features.mdx",
"chars": 2990,
"preview": "---\nsidebar_position: 4\n---\n\n# Markdown Features\n\nDocusaurus supports **[Markdown](https://daringfireball.net/projects/m"
},
{
"path": "docs/docs/tutorial-extras/_category_.json",
"chars": 99,
"preview": "{\n \"label\": \"Tutorial - Extras\",\n \"position\": 3,\n \"link\": {\n \"type\": \"generated-index\"\n }\n}\n"
},
{
"path": "docs/docs/tutorial-extras/manage-docs-versions.md",
"chars": 1234,
"preview": "---\nsidebar_position: 1\n---\n\n# Manage Docs Versions\n\nDocusaurus can manage multiple versions of your docs.\n\n## Create a "
},
{
"path": "docs/docs/tutorial-extras/translate-your-site.md",
"chars": 1596,
"preview": "---\nsidebar_position: 2\n---\n\n# Translate your site\n\nLet's translate `docs/intro.md` to French.\n\n## Configure i18n\n\nModif"
},
{
"path": "docs/docs/what-is-cors.md",
"chars": 648,
"preview": "---\ntitle: What is CORS?\n---\n\n# What is `CORS` ?\n\n`CORS` Cross-Origin Resource Sharing\n\n## Do I need a cors proxy?\n\nIn s"
},
{
"path": "docs/docusaurus.config.js",
"chars": 3746,
"preview": "// @ts-check\n// Note: type annotations allow type checking and IDEs autocompletion\n\nconst lightCodeTheme = require(\"pris"
},
{
"path": "docs/package.json",
"chars": 1023,
"preview": "{\n \"name\": \"docs\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"docusaurus\": \"docusaurus\",\n \"start\":"
},
{
"path": "docs/sidebars.js",
"chars": 727,
"preview": "/**\n * Creating a sidebar enables you to:\n - create an ordered group of docs\n - render a sidebar for each doc of that gr"
},
{
"path": "docs/src/css/custom.css",
"chars": 1042,
"preview": "/**\n * Any CSS included here will be global. The classic template\n * bundles Infima by default. Infima is a CSS framewor"
},
{
"path": "docs/static/.nojekyll",
"chars": 0,
"preview": ""
},
{
"path": "docs/static/index.html",
"chars": 474,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta\n http-equiv=\"refresh\"\n con"
},
{
"path": "examples/a-simple-demo/index.html",
"chars": 0,
"preview": ""
},
{
"path": "examples/a-simple-demo/index.js",
"chars": 0,
"preview": ""
},
{
"path": "examples/readme.md",
"chars": 21,
"preview": "# Examples directory\n"
},
{
"path": "package.json",
"chars": 567,
"preview": "{\n \"name\": \"cors.sh\",\n \"version\": \"0.0.0\",\n \"description\": \"The only cors proxy service all you'll ever need.\",\n \"re"
},
{
"path": "packages/api/index.ts",
"chars": 4065,
"preview": "import Axios, { AxiosInstance, AxiosError } from \"axios\";\n\nconst HOST =\n process.env.NODE_ENV === \"production\"\n ? \"h"
},
{
"path": "packages/api/package.json",
"chars": 107,
"preview": "{\n \"name\": \"@cors.sh/service-api\",\n \"version\": \"0.0.0\",\n \"dependencies\": {\n \"axios\": \"^0.27.2\"\n }\n}\n"
},
{
"path": "packages/app-ui/components/api-key-reveal.tsx",
"chars": 2133,
"preview": "import React from \"react\";\nimport copy from \"copy-to-clipboard\";\nimport toast from \"react-hot-toast\";\nimport styled from"
},
{
"path": "packages/app-ui/components/index.ts",
"chars": 70,
"preview": "export * from \"./underline-button\";\nexport * from \"./api-key-reveal\";\n"
},
{
"path": "packages/app-ui/components/underline-button.tsx",
"chars": 488,
"preview": "import React from \"react\";\nimport styled from \"@emotion/styled\";\n\nexport const UnderlineButton = React.forwardRef(functi"
},
{
"path": "packages/app-ui/layouts/form-page-latout.ts",
"chars": 816,
"preview": "\"use client\";\nimport styled from \"@emotion/styled\";\n\nexport const FormPageLayout = styled.div`\n font-family: sans-serif"
},
{
"path": "packages/app-ui/layouts/index.ts",
"chars": 73,
"preview": "export * from \"./form-page-latout\";\nexport * from \"./page-close-button\";\n"
},
{
"path": "packages/app-ui/layouts/page-close-button.tsx",
"chars": 353,
"preview": "import React from \"react\";\n// import { useRouter } from \"next/router\";\nimport { Cross2Icon } from \"@radix-ui/react-icons"
},
{
"path": "packages/app-ui/package.json",
"chars": 45,
"preview": "{\n \"name\": \"@app/ui\",\n \"version\": \"0.0.0\"\n}"
},
{
"path": "packages/app-ui/tsconfig.json",
"chars": 79,
"preview": "{\n \"compilerOptions\": {\n \"jsx\": \"react\",\n \"esModuleInterop\": true\n }\n}\n"
},
{
"path": "packages/app-ui/utils/index.ts",
"chars": 235,
"preview": "export const validateUrls = (urls: string) => {\n const lines = urls.split(\",\").map((line) => line.trim());\n for (const"
},
{
"path": "playground/readme.md",
"chars": 207,
"preview": "# cors.sh/playground\n\nVisit [cors.sh/playground](https://cors.sh/playground) to try out the playground.\n\nSource code ava"
},
{
"path": "services/auth.proxy.cors.sh/.gitignore",
"chars": 86,
"preview": "# package directories\nnode_modules\njspm_packages\n\n# Serverless directories\n.serverless"
},
{
"path": "services/auth.proxy.cors.sh/deploy/prod.sh",
"chars": 55,
"preview": "sls deploy --stage production \\\n --param=\"domain=true\""
},
{
"path": "services/auth.proxy.cors.sh/deploy/staging.sh",
"chars": 55,
"preview": "sls deploy --stage production \\\n --param=\"domain=true\""
},
{
"path": "services/auth.proxy.cors.sh/handler.ts",
"chars": 1094,
"preview": "// this uses dynamodb to read api key signatures\n// signature types are..\n// tmp - this is not stored in db.\n// live / t"
},
{
"path": "services/auth.proxy.cors.sh/package.json",
"chars": 108,
"preview": "{\n \"name\": \"auth.proxy.cors.sh\",\n \"version\": \"0.0.0\",\n \"dependencies\": {\n \"aws-sdk\": \"^2.1290.0\"\n }\n}"
},
{
"path": "services/auth.proxy.cors.sh/readme.md",
"chars": 346,
"preview": "# API Authorizer for proxy.cors.sh\n\n## Architecture\n\nThis layer will use the synced key signatures direcly from the tabl"
},
{
"path": "services/auth.proxy.cors.sh/serverless.yml",
"chars": 1519,
"preview": "# Welcome to serverless. Read the docs\n# https://serverless.com/framework/docs/\n\nservice: cors-proxy-authorizer\nuseDoten"
},
{
"path": "services/lagacy/.gitignore",
"chars": 381,
"preview": "# compiled output\n/dist\n/node_modules\n.build\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debu"
},
{
"path": "services/lagacy/README.md",
"chars": 196,
"preview": "# Legacy cors.bridged.cc\n\nAll requests to cors.bridged.cc will be redirected to cors.sh\n\nThis is done by api-gateway in "
},
{
"path": "services/lagacy/lib/cors.ts",
"chars": 9743,
"preview": "import * as httpProxy from \"http-proxy\";\nimport * as https from \"https\";\nimport * as http from \"http\";\nimport * as url f"
},
{
"path": "services/lagacy/lib/utils.ts",
"chars": 11915,
"preview": "import * as net from \"net\";\nimport * as url from \"url\";\n\nexport const regexp = /\\.(?:AAA|AARP|ABARTH|ABB|ABBOTT|ABBVIE|A"
},
{
"path": "services/lagacy/package.json",
"chars": 1219,
"preview": "{\n \"name\": \"cors.bridged.cc\",\n \"description\": \"free cors service for everyone\",\n \"version\": \"0.1.0\",\n \"scrip"
},
{
"path": "services/lagacy/serverless.yml",
"chars": 2537,
"preview": "# Welcome to serverless. Read the docs\n# https://serverless.com/framework/docs/\nframeworkVersion: \"2\"\nservice: cors\nuseD"
},
{
"path": "services/lagacy/src/_util/size.ts",
"chars": 80,
"preview": "export const MB = 1048576;\n\n/**\n * 1 seconds in ms\n */\nexport const SEC = 1000;\n"
},
{
"path": "services/lagacy/src/app.ts",
"chars": 1773,
"preview": "import * as express from \"express\";\nimport * as useragent from \"express-useragent\";\nimport * as corsProxy from \"../lib/c"
},
{
"path": "services/lagacy/src/auth/_tmp_static_api_keys/.gitignore",
"chars": 48,
"preview": "# manuall managed credentials (temporal)\nkeys.js"
},
{
"path": "services/lagacy/src/auth/_tmp_static_api_keys/README.md",
"chars": 42,
"preview": "# Temporal manually managed api key store\n"
},
{
"path": "services/lagacy/src/auth/_tmp_static_api_keys/index.js",
"chars": 42,
"preview": "export { default as keys } from \"./keys\";\n"
},
{
"path": "services/lagacy/src/auth/index.ts",
"chars": 73,
"preview": "export { unauthorizedAppBlocking } from \"./static-account-api-key-auth\";\n"
},
{
"path": "services/lagacy/src/auth/static-account-api-key-auth.ts",
"chars": 1126,
"preview": "import * as express from \"express\";\nimport { keys } from \"./_tmp_static_api_keys\";\n/**\n * cors.grida.cc static api key h"
},
{
"path": "services/lagacy/src/index.ts",
"chars": 851,
"preview": "import * as serverlessExpress from \"aws-serverless-express\";\nimport { APIGatewayProxyHandler } from \"aws-lambda\";\n\nimpor"
},
{
"path": "services/lagacy/src/limit/README.md",
"chars": 20,
"preview": "# Limitation handler"
},
{
"path": "services/lagacy/src/limit/blacklist-origin.ts",
"chars": 1400,
"preview": "import * as express from \"express\";\n\n/**\n * explicitly black listed origins. these are not registered to use base.\n */\nc"
},
{
"path": "services/lagacy/src/limit/index.ts",
"chars": 69,
"preview": "export * from \"./payload-limit\";\nexport * from \"./blacklist-origin\";\n"
},
{
"path": "services/lagacy/src/limit/payload-limit.ts",
"chars": 1232,
"preview": "import * as https from \"https\";\nimport * as http from \"http\";\nimport { MB } from \"../_util/size\";\n\n/**\n * this is to sav"
},
{
"path": "services/lagacy/src/limit/unknown-host-limit.ts",
"chars": 697,
"preview": "import { MB, SEC } from \"../_util/size\";\n\nexport const unknownhostlimit = (req, res, next) => {\n const limit = <SingleP"
},
{
"path": "services/lagacy/src/usage/README.md",
"chars": 597,
"preview": "# Usage Logging\n\n## Data we collect\n\n- client ip (for managing x-rate-limit)\n- client ua (for malicious usage preventati"
},
{
"path": "services/lagacy/src/usage/index.ts",
"chars": 1910,
"preview": "import * as express from \"express\";\nimport * as dynamoose from \"dynamoose\";\nimport * as https from \"https\";\nconst agent "
},
{
"path": "services/lagacy/src/usage/model.ts",
"chars": 1858,
"preview": "import * as dynamoose from \"dynamoose\";\nimport { nanoid } from \"nanoid\";\n\nexport type AppId = string | \"anonymous\" | \"of"
},
{
"path": "services/lagacy/tsconfig.json",
"chars": 257,
"preview": "{\n \"compilerOptions\": {\n \"preserveConstEnums\": true,\n \"strictNullChecks\": true,\n \"sourceMap\": true,\n \"allow"
},
{
"path": "services/mail.cors.sh/onboarding.mjml",
"chars": 3649,
"preview": "<mjml>\n <mj-head>\n <mj-font name=\"Source Code Pro\" href=\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wg"
},
{
"path": "services/mail.cors.sh/onboarding_with_payment_success.mjml",
"chars": 3840,
"preview": "<mjml>\n <mj-head>\n <mj-font name=\"Source Code Pro\" href=\"https://fonts.googleapis.com/css2?family=Source+Code+Pro:wg"
},
{
"path": "services/mail.cors.sh/render/onboarding.subject",
"chars": 40,
"preview": "CORS.SH | your API Key for cors.proxy.sh"
},
{
"path": "services/mail.cors.sh/render/onboarding.template.html",
"chars": 15522,
"preview": "<!doctype html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-"
},
{
"path": "services/mail.cors.sh/render/onboarding_with_payment_success.subject",
"chars": 28,
"preview": "CORS.SH | Your first project"
},
{
"path": "services/mail.cors.sh/render/onboarding_with_payment_success.template.html",
"chars": 13951,
"preview": "<!doctype html>\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-"
},
{
"path": "services/proxy.cors.sh/.gitignore",
"chars": 423,
"preview": "# compiled output\n/dist\n/node_modules\n.build\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debu"
},
{
"path": "services/proxy.cors.sh/README.md",
"chars": 799,
"preview": "# CORS.BRIDGED.CC\n\n\n\n## The Web deployment\n\napp.cors.bridged.cc is l"
},
{
"path": "services/proxy.cors.sh/contributing.md",
"chars": 126,
"preview": "## running redis server locally\n\n```\ndocker run -d --name redis-stack-server -p 6379:6379 redis/redis-stack-server:lates"
},
{
"path": "services/proxy.cors.sh/deploy/prod.sh",
"chars": 55,
"preview": "sls deploy --stage production \\\n --param=\"domain=true\""
},
{
"path": "services/proxy.cors.sh/deploy/staging.sh",
"chars": 53,
"preview": "sls deploy --stage staging \\\n --param=\"domain=false\""
},
{
"path": "services/proxy.cors.sh/docs/README.md",
"chars": 34,
"preview": "# Docs & Image resources directory"
},
{
"path": "services/proxy.cors.sh/lib/cors.ts",
"chars": 9991,
"preview": "import * as httpProxy from \"http-proxy\";\nimport * as https from \"https\";\nimport * as http from \"http\";\nimport * as url f"
},
{
"path": "services/proxy.cors.sh/lib/utils.ts",
"chars": 11915,
"preview": "import * as net from \"net\";\nimport * as url from \"url\";\n\nexport const regexp = /\\.(?:AAA|AARP|ABARTH|ABB|ABBOTT|ABBVIE|A"
},
{
"path": "services/proxy.cors.sh/package.json",
"chars": 1486,
"preview": "{\n \"name\": \"proxy.cors.sh\",\n \"description\": \"free cors service for everyone\",\n \"version\": \"0.1.0\",\n \"scripts"
},
{
"path": "services/proxy.cors.sh/serverless.yml",
"chars": 2172,
"preview": "# Welcome to serverless. Read the docs\n# https://serverless.com/framework/docs/\n\nservice: cors-proxy\nuseDotenv: true\ncus"
},
{
"path": "services/proxy.cors.sh/src/_util/size.ts",
"chars": 80,
"preview": "export const MB = 1048576;\n\n/**\n * 1 seconds in ms\n */\nexport const SEC = 1000;\n"
},
{
"path": "services/proxy.cors.sh/src/_util/x-header.ts",
"chars": 306,
"preview": "import { Request } from \"express\";\n\nexport function headerfrom(\n headers: Request[\"headers\"],\n key: string | string[]\n"
},
{
"path": "services/proxy.cors.sh/src/app.ts",
"chars": 2362,
"preview": "import * as express from \"express\";\nimport * as useragent from \"express-useragent\";\nimport * as corsProxy from \"../lib/c"
},
{
"path": "services/proxy.cors.sh/src/auth/_tmp_static_api_keys/.gitignore",
"chars": 48,
"preview": "# manuall managed credentials (temporal)\nkeys.js"
},
{
"path": "services/proxy.cors.sh/src/auth/_tmp_static_api_keys/README.md",
"chars": 42,
"preview": "# Temporal manually managed api key store\n"
},
{
"path": "services/proxy.cors.sh/src/auth/_tmp_static_api_keys/index.js",
"chars": 42,
"preview": "export { default as keys } from \"./keys\";\n"
},
{
"path": "services/proxy.cors.sh/src/auth/index.ts",
"chars": 5232,
"preview": "import * as express from \"express\";\nimport { validate_tmp_key } from \"./keys-temp\";\nimport { verify_synced_key } from \"."
},
{
"path": "services/proxy.cors.sh/src/auth/keys-synced.ts",
"chars": 1084,
"preview": "import { DynamoDB } from \"aws-sdk\";\nimport * as day from \"dayjs\";\nconst db = new DynamoDB.DocumentClient();\n\nconst TABLE"
},
{
"path": "services/proxy.cors.sh/src/auth/keys-temp.ts",
"chars": 990,
"preview": "import * as crypto from \"crypto\";\nimport * as day from \"dayjs\";\n\nconst API_KEY_TEMP_AES_KEY: string = process.env.API_KE"
},
{
"path": "services/proxy.cors.sh/src/auth/keys.ts",
"chars": 435,
"preview": "export function keyinfo(key: string): {\n signature: string;\n mode: \"temp\" | \"live\" | \"test\" | \"v2022\";\n} {\n const mod"
},
{
"path": "services/proxy.cors.sh/src/auth/legacy/index.ts",
"chars": 47,
"preview": "export * from \"./static-account-api-key-auth\";\n"
},
{
"path": "services/proxy.cors.sh/src/auth/legacy/static-account-api-key-auth.ts",
"chars": 1045,
"preview": "import { keys } from \"../_tmp_static_api_keys\";\n\n// const nokey401UnAuthorized = () => {\n// return \"https://bit.ly/2Un"
},
{
"path": "services/proxy.cors.sh/src/index.ts",
"chars": 851,
"preview": "import * as serverlessExpress from \"aws-serverless-express\";\nimport { APIGatewayProxyHandler } from \"aws-lambda\";\n\nimpor"
},
{
"path": "services/proxy.cors.sh/src/k/index.ts",
"chars": 519,
"preview": "/**\n * proxy.cors.sh static api key header\n */\nexport const STATIC_CORS_ACCOUNT_API_KEY_HEADERS = [\n \"x-cors-grida-api-"
},
{
"path": "services/proxy.cors.sh/src/limit/README.md",
"chars": 20,
"preview": "# Limitation handler"
},
{
"path": "services/proxy.cors.sh/src/limit/blacklist-origin.ts",
"chars": 1402,
"preview": "import * as express from \"express\";\n\n/**\n * explicitly black listed origins. these are not registered to use base.\n */\nc"
},
{
"path": "services/proxy.cors.sh/src/limit/index.ts",
"chars": 69,
"preview": "export * from \"./payload-limit\";\nexport * from \"./blacklist-origin\";\n"
},
{
"path": "services/proxy.cors.sh/src/limit/payload-limit.ts",
"chars": 1236,
"preview": "import * as https from \"https\";\nimport * as http from \"http\";\nimport { MB } from \"../_util/size\";\n\n/**\n * this is to sav"
},
{
"path": "services/proxy.cors.sh/src/limit/rate-limit.ts",
"chars": 5216,
"preview": "import { Request, Response } from \"express\";\nimport rateLimit from \"express-rate-limit\";\nimport RedisStore from \"rate-li"
},
{
"path": "services/proxy.cors.sh/src/usage/README.md",
"chars": 597,
"preview": "# Usage Logging\n\n## Data we collect\n\n- client ip (for managing x-rate-limit)\n- client ua (for malicious usage preventati"
}
]
// ... and 95 more files (download for full content)
About this extraction
This page contains the full source code of the gridaco/cors.sh GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 295 files (447.1 KB), approximately 144.7k tokens, and a symbol index with 265 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.