codesandbox · danilowoz · Nov 25, 2021 · Nov 24, 2021 · Nov 24, 2021 · Nov 25, 2021
diff --git a/plugins/docusaurus/package.json b/plugins/docusaurus/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codesandbox/sandpack-docusaurus",
   "private": true,
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "",
   "main": "src/index.js",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "build": "echo 1"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.6.0",
+    "@codesandbox/sandpack-react": "^0.7.1",
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9"
   },

diff --git a/sandpack-react/src/components/TranspiledCode/index.tsx b/sandpack-react/src/components/TranspiledCode/index.tsx
@@ -5,9 +5,10 @@ import { ErrorOverlay } from "../../common/ErrorOverlay";
 import { LoadingOverlay } from "../../common/LoadingOverlay";
 import { useSandpack } from "../../hooks/useSandpack";
 import { useTranspiledCode } from "../../hooks/useTranspiledCode";
+import type { CodeViewerProps } from "../CodeViewer";
 import { SandpackCodeViewer } from "../CodeViewer";
 
-export const SandpackTranspiledCode: React.FC = () => {
+export const SandpackTranspiledCode: React.FC<CodeViewerProps> = (props) => {
   const { sandpack } = useSandpack();
   const transpiledCode = useTranspiledCode();
   const c = useClasser("sp");
@@ -23,7 +24,9 @@ export const SandpackTranspiledCode: React.FC = () => {
 
   return (
     <div className={c("transpiled-code")}>
-      {transpiledCode ? <SandpackCodeViewer code={transpiledCode} /> : null}
+      {transpiledCode && (
+        <SandpackCodeViewer code={transpiledCode} {...props} />
+      )}
       <iframe ref={hiddenIframeRef} style={{ display: "none" }} />
       <ErrorOverlay />
       <LoadingOverlay clientId="hidden" />

diff --git a/sandpack-react/src/styles/index.css b/sandpack-react/src/styles/index.css
@@ -113,7 +113,7 @@
   font-family: var(--sp-font-mono);
   font-size: var(--sp-font-size);
   color: var(--sp-colors-fg-active);
-  line-height: 1.4;
+  line-height: var(--sp-line-height);
 }
 
 .sp-code-editor {
@@ -149,6 +149,34 @@
   outline: 0;
 }
 
+.sp-cm .cm-scroller::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-track {
+  background-color: var(--sp-colors-bg-default);
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+/* Handle */
+.sp-cm .cm-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--sp-colors-fg-default);
+  border-radius: 9999px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.sp-cm .cm-scroller::-webkit-scrollbar-track {
+  border-left: 1px solid var(--sp-colors-fg-inactive);
+}
+
 .sp-transpiled-code {
   display: flex;
   flex-direction: column;

diff --git a/sandpack-react/src/themes/index.ts b/sandpack-react/src/themes/index.ts
@@ -79,7 +79,7 @@ export const sandpackDark: SandpackTheme = {
     defaultText: "#5a5a5a",
     inactiveText: "#1a1a1a",
     activeBackground: "#272727",
-    defaultBackground: "#131313",
+    defaultBackground: "#151515",
     inputBackground: "#2e2e2e",
     accent: "#90e86f",
     errorBackground: "#dac1fb",

diff --git a/website/docs/package.json b/website/docs/package.json
@@ -16,8 +16,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-docusaurus": "^0.6.0",
-    "@codesandbox/sandpack-react": "^0.6.0",
+    "@codesandbox/sandpack-docusaurus": "^0.7.1",
+    "@codesandbox/sandpack-react": "^0.7.1",
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/plugin-sitemap": "^2.0.0-beta.9",
     "@docusaurus/preset-classic": "2.0.0-beta.9",

diff --git a/website/docs/src/scss/_code.scss b/website/docs/src/scss/_code.scss
@@ -1,6 +1,6 @@
 pre {
   font: inherit;
-  background: #131313;
+  background: #151515;
 }
 
 code {

diff --git a/website/docs/src/scss/_general.scss b/website/docs/src/scss/_general.scss
@@ -47,7 +47,3 @@ main {
 aside {
   border: 0 !important;
 }
-
-.sp-wrapper .sp-layout {
-  border: 1px solid var(--sandpack-border-color) !important;
-}
diff --git a/website/docs/src/scss/_variables.scss b/website/docs/src/scss/_variables.scss
@@ -66,9 +66,10 @@ html[data-theme="dark"] {
   --sandpack-text-color: #ffffff;
   --sandpack-text-secondary-color: #979993;
 
-  --sandpack-background-color: #111111;
+  --sandpack-background-color: #090909;
   --sandpack-surface-color: #1a1a1a;
   --sandpack-border-color: #242424;
+  --ifm-code-background: #1d1d1d;
 
   --ifm-menu-color-background-active: rgba(111, 236, 91, 0.05);
   --ifm-hover-overlay: rgba(111, 236, 91, 0.05);

diff --git a/website/landing/components/Features/Features.tsx b/website/landing/components/Features/Features.tsx
@@ -97,7 +97,7 @@ export const Features: React.FC = () => {
             transition: "opacity .5s cubic-bezier(0.770, 0.000, 0.175, 1.000)",
 
             "@bp1": {
-              gap: "100px",
+              gap: "80px",
             },
 
             "@bp2": {

diff --git a/website/landing/components/Intro/Examples.tsx b/website/landing/components/Intro/Examples.tsx
@@ -69,7 +69,12 @@ export const Examples: React.FC = () => {
       <div ref={sandpackRefSectionTop} />
       <motion.div
         ref={sandpackRefSectionHeight}
-        style={{ x, position: "sticky", top: "calc(50vh - 25%)" }}
+        style={{
+          x,
+          position: "sticky",
+          top: "calc(50vh - 25%)",
+          marginBottom: "calc(50vh - 15%)",
+        }}
       >
         <Box
           css={{
@@ -89,7 +94,7 @@ export const Examples: React.FC = () => {
           <motion.div
             animate={{ opacity: visibility ? 0 : 1 }}
             initial={{ opacity: 0 }}
-            style={{ position: "relative", zIndex: 1 }}
+            style={{ position: "relative", zIndex: visibility ? -1 : 1 }}
           >
             <SandpackExample />
           </motion.div>

diff --git a/website/landing/components/Intro/Sections/Custom.tsx b/website/landing/components/Intro/Sections/Custom.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const ORIGINAL_CODE = `<Sandpack
@@ -91,7 +92,10 @@ export const CustomExample: React.FC = () => {
     <FadeAnimation>
       <Row ref={ref}>
         <Content>
-          <CardTitle>Easily customise the project to run</CardTitle>
+          <CardTitle>
+            Easily customise <br />
+            the project to run
+          </CardTitle>
           <CardDescription>
             Use the{" "}
             <a
@@ -105,6 +109,7 @@ export const CustomExample: React.FC = () => {
           </CardDescription>
 
           <CodeWrapper>
+            <Caption>Code snippet</Caption>
             <SandpackThemeProvider theme="sandpack-dark">
               <SandpackCodeEditor ref={codeEditorRef} showTabs={false} />
 
@@ -132,6 +137,7 @@ export const CustomExample: React.FC = () => {
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview
             options={{ customSetup: parseFromSandpackToJson(code) }}
           />

diff --git a/website/landing/components/Intro/Sections/Editor.tsx b/website/landing/components/Intro/Sections/Editor.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const ORIGINAL_CODE = `<Sandpack 
@@ -112,6 +113,7 @@ export const EditorExample: React.FC = () => {
           </CardDescription>
 
           <CodeWrapper>
+            <Caption>Code snippet</Caption>
             <SandpackThemeProvider theme="sandpack-dark">
               <SandpackCodeEditor ref={codeEditorRef} showTabs={false} />
 
@@ -140,6 +142,7 @@ export const EditorExample: React.FC = () => {
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview options={{ options: custom }} />
         </SandpackContainerMobile>
 

diff --git a/website/landing/components/Intro/Sections/Layout.tsx b/website/landing/components/Intro/Sections/Layout.tsx
@@ -23,6 +23,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 export const LayoutExample: React.FC = () => {
@@ -78,10 +79,10 @@ export const LayoutExample: React.FC = () => {
                 borderRadius: 0,
                 borderBottomLeftRadius: "16px",
                 borderBottomRightRadius: "16px",
-                padding: "0 15px",
               },
             }}
           >
+            <Caption>Code snippet</Caption>
             <SandpackThemeProvider theme="sandpack-dark">
               <SandpackCodeEditor />
             </SandpackThemeProvider>
@@ -91,6 +92,7 @@ export const LayoutExample: React.FC = () => {
         <SandpackContainerPlaceholder />
 
         <SandpackContainerMobile css={{ ".custom-layout": { height: "50vh" } }}>
+          <Caption>Sandpack preview</Caption>
           <SandpackProvider
             customSetup={{
               files: layoutFiles,

diff --git a/website/landing/components/Intro/Sections/LayoutContext.tsx b/website/landing/components/Intro/Sections/LayoutContext.tsx
@@ -32,8 +32,8 @@ import "@codesandbox/sandpack-react/dist/index.css";
 export default () => (
   <SandpackProvider template="vanilla">
     <SandpackThemeProvider>
-      <SandpackCodeEditor />
-      <SandpackTranspiledCode />
+      <SandpackCodeEditor showTabs={false} />
+      <SandpackTranspiledCode showTabs={false} />
     </SandpackThemeProvider>
   </SandpackProvider>
 );

diff --git a/website/landing/components/Intro/Sections/Template.tsx b/website/landing/components/Intro/Sections/Template.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const frameworkOptions: SandpackPredefinedTemplate[] = [
@@ -83,6 +84,7 @@ export const TemplateExample: React.FC = () => {
             </a>{" "}
             prop to get started with Sandpack in a few lines of code.
           </CardDescription>
+
           <SnippetButton
             ref={boxRef}
             onClick={shuffleTemplate}
@@ -111,14 +113,15 @@ export const TemplateExample: React.FC = () => {
                     y: mousePosition.y,
                   }}
                 >
-                  click to change
+                  Click to change
                 </ToolTip>
               </AnimatePresence>
             )}
           </div>
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview options={{ template }} />
         </SandpackContainerMobile>
 

diff --git a/website/landing/components/Intro/Sections/Theme.tsx b/website/landing/components/Intro/Sections/Theme.tsx
@@ -22,6 +22,7 @@ import {
   SandpackContainerMobile,
   FadeAnimation,
   THRESHOLD_VIEW,
+  Caption,
 } from "./common";
 
 const themeOptions: SandpackPredefinedTheme[] = [
@@ -73,18 +74,23 @@ export const ThemeExample: React.FC = () => {
     <FadeAnimation>
       <Row ref={ref}>
         <Content>
-          <CardTitle>Set a theme, or create your own</CardTitle>
+          <CardTitle>
+            Set a theme, or
+            <br /> create your own
+          </CardTitle>
           <CardDescription>
-            You can style Sandpack however you&apos;d like by applying a{" "}
+            You can style Sandpack however you&apos;d like! Use one of our
+            predefined{" "}
             <a
               href="https://sandpack.codesandbox.io/docs/getting-started/custom-ui#theming"
               rel="noreferrer"
               target="_blank"
             >
               <code>theme</code>
-            </a>
-            !
+            </a>{" "}
+            or apply your own.
           </CardDescription>
+
           <SnippetButton
             ref={boxRef}
             onClick={shuffleTheme}
@@ -113,14 +119,15 @@ export const ThemeExample: React.FC = () => {
                     y: mousePosition.y,
                   }}
                 >
-                  click to change
+                  Click to change
                 </ToolTip>
               </AnimatePresence>
             )}
           </div>
         </Content>
 
         <SandpackContainerMobile>
+          <Caption>Sandpack preview</Caption>
           <SandpackPreview options={{ theme }} />
         </SandpackContainerMobile>
 

diff --git a/website/landing/components/Intro/Sections/common.tsx b/website/landing/components/Intro/Sections/common.tsx
@@ -50,11 +50,10 @@ export const Content = styled("div", {
   alignItems: "center",
   display: "flex",
   flexDirection: "column",
-  gap: "20px",
+  gap: "10px",
   width: "100%",
 
   "@bp1": {
-    gap: "20px",
     width: "384px",
   },
 
@@ -201,11 +200,17 @@ export const FadeAnimation: React.FC = ({ children }) => {
 export const CodeWrapper = styled("div", {
   position: "relative",
   width: "100%",
+  marginTop: "30px",
 
   pre: { padding: 0 },
 
   ".sp-code-editor": {
     borderRadius: "16px",
-    padding: "0 15px",
+  },
+});
+
+export const Caption = styled("p", {
+  "@bp1": {
+    display: "none",
   },
 });
diff --git a/website/landing/components/Users/Users.tsx b/website/landing/components/Users/Users.tsx
@@ -89,7 +89,7 @@ export const Users: React.FC = () => {
             const { url, height, width } = user.logo;
 
             return (
-              <ListItem key={user.name}>
+              <ListItem key={user.name} css={{ flex: "none" }}>
                 <UserLink
                   css={{
                     transitionDelay: inView