refactor: use login layout for homepage

because why not
openshift · Jan 10, 2025 · f108d27 · f108d27
1 parent 43b13e1
commit f108d27
Show file tree

Hide file tree

Showing 10 changed files with 563 additions and 109 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,11 +1,15 @@
 <head>
     <title>
-      {% if page.layout == 'errors' %}
-        {% raw %}{{ .Locale.Error }}{% endraw %}
+      {% if collection == nil %}
+        {{ site.title }}
       {% else %}
-        {% raw %}{{ .Locale.LogIn }}{% endraw %}
+        {% if page.layout == 'errors' %}
+          {% raw %}{{ .Locale.Error }}{% endraw %}
+        {% else %}
+          {% raw %}{{ .Locale.LogIn }}{% endraw %}
+        {% endif %}
+         · {{ collection.name }}
       {% endif %}
-       · {{ collection.name }}
     </title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,21 +21,22 @@
 
     {%- capture styles -%}
       {% case page.layout %}
-
-      {% when 'errors' %}
+
+      {% when 'base' %}
+        {% include styles/index.css %}
+
+        {% when 'errors' %}
         {% include styles/errors.css %}
-      {% when 'login' %}
+
+        {% when 'login' %}
         {% include styles/login.css %}
 
         .error-placeholder {
           min-height: 21px;
         }
       {% when 'providers' %}
         {% include styles/providers.css %}
-
-        .idp {
-          margin: 24px 0 0;
-        }
+
       {% endcase %}
 
       {% include fonts.scss %}

diff --git a/_includes/logos.html b/_includes/logos.html
@@ -1,11 +1,14 @@
-{%- if collection.label == 'okd' -%}
+{% case collection.label %}
+{%- when 'okd' -%}
   {%- include logo-okd.html %}
-{%- elsif collection.label == 'od' -%}
+{%- when 'od' -%}
   {%- include logo-od.html %}
-{%- elsif collection.label == 'rosa' -%}
+{%- when 'rosa' -%}
   {%- include logo-rosa.html %}
-{%- elsif collection.label == 'ocp' -%}
+{%- when 'ocp' -%}
   {%- include logo-ocp.html %}
-{%- else  -%}
+{%- when 'rho' -%}
   {%- include logo-rho.html %}
-{%- endif -%}
+{%- else -%}
+
+{% endcase %}
diff --git a/_includes/styles/errors.css b/_includes/styles/errors.css
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+ @charset "UTF-8";
 :where(html,
 body,
 p) {
@@ -405,4 +405,4 @@ body) {
   padding-block-end: var(--pf-v6-c-login__main-body--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-login__main-body--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-login__main-body--PaddingInlineEnd);
-}
+} 
diff --git a/_includes/styles/index.css b/_includes/styles/index.css
diff --git a/_includes/styles/login.css b/_includes/styles/login.css
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+ @charset "UTF-8";
 :where(html,
 body,
 p,
@@ -811,4 +811,4 @@ button) {
   font-size: var(--pf-v6-c-title--m-3xl--FontSize);
   font-weight: var(--pf-v6-c-title--m-3xl--FontWeight);
   line-height: var(--pf-v6-c-title--m-3xl--LineHeight);
-}
+} 
diff --git a/_includes/styles/providers.css b/_includes/styles/providers.css
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+ @charset "UTF-8";
 :where(html,
 body,
 p,
@@ -557,4 +557,6 @@ body) {
   font-size: var(--pf-v6-c-title--m-3xl--FontSize);
   font-weight: var(--pf-v6-c-title--m-3xl--FontWeight);
   line-height: var(--pf-v6-c-title--m-3xl--LineHeight);
+} .pf-v6-u-pt-lg {
+  padding-block-start: var(--pf-t--global--spacer--lg) !important;
 }
diff --git a/_layouts/index.html b/_layouts/index.html
diff --git a/_layouts/providers.html b/_layouts/providers.html
@@ -13,7 +13,7 @@ <h1 class="pf-v6-c-title pf-m-3xl">{{ .Locale.LogInWith }}</h1>
     <ul>
       {{ $logInWith := .Locale.LogInWith }}
       {{ range $provider := .Providers }}
-      <li class="idp">
+      <li class="pf-v6-u-pt-lg">
         <a href="{{$provider.URL}}" class="pf-v6-c-button pf-m-secondary pf-m-block"
           title="{{ $logInWith }} {{$provider.Name}}">{{$provider.Name}}</a>
       </li>

diff --git a/generate-styles.mjs b/generate-styles.mjs
@@ -11,20 +11,26 @@ const layouts = ["errors", "login", "providers", "index"];
  */
 const removeFontFace = css => css.replace(/@font-face[^{]*{([^{}]|{[^{}]*})*}/gi,'');
 
-const purgePromises = layouts.map(async (layout) => {
+/**
+ * Since GH pages + Jekyll does not support PurgeCSS, we pre-generate the CSS files.
+ * This script should be run after the site is built. After running this script,
+ * make sure to build the site again to include the generated CSS files.
+ */
+const cssForLayouts = layouts.map(async (layout) => {
     return new PurgeCSS().purge({
         content: [`./_site/**/${layout}.html`, `./_site/${layout}.html'`],
-        css: ['./node_modules/@patternfly/patternfly/patternfly.css'],
+        css: ['./node_modules/@patternfly/patternfly/{patternfly,patternfly-addons}.css'],
         keyframes: true,
-        variables: true,
-        safelist: ['.pf-v6-theme-dark']
-    }).then(purgeCSSResult => {
+        variables: true
+    }).then(purgeResult => {
+        // Concatenate all the purged CSS files into one
+        const css = purgeResult.reduce((acc, result) => `${acc} ${result['css']}`, '');
+
         fs.writeFileSync(
             `./_includes/styles/${layout}.css`,
-            /** There is only one CSS file (PatternFly.css) so the result array is always length 1 */
-            removeFontFace(purgeCSSResult[0]['css'])
+            removeFontFace(css)
         );
     });
 });
 
-await Promise.all(purgePromises);
+await Promise.all(cssForLayouts);
diff --git a/index.html b/index.html
@@ -1,17 +1,23 @@
 ---
-layout: index
+layout: base
 ---
 
-<h1 class="pf-v6-c-title pf-m-h1 pf-m-page-title">{{site.title}}</h1>
-{% for collection in site.collections %}
+<section class="pf-v6-l-flex">
+  <h1 class="pf-v6-c-title pf-m-h1 pf-m-page-title">{{site.title}}</h1>
+  {% for collection in site.collections %}
   {% if collection.label != "posts" %}
-  <h2 class="pf-v6-c-title pf-m-h2">{{ collection.name }}</h2>
-  <ul class="pf-v6-c-list">
-    {% for doc in collection.docs %}
-    <li>
-      <a href="{{ doc.url | remove_first:'/' }}">{{ doc.layout }}</a>
-    </li>
-    {% endfor %}
-  </ul>
+  <div class="pf-v6-c-card pf-m-compact pf-v6-l-flex__item">
+    <div class="pf-v6-c-card__title">
+      <h2 class="pf-v6-c-card__title-text">{{ collection.name }}</h2>
+    </div>
+    <div class="pf-v6-c-card__footer">
+      {% for doc in collection.docs %}
+        <a class="pf-v6-c-button pf-m-secondary" href="{{ doc.url | remove_first:'/' }}">
+          <span class="pf-v6-c-button__text">{{ doc.layout }}</span>
+        </a>
+      {% endfor %}
+    </div>
+  </div>
   {% endif %}
-{% endfor %}
+  {% endfor %}
+</section>