From aa274d887941971c18f8baa213774fdb339fba8b Mon Sep 17 00:00:00 2001 From: Parvez Akkas Date: Tue, 22 Oct 2019 10:55:00 -0400 Subject: [PATCH 1/3] 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. --- packages/docusaurus-1.x/lib/core/Doc.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-1.x/lib/core/Doc.js b/packages/docusaurus-1.x/lib/core/Doc.js index 0400b9301f92..eba99f4471bc 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 {
{editLink} {!this.props.hideTitle && ( -

{this.props.title}

+

+ {this.props.title} +

)}
From 4775d1637b26819f77fe6f632ab27838d9540e80 Mon Sep 17 00:00:00 2001 From: Parvez Akkas Date: Thu, 24 Oct 2019 15:19:15 -0400 Subject: [PATCH 2/3] 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/ --- .../docusaurus-1.x/lib/static/css/main.css | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/docusaurus-1.x/lib/static/css/main.css b/packages/docusaurus-1.x/lib/static/css/main.css index e808532f145f..bf25bc3e2dc4 100644 --- a/packages/docusaurus-1.x/lib/static/css/main.css +++ b/packages/docusaurus-1.x/lib/static/css/main.css @@ -653,6 +653,15 @@ 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 +723,17 @@ 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 */ From 11fea220e1258aa5a889bbe6a2c9d223262a75a6 Mon Sep 17 00:00:00 2001 From: Parvez Akkas Date: Wed, 6 Nov 2019 15:23:14 -0500 Subject: [PATCH 3/3] Adjust CSS so that different selectors are on separate lines --- packages/docusaurus-1.x/lib/static/css/main.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-1.x/lib/static/css/main.css b/packages/docusaurus-1.x/lib/static/css/main.css index bf25bc3e2dc4..ba0733df1266 100644 --- a/packages/docusaurus-1.x/lib/static/css/main.css +++ b/packages/docusaurus-1.x/lib/static/css/main.css @@ -653,7 +653,8 @@ blockquote { padding: 0; } -.mainContainer .wrapper .post .postHeader:before, .mainContainer .wrapper .post .postHeaderTitle:before { +.mainContainer .wrapper .post .postHeader:before, +.mainContainer .wrapper .post .postHeaderTitle:before { content: ""; display: block; height: 90px; /* fixed header height and empty space below it */ @@ -725,7 +726,8 @@ blockquote { } @media only screen and (max-width: 1023px) { - .mainContainer .wrapper .post .postHeader:before, .mainContainer .wrapper .post .postHeaderTitle:before { + .mainContainer .wrapper .post .postHeader:before, + .mainContainer .wrapper .post .postHeaderTitle:before { content: ""; display: block; height: 200px; /* fixed header height and empty space below it */