Skip to content

Commit

Permalink
fix: amplitude (#213)
Browse files Browse the repository at this point in the history
* fix: amplitude

* sync version pkg

* mobile fixes

* fix animation
  • Loading branch information
danilowoz authored Dec 1, 2021
1 parent d04832c commit 2ce34d4
Show file tree
Hide file tree
Showing 17 changed files with 127 additions and 111 deletions.
4 changes: 2 additions & 2 deletions plugins/docusaurus/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@codesandbox/sandpack-docusaurus",
"private": true,
"version": "0.7.1",
"version": "0.0.1",
"description": "",
"main": "src/index.js",
"publishConfig": {
Expand All @@ -11,7 +11,7 @@
"build": "echo 1"
},
"dependencies": {
"@codesandbox/sandpack-react": "^0.7.1",
"@codesandbox/sandpack-react": "*",
"@docusaurus/core": "2.0.0-beta.9",
"@docusaurus/utils-validation": "2.0.0-beta.9"
},
Expand Down
4 changes: 2 additions & 2 deletions website/docs/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ module.exports = {
;if(!Object.prototype.hasOwnProperty.call(r._iq,e)){r._iq[e]={_q:[]};v(r._iq[e])
}return r._iq[e]};e.amplitude=r})(window,document);
amplitude.getInstance().init(${API_KEY});
amplitude.logEvent("pageview", { path: window.location.href })
amplitude.getInstance().init("${API_KEY}");
amplitude.logEvent("pageview", { path: window.location.href, source: "sandpack-docs" })
`
: "",
},
Expand Down
10 changes: 7 additions & 3 deletions website/docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
"typecheck": "tsc"
},
"dependencies": {
"@codesandbox/sandpack-docusaurus": "^0.7.1",
"@codesandbox/sandpack-react": "^0.7.1",
"@codesandbox/sandpack-docusaurus": "*",
"@codesandbox/sandpack-react": "*",
"@docusaurus/core": "2.0.0-beta.9",
"@docusaurus/plugin-sitemap": "^2.0.0-beta.9",
"@docusaurus/preset-classic": "2.0.0-beta.9",
Expand Down Expand Up @@ -45,7 +45,11 @@
"typescript": "^4.3.5"
},
"browserslist": {
"production": [">0.5%", "not dead", "not op_mini all"],
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ const IllustrationWrapper = styled("div", {
display: "flex",
justifyContent: "center",
position: "relative",
width: "343px",
height: "512px",

"&::after": {
background: "$$wrapperBackground",
Expand Down
2 changes: 1 addition & 1 deletion website/landing/components/AdvancedUsage/UsageExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const UsageExample: React.FC<UsageExampleProps> = ({
});

return (
<Box css={{ height: "100vh", maxHeight: "1080px" }}>
<Box css={{ "@bp2": { height: "100vh", maxHeight: "1080px" } }}>
<Box
css={{
alignItems: "center",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.svg {
width: 160%;
width: 120%;
height: 400px;

position: relative;
left: 50%;
Expand All @@ -12,6 +13,13 @@
--ease-elastic: cubic-bezier(0.8, -2, 0.2, 2);
}

@media (min-width: 1040px) {
.svg {
width: 160%;
height: auto;
}
}

@keyframes editor {
0% {
transform: translateY(-100px) scale(0.9);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.svg {
width: 180%;
width: 140%;
height: auto;

position: relative;
Expand Down Expand Up @@ -29,6 +29,12 @@
--ease-elastic: cubic-bezier(0.8, -1, 0.2, 2);
}

@media (min-width: 1040px) {
.svg {
width: 180%;
}
}

/* motion */
@keyframes fadeIn {
from {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.svg {
width: 180%;
width: 140%;
height: auto;

position: relative;
Expand All @@ -11,6 +11,12 @@
--ease-elastic: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 1040px) {
.svg {
width: 180%;
}
}

/* motion */
@keyframes movement {
to {
Expand Down
19 changes: 8 additions & 11 deletions website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ export const HeroDesktop: React.FC = () => {
scrollY.onChange((updatedScroll) => setScrollPosition(updatedScroll));

useEffect(() => {
const isAnimationComplete = scrollPosition >= sectionTop + scrollHeight;
if (isAnimationComplete !== animationComplete) {
setAnimationComplete(isAnimationComplete);
}
const isAnimationComplete =
scrollPosition >= sectionTop + scrollHeight * 1.2 + 2;

setAnimationComplete(isAnimationComplete);
}, [animationComplete, scrollHeight, scrollPosition, sectionTop]);

// Push editor into view and adjust wrapper's border radius.
Expand All @@ -63,7 +63,7 @@ export const HeroDesktop: React.FC = () => {
// Rotate logo.
const rotate = useTransform(
scrollY,
[sectionTop + scrollHeight, sectionTop + scrollHeight * 1.2],
[sectionTop + scrollHeight * 0.9, sectionTop + scrollHeight * 1.1],
[-90, 0]
);

Expand All @@ -84,10 +84,7 @@ export const HeroDesktop: React.FC = () => {
// Sandpack dynamic preview opacity.
const sandpackPreviewOpacity = useTransform(
scrollY,
[
sectionTop + (sectionHeight / 4) * 2,
sectionTop + (sectionHeight / 4) * 2 + 1,
],
[sectionTop + scrollHeight * 1.2 + 1, sectionTop + scrollHeight * 1.2 + 2],
[0, 1]
);

Expand Down Expand Up @@ -140,7 +137,7 @@ export const HeroDesktop: React.FC = () => {

const finishAnimation = () => {
window.scrollTo({
top: sectionTop + scrollHeight * 2,
top: sectionTop + scrollHeight * 1.2 + 2,
behavior: "smooth",
});
};
Expand All @@ -164,7 +161,7 @@ export const HeroDesktop: React.FC = () => {
return (
<AnimatedBox
ref={sectionRef}
css={{ height: "300vh" }}
css={{ height: "200vh" }}
id="container"
style={
{
Expand Down
2 changes: 1 addition & 1 deletion website/landing/components/Hero/HeroMobile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export const HeroMobile: React.FC = () => {
</Box>
<Clipboard />
<Resources />
<Box css={{ display: "flex", justifyContent: "center" }}>
<Box css={{ display: "flex", justifyContent: "center", width: "100%" }}>
<SandpackPreview />
</Box>
</Box>
Expand Down
6 changes: 3 additions & 3 deletions website/landing/components/Intro/Examples.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ export const Examples: React.FC = () => {
}, []);

const scrollRangeX = [
sandpackSectionTop * 0.8,
sandpackSectionTop,
(sandpackSectionTop + sandpackSectionHeight) * 0.9,
sandpackSectionTop * 0.9,
sandpackSectionTop * 0.95,
(sandpackSectionTop + sandpackSectionHeight) * 0.85,
];

// Max width that the left container can grow
Expand Down
5 changes: 3 additions & 2 deletions website/landing/components/Intro/Sections/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,16 @@ export const EditorExample: React.FC = () => {
<Content>
<CardTitle>Custom UI with ease</CardTitle>
<CardDescription>
Customizing the UI is possible with the{" "}
With the{" "}
<a
href="https://sandpack.codesandbox.io/docs/getting-started/custom-ui#visual-options"
rel="noreferrer"
target="_blank"
>
<code>options</code>
</a>{" "}
prop.
prop you can customize the UI and leverage the built-in component
settings.
</CardDescription>

<CodeWrapper
Expand Down
4 changes: 3 additions & 1 deletion website/landing/components/Intro/Sections/Template.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,9 @@ export const TemplateExample: React.FC = () => {
>
<code>template</code>
</a>{" "}
prop to get started with Sandpack in a few lines of code.
prop to get started with Sandpack in a few lines of code. Each
template contains all the <code>files</code> and{" "}
<code>dependencies</code> needed to start a project right away.
</CardDescription>

<SnippetButton
Expand Down
16 changes: 8 additions & 8 deletions website/landing/components/common/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,14 @@ export const CardDescription = styled("p", {
fontSize: "18px",
textAlign: "start",

"a code:after": {
content: "↗",
display: "inline-block",
marginLeft: "8px",
position: "relative",
top: 1,
},

"a code:hover": {
background: "$primary",
color: "$darkBackground",
Expand All @@ -108,14 +116,6 @@ export const CardDescription = styled("p", {
background: "$$codeBlockBackground",
color: "$$codeBlockForeground",
transition: "$default",

"&:after": {
content: "↗",
display: "inline-block",
marginLeft: "8px",
position: "relative",
top: 1,
},
},
},

Expand Down
4 changes: 3 additions & 1 deletion website/landing/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,17 @@
"lint": "next lint"
},
"dependencies": {
"@codesandbox/sandpack-react": "^0.9.2",
"@codesandbox/sandpack-react": "*",
"@stitches/react": "^1.2.5",
"amplitude-js": "^8.13.0",
"framer-motion": "^5.3.2",
"next": "12.0.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-intersection-observer": "^8.32.2"
},
"devDependencies": {
"@types/amplitude-js": "^8.0.2",
"@types/node": "16.11.6",
"@types/react": "17.0.33",
"eslint-config-next": "12.0.2",
Expand Down
49 changes: 10 additions & 39 deletions website/landing/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,19 @@
import "@codesandbox/sandpack-react/dist/index.css";
import amplitude from "amplitude-js";
import type { AppProps } from "next/app";
import Script from "next/script";

const API_KEY = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY;

function MyApp({ Component, pageProps }: AppProps): React.ReactElement {
return (
<>
{API_KEY && (
<Script
dangerouslySetInnerHTML={{
__html: `(function(e,t){var r=e.amplitude||{_q:[],_iq:{}};var n=t.createElement("script")
;n.type="text/javascript"
;n.integrity="sha384-4rr7CTymHc64YjTTL6O3ktfsHYI1yJnQdmKv4zFoe+frjXb05MfzzuLLIAgJ/XHs"
;n.crossOrigin="anonymous";n.async=true
;n.src="https://cdn.amplitude.com/libs/amplitude-8.11.0-min.gz.js"
;n.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(n,s)
;function i(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove"]
;for(var c=0;c<a.length;c++){i(o,a[c])}r.Identify=o;var u=function(){this._q=[]
;return this}
;var p=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var l=0;l<p.length;l++){i(u,p[l])}r.Revenue=u
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId","setLibrary","setTransport"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var r=0;r<d.length;r++){t(d[r])}}v(r);r.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!Object.prototype.hasOwnProperty.call(r._iq,e)){r._iq[e]={_q:[]};v(r._iq[e])
}return r._iq[e]};e.amplitude=r})(window,document);
if (API_KEY && process.browser) {
amplitude.getInstance().init(`"${API_KEY}"`);
amplitude.logEvent("pageview", {
path: window.location.href,
source: "sandpack",
});
}

amplitude.getInstance().init(${API_KEY});
amplitude.logEvent("pageview", { path: window.location.href })`,
}}
id="foo"
/>
)}
<Component {...pageProps} />
</>
);
function MyApp({ Component, pageProps }: AppProps): React.ReactElement {
return <Component {...pageProps} />;
}

export default MyApp;
Loading

0 comments on commit 2ce34d4

Please sign in to comment.