feat: add pager for article navigation in section

chore: minor updates

- reorg language settings
- add icons for cards and steps

chore: update about page

chore: add style to kbd

layouts/_default/single.html

@@ -1,5 +1,13 @@
 {{ define "main" }}
   <div class="mx-auto flex max-w-[90rem]">
-    <p class="p-4">Unimplemented</p>
+    <article class="typesetting-article w-full break-words flex min-h-[calc(100vh-4rem)] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+      <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+        <div>
+          <h1>{{ .Title }}</h1>
+          {{ .Content }}
+        </div>
+        <div class="mt-16"></div>
+      </main>
+    </article>
   </div>
 {{ end }}

layouts/docs/list.html

@@ -9,6 +9,8 @@
           <h1>{{ .Title }}</h1>
           {{ .Content }}
         </div>
+        <div class="mt-16"></div>
+        {{ partial "pager.html" . }}
       </main>
     </article>
   </div>

layouts/docs/single.html

@@ -9,6 +9,8 @@
           <h1>{{ .Title }}</h1>
           {{ .Content }}
         </div>
+        <div class="mt-16"></div>
+        {{ partial "pager.html" . }}
       </main>
     </article>
   </div>

layouts/partials/pager.html

@@ -0,0 +1,20 @@
+{{/* Article navigation on the footer of the article */}}
+
+{{- $prev := .NextInSection -}}
+{{- $next := .PrevInSection -}}
+{{- if or $prev $next -}}
+  <div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
+    {{- if $prev -}}
+      <a href="{{ $prev.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4">
+        {{- partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
+        {{- $prev.Title -}}
+      </a>
+    {{- end -}}
+    {{- if $next -}}
+      <a href="{{ $next.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left">
+        {{- $next.LinkTitle -}}
+        {{- partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
+      </a>
+    {{- end -}}
+  </div>
+{{- end -}}