Merge pull request #3204 from ROOMrepair/bugfix/issue_3167

fix: try to fix KubeSphere 4.1 docs display bugs
kubesphere · Nov 1, 2024 · 572854a · 572854a
2 parents c86a360 + 94138d7
commit 572854a
Show file tree

Hide file tree

Showing 13 changed files with 259 additions and 81 deletions.
diff --git a/assets/scss/common.scss b/assets/scss/common.scss
@@ -295,6 +295,16 @@ section {
   }
 }
 
+.admon{
+  thead > tr > th {
+    padding: 0 10px;
+    margin: 0!important;
+    height: 30px;
+    line-height: 30px;
+    color: #ffffff;
+  }
+}
+
 .notices.note {
   & > p {
     background: #6ab0de
@@ -304,6 +314,15 @@ section {
   }
 }
 
+.admon.note {
+  thead > tr > th {
+    background: #6ab0de;
+  }
+  td  {
+    background: #e7f2fa;
+  }
+}
+
 .notices.tip {
   & > p {
     background: #78C578
@@ -313,6 +332,15 @@ section {
   }
 }
 
+.admon.tip {
+  thead > tr > th {
+    background: #78C578
+  }
+  td  {
+    background: #E6F9E6;
+  }
+}
+
 .notices.info {
   & > p {
     background: #F0B37E
@@ -322,6 +350,15 @@ section {
   }
 }
 
+.admon.attention {
+  thead > tr > th {
+    background: #F0B37E
+  }
+  td  {
+    background: #FFF2DB;
+  }
+}
+
 .notices.warning {
   & > p {
     background: #E06F6C
@@ -331,6 +368,15 @@ section {
   }
 }
 
+.admon.warning {
+  thead > tr > th {
+    background: #E06F6C
+  }
+  td  {
+    background: #FAE2E2;
+  }
+}
+
 /* content tabs */
 .code-tabs {
   border: 1px solid #dee2e6;

diff --git a/assets/scss/markdown.scss b/assets/scss/markdown.scss
@@ -202,6 +202,10 @@
   list-style: decimal;
 }
 
+.md-body ol ol > li {
+  list-style: lower-alpha;
+}
+
 .md-body ul.no-list,
 .md-body ol.no-list {
   padding: 0;

diff --git a/content/en/docs/v4.1/_index.adoc b/content/en/docs/v4.1/_index.adoc
@@ -8,6 +8,7 @@ section1:
   title: KubeSphere Documentation
   content: Learn how to build and manage cloud-native applications using KubeSphere Container Platform. Get documentation, example code, tutorials, and more.
   image: /images/docs/common/banner.png
+  version: v4.1
 
 sectionLink:
   docs:

diff --git a/content/zh/docs/v4.1/_index.adoc b/content/zh/docs/v4.1/_index.adoc
@@ -8,6 +8,7 @@ section1:
   title: KubeSphere
   content: 了解如何通过 KubeSphere 构建并管理云原生应用程序。获取文档、示例代码与教程等信息。
   image: /images/docs/common/banner.png
+  version: v4.1
 
 sectionLink:
   docs:

diff --git a/layouts/docs/list.html b/layouts/docs/list.html
@@ -50,7 +50,7 @@ <h2>{{ .title }}</h2>
 
 <section class="section-2">
     <div class="common-layout">
-        {{ partial "section" . }}
+        {{ partial "section" (dict "context" .) }}
     </div>
 </section>
 

diff --git a/layouts/docs/second.html b/layouts/docs/second.html
@@ -40,10 +40,13 @@
         </div>
     </section>
 
+    {{ $version := index (strings.FindRE `v[0-9]+\.[0-9]+` .Page.RelPermalink) 0}}
+    <!-- {{ $doc_version := printf "/docs/%s"  $version }} -->
+
     <section class="section-menu">
     {{ with (.GetPage "/docs") }}
         <div class="common-layout">
-            {{ partial "section" . }}
+            {{ partial "section" (dict "context" . "ver" $version) }}
         </div>
     {{ end }}
     </section>
@@ -143,29 +146,9 @@ <h1>{{ .Title }}</h1>
                         {{ end }}
                     </div>
                 </div>
-                {{ if .IsPage }}
+
+                {{ partial "pagination" . }}
 
-                <div class="page-div common-flex-layout">
-                    {{ with .Next }}
-                    <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="last" href="{{.RelPermalink}}">
-                            <img src="/images/docs/v3.3/last.svg" alt="{{ i18n "Previous" }}">
-                            {{ i18n "Previous" }}
-                            <span>: {{.LinkTitle}}</span>
-                        </a>
-                    <!-- {{ end }} -->
-                    {{ end }}
-                    {{ with .Prev }}
-                    <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="next" href="{{.RelPermalink}}">
-                            {{ i18n "Next" }}
-                            <span>: {{.LinkTitle}}</span>
-                            <img src="/images/docs/v3.3/next.svg" alt="{{ i18n "Next" }}">
-                        </a>            
-                    <!-- {{ end }} -->
-                    {{ end }}
-                </div>
-                {{ end }}
                 <div></div>
             </div>
             {{ if .IsPage }}

diff --git a/layouts/docs/single.html b/layouts/docs/single.html
@@ -41,10 +41,13 @@
             </div>
         </section>
 
+        {{ $version := index (strings.FindRE `v[0-9]+\.[0-9]+` .Page.RelPermalink) 0}}
+        <!-- {{ $doc_version := printf "/docs/%s"  $version }} -->
+
         <section class="section-menu">
             {{ with (.GetPage "/docs") }}
             <div class="common-layout">
-                {{ partial "section" . }}
+                {{ partial "section" (dict "context" . "ver" $version) }}
             </div>
             {{ end }}
         </section>
@@ -151,29 +154,9 @@ <h1>{{ .Title }}</h1>
                             <p class="msg-thank">{{ i18n "Msg-Thank" }}</p>
                         </div>
                     </div>
-                    {{ if .IsPage }}
-
-                    <div class="page-div common-flex-layout">
-                        {{ with .Next }}
-                        <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="last" href="{{.RelPermalink}}">
-                            <img src="/images/docs/v3.3/last.svg" alt="{{ i18n " Previous" }}">
-                            {{ i18n "Previous" }}
-                            <span>: {{.LinkTitle}}</span>
-                        </a>
-                        <!-- {{ end }} -->
-                        {{ end }}
-                        {{ with .Prev }}
-                        <!-- {{ if .IsDescendant (.GetPage "/docs")}} -->
-                        <a class="next" href="{{.RelPermalink}}">
-                            {{ i18n "Next" }}
-                            <span>: {{.LinkTitle}}</span>
-                            <img src="/images/docs/v3.3/next.svg" alt="{{ i18n " Next" }}">
-                        </a>
-                        <!-- {{ end }} -->
-                        {{ end }}
-                    </div>
-                    {{ end }}
+
+                    {{ partial "pagination" . }}
+
                     <div></div>
                 </div>
                 {{ if .IsPage }}

diff --git a/layouts/partials/findFirstInNextSection.html b/layouts/partials/findFirstInNextSection.html
@@ -0,0 +1,9 @@
+{{ if ne .Parent.CurrentSection .Parent.FirstSection }} <!-- out of boundary -->
+{{ with .}}
+<a class="next" href="{{.RelPermalink}}">
+	{{ i18n "Next" }}
+	<span>: {{.LinkTitle}}</span>
+	<img src="/images/docs/v3.3/next.svg" alt="{{ i18n " Next" }}">
+</a>
+{{ end }}
+{{ end }}
diff --git a/layouts/partials/findLastInPreSection.html b/layouts/partials/findLastInPreSection.html
@@ -0,0 +1,18 @@
+<!-- find last page in section -->
+{{ if ne .Parent.CurrentSection .Parent.FirstSection }} <!-- out of boundary -->
+
+{{ if .IsSection}} <!-- recursive  -->
+{{ $curSection := .Pages.ByWeight }}
+{{ $l := len $curSection}}
+{{ $page := index $curSection (sub $l 1)}}
+{{ partial "findLastInPreSection" $page}}
+{{ else }} <!-- not recursive -->
+
+<a class="last" href="{{.RelPermalink}}">
+	<img src="/images/docs/v3.3/last.svg" alt="{{ i18n " Previous" }}">
+	{{ i18n "Previous" }}
+	<span>: {{.LinkTitle}}</span>
+</a>
+{{ end }}
+
+{{ end }}
diff --git a/layouts/partials/page_navigation.html b/layouts/partials/page_navigation.html
@@ -0,0 +1,71 @@
+{{ $current := .context }}
+
+<!-- choose different bottom up step -->
+<!-- in this case page.parent is index -->
+{{ $g_parent := "" }}
+{{ if $current.IsPage }}
+{{ $g_parent = $current.Parent.Parent }}
+{{ else }}
+{{ $g_parent = $current.Parent}}
+{{ end }}
+
+<!-- SECTION1 -->
+<!-- important! here we need call .Pages to include both pure page and _index -->
+{{ $p_section := $g_parent.Pages.ByWeight }}
+{{ $length := len $p_section }}
+<!-- page prev -->
+{{ if .prev }}
+{{ $first := index $p_section 0}}
+
+<!-- check if is already the first section -->
+<!-- if is first section,we need to bottom up -->
+{{ if $current.InSection $first.CurrentSection }}
+<!-- bottom up -->
+{{ partial "page_navigation" (dict "context" $g_parent "prev" true)}}
+
+<!--if not the first section just go to pre section last page (last page of pre section of p_section)-->
+{{else}}
+
+<!-- find current page's section position -->
+{{ $curIndex := 0 }}
+{{ range $i, $p_sec := $p_section}}
+{{ if eq $p_sec $current.CurrentSection}}
+{{ $curIndex = $i }}
+{{ end }}
+{{ end }}
+
+{{ $prevPage := index $p_section (sub $curIndex 1) }}
+{{ partial "findLastInPreSection" $prevPage}}
+
+{{ end }} <!-- close of check page prev bottom up -->
+<!-- SECTION1 -->
+
+<!-- page next -->
+{{ else }}
+
+<!-- SECTION2 -->
+{{ $last := index $p_section (sub $length 1)}}
+
+<!-- if is last section,we need to bottom up -->
+{{ if $current.InSection $last.CurrentSection }}
+
+<!-- bottom up -->
+{{ partial "page_navigation" (dict "context" $g_parent "prev" false)}}
+
+<!--if not the last section just go to next section -->
+{{ else }}
+
+{{ $curIndex := 0 }}
+{{ range $i, $p_sec := $p_section}}
+{{ if eq $p_sec $current.CurrentSection}}
+{{ $curIndex = $i }}
+{{ end }}
+{{ end }}
+
+{{ $nextPage := index $p_section (add $curIndex 1) }}
+{{ partial "findFirstInNextSection" $nextPage}}
+
+{{ end }} <!-- close of check next bottom up -->
+<!-- SECTION2 -->
+
+{{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
@@ -0,0 +1,49 @@
+<div class="page-div common-flex-layout">
+{{ if .IsPage }}
+	<!-- if not each page in a section is pure page we can't simply use prev/nextInsection -->
+	<!-- todo!!! is there a better way to solve this ? -->
+	{{ $current := .}}
+	{{ $p := .Parent.Pages.ByWeight }}
+	{{ $length := len $p }}
+
+	<!-- find current page's section position -->
+	{{ $curIndex := 0 }}
+	{{ range $i, $p_sec := $p}}
+
+	{{ if eq $p_sec $current}}
+	{{ $curIndex = $i }}
+	{{ end }}
+	{{ end }}
+
+	<!-- prev -->
+	{{ if gt $curIndex 0}}
+	{{ $prevPage := index $p (sub $curIndex 1) }}
+	{{ partial "findLastInPreSection" $prevPage}}
+	{{ else }}
+	{{ partial "page_navigation" (dict "context" . "prev" true)}}
+	{{ end }}
+
+	<!-- next -->
+	{{ if lt $curIndex (sub $length 1) }}
+	{{ $nextPage := index $p (add $curIndex 1)}}
+	{{ partial "findFirstInNextSection" $nextPage}}
+	{{ else }}
+	{{ partial "page_navigation" (dict "context" . "prev" false)}}
+	{{ end }}
+{{ else }}
+	<!-- index prev -->
+	{{ partial "page_navigation" (dict "context" . "prev" true)}}
+
+	<!-- index next -->
+	{{ $pages:= .Pages.ByWeight}}
+	{{ if gt $pages 0}}
+	{{ with (index $pages 0)}}
+	<a class="next" href="{{.RelPermalink}}">
+		{{ i18n "Next" }}
+		<span>: {{.LinkTitle}}</span>
+		<img src="/images/docs/v3.3/next.svg" alt="{{ i18n " Next" }}">
+	</a>
+	{{ end }}
+	{{ end }}
+{{ end }}
+</div>