nasso.dev
my fork of the bluesky client
Create build step for the web server (#289)
* Create build step for the web server
* Update bskyweb routes and 404 behavior
authored by
Paul Frazee
and committed by
GitHub
8d2e649b
8629e167
+1
-1
app.json
+1
-1
app.json
+1
-2
bskyweb/README.md
+1
-2
bskyweb/README.md
+6
-3
bskyweb/cmd/bskyweb/server.go
+6
-3
bskyweb/cmd/bskyweb/server.go
···
94
// configure routes
95
e.File("/robots.txt", "static/robots.txt")
96
e.Static("/static", "static")
97
98
e.GET("/", server.WebHome)
99
100
// generic routes
101
-
e.GET("/contacts", server.WebGeneric)
102
e.GET("/search", server.WebGeneric)
103
e.GET("/notifications", server.WebGeneric)
104
e.GET("/settings", server.WebGeneric)
105
-
e.GET("/settings", server.WebGeneric)
106
107
// profile endpoints; only first populates info
108
e.GET("/profile/:handle", server.WebProfile)
109
e.GET("/profile/:handle/follows", server.WebGeneric)
110
-
e.GET("/profile/:handle/following", server.WebGeneric)
111
112
// post endpoints; only first populates info
113
e.GET("/profile/:handle/post/:rkey", server.WebPost)
···
94
// configure routes
95
e.File("/robots.txt", "static/robots.txt")
96
e.Static("/static", "static")
97
+
e.Static("/static/js", "../web-build/static/js")
98
99
e.GET("/", server.WebHome)
100
101
// generic routes
102
e.GET("/search", server.WebGeneric)
103
e.GET("/notifications", server.WebGeneric)
104
e.GET("/settings", server.WebGeneric)
105
+
e.GET("/sys/debug", server.WebGeneric)
106
+
e.GET("/sys/log", server.WebGeneric)
107
+
e.GET("/support", server.WebGeneric)
108
+
e.GET("/support/privacy", server.WebGeneric)
109
110
// profile endpoints; only first populates info
111
e.GET("/profile/:handle", server.WebProfile)
112
e.GET("/profile/:handle/follows", server.WebGeneric)
113
+
e.GET("/profile/:handle/followers", server.WebGeneric)
114
115
// post endpoints; only first populates info
116
e.GET("/profile/:handle/post/:rkey", server.WebPost)
+109
-11
bskyweb/templates/base.html
+109
-11
bskyweb/templates/base.html
···
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta name="referrer" content="origin-when-cross-origin">
7
<title>{%- block head_title -%}Bluesky{%- endblock -%}</title>
8
<!-- Hello Humans! API docs at https://atproto.com -->
9
<style>
10
-
/* These styles make the body full-height */
11
-
html, body { height: 100%; }
12
-
/* These styles disable body scrolling if you are using <ScrollView> */
13
-
body { overflow: hidden; }
14
-
/* These styles make the root element full-height */
15
-
#app-root { display:flex; height:100%; }
16
/* Remove focus state on inputs */
17
-
*:focus { outline: 0; }
18
</style>
19
-
{% block head_bundle -%}<script defer src="/static/bundle.web.js"></script>{%- endblock %}
20
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
21
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
22
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
···
38
</head>
39
<body>
40
{%- block body_all %}
41
-
<div id="app-root">
42
<noscript>
43
{%- block noscript_extra %}{% endblock -%}
44
<h1>Javascript Required</h1>
45
<p>This is a heavily interactive web application, and Javascript is required. Simple HTML interfaces are possible, but that is not what this is.
46
<p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
47
</noscript>
48
-
</div>
49
{% endblock -%}
50
</body>
51
</html>
···
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8" />
5
+
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
6
+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover">
7
<meta name="referrer" content="origin-when-cross-origin">
8
<title>{%- block head_title -%}Bluesky{%- endblock -%}</title>
9
+
10
<!-- Hello Humans! API docs at https://atproto.com -->
11
+
12
<style>
13
+
/**
14
+
* Extend the react-native-web reset:
15
+
* https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
16
+
*/
17
+
html,
18
+
body,
19
+
#root {
20
+
width: 100%;
21
+
/* To smooth any scrolling behavior */
22
+
-webkit-overflow-scrolling: touch;
23
+
margin: 0px;
24
+
padding: 0px;
25
+
/* Allows content to fill the viewport and go beyond the bottom */
26
+
min-height: 100%;
27
+
}
28
+
#root {
29
+
flex-shrink: 0;
30
+
flex-basis: auto;
31
+
flex-grow: 1;
32
+
display: flex;
33
+
flex: 1;
34
+
}
35
+
36
+
html {
37
+
scroll-behavior: smooth;
38
+
/* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
39
+
-webkit-text-size-adjust: 100%;
40
+
height: calc(100% + env(safe-area-inset-top));
41
+
}
42
+
43
+
body {
44
+
display: flex;
45
+
/* Allows you to scroll below the viewport; default value is visible */
46
+
overflow-y: auto;
47
+
overscroll-behavior-y: none;
48
+
text-rendering: optimizeLegibility;
49
+
-webkit-font-smoothing: antialiased;
50
+
-moz-osx-font-smoothing: grayscale;
51
+
-ms-overflow-style: scrollbar;
52
+
}
53
+
/* Enable for apps that support dark-theme */
54
+
/*@media (prefers-color-scheme: dark) {
55
+
body {
56
+
background-color: black;
57
+
}
58
+
}*/
59
+
60
/* Remove focus state on inputs */
61
+
*:focus {
62
+
outline: 0;
63
+
}
64
+
/* Remove default link styling */
65
+
a {
66
+
color: inherit;
67
+
}
68
+
a[role="link"]:hover {
69
+
text-decoration: underline;
70
+
}
71
+
72
+
/* ProseMirror */
73
+
.ProseMirror {
74
+
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
75
+
min-height: 140px;
76
+
}
77
+
.ProseMirror p {
78
+
margin: 0;
79
+
}
80
+
.ProseMirror p.is-editor-empty:first-child::before {
81
+
color: #8d8e96;
82
+
content: attr(data-placeholder);
83
+
float: left;
84
+
height: 0;
85
+
pointer-events: none;
86
+
}
87
+
.ProseMirror .mention {
88
+
color: #0085ff;
89
+
}
90
+
.ProseMirror a {
91
+
color: #0085ff;
92
+
cursor: pointer;
93
+
}
94
+
.tippy-content .items {
95
+
border-radius: 6px;
96
+
background: #F3F3F8;
97
+
border: 1px solid #e0d9d9;
98
+
padding: 3px 3px;
99
+
}
100
+
.tippy-content .items .item {
101
+
display: block;
102
+
background: transparent;
103
+
color: #8a8c9a;
104
+
border: 0;
105
+
font: 17px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
106
+
padding: 7px 10px 8px;
107
+
width: 100%;
108
+
text-align: left;
109
+
box-sizing: border-box;
110
+
letter-spacing: 0.2px;
111
+
}
112
+
.tippy-content .items .item.is-selected {
113
+
background: #fff;
114
+
border-radius: 4px;
115
+
color: #333;
116
+
}
117
</style>
118
+
{% include "scripts.html" %}
119
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
120
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
121
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
···
137
</head>
138
<body>
139
{%- block body_all %}
140
+
<div id="root"></div>
141
<noscript>
142
{%- block noscript_extra %}{% endblock -%}
143
<h1>Javascript Required</h1>
144
<p>This is a heavily interactive web application, and Javascript is required. Simple HTML interfaces are possible, but that is not what this is.
145
<p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
146
</noscript>
147
{% endblock -%}
148
</body>
149
</html>
+18
-6
bskyweb/templates/error.html
+18
-6
bskyweb/templates/error.html
···
2
3
{% block head_title %}Error {{ statusCode }} - Bluesky{% endblock %}
4
5
-
{# don't include the bundle on error pages #}
6
-
{% block head_bundle %}{% endblock %}
7
8
-
{% block body_all %}
9
{% if statusCode == 404 %}
10
-
<h1>404: Not Found</h1>
11
{% else %}
12
-
<h1>{{ statusCode }}: Server Error</h1>
13
-
<p>Sorry about that! Our <a href="https://bluesky.statuspage.io/">Status Page</a> might have more context.
14
{% endif %}
15
{% endblock %}
···
2
3
{% block head_title %}Error {{ statusCode }} - Bluesky{% endblock %}
4
5
+
{% block noscript_extra %}
6
+
{%- if statusCode == 404 %}
7
+
<h1>404: Not Found</h1>
8
+
{% endif %}
9
+
{% endblock %}
10
+
11
12
+
{# don't include the bundle on non-404 error pages #}
13
+
{% block head_bundle %}
14
{% if statusCode == 404 %}
15
+
{{ super() }}
16
{% else %}
17
{% endif %}
18
{% endblock %}
19
+
20
+
{%- block body_all %}
21
+
{% if statusCode == 404 %}
22
+
{{ super() }}
23
+
{% else %}
24
+
<h1>{{ statusCode }}: Server Error</h1>
25
+
<p>Sorry about that! Our <a href="https://bluesky.statuspage.io/">Status Page</a> might have more context.
26
+
{% endif %}
27
+
{% endblock -%}
+2
bskyweb/templates/scripts.html
+2
bskyweb/templates/scripts.html
+1
package.json
+1
package.json
···
6
"android": "expo run:android",
7
"ios": "expo run:ios",
8
"web": "expo start --web",
9
+
"build-web": "expo export:web && node ./scripts/post-web-build.js",
10
"start": "expo start --dev-client",
11
"clean-cache": "rm -rf node_modules/.cache/babel-loader/*",
12
"test": "jest --forceExit --testTimeout=20000 --bail",
+27
scripts/post-web-build.js
+27
scripts/post-web-build.js
···
···
1
+
const path = require('path')
2
+
const fs = require('fs')
3
+
4
+
const projectRoot = path.join(__dirname, '..')
5
+
const webBuildJs = path.join(projectRoot, 'web-build', 'static', 'js')
6
+
const templateFile = path.join(
7
+
projectRoot,
8
+
'bskyweb',
9
+
'templates',
10
+
'scripts.html',
11
+
)
12
+
13
+
const jsFiles = fs.readdirSync(webBuildJs).filter(name => name.endsWith('.js'))
14
+
jsFiles.sort((a, b) => {
15
+
// make sure main is written last
16
+
if (a.startsWith('main')) return 1
17
+
if (b.startsWith('main')) return -1
18
+
return a.localeCompare(b)
19
+
})
20
+
21
+
console.log(`Found ${jsFiles.length} js files in web-build`)
22
+
console.log(`Writing ${templateFile}`)
23
+
24
+
const outputFile = jsFiles
25
+
.map(name => `<script defer="defer" src="/static/js/${name}"></script>`)
26
+
.join('\n')
27
+
fs.writeFileSync(templateFile, outputFile)