Create build step for the web server (#289)

* Create build step for the web server * Update bskyweb routes and 404 behavior
author: Paul Frazee <pfrazee@gmail.com> 2023-03-14 17:30:15 -0500
committer: GitHub <noreply@github.com> 2023-03-14 17:30:15 -0500
commit: 8d2e649b4dae4523d9c0ac36d5dfd31409447be4 (patch)
tree: 151f1dcd76c52a8bb3f45061a023fe6a8b2637b2 /bskyweb
parent: 8629e167cd668cd1d41bf6a37acf9d94502e5c2b (diff)
download: voidsky-8d2e649b4dae4523d9c0ac36d5dfd31409447be4.tar.zst
5 files changed, 136 insertions, 22 deletions
diff --git a/bskyweb/README.md b/bskyweb/README.md
index 86bc16864..2c381495f 100644
--- a/bskyweb/README.md
+++ b/bskyweb/README.md
@@ -20,8 +20,7 @@ like:
 Then build and copy over the big 'ol `bundle.web.js` file:
 
     # in the top level of this repo
-    yarn webpack build --config ./web/webpack.config.js -d inline-source-map --color
-    cp dist/bundle.web.js bskyweb/static/
+    yarn build-web
 
 ### Golang Daemon
 
diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go
index 6a8a88884..7ae0fb54f 100644
--- a/bskyweb/cmd/bskyweb/server.go
+++ b/bskyweb/cmd/bskyweb/server.go
@@ -94,20 +94,23 @@ func serve(cctx *cli.Context) error {
 	// configure routes
 	e.File("/robots.txt", "static/robots.txt")
 	e.Static("/static", "static")
+	e.Static("/static/js", "../web-build/static/js")
 
 	e.GET("/", server.WebHome)
 
 	// generic routes
-	e.GET("/contacts", server.WebGeneric)
 	e.GET("/search", server.WebGeneric)
 	e.GET("/notifications", server.WebGeneric)
 	e.GET("/settings", server.WebGeneric)
-	e.GET("/settings", server.WebGeneric)
+	e.GET("/sys/debug", server.WebGeneric)
+	e.GET("/sys/log", server.WebGeneric)
+	e.GET("/support", server.WebGeneric)
+	e.GET("/support/privacy", server.WebGeneric)
 
 	// profile endpoints; only first populates info
 	e.GET("/profile/:handle", server.WebProfile)
 	e.GET("/profile/:handle/follows", server.WebGeneric)
-	e.GET("/profile/:handle/following", server.WebGeneric)
+	e.GET("/profile/:handle/followers", server.WebGeneric)
 
 	// post endpoints; only first populates info
 	e.GET("/profile/:handle/post/:rkey", server.WebPost)
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 024e48d6d..05c9becce 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -2,21 +2,120 @@
 <html lang="en">
 <head>   
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover">
   <meta name="referrer" content="origin-when-cross-origin">
   <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>
+
   <!-- Hello Humans! API docs at https://atproto.com -->
+  
   <style>
-    /* These styles make the body full-height */
-    html, body { height: 100%; }
-    /* These styles disable body scrolling if you are using <ScrollView> */
-    body { overflow: hidden; }
-    /* These styles make the root element full-height */
-    #app-root { display:flex; height:100%; }
+    /**
+     * Extend the react-native-web reset:
+     * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
+     */
+    html,
+    body,
+    #root {
+      width: 100%;
+      /* To smooth any scrolling behavior */
+      -webkit-overflow-scrolling: touch;
+      margin: 0px;
+      padding: 0px;
+      /* Allows content to fill the viewport and go beyond the bottom */
+      min-height: 100%;
+    }
+    #root {
+      flex-shrink: 0;
+      flex-basis: auto;
+      flex-grow: 1;
+      display: flex;
+      flex: 1;
+    }
+
+    html {
+      scroll-behavior: smooth;
+      /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
+      -webkit-text-size-adjust: 100%;
+      height: calc(100% + env(safe-area-inset-top));
+    }
+
+    body {
+      display: flex;
+      /* Allows you to scroll below the viewport; default value is visible */
+      overflow-y: auto;
+      overscroll-behavior-y: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -ms-overflow-style: scrollbar;
+    }
+    /* Enable for apps that support dark-theme */
+    /*@media (prefers-color-scheme: dark) {
+      body {
+        background-color: black;
+      }
+    }*/
+
     /* Remove focus state on inputs */
-    *:focus { outline: 0; }
+    *:focus {
+      outline: 0;
+    }
+    /* Remove default link styling */
+    a {
+      color: inherit;
+    }
+    a[role="link"]:hover {
+      text-decoration: underline;
+    }
+
+    /* ProseMirror */
+    .ProseMirror {
+      font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      min-height: 140px;
+    }
+    .ProseMirror p {
+      margin: 0;
+    }
+    .ProseMirror p.is-editor-empty:first-child::before {
+      color: #8d8e96;
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+    .ProseMirror .mention {
+      color: #0085ff;
+    }
+    .ProseMirror a {
+      color: #0085ff;
+      cursor: pointer;
+    }
+    .tippy-content .items {
+      border-radius: 6px;
+      background: #F3F3F8;
+      border: 1px solid #e0d9d9;
+      padding: 3px 3px;
+    }
+    .tippy-content .items .item {
+      display: block;
+      background: transparent;
+      color: #8a8c9a;
+      border: 0;
+      font: 17px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      padding: 7px 10px 8px;
+      width: 100%;
+      text-align: left;
+      box-sizing: border-box;
+      letter-spacing: 0.2px;
+    }
+    .tippy-content .items .item.is-selected {
+      background: #fff;
+      border-radius: 4px;
+      color: #333;
+    }
   </style>
-  {% block head_bundle -%}<script defer src="/static/bundle.web.js"></script>{%- endblock %}
+  {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
   <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
   <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
@@ -38,14 +137,13 @@
 </head>
 <body>
 {%- block body_all %}
-	<div id="app-root">
+	<div id="root"></div>
     <noscript>
 			{%- block noscript_extra %}{% endblock -%}
       <h1>Javascript Required</h1>
       <p>This is a heavily interactive web application, and Javascript is required. Simple HTML interfaces are possible, but that is not what this is.
       <p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
     </noscript>
-	</div>
 {% endblock -%}
 </body>
 </html>
diff --git a/bskyweb/templates/error.html b/bskyweb/templates/error.html
index e40d8c4ab..f8fdd290c 100644
--- a/bskyweb/templates/error.html
+++ b/bskyweb/templates/error.html
@@ -2,14 +2,26 @@
 
 {% block head_title %}Error {{ statusCode }} - Bluesky{% endblock %}
 
-{# don't include the bundle on error pages #}
-{% block head_bundle %}{% endblock %}
+{% block noscript_extra %}
+  {%- if statusCode == 404 %}
+    <h1>404: Not Found</h1>
+  {% endif %}
+{% endblock %}
+
 
-{% block body_all %}
+{# don't include the bundle on non-404 error pages #}
+{% block head_bundle %}
   {% if statusCode == 404 %}
-	  <h1>404: Not Found</h1>
+    {{ super() }}
   {% else %}
-	  <h1>{{ statusCode }}: Server Error</h1>
-    <p>Sorry about that! Our <a href="https://bluesky.statuspage.io/">Status Page</a> might have more context.
   {% endif %}
 {% endblock %}
+
+{%- block body_all %}
+  {% if statusCode == 404 %}
+    {{ super() }}
+  {% else %}
+    <h1>{{ statusCode }}: Server Error</h1>
+    <p>Sorry about that! Our <a href="https://bluesky.statuspage.io/">Status Page</a> might have more context.
+  {% endif %}
+{% endblock -%}
\ No newline at end of file
diff --git a/bskyweb/templates/scripts.html b/bskyweb/templates/scripts.html
new file mode 100644
index 000000000..30826bfb9
--- /dev/null
+++ b/bskyweb/templates/scripts.html
@@ -0,0 +1,2 @@
+<script defer="defer" src="/static/js/412.e47ad7b9.js"></script>
+<script defer="defer" src="/static/js/main.f526ceaa.js"></script>
\ No newline at end of file
author	Paul Frazee <pfrazee@gmail.com>	2023-03-14 17:30:15 -0500
committer	GitHub <noreply@github.com>	2023-03-14 17:30:15 -0500
commit	8d2e649b4dae4523d9c0ac36d5dfd31409447be4 (patch)
tree	151f1dcd76c52a8bb3f45061a023fe6a8b2637b2 /bskyweb
parent	8629e167cd668cd1d41bf6a37acf9d94502e5c2b (diff)
download	voidsky-8d2e649b4dae4523d9c0ac36d5dfd31409447be4.tar.zst