fix: site SEO, general site cleanup

- fix: breadcrumbs on each page - fix: add mobile styles - fix: add viewport tag
elide-dev · Jan 29, 2023 · b59b508 · b59b508
1 parent e8a5b3f
commit b59b508
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 63 deletions.
diff --git a/site/docs/app/src/main/kotlin/elide/site/controllers/SitePageController.kt b/site/docs/app/src/main/kotlin/elide/site/controllers/SitePageController.kt
@@ -43,7 +43,6 @@ import tools.elide.data.CompressionMode
 import java.io.ByteArrayOutputStream
 import java.io.OutputStream
 import java.nio.charset.Charset
-import java.nio.charset.StandardCharsets
 import java.security.MessageDigest
 import java.time.Duration
 import java.util.Locale
@@ -823,15 +822,24 @@ abstract class SitePageController protected constructor(val page: SitePage) : Pa
         portions.add(mapOf(
           "@type" to "ListItem",
           "position" to 1,
+          "item" to mapOf(
+            "name" to page.parent!!.title,
+          ),
         ))
         portions.add(mapOf(
           "@type" to "ListItem",
           "position" to 2,
+          "item" to mapOf(
+            "name" to page.title,
+          ),
         ))
       } else {
         portions.add(mapOf(
           "@type" to "ListItem",
           "position" to 1,
+          "item" to mapOf(
+            "name" to page.title,
+          ),
         ))
       }
 
@@ -919,6 +927,10 @@ abstract class SitePageController protected constructor(val page: SitePage) : Pa
 
         // page title
         title { +renderTitle() }
+        meta {
+          name = "viewport"
+          content = "width=device-width, initial-scale=1"
+        }
 
         // UI and analytics scripts
         script {

diff --git a/site/docs/content/src/commonMain/kotlin/elide/site/ElideSite.kt b/site/docs/content/src/commonMain/kotlin/elide/site/ElideSite.kt
@@ -44,7 +44,7 @@ object ElideSite {
     override val prelabel = "αlpha"
 
     /** Main heading to use for the navigation bar. */
-    override val heading = "$name Framework"
+    override val heading = name
   }
 
   /** Default site info. */

diff --git a/site/docs/node/src/main/kotlin/main.kt b/site/docs/node/src/main/kotlin/main.kt
@@ -21,12 +21,9 @@ import org.w3c.fetch.Request
 import react.ReactElement
 import web.url.URL
 
-const val enableStreaming = true
-const val chunkCss = true
 
 // Setup Emotion cache.
 private fun setupCache(context: dynamic): EmotionCache {
-  val statejson = JSON.stringify(context, emptyArray(), 0)
   val cspNonce = context.getNonce()
   return createCache(jso {
     key = "es"
@@ -89,13 +86,13 @@ var modEmotionServer: EmotionServer? = null
         this,
         request,
         emotionCache,
-      ), stream = enableStreaming).execute {
+      ), stream = true).execute {
         try {
           if (it.hasContent) {
             response += it.content
           }
 
-          if (enableStreaming && chunkCss && it.fin) {
+          if (it.fin) {
             // in the final chunk, splice in CSS from Emotion.
             val emotionChunks = emotionServer.extractCriticalToChunks(response)
             val emotionCss = emotionServer.constructStyleTagsFromChunks(emotionChunks)

diff --git a/site/docs/ui/src/main/assets/base.css b/site/docs/ui/src/main/assets/base.css
@@ -186,7 +186,7 @@ pre, .mono {
 }
 
 .elide-site-page__header, .elide-site-page__header h2 {
-  font-size: 2.5rem !important;
+  font-size: 2.5rem;
 }
 
 /**
@@ -240,7 +240,6 @@ main#root {
 
 .elide-site-page.narrative {
   padding: 3rem;
-  height: 100%;
 }
 
 .elide-site-page.narrative header {
@@ -300,3 +299,22 @@ main#root {
   left: 20px;
   bottom: 20px;
 }
+
+
+/**
+ * ======= Styles: Mobile =======
+ */
+@media screen and (max-device-width: 960px) {
+  .elide-site-container {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .elide-site-page.narrative {
+    padding: 1.5rem;
+  }
+  .elide-site-page__header h2 {
+    font-size: 1.75rem;
+    font-weight: 400;
+  }
+}
diff --git a/site/docs/ui/src/main/assets/base.min.css b/site/docs/ui/src/main/assets/base.min.css
diff --git a/site/docs/ui/src/main/assets/home.css b/site/docs/ui/src/main/assets/home.css
@@ -32,7 +32,6 @@
 }
 
 .elide-page__home-nav {
-  margin-left: 10rem;
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
@@ -127,8 +126,8 @@ span.elide-brand-text.masthead-text {
   font-size: 2rem;
 }
 
-.elide-logotext {
-  font-size: 2rem !important;
+.elide-page__home .elide-logotext {
+  font-size: 2rem;
 }
 
 .elide-page__home.elide-theme__light {
@@ -218,3 +217,51 @@ span.masthead-text__highlight {
   content: '·';
   margin: 0 10px;
 }
+
+@media screen and (max-device-width: 960px) {
+  .elide-page__home .elide-site-page {
+    overflow-y: scroll;
+  }
+
+  /* content columns must stack vertically */
+  .elide-page__home-content {
+    flex-direction: column !important;
+    min-height: auto;
+    height: auto;
+    align-items: center;
+  }
+
+  /* reduce padding around masthead text */
+  .elide-page__home-masthead-text.masthead-text__title {
+    font-size: 3rem;
+  }
+  .elide-page__home .masthead-text__subtitle, .elide-page__home .masthead-text__subtitle span {
+    font-size: 1.3rem;
+  }
+
+  /* masthead text can take full-width */
+  .elide-page__home .masthead-text__title, .elide-page__home .masthead-text-subtitle, .elide-page__home-masthead-cta {
+    max-width: 95%;
+  }
+
+  /* columns should display as blocks */
+  .elide-page__home .elide-page__home-column {
+    display: block;
+  }
+
+  /* "right"-side column should also take full width */
+  .elide-page__home-column.elide-page__home-column-right {
+    display: none;
+  }
+
+  /* make footer text bigger */
+  .elide-page__home .elide-footer {
+    background: transparent;
+    user-select: none;
+  }
+
+  /* hide nav links */
+  .elide-page__home-nav button, .elide-page__home-nav a {
+    display: none;
+  }
+}