From 3e22f94151980bd59bbf1fcbe53b9cbc52ce5d97 Mon Sep 17 00:00:00 2001 From: Sam Magura Date: Sat, 2 Jul 2022 15:45:56 -0400 Subject: [PATCH 01/73] 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 | 155 - site/src/components/Search.js | 127 - 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 | 9299 ++--------------- 65 files changed, 709 insertions(+), 12145 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 23ea634a8..29180919a 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 6c145b987..b84bbb857 100644 --- a/playgrounds/nextjs/package.json +++ b/playgrounds/nextjs/package.json @@ -9,7 +9,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 000000000..43b91527b --- /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 6d8b8a9fd..000000000 --- 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 0a97625b6..000000000 --- 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 4fbe7b881..000000000 --- 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 662a52a92..000000000 --- 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 93c64b629..000000000 --- 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 000000000..9bc3dd46b --- /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 000000000..baa13377c --- /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 61c31fd3a..e47d5f55a 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 000000000..76ad5420b --- /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 000000000..240c0269b --- /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 ceb042c3b..000000000 --- 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 13162e0f6..000000000 --- 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([ -