Use Docsy Theme

.devcontainer/devcontainer.json

@@ -3,6 +3,11 @@
   "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
   "forwardPorts": [1313],
   "features": {
+    "ghcr.io/devcontainers/features/go:1": {},
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "none",
+      "nodeGypDependencies": false
+    },
     "ghcr.io/eitsupi/devcontainer-features/jq-likes:2": {
       "jqVersion": "latest",
       "yqVersion": "latest"

.gitignore

@@ -5,3 +5,4 @@ _site
 .hugo_build.lock
 public
 resources
+node_modules

.nvmrc

@@ -0,0 +1 @@
+20

README.md

@@ -1,26 +1,15 @@
 # <div align="left"><img src="https://rapids.ai/assets/images/rapids_logo.png" width="90px"/> &nbsp; [RAPIDS.ai](https://rapids.ai.com) Website
 
-This repository contains the source code and content for the [RAPIDS.ai](https://rapids.ai) website. The site uses [Hugo](https://gohugo.io/about/) for generating static HTML and [Bulma](https://bulma.io/) as a CSS framework. On occasion it uses [Apline.js](https://alpinejs.dev/start-here).
-
-
-## Design and Layout
-
-Refer to the [Bulma Documentation](https://bulma.io/documentation/) for reference to the CSS class names and components. Note: many CSS classes are overwritten through `custom.css`.
-- [Column System](https://bulma.io/documentation/columns/basics/)
-- [Container Class](https://bulma.io/documentation/layout/container/)
-- [Spacing, Margin, and Padding Helpers](https://bulma.io/documentation/helpers/spacing-helpers/)
-
-Hugo uses templates, layouts, and directories to build pages. The `/layouts/_defaults` folder contains `Baseof.html` for the root page chrome layout, followed by `section.html` for directory `_index.html` files, then `single.html` for sub pages. The `/layout/index.html` page is for the `/content/_index.html` page only, but still uses `Baseof.html` for chrome. Note: `partials` can only be used as part of template `layouts`, and `shortcodes` can only be used as part of `content` sections/pages. All in all, more complicated than it needs to be...
+This repository contains the source code and content for the [RAPIDS.ai](https://rapids.ai) website.
 
+The site uses [Hugo](https://gohugo.io/) as a static site generator with the [Docsy theme](https://github.com/google/docsy).
 
 ## Requirements
 
 All logos and images are located in the [images](/static/images) folder. Externally (no website) referenced files should be placed in the [assets](/assets) folder.
 
 Font Icons are used from [Font Awesome](https://fontawesome.com/), and include Pro account icons.
 
-In the future it will employ the more optimized assets and Hugo pipe features.
-
 ## Pull Request Previews
 
 [Netlify](https://www.netlify.com/) will create a preview environment when PRs are opened.
@@ -31,4 +20,6 @@ You can use the included devcontainer for local development.
 
 Start the container and run `hugo serve` to start a development server.
 
-The development server can be viewed in a browser at <http://localhost:1313>.
+To view draft files, run `hugo serve -D`.
+
+The development server can be viewed in a browser at <http://localhost:1313>.

assets/scss/README.md

@@ -0,0 +1,28 @@
+# scss
+
+This directory contains SCSS files for the RAPIDS website.
+
+## Special Files
+
+There are two special files in this directory, listed below and described in the Docsy documentation [here](https://www.docsy.dev/docs/adding-content/lookandfeel/):
+
+- `_variables_project.scss` - used for setting SCSS variables _before_ Bootstrap (which is used by Docsy) generates all of its classes. This is useful for modifying Bootstrap's generated classes according to their utility API docs [here](https://getbootstrap.com/docs/5.2/utilities/api/) or setting other customization variables as described [here](https://getbootstrap.com/docs/5.2/customize/overview/)
+- `_styles_project.scss` - used for adding additional SCSS styles to the final generated stylesheet. These styles can use the generated Bootstrap styles based on the contents of `_variables_project.scss`
+
+## Other Files
+
+RAPIDS-specific styles should go in the `rapidsai/` subdirectory. These files can then be imported into the `_styles_project.scss` file.
+
+Aside from the special files listed above, the root `assets/scss` directory is reserved for overriding SCSS files from the Docsy theme. In some cases, it may be necessary to override Docsy's default `.scss` files that are located [here](https://github.com/google/docsy/tree/v0.7.1/assets/scss). In these instances, the Docsy files can be copied directly into the `assets/scss` directory and modified as needed. This should be used as a last resort though, only after adding additional styles to the `rapidsai/` directory has been deemed insufficient.
+
+## Conventions
+
+Below is a list of conventions for authoring styles for the site. In the future, we can explore adding [StyleLint](https://stylelint.io/) to our devcontainer to help enforce rules.
+
+- Avoid writing styles. Instead, leverage Bootstrap's utility classes whenever possible. Utility classes are configurable via their [utility API](https://getbootstrap.com/docs/5.2/utilities/api/). Reusable components can be created with Hugo by leveraging its shortcode functionality to avoid needing to repeat utility classes across multiple instances of the same component
+- When it is necessary to create custom styles, use the following conventions:
+  - Place the related styles in their own `.scss` file in the `rapidsai/*` directory. Import the newly created file in `rapidsai/_index.scss`
+  - Use the [BEM](https://getbem.com/) naming convention to avoid naming collisions and promote consistent naming conventions
+  - Avoid deep nesting with SCSS. Aim for no more than 1 level of nesting
+  - Reserve nesting for pseudo-classes, psuedo-elements, and media query mixins
+  - Use Bootstrap's built-in `media-breakpoint-up` ([docs](https://getbootstrap.com/docs/5.2/layout/breakpoints/#min-width)) mixin to generate consistent `min-width` media queries for a [mobile-first](https://zellwk.com/blog/how-to-write-mobile-first-css/) design approach

assets/scss/_main-container.scss

@@ -0,0 +1,40 @@
+/*
+This file is copied from the link below in order to comment out Docsy's default
+section padding.
+https://github.com/google/docsy/blob/v0.7.1/assets/scss/_main-container.scss
+*/
+
+// The outer page container i.e. common styles for any page.
+.td-outer {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+// The outer page container for the default base template.
+// .td-default {
+//   main {
+//     > section:first-of-type {
+//       @include media-breakpoint-up(md) {
+//         padding-top: 8rem;
+//       }
+//     }
+
+//     section {
+//       @extend .td-block-padding;
+//     }
+//   }
+// }
+
+.td-main {
+  flex-grow: 1;
+}
+
+// .td-404 main,
+// .td-main main {
+//   padding-top: 1.5rem;
+//   padding-bottom: 2rem;
+//   @include media-breakpoint-up(md) {
+//     padding-top: 5.5rem;
+//   }
+// }

assets/scss/_styles_project.scss

@@ -0,0 +1,2 @@
+@import "rapidsai/index";
+@import "rapidsai/navigation";

assets/scss/_variables_project.scss

@@ -0,0 +1,93 @@
+/*
+This file works by:
+  - Importing Docsy Bootstrap forward variables
+  - Settings RAPIDS-specific Bootstrap variables
+  - Importing Docsy Bootstrap main variables
+  - Importing the necessary Bootstrap files to use their Utility API
+    - Utility API: https://getbootstrap.com/docs/5.2/utilities/api/
+*/
+
+@import "_variables_forward";
+
+// Configure font sizes according to Bulma
+$h1-font-size: $font-size-base * 3;
+$h2-font-size: $font-size-base * 2.5;
+$h3-font-size: $font-size-base * 2;
+$h4-font-size: $font-size-base * 1.5;
+$h5-font-size: $font-size-base * 1.25;
+$h6-font-size: $font-size-base;
+$h7-font-size: $font-size-base * 0.9;
+$h8-font-size: $font-size-base * 0.75;
+
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size,
+  7: $h7-font-size,
+  8: $h8-font-size,
+);
+
+// Configure spacers according to Bulma
+$spacers: (
+  0: 0,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
+  3: $spacer * 0.75,
+  4: $spacer,
+  5: $spacer * 1.5,
+  6: $spacer * 2.5,
+  7: $spacer * 3,
+  8: $spacer * 3.5,
+  9: $spacer * 4.5,
+);
+
+// Configure breakpoints according to Bulma
+$grid-breakpoints: (
+  sm: 0,
+  md: 769px,
+  lg: 1024px,
+  xl: 1216px,
+  xxl: 1408px
+);
+
+// Disable responsive font sizing:
+// https://getbootstrap.com/docs/5.2/getting-started/rfs/
+$enable-rfs: false;
+
+// Disable Docsy Google Fonts since we load them ourself
+$td-enable-google-fonts: false;
+
+// Import Docsy variables
+@import "variables";
+// Import necessary bootstrap files to use utility API
+@import "../vendor/bootstrap/scss/functions";
+@import "../vendor/bootstrap/scss/variables";
+@import "../vendor/bootstrap/scss/maps";
+@import "../vendor/bootstrap/scss/mixins";
+@import "../vendor/bootstrap/scss/utilities";
+
+// Configure container widths according to Bulma
+$container-max-widths: (
+  md: 100%,
+  lg: 960px + ($grid-gutter-width / 1rem * 16px),
+  xl: 1152px + ($grid-gutter-width / 1rem * 16px),
+  xxl: 1344px + ($grid-gutter-width / 1rem * 16px),
+);
+
+$additional-line-heights: (
+  xs: 1.15
+);
+$merged-line-heights: (
+  "line-height": map-merge(map-get($utilities, "line-height"),
+    (values: map-merge(map-get(map-get($utilities, "line-height"), "values"),
+        $additional-line-heights,
+      ),
+    ),
+  ),
+);
+
+$merged-maps: map-merge-multiple($merged-line-heights);
+$utilities: map-merge($utilities, $merged-maps);