Site redirects and bugs (#793)

Author: michaeltaranto

README.md

@@ -74,7 +74,7 @@ document.write(`
 
 ---
 
-Want to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https://vanilla-extract.style/documentation/sprinkles-api), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
+Want to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
 
 ---
 
@@ -1044,7 +1044,7 @@ document.write(`
 
 Your recipe configuration can also make use of existing variables, classes and styles.
 
-For example, you can pass in the result of your [`sprinkles`](https://vanilla-extract.style/documentation/sprinkles-api) function directly.
+For example, you can pass in the result of your [`sprinkles`](https://vanilla-extract.style/documentation/packages/sprinkles) function directly.
 
 ```ts
 import { recipe } from '@vanilla-extract/recipes';

site/legacy-routes.json

@@ -0,0 +1,23 @@
+[
+  { "from": "/documentation/styling-api", "to": "/documentation/styling/" },
+  {
+    "from": "/documentation/sprinkles-api/",
+    "to": "/documentation/packages/sprinkles/"
+  },
+  {
+    "from": "/documentation/recipes-api/",
+    "to": "/documentation/packages/recipes/"
+  },
+  {
+    "from": "/documentation/dynamic-api/",
+    "to": "/documentation/packages/dynamic/"
+  },
+  {
+    "from": "/documentation/utility-functions/",
+    "to": "/documentation/packages/css-utils/"
+  },
+  {
+    "from": "/documentation/setup/",
+    "to": "/documentation/getting-started/#bundler-integration"
+  }
+]

site/src/App.tsx

@@ -1,8 +1,9 @@
-import { Route } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import { Title, Meta } from 'react-head';
 import { HomePage } from './HomePage/HomePage';
 import { DocsPage } from './DocsPage/DocsPage';
 import { ColorModeProvider } from './ColorModeToggle/ColorModeToggle';
+import legacyRoutes from '../legacy-routes.json';
 import './App.css';
 
 const pageTitle = 'vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.';
@@ -18,7 +19,14 @@ export default () => {
       <Meta property="og:description" content={description} />
       <Meta name="twitter:description" content={description} />
       <Route path="/" exact component={HomePage} />
-      <Route path="/documentation" component={DocsPage} />
+
+      <Switch>
+        {legacyRoutes.map((route) => (
+          <Redirect key={route.from} from={route.from} to={route.to} />
+        ))}
+
+        <Route path="/documentation" component={DocsPage} />
+      </Switch>
     </ColorModeProvider>
   );
 };

site/src/Code/CompiledCode.css.ts

@@ -104,7 +104,7 @@ const belowSideBySideStyles = (styles: StyleRule): StyleRule => ({
 export const showCssOnMobile = style({});
 
 export const maxHeight = style({
-  maxHeight: 800,
+  maxHeight: 'min(65vh, 800px)',
   overflow: 'auto',
 });
 

site/src/Code/CompiledCode.tsx

@@ -26,6 +26,7 @@ export interface CompiledCodeProps {
 export const CompiledCode = ({ code, css, background }: CompiledCodeProps) => {
   const [activeFileName, setActiveFileName] = useState(code[0].fileName);
   const [showCss, setShowCss] = useState(false);
+  const showOutputPanel = css && activeFileName?.endsWith('.css.ts');
 
   const activeFile = code.filter(
     ({ fileName }) => fileName === activeFileName,
@@ -126,7 +127,7 @@ export const CompiledCode = ({ code, css, background }: CompiledCodeProps) => {
             })}
           </Box>
         ) : null}
-        <Box padding="large" margin="-large">
+        <Box padding="large" margin="-large" overflow="hidden">
           <Box
             display="flex"
             className={showCss ? styles.showCssOnMobile : undefined}
@@ -146,7 +147,7 @@ export const CompiledCode = ({ code, css, background }: CompiledCodeProps) => {
                 {activeFile.contents}
               </SyntaxHighlighter>
             </Box>
-            {css && activeFileName?.endsWith('.css.ts') ? (
+            {showOutputPanel ? (
               <Box
                 id="outputContainer"
                 width="full"
@@ -179,7 +180,7 @@ export const CompiledCode = ({ code, css, background }: CompiledCodeProps) => {
         </Box>
       </Stack>
 
-      {css ? (
+      {showOutputPanel ? (
         <Box
           display="flex"
           justifyContent="flex-end"

site/src/HomePage/HomePage.tsx

@@ -266,7 +266,7 @@ export const HomePage = () => {
                 <Feature title="Built for extension">
                   Use libraries like{' '}
                   <Link
-                    to="/documentation/sprinkles-api"
+                    to="/documentation/packages/sprinkles"
                     size="small"
                     underline="always"
                     inline
@@ -275,7 +275,7 @@ export const HomePage = () => {
                   </Link>
                   ,{' '}
                   <Link
-                    to="/documentation/recipes-api"
+                    to="/documentation/packages/recipes"
                     size="small"
                     underline="always"
                     inline

site/webpack.config.js

@@ -6,12 +6,13 @@ const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { pages } = require('./docs-manifest.json');
+const legacyRoutes = require('./legacy-routes.json');
 const targetDirectory = join(__dirname, 'dist');
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 const htmlRenderPlugin = new HtmlRenderPlugin({
-  routes: ['', ...pages],
+  routes: ['', ...pages, ...legacyRoutes.map(({ from }) => from)],
   renderConcurrency: 'parallel',
   renderDirectory: targetDirectory,
   mapStatsToParams: ({ webpackStats }) => {