diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index bf9fb833f..1caa5b461 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -71,7 +71,7 @@ module.exports = { ], }, footer: { - style: 'dark', + // style: 'dark', links: [ { title: 'Docs', diff --git a/website/src/components/graphs/index.js b/website/src/components/graphs/index.js new file mode 100644 index 000000000..be888e5f3 --- /dev/null +++ b/website/src/components/graphs/index.js @@ -0,0 +1,355 @@ +import React from 'react'; +import clsx from 'clsx'; + +export const LineChartPositive = props => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const LineChartNegative = props => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const LineChart = props => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/website/src/components/marquee/index.js b/website/src/components/marquee/index.js new file mode 100644 index 000000000..43be6042a --- /dev/null +++ b/website/src/components/marquee/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import clsx from 'clsx'; + +import styles from './styles.module.css'; + +const Marquee = props => { + return ( +
+
{props.children}
+ +
+ ); +}; + +export default Marquee; diff --git a/website/src/components/marquee/styles.module.css b/website/src/components/marquee/styles.module.css new file mode 100644 index 000000000..29876880f --- /dev/null +++ b/website/src/components/marquee/styles.module.css @@ -0,0 +1,48 @@ +/* https://ryanmulligan.dev/blog/css-marquee/ */ + +.marquee { + display: flex; + gap: 20px; + margin: auto; + max-width: 100vw; + user-select: none; + overflow: hidden; + -webkit-mask-image: linear-gradient( + to right, + hsl(0 0% 0% / 0), + hsl(0 0% 0% / 1) 20%, + hsl(0 0% 0% / 1) 80%, + hsl(0 0% 0% / 0) ); + mask-image: linear-gradient( + to right, + hsl(0 0% 0% / 0), + hsl(0 0% 0% / 1) 20%, + hsl(0 0% 0% / 1) 80%, + hsl(0 0% 0% / 0) ); +} + +.marqueeInner { + display: flex; + flex-shrink: 0; + gap: 20px; + align-items: center; + min-width: 100%; + justify-content: space-around; + animation: scroll-x 60s linear infinite; +} + +@keyframes scroll-x { + from { + transform: translateX(0); + } + to { + transform: translateX(calc(-100% - 20px)); + } +} + + +@media (prefers-reduced-motion: reduce) { + .marqueeInner { + animation-play-state: paused; + } +} diff --git a/website/src/components/registry-tile/index.js b/website/src/components/registry-tile/index.js new file mode 100644 index 000000000..c8daaf763 --- /dev/null +++ b/website/src/components/registry-tile/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import clsx from 'clsx'; + +import styles from './styles.module.css'; + +const RegistyTile = props => { + return ( +
+ +
+ ); +}; + +export default RegistyTile; diff --git a/website/src/components/registry-tile/styles.module.css b/website/src/components/registry-tile/styles.module.css new file mode 100644 index 000000000..a3aabee9c --- /dev/null +++ b/website/src/components/registry-tile/styles.module.css @@ -0,0 +1,13 @@ +.tile { + border-radius: 1rem; + overflow: hidden; + border: 1px solid #d6d6d6; + display: flex; + aspect-ratio: 16/9; + width: 600px; +} + +.tileContent { + padding: 20px; + background-color: white; +} diff --git a/website/src/components/tile/index.js b/website/src/components/tile/index.js new file mode 100644 index 000000000..6cf96f236 --- /dev/null +++ b/website/src/components/tile/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import clsx from 'clsx'; + +import styles from './styles.module.css'; + +const Tile = props => { + return ( +
+ {props.children} +
+ ); +}; + +export default Tile; diff --git a/website/src/components/tile/styles.module.css b/website/src/components/tile/styles.module.css new file mode 100644 index 000000000..7c0e2c9b5 --- /dev/null +++ b/website/src/components/tile/styles.module.css @@ -0,0 +1,8 @@ +.tile { + position: relative; + background: var(--ifm-color-emphasis-100); + border: #eee 1px solid; + border-radius: 1rem; + padding: 1rem; + min-height: 500px; +} diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 5f9fb2be9..fca31d946 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -15,6 +15,7 @@ --ifm-color-primary-lighter: #ad89ec; --ifm-color-primary-lightest: #c0a4f1; /* --ifm-code-font-size: 95%; */ + --ifm-background-color: #f8f8f8; } .docusaurus-highlight-code-line { @@ -23,3 +24,18 @@ margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); } + +.navbar--fixed-top { + --ifm-navbar-height: 6rem; + /* backdrop-filter: blur(10px); */ + /* background: #ffffffa6; */ +} + +.button--xl { + --ifm-button-size-multiplier: 2; +} + + +.row { + margin-bottom: 2rem; +} diff --git a/website/src/pages/index.js b/website/src/pages/index.js index e7251241d..2b2eb33cd 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -9,6 +9,10 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import styles from './styles.module.css'; import Logo from '@site/static/img/logo.svg'; +import RegistyTile from '../components/registry-tile'; +import Tile from '../components/tile'; +import Marquee from '../components/marquee'; +import { LineChartPositive, LineChartNegative } from '../components/graphs'; export default function Home() { const context = useDocusaurusContext(); @@ -21,27 +25,19 @@ export default function Home() { description="Discover the power of codemods for your development workflow. Our tools and resources allow you to easily manage dependencies, automate refactoring, and transform your codebase. With support for code migration and evolution, you can modernize your code and keep it up-to-date with the latest best practices. Try our tools today and improve your development process." >
-
+

- The community-owned codemod registry. + The ultimate code evolution toolchain.

-

- Discover the power of codemods for your development workflow. Our - tools and resources allow you to easily manage dependencies, - automate refactoring, and transform your codebase. +

+ Put your codebase on a diet, with automated for code + migration and monitoring you can modernize your code and keep it + up-to-date with best practices.

-

- With support for code migration and evolution, you can modernize - your code and keep it up-to-date with the latest best practices. -

-

- Try our tools today and improve your development process. -

-

@@ -51,307 +47,172 @@ export default function Home() {
-
+
+

+ Automated refactoring +

+

+ Discover the power of codemods for your development workflow. Our + tools and resources allow you to easily manage dependencies, + automate refactoring, and transform your codebase. +

+
+
+
+
+

+ Monitor migrations at scale +

+

+ Build expressive queries to track dependency migrations, technical + debt or adoption of new APIs. +

-
-
- - 🎁 - {' '} -

Publish

-

- Create, test and publish your own codemods for your users. +

+ +

+ 98%

+

+ styled-components to emotion

-
+ +
-
-
- - 🌱 - {' '} -

Up-skill

-

- Up-skill your engineering team using our guides & resources. -

-
+
+ +

- 43%

+

Emotion Adoption

+ +
-
-
- - ⚡️ - {' '} -

Go fast

-

- Use our helpers & testing utilities to make writing codemods - a breeze. -

-
-
-
-
- - 🔭 - {' '} -

Registry

-

- Explore an extensive list of codemods contributed by the - community. -

-
+
+
+
+
+
+
+

+ Dependency bumps to the max +

+

+ Recieve fully automated dependency upgrates even for major + versions. +

+
+
+
-
+

- Bring users with you. + Explore the community registry +

+

+ Browse our registry of ready to use codemods to help automatically + refactor your codebase, or contribute your own codemods to share + with the community. +

+
+ + + + + + + + + + +
+
+
+

+ Build & publish your own

Don't let APIs of the past hold you back. Give users the tools they need to upgrade across major versions by creating version-targeted codemods.

-
-
-
- - {`+import Button from '@my-lib/button'; - - -+const App = () => ( -+ -+);`} - -
- v1.0.0 -
-
-
- - {`-import Button from '@my-lib/button'; -+import Button from '@foobar/button'; - - -const App = () => ( - -);`} - -
- v2.0.0 -
+
+ +

Scaffold a project in seconds.

+ + $ npx @codeshift/cli init react-codemods + +
-
- - {`import Button from '@foobar/button'; - -const App = () => ( - -);`} - -
- v3.0.0 -
+
+
-
-

How it works.

-
    -
  1. -
    -
    -

    - 1. Initialize your project -

    -

    - Instantly create a brand new codeshift package that can be - run from anywhere. -

    -
    -
    - - $ npx @codeshift/cli init foobar - -
    -
    -
    2. -
  2. -
    -
    -

    - 2. Create a config -

    -

    Label and organise your codemods.

    -
      -
    • - Transforms: codemods that modify - package across multiple versions -
      • -
    • - Presets: Utility codemods that support - the use of a package -
      • -
    -
    -
    - - {`export.module = { - transforms: { - '12.0.0': require.resolve('./18.0.0/transform'), - '13.0.0': require.resolve('./19.0.0/transform'), - }, - presets: { - 'format-imports': require.resolve('./format-imports/transform') - } -};`} - -
    -
    -
    3. -
  3. -
    -
    -

    - 3. Write your codemod -

    -

    - Painlessly author your codemod using our delightful - library of utilities and documentation. -

    -
    -
    - {`import { - hasImportDeclaration, - renameImportDeclaration, -} from '@codeshift/utils'; - -function transformer(file, { jscodeshift: j }) { - const source = j(file.source); - const oldImport = 'bar'; - const newImport = 'foobar'; - - if (!hasImportDeclaration(j, source, oldImport)) { - return file.source; - } - - renameImportDeclaration(j, source, oldImport, newImport), - - return source.toSource(); -} - -export default transformer;`} -
    -
    -
    4. -
  4. -
    -
    -

    - 4. Publish -

    -

    - With a single command, share your codemods with the world. - No need to create a bespoke CLI client. -

    -
    -
    - - $ npm publish - -
    -
    -
    5. -
  5. -
    -
    -

    - 5. Run -

    -

    - Give your consumers a single API to keep their code up to - date with the latest and greatest. -

    -
    -
    - - $ npx @codeshift/cli -p foobar@12.0.0 path/to/src - -
    -
    -
    6. -
-
-
-
-
+

- Help make the JS ecosystem a better place. + Bring users with you.

- CodeshiftCommunity exists to make dependency management feel less - of a juggling act. But it's a team effort... + Don't let APIs of the past hold you back. Publish codemods for + your own libraries and give users the tools they need to upgrade + across major versions by creating version-targeted codemods.

-
- - Join our community! - -
-
+
+
+ +
+
+
+

+ Help make the JS ecosystem a better place. +

+

+ CodeshiftCommunity exists to make dependency management feel + less of a juggling act. But it's a team effort... +

+
+ + Join our community on discord! + +
+
+
+ +
+
+ {/*
-
+ */}
); diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css index 8a8abae96..105e36a63 100644 --- a/website/src/pages/styles.module.css +++ b/website/src/pages/styles.module.css @@ -33,42 +33,24 @@ margin-bottom: 1rem; } -.heroImage { - display: flex; - flex-flow: column nowrap; - width: 100%; - max-width: 960px !important; - border-radius: 3px; - box-shadow: rgb(84 70 35 / 15%) 0px 2px 8px, rgb(84 70 35 / 15%) 0px 1px 3px; -} - .heroBanner { - gap: 32px; - position: relative; - overflow: hidden; - text-align: center; - margin: 0 auto; - background-color: inherit; - padding: 10rem 2rem; + min-height: 80vh; + display: flex; + align-items: center; } .heroHeadingBanner { - font-size: 5rem; + font-size: 8rem; font-weight: 900; - color: var(--ifm-heading-color); - text-align: center; margin-bottom: 4rem; - background-image: linear-gradient( - 135deg, - var(--ifm-color-primary-lighter), - var(--ifm-color-primary-dark) - ); - -webkit-background-clip: text; - background-clip: text; - color: transparent; -webkit-box-decoration-break: clone; } +h2.heroHeadingBanner { + font-size: 5rem; + margin-bottom: 3rem; +} + .heroHeadingSecondary { font-size: 2.3rem; font-weight: 600; @@ -106,10 +88,34 @@ } .heroSection { - padding: 0 0 10rem 0; + padding: 8rem 0; width: 100%; } +.heroSubtitle { + font-weight: 800; + font-size: 2rem; + color: #808b95; + /* color: var(--ifm-color-primary); */ +} + +.chartTitle { + font-weight: 800; + font-size: 3rem; + margin-bottom: 0.5rem; + /* color: #808b95; */ + /* color: var(--ifm-color-primary); */ +} + +.chartSubtitle { + font-weight: 500; + /* font-size: 1rem; */ + color: #808b95; + + /* color: #808b95; */ + /* color: var(--ifm-color-primary); */ +} + .heroContainer { max-width: 1000px !important; font-size: 20px; @@ -165,10 +171,11 @@ justify-content: center; } + @media screen and (max-width: 966px) { - .heroBanner { + /* .heroBanner { padding: 5rem 0; - } + } */ .heroHeadingBanner { font-size: 2.5rem; @@ -181,4 +188,8 @@ .heroSection { padding: 0 0 5rem 0; } + + .displayImage { + padding: 2rem; + } } diff --git a/website/static/img/registry-tile.jpeg b/website/static/img/registry-tile.jpeg new file mode 100644 index 000000000..913cbd47f Binary files /dev/null and b/website/static/img/registry-tile.jpeg differ diff --git a/website/static/img/vs-code-screenshot.png b/website/static/img/vs-code-screenshot.png new file mode 100644 index 000000000..03e47d238 Binary files /dev/null and b/website/static/img/vs-code-screenshot.png differ