From 73e3fdd633cd2b620425a2300f639412e8181874 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sun, 28 Nov 2021 21:13:40 -0500 Subject: [PATCH 01/57] Remove old site, create new Next app --- .gitignore | 4 +- playgrounds/nextjs/package.json | 2 +- site/.babelrc.js | 14 + site/CHANGELOG.md | 7 - site/README.md | 26 - site/docs-yaml.js | 10 - site/gatsby-config.js | 92 - site/gatsby-node.js | 139 - site/next-env.d.ts | 6 + site/next.config.js | 4 + site/package.json | 62 +- site/pages/_app.tsx | 5 + site/pages/index.tsx | 21 + .../gatsby-browser.js | 8 - .../gatsby-ssr.js | 26 - .../package.json | 4 - .../gatsby-plugin-favicon-fork/gatsby-node.js | 27 - .../gatsby-plugin-favicon-fork/gatsby-ssr.js | 221 - .../gatsby-plugin-favicon-fork/package.json | 4 - .../gatsby-remark-change-awesome/index.js | 18 - .../gatsby-remark-change-awesome/package.json | 4 - site/plugins/gatsby-remark-fix-links/index.js | 14 - .../gatsby-remark-fix-links/package.json | 4 - site/plugins/gatsby-remark-live-code/index.js | 34 - .../gatsby-remark-live-code/package.json | 4 - .../index.js | 9 - .../package.json | 4 - site/public/favicon.ico | Bin 0 -> 25931 bytes site/src/.eslintrc.js | 8 - site/src/assets/logo.png | Bin 423805 -> 0 bytes site/src/components/Box.js | 66 - site/src/components/Carbon.js | 107 - site/src/components/DocMetadata.js | 45 - site/src/components/DocWrapper.js | 231 - site/src/components/HeaderLogoImage.js | 38 - site/src/components/Link.js | 26 - site/src/components/Playground.js | 153 - site/src/components/Search.js | 126 - site/src/components/SiteHeader.js | 168 - site/src/components/Title.js | 17 - site/src/components/live/compile.js | 50 - site/src/components/live/compiler.js | 36 - site/src/components/live/index.js | 92 - site/src/components/live/types.js | 4 - site/src/components/live/worker.js | 28 - site/src/html.js | 30 - site/src/layouts/index.js | 54 - site/src/pages/404.js | 15 - site/src/pages/another-page.js | 3 - site/src/pages/community.js | 58 - site/src/templates/doc.js | 166 - site/src/utils/algolia-styles.js | 331 - site/src/utils/async-load-search.js | 38 - site/src/utils/babel-types.js | 15 - site/src/utils/dracula-prism.js | 359 - site/src/utils/global.js | 88 - site/src/utils/highlight-css.js | 30 - site/src/utils/make-prism-manual.js | 3 - site/src/utils/markdown-styles.js | 218 - site/src/utils/misc.js | 28 - site/src/utils/style.js | 83 - site/src/utils/transform.js | 15 - site/src/utils/types.js | 29 - site/tsconfig.json | 21 + yarn.lock | 9270 +---------------- 65 files changed, 654 insertions(+), 12168 deletions(-) create mode 100644 site/.babelrc.js delete mode 100644 site/CHANGELOG.md delete mode 100644 site/README.md delete mode 100644 site/docs-yaml.js delete mode 100644 site/gatsby-config.js delete mode 100644 site/gatsby-node.js create mode 100644 site/next-env.d.ts create mode 100644 site/next.config.js create mode 100644 site/pages/_app.tsx create mode 100644 site/pages/index.tsx delete mode 100644 site/plugins/gatsby-plugin-emotion-next-compat/gatsby-browser.js delete mode 100644 site/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js delete mode 100644 site/plugins/gatsby-plugin-emotion-next-compat/package.json delete mode 100644 site/plugins/gatsby-plugin-favicon-fork/gatsby-node.js delete mode 100644 site/plugins/gatsby-plugin-favicon-fork/gatsby-ssr.js delete mode 100644 site/plugins/gatsby-plugin-favicon-fork/package.json delete mode 100644 site/plugins/gatsby-remark-change-awesome/index.js delete mode 100644 site/plugins/gatsby-remark-change-awesome/package.json delete mode 100644 site/plugins/gatsby-remark-fix-links/index.js delete mode 100644 site/plugins/gatsby-remark-fix-links/package.json delete mode 100644 site/plugins/gatsby-remark-live-code/index.js delete mode 100644 site/plugins/gatsby-remark-live-code/package.json delete mode 100644 site/plugins/gatsby-remark-remove-readme-titles/index.js delete mode 100644 site/plugins/gatsby-remark-remove-readme-titles/package.json create mode 100644 site/public/favicon.ico delete mode 100644 site/src/.eslintrc.js delete mode 100644 site/src/assets/logo.png delete mode 100644 site/src/components/Box.js delete mode 100644 site/src/components/Carbon.js delete mode 100644 site/src/components/DocMetadata.js delete mode 100644 site/src/components/DocWrapper.js delete mode 100644 site/src/components/HeaderLogoImage.js delete mode 100644 site/src/components/Link.js delete mode 100644 site/src/components/Playground.js delete mode 100644 site/src/components/Search.js delete mode 100644 site/src/components/SiteHeader.js delete mode 100644 site/src/components/Title.js delete mode 100644 site/src/components/live/compile.js delete mode 100644 site/src/components/live/compiler.js delete mode 100644 site/src/components/live/index.js delete mode 100644 site/src/components/live/types.js delete mode 100644 site/src/components/live/worker.js delete mode 100644 site/src/html.js delete mode 100644 site/src/layouts/index.js delete mode 100644 site/src/pages/404.js delete mode 100644 site/src/pages/another-page.js delete mode 100644 site/src/pages/community.js delete mode 100644 site/src/templates/doc.js delete mode 100644 site/src/utils/algolia-styles.js delete mode 100644 site/src/utils/async-load-search.js delete mode 100644 site/src/utils/babel-types.js delete mode 100644 site/src/utils/dracula-prism.js delete mode 100644 site/src/utils/global.js delete mode 100644 site/src/utils/highlight-css.js delete mode 100644 site/src/utils/make-prism-manual.js delete mode 100644 site/src/utils/markdown-styles.js delete mode 100644 site/src/utils/misc.js delete mode 100644 site/src/utils/style.js delete mode 100644 site/src/utils/transform.js delete mode 100644 site/src/utils/types.js create mode 100644 site/tsconfig.json diff --git a/.gitignore b/.gitignore index 23ea634a8e..29180919a4 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,8 @@ package-lock.json .cache public/ !playgrounds/cra/public +!site/public .env .vscode -.parcel-cache/ \ No newline at end of file +.parcel-cache/ +.next \ No newline at end of file diff --git a/playgrounds/nextjs/package.json b/playgrounds/nextjs/package.json index 191920d08e..6ffcd9b796 100644 --- a/playgrounds/nextjs/package.json +++ b/playgrounds/nextjs/package.json @@ -8,7 +8,7 @@ "start": "next start" }, "dependencies": { - "next": "12.0.2", + "next": "12.0.4", "react": "16.14.0", "react-dom": "16.14.0" } diff --git a/site/.babelrc.js b/site/.babelrc.js new file mode 100644 index 0000000000..43b91527b1 --- /dev/null +++ b/site/.babelrc.js @@ -0,0 +1,14 @@ +module.exports = { + presets: [ + [ + 'next/babel', + { + 'preset-react': { + runtime: 'automatic', + importSource: '@emotion/react' + } + } + ] + ], + plugins: ['@emotion/babel-plugin'] +} diff --git a/site/CHANGELOG.md b/site/CHANGELOG.md deleted file mode 100644 index 6d8b8a9fd9..0000000000 --- a/site/CHANGELOG.md +++ /dev/null @@ -1,7 +0,0 @@ -# emotion-site - -## 9.3.0 - -### Minor Changes - -- [8c3fb9d9](https://github.com/emotion-js/emotion/commit/8c3fb9d9) [#1401](https://github.com/emotion-js/emotion/pull/1401) Thanks [@jordanoverbye](https://github.com/jordanoverbye)! - 1. Update document title when the user changes route 2. Update markup to me more semantic (nav, aside, main etc instead of just divs) 3. Fix overflow grid issue 4. Fix broken link on CacheProvider page 5. Remove h1 from pageheader, so there is only 1 h1 on all pages 6. Add more vertical spacing between nav groups in sidebar diff --git a/site/README.md b/site/README.md deleted file mode 100644 index 0a97625b64..0000000000 --- a/site/README.md +++ /dev/null @@ -1,26 +0,0 @@ -# [Emotion Site](https://emotion.sh) - -## Docs - -All of the docs live in the `docs` in the root of this repository. They are in [Markdown](https://daringfireball.net/projects/markdown/basics) and they should include the following frontmatter at the top of each file that specifies the title for the page. - -```yaml -title: 'Some Title' ---- -``` - -### Code Blocks - -When the langauge is `jsx` and the code block has a `// @live` comment, it will have a preview next to it. Most of the Emotion packages can be imported and there is a `render` function that accepts a react element and will render into the preview next to it. - -```md -\`\`\`jsx -// @live - -render('some react element') -\`\`\` -``` - -### Links - -All links to other pages on the docs should be linked to with `https://emotion.sh/docs/doc-name`, these links are transformed so they are local links. diff --git a/site/docs-yaml.js b/site/docs-yaml.js deleted file mode 100644 index 4fbe7b881c..0000000000 --- a/site/docs-yaml.js +++ /dev/null @@ -1,10 +0,0 @@ -const fs = require('fs') -const path = require('path') -const yaml = require('js-yaml') -const packageYamlPath = path.resolve(__dirname, '../docs/docs.yaml') - -module.exports = () => { - const yamlString = fs.readFileSync(packageYamlPath).toString() - - return yaml.safeLoad(yamlString) -} diff --git a/site/gatsby-config.js b/site/gatsby-config.js deleted file mode 100644 index 662a52a924..0000000000 --- a/site/gatsby-config.js +++ /dev/null @@ -1,92 +0,0 @@ -const path = require('path') -const packages = require('./docs-yaml')().filter( - ({ title }) => title === 'Packages' -)[0].items - -module.exports = { - siteMetadata: { - siteUrl: 'https://emotion.sh', - title: `emotion` - }, - plugins: packages - .map(pkg => - path.resolve( - `${__dirname}/../packages/${pkg.replace('@emotion/', '')}/README.md` - ) - ) - .map(file => ({ - resolve: 'gatsby-source-filesystem', - options: { - path: file - } - })) - .concat([ - { - resolve: 'gatsby-source-filesystem', - options: { - name: 'docs', - path: `${__dirname}/../docs` - } - }, - { - resolve: 'gatsby-source-filesystem', - options: { - path: `${__dirname}/../emotion.png` - } - }, - { - // todo: contribute to gatsby-plugin-manifest - // https://github.com/gatsbyjs/gatsby/issues/5887 - resolve: `gatsby-plugin-favicon-fork`, - options: { - logo: `${__dirname}/../emotion.png`, - injectHTML: true, - icons: { - android: false, - appleIcon: true, - appleStartup: false, - coast: false, - favicons: true, - firefox: false, - twitter: false, - yandex: false, - windows: false - } - } - }, - 'gatsby-plugin-emotion-next-compat', - { - resolve: `gatsby-plugin-mdx`, - options: { - extensions: ['.mdx', '.md'], - gatsbyRemarkPlugins: [ - { - resolve: require.resolve( - './plugins/gatsby-remark-remove-readme-titles' - ) - }, - { resolve: require.resolve('./plugins/gatsby-remark-fix-links') }, - { - resolve: require.resolve('./plugins/gatsby-remark-change-awesome') - }, - { resolve: require.resolve('./plugins/gatsby-remark-live-code') }, - { resolve: 'gatsby-remark-autolink-headers' }, - { resolve: 'gatsby-remark-prismjs' }, - { resolve: 'gatsby-remark-smartypants' } - ] - } - }, - { - resolve: `gatsby-plugin-google-analytics`, - options: { - trackingId: 'UA-101206186-1' - } - }, - `gatsby-plugin-react-helmet`, - 'gatsby-plugin-sharp', - 'gatsby-transformer-sharp', - 'gatsby-plugin-catch-links', - 'gatsby-plugin-sitemap', - 'gatsby-plugin-netlify' - ]) -} diff --git a/site/gatsby-node.js b/site/gatsby-node.js deleted file mode 100644 index 93c64b629e..0000000000 --- a/site/gatsby-node.js +++ /dev/null @@ -1,139 +0,0 @@ -const path = require('path') -var BundleAnalyzerPlugin = - require('webpack-bundle-analyzer').BundleAnalyzerPlugin -global.Babel = require('@babel/standalone') - -exports.onCreateWebpackConfig = ({ stage, actions, plugins, getConfig }) => { - actions.setWebpackConfig({ - // xor and props are for react-live and cosmiconfig is for babel-plugin-macros - plugins: [plugins.ignore(/^(xor|props|cosmiconfig)$/)], - resolve: { - alias: { - assert: 'fbjs/lib/emptyFunction', - 'source-map': 'fbjs/lib/emptyFunction', - 'convert-source-map': 'fbjs/lib/emptyFunction', - '@babel/types': path.join(__dirname, './src/utils/babel-types') - } - }, - node: { - fs: 'empty', - buffer: 'empty', - assert: 'empty' - } - }) - const config = getConfig() - actions.replaceWebpackConfig({ - ...config, - output: { - ...config.output, - // this doesn't seem to always merge correctly with `setWebpackConfig` for some reason - // so i'm setting it here - // this is here because it defaults to window and is used for hot reloading and other stuff - // so if this wasn't here, the web worker would break - // since it would try to access window - globalObject: 'this' - }, - module: { - ...config.module, - rules: config.module.rules.filter(rule => { - // eslint is annoying - return rule.enforce !== 'pre' - }) - } - }) - - if (stage === 'build-javascript' && !process.env.NETLIFY) { - actions.setWebpackConfig({ - plugins: [ - new BundleAnalyzerPlugin({ - analyzerMode: 'static' - }) - ] - }) - } -} - -const { createRemoteFileNode } = require(`gatsby-source-filesystem`) - -exports.sourceNodes = async ({ store, cache, actions, createNodeId }) => { - await createRemoteFileNode({ - url: `https://raw.githubusercontent.com/emotion-js/awesome-emotion/master/README.md`, - store, - cache, - createNode: actions.createNode, - createNodeId - }) -} - -exports.createPages = async ({ graphql, actions }) => { - const { createPage, createRedirect } = actions - - createRedirect({ - fromPath: `/`, - isPermanent: true, - redirectInBrowser: true, - toPath: `/docs/introduction` - }) - - createRedirect({ - fromPath: `/docs`, - isPermanent: true, - redirectInBrowser: true, - toPath: `/docs/introduction` - }) - - const docs1 = require('./docs-yaml')() - const docTemplate = require.resolve(`./src/templates/doc.js`) - docs1.forEach(({ title, items }) => { - items.forEach(itemName => { - createPage({ - path: `docs/${itemName}`, - component: docTemplate, - context: { - slug: itemName - } - }) - }) - }) -} - -// Add custom url pathname for blog posts. -exports.onCreateNode = async ({ node, actions, getNode, loadNodeContent }) => { - const { createNodeField } = actions - - if (node.internal.type === `Mdx` && typeof node.slug === `undefined`) { - const fileNode = getNode(node.parent) - - createNodeField({ - node, - name: `slug`, - value: - fileNode.name === 'README' - ? getNameForPackage(fileNode.absolutePath) - : fileNode.name - }) - } -} - -function getNameForPackage(absolutePath) { - try { - return require(`${path.parse(absolutePath).dir}/package.json`).name - } catch (e) { - if (e.code === 'MODULE_NOT_FOUND') { - const splitAbsolutePath = absolutePath.split(path.sep) - return splitAbsolutePath[splitAbsolutePath.length - 2] - } - throw e - } -} - -exports.onCreateBabelConfig = ({ actions, stage }) => { - actions.setBabelPreset({ - name: `babel-preset-emotion-dev`, - stage - }) - actions.setBabelPreset({ - name: require.resolve(`@emotion/babel-preset-css-prop`), - stage - }) -} diff --git a/site/next-env.d.ts b/site/next-env.d.ts new file mode 100644 index 0000000000..9bc3dd46b9 --- /dev/null +++ b/site/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/site/next.config.js b/site/next.config.js new file mode 100644 index 0000000000..baa13377c8 --- /dev/null +++ b/site/next.config.js @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +module.exports = { + reactStrictMode: true +} diff --git a/site/package.json b/site/package.json index 61c31fd3a2..e47d5f55a7 100644 --- a/site/package.json +++ b/site/package.json @@ -1,57 +1,21 @@ { "name": "emotion-site", + "version": "0.0.0", "private": true, - "description": "emotion site", - "version": "9.3.0", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, "dependencies": { - "@babel/preset-env": "^7.13.10", - "@babel/preset-react": "^7.12.13", - "@babel/standalone": "^7.13.11", - "@mdx-js/mdx": "^1.6.22", - "@mdx-js/react": "^1.6.22", - "escape-goat": "^1.3.0", - "facepaint": "^1.1.2", - "favicons-webpack-plugin": "^0.0.9", - "gatsby": "^2.32.11", - "gatsby-image": "^2.2.7", - "gatsby-plugin-catch-links": "^2.1.2", - "gatsby-plugin-emotion": "^4.1.2", - "gatsby-plugin-google-analytics": "^2.1.4", - "gatsby-plugin-mdx": "^1.10.1", - "gatsby-plugin-netlify": "^2.11.1", - "gatsby-plugin-react-helmet": "^3.1.2", - "gatsby-plugin-sharp": "^2.14.4", - "gatsby-plugin-sitemap": "^2.2.3", - "gatsby-remark-autolink-headers": "^2.1.3", - "gatsby-remark-images": "^3.1.7", - "gatsby-remark-prismjs": "^3.3.3", - "gatsby-remark-smartypants": "^2.1.2", - "gatsby-source-filesystem": "^2.1.6", - "gatsby-transformer-remark": "^2.6.9", - "gatsby-transformer-sharp": "^2.12.1", - "graphql-type-json": "^0.2.4", - "normalize.css": "^8.0.0", - "open-color": "^1.5.1", + "next": "12.0.4", "react": "16.14.0", - "react-dom": "16.14.0", - "react-helmet": "^5.2.0", - "react-icons": "^2.2.7", - "react-live": "1.10.0", - "remark-frontmatter": "^1.1.0", - "remark-parse": "^4.0.0", - "styled-system": "^1.0.8", - "unified": "^6.1.6", - "unist-util-visit": "^1.2.0", - "webpack-bundle-analyzer": "3.3.2", - "worker-loader": "2.0.0" + "react-dom": "16.14.0" }, - "keywords": [ - "gatsby" - ], - "license": "MIT", - "scripts": { - "build:site": "gatsby build", - "start:site": "gatsby develop", - "test:typescript": "exit 0" + "devDependencies": { + "@types/node": "16.11.10", + "@types/react": "17.0.37", + "typescript": "4.5.2" } } diff --git a/site/pages/_app.tsx b/site/pages/_app.tsx new file mode 100644 index 0000000000..76ad5420b1 --- /dev/null +++ b/site/pages/_app.tsx @@ -0,0 +1,5 @@ +import type { AppProps } from 'next/app' + +export default function MyApp({ Component, pageProps }: AppProps) { + return +} diff --git a/site/pages/index.tsx b/site/pages/index.tsx new file mode 100644 index 0000000000..240c0269ba --- /dev/null +++ b/site/pages/index.tsx @@ -0,0 +1,21 @@ +import type { NextPage } from 'next' +import Head from 'next/head' + +const Home: NextPage = () => { + return ( +
+ + Create Next App + + + +
+

+ Welcome to Next.js! +

+
+
+ ) +} + +export default Home diff --git a/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-browser.js b/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-browser.js deleted file mode 100644 index ceb042c3bf..0000000000 --- a/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-browser.js +++ /dev/null @@ -1,8 +0,0 @@ -// @flow -import * as React from 'react' -import { cache } from '@emotion/css' -import { CacheProvider } from '@emotion/react' - -export const wrapRootElement = ({ element }: { element: React.Node }) => { - return {element} -} diff --git a/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js b/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js deleted file mode 100644 index 13162e0f68..0000000000 --- a/site/plugins/gatsby-plugin-emotion-next-compat/gatsby-ssr.js +++ /dev/null @@ -1,26 +0,0 @@ -// @flow -import * as React from 'react' -import { renderToString } from 'react-dom/server' -import { extractCritical } from '@emotion/server' -import { cache } from '@emotion/css' -import { CacheProvider } from '@emotion/react' - -export const replaceRenderer = ({ - replaceBodyHTMLString, - bodyComponent, - setHeadComponents -}: *) => { - let { html, ids, css } = extractCritical( - renderToString({bodyComponent}) - ) - setHeadComponents([ -