design change

rholang · Nov 23, 2019 · 314e19f · 314e19f
1 parent c18bf77
commit 314e19f
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 18 deletions.
diff --git a/build/bolt-fs-loader/index.js b/build/bolt-fs-loader/index.js
@@ -72,15 +72,15 @@ function addWebpackDependencies(
 
 function sitemapCreator(sitemapList) {
   const sitemap = new SitemapStream({
-    hostname: 'https://rholang.github.io/#/',
+    hostname: 'https://rholang.github.io/?p=/',
   });
 
   sitemapList.map(item =>
     sitemap.write({
-      url: `#/${item}`,
+      url: `?p=/${item}`,
       changefreq: 'daily',
       priority: 0.3,
-      links: [{ lang: 'en', url: `https://rholang.github.io/#/${item}` }],
+      links: [{ lang: 'en', url: `https://rholang.github.io/?p=/${item}` }],
     }),
   );
   sitemap.end();

diff --git a/website/public/404.html b/website/public/404.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Single Page Apps for GitHub Pages</title>
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      // https://github.com/rafrex/spa-github-pages
+      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+      // ----------------------------------------------------------------------
+      // This script takes the current url and converts the path and query
+      // string into just a query string, and then redirects the browser
+      // to the new url with only a query string and hash fragment,
+      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
+      // Note: this 404.html file must be at least 512 bytes for it to work
+      // with Internet Explorer (it is currently > 512 bytes)
+
+      // If you're creating a Project Pages site and NOT using a custom domain,
+      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
+      // This way the code will only replace the route part of the path, and not
+      // the real directory in which the app resides, for example:
+      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
+      // Otherwise, leave segmentCount as 0.
+      var segmentCount = 0;
+
+      var l = window.location;
+      l.replace(
+        l.protocol +
+          '//' +
+          l.hostname +
+          (l.port ? ':' + l.port : '') +
+          l.pathname
+            .split('/')
+            .slice(0, 1 + segmentCount)
+            .join('/') +
+          '/?p=/' +
+          l.pathname
+            .slice(1)
+            .split('/')
+            .slice(segmentCount)
+            .join('/')
+            .replace(/&/g, '~and~') +
+          (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+          l.hash,
+      );
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/website/public/index.html.ejs b/website/public/index.html.ejs
@@ -7,6 +7,37 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title><%= htmlWebpackPlugin.options.title %></title>
   <link rel="stylesheet" type="text/css" href="/css/charlie-display-font.css" />
+  <!-- Start Single Page Apps for GitHub Pages -->
+  <script type="text/javascript">
+  // Single Page Apps for GitHub Pages
+  // https://github.com/rafrex/spa-github-pages
+  // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
+  // ----------------------------------------------------------------------
+  // This script checks to see if a redirect is present in the query string
+  // and converts it back into the correct url and adds it to the
+  // browser's history using window.history.replaceState(...),
+  // which won't cause the browser to attempt to load the new url.
+  // When the single page app is loaded further down in this file,
+  // the correct url will be waiting in the browser's history for
+  // the single page app to route accordingly.
+  (function(l) {
+    if (l.search) {
+      var q = {};
+      l.search.slice(1).split('&').forEach(function(v) {
+        var a = v.split('=');
+        q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
+      });
+      if (q.p !== undefined) {
+        window.history.replaceState(null, null,
+          l.pathname.slice(0, -1) + (q.p || '') +
+          (q.q ? ('?' + q.q) : '') +
+          l.hash
+        );
+      }
+    }
+  }(window.location))
+</script>
+<!-- End Single Page Apps for GitHub Pages -->
   <script>
     // this snippet is a temporary workaround, until browsers implement level 2 of the Performance Observer spec and include the buffered flag
     !function () {

diff --git a/website/public/sitemap.xml b/website/public/sitemap.xml
diff --git a/website/src/containers/App.tsx b/website/src/containers/App.tsx
@@ -14,7 +14,7 @@ const MobileNav = React.lazy(() => import('./MobileNav'));
 export default () => {
   return (
     <GlobalTheme.Provider value={() => ({ mode: 'light' })}>
-      <HashRouter>
+      <BrowserRouter>
         <Media query={`(min-width: ${DESKTOP_BREAKPOINT_MIN}px)`}>
           {(isDesktop: boolean) => (
             <React.Suspense fallback={<></>}>
@@ -41,7 +41,7 @@ export default () => {
             </React.Suspense>
           )}
         </Media>
-      </HashRouter>
+      </BrowserRouter>
     </GlobalTheme.Provider>
   );
 };
diff --git a/website/src/pages/Home/Background.tsx b/website/src/pages/Home/Background.tsx
@@ -14,22 +14,12 @@ export const bg = css`
   display: -ms-flexbox;
   display: flex;
   overflow: hidden;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
   justify-content: center;
 `;
 export const bgGradient = css`
   position: relative;
   width: 100%;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
   flex: 1;
   background-image: -webkit-radial-gradient(
       circle farthest-side at 50% 0%,
@@ -105,8 +95,7 @@ export const bgIllustration = css`
   display: flex;
   flex: 1;
   align-items: center;
-  background-image: -webkit-linear-gradient(270deg, #091440, #091440);
-  background-image: linear-gradient(180deg, #091440, #091440);
+  background-image: linear-gradient(rgb(16, 16, 16), rgb(9, 20, 64));
   background-position: 50% 50%, 0 0;
   background-size: 110%, auto;
   background-repeat: repeat, repeat;