From 1bf590ea2b381f99784ea77cc4af6aca06444695 Mon Sep 17 00:00:00 2001
From: PA <parvezakkas@gmail.com>
Date: Mon, 18 Nov 2019 14:07:02 -0500
Subject: [PATCH] fix(v1): fix page title render issue when referred by search
 result (#1869)

* fix(v1): Fix page title render issue when referred by search result

When Algolia DocSearch query finds a match for a page's title, it attempts to generate
a permalink. Because the page title element (`h1`) does not have an `id`, Algolia
generates uses the `id` from closes parent element. Because of this, the page title
scrolls to a position that is slightly overlayed by the fixed top navigation bar.

This fix sets an `id` for the page title so that the search result is able to generate
a more accurate permalink.

* Adjust css for handling post title to be on the top when referred by an anchor

The post title can sometimes be referred by an anchor using the "id" of that element.
In that case the title will be automatically be the first element within the viewport.
Since we have a header fixed at the top of the view port, the title becomes hidden or
not visible. That's why some css adjustments are needed so that if any user ends up
with a link to a page that is referring to the post title (i.e. auto generated anchor
link by algolia DocSearch).

The css code uses pseudo element `:before` to make the adjustments. Details on this
can be found in the following article:

https://css-tricks.com/hash-tag-links-padding/

* Adjust CSS so that different selectors are on separate lines
---
 packages/docusaurus-1.x/lib/core/Doc.js       |  4 +++-
 .../docusaurus-1.x/lib/static/css/main.css    | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-1.x/lib/core/Doc.js b/packages/docusaurus-1.x/lib/core/Doc.js
index 0400b9301f..eba99f4471 100644
--- a/packages/docusaurus-1.x/lib/core/Doc.js
+++ b/packages/docusaurus-1.x/lib/core/Doc.js
@@ -238,7 +238,9 @@ class Doc extends React.Component {
         <header className="postHeader">
           {editLink}
           {!this.props.hideTitle && (
-            <h1 className="postHeaderTitle">{this.props.title}</h1>
+            <h1 id="__docusaurus" className="postHeaderTitle">
+              {this.props.title}
+            </h1>
           )}
         </header>
         <article>
diff --git a/packages/docusaurus-1.x/lib/static/css/main.css b/packages/docusaurus-1.x/lib/static/css/main.css
index e808532f14..ba0733df12 100644
--- a/packages/docusaurus-1.x/lib/static/css/main.css
+++ b/packages/docusaurus-1.x/lib/static/css/main.css
@@ -653,6 +653,16 @@ blockquote {
   padding: 0;
 }
 
+.mainContainer .wrapper .post .postHeader:before,
+.mainContainer .wrapper .post .postHeaderTitle:before {
+  content: "";
+  display: block;
+  height: 90px; /* fixed header height and empty space below it */
+  margin-top: -90px;  /* negative fixed header height and empty space below it  */
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .mainContainer .wrapper .post .postSocialPlugins {
   padding-top: 1em;
 }
@@ -714,6 +724,18 @@ blockquote {
     width: 100%;
   }
 }
+
+@media only screen and (max-width: 1023px) {
+  .mainContainer .wrapper .post .postHeader:before,
+  .mainContainer .wrapper .post .postHeaderTitle:before {
+    content: "";
+    display: block;
+    height: 200px; /* fixed header height and empty space below it */
+    margin-top: -200px;  /* negative fixed header height and empty space below it  */
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
 /* End of Main Container */
 
 /* Navbar */