bridgetown-core 1.0.0.alpha9 → 1.0.0.beta2

data/lib/bridgetown-core/commands/new.rb

@@ -24,6 +24,14 @@ module Bridgetown
                    aliases: "-c",
                    banner: "CONFIGURATION(S)",
                    desc: "Comma separated list of bundled configurations to perform"
+      class_option :templates,
+                   aliases: "-t",
+                   banner: "liquid|erb|serbea",
+                   desc: "Preferred template engine (defaults to Liquid)"
+      class_option :"frontend-bundling",
+                   aliases: "-e",
+                   banner: "esbuild|webpack",
+                   desc: "Choose your frontend bundling stack (defaults to esbuild)"
       class_option :force,
                    type: :boolean,
                    desc: "Force creation even if PATH already exists"
@@ -33,9 +41,9 @@ module Bridgetown
       class_option :"skip-yarn",
                    type: :boolean,
                    desc: "Skip 'yarn install'"
-      class_option :"use-postcss",
+      class_option :"use-sass",
                    type: :boolean,
-                   desc: "Create an empty PostCSS configuration instead of using Sass"
+                   desc: "(Webpack only) Create a Sass configuration instead of using PostCSS"
 
       DOCSURL = "https://bridgetownrb.com/docs"
 
@@ -54,6 +62,11 @@ module Bridgetown
       def new_site
         raise ArgumentError, "You must specify a path." if args.empty?
 
+        if frontend_bundling_option != "webpack" && options["use-sass"]
+          raise ArgumentError,
+                "To install Sass, you must choose Webpack (-e webpack) as your frontend bundler"
+        end
+
         new_site_path = File.expand_path(args.join(" "), Dir.pwd)
         @site_name = new_site_path.split(File::SEPARATOR).last
 
@@ -70,6 +83,8 @@ module Bridgetown
         say_status :create, new_site_path
         create_site new_site_path
         after_install new_site_path, args.join(" "), options
+      rescue ArgumentError => e
+        say_status :alert, e.message, :red
       end
 
       protected
@@ -78,24 +93,79 @@ module Bridgetown
         !options["force"] && Dir.exist?(path)
       end
 
+      def frontend_bundling_option
+        options["frontend-bundling"] == "webpack" ? "webpack" : "esbuild"
+      end
+
+      def postcss_option
+        !(frontend_bundling_option == "webpack" && options["use-sass"])
+      end
+
       def create_site(new_site_path)
-        directory ".", ".", exclude_pattern: %r!\.erb|DS_Store$|\.(s[ac]|c)ss$!
+        directory ".", ".", exclude_pattern: %r!\.erb|TEMPLATES|DS_Store$|\.(s[ac]|c)ss$!
         FileUtils.chmod_R "u+w", new_site_path
 
         template(
           "src/_posts/0000-00-00-welcome-to-bridgetown.md.erb",
           "src/_posts/#{Time.now.strftime("%Y-%m-%d")}-welcome-to-bridgetown.md"
         )
+        template("ruby-version.erb", ".ruby-version")
         template("Gemfile.erb", "Gemfile")
+        template("Rakefile.erb", "Rakefile")
         template("package.json.erb", "package.json")
         template("frontend/javascript/index.js.erb", "frontend/javascript/index.js")
+        template("src/index.md.erb", "src/index.md")
+        template("src/posts.md.erb", "src/posts.md")
+
+        case options["templates"]
+        when "erb"
+          setup_erb_templates
+        when "serbea"
+          setup_serbea_templates
+        else
+          setup_liquid_templates
+        end
+
+        if frontend_bundling_option == "esbuild"
+          configure_postcss
+          invoke(Esbuild, ["setup"], {})
+        else
+          postcss_option ? configure_postcss : configure_sass
+          invoke(Webpack, ["setup"], {})
+        end
+      end
+
+      def setup_erb_templates
+        directory "TEMPLATES/erb/_layouts", "src/_layouts"
+        directory "TEMPLATES/erb/_components", "src/_components"
+        directory "TEMPLATES/erb/_partials", "src/_partials"
+        gsub_file "bridgetown.config.yml", %r!permalink: pretty\n!, <<~YML
+          permalink: pretty
+          template_engine: erb
+        YML
+      end
+
+      def setup_serbea_templates
+        directory "TEMPLATES/serbea/_layouts", "src/_layouts"
+        directory "TEMPLATES/serbea/_components", "src/_components"
+        directory "TEMPLATES/serbea/_partials", "src/_partials"
+        gsub_file "bridgetown.config.yml", %r!permalink: pretty\n!, <<~YML
+          permalink: pretty
+          template_engine: serbea
+        YML
+      end
 
-        options["use-postcss"] ? configure_postcss : configure_sass
-        invoke(Webpack, ["setup"], {})
+      def setup_liquid_templates
+        directory "TEMPLATES/liquid/_layouts", "src/_layouts"
+        directory "TEMPLATES/liquid/_components", "src/_components"
+        gsub_file "bridgetown.config.yml", %r!permalink: pretty\n!, <<~YML
+          permalink: pretty
+          template_engine: liquid
+        YML
       end
 
       def configure_sass
-        copy_file("frontend/styles/index.scss")
+        copy_file("frontend/styles/index.css", "frontend/styles/index.scss")
       end
 
       def configure_postcss
@@ -159,9 +229,9 @@ module Bridgetown
         end
         @skipped_bundle = false
       rescue LoadError
-        say_status :run, "Could not load Bundler. Bundle install skipped.", :red
+        say_status :alert, "Could not load Bundler. Bundle install skipped.", :red
       rescue SystemExit
-        say_status :run, "Problem occured while running bundle install.", :red
+        say_status :alert, "Problem occured while running bundle install.", :red
       end
 
       def git_init(path)
@@ -171,7 +241,7 @@ module Bridgetown
           end
         end
       rescue SystemExit
-        say_status :run, "Could not load git. git init skipped.", :red
+        say_status :alert, "Could not load git. git init skipped.", :red
       end
 
       def yarn_install(path)
@@ -182,7 +252,7 @@ module Bridgetown
         end
         @skipped_yarn = false
       rescue SystemExit
-        say_status :run, "Could not load yarn. yarn install skipped.", :red
+        say_status :alert, "Could not load yarn. yarn install skipped.", :red
       end
     end
   end

data/lib/bridgetown-core/commands/plugins.rb

@@ -187,7 +187,7 @@ module Bridgetown
         say_status "Done!", "Have fun writing your new #{name} plugin :)"
         say_status "Remember:", "Don't forget to rename the SamplePlugin" \
                                 " code identifiers and paths to your own" \
-                                " indentifer, as well as update your README " \
+                                " indentifer, as well as update your README" \
                                 " and CHANGELOG files as necessary."
       end
 

data/lib/bridgetown-core/commands/webpack/enable-postcss.rb

@@ -6,7 +6,7 @@ template default_postcss_config, "postcss.config.js"
 template "webpack.defaults.js.erb", "config/webpack.defaults.js", force: true
 
 unless Bridgetown.environment.test?
-  packages = %w(postcss@8.3.0 postcss-loader@4.3.0 postcss-flexbugs-fixes postcss-preset-env)
+  packages = %w(postcss postcss-loader postcss-flexbugs-fixes postcss-preset-env)
   run "yarn add -D #{packages.join(" ")}"
   run "yarn remove sass sass-loader"
 end

data/lib/bridgetown-core/commands/webpack/update.rb

@@ -2,14 +2,14 @@
 
 # rubocop:disable Layout/LineLength
 
-required_packages = %w(esbuild esbuild-loader webpack@5.39.1 webpack-cli@4.7.2 webpack-manifest-plugin@3.1.1)
-redundant_packages = %w(@babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/preset-env babel-loader)
-
 template "webpack.defaults.js.erb", "config/webpack.defaults.js", force: true
 say "🎉 Webpack configuration updated successfully!"
 
 return if Bridgetown.environment.test?
 
+required_packages = %w(esbuild esbuild-loader webpack@5.39.1 webpack-cli@4.7.2 webpack-manifest-plugin@3.1.1)
+redundant_packages = %w(@babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/preset-env babel-loader)
+
 say "Installing required packages"
 run "yarn add -D #{required_packages.join(" ")}"
 

data/lib/bridgetown-core/commands/webpack/webpack.defaults.js.erb

@@ -119,7 +119,7 @@ module.exports = {
       filename: "../css/[name].[contenthash].css",
     }),
     new WebpackManifestPlugin({
-      fileName: path.resolve(rootDir, ".bridgetown-webpack", "manifest.json"),
+      fileName: path.resolve(rootDir, ".bridgetown-cache", "frontend-bundling", "manifest.json"),
     }),
   ],
   module: {

data/lib/bridgetown-core/commands/webpack.rb

@@ -13,7 +13,7 @@ module Bridgetown
       def self.banner
         "bridgetown webpack ACTION"
       end
-      summary "Perform actions on the bridgetown webpack configuration"
+      summary "Perform actions on the Bridgetown Webpack configuration"
 
       def self.exit_on_failure?
         true
@@ -72,8 +72,8 @@ module Bridgetown
 
       def supported_actions
         {
-          setup: "Sets up a webpack integration with Bridgetown in your project",
-          update: "Updates the Bridgetown webpack defaults to the latest available version",
+          setup: "Sets up a Webpack integration with Bridgetown in your project",
+          update: "Updates the Bridgetown Webpack defaults to the latest available version",
           "enable-postcss": "Configures PostCSS in your project",
         }.with_indifferent_access
       end

data/lib/bridgetown-core/component.rb

@@ -91,6 +91,12 @@ module Bridgetown
       def supported_template_extensions
         %w(erb serb slim haml)
       end
+
+      def path_for_errors
+        component_template_path
+      rescue RuntimeError
+        source_location
+      end
     end
 
     # If a content block was originally passed into via `render`, capture its output.
@@ -133,7 +139,7 @@ module Bridgetown
     rescue StandardError => e
       Bridgetown.logger.error "Component error:",
                               "#{self.class} encountered an error while "\
-                              "rendering `#{self.class.component_template_path}'"
+                              "rendering `#{self.class.path_for_errors}'"
       raise e
     end
 
@@ -165,7 +171,7 @@ module Bridgetown
     end
 
     def method_missing(method, *args, **kwargs, &block)
-      if helpers.respond_to?(method.to_sym)
+      if view_context && helpers.respond_to?(method.to_sym)
         helpers.send method.to_sym, *args, **kwargs, &block
       else
         super
@@ -173,7 +179,7 @@ module Bridgetown
     end
 
     def respond_to_missing?(method, include_private = false)
-      helpers.respond_to?(method.to_sym, include_private) || super
+      (view_context && helpers.respond_to?(method.to_sym, include_private)) || super
     end
   end
 end

data/lib/bridgetown-core/concerns/site/configurable.rb

@@ -91,6 +91,8 @@ class Bridgetown::Site
     #   {Bridgetown.sanitized_path} method.
     # @return [Array<String>] Return an array of updated paths if multiple paths given.
     def in_source_dir(*paths)
+      # TODO: this operation is expensive across thousands of iterations. Look for ways
+      # to workaround use of this wherever possible...
       paths.reduce(source) do |base, path|
         Bridgetown.sanitized_path(base, path.to_s)
       end
@@ -146,6 +148,10 @@ class Bridgetown::Site
       @collections_path ||= dir_str.empty? ? source : in_source_dir(dir_str)
     end
 
+    def frontend_bundling_path
+      in_root_dir(".bridgetown-cache", "frontend-bundling")
+    end
+
     private
 
     # Disable Marshaling cache to disk in Safe Mode

data/lib/bridgetown-core/concerns/site/content.rb

@@ -67,7 +67,7 @@ class Bridgetown::Site
 
     # @return [Array<Bridgetown::Resource::TaxonomyType>]
     def taxonomy_types
-      @taxonomy_types ||= config.taxonomies.map do |label, key_or_metadata|
+      @taxonomy_types ||= config.taxonomies.to_h do |label, key_or_metadata|
         key = key_or_metadata
         tax_metadata = if key_or_metadata.is_a? Hash
                          key = key_or_metadata["key"]
@@ -79,7 +79,7 @@ class Bridgetown::Site
         [label, Bridgetown::Resource::TaxonomyType.new(
           site: self, label: label, key: key, metadata: tax_metadata
         ),]
-      end.to_h.with_dot_access
+      end.with_dot_access
     end
 
     # Get all loaded resources.
@@ -110,11 +110,11 @@ class Bridgetown::Site
       generated_pages << generated_page
     end
 
-    # Loads and memoizes the parsed Webpack manifest file (if available)
+    # Loads and memoizes the parsed frontend bundler manifest file (if available)
     # @return [Hash]
     def frontend_manifest
       @frontend_manifest ||= begin
-        manifest_file = in_root_dir(".bridgetown-webpack", "manifest.json")
+        manifest_file = File.join(frontend_bundling_path, "manifest.json")
 
         JSON.parse(File.read(manifest_file)) if File.exist?(manifest_file)
       end

data/lib/bridgetown-core/concerns/site/extensible.rb

@@ -56,5 +56,13 @@ class Bridgetown::Site
         c.new(config)
       end
     end
+
+    # Shorthand for registering a site hook via {Bridgetown::Hooks}
+    # @param event [Symbol] name of the event (`:pre_read`, `:post_render`, etc.)
+    # @yield the block will be called when the event is triggered
+    # @yieldparam site the site which triggered the event hook
+    def on(event, reloadable: false, &block)
+      Bridgetown::Hooks.register_one :site, event, reloadable: reloadable, &block
+    end
   end
 end

data/lib/bridgetown-core/concerns/site/processable.rb

@@ -23,9 +23,9 @@ class Bridgetown::Site
 
     # Reset all in-memory data and content.
     #
-
+    # @param soft [Boolean] if true, persist some state and do a light refresh of layouts and data
     # @return [void]
-    def reset(soft: false)
+    def reset(soft: false) # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
       self.time = Time.now
       if config["time"]
         self.time = Bridgetown::Utils.parse_date(
@@ -41,12 +41,31 @@ class Bridgetown::Site
       @documents = nil
       @docs_to_write = nil
       @liquid_renderer.reset
-      frontmatter_defaults.reset unless soft
+      tmp_cache.clear
+
+      if soft
+        refresh_layouts_and_data
+      else
+        frontmatter_defaults.reset
+        Bridgetown::Cache.clear_if_config_changed config
+      end
 
-      Bridgetown::Cache.clear_if_config_changed config unless soft
       Bridgetown::Hooks.trigger :site, (soft ? :after_soft_reset : :after_reset), self
     end
 
+    # Read layouts and merge any new data collection contents into the site data
+    def refresh_layouts_and_data
+      reader.read_layouts
+
+      collections.data.tap do |coll|
+        coll.resources.clear
+        coll.read
+        coll.merge_data_resources.each do |k, v|
+          data[k] = v # refresh site data
+        end
+      end
+    end
+
     # Read data from disk and load it into internal memory.
     # @return [void]
     def read

data/lib/bridgetown-core/concerns/site/ssr.rb

@@ -32,7 +32,7 @@ class Bridgetown::Site
       @ssr_enabled = true
     end
 
-    def ssr_setup(&block) # rubocop:disable Metrics/AbcSize
+    def ssr_setup
       config.serving = true
       Bridgetown::Hooks.trigger :site, :pre_read, self
       defaults_reader.tap do |d|
@@ -46,27 +46,12 @@ class Bridgetown::Site
       end
       Bridgetown::Hooks.trigger :site, :post_read, self
 
-      hook = block&.(self) # provide additional setup hook
+      yield self if block_given? # provide additional setup hook
       return if Bridgetown.env.production?
 
-      @ssr_reload_hook = hook if hook.is_a?(Proc) && hook.lambda?
       Bridgetown::Watcher.watch(self, config)
     end
 
-    def ssr_reload
-      reset soft: true
-      reader.read_layouts
-
-      collections.data.tap do |coll|
-        coll.resources.clear
-        coll.read
-        coll.merge_data_resources.each do |k, v|
-          data[k] = v
-        end
-      end
-      @ssr_reload_hook.() if @ssr_reload_hook.is_a?(Proc)
-    end
-
     def disable_ssr
       Bridgetown.logger.info "SSR:", "now disabled."
       @ssr_enabled = false

data/lib/bridgetown-core/configurations/minitesting.rb

@@ -82,7 +82,7 @@ create_file "plugins/test_output.rb" do
   <<~RUBY
     module TestOutput
       unless Bridgetown.env.development?
-        Bridgetown::Hooks.register :site, :post_write do
+        Bridgetown::Hooks.register_one :site, :post_write do
           # Load test suite to run on exit
           require "nokogiri"
           Dir["test/**/*.rb"].each { |file| require_relative("../\#{file}") }

data/lib/bridgetown-core/configurations/purgecss.rb

@@ -22,9 +22,10 @@ create_builder "purgecss.rb" do
               PURGE
               File.write(purgecss_file, config_js.strip)
             end
-            manifest_file = site.in_root_dir(".bridgetown-webpack", "manifest.json")
+            manifest_file = File.join(site.frontend_bundling_path, "manifest.json")
             if File.exist?(manifest_file)
               manifest = JSON.parse(File.read(manifest_file))
+              # TODO: make this work with esbuild too
               css_file = manifest["main.css"].split("/").last
               css_path = ["output", "_bridgetown", "static", "css", css_file].join("/")
               Bridgetown.logger.info "PurgeCSS", "Purging \#{css_file}"

data/lib/bridgetown-core/configurations/render/render.yaml.erb

@@ -5,6 +5,9 @@ services:
     buildCommand: bin/bridgetown deploy
     staticPublishPath: ./output
     pullRequestPreviewsEnabled: true
+    envVars:
+      - key: BRIDGETOWN_ENV
+        value: production
     headers:
       - path: /*
         name: X-Frame-Options

data/lib/bridgetown-core/configurations/stimulus.rb

@@ -4,25 +4,54 @@ require "fileutils"
 
 say "Installing Stimulus...", :green
 
-run("yarn add stimulus")
+run("yarn add @hotwired/stimulus")
+if Bridgetown::Utils.frontend_bundler_type == :webpack
+  run("yarn add @hotwired/stimulus-webpack-helpers")
+end
 
 say 'Adding Stimulus to "frontend/javascript/index.js"...', :magenta
 
 javascript_import do
-  <<~JS
-    import { Application } from "stimulus"
-    import { definitionsFromContext } from "stimulus/webpack-helpers"
-  JS
+  if Bridgetown::Utils.frontend_bundler_type == :esbuild
+    <<~JS
+      import { Application } from "@hotwired/stimulus"
+    JS
+  else
+    <<~JS
+      import { Application } from "@hotwired/stimulus"
+      import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
+    JS
+  end
 end
 
 javascript_dir = File.join("frontend", "javascript")
 
 append_to_file(File.join(javascript_dir, "index.js")) do
-  <<~JS
-    const application = Application.start()
-    const context = require.context("./controllers", true, /\.js$/)
-    application.load(definitionsFromContext(context))
-  JS
+  if Bridgetown::Utils.frontend_bundler_type == :esbuild
+    <<~JS
+
+      window.Stimulus = Application.start()
+
+      import controllers from "./controllers/**/*.{js,js.rb}"
+      Object.entries(controllers).forEach(([filename, controller]) => {
+        if (filename.includes("_controller.") || filename.includes("-controller.")) {
+          const identifier = filename.replace("./controllers/", "")
+            .replace(/[_\-]controller\..*$/, "")
+            .replace("_", "-")
+            .replace("/", "--")
+
+          Stimulus.register(identifier, controller.default)
+        }
+      })
+    JS
+  else
+    <<~JS
+
+      window.Stimulus = Application.start()
+      const context = require.context("./controllers", true, /\.js$/)
+      Stimulus.load(definitionsFromContext(context))
+    JS
+  end
 end
 
 controller_dir = File.join(javascript_dir, "controllers")
@@ -33,7 +62,7 @@ FileUtils.mkdir_p(controller_dir)
 say "Creating an example Stimulus Controller for you!...", :magenta
 create_file(File.join(controller_dir, "example_controller.js")) do
   <<~JS
-    import { Controller } from "stimulus"
+    import { Controller } from "@hotwired/stimulus"
     export default class extends Controller {
       connect() {
         console.log("Hello, Stimulus!", this.element)
@@ -46,4 +75,4 @@ say "Stimulus successfully added", :green
 
 say "To start adding controllers, visit the `./frontend/javascript/controllers/` directory", :blue
 say "Make sure your controllers follow the `[name]_controller.js` convention", :blue
-say 'For further reading, check out "https://stimulus.hotwire.dev/"', :blue
+say 'For further reading, check out "https://stimulus.hotwired.dev/"', :blue

data/lib/bridgetown-core/configurations/tailwindcss/css_imports.css

@@ -1,3 +1,8 @@
+/* If you need to add @import statements, do so up here */
+
+@import "jit-refresh.css"; /* triggers frontend rebuilds */
+
+/* Set up Tailwind imports */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

data/lib/bridgetown-core/configurations/tailwindcss.rb

@@ -11,15 +11,22 @@ unless File.exist?("postcss.config.js")
   return
 end
 
+say_status :tailwind, "Installing Tailwind CSS..."
+
 confirm = ask "This configuration will ovewrite your existing #{"postcss.config.js".bold.white}. Would you like to continue? [Yn]"
 return unless confirm.casecmp?("Y")
 
 run "yarn add -D tailwindcss"
 run "npx tailwindcss init"
 
-copy_file in_templates_dir("postcss.config.js"), "postcss.config.js", force: true
+gsub_file "tailwind.config.js", "content: [],", <<~JS.strip
+  content: [
+      './src/**/*.{html,md,liquid,erb,serb}',
+      './frontend/javascript/**/*.js',
+    ],
+JS
 
-run "bundle exec bridgetown configure purgecss"
+copy_file in_templates_dir("postcss.config.js"), "postcss.config.js", force: true
 
 if File.exist?("frontend/styles/index.css")
   prepend_to_file "frontend/styles/index.css",
@@ -29,4 +36,26 @@ else
   say File.read(in_templates_dir("/css_imports.css"))
 end
 
+create_file "frontend/styles/jit-refresh.css", "/* #{Time.now.to_i} */"
+
+create_builder "tailwind_jit.rb" do
+  <<~RUBY
+    class Builders::TailwindJit < SiteBuilder
+      def build
+        hook :site, :pre_reload do |_, paths|
+          # Don't trigger refresh if it's a frontend-only change
+          next if paths.length == 1 && paths.first.ends_with?("manifest.json")
+    
+          # Save out a comment file to trigger Tailwind's JIT
+          refresh_file = site.in_root_dir("frontend", "styles", "jit-refresh.css")
+          File.write refresh_file, "/* \#{Time.now.to_i} */"
+          throw :halt # don't continue the build, wait for watcher rebuild
+        end
+      end
+    end
+  RUBY
+end
+
+say_status :tailwind, "Tailwind CSS is now configured."
+
 # rubocop:enable all

data/lib/bridgetown-core/configurations/turbo/turbo_transitions.js

@@ -0,0 +1,48 @@
+document.addEventListener("turbo:visit", () => {
+  let main = document.querySelector("main");
+  if (main.dataset.turboTransition == "false") return;
+
+  let [movement, scale] = ["15px", "0.99"];
+
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    [movement, scale] = ["7px", "1"]
+  };
+
+  main.style.transformOrigin = "50% 0%";
+  main.dataset.animatingOut = true;
+
+  main.animate(
+    [
+      { opacity: 1, transform: "translateY(0px) scale(1)" },
+      { opacity: 0, transform: `translateY(${movement}) scale(${scale})` }
+    ],
+    { duration: 300, easing: "cubic-bezier(0.45, 0, 0.55, 1)" }
+  );
+
+  Promise.all(main.getAnimations().map(animation => animation.finished)).then(() => {
+    if (main.dataset.animatingOut) main.style.visibility = "hidden"
+  })
+});
+
+document.addEventListener("turbo:load", () => {
+  let main = document.querySelector("main");
+  if (main.dataset.turboTransition == "false") return;
+
+  let [movement, scale] = ["-10px", "0.99"];
+
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    [movement, scale] = ["-5px", "1"]
+  };
+
+  main.style.visibility = "visible";
+  main.style.transformOrigin = "50% 0%";
+  delete main.dataset.animatingOut;
+
+  main.animate(
+    [
+      { opacity: 0, transform: `translateY(${movement}) scale(${scale})` },
+      { opacity: 1, transform: "translateY(0px) scale(1)" }
+    ],
+    { duration: 150, easing: "cubic-bezier(0.45, 0, 0.55, 1)" }
+  )
+})