Merge pull request #18310 from dvdksn/style-dds-updates

styling updates

assets/css/styles.css

@@ -20,6 +20,11 @@
   display: none !important;
 }
 
+:root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .link {
   @apply text-blue-light dark:text-blue-dark underline-offset-2 underline;
 }

layouts/_default/api-next.html

@@ -1,108 +0,0 @@
-{{ define "left" }}
-  {{ partial "sidebar.html" . }}
-{{ end }}
-
-{{ define "main" }}
-  {{ partial "breadcrumbs-legacy.html" . }}
-  <article class="prose max-w-none dark:prose-invert">
-    <h1>{{ .Title }}</h1>
-    {{ $openapi := index site.Data.api .Params.apidata }}
-    {{ printf "## %s version %s" $openapi.info.title $openapi.info.version | .RenderString }}
-    {{ .RenderString $openapi.info.description }}
-    {{ range $path, $pathKeys := $openapi.paths }}
-      {{ range $key, $properties := $pathKeys }}
-        {{ if in "get put patch post delete" $key }}
-          {{ if isset $properties "operationId" }}
-            {{ printf "### %s {#%s}" $properties.summary $properties.operationId | $.RenderString }}
-          {{ else }}
-            {{ printf "### %s {#%s}" $properties.summary (urlize $properties.summary) | $.RenderString }}
-          {{ end }}
-          {{ $badgeColors := (dict
-            "get" "bg-blue-light-500 dark:bg-blue-dark-300"
-            "head" "bg-gray-light-500 dark:bg-gray-dark-300"
-            "put" "bg-green-light-500 dark:bg-green-dark-300"
-            "post" "bg-violet-light-500 dark:bg-violet-dark-300"
-            "delete" "bg-red-light-500 dark:bg-red-dark-300"
-            "patch" "bg-amber-light-500 dark:bg-amber-dark-500"
-            )
-          }}
-          <span
-            class="p-2 text-white {{ index $badgeColors $key }} rounded uppercase"
-            >{{ $key }}</span
-          >&nbsp;&nbsp;<code>{{ $path }}</code>
-          {{ $curlExample := printf
-            `curl -X %s \
-            "%sapi%s"` ($key | upper) (index $openapi.servers 0).url $path
-          }}
-          {{ highlight $curlExample "console" }}
-          {{ $properties.description | $.RenderString (dict "display" "block") }}
-          {{ with $properties.parameters }}
-            <table>
-              <thead>
-                <tr>
-                  <th>{{ T "apiPropParam" }}</th>
-                  <th>{{ T "apiPropType" }}</th>
-                  <th>{{ T "apiPropValue" }}</th>
-                  <th>{{ T "apiPropReq" }}</th>
-                  <th>{{ T "apiPropDesc" }}</th>
-                </tr>
-              </thead>
-              {{ range . }}
-                {{ $paramData := . }}
-                {{ if (index . "$ref") }}
-                  {{ $refName := index (last 1 (split (index . "$ref") "/")) 0 }}
-                  {{ $paramData = index $openapi.components.parameters $refName }}
-                {{ end }}
-                <tr>
-                  <td>{{ $paramData.name }}</td>
-                  <td>{{ $paramData.in }}</td>
-                  <td>
-                    {{ if isset $paramData.schema "$ref" }}
-                      {{ $refName := index (last 1 (split (index $paramData.schema "$ref") "/")) 0 }}
-                      {{ range (index $openapi.components.schemas $refName).enum }}
-                        <code>{{ . }}</code>
-                      {{ end }}
-                    {{ else }}
-                      {{ $paramData.schema.type }}
-                    {{ end }}
-                  </td>
-                  <td>{{ $paramData.required }}</td>
-                  <td>{{ $paramData.description | $.RenderString }}</td>
-                </tr>
-              {{ end }}
-            </table>
-          {{ end }}
-          {{ range $responseCode, $responseDetails := $properties.responses }}
-            {{ if isset $responseDetails "content" }}
-              {{ range $exampleName, $example := (index $responseDetails.content "application/json").examples }}
-                {{ if isset $example "schema" }}
-                  {{ $refPath := index (index $example "schema") "$ref" }}
-                  {{ range $index, $component := (split $refPath "/") }}
-                    {{ if (index $openapi.components.examples $component) }}
-                      <div>
-                        <span
-                          >{{ T "apiExampleResponseCode" }}:
-                          {{ $responseCode }}</span
-                        >
-                        <pre><code>{{ (index $openapi.components.examples $component).value | jsonify (dict "indent" "  ") }}</code></pre>
-                      </div>
-                    {{ end }}
-                  {{ end }}
-                {{ else }}
-                  {{ T "apiExampleResponse" }}:
-                  <pre><code>
-              {{- $example.value | jsonify (dict "indent" "  ") }}
-              </code></pre>
-                {{ end }}
-              {{ end }}
-            {{ end }}
-          {{ end }}
-        {{ end }}
-      {{ end }}
-    {{ end }}
-  </article>
-{{ end }}
-
-{{ define "right" }}
-  {{ partial "api-aside.html" . }}
-{{ end }}

layouts/_default/cli.html

@@ -11,7 +11,7 @@
   {{ end }}
   {{ .Scratch.Set "headings" slice }}
   {{ .Scratch.Set "subheadings" slice }}
-  {{ partial "breadcrumbs-legacy.html" . }}
+  {{ partial "breadcrumbs.html" . }}
   <article class="prose max-w-none dark:prose-invert">
     <h1>{{ .Title }}</h1>
     {{ $data.short | .RenderString (dict "display" "block") }}

layouts/_default/glossary.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "main" }}
-  {{ partial "breadcrumbs-legacy.html" . }}
+  {{ partial "breadcrumbs.html" . }}
   <article class="prose max-w-none dark:prose-invert">
     <h1>{{ .Title }}</h1>
     <table>

layouts/_default/list.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "main" }}
-  {{ partial "breadcrumbs-legacy.html" . }}
+  {{ partial "breadcrumbs.html" . }}
   <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1>{{ . }}</h1>

layouts/_default/single.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "main" }}
-  {{ partial "breadcrumbs-legacy.html" . }}
+  {{ partial "breadcrumbs.html" . }}
   <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1>{{ . }}</h1>

layouts/_default/term.html

@@ -1,29 +0,0 @@
-{{ define "left" }}
-  {{ partial "sidebar.html" . }}
-{{ end }}
-
-{{ define "main" }}
-  {{ partial "breadcrumbs-legacy.html" . }}
-  <article class="prose max-w-none dark:prose-invert">
-    <h1 class="flex items-center select-none">
-      <span class="text-4xl material-symbols-rounded">tag</span>
-      <span class="select-text">{{ .Title }}</span>
-    </h1>
-    {{ .Content }}
-    {{ with (index site.Taxonomies.topics .Data.Term) }}
-      <hr />
-      <nav>
-        <div class="text-xl">Pages about this topic:</div>
-        <ul>
-          {{ range . | first 5 }}
-            <li>
-              <a href="{{ .Page.Permalink }}"
-                >{{ partial "utils/title.html" .Page }}</a
-              >
-            </li>
-          {{ end }}
-        </ul>
-      </nav>
-    {{ end }}
-  </article>
-{{ end }}

layouts/_default/term.json

@@ -1,14 +0,0 @@
-{
-  "title": "{{ .Title }}",
-  "lead": "{{ .Params.lead }}",
-  "description": {{ .Plain | jsonify }},
-  "docs": [
-    {{- range $i, $e := (index site.Taxonomies.tags .Data.Term) }}
-    {{ if $i }},{{ end }}
-      {
-        "title": "{{ .Title }}",
-        "url": "{{ .Permalink}}"
-      }
-    {{ end }}
-  ]
-}

layouts/partials/breadcrumbs-next.html

@@ -1,19 +0,0 @@
-<nav class="p-5 space-x-2 text-sm flex items-center">
-  {{- template "crumbtrail" (dict "p1" . "p2" .) -}}
-</nav>
-
-{{ define "crumbtrail" }}
-  {{ if and .p1.Parent .p2.Parent }}
-    {{ template "crumbtrail" (dict "p1" .p1.Parent "p2" .p2 ) }}
-  {{- end -}}
-  <a
-    class="link"
-    title="{{ partial "utils/title" .p1 }}"
-    href="{{ .p1.Permalink }}"
-    >{{ if .p1.IsHome }}
-      <span class="material-symbols-rounded">home</span>
-    {{ else }}
-      {{ partial "utils/title" .p1 }}
-    {{ end }}</a
-  >{{- if ne .p1 .p2 }}<span>/</span>{{- end -}}
-{{- end -}}

layouts/partials/breadcrumbs.html

@@ -2,12 +2,8 @@
 {{ $ctx := . }}
 
 
-<nav class="py-2 gap-2 flex items-center overflow-hidden">
+<nav class="py-4 gap-4 flex items-center overflow-hidden text-gray-light dark:text-gray-dark">
-  <a class="link" href="{{ site.BaseURL }}"
-    ><span class="material-symbols-rounded">home</span></a
-  >
   {{ with ($scratch.GetSortedMapValues "sections") }}
-    <span>/</span>
     {{ range $i, $e := . }}
       {{- if $i -}}
         <span>/</span>
@@ -17,6 +13,6 @@
   {{- end -}}
   {{- with $scratch.Get "lastsection" -}}
   <span>/</span>
-  <a href="{{ .path }}" class="link whitespace-nowrap">{{ markdownify .title }}</a>
+  <span>{{ markdownify .title }}</span>
   {{- end -}}
 </nav>

layouts/partials/sidebar.html

@@ -6,7 +6,7 @@
 {{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
 
 {{/* Render the top-nav in sidebar for small screens */}}
-<nav class="py-4 hidden gap-4 pl-3 md:flex flex-col justify-evenly">
+<nav class="text-sm py-4 hidden gap-4 pl-4 md:flex flex-col justify-evenly">
   <div class="text-gray-light dark:text-gray-dark">Main sections</div>
   {{ range site.Menus.main }}
   <div class="pl-2 underline-offset-8 decoration-2 hover:underline decoration-blue-light dark:decoration-blue-dark hover:opacity-75
@@ -19,8 +19,8 @@
 </nav>
 {{ if $firstSection }}
 <hr>
-<nav id="sectiontree" class="w-[300px] md:w-full flex flex-col gap-2">
+<nav id="sectiontree" class="text-sm w-[300px] md:w-full flex flex-col gap-2 px-3">
-  <div class="hidden md:block pl-3 pt-4 text-gray-light dark:text-gray-dark">This section</div>
+  <div class="hidden md:block pt-4 text-gray-light dark:text-gray-dark">This section</div>
   {{/* The current page is in the table of contents */}}
   <ul>
     {{/* Walk the toc.yaml nodes under the current main section */}}
@@ -37,12 +37,12 @@
 {{ if .entry.sectiontitle }}
 {{/* .entry is a section */}}
 <li x-data="{ expanded: false }" x-init="expanded = !!$el.querySelector('a[aria-current]')" :data-expanded="expanded">
-  <button @click="expanded = ! expanded" class="sidebar-hover w-full flex items-center justify-between pr-3">
+  <button @click="expanded = ! expanded" class="rounded px-4 sidebar-hover w-full flex items-center justify-between">
-    <span class="pl-3 py-2 truncate">{{ markdownify .entry.sectiontitle }}</span>
+    <span class="py-2 truncate">{{ markdownify .entry.sectiontitle }}</span>
-    <span class="material-symbols-rounded -my-1 md:text-[28px]" x-text="expanded ? 'expand_more' : 'chevron_right'">
+    <span class="material-symbols-rounded -my-1 md:text-[28px]" x-text="expanded ? 'expand_less' : 'expand_more'">
     </span>
   </button>
-  <ul x-show="expanded" class="ml-3 md:ml-[21px]">
+  <ul x-show="expanded" x-collapse class="ml-3 md:ml-[21px]">
     {{ range .entry.section }}
     {{ template "tocRender" (dict "entry" . "ctx" $ctx) }}
     {{ end }}
@@ -51,11 +51,10 @@
 {{ else }}
 {{/* .entry is a page */}}
 {{ $isCurrent := eq (urls.Parse $ctx.Permalink).Path .entry.path }}
-<li {{ if $isCurrent }} class="pl-3 box-border border-l-4 border-blue-light
+<li class="pl-4 sidebar-hover rounded
-          dark:border-blue-dark sidebar-hover bg-blue-light-200
+  {{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
-          dark:bg-blue-dark-100" {{ else }} class="pl-3 sidebar-hover" {{ end }}>
   <span class="flex items-center">
-    <a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate hover:font-medium"
+    <a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate"
       href="{{ .entry.path }}" title="{{ markdownify .entry.title }}">{{ markdownify .entry.title }}</a>
   </span>
 </li>

layouts/partials/top-nav.html

@@ -2,14 +2,13 @@
 {{ $firstSection := (index ($scratch.GetSortedMapValues "sections") 0).title }}
 <div>
   <nav>
-    <ul class="flex gap-4 md:hidden">
+    <ul class="box-content flex mt-1 gap-4 md:hidden">
       {{ range site.Menus.main }}
-        <li
+      <li class="opacity-100 border-b-4 hover:opacity-100
-          class="pb-1 mt-2 underline-offset-8 decoration-2 hover:underline hover:opacity-75
+          {{- if not (eq $firstSection .Name) }}
-          {{- if eq $firstSection .Name }}
+            opacity-60 border-blue-light dark:border-blue-dark-200 hover:border-blue-light-600 dark:hover:border-blue-dark-100
-            underline
           {{- end }}">
-          <a href="{{ .URL }}">{{ .Name }}</a>
+        <a class="block py-1 px-2" href="{{ .URL }}">{{ .Name }}</a>
       </li>
       {{ end }}
     </ul>

layouts/samples/single.html

@@ -3,7 +3,7 @@
 {{ end }}
 
 {{ define "main" }}
-  {{ partial "breadcrumbs-legacy.html" . }}
+  {{ partial "breadcrumbs.html" . }}
   <article class="prose max-w-none dark:prose-invert">
     <h1>{{ .Title }}</h1>
     <blockquote>