fixes

codesandbox · Nov 25, 2021 · 90694b5 · 90694b5
1 parent 70bfc29
commit 90694b5
Show file tree

Hide file tree

Showing 20 changed files with 73 additions and 102 deletions.
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": {

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 {

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/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

diff --git a/website/landing/components/common/Card.tsx b/website/landing/components/common/Card.tsx
@@ -25,15 +25,7 @@ export const Card = styled("div", {
     size: {
       small: {
         gap: "10px",
-        width: "256px",
-
-        "@bp2": {
-          width: "240px",
-        },
-
-        "@bp3": {
-          width: "320px",
-        },
+        width: "100%",
       },
     },
   },
@@ -83,10 +75,11 @@ export const CardDescription = styled("p", {
 
   ".external-link": {
     color: "$$codeBlockForeground",
-    textDecoration: "underline",
+    textDecoration: "none",
 
     "&:hover": {
-      textDecoration: "none",
+      textDecoration: "underline",
+      color: "$primary",
     },
   },
 
@@ -112,6 +105,14 @@ export const CardDescription = styled("p", {
       background: "$$codeBlockBackground",
       color: "$$codeBlockForeground",
       transition: "all .2s ease",
+
+      "&:after": {
+        content: "↗",
+        display: "inline-block",
+        marginLeft: "8px",
+        position: "relative",
+        top: 1,
+      },
     },
   },
 

diff --git a/website/landing/components/common/CodeBlock.tsx b/website/landing/components/common/CodeBlock.tsx
@@ -17,11 +17,12 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
     <Box
       css={{
         width: "100%",
+        marginTop: "30px",
         pre: { padding: 0 },
 
         ".cm-editor": {
           borderRadius: oneLiner ? "78px" : "16px",
-          padding: "15px",
+          padding: "10px 5px",
         },
       }}
     >

diff --git a/website/landing/components/common/List.tsx b/website/landing/components/common/List.tsx
@@ -6,4 +6,4 @@ export const List = styled("ul", {
   padding: 0,
 });
 
-export const ListItem = styled("li", {});
+export const ListItem = styled("li", { flex: 1 });
diff --git a/website/landing/components/common/Section.tsx b/website/landing/components/common/Section.tsx
@@ -8,7 +8,7 @@ export const SectionWrapper = styled("div", {
   $$backgroundColor: palette.darkBackground,
   $$primaryTextColor: palette.darkTextPrimary,
   $$secondaryTextColor: palette.darkTextSecondary,
-  $$codeBlockBackground: palette.lightTextSecondary,
+  $$codeBlockBackground: "#1d1d1d",
   $$codeBlockForeground: palette.lightBackground,
 
   background: "$$backgroundColor",