Add next cards (#3737)

viamrobotics · Dec 6, 2024 · dc4df8a · dc4df8a
1 parent 987948a
commit dc4df8a
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 18 deletions.
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -2692,3 +2692,97 @@ a.tree-root {
 }
 
 // Top level nav END
+
+// Next page START
+
+#next-page {
+  clear: both;
+}
+
+#next-page > div.left-only {
+  flex-direction: row-reverse;
+}
+
+#next-page > div > div.hover-card {
+  min-width: 250px;
+  max-width: unset;
+}
+
+@media (min-width: 500px) {
+  #next-page > div > div.hover-card {
+    max-width: calc((100% - 1.5rem)/2);
+  }
+}
+
+#next-page > div > div.hover-card.left {
+  float: left;
+  margin: 0rem 0.75rem 0rem 0rem;
+}
+
+#next-page > div > div.hover-card.right {
+  float: right;
+  margin: 0rem 0rem 0rem 0.75rem;
+}
+
+#next-page > div > div.hover-card > a {
+  width: 100%;
+  color: black;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+#next-page > div > div.hover-card > a > div > p {
+  font-family: space grotesk,sans-serif;
+  font-size: 1.1667rem !important;
+  line-height: 1.4375em;
+}
+
+#next-page > div > div.hover-card > a > div {
+  display: flex;
+  align-items: center;
+}
+
+#next-page > div > div.hover-card > a > div.text {
+  flex-direction: column;
+}
+
+#next-page > div > div.hover-card > a > div.text > p:first-child {
+  text-transform: uppercase;
+  font-family: Space Mono,sans-serif;
+  color: #aaa;
+  font-size: 0.833rem !important;
+}
+
+#next-page > div > div.hover-card.left > a > div.text > p:first-child {
+  align-self: flex-end;
+}
+
+#next-page > div > div.hover-card.right > a > div.text > p:first-child {
+  text-transform: uppercase;
+  align-self: flex-start;
+}
+
+
+#next-page > div > div.hover-card > a > div > div {
+  margin-bottom: 0;
+}
+
+#next-page > div > div.hover-card.left > a > div.arrow {
+  margin-right: 1.5rem;
+}
+
+#next-page > div > div.hover-card.left > a > div {
+  text-align: right;
+}
+
+#next-page > div > div.hover-card.right > a > div.arrow {
+  margin-left: 1.5rem;
+}
+
+#next-page > div > div.hover-card.right > a > div {
+  text-align: left;
+}
+
+
+// Next page END
diff --git a/docs/manage/fleet/provision/_index.md b/docs/manage/fleet/provision/_index.md
@@ -4,7 +4,6 @@ title: "Provision devices using viam-agent"
 weight: 25
 layout: "docs"
 type: "docs"
-no_list: true
 description: "Provision a machine as it first comes online with a pre-defined configuration - in the factory or when the machine is taken into service."
 images: ["/platform/provisioning-demo.gif"]
 videos: ["/platform/provisioning-demo.webm", "/platform/provisioning-demo.mp4"]

diff --git a/docs/manage/fleet/setup.md b/docs/manage/fleet/setup.md
@@ -4,7 +4,6 @@ title: "Configure machine operating system settings"
 weight: 20
 layout: "docs"
 type: "docs"
-no_list: true
 description: "TODO"
 ---
 

diff --git a/docs/manage/software/deploy-packages.md b/docs/manage/software/deploy-packages.md
@@ -4,9 +4,8 @@ title: "Deploy software packages to machines (OTA)"
 weight: 30
 layout: "docs"
 type: "docs"
-no_list: true
 images: ["/registry/module-puzzle-piece.svg"]
-description: You can use a fragment to deploy software packages and ML models to many machines, as well as to update deployed versions of those software packages and ML models."
+description: You can use a fragment to deploy software packages and ML models to many machines, as well as to update deployed versions of those software packages and ML models.
 languages: []
 viamresources: []
 platformarea: ["registry", "fleet"]

diff --git a/docs/manage/software/update-packages.md b/docs/manage/software/update-packages.md
@@ -4,7 +4,6 @@ title: "Update packages"
 weight: 40
 layout: "docs"
 type: "docs"
-no_list: true
 description: "As new versions of software modules or ML models become available, you can update the deployed version on all machines in one go."
 ---
 

diff --git a/docs/manage/troubleshoot/alert.md b/docs/manage/troubleshoot/alert.md
@@ -4,7 +4,6 @@ title: "Alert on machine telemetry"
 weight: 20
 layout: "docs"
 type: "docs"
-no_list: true
 description: "Configure a trigger to trigger actions when data is sent from your machine to the cloud, or when your machine's internet connectivity changes."
 tags: ["triggers"]
 aliases:

diff --git a/docs/manage/troubleshoot/monitor.md b/docs/manage/troubleshoot/monitor.md
@@ -4,7 +4,6 @@ title: "Monitor machine status"
 weight: 10
 layout: "docs"
 type: "docs"
-no_list: true
 description: "Monitor the status of all machines in an organization and investigate issues when needed."
 ---
 

diff --git a/docs/manage/troubleshoot/troubleshoot.md b/docs/manage/troubleshoot/troubleshoot.md
@@ -4,7 +4,6 @@ title: "Troubleshoot problems"
 weight: 30
 layout: "docs"
 type: "docs"
-no_list: true
 description: "A guide to troubleshooting a Viam-based machine or system of machines with fixes to common problems."
 date: "2022-01-01"
 # updated: ""  # When the content was last entirely checked

diff --git a/layouts/docs/content.html b/layouts/docs/content.html
@@ -49,17 +49,27 @@ <h4 class="alert-heading">DRAFT</h4>
 
 	{{ if ne .Params.no_list true}}
 	{{ $pages := union .Sections .Pages }}
-	  <div id="archive" class="card-container">
-		<div class="row-no-margin">
-		  {{ range sort $pages ".Weight"}}
-			{{ partial "card.html" (dict "link" (.Page.File.Path) "class" "" "customTitle" "" "customDescription" "" "customCanonicalLink" (.Page.Params.canonical) ) }}
+	<div id="next-page" class="card-container">
+	<hr>
+	{{ $pages := .CurrentSection.Pages.ByWeight }}
+	<!-- These are swapped in order -->
+	{{ if ($pages.Next .) }}
+	<div class="row-no-margin">
+	{{ else }}
+	<div class="row-no-margin left-only">
+	{{ end }}
+	{{ with $pages.Next . }}
+		{{ if not .toc_hide }}
+		{{ partial "nextcard.html" (dict "link" (.Page.File.Path) "class" "left"  "customCanonicalLink" (.Page.Params.canonical) ) }}
 		{{ end }}
-		</div>
-	  </div>
-	  <div>
-		<p>Have questions, or want to meet other people working on robots? Join our <a href="https://discord.gg/viam">Community Discord</a>.</p><p>If you notice any issues with the documentation, feel free to <a href="https://github.com/viamrobotics/docs/issues">file an issue</a> or <a target="_blank" title="Edit source file on GitHub" aria-label="Edit source file on GitHub" href="https://github.com/{{.Site.Params.github.repository}}/edit/{{.Site.Params.github.branch}}/docs/{{ replace .File.Path '\\' '/' }}">edit this file</a>.</p>
-	  </div>
-
+	{{ end }}
+	{{ with $pages.Prev . }}
+		{{ if not .toc_hide }}
+		{{ partial "nextcard.html" (dict "link" (.Page.File.Path) "class" "right"  "customCanonicalLink" (.Page.Params.canonical) ) }}
+		{{ end }}
+	{{ end }}
+	</div>
+	</div>
 	{{ end }}
 
 	{{ if (.Site.Params.DisqusShortname) }}

diff --git a/layouts/partials/nextcard.html b/layouts/partials/nextcard.html
@@ -0,0 +1,41 @@
+{{- $class := .class -}}
+{{- $customTitle := .customTitle -}}
+{{- $customCanonicalLink := .customCanonicalLink -}}
+{{- $link := (path.Clean (.link)) -}}
+{{- $baseurl := .Site.BaseURL -}}
+{{- if (eq (substr .Site.BaseURL -1 1) "/" ) -}}
+  {{- $baseurl := (substr .Site.BaseURL 0 -1) -}}
+{{- end -}}
+<div class="col hover-card {{ if $class }}{{ $class }}{{ end }}">
+{{- if site.GetPage ($link | string) -}}
+  {{- with site.GetPage ($link | string) -}}
+    {{- if $customCanonicalLink -}}
+    <a href="{{$customCanonicalLink}}">
+    {{- else -}}
+    <a href="{{.RelPermalink}}">
+    {{- end -}}
+    {{ if eq $class "left" }} <div class="arrow"><i class="fas fa-chevron-left"></i></div> {{ end }}
+    <div class="text">
+      {{ if eq $class "left" }} <p class="left">Previous</p> {{ else }} <p class="left">Next</p> {{ end }}
+        <p> {{- .LinkTitle -}}</p>
+    </div>
+    {{ if eq $class "right" }} <div class="arrow"><i class="fas fa-chevron-right"></i></div> {{ end }}    </a>
+   {{- end -}}
+ {{- else -}}
+  {{- if strings.HasPrefix ($link | string) "http" -}}
+    {{- if $customCanonicalLink -}}
+    <a href="{{$customCanonicalLink}}">
+    {{- else -}}
+    <a href="{{.RelPermalink}}">
+    {{- end -}}
+    <div {{ if .webm_src }}class="small-hover-card-div"{{ end }}>
+     {{- if $customTitle -}}
+      <div> {{- $customTitle -}}</div>
+     {{- end -}}
+    </div>
+    </a>
+  {{- else -}}
+    {{- warnf "Card has a bad link: %s" $link -}}
+  {{- end -}}
+ {{- end -}}
+</div>