faucet-ify

moonglum · moonglum · commit 8e6a8bb738f2 · 2022-02-21T17:00:05.000+01:00
Steal some code from the faucet documentation to make it look nicer
diff --git a/.gitignore b/.gitignore
@@ -27,3 +27,5 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+/node_modules
diff --git a/Gemfile b/Gemfile
@@ -24,6 +24,9 @@ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", require: false
 
+# Use faucet as the asset pipeline
+gem "faucet_pipeline_rails"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri mingw x64_mingw ]
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -88,6 +88,8 @@ GEM
       reline (>= 0.2.7)
     digest (3.1.0)
     erubi (1.10.0)
+    faucet_pipeline_rails (1.0.1)
+      rails (>= 4.2.10)
     globalid (1.0.0)
       activesupport (>= 5.0)
     i18n (1.10.0)
@@ -187,6 +189,7 @@ DEPENDENCIES
   bootsnap
   capybara
   debug
+  faucet_pipeline_rails
   puma (~> 5.0)
   rails (~> 7.0.2, >= 7.0.2.2)
   sqlite3 (~> 1.4)
diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -0,0 +1 @@
+console.log("Hello World");
diff --git a/app/assets/stylesheets/_base.scss b/app/assets/stylesheets/_base.scss
@@ -0,0 +1,62 @@
+@font-face {
+	font-family: "Titillium Web";
+	font-weight: 400;
+	src: asset-url("titillium-web-regular.woff2") format("woff2");
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Titillium Web";
+	font-weight: 700;
+	src: asset-url("titillium-web-bold.woff2") format("woff2");
+	font-display: swap;
+}
+
+html {
+	font-size: var(--base-font-size);
+	line-height: var(--base-line-height);
+}
+
+body {
+	font-family: "Titillium Web", sans-serif;
+	color: var(--text-color);
+	max-width: var(--wrapper-max-width);
+	margin: 0 var(--wrapper-margin) var(--spacer-xl);
+}
+
+h1,
+h2 {
+	margin: var(--base-heading-margin);
+	line-height: var(--base-line-height);
+}
+
+p,
+blockquote,
+ul {
+	margin: var(--base-block-margin);
+}
+
+li {
+	margin-bottom: var(--spacer-xs);
+}
+
+blockquote {
+	border-left: var(--highlight-border);
+	padding-left: 1rem;
+}
+
+a {
+	color: var(--link-color);
+	transition: color ease-in-out 0.2s;
+
+	&:hover,
+	&:focus {
+		color: var(--link-color-hover);
+	}
+}
+
+video,
+img {
+	max-width: 100%;
+	height: auto;
+}
diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
@@ -0,0 +1,58 @@
+$black: #1f1f1f;
+$dark-gray: #444;
+$light-gray: #666;
+$white: #FFF;
+$blue: #37375F;
+$red: #B7455F;
+
+:root {
+	--base-font-size: 100%; // ~16px
+	--base-line-height: 1.75;
+	--tight-line-height: 1.2;
+
+	--spacer-xxs: 0.25rem;
+	--spacer-xs: 0.5rem;
+	--spacer-s: 0.75rem;
+	--spacer-m: 1rem;
+	--spacer-l: 1.25rem;
+	--spacer-xl: 1.5rem;
+
+	--base-border-radius: 5px;
+
+	--base-block-margin: 0 0 var(--spacer-xs);
+	--base-heading-margin: var(--spacer-xl) 0 var(--spacer-xxs);
+
+	--main-color: #{$blue};
+	--link-color: #{$red};
+	--link-color-hover: #{$blue};
+	--text-color: #{$black};
+	--text-color-bright: #{$dark-gray};
+	--text-color-brighter: #{$light-gray};
+	--background-color: #{$white};
+	--highlight-background: #{$red}CC;
+	--highlight-border: 4px solid #{$blue}CC;
+
+	--site-nav-order: 1;
+	--main-base-width: 320px; // TODO: Figure out a good value here
+	--tagline-font-size: 1.2rem;
+	--wrapper-max-width: 100%;
+	--wrapper-margin: var(--spacer-xs);
+
+	@media screen and (min-width: 64em) {
+		--base-font-size: 112.5%; // ~18px (from a default of 16px)
+	}
+
+	@media screen and (min-width: 760px) {
+		--tagline-font-size: 2rem;
+		--site-nav-order: -1;
+	}
+
+	@media screen and (min-width: 820px) {
+		--wrapper-max-width: 90%;
+		--wrapper-margin: auto;
+	}
+
+	@media screen and (min-width: 900px) {
+		--tagline-font-size: 3rem;
+	}
+}
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -0,0 +1,3 @@
+@use "normalize.css/normalize";
+@use "./settings";
+@use "./base";
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -7,9 +7,11 @@
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag "application" %>
+    <%= javascript_include_tag "application", type: "module" %>
   </head>
 
   <body>
+    <%= image_tag "logo.png", width: "512", height: "512" %>
     <%= yield %>
   </body>
 </html>
diff --git a/app/views/posts/_post.html.erb b/app/views/posts/_post.html.erb
@@ -1,12 +1,4 @@
-<div id="<%= dom_id post %>">
-  <p>
-    <strong>Title:</strong>
-    <%= post.title %>
-  </p>
-
-  <p>
-    <strong>Body:</strong>
-    <%= post.body %>
-  </p>
-
-</div>
+<section id="<%= dom_id post %>">
+  <h2><%= post.title %></h2>
+  <p><%= post.body %></p>
+</section>
diff --git a/app/views/posts/index.html.erb b/app/views/posts/index.html.erb
@@ -1,6 +1,6 @@
 <p style="color: green"><%= notice %></p>
 
-<h1>Posts</h1>
+<h1>faucet Blog</h1>
 
 <div id="posts">
   <% @posts.each do |post| %>
diff --git a/faucet.config.js b/faucet.config.js
@@ -0,0 +1,37 @@
+module.exports = {
+  js: [{
+    source: "./app/assets/javascripts/application.js",
+    target: "./public/assets/javascripts/application.js",
+    format: "esm"
+  }],
+
+  sass: [{
+    source: "./app/assets/stylesheets/application.scss",
+    target: "./public/assets/stylesheets/application.css"
+  }],
+
+  static: [{
+    source: "@openfonts/titillium-web_latin/files/titillium-web-latin-400.woff2",
+    target: "./public/assets/fonts/titillium-web-regular.woff2"
+  }, {
+    source: "@openfonts/titillium-web_latin/files/titillium-web-latin-700.woff2",
+    target: "./public/assets/fonts/titillium-web-bold.woff2"
+  }],
+
+  images: [{
+    source: "./app/assets/images",
+    target: "./public/assets/images"
+  }],
+
+  manifest: {
+    target: "./public/assets/manifest.json",
+    key: "short",
+    webRoot: "./public"
+  },
+
+  watchDirs: ["./app/assets"],
+
+  plugins: [
+    require("faucet-pipeline-images")
+  ]
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/test/system/posts_test.rb b/test/system/posts_test.rb

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@use "normalize.css/normalize";`
	`2`	`+@use "./settings";`
	`3`	`+@use "./base";`