RubyGems - pages_core - Versions diffs - 3.12.1 → 3.12.3 - Mend

pages_core 3.12.1 → 3.12.3

Files changed (121) hide show

data/lib/rails/generators/pages_core/frontend/frontend_generator.rb CHANGED Viewed

@@ -14,40 +14,56 @@ module PagesCore
       end
       def create_css_framework
-        ["application.sass.scss",
-         "config.scss",
-         "components/base.scss",
-         "framework/breakpoints.scss",
-         "framework/clearfix.scss",
-         "framework/grid.scss",
-         "framework/grid_overlay.scss",
-         "framework/fonts.scss",
-         "global/colors.scss",
-         "global/typography.scss",
-         "vendor/normalize.css"].each do |f|
+        ["application.postcss.css",
+         "config.css",
+         "components/base.css",
+         "components/layout.css",
+         "global/animation.css",
+         "global/colors.css",
+         "global/fonts.css",
+         "global/grid.css",
+         "global/typography.css"].each do |f|
           template("stylesheets/#{f}", File.join("app/assets/stylesheets/#{f}"))
         end
       end
       def create_js_framework
-        ["lib/ResponsiveEmbeds.js",
-         "lib/GridOverlay.js"].each do |f|
+        ["lib/responsiveEmbeds.ts",
+         "lib/gridOverlay.ts"].each do |f|
           template("javascript/#{f}", File.join("app/javascript/#{f}"))
         end
         append_to_file "app/javascript/application.js" do
           <<~JS
             // Responsive embeds
-            import ResponsiveEmbeds from "./lib/ResponsiveEmbeds";
-            ResponsiveEmbeds.start();
+            import responsiveEmbeds from "./lib/responsiveEmbeds";
+            responsiveEmbeds();
             // Grid overlay
-            import GridOverlay from "./lib/GridOverlay";
-            GridOverlay.start();
+            import gridOverlay from "./lib/gridOverlay";
+            gridOverlay();
           JS
         end
       end
+      def install_js_dependencies
+        run("yarn add autoprefixer cssnano normalize.css postcss " \
+            "postcss-calc postcss-cli postcss-import " \
+            "postcss-import-ext-glob postcss-mixins postcss-preset-env " \
+            "postcss-url")
+      end
+      def configure_postcss
+        copy_file("postcss.config.js",
+                  File.join("postcss.config.js"))
+      end
+      def configure_build_script
+        script = "postcss ./app/assets/stylesheets/application.postcss.css " \
+                 "-o ./app/assets/builds/application.css"
+        run %(npm set-script build:css "#{script}")
+      end
       def remove_application_css
         remove_file("app/assets/stylesheets/application.css")
       end

data/lib/rails/generators/pages_core/frontend/templates/application.html.erb CHANGED Viewed

@@ -4,7 +4,6 @@
   <%= javascript_include_tag "application" %>
   <%= feed_tags %>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <%# google_analytics_tags "UA-xxxxxxxx-1" %>
 <% end %>
 <body>
   <% if Rails.env.development? %>

data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/gridOverlay.ts ADDED Viewed

@@ -0,0 +1,40 @@
+function ready(callback: () => void) {
+  if (document.readyState === "complete" ||
+    (document.readyState !== "loading" && !document.documentElement.doScroll)) {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+}
+function applyGrid () {
+  let showGrid = false;
+  const gridOverlay = document.querySelector(".grid-overlay");
+  const setState = (newState: boolean) => {
+    showGrid = newState;
+    if (newState) {
+      window.localStorage.setItem("showGrid", "true");
+      gridOverlay.classList.add("grid-overlay--active");
+    } else {
+      window.localStorage.removeItem("showGrid");
+      gridOverlay.classList.remove("grid-overlay--active");
+    }
+  };
+  if (gridOverlay) {
+    setState(window.localStorage.getItem("showGrid") == "true");
+    // Keyboard toggle
+    document.addEventListener("keyup", (evt: KeyboardEvent) => {
+      if (evt.ctrlKey && evt.which == 71) {
+        setState(!showGrid);
+      }
+    });
+  }
+}
+export default function gridOverlay() {
+  ready(applyGrid);
+}

data/lib/rails/generators/pages_core/frontend/templates/javascript/lib/responsiveEmbeds.ts ADDED Viewed

@@ -0,0 +1,68 @@
+const selectors = [
+  "iframe[src*=\"bandcamp.com\"]",
+  "iframe[src*=\"player.vimeo.com\"]",
+  "iframe[src*=\"youtube.com\"]",
+  "iframe[src*=\"youtube-nocookie.com\"]",
+  "iframe[src*=\"spotify.com\"]",
+  "iframe[src*=\"kickstarter.com\"][src*=\"video.html\"]"
+];
+function readyHandler(fn: () => void) {
+  if (document.readyState === "complete" || document.readyState === "interactive") {
+    setTimeout(fn, 1);
+  } else {
+    document.addEventListener("DOMContentLoaded", fn);
+  }
+}
+function wrapEmbed(embed: HTMLElement): HTMLElement {
+  const parent = embed.parentNode as HTMLElement;
+  // Recycle the existing container if the embed is already responsive.
+  if (parent &&
+    parent.tagName === "DIV" &&
+    parent.childNodes.length === 1 &&
+    parent.style.position === "relative") {
+      return parent;
+    }
+  const wrapper = document.createElement("div");
+  if (parent.tagName === "P") {
+    parent.parentNode.replaceChild(wrapper, parent);
+  } else {
+    parent.replaceChild(wrapper, embed);
+  }
+  wrapper.appendChild(embed);
+  return wrapper;
+}
+function applyEmbed(embed: HTMLElement) {
+  const parent = embed.parentNode as HTMLElement;
+  if (parent && parent.classList.contains("responsive-embed")) {
+    return;
+  }
+  const width = embed.offsetWidth;
+  const height = embed.offsetHeight;
+  const ratio = height / width;
+  const wrapper = wrapEmbed(embed);
+  wrapper.classList.add("responsive-embed");
+  wrapper.style.position = "relative";
+  wrapper.style.width = "100%";
+  wrapper.style.paddingTop = 0;
+  wrapper.style.paddingBottom = `${ratio * 100}%`;
+  embed.style.position = "absolute";
+  embed.style.width = "100%";
+  embed.style.height = "100%";
+  embed.style.top = "0";
+  embed.style.left = "0";
+}
+export default function responsiveEmbeds() {
+  readyHandler(() => {
+    document.querySelectorAll(selectors.join(",")).forEach(applyEmbed);
+  });
+}

data/lib/rails/generators/pages_core/frontend/templates/postcss.config.js ADDED Viewed

@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: [
+    require("postcss-import-ext-glob"),
+    require("postcss-import"),
+    require("postcss-url")(
+      { filter: "**/*.svg",
+        url: "inline",
+        basePath: "../images" }
+    ),
+    require("postcss-mixins"),
+    require("postcss-simple-vars"),
+    require("postcss-preset-env")({ stage: 1 }),
+    require("postcss-calc")({ precision: 10 }),
+    require("autoprefixer"),
+    require("postcss-discard-duplicates")
+  ],
+};

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/application.postcss.css ADDED Viewed

@@ -0,0 +1,4 @@
+@import "normalize.css";
+@import "config";
+@import-glob "global/*.css";
+@import-glob "components/*.css";

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/base.css ADDED Viewed

@@ -0,0 +1,24 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+.responsive-embed,
+figure.image {
+  margin: 2rem 0rem;
+  @mixin child-margins;
+}
+figure.image {
+  width: 100%;
+  padding: 0rem;
+  & img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}
+img {
+  display: block;
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/components/layout.css ADDED Viewed

@@ -0,0 +1,21 @@
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+footer {
+  margin-top: auto;
+}
+header,
+main,
+footer {
+  padding-left: var(--outer-padding);
+  padding-right: var(--outer-padding);
+  & .inner {
+    @mixin grid-container;
+    max-width: var(--grid-limit, 100%);
+    margin: 0px auto;
+  }
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/config.css ADDED Viewed

@@ -0,0 +1,5 @@
+$breakpoint-mobile-small: 479;
+@custom-media --tablet screen and (max-width: 991px);
+@custom-media --mobile screen and (max-width: 767px);
+@custom-media --mobile-small screen and (max-width: $(breakpoint-mobile-small)px);

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/animation.css ADDED Viewed

@@ -0,0 +1,5 @@
+:root {
+  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-back: cubic-bezier(.35,1.47,.64,1);
+  scroll-behavior: smooth;
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/colors.css ADDED Viewed

@@ -0,0 +1,18 @@
+:root {
+  --black: #000000;
+  --white: #ffffff;
+  --blue:  #0000ff;
+  --background-color:  var(--white);
+  --text-color:        var(--black);
+  --link-color:        var(--blue);
+}
+body {
+  background: var(--background-color);
+  color: var(--text-color);
+}
+a, a:visited {
+  color: var(--link-color);
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/fonts.css ADDED Viewed

@@ -0,0 +1,6 @@
+/*
+@font-face { font-family: "Example";
+             font-style: normal;
+             font-weight: 300;
+             src: url("Example-Regular.woff") format("woff"); }
+*/

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/grid.css ADDED Viewed

@@ -0,0 +1,65 @@
+@define-mixin grid-container {
+  display: grid;
+  grid-template-columns: repeat(var(--columns), 1fr);
+  grid-column-gap: var(--gutter);
+}
+@define-mixin grid-limit $limit {
+  @media screen and (min-width: $limit) {
+    --grid-limit: calc($limit - (var(--outer-padding) * 2));
+  }
+}
+:root {
+  --columns: 12;
+  --gutter: 2rem;
+  --outer-padding: 2rem;
+  @media (--tablet) {
+    //--columns: 9;
+    --gutter: 1.5rem;
+    --outer-padding: 1.5rem;
+  }
+  @media (--mobile) {
+    --columns: 4;
+    --outer-padding: 1rem;
+  }
+  @media print {
+    --outer-padding: 0px;
+  }
+  --column-width: calc(
+    (100% -
+     ((var(--gutter) * (var(--columns) - 1)) + (var(--outer-padding) * 2))) /
+    var(--columns)
+  );
+  /* @mixin grid-limit 1400px; */
+}
+.grid-overlay {
+  display: none;
+}
+.grid-overlay--active {
+  --grid-overlay-width: var(--grid-limit,
+                            calc(100% - (var(--outer-padding) * 2)));
+  display: block;
+  position: fixed;
+  z-index: 9000;
+  top: 0px;
+  width: var(--grid-overlay-width);
+  left: 50%;
+  margin-left: calc(var(--grid-overlay-width) / 2 * -1);
+  height: 100%;
+  pointer-events: none;
+  background: linear-gradient(
+    to right,
+    var(--grid-overlay-gutter, transparent) var(--gutter),
+    var(--grid-overlay-column, rgba(255, 0, 255, 0.05)) var(--gutter)
+  );
+  background-size: calc((100% + var(--gutter)) / var(--columns, 12)) 100%;
+  background-position: top 0px left calc(var(--gutter) * -1);
+}

data/lib/rails/generators/pages_core/frontend/templates/stylesheets/global/typography.css ADDED Viewed

@@ -0,0 +1,131 @@
+/* ---- Mixins ------------------------------------------------------------- */
+@define-mixin child-margins {
+  &:first-child {
+    margin-top: 0px;
+  }
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+@define-mixin font-scale-base {
+  --font-scale-coeff: calc((var(--font-scale-to) - var(--font-scale-from)) /
+                           ((var(--font-scale-end) / 100) -
+                            (var(--font-scale-start) / 100)));
+  font-size: calc(calc((var(--font-scale-from) -
+                        (var(--font-scale-start) / 100) *
+                        var(--font-scale-coeff)) /
+                       16) * 1rem +
+                  var(--font-scale-coeff) * 1vw);
+}
+@define-mixin font-scale $from, $to, $start, $end {
+  --font-scale-from: $from;
+  --font-scale-to: $to;
+  --font-scale-start: $start;
+  --font-scale-end: $end;
+}
+/* ---- Definitions -------------------------------------------------------- */
+:root {
+  --font-sans: Helvetica, sans-serif;
+  --font-larger:   500     2.0rem/1.1 var(--font-sans);
+  --font-large:    500     1.5rem/1.1 var(--font-sans);
+  --font-medium:   500     1.5rem/1.1 var(--font-sans);
+  --font-normal:   normal 1.25rem/1.1 var(--font-sans);
+  --font-small:    normal  1.0rem/1.1 var(--font-sans);
+  @media (--tablet) {
+    /*
+    --font-larger:   500     1.5rem/1.1 var(--font-sans);
+    --font-large:    500     1.5rem/1.1 var(--font-sans);
+    --font-medium:   500     1.125rem/1.1 var(--font-sans);
+    */
+  }
+}
+/* ---- Font scale --------------------------------------------------------- */
+html {
+  @mixin font-scale-base;
+  @mixin font-scale 16, 18, 1440, 1920;
+  @media screen and (max-width: 1440px) {
+    @mixin font-scale 14, 16, $breakpoint-mobile-small, 1440;
+  }
+  @media (--mobile-small) {
+    @mixin font-scale 12, 16, 1, $breakpoint-mobile-small;
+  }
+}
+body {
+  font-family: var(--font-sans);
+  font-size: 100%;
+}
+/* ---- Rules -------------------------------------------------------------- */
+h1, h2, h3, h4, h5, h6, p, ul, ol {
+  margin: 1rem 0rem;
+  @mixin child-margins;
+}
+h1, h2, h3, h4, h5, h6, p, ul, ol,
+figcaption, blockquote {
+  max-width: 60ch;
+}
+ul, ol, blockquote {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  @mixin child-margins;
+}
+main {
+  font: var(--font-normal);
+}
+h1 {
+  font: var(--font-larger);
+}
+h2 {
+  font: var(--font-large);
+  margin-top: 2rem;
+  @mixin child-margins;
+}
+h3 {
+  font: var(--font-medium);
+  margin-top: 2rem;
+  @mixin child-margins;
+}
+h4 {
+  font: var(--font-normal);
+}
+h5 {
+  font: var(--font-smaller);
+}
+h6 {
+  font: var(--font-smallest);
+}
+blockquote {
+  font: var(--font-medium);
+  margin: 2rem 0rem;
+  @mixin child-margins;
+}
+figcaption {
+  margin-top: 0.5rem;
+  font: var(--font-small);
+}

data/lib/rails/generators/pages_core/install/templates/pages_initializer.rb CHANGED Viewed

@@ -13,9 +13,6 @@ PagesCore.configure do |config|
   # Locales and names
   # config.locales(nb: 'Norwegian', en: 'English')
-  # Fulltext in RSS feeds (default: disabled)
-  # config.rss_fulltext :disabled
   # New pages will be created by the user with this email address:
   # config.default_author "email@example.com"