feat: Port from Patternfly v4 to v6

morniteaque · Jun 19, 2024 · c8bf670 · c8bf670
1 parent 9e6f134
commit c8bf670
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 102 deletions.
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -1,20 +1,15 @@
-@import "node_modules/@patternfly/patternfly/sass-utilities/all.scss";
+@import "@patternfly/patternfly/sass-utilities/_index.scss";
 
-$pf-global--font-path: "./{{ .Site.BaseURL }}/fonts";
-$fa-font-path: $pf-global--font-path + "/webfonts";
+$pf-v6-global--font-path: "./{{ .Site.BaseURL }}/assets/fonts";
+$fa-font-path: "./{{ .Site.BaseURL }}/assets/fonts/webfonts";
+$pf-v6-global--fonticon-path: "./{{ .Site.BaseURL }}/assets/pficon";
+$pf-v6-global--image-path: "data-url:./{{ .Site.BaseURL }}/assets/images";
 
-$pf-global--BorderRadius--sm: 8px;
+@import "@patternfly/patternfly/patternfly.scss";
+@import "@patternfly/patternfly/patternfly-addons.scss";
 
-@import "node_modules/@patternfly/patternfly/patternfly.scss";
-@import "node_modules/@patternfly/patternfly/patternfly-addons.scss";
-
-.pf-x-container {
-  max-width: $pf-global--breakpoint--md;
-  margin: 0 auto;
-}
-
-.pf-x-hero {
-  @extend .pf-u-p-lg;
+.pf-v6-x-hero {
+  @extend .pf-v6-u-p-lg;
 
   flex: 1;
   display: flex;
@@ -28,9 +23,10 @@ $pf-global--BorderRadius--sm: 8px;
 
     width: 100%;
     max-width: 520px;
-    border-radius: var(--pf-global--BorderRadius--sm);
+    border-radius: var(--pf-t--global--border--radius--medium);
 
-    border: var(--pf-global--BorderWidth--sm) solid white;
+    border: var(--pf-t--global--border--width--100) solid
+      var(--pf-t--color--white);
     box-sizing: content-box;
 
     &--light {
@@ -47,25 +43,22 @@ $pf-global--BorderRadius--sm: 8px;
   }
 }
 
-.pf-x-footer a {
-  color: var(--pf-global--Color--dark-100) !important;
-}
-
-.pf-c-page {
+.pf-v6-c-page {
+  display: flex;
   background: linear-gradient(#f58945ff, #aa585bff, #573170ff, #2d1d7aff);
 
   @media (prefers-color-scheme: dark) {
     background: linear-gradient(#2d2036, #2a170f);
   }
 
-  color: var(--pf-global--Color--light-100);
+  color: var(--pf-t--color--white);
 
-  & .pf-x-footer a {
-    color: var(--pf-global--Color--light-100) !important;
+  & .pf-v6-x-footer a {
+    color: var(--pf-t--color--white) !important;
   }
 }
 
-.pf-c-page__main {
+.pf-v6-c-page__main {
   background-size: 25px 25px !important;
   background-image: radial-gradient(
     circle,
@@ -74,23 +67,22 @@ $pf-global--BorderRadius--sm: 8px;
   ) !important;
 }
 
-.pf-c-button--hero {
+.pf-v6-c-button--hero {
   backdrop-filter: blur(7.5px);
   -webkit-backdrop-filter: blur(7.5px);
-  --pf-c-button--after--BorderColor: var(
-    --pf-c-button--m-primary--Color
-  ) !important;
-  color: var(--pf-c-button--m-primary--Color) !important;
+  --pf-v6-c-button--BorderColor: var(--pf-t--color--white) !important;
+  --pf-v6-c-button__icon--Color: var(--pf-t--color--white) !important;
+  color: var(--pf-t--color--white) !important;
 }
 
-.pf-c-button--cta {
-  @extend .pf-m-secondary, .pf-c-button--hero;
+.pf-v6-c-button--cta {
+  @extend .pf-m-secondary, .pf-v6-c-button--hero;
 
   @media (prefers-color-scheme: dark) {
     background: linear-gradient(#4a292a, #381e4a);
   }
 
   @media (prefers-color-scheme: light) {
-    background: var(--pf-c-button--m-primary--BackgroundColor) !important;
+    background: var(--pf-t--global--color--brand--default) !important;
   }
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -35,17 +35,22 @@
     {{ end }}
   </head>
   <body>
-    <div class="pf-c-page">
-      <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main"
+    <div class="pf-v6-c-page">
+      <a
+        class="pf-v6-c-skip-to-content pf-v6-c-button pf-m-primary"
+        href="#main"
         >Skip to content</a
       >
 
       {{ block "header" . }}
-        <header class="pf-c-page__header">
-          <div class="pf-c-page__header-brand">
-            <div class="pf-c-page__header__content">
-              <a class="pf-c-button pf-m-plain" href="{{ .Site.BaseURL }}">
-                <span class="pf-c-button__icon pf-m-start">
+        <header class="pf-v6-c-page__header">
+          <div class="pf-v6-c-page__header-brand">
+            <div class="pf-v6-c-page__header__content">
+              <a
+                class="pf-v6-c-button pf-m-plain"
+                href="{{ .Site.BaseURL }}"
+              >
+                <span class="pf-v6-c-button__icon pf-m-start">
                   <i class="fas fa-arrow-left	" aria-hidden="true"></i>
                 </span>
                 Back</a
@@ -56,7 +61,7 @@
       {{ end }}
 
       {{ block "main" . }}
-        <main class="pf-c-page__main" tabindex="-1" id="main">
+        <main class="pf-v6-c-page__main" tabindex="-1" id="main">
           {{ .Content }}
         </main>
       {{ end }}

diff --git a/layouts/index.html b/layouts/index.html
@@ -3,49 +3,62 @@
 {{ end }}
 
 {{ define "main" }}
-  <main class="pf-c-page__main" tabindex="-1" id="main">
-    <div class="pf-x-hero">
+  <main class="pf-v6-c-page__main" tabindex="-1" id="main">
+    <div class="pf-v6-x-hero">
       <img
-        class="pf-x-hero__logo pf-x-hero__logo--light"
+        class="pf-v6-x-hero__logo pf-v6-x-hero__logo--light"
         src="/img/logo-light.svg"
         alt="{{ .Site.Title }} logo (light)"
       />
 
       <img
-        class="pf-x-hero__logo pf-x-hero__logo--dark"
+        class="pf-v6-x-hero__logo pf-v6-x-hero__logo--dark"
         src="/img/logo-dark.svg"
         alt="{{ .Site.Title }} logo (dark)"
       />
 
-      <div class="pf-u-font-size-lg pf-u-font-weight-bold pf-u-my-lg">
+      <div class="pf-v6-u-font-size-lg pf-v6-u-font-weight-bold pf-v6-u-my-lg">
         {{ .Site.Data.organisation.description }}
       </div>
 
       <div>
         <a
-          class="pf-c-button pf-m-primary pf-u-mr-sm pf-u-mb-md pf-c-button--cta"
+          class="pf-v6-c-button pf-m-primary pf-v6-u-mr-sm pf-v6-u-mb-md pf-v6-c-button--cta"
           target="_blank"
           href="{{ .Site.Data.organisation.projects }}"
         >
-          <span class="pf-c-button__icon pf-m-start">
+          <span class="pf-v6-c-button__icon pf-m-start">
             <i class="fas fa-search-plus" aria-hidden="true"></i>
           </span>
           Explore Projects</a
         >
 
         <a
-          class="pf-c-button pf-m-secondary pf-c-button--hero"
+          class="pf-v6-c-button pf-m-secondary pf-v6-c-button--hero"
           target="_blank"
           href="{{ .Site.Data.organisation.members }}"
         >
-          <span class="pf-c-button__icon pf-m-start">
+          <span class="pf-v6-c-button__icon pf-m-start">
             <i class="fas fa-users" aria-hidden="true"></i>
           </span>
           Browse Members</a
         >
       </div>
     </div>
 
-    {{ partial "footer" . }}
+    <div class="pf-v6-c-page__main-body pf-v6-u-p-lg pf-v6-x-footer">
+      <div class="pf-v6-l-flex pf-m-justify-content-space-between">
+        <div class="pf-v6-l-flex__item">
+          <a href="{{ .Site.Data.site.source }}" target="_blank" rel="noopener"
+            >© {{ now.Year }} {{ .Site.Data.site.author }}</a
+          >
+        </div>
+        <div class="pf-v6-l-flex__item">
+          <a href="https://felicitas.pojtinger.com/imprint" target="_blank"
+            >Imprint</a
+          >
+        </div>
+      </div>
+    </div>
   </main>
 {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/morniteaque/morniteaque.org#readme",
   "dependencies": {
-    "@patternfly/patternfly": "^4.171.1"
+    "@patternfly/patternfly": "^6.0.0-alpha.165"
   },
   "devDependencies": {
     "prettier": "^2.7.1",