Skip to content

Commit a492d52

Browse files
captainsafiacaptainsafia
authored
Remove Express host and use built-in styled components support (#551)
1 parent 0e208b5 commit a492d52

File tree

85 files changed

+458
-1170
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+458
-1170
lines changed

‎.babelrc‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎components/button/styled/index.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled, { css } from "styled-components";
22
import { spacing } from "@common/constants";
33
import { colors } from "@common/colors";
4-
import { sif, padding, margin } from "@common/styled";
4+
import { sif } from "@common/styled";
55
import { lighten } from "polished";
66
type StyledButtonsProps = {
77
padding?: string;
@@ -10,8 +10,8 @@ type StyledButtonsProps = {
1010

1111
const StyledButtons = styled.div<StyledButtonsProps>`
1212
display: flex;
13-
${padding};
14-
${margin};
13+
${({ padding }) => padding && css`padding: ${padding};`};
14+
${({ margin }) => margin && css`margin: ${margin};`};
1515
`;
1616

1717
const Label = styled.div``;
@@ -26,7 +26,7 @@ const Icon = styled.div`
2626

2727
const StyledButtonBase = styled.a.attrs({
2828
className: "ripple",
29-
})`
29+
})<{ $primary?: boolean; $secondary?: boolean; $active?: boolean }>`
3030
display: flex;
3131
align-items: center;
3232
padding: ${spacing.unit}px ${spacing.gutter}px;
@@ -57,7 +57,7 @@ const StyledButtonBase = styled.a.attrs({
5757
--ripple-color: rgba(255, 255, 255, 0.5);
5858
--animation-tick: 200;
5959
60-
${sif("primary")(
60+
${sif("$primary")(
6161
css`
6262
background-color: #f02563;
6363
color: white;
@@ -69,7 +69,7 @@ const StyledButtonBase = styled.a.attrs({
6969
}
7070
`
7171
)};
72-
${sif("secondary")(css`
72+
${sif("$secondary")(css`
7373
background: rgba(163, 183, 213, 0.15);
7474
color: #c8d4e5;
7575
padding-left: 18px;
@@ -78,7 +78,7 @@ const StyledButtonBase = styled.a.attrs({
7878
box-shadow: 0px 2px 6px rgba(8, 12, 16, 0.08);
7979
text-shadow: 0px 1px 2px rgba(8, 12, 16, 0.5);
8080
`)}
81-
${sif("active")(css`
81+
${sif("$active")(css`
8282
background-color: ${colors.darkPrimaryColor};
8383
`)}
8484
&:not(:first-child) {

‎components/content-section/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Title = ({ children, typeProps, ...titleProps }: TitleProps) => (
1717
type ContentSectionProps = {
1818
index?: number;
1919
children?: React.ReactNode;
20-
center?: boolean;
20+
$center?: boolean;
2121
};
2222

2323
const ContentSectionComponent = ({
@@ -30,7 +30,7 @@ const ContentSectionComponent = ({
3030
<StyledContentSection {...rest}>
3131
<StyledContentSection.Wrapper>
3232
{React.Children.map(children, (child, index) =>
33-
React.cloneElement(child as React.ReactElement, { isOdd })
33+
React.cloneElement(child as React.ReactElement, { $isOdd: isOdd })
3434
)}
3535
</StyledContentSection.Wrapper>
3636
</StyledContentSection>

‎components/content-section/styled/index.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ const Title = styled.div`
1919
`;
2020

2121
type PaneProps = {
22-
center?: boolean;
23-
full?: boolean;
24-
visual?: boolean;
25-
isOdd?: boolean;
22+
$center?: boolean;
23+
$full?: boolean;
24+
$visual?: boolean;
25+
$isOdd?: boolean;
2626
};
2727

2828
const Pane = styled.div<PaneProps>`
29-
${sif("center")(css`
29+
${sif("$center")(css`
3030
display: flex;
3131
flex-direction: column;
3232
align-items: center;
@@ -37,7 +37,7 @@ const Pane = styled.div<PaneProps>`
3737
}
3838
`)} @media (min-width: 801px) {
3939
width: 50%;
40-
${sif("full")(
40+
${sif("$full")(
4141
css`
4242
width: 100%;
4343
`
@@ -48,7 +48,7 @@ const Pane = styled.div<PaneProps>`
4848
display: block;
4949
}
5050
51-
${sif("visual")(
51+
${sif("$visual")(
5252
css`
5353
@media (max-width: 800px) {
5454
padding-top: 80px;
@@ -67,12 +67,12 @@ const Pane = styled.div<PaneProps>`
6767
padding-left: ${gutter}px;
6868
padding-right: 0;
6969
}
70-
${sif("visual")(
70+
${sif("$visual")(
7171
css`
7272
width: 48%;
7373
`
7474
)};
75-
${sif("isOdd")(
75+
${sif("$isOdd")(
7676
css`
7777
&:nth-of-type(1) {
7878
order: 2;

‎components/demo-video/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
const Index = () => (
22
<video
3-
poster="/static/[email protected]"
3+
poster="/[email protected]"
44
preload="auto"
55
autoPlay
66
muted
77
loop
88
>
9-
<source src="/static/[email protected]" type="video/mp4" />
10-
<source src="/static/[email protected]" type="video/webm" />
9+
<source src="/[email protected]" type="video/mp4" />
10+
<source src="/[email protected]" type="video/webm" />
1111
</video>
1212
);
1313

‎components/download-buttons.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ export const DownloadFeaturette = ({ platform, assetUrl }: OSProps) => {
1818
<>
1919
<Buttons padding="20px 0 0 0">
2020
<Button
21-
primary
21+
$primary
2222
label={`Try the nteract desktop app for ${platform}`}
2323
href={assetUrl}
24-
icon="/static/icon_nteract_download.svg"
24+
icon="/icon_nteract_download.svg"
2525
/>
2626
</Buttons>
27-
<Type.p small padding="10px 0 0 0">
27+
<Type.p $small $padding="10px 0 0 0">
2828
<span style={{ display: "flex", alignItems: "center" }}>
2929
Download for&nbsp;
3030
<a

‎components/footer/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const Footer = () => (
88
<StyledFooter.Wrapper>
99
<StyledFooter.Section>
1010
<Link href="https://numfocus.org/" target="_blank">
11-
<img src="/static/sponsor-numfocus.png" alt="NumFocus" />
11+
<img src="/sponsor-numfocus.png" alt="NumFocus" />
1212
</Link>
1313
</StyledFooter.Section>
1414
<StyledFooter.Section>

‎components/head/index.tsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ const Index = ({
1111
themeColor = "#334865",
1212
}: HeadProps) => (
1313
<Head>
14-
<title>
15-
nteract
16-
{pageTitle}
17-
</title>
14+
<title>{`nteract${pageTitle}`}</title>
1815
<meta charSet="utf-8" />
1916
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
2017
<link rel="canonical" href="https://nteract.io/" />
@@ -25,80 +22,80 @@ const Index = ({
2522
<link
2623
rel="apple-touch-icon"
2724
sizes="57x57"
28-
href="/static/icons/apple-icon-57x57.png"
25+
href="/icons/apple-icon-57x57.png"
2926
/>
3027
<link
3128
rel="apple-touch-icon"
3229
sizes="60x60"
33-
href="/static/icons/apple-icon-60x60.png"
30+
href="/icons/apple-icon-60x60.png"
3431
/>
3532
<link
3633
rel="apple-touch-icon"
3734
sizes="72x72"
38-
href="/static/icons/apple-icon-72x72.png"
35+
href="/icons/apple-icon-72x72.png"
3936
/>
4037
<link
4138
rel="apple-touch-icon"
4239
sizes="76x76"
43-
href="/static/icons/apple-icon-76x76.png"
40+
href="/icons/apple-icon-76x76.png"
4441
/>
4542
<link
4643
rel="apple-touch-icon"
4744
sizes="114x114"
48-
href="/static/icons/apple-icon-114x114.png"
45+
href="/icons/apple-icon-114x114.png"
4946
/>
5047
<link
5148
rel="apple-touch-icon"
5249
sizes="120x120"
53-
href="/static/icons/apple-icon-120x120.png"
50+
href="/icons/apple-icon-120x120.png"
5451
/>
5552
<link
5653
rel="apple-touch-icon"
5754
sizes="144x144"
58-
href="/static/icons/apple-icon-144x144.png"
55+
href="/icons/apple-icon-144x144.png"
5956
/>
6057
<link
6158
rel="apple-touch-icon"
6259
sizes="152x152"
63-
href="/static/icons/apple-icon-152x152.png"
60+
href="/icons/apple-icon-152x152.png"
6461
/>
6562
<link
6663
rel="apple-touch-icon"
6764
sizes="180x180"
68-
href="/static/icons/apple-icon-180x180.png"
65+
href="/icons/apple-icon-180x180.png"
6966
/>
7067
<link
7168
rel="icon"
7269
type="image/png"
7370
sizes="192x192"
74-
href="/static/icons/android-icon-192x192.png"
71+
href="/icons/android-icon-192x192.png"
7572
/>
7673
<link
7774
rel="icon"
7875
type="image/png"
7976
sizes="32x32"
80-
href="/static/icons/favicon-32x32.png"
77+
href="/icons/favicon-32x32.png"
8178
/>
8279
<link
8380
rel="icon"
8481
type="image/png"
8582
sizes="96x96"
86-
href="/static/icons/favicon-96x96.png"
83+
href="/icons/favicon-96x96.png"
8784
/>
8885
<link
8986
rel="icon"
9087
type="image/png"
9188
sizes="16x16"
92-
href="/static/icons/favicon-16x16.png"
89+
href="/icons/favicon-16x16.png"
9390
/>
94-
<link rel="manifest" href="/static/icons/manifest.json" />
91+
<link rel="manifest" href="/icons/manifest.json" />
9592
<meta name="msapplication-TileColor" content="#334865" />
9693
<meta
9794
name="msapplication-TileImage"
98-
content="/static/icons/ms-icon-144x144.png"
95+
content="/icons/ms-icon-144x144.png"
9996
/>
10097
<meta name="theme-color" content="#334865" />
101-
<link rel="shortcut icon" href="/static/icons/favicon.ico" />
98+
<link rel="shortcut icon" href="/icons/favicon.ico" />
10299

103100
<link rel="preconnect" href="https://nteract.io/" />
104101
<link rel="prefetch" href="https://nteract.io/" />
@@ -121,7 +118,7 @@ const Index = ({
121118
property="og:title"
122119
content="Take your computing experience to the next level."
123120
/>
124-
<meta property="og:image" content="/static/opengraph.png" />
121+
<meta property="og:image" content="/opengraph.png" />
125122
<meta
126123
property="og:description"
127124
content="nteract is a desktop application that allows you to develop rich documents that contain prose, executable code, and images."
@@ -140,7 +137,7 @@ const Index = ({
140137
name="twitter:description"
141138
content="nteract is a desktop application that allows you to develop rich documents that contain prose, executable code, and images."
142139
/>
143-
<meta name="twitter:image" content="/static/opengraph.png" />
140+
<meta name="twitter:image" content="/opengraph.png" />
144141

145142
<meta name="theme-color" content={themeColor} />
146143
</Head>

‎components/header/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,8 @@ const MobileMenu = ({ open, ...rest }: MobileMenuProps) =>
111111

112112
interface NavItemsProps extends NavConfig {
113113
onClick?: () => void;
114-
desktop?: boolean;
115-
row?: boolean;
114+
$desktop?: boolean;
115+
$row?: boolean;
116116
}
117117

118118
const NavItems = ({ items, ...rest }: NavItemsProps) => {
@@ -184,24 +184,24 @@ class Header extends React.PureComponent<{}, HeaderState> {
184184
<Link href="/" prefetch>
185185
<StyledHeader.Logo>
186186
<img
187-
src="/static/feature_nteract_logo_header_white.svg"
187+
src="/feature_nteract_logo_header_white.svg"
188188
alt="nteract"
189189
/>
190190
</StyledHeader.Logo>
191191
</Link>
192-
<NavItems {...leftNav} desktop />
192+
<NavItems {...leftNav} $desktop />
193193
</StyledHeader.Section>
194194

195195
<StyledHeader.Section>
196-
<NavItems {...rightNav} desktop />
197-
<NavItems {...socialItems} desktop row />
196+
<NavItems {...rightNav} $desktop />
197+
<NavItems {...socialItems} $desktop $row />
198198
</StyledHeader.Section>
199199
</StyledHeader.Wrapper>
200200
</StyledHeader>
201201
<MobileMenu open={this.state.mobileMenuOpen}>
202202
<NavItems onClick={this.handleClick} {...leftNav} />
203203
<NavItems onClick={this.handleClick} {...rightNav} />
204-
<NavItems onClick={this.handleClick} {...socialItems} row />
204+
<NavItems onClick={this.handleClick} {...socialItems} $row />
205205
<StyledHero.Background>
206206
<Pattern />
207207
</StyledHero.Background>

‎components/header/styled/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import styled, { css } from "styled-components";
22
import { spacing } from "@common/constants";
33
import { wrapperStyles, sif } from "@common/styled";
44

5-
const NavWrapper = styled.div`
6-
${sif("desktop")(
5+
const NavWrapper = styled.div<{ $desktop?: boolean; $row?: boolean }>`
6+
${sif("$desktop")(
77
css`
88
@media (max-width: 800px) {
99
display: none;
1010
}
1111
`
1212
)};
13-
${sif("row")(
13+
${sif("$row")(
1414
css`
1515
@media (min-width: 801px) {
1616
padding-left: 10px;

0 commit comments

Comments
 (0)