Skip to content

Commit 3b4a55e

Browse files
MoOxMoOx
authored
Website: make it more mobile friendly (#531)
1 parent 91a4371 commit 3b4a55e

12 files changed

Lines changed: 204 additions & 76 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"prettier": "^1.16.4"
1313
},
1414
"scripts": {
15+
"prepare": "cd website && yarn prepare",
1516
"prerelease": "yarn prepare",
1617
"release": "lerna publish",
1718
"format": "yarn format:most && yarn format:re",

‎website/bsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"reason-react",
2626
"react-from-svg",
2727
"reason-react-native",
28-
"@moox/bs-react-helmet"
28+
"@moox/bs-react-helmet",
29+
"react-multiversal"
2930
]
3031
}

‎website/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"name": "bs-react-native-website",
44
"version": "0.0.0",
55
"scripts": {
6+
"prepare": "./scripts/inception-usage-trick ../node_modules/react-multiversal/bsconfig.json",
67
"svg:cleanup": "trash src/SVGs/components",
78
"svg:convert": "react-from-svg src/SVGs src/SVGs/components",
89
"svg:format": "find src/SVGs/components -name \"*.re\" | grep -v \"node_modules\" | xargs bsrefmt --in-place",
@@ -34,8 +35,9 @@
3435
"opn-cli": "^4.1.0",
3536
"react": "^16.8.0",
3637
"react-dom": "^16.8.0",
37-
"react-from-svg": "^0.1.3",
38+
"react-from-svg": "^0.2.0",
3839
"react-helmet": "^5.2.0",
40+
"react-multiversal": "https://github.com/MoOx/react-multiversal.git#c64ee3c",
3941
"react-native-web": "^0.11.2",
4042
"reason-future": "^2.4.0",
4143
"reason-highlightjs": "^0.2.0",

‎website/scripts/inception-usage-trick‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#!/usr/bin/env node
2+
3+
const fs = require('fs');
4+
const file = process.argv[2];
5+
const guts = fs.readFileSync(file)
6+
.toString()
7+
.replace(/.\/node_modules\/bs-react-native-monorepo\/git-monorepo-usage-trick/g, 'echo')
8+
.replace(/bs-react-native-monorepo\//g, '');
9+
10+
fs.writeFileSync(file, guts);

‎website/src/components/App.re‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
open Belt;
2+
open ReactNative;
3+
open ReactMultiversal;
24

35
type location = {. "pathname": string};
4-
open ReactNative;
56

67
[@react.component]
78
let make =
@@ -14,16 +15,26 @@ let make =
1415
<HeaderLarge currentLocation />
1516
{pageData
1617
->Option.map(pageData =>
17-
<Container
18-
style=Style.(style(~flexDirection=`row, ~height=100.->pct, ()))>
19-
<BsReactHelmet>
20-
<title>
21-
{("BsReactNative " ++ pageData.title)->React.string}
22-
</title>
23-
</BsReactHelmet>
24-
<Sidebar modulesIndex={pageData.modulesIndex} />
25-
<PageContent pageData />
26-
</Container>
18+
<>
19+
<Container
20+
maxWidth={1000.->Style.pt}
21+
style=Style.(
22+
style(
23+
~flexDirection=`row,
24+
~flexWrap=`wrap,
25+
~height=100.->pct,
26+
(),
27+
)
28+
)>
29+
<BsReactHelmet>
30+
<title>
31+
{("BsReactNative " ++ pageData.title)->React.string}
32+
</title>
33+
</BsReactHelmet>
34+
<PageContent pageData />
35+
<Sidebar modulesIndex={pageData.modulesIndex} />
36+
</Container>
37+
</>
2738
)
2839
->Option.getWithDefault(<Text> "Error :'("->React.string </Text>)}
2940
<HeaderLarge currentLocation />

‎website/src/components/Head.re‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,39 @@ let make = () =>
4242
rel="stylesheet"
4343
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css"
4444
/>
45+
<meta
46+
name="viewport"
47+
content="width=device-width, initial-scale=1, viewport-fit=cover"
48+
/>
49+
<style>
50+
{j|@-ms-viewport { width: device-width } @viewport { width: device-width }|j}
51+
->React.string
52+
</style>
4553
<style>
4654
{|
55+
html {
56+
width: 100%;
57+
height: 100%;
58+
overflow-x:hidden;
59+
background: #fff;
60+
}
61+
body {
62+
min-width: 100%;
63+
min-height: 100%;
64+
overflow-x: hidden;
65+
}
66+
67+
@supports(padding: max(0px)) {
68+
body {
69+
/* https://webkit.org/blog/7929/designing-websites-for-iphone-x/ */
70+
padding-left: env(safe-area-inset-left);
71+
padding-right: env(safe-area-inset-right);
72+
/* padding-left: max(12px, env(safe-area-inset-left)); */
73+
/* padding-right: max(12px, env(safe-area-inset-right)); */
74+
padding-bottom: env(safe-area-inset-bottom);
75+
}
76+
}
77+
4778
.hljs {
4879
font-size: 14px;
4980
padding: 20px;
@@ -79,6 +110,12 @@ color: #e45649
79110
80111
.stick { position: -webkit-sticky; position: sticky; }
81112
113+
.htmlContent {
114+
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
115+
font-size: 16px;
116+
line-height: 25px;
117+
}
118+
82119
|}
83120
->React.string
84121
</style>

‎website/src/components/HeaderLarge.re‎

Lines changed: 45 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
open ReactNative;
2+
open ReactMultiversal;
23

34
let styles =
45
StyleSheet.create(
@@ -24,16 +25,16 @@ let styles =
2425
(),
2526
),
2627
"barWrapper": style(~backgroundColor=Consts.Colors.dark, ()),
27-
"logo":
28+
"logoLink":
2829
style(
29-
~flex=1.,
30-
~flexDirection=`row,
30+
~flexGrow=1.,
31+
~flexShrink=1.,
3132
~position=`relative,
3233
~zIndex=1,
33-
~paddingHorizontal=pt(10.),
34-
~alignItems=`center,
3534
(),
3635
),
36+
"logo":
37+
style(~flexGrow=1., ~flexDirection=`row, ~alignItems=`center, ()),
3738
"logoText":
3839
style(
3940
~fontSize=18.,
@@ -43,15 +44,16 @@ let styles =
4344
),
4445
"links":
4546
style(
46-
~flex=1.,
47+
~flexGrow=1.,
48+
~flexShrink=1.,
4749
~flexDirection=`row,
50+
~flexWrap=`wrap,
4851
~justifyContent=`center,
4952
~alignItems=`center,
5053
(),
5154
),
5255
"link":
5356
style(
54-
~padding=pt(10.),
5557
~fontSize=18.,
5658
~lineHeight=18. *. 1.7,
5759
~fontWeight=`_300,
@@ -65,7 +67,14 @@ let styles =
6567
(),
6668
),
6769
"icons":
68-
style(~flex=1., ~flexDirection=`row, ~justifyContent=`flexEnd, ()),
70+
style(
71+
~flexGrow=1.,
72+
~flexShrink=1.,
73+
~flexDirection=`row,
74+
~flexWrap=`wrap,
75+
~justifyContent=`flexEnd,
76+
(),
77+
),
6978
"icon":
7079
style(
7180
~display=`flex,
@@ -83,23 +92,28 @@ let styles =
8392
[@react.component]
8493
let make = (~currentLocation) => {
8594
<View style=styles##menu>
86-
<Container style=styles##bar wrapperStyle=styles##barWrapper>
87-
<ViewLink style=styles##logo href={Consts.baseUrl ++ "/"}>
88-
<SVGBsReactNative
89-
width={36.->ReactFromSvg.Size.pt}
90-
height={36.->ReactFromSvg.Size.pt}
91-
fill=Consts.Colors.lightest
92-
/>
93-
<Text style=styles##logoText>
94-
{(" " ++ Consts.title)->ReasonReact.string}
95-
</Text>
95+
<Container
96+
maxWidth={1000.->Style.pt}
97+
style=styles##bar
98+
wrapperStyle=styles##barWrapper>
99+
<ViewLink href={Consts.baseUrl ++ "/"} style=styles##logoLink>
100+
<SpacedView style=styles##logo vertical=XS>
101+
<SVGBsReactNative
102+
width={36.->ReactFromSvg.Size.pt}
103+
height={36.->ReactFromSvg.Size.pt}
104+
fill=Consts.Colors.lightest
105+
/>
106+
<Text style=styles##logoText>
107+
{(" " ++ Consts.title)->ReasonReact.string}
108+
</Text>
109+
</SpacedView>
96110
</ViewLink>
97-
<View style=styles##links>
111+
<SpacedView style=styles##links vertical=XS>
98112
{Consts.menuLinks
99113
->Belt.Array.map(item => {
100114
let isActive =
101115
item.isActive(currentLocation##pathname, item.link);
102-
<TextLink
116+
<ViewLink
103117
key={item.link}
104118
href={item.link}
105119
style=Style.(
@@ -108,12 +122,14 @@ let make = (~currentLocation) => {
108122
isActive ? Some(styles##linkActive) : None,
109123
|])
110124
)>
111-
item.text->React.string
112-
</TextLink>;
125+
<SpacedView vertical=None horizontal=S>
126+
<Text> item.text->React.string </Text>
127+
</SpacedView>
128+
</ViewLink>;
113129
})
114130
->React.array}
115-
</View>
116-
<View style=styles##icons>
131+
</SpacedView>
132+
<SpacedView style=styles##icons vertical=XS>
117133
{Consts.socialLinks
118134
->Belt.Array.map(item =>
119135
<ViewLink
@@ -125,11 +141,14 @@ let make = (~currentLocation) => {
125141
~iconColor=Consts.Colors.light,
126142
~iconSize=22.->Svg.Size.pt,
127143
)}
128-
<Text style=styles##link> item.name->React.string </Text>
144+
<WindowSizeFilter.NotSmall>
145+
<Spacer size=XS />
146+
<Text style=styles##link> item.name->React.string </Text>
147+
</WindowSizeFilter.NotSmall>
129148
</ViewLink>
130149
)
131150
->ReasonReact.array}
132-
</View>
151+
</SpacedView>
133152
</Container>
134153
</View>;
135154
};

‎website/src/components/Homepage.re‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
open ReactNative;
2+
open ReactMultiversal;
23

34
let styles =
45
StyleSheet.create(
@@ -31,7 +32,7 @@ let make = () =>
3132
<Text
3233
style=Style.(
3334
style(
34-
~fontSize=52.,
35+
~fontSize=48.,
3536
~fontWeight=`_700,
3637
~color=Consts.Colors.light,
3738
(),
@@ -53,6 +54,7 @@ let make = () =>
5354
|])
5455
)>
5556
<SVGReact width="150%" height="150%" fill="rgba(200,200,200, 0.2)" />
57+
<Spacer size=L />
5658
<SVGReasonOutline
5759
width="150%"
5860
height="150%"
@@ -72,6 +74,7 @@ let make = () =>
7274
<Text style=styles##baseline>
7375
"All your React Native knowledge, codified"->React.string
7476
</Text>
77+
<Spacer size=L />
7578
<Text style=styles##baseline>
7679
"All the safeness of Reason at your disposal "->React.string
7780
</Text>

0 commit comments

Comments
 (0)