From 5ad55bcf88f38087785557e11823e5f48b8e6685 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Thu, 16 Jan 2025 18:39:12 +1100 Subject: [PATCH] Replacing Webpacker with Vite (#268) --- .github/workflows/ci.yml | 3 +- .gitignore | 8 + .postcssrc.yml | 2 - Gemfile | 5 +- Gemfile.lock | 44 +- Procfile.dev | 5 +- app/assets/builds/.keep | 0 app/assets/config/manifest.js | 3 +- .../entrypoints/2019_survey.js | 0 .../entrypoints/application.js | 40 +- .../entrypoints}/styles/admin.scss | 0 .../entrypoints}/styles/application.scss | 41 +- .../entrypoints}/styles/committee.scss | 0 .../entrypoints}/styles/forms.scss | 22 +- .../entrypoints}/styles/signatures.scss | 0 .../entrypoints}/styles/sponsorship.scss | 2 +- .../entrypoints}/styles/surveys.scss | 0 app/packs/src/tailwind.config.js | 927 ------------------ app/views/layouts/application.html.erb | 5 +- app/views/pages/welcome.html.erb | 6 +- app/views/shared/_navigation.html.erb | 14 +- bin/bundle | 110 ++- bin/dev | 10 +- bin/vite | 27 + config/environments/development.rb | 3 + config/initializers/assets.rb | 10 - .../initializers/content_security_policy.rb | 9 + config/vite.json | 16 + config/webpack/base.js | 21 - config/webpack/development.js | 5 - config/webpack/production.js | 5 - config/webpack/test.js | 5 - config/webpacker.yml | 65 -- package.json | 41 +- postcss.config.js => postcss.config.cjs | 6 +- tailwind.config.js | 126 ++- vite.config.mts | 41 + 37 files changed, 440 insertions(+), 1187 deletions(-) delete mode 100644 .postcssrc.yml delete mode 100644 app/assets/builds/.keep rename app/{packs => frontend}/entrypoints/2019_survey.js (100%) rename app/{packs => frontend}/entrypoints/application.js (74%) rename app/{packs => frontend/entrypoints}/styles/admin.scss (100%) rename app/{packs => frontend/entrypoints}/styles/application.scss (64%) rename app/{packs => frontend/entrypoints}/styles/committee.scss (100%) rename app/{packs => frontend/entrypoints}/styles/forms.scss (73%) rename app/{packs => frontend/entrypoints}/styles/signatures.scss (100%) rename app/{packs => frontend/entrypoints}/styles/sponsorship.scss (90%) rename app/{packs => frontend/entrypoints}/styles/surveys.scss (100%) delete mode 100644 app/packs/src/tailwind.config.js create mode 100755 bin/vite delete mode 100644 config/initializers/assets.rb create mode 100644 config/vite.json delete mode 100644 config/webpack/base.js delete mode 100644 config/webpack/development.js delete mode 100644 config/webpack/production.js delete mode 100644 config/webpack/test.js delete mode 100644 config/webpacker.yml rename postcss.config.js => postcss.config.cjs (67%) create mode 100644 vite.config.mts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1553cfff..835686af 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -34,7 +34,8 @@ jobs: - name: Install Yarn dependencies run: | yarn install - bundle exec rails webpacker:compile + bin/vite build + bundle exec rails assets:precompile - name: Rubocop run: bundle exec rubocop - name: Test diff --git a/.gitignore b/.gitignore index 6a0ac78e..67734ef2 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,11 @@ yarn-debug.log* /app/assets/builds/* !/app/assets/builds/.keep + +# Vite Ruby +/public/vite* +node_modules +# Vite uses dotenv and suggests to ignore local-only env files. See +# https://vitejs.dev/guide/env-and-mode.html#env-files +*.local + diff --git a/.postcssrc.yml b/.postcssrc.yml deleted file mode 100644 index 0d59ca67..00000000 --- a/.postcssrc.yml +++ /dev/null @@ -1,2 +0,0 @@ -plugins: - tailwindcss: './app/packs/src/tailwind.config.js' diff --git a/Gemfile b/Gemfile index 138d2684..d28dbc5e 100644 --- a/Gemfile +++ b/Gemfile @@ -19,11 +19,10 @@ gem 'kaminari' gem 'premailer-rails' gem 'pygmentize' gem 'redcarpet' -gem "dartsass-rails", "~> 0.5.0" gem 'validates_email_format_of' gem 'warden' # use for auth -gem 'webpacker', '6.0.0.rc.6' -gem 'sprockets-rails' # as of Rails 7.0, this is optional +gem 'vite_rails' +gem 'sprockets-rails' group :production do gem 'rails_12factor' diff --git a/Gemfile.lock b/Gemfile.lock index 46705578..4e096812 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -119,9 +119,6 @@ GEM css_parser (1.21.0) addressable csv (3.3.2) - dartsass-rails (0.5.1) - railties (>= 6.0.0) - sass-embedded (~> 1.63) date (3.4.1) decent_exposure (3.0.4) activesupport (>= 4.0) @@ -136,6 +133,7 @@ GEM diff-lcs (1.5.1) docile (1.4.1) drb (2.2.1) + dry-cli (1.2.0) erubi (1.13.1) factory_bot (6.5.0) activesupport (>= 5.0.0) @@ -151,18 +149,6 @@ GEM formatador (1.1.0) globalid (1.2.1) activesupport (>= 6.1) - google-protobuf (4.29.2) - bigdecimal - rake (>= 13) - google-protobuf (4.29.2-aarch64-linux) - bigdecimal - rake (>= 13) - google-protobuf (4.29.2-arm64-darwin) - bigdecimal - rake (>= 13) - google-protobuf (4.29.2-x86_64-linux) - bigdecimal - rake (>= 13) guard (2.19.0) formatador (>= 0.2.4) listen (>= 2.7, < 4.0) @@ -244,6 +230,7 @@ GEM minitest (5.25.4) multi_xml (0.7.1) bigdecimal (~> 3.1) + mutex_m (0.3.0) nenv (0.3.0) net-imap (0.5.4) date @@ -402,17 +389,7 @@ GEM rubocop (>= 1.52.0, < 2.0) rubocop-ast (>= 1.31.1, < 2.0) ruby-progressbar (1.13.0) - sass-embedded (1.83.0) - google-protobuf (~> 4.28) - rake (>= 13) - sass-embedded (1.83.0-aarch64-linux-gnu) - google-protobuf (~> 4.28) - sass-embedded (1.83.0-arm64-darwin) - google-protobuf (~> 4.28) - sass-embedded (1.83.0-x86_64-linux-gnu) - google-protobuf (~> 4.28) securerandom (0.4.1) - semantic_range (3.1.0) shellany (0.0.1) simplecov (0.22.0) docile (~> 1.1) @@ -445,6 +422,15 @@ GEM validates_email_format_of (1.8.2) i18n (>= 0.8.0) simpleidn + vite_rails (3.0.19) + railties (>= 5.1, < 9) + vite_ruby (~> 3.0, >= 3.2.2) + vite_ruby (3.9.1) + dry-cli (>= 0.7, < 2) + logger (~> 1.6) + mutex_m + rack-proxy (~> 0.6, >= 0.6.1) + zeitwerk (~> 2.2) warden (1.2.9) rack (>= 2.0.9) web-console (4.2.1) @@ -456,11 +442,6 @@ GEM addressable (>= 2.8.0) crack (>= 0.3.2) hashdiff (>= 0.4.0, < 2.0.0) - webpacker (6.0.0.rc.6) - activesupport (>= 5.2) - rack-proxy (>= 0.6.1) - railties (>= 5.2) - semantic_range (>= 2.3.0) websocket-driver (0.7.6) websocket-extensions (>= 0.1.0) websocket-extensions (0.1.5) @@ -482,7 +463,6 @@ DEPENDENCIES capybara-email! codeclimate-test-reporter createsend - dartsass-rails (~> 0.5.0) decent_exposure devise devise-multi_email @@ -518,10 +498,10 @@ DEPENDENCIES sprockets-rails tzinfo-data validates_email_format_of + vite_rails warden web-console webmock - webpacker (= 6.0.0.rc.6) RUBY VERSION ruby 3.3.5p100 diff --git a/Procfile.dev b/Procfile.dev index f5a3a6cc..25b701e3 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,2 @@ -js: bin/webpack-dev-server -web: bundle exec rails server -p 3000 -css: bin/rails dartsass:watch +web: bin/rails server -p 3000 +vite: bin/vite dev diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep deleted file mode 100644 index e69de29b..00000000 diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 9a99757a..8e0326d5 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,2 +1 @@ -//= link_tree ../images -//= link_tree ../builds +//= link_tree ../images \ No newline at end of file diff --git a/app/packs/entrypoints/2019_survey.js b/app/frontend/entrypoints/2019_survey.js similarity index 100% rename from app/packs/entrypoints/2019_survey.js rename to app/frontend/entrypoints/2019_survey.js diff --git a/app/packs/entrypoints/application.js b/app/frontend/entrypoints/application.js similarity index 74% rename from app/packs/entrypoints/application.js rename to app/frontend/entrypoints/application.js index 9c7e085a..b73afb50 100644 --- a/app/packs/entrypoints/application.js +++ b/app/frontend/entrypoints/application.js @@ -1,29 +1,21 @@ -/* eslint no-console:0 */ -// This file is automatically compiled by Webpack, along with any other files -// present in this directory. You're encouraged to place your actual application logic in -// a relevant structure within app/javascript and only use these pack files to reference -// that code so it'll be compiled. -// -// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate -// layout file, like app/views/layouts/application.html.erb - import 'core-js/stable' import 'regenerator-runtime/runtime' - -import Rails from "@rails/ujs" -Rails.start() - -const SignaturePad = require("signature_pad").default; - -import "./2019_survey"; - -import "../styles/application.scss"; -import "../styles/committee.scss"; -import "../styles/sponsorship.scss"; -import "../styles/forms.scss"; -import "../styles/admin.scss"; -import "../styles/signatures.scss"; -import "../styles/surveys.scss"; +import Rails from '@rails/ujs'; +import $ from 'jquery'; +window.$ = $; +window.jQuery = $; + +Rails.start(); + +import SignaturePad from "signature_pad"; + +import "./styles/application.scss"; +import "./styles/committee.scss"; +import "./styles/sponsorship.scss"; +import "./styles/forms.scss"; +import "./styles/admin.scss"; +import "./styles/signatures.scss"; +import "./styles/surveys.scss"; $(document).ready(() => { $('#mobile-menu-trigger').on('click', () => $('#mobile-menu').slideToggle()); diff --git a/app/packs/styles/admin.scss b/app/frontend/entrypoints/styles/admin.scss similarity index 100% rename from app/packs/styles/admin.scss rename to app/frontend/entrypoints/styles/admin.scss diff --git a/app/packs/styles/application.scss b/app/frontend/entrypoints/styles/application.scss similarity index 64% rename from app/packs/styles/application.scss rename to app/frontend/entrypoints/styles/application.scss index 96b97c69..fb9294a6 100644 --- a/app/packs/styles/application.scss +++ b/app/frontend/entrypoints/styles/application.scss @@ -3,21 +3,22 @@ body { font-family: sans-serif; line-height: 1.15; + background-color: white; } @tailwind components; @tailwind utilities; p, li, div, span { - &> a { - @apply text-pink no-underline border-0; + & > a { + @apply text-red no-underline border-0; &:hover { - @apply text-pink-darker border-b border-pink; + @apply text-red-darker border-b border-red; } svg { - fill: theme('colors.pink'); + fill: theme('colors.red'); opacity: 0.5; } } @@ -30,19 +31,19 @@ a { } h1 { - @apply text-xl bg-pink text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold; + @apply text-xl bg-red text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold; } h2 { - @apply text-xl text-pink-dark font-bold my-4 pl-5; + @apply text-xl text-red-dark font-bold my-4 pl-5; } h3 { - @apply text-lg text-pink-dark font-bold my-3 pl-5; + @apply text-lg text-red-dark font-bold my-3 pl-5; } h4 { - @apply text-lg text-pink-darkest font-bold mt-3 mb-2 pl-5; + @apply text-lg text-red-darkest font-bold mt-3 mb-2 pl-5; } p, li { @@ -51,7 +52,7 @@ p, li { .markdown { h1 { - @apply bg-white text-pink-darkest; + @apply bg-white text-red; } blockquote { @@ -94,11 +95,11 @@ p, li { nav { .actions { a, button { - @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-pink font-mono text-pink text-center no-underline; + @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-red font-mono text-red text-center no-underline; transition: background-color 0.5s ease; &:hover { - @apply bg-pink-darker text-white; + @apply bg-red-darker text-white; } } } @@ -129,7 +130,7 @@ nav { @apply no-underline border-cyan border-b; &:hover { - @apply border-purple; + @apply border-purple-500; } } } @@ -163,11 +164,11 @@ nav { .call-to-action { a { - @apply text-purple w-5/6 my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-purple text-purple no-underline font-mono; + @apply text-red-dark my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-red no-underline font-mono; transition: all 0.25s ease; &:hover { - @apply bg-purple-darker text-white; + @apply bg-red-darker text-white; } } } @@ -203,10 +204,10 @@ nav { } a, p { - @apply inline-block border-pink border-2 text-pink font-mono no-underline font-bold bg-white py-2 px-5 shadow-md; + @apply inline-block border-red border-2 text-red font-mono no-underline font-bold bg-white py-2 px-5 shadow-md; &:hover { - @apply bg-pink text-white; + @apply bg-red text-white; } } } @@ -215,17 +216,13 @@ nav { @apply max-w-md text-center my-4; .flash { - @apply text-purple w-5/6 my-4 px-5 py-2 border-2 shadow bg-white border-purple font-mono mx-auto text-sm; + @apply text-purple w-6 my-4 px-5 py-2 border-2 shadow bg-white border-purple-500 font-mono mx-auto text-sm; transition: all 0.25s ease; } } @screen md { .devise-links { - @apply pl-1/3; + @apply pl-4; } } - -.badge { - @apply inline-flex items-center rounded bg-green px-2 py-1 text-xs font-medium text-white ring-1 ring-inset; -} diff --git a/app/packs/styles/committee.scss b/app/frontend/entrypoints/styles/committee.scss similarity index 100% rename from app/packs/styles/committee.scss rename to app/frontend/entrypoints/styles/committee.scss diff --git a/app/packs/styles/forms.scss b/app/frontend/entrypoints/styles/forms.scss similarity index 73% rename from app/packs/styles/forms.scss rename to app/frontend/entrypoints/styles/forms.scss index 5d3846b0..b04bcf7b 100644 --- a/app/packs/styles/forms.scss +++ b/app/frontend/entrypoints/styles/forms.scss @@ -6,14 +6,14 @@ form.standard { } label { - @apply block text-grey font-bold mb-1 pr-4; + @apply block text-black font-bold mb-1 pr-4; } input[type=text], input[type=email], input[type=password], textarea { - @apply bg-grey-lighter appearance-none border-2 border-grey-lighter rounded w-full py-2 px-4 text-grey-darker leading-tight; + @apply bg-grey-lighter appearance-none border-2 border-grey-lighter rounded w-full py-2 px-4 text-black leading-tight; &:focus { @apply outline-none bg-white border-purple; @@ -51,7 +51,7 @@ form.standard { @screen md { legend { - @apply pl-1/3 w-2/3; + @apply pl-1 w-2; } label { @@ -64,11 +64,11 @@ form.standard { } .label { - @apply w-1/3 flex-auto; + @apply w-1 flex-auto; } .input { - @apply w-2/3 flex-auto; + @apply w-2 flex-auto; } .flipped { @@ -77,28 +77,28 @@ form.standard { } .label { - @apply w-2/3 flex-auto; + @apply w-2 flex-auto; } .input { - @apply w-1/3 flex-auto text-right pr-3; + @apply w-1 flex-auto text-right pr-3; } } .hint { - @apply w-2/3 ml-1/3; + @apply w-2 ml-1; } .buttons { - @apply flex items-center pl-1/3 w-2/3; + @apply flex items-center pl-1 w-2; } .links { - @apply pl-1/3; + @apply pl-1; } .info { - @apply pl-1/3; + @apply pl-1; } } } diff --git a/app/packs/styles/signatures.scss b/app/frontend/entrypoints/styles/signatures.scss similarity index 100% rename from app/packs/styles/signatures.scss rename to app/frontend/entrypoints/styles/signatures.scss diff --git a/app/packs/styles/sponsorship.scss b/app/frontend/entrypoints/styles/sponsorship.scss similarity index 90% rename from app/packs/styles/sponsorship.scss rename to app/frontend/entrypoints/styles/sponsorship.scss index 292a415f..56dfbe60 100644 --- a/app/packs/styles/sponsorship.scss +++ b/app/frontend/entrypoints/styles/sponsorship.scss @@ -41,6 +41,6 @@ .sponsor-standalone { h1 a { - @apply text-pink-darkest no-underline text-2xl; + @apply text-red-darkest no-underline text-2xl; } } diff --git a/app/packs/styles/surveys.scss b/app/frontend/entrypoints/styles/surveys.scss similarity index 100% rename from app/packs/styles/surveys.scss rename to app/frontend/entrypoints/styles/surveys.scss diff --git a/app/packs/src/tailwind.config.js b/app/packs/src/tailwind.config.js deleted file mode 100644 index 8dbe5940..00000000 --- a/app/packs/src/tailwind.config.js +++ /dev/null @@ -1,927 +0,0 @@ -/* - -Tailwind - The Utility-First CSS Framework - -A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), -David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). - -Welcome to the Tailwind config file. This is where you can customize -Tailwind specifically for your project. Don't be intimidated by the -length of this file. It's really just a big JavaScript object and -we've done our very best to explain each section. - -View the full documentation at https://tailwindcss.com. - - -/* -|------------------------------------------------------------------------------- -| Colors https://tailwindcss.com/docs/colors -|------------------------------------------------------------------------------- -| -| Here you can specify the colors used in your project. To get you started, -| we've provided a generous palette of great looking colors that are perfect -| for prototyping, but don't hesitate to change them for your project. You -| own these colors, nothing will break if you change everything about them. -| -| We've used literal color names ("red", "blue", etc.) for the default -| palette, but if you'd rather use functional names like "primary" and -| "secondary", or even a numeric scale like "100" and "200", go for it. -| -*/ - -let colors = { - 'transparent': 'transparent', - - /* RubyAU Custom colours generated via https://javisperez.github.io/tailwindcolorshades/ */ - 'pink-darkest' : '#4A051E', - 'pink-darker' : '#940B3C', - 'pink-dark' : '#DE105A', - 'pink' : '#F71264', - 'pink-light' : '#F95993', - 'pink-lighter' : '#FCA0C1', - 'pink-lightest' : '#FEE7F0', - - 'purple-darkest' : '#241146', - 'purple-darker' : '#49238C', - 'purple-dark' : '#6D34D2', - 'purple' : '#793AE9', - 'purple-light' : '#A175F0', - 'purple-lighter' : '#C9B0F6', - 'purple-lightest' : '#F2EBFD', - - 'cyan-darkest' : '#164844', - 'cyan-darker' : '#2C9189', - 'cyan-dark' : '#42D9CD', - 'cyan' : '#49F1E4', - 'cyan-light' : '#80F5EC', - 'cyan-lighter' : '#B6F9F4', - 'cyan-lightest' : '#EDFEFC', - /* END RubyAU Custom colours */ - - 'black': '#22292f', - 'grey-darkest': '#3d4852', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - 'grey': '#b8c2cc', - 'grey-light': '#dae1e7', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#f8fafc', - 'white': '#ffffff', - - 'red-darkest': '#3b0d0c', - 'red-darker': '#621b18', - 'red-dark': '#cc1f1a', - 'red': '#e3342f', - 'red-light': '#ef5753', - 'red-lighter': '#f9acaa', - 'red-lightest': '#fcebea', - - 'orange-darkest': '#462a16', - 'orange-darker': '#613b1f', - 'orange-dark': '#de751f', - 'orange': '#f6993f', - 'orange-light': '#faad63', - 'orange-lighter': '#fcd9b6', - 'orange-lightest': '#fff5eb', - - 'yellow-darkest': '#453411', - 'yellow-darker': '#684f1d', - 'yellow-dark': '#f2d024', - 'yellow': '#ffed4a', - 'yellow-light': '#fff382', - 'yellow-lighter': '#fff9c2', - 'yellow-lightest': '#fcfbeb', - - 'green-darkest': '#0f2f21', - 'green-darker': '#1a4731', - 'green-dark': '#1f9d55', - 'green': '#38c172', - 'green-light': '#51d88a', - 'green-lighter': '#a2f5bf', - 'green-lightest': '#e3fcec', - - 'teal-darkest': '#0d3331', - 'teal-darker': '#20504f', - 'teal-dark': '#38a89d', - 'teal': '#4dc0b5', - 'teal-light': '#64d5ca', - 'teal-lighter': '#a0f0ed', - 'teal-lightest': '#e8fffe', - - 'blue-darkest': '#12283a', - 'blue-darker': '#1c3d5a', - 'blue-dark': '#2779bd', - 'blue': '#3490dc', - 'blue-light': '#6cb2eb', - 'blue-lighter': '#bcdefa', - 'blue-lightest': '#eff8ff', - - 'indigo-darkest': '#191e38', - 'indigo-darker': '#2f365f', - 'indigo-dark': '#5661b3', - 'indigo': '#6574cd', - 'indigo-light': '#7886d7', - 'indigo-lighter': '#b2b7ff', - 'indigo-lightest': '#e6e8ff', - - /* Replaced by custom RubyAU colours (see above) */ - // 'purple-darkest': '#21183c', - // 'purple-darker': '#382b5f', - // 'purple-dark': '#794acf', - // 'purple': '#9561e2', - // 'purple-light': '#a779e9', - // 'purple-lighter': '#d6bbfc', - // 'purple-lightest': '#f3ebff', - // - // 'pink-darkest': '#451225', - // 'pink-darker': '#6f213f', - // 'pink-dark': '#eb5286', - // 'pink': '#f66d9b', - // 'pink-light': '#fa7ea8', - // 'pink-lighter': '#ffbbca', - // 'pink-lightest': '#ffebef', -} - -module.exports = { - - theme: { - /* - |--------------------------------------------------------------------------- - | Colors https://tailwindcss.com/docs/colors - |--------------------------------------------------------------------------- - | - | The color palette defined above is also assigned to the "colors" key of - | your Tailwind config. This makes it easy to access them in your CSS - | using Tailwind's config helper. For example: - | - | .error { color: theme('colors.red') } - | - */ - - colors: colors, - - - /* - |--------------------------------------------------------------------------- - | Screens https://tailwindcss.com/docs/responsive-design - |--------------------------------------------------------------------------- - | - | Screens in Tailwind are translated to CSS media queries. They define the - | responsive breakpoints for your project. By default Tailwind takes a - | "mobile first" approach, where each screen size represents a minimum - | viewport width. Feel free to have as few or as many screens as you - | want, naming them in whatever way you'd prefer for your project. - | - | Tailwind also allows for more complex screen definitions, which can be - | useful in certain situations. Be sure to see the full responsive - | documentation for a complete list of options. - | - | Class name: .{screen}:{utility} - | - */ - - screens: { - 'sm': '576px', - 'md': '768px', - 'lg': '992px', - 'xl': '1200px', - }, - - - /* - |--------------------------------------------------------------------------- - | Fonts https://tailwindcss.com/docs/fonts - |--------------------------------------------------------------------------- - | - | Here is where you define your project's font stack, or font families. - | Keep in mind that Tailwind doesn't actually load any fonts for you. - | If you're using custom fonts you'll need to import them prior to - | defining them here. - | - | By default we provide a native font stack that works remarkably well on - | any device or OS you're using, since it just uses the default fonts - | provided by the platform. - | - | Class name: .font-{name} - | - */ - - fontFamily: { - 'sans': [ - 'system-ui', - 'BlinkMacSystemFont', - '-apple-system', - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - 'sans-serif', - ], - 'serif': [ - 'Constantia', - 'Lucida Bright', - 'Lucidabright', - 'Lucida Serif', - 'Lucida', - 'DejaVu Serif', - 'Bitstream Vera Serif', - 'Liberation Serif', - 'Georgia', - 'serif', - ], - 'mono': [ - 'Menlo', - 'Monaco', - 'Consolas', - 'Liberation Mono', - 'Courier New', - 'monospace', - ], - }, - - - /* - |--------------------------------------------------------------------------- - | Text sizes https://tailwindcss.com/docs/text-sizing - |--------------------------------------------------------------------------- - | - | Here is where you define your text sizes. Name these in whatever way - | makes the most sense to you. We use size names by default, but - | you're welcome to use a numeric scale or even something else - | entirely. - | - | By default Tailwind uses the "rem" unit type for most measurements. - | This allows you to set a root font size which all other sizes are - | then based on. That said, you are free to use whatever units you - | prefer, be it rems, ems, pixels or other. - | - | Class name: .text-{size} - | - */ - - fontSize: { - 'xs': '.75rem', // 12px - 'sm': '.875rem', // 14px - 'base': '1rem', // 16px - 'lg': '1.125rem', // 18px - 'xl': '1.25rem', // 20px - '2xl': '1.5rem', // 24px - '3xl': '1.875rem', // 30px - '4xl': '2.25rem', // 36px - '5xl': '3rem', // 48px - }, - - - /* - |--------------------------------------------------------------------------- - | Font weights https://tailwindcss.com/docs/font-weight - |--------------------------------------------------------------------------- - | - | Here is where you define your font weights. We've provided a list of - | common font weight names with their respective numeric scale values - | to get you started. It's unlikely that your project will require - | all of these, so we recommend removing those you don't need. - | - | Class name: .font-{weight} - | - */ - - fontWeight: { - 'thin': 100, - 'extralight': 200, - 'light': 300, - 'normal': 400, - 'medium': 500, - 'semibold': 600, - 'bold': 700, - 'extrabold': 800, - 'black': 900, - }, - - - /* - |--------------------------------------------------------------------------- - | Leading (line height) https://tailwindcss.com/docs/line-height - |--------------------------------------------------------------------------- - | - | Here is where you define your line height values, or as we call - | them in Tailwind, leadings. - | - | Class name: .leading-{size} - | - */ - - lineHeight: { - 'none': 1, - 'tight': 1.25, - 'normal': 1.5, - 'loose': 2, - }, - - - /* - |--------------------------------------------------------------------------- - | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing - |--------------------------------------------------------------------------- - | - | Here is where you define your letter spacing values, or as we call - | them in Tailwind, tracking. - | - | Class name: .tracking-{size} - | - */ - - letterSpacing: { - 'tight': '-0.05em', - 'normal': '0', - 'wide': '0.05em', - }, - - - /* - |--------------------------------------------------------------------------- - | Text colors https://tailwindcss.com/docs/text-color - |--------------------------------------------------------------------------- - | - | Here is where you define your text colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Class name: .text-{color} - | - */ - - textColor: colors, - - - /* - |--------------------------------------------------------------------------- - | Background colors https://tailwindcss.com/docs/background-color - |--------------------------------------------------------------------------- - | - | Here is where you define your background colors. By default these use - | the color palette we defined above, however you're welcome to set - | these independently if that makes sense for your project. - | - | Class name: .bg-{color} - | - */ - - backgroundColor: colors, - - - /* - |--------------------------------------------------------------------------- - | Background sizes https://tailwindcss.com/docs/background-size - |--------------------------------------------------------------------------- - | - | Here is where you define your background sizes. We provide some common - | values that are useful in most projects, but feel free to add other sizes - | that are specific to your project here as well. - | - | Class name: .bg-{size} - | - */ - - backgroundSize: { - 'auto': 'auto', - 'cover': 'cover', - 'contain': 'contain', - }, - - - /* - |--------------------------------------------------------------------------- - | Border widths https://tailwindcss.com/docs/border-width - |--------------------------------------------------------------------------- - | - | Here is where you define your border widths. Take note that border - | widths require a special "default" value set as well. This is the - | width that will be used when you do not specify a border width. - | - | Class name: .border{-side?}{-width?} - | - */ - - borderWidth: { - DEFAULT: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px', - }, - - - /* - |--------------------------------------------------------------------------- - | Border colors https://tailwindcss.com/docs/border-color - |--------------------------------------------------------------------------- - | - | Here is where you define your border colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Take note that border colors require a special "default" value set - | as well. This is the color that will be used when you do not - | specify a border color. - | - | Class name: .border-{color} - | - */ - - borderColor: global.Object.assign({ default: colors['grey-light'] }, colors), - - - /* - |--------------------------------------------------------------------------- - | Border radius https://tailwindcss.com/docs/border-radius - |--------------------------------------------------------------------------- - | - | Here is where you define your border radius values. If a `default` radius - | is provided, it will be made available as the non-suffixed `.rounded` - | utility. - | - | If your scale includes a `0` value to reset already rounded corners, it's - | a good idea to put it first so other values are able to override it. - | - | Class name: .rounded{-side?}{-size?} - | - */ - - borderRadius: { - 'none': '0', - 'sm': '.125rem', - DEFAULT: '.25rem', - 'lg': '.5rem', - 'full': '9999px', - }, - - - /* - |--------------------------------------------------------------------------- - | Width https://tailwindcss.com/docs/width - |--------------------------------------------------------------------------- - | - | Here is where you define your width utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale, a percentage - | based fraction scale, plus some other common use-cases. You - | can, of course, modify these values as needed. - | - | - | It's also worth mentioning that Tailwind automatically escapes - | invalid CSS class name characters, which allows you to have - | awesome classes like .w-2/3. - | - | Class name: .w-{size} - | - */ - - width: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - 'full': '100%', - 'screen': '100vw', - }, - - - /* - |--------------------------------------------------------------------------- - | Height https://tailwindcss.com/docs/height - |--------------------------------------------------------------------------- - | - | Here is where you define your height utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale plus some other - | common use-cases. You can, of course, modify these values as - | needed. - | - | Class name: .h-{size} - | - */ - - height: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - 'full': '100%', - 'screen': '100vh', - }, - - - /* - |--------------------------------------------------------------------------- - | Minimum width https://tailwindcss.com/docs/min-width - |--------------------------------------------------------------------------- - | - | Here is where you define your minimum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .min-w-{size} - | - */ - - minWidth: { - '0': '0', - 'full': '100%', - }, - - - /* - |--------------------------------------------------------------------------- - | Minimum height https://tailwindcss.com/docs/min-height - |--------------------------------------------------------------------------- - | - | Here is where you define your minimum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | few common use-cases by default. You can, of course, modify these - | values as needed. - | - | Class name: .min-h-{size} - | - */ - - minHeight: { - '0': '0', - 'full': '100%', - 'screen': '100vh', - }, - - - /* - |--------------------------------------------------------------------------- - | Maximum width https://tailwindcss.com/docs/max-width - |--------------------------------------------------------------------------- - | - | Here is where you define your maximum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based scale and a "full width" size, - | which is basically a reset utility. You can, of course, - | modify these values as needed. - | - | Class name: .max-w-{size} - | - */ - - maxWidth: { - 'xs': '20rem', - 'sm': '30rem', - 'md': '40rem', - 'lg': '50rem', - 'xl': '60rem', - '2xl': '70rem', - '3xl': '80rem', - '4xl': '90rem', - '5xl': '100rem', - 'full': '100%', - }, - - - /* - |--------------------------------------------------------------------------- - | Maximum height https://tailwindcss.com/docs/max-height - |--------------------------------------------------------------------------- - | - | Here is where you define your maximum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .max-h-{size} - | - */ - - maxHeight: { - 'full': '100%', - 'screen': '100vh', - }, - - - /* - |--------------------------------------------------------------------------- - | Padding https://tailwindcss.com/docs/padding - |--------------------------------------------------------------------------- - | - | Here is where you define your padding utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .p{side?}-{size} - | - */ - - padding: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - '1/3': '33.33333%', - '2/3': '66.66667%', - }, - - - /* - |--------------------------------------------------------------------------- - | Margin https://tailwindcss.com/docs/margin - |--------------------------------------------------------------------------- - | - | Here is where you define your margin utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .m{side?}-{size} - | - */ - - margin: { - 'auto': 'auto', - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - '1/3': '33.33333%', - '2/3': '66.66667%', - - '-px': '-1px', - '-0': '-0', - '-1': '-0.25rem', - '-2': '-0.5rem', - '-3': '-0.75rem', - '-4': '-1rem', - '-5': '-1.25rem', - '-6': '-1.5rem', - '-8': '-2rem', - '-10': '-2.5rem', - '-12': '-3rem', - '-16': '-4rem', - '-20': '-5rem', - '-24': '-6rem', - '-32': '-8rem', - }, - - - /* - |--------------------------------------------------------------------------- - | Shadows https://tailwindcss.com/docs/shadows - |--------------------------------------------------------------------------- - | - | Here is where you define your shadow utilities. As you can see from - | the defaults we provide, it's possible to apply multiple shadows - | per utility using comma separation. - | - | If a `default` shadow is provided, it will be made available as the non- - | suffixed `.shadow` utility. - | - | Class name: .shadow-{size?} - | - */ - - boxShadow: { - DEFAULT: '0 2px 4px 0 rgba(0,0,0,0.10)', - 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', - 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', - 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', - 'outline': '0 0 0 3px rgba(52,144,220,0.5)', - 'none': 'none', - }, - - - /* - |--------------------------------------------------------------------------- - | Z-index https://tailwindcss.com/docs/z-index - |--------------------------------------------------------------------------- - | - | Here is where you define your z-index utility values. By default we - | provide a sensible numeric scale. You can, of course, modify these - | values as needed. - | - | Class name: .z-{index} - | - */ - - zIndex: { - 'auto': 'auto', - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50, - }, - - - /* - |--------------------------------------------------------------------------- - | SVG fill https://tailwindcss.com/docs/svg - |--------------------------------------------------------------------------- - | - | Here is where you define your SVG fill colors. By default we just provide - | `fill-current` which sets the fill to the current text color. This lets you - | specify a fill color using existing text color utilities and helps keep the - | generated CSS file size down. - | - | Class name: .fill-{name} - | - */ - - fill: { - 'current': 'currentColor', - }, - - - /* - |--------------------------------------------------------------------------- - | SVG stroke https://tailwindcss.com/docs/svg - |--------------------------------------------------------------------------- - | - | Here is where you define your SVG stroke colors. By default we just provide - | `stroke-current` which sets the stroke to the current text color. This lets - | you specify a stroke color using existing text color utilities and helps - | keep the generated CSS file size down. - | - | Class name: .stroke-{name} - | - */ - - stroke: { - 'current': 'currentColor', - }, - }, - - /* - |----------------------------------------------------------------------------- - | Modules https://tailwindcss.com/docs/configuration#modules - |----------------------------------------------------------------------------- - | - | Here is where you control which modules are generated and what variants are - | generated for each of those modules. - | - | Currently supported variants: - | - responsive - | - hover - | - focus - | - focus-within - | - active - | - group-hover - | - | To disable a module completely, use `false` instead of an array. - | - */ - - variants: { - appearance: ['responsive'], - backgroundAttachment: ['responsive'], - backgroundColor: ['responsive', 'hover', 'focus'], - backgroundPosition: ['responsive'], - backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], - borderCollapse: [], - borderColor: ['responsive', 'hover', 'focus'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidth: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - flexDirection: ['responsive'], - flexWrap: ['responsive'], - alignItems: ['responsive'], - alignSelf: ['responsive'], - justifyContent: ['responsive'], - alignContent: ['responsive'], - flex: ['responsive'], - flexGrow: ['responsive'], - flexShrink: ['responsive'], - float: ['responsive'], - fontFamily: ['responsive'], - fontWeight: ['responsive', 'hover', 'focus'], - height: ['responsive'], - lineHeight: ['responsive'], - listStylePosition: ['responsive'], - listStyleType: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - opacity: ['responsive'], - outline: ['focus'], - overflow: ['responsive'], - padding: ['responsive'], - pointerEvents: ['responsive'], - position: ['responsive'], - inset: ['responsive'], - resize: ['responsive'], - boxShadow: ['responsive', 'hover', 'focus'], - fill: [], - stroke: [], - tableLayout: ['responsive'], - textAlign: ['responsive'], - textColor: ['responsive', 'hover', 'focus'], - fontSize: ['responsive'], - fontStyle: ['responsive', 'hover', 'focus'], - fontSmoothing: ['responsive', 'hover', 'focus'], - textDecoration: ['responsive', 'hover', 'focus'], - textStextTransformtyle: ['responsive', 'hover', 'focus'], - letterSpacing: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - wordBreak: ['responsive'], - textOverflow: ['responsive'], - width: ['responsive'], - zIndex: ['responsive'], - }, - - corePlugins: { - objectFit: false, - objectPosition: false, - }, - - - /* - |----------------------------------------------------------------------------- - | Plugins https://tailwindcss.com/docs/plugins - |----------------------------------------------------------------------------- - | - | Here is where you can register any plugins you'd like to use in your - | project. Tailwind's built-in `container` plugin is enabled by default to - | give you a Bootstrap-style responsive container component out of the box. - | - | Be sure to view the complete plugin documentation to learn more about how - | the plugin system works. - | - */ - - plugins: [], -} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b314e686..1f8717ac 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -31,8 +31,9 @@ <%= csrf_meta_tags %> - <%= javascript_pack_tag 'application' %> - <%= stylesheet_pack_tag 'application' %> + <%= vite_client_tag %> + <%= vite_javascript_tag 'application' %> +
diff --git a/app/views/pages/welcome.html.erb b/app/views/pages/welcome.html.erb index e3afd0f8..20b9f3a5 100644 --- a/app/views/pages/welcome.html.erb +++ b/app/views/pages/welcome.html.erb @@ -1,5 +1,5 @@ <%= content_for :banner do %> -