Add the logo to the demo to showcase vite_asset_path

propitech · Jan 24, 2021 · c13820e · c13820e
1 parent 1155d3b
commit c13820e
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 250 deletions.
diff --git a/examples/blog/app/frontend/entrypoints/application.js b/examples/blog/app/frontend/entrypoints/application.js
@@ -11,8 +11,7 @@ Turbolinks.start()
 ActiveStorage.start()
 
 // Example: Import a stylesheet in app/frontend/styles
-import '~/styles/tailwind.css'
-import '~/styles/index.css'
+import '~/styles/theme.css'
 
 import '~/entrypoints/example_import.js'
 import '~/outer_import.js'
diff --git a/examples/blog/app/frontend/entrypoints/colored.css b/examples/blog/app/frontend/entrypoints/colored.css
diff --git a/examples/blog/app/frontend/entrypoints/logo.svg b/examples/blog/app/frontend/entrypoints/logo.svg
diff --git a/examples/blog/app/frontend/entrypoints/styles.css b/examples/blog/app/frontend/entrypoints/styles.css
@@ -0,0 +1,37 @@
+*, ::after, ::before {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+}
+
+body {
+  font-family: inherit;
+  line-height: inherit;
+  margin: 0;
+}
+
+header {
+  display: grid;
+  height: 100vh;
+  margin: 0 auto;
+  padding-bottom: 20vh;
+  place-content: center;
+}
+
+.logo {
+  height: 0;
+  opacity: 0;
+}
+
+.hero {
+  box-sizing: border-box;
+  font-size: clamp(4rem, 10vw, 4.5rem);
+  line-height: 1;
+  font-weight: 800;
+  height: 128px;
+  margin: 0 0 0 1rem;
+  text-align: center;
+}
diff --git a/examples/blog/app/frontend/styles/index.css b/examples/blog/app/frontend/styles/index.css
diff --git a/examples/blog/app/frontend/styles/tailwind.css b/examples/blog/app/frontend/styles/tailwind.css
diff --git a/examples/blog/app/frontend/styles/theme.css b/examples/blog/app/frontend/styles/theme.css
@@ -0,0 +1,21 @@
+.hero > span {
+  transition: all 0.3s ease;
+  letter-spacing: -0.025em;
+  text-shadow: 1px 1px 2px #00000063;
+}
+
+.logo {
+  transition: all 0.3s ease;
+  opacity: 1;
+  height: clamp(6rem, 20vw, 8rem);
+  margin: 0 auto 1.5rem;
+}
+
+.rails {
+  color: #cc0000;
+}
+
+.vite {
+  color: #ffac33;
+}
+
diff --git a/examples/blog/app/views/home/index.html.erb b/examples/blog/app/views/home/index.html.erb
@@ -1,5 +1,6 @@
-<header class="h-screen max-w-screen-lg xl:max-w-screen-xl mx-auto grid place-content-center">
-  <h1 class="hero text-center text-4xl sm:text-6xl lg:text-7xl -mt-32 leading-none font-extrabold tracking-tight">
-    Vite ⚡️ Rails
+<header>
+  <img class="logo" src="<%= vite_asset_path 'logo.svg' %>"/>
+  <h1 class="hero">
+    <span class="vite">Vite</span> <span class="rails">Rails</span>
   </h1>
 </header>
diff --git a/examples/blog/app/views/layouts/application.html.erb b/examples/blog/app/views/layouts/application.html.erb
@@ -6,8 +6,8 @@
     <%= csp_meta_tag %>
     <%= vite_client_tag %>
 
+    <%= vite_stylesheet_tag 'styles' %>
     <%= vite_javascript_tag 'application' %>
-    <%= vite_stylesheet_tag 'colored' %>
   </head>
 
   <body>

diff --git a/examples/blog/package.json b/examples/blog/package.json
@@ -14,7 +14,6 @@
     "vite-plugin-ruby": "1.0.5",
     "postcss": "8.2.4",
     "vite": "^2.0.0-beta.46",
-    "tailwindcss": "^2.0.2",
     "webpack-dev-server": "^3.11.2"
   }
 }
diff --git a/examples/blog/postcss.config.js b/examples/blog/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: [
-    require('tailwindcss'),
     require('postcss-import'),
     require('postcss-flexbugs-fixes'),
     require('postcss-preset-env')({