just-the-hm-docs 1.0.0.rc1 → 1.0.1.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: acf12320344cc3dd2d21238c7157760afb05057a60474dc964715a734523082c
-  data.tar.gz: 611c56316630b1f26434368160b2d75d0b3bed8801bff553f7400898297c7157
+  metadata.gz: 21dd2d7cc51e8a027dfb3bca608e880d56c41c007786534813070f3518ec099b
+  data.tar.gz: 4155dda7aae0d55a984b2f3c090c2dc09602304947d0161aeab535791c7316d8
 SHA512:
-  metadata.gz: 83ebebe2290075dfd74ee5aaceff92b6fe20ca2d91af848c8c82cb487ed1f591a35d05a44d227001db7e7c88362c6595034eeb927f107abf81cb44f8a8bc9417
-  data.tar.gz: e34ff674a2752b26bf09cb9f0d691d5a120abbfec152b986f2d751f98fc0fd07c9b37dbfca7a7afa6ec6ad856cb418af405620fed999f3dea8952e982c02cbfd
+  metadata.gz: 960d3e213ca5a45c2bb0942853181fc4e499cf688fe327a0e6289d1c6357af1a2f0dd63a5b4879cb6bbc78817b87ea5d244cfdc650d0ef22c946c5c7a2c8df49
+  data.tar.gz: 4280ce1d74be4b59a0c062cb3ac442d1340c10c0fdd412b05bafd0c5d9b1ef7a8128e187bf1353805858b00afae499bd2c986a863012805a5364be32b1012361

data/README.md

@@ -10,14 +10,29 @@ Just the HM Docs is a GitHub Pages template developed for the purpose of quickly
 
 Getting started with Just the HM Docs is simple.
 
-1. Create a [new repository based on Just the HM Docs](https://github.com/humanmade/just-the-hm-docs/generate).
-1. Update `_config.yml` and `README.md` with your project information. [Be sure to update the url and baseurl](https://mademistakes.com/mastering-jekyll/site-url-baseurl/).
-1. Configure a [publishing source for GitHub Pages](https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages). Your project docs website is now live!
-1. Edit and create `.md` [Markdown files](https://guides.github.com/features/mastering-markdown/) to add more content pages.
+1. Download the [starter theme branch](https://github.com/humanmade/just-the-hm-docs/tree/starter-theme) to get the following files:
+  - the [`_config.yml`](https://github.com/humanmade/just-the-hm-docs/blob/starter-theme/_config.yml) file and the [`Gemfile`](https://github.com/humanmade/just-the-hm-docs/blob/starter-theme/Gemfile)
+  - additional markdown files with sample content to get you started
+  - a gitignore file, 404 template, and HM logo
+  - a [GitHub Pages / Actions workflow](https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/) to build and publish the site on GitHub Pages
+1. Update `_config.yml` and `README.md` with your project information. [Be sure to update the url and baseurl](https://mademistakes.com/mastering-jekyll/site-url-baseurl/) if needed.
+1. Update the starter content in the `.md` [Markdown files](https://guides.github.com/features/mastering-markdown/) and add any additional content you need.
+1. Configure a [publishing source for GitHub Pages](https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages) and add an environment protection rule to allow only a specific branch to publish to your environment.
+1. Commit your files to your publishing branch. Your project docs website is now live!
 
 ### Local development environment
 
-Just the HM Docs requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler. To setup a local development environment, clone your template repository and follow the GitHub Docs on [Testing your GitHub Pages site locally with Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll).
+Just the HM Docs requires no special Jekyll plugins and can run on GitHub Pages' standard Jekyll compiler. To setup a local development environment, clone your repository and follow the GitHub Docs on [Testing your GitHub Pages site locally with Jekyll](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll).
+
+## Publishing a Gem
+
+The theme is distributed as a Ruby gem so that it can be easily consumed by any Jekyll site. New versions can be published by anything with access to [the gem](https://rubygems.org/gems/just-the-hm-docs/) manually, but there is also a GitHub Action set up to automate publishing to rubygems.org and the GitHub package repository.
+
+The action only runs when triggered manually. To do so, run the ["Publish Ruby Gem"](https://github.com/humanmade/just-the-hm-docs/actions/workflows/publish-gem.yml) action.
+
+In order to push to rubygems.org, the action needs access to an auth token. The auth token can be set via [`Security / Secrets and variables / Actions`](https://github.com/humanmade/just-the-hm-docs/settings/secrets/actions). To create a new token, an authorized gem owner will need to create a new one from the [`API Keys`](https://rubygems.org/profile/api_keys) setting area on rubygems.org. Once created, add the token with the name `RUBYGEMS_AUTH_TOKEN`.
+
+**NOTE:** The API key used needs to be accessible by machines *without* 2FA—otherwise the automated deployment will fail becuase it will be prompted for an OTP in a non-interactive environment. *If the security tradeoff seems reasonable* the MFA level for a rubygems.org account can be set to "UA and gem signin," which will prompt for 2FA on the website and with the `gem signin` command, but *not* for `gem push`, allowing the automated gem deploy action to work.
 
 ## License
 

data/_sass/color_schemes/hm.scss

@@ -17,10 +17,10 @@ $search-result-preview-color: $hm-navy-1000;
 $sidebar-color: $hm-navy-100;
 
 // Override theme variables.
-$border-radius: rem(6px);
-$content-width: 915px;
+$border-radius: rem(6);
+$content-width: 915;
 $gutter-spacing: $sp-7;
-$header-height: 70px;
+$header-height: 70;
 $nav-list-item-height: $spacing-unit * 3.2;
 $nav-list-item-height-sm: $spacing-unit * 3.2;
-$nav-width: 276px;
+$nav-width: 276;

data/_sass/custom/hm-branding.scss

@@ -164,7 +164,7 @@ h6 {
 
 .site-title {
   @include mq(md) {
-    font-size: rem(21px) !important;
+    font-size: rem(21) !important;
     padding-bottom: $gutter-spacing-sm;
     padding-top: $gutter-spacing-sm;
   }
@@ -177,10 +177,10 @@ h6 {
 
   &::after {
     content: "Documentation";
-    padding-left: rem(62px);
+    padding-left: rem(62);
 
     @include mq(md) {
-      padding-left: rem(53px);
+      padding-left: rem(53);
     }
   }
 }
@@ -205,7 +205,7 @@ h6 {
   .nav-list-link {
     outline-offset: -1px;
     text-decoration: underline;
-    text-underline-offset: rem(3px);
+    text-underline-offset: rem(3);
 
     .nav-list .nav-list-item > &:hover,
     &:hover,
@@ -246,8 +246,8 @@ h6 {
 }
 
 .search-label .search-icon {
-  height: rem(22px);
-  width: rem(22px);
+  height: rem(22);
+  width: rem(22);
 }
 
 .search-result {

data/_sass/layout.scss

@@ -1,5 +1,32 @@
 // The basic two column layout
 
+:root {
+  --sidebar-width: #{rem($nav-width-md)};
+
+  @include mq(lg) {
+    --sidebar-width: calc(
+      (100% - #{rem($nav-width + $content-width)}) / 2 + #{rem($nav-width)}
+    );
+  }
+}
+
+body {
+  position: relative;
+  padding-bottom: $sp-10;
+  overflow-y: scroll;
+
+  @include mq(md) {
+    display: grid;
+    grid-template-columns: rem($nav-width-md) 1fr;
+    position: static;
+    padding-bottom: 0;
+  }
+
+  @include mq(lg) {
+    grid-template-columns: minmax(rem($nav-width), var(--sidebar-width)) 1fr;
+  }
+}
+
 .side-bar {
   z-index: 0;
   display: flex;
@@ -9,30 +36,22 @@
   @include mq(md) {
     flex-flow: column nowrap;
     position: fixed;
-    width: $nav-width-md;
+    width: var(--sidebar-width);
     height: 100%;
     border-right: $border $border-color;
     align-items: flex-end;
   }
 
   @include mq(lg) {
-    width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
-    min-width: $nav-width;
+    min-width: rem($nav-width);
   }
 }
 
 .main {
   @include mq(md) {
+    grid-column-start: 2;
     position: relative;
-    max-width: $content-width;
-    margin-left: $nav-width-md;
-  }
-
-  @include mq(lg) {
-    margin-left: max(
-      $nav-width,
-      calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})
-    );
+    max-width: rem($content-width);
   }
 }
 
@@ -56,7 +75,7 @@
   @include mq(md) {
     display: flex;
     justify-content: space-between;
-    height: $header-height;
+    height: rem($header-height);
     background-color: $body-background-color;
     border-bottom: $border $border-color;
   }
@@ -76,7 +95,7 @@
   width: 100%;
 
   @include mq(lg) {
-    width: $nav-width;
+    width: rem($nav-width);
   }
 }
 
@@ -98,12 +117,12 @@
 
 .site-header {
   display: flex;
-  min-height: $header-height;
+  min-height: rem($header-height);
   align-items: center;
 
   @include mq(md) {
-    height: $header-height;
-    max-height: $header-height;
+    height: rem($header-height);
+    max-height: rem($header-height);
     border-bottom: $border $border-color;
   }
 }
@@ -167,21 +186,6 @@
   );
 }
 
-// stylelint-disable selector-max-type
-
-body {
-  position: relative;
-  padding-bottom: $sp-10;
-  overflow-y: scroll;
-
-  @include mq(md) {
-    position: static;
-    padding-bottom: 0;
-  }
-}
-
-// stylelint-enable selector-max-type
-
 .site-footer {
   @include container;
 

data/_sass/support/_functions.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 
 @function rem($size, $unit: "") {
-  $rem-size: math.div($size, $root-font-size);
+  $rem-size: $size * $root-font-size-rem-base;
 
   @if $unit == false {
     @return #{$rem-size};

data/_sass/support/_variables.scss

@@ -4,6 +4,7 @@ $body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
   roboto, "Helvetica Neue", arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
 $root-font-size: 16px !default; // Base font-size for rems
+$root-font-size-rem-base: 0.0625 !default; // 1 divided by base font-size for rem function.
 $body-line-height: 1.4 !default;
 $content-line-height: 1.6 !default;
 $body-heading-line-height: 1.25 !default;
@@ -108,22 +109,22 @@ $border-color: $grey-lt-100 !default;
 
 $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
-$nav-width: 264px !default;
-$nav-width-md: 248px !default;
+$nav-width: 264 !default;
+$nav-width-md: 248 !default;
 $nav-list-item-height: $sp-6 !default;
 $nav-list-item-height-sm: $sp-8 !default;
 $nav-list-expander-right: true;
-$content-width: 800px !default;
-$header-height: 60px !default;
-$search-results-width: $content-width - $nav-width !default;
+$content-width: 800 !default;
+$header-height: 60 !default;
+$search-results-width: rem($content-width - $nav-width) !default;
 $transition-duration: 400ms;
 
 // Media queries in pixels
 
 $media-queries: (
-  xs: 320px,
-  sm: 500px,
+  xs: 320,
+  sm: 500,
   md: $content-width,
   lg: $content-width + $nav-width,
-  xl: 1400px,
+  xl: 1400,
 ) !default;

data/changelog.md

@@ -7,10 +7,15 @@ nav_order: 99
 
 # Changelog
 
+## v1.0.1
 
-## v0.0.1
+- Fix Sass compiling bug
+- Split icons into their own folder
+- Update documentation
 
-- Release [Just the HM docs](https://github.com/humanmade/just-the-hm-docs/pull/1) site.
+## v1.0.0
+
+- Release [Just the HM docs](https://github.com/humanmade/just-the-hm-docs/pull/1).
 
 ## v0.0.0
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: just-the-hm-docs
 version: !ruby/object:Gem::Version
-  version: 1.0.0.rc1
+  version: 1.0.1.rc1
 platform: ruby
 authors:
 - Human Made
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-01 00:00:00.000000000 Z
+date: 2023-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -176,15 +176,14 @@ files:
 - assets/favicon/favicon-32x32.png
 - assets/favicon/favicon.ico
 - assets/favicon/site.webmanifest
+- assets/icons/hm-logo.svg
+- assets/icons/search.svg
 - assets/images/.gitkeep
-- assets/images/hm-logo.svg
-- assets/images/search.svg
 - assets/js/just-the-docs.js
 - assets/js/vendor/lunr.min.js
 - assets/js/zzzz-search-data.json
 - bin/just-the-hm-docs
 - changelog.md
-- favicon.ico
 - lib/tasks/search.rake
 homepage: https://github.com/humanmade/just-the-hm-docs
 licenses: