Bump to @shoelace-style/shoelace version to 2.0.0-beta.80 (bridgetown…

…rb#612)

* Bump shoelace to beta 80 and lock esbuild.

* Replace type="…" to variant="…" for sl-button

bridgetown-website/frontend/javascript/index.js.rb

@@ -6,7 +6,6 @@
 import '@shoelace-style/shoelace/dist/components/button/button.js'
 import '@shoelace-style/shoelace/dist/components/card/card.js'
 import '@shoelace-style/shoelace/dist/components/dialog/dialog.js'
-import '@shoelace-style/shoelace/dist/components/form/form.js'
 import '@shoelace-style/shoelace/dist/components/icon/icon.js'
 import '@shoelace-style/shoelace/dist/components/input/input.js'
 import '@shoelace-style/shoelace/dist/components/tag/tag.js'

bridgetown-website/package.json

@@ -9,7 +9,7 @@
   },
   "devDependencies": {
     "@linthtml/linthtml": "^0.8.4",
-    "esbuild": "^0.14.2",
+    "esbuild": "~0.14.54",
     "glob": "^7.2.0",
     "postcss": "^8.4.4",
     "postcss-flexbugs-fixes": "^5.0.2",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@hotwired/turbo": "^7.1.0",
     "@ruby2js/esbuild-plugin": "^0.0.3",
-    "@shoelace-style/shoelace": "^2.0.0-beta.62",
+    "@shoelace-style/shoelace": "^2.0.0-beta.82",
     "bridgetown-quick-search": "1.1.3",
     "hotkeys-js": "^3.8.7",
     "smoothscroll-polyfill": "^0.4.4"

bridgetown-website/src/_components/post_card.serb

@@ -17,7 +17,7 @@
     </ui-label>
 
     <a href="{{ @post.relative_url }}">
-      <sl-button type="primary">
+      <sl-button variant="primary">
         <sl-icon slot="prefix" library="remixicon" name="document/article-fill"></sl-icon>
         Read…
       </sl-button>

bridgetown-website/src/_docs/components.md

@@ -70,19 +70,19 @@ Ready to dive more into a particular component flavor? Let's go!
 
 <p style="margin-top:2em; display:flex; gap:1em; justify-content:center">
   <a href="/docs/components/liquid">
-    <sl-button type="primary" outline>
+    <sl-button variant="primary" outline>
       Liquid
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button>
   </a>
   <a href="/docs/components/ruby">
-    <sl-button type="primary" outline>
+    <sl-button variant="primary" outline>
       Ruby
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button>
   </a>
   <a href="/docs/components/lit">
-    <sl-button type="primary" outline>
+    <sl-button variant="primary" outline>
       Lit
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button>

bridgetown-website/src/_docs/template-engines.md

@@ -15,13 +15,13 @@ For documentation on how to use Liquid or Ruby-based syntax in Bridgetown conten
 
 <p style="margin-top:2em; display:flex; gap:1em; justify-content:center">
   <a href="/docs/template-engines/liquid">
-    <sl-button type="primary" outline>
+    <sl-button variant="primary" outline>
       Liquid
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button>
   </a>
   <a href="/docs/template-engines/erb-and-beyond">
-    <sl-button type="primary" outline>
+    <sl-button variant="primary" outline>
       ERB, Serbea, & More
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button>

bridgetown-website/src/_docs/template-engines/liquid.md

@@ -19,13 +19,13 @@ In addition to Liquid's standard suite of filters and tags, Bridgetown provides
 
 <p style="margin-top:2em; display:flex; gap:1em; justify-content:center">
   <a href="/docs/liquid/filters">
-    <sl-button type="primary" outline>
+    <sl-button variant="primary" outline>
       Filters List
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button>
   </a>
   <a href="/docs/liquid/tags">
-    <sl-button type="primary" outline>
+    <sl-button variant="primary" outline>
       Tags List
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button>

bridgetown-website/src/_layouts/docs.serb

@@ -23,7 +23,7 @@ layout: default
 
   {% if url_sections.size > 3 %}
     <p style="text-align:center; margin-top:4rem">
-      <a href="/docs/{{ resource.data.back_to || resource.data.category }}"><sl-button type="primary" size="small" outline>
+      <a href="/docs/{{ resource.data.back_to || resource.data.category }}"><sl-button variant="primary" size="small" outline>
         Back to {{ resource.data.category | titleize }}
         <sl-icon slot="prefix" library="remixicon" name="system/arrow-up-s-fill"></sl-icon>
       </sl-button></a>
@@ -37,7 +37,7 @@ layout: default
     {% next_page = collections.docs.resources.find { _1.data.order == next_order } %}
     {% if next_page %}
       <p style="text-align:right; margin-top:4rem">
-        <a href="{{ next_page.relative_url }}"><sl-button type="primary" size="small" outline>
+        <a href="{{ next_page.relative_url }}"><sl-button variant="primary" size="small" outline>
           {{ next_page.data.title }}
           <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
         </sl-button></a>

bridgetown-website/src/_layouts/post.serb

@@ -26,7 +26,7 @@ layout: default
     {%= yield %}
 
     <p style="margin-top:2.5em; text-align:center">
-      <sl-button type="primary" size="small" pill outline onclick='
+      <sl-button variant="primary" size="small" pill outline onclick='
         navigator.share({url: location.href})
       '>
         <sl-icon slot="suffix" library="remixicon" name="system/share-box"></sl-icon>

bridgetown-website/src/_pages/authors/[author].serb

@@ -43,13 +43,13 @@ prototype:
 
 <p style="text-align:right; margin-top:4rem; display:flex; gap:1em; justify-content:space-around">
   {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path }}"><sl-button type="primary" size="small" outline>
+    <a href="{{ paginator.previous_page_path }}"><sl-button variant="primary" size="small" outline>
       Previous Page
       <sl-icon slot="prefix" library="remixicon" name="system/arrow-left-s-fill"></sl-icon>
     </sl-button></a>
   {% end %}
   {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path }}"><sl-button type="primary" size="small" outline>
+    <a href="{{ paginator.next_page_path }}"><sl-button variant="primary" size="small" outline>
       Next Page
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button></a>

bridgetown-website/src/_pages/blog.serb

@@ -28,13 +28,13 @@ paginate:
 
 <p style="text-align:right; margin-top:4rem; display:flex; gap:1em; justify-content:space-around">
   {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path }}"><sl-button type="primary" size="small" outline>
+    <a href="{{ paginator.previous_page_path }}"><sl-button variant="primary" size="small" outline>
       Previous Page
       <sl-icon slot="prefix" library="remixicon" name="system/arrow-left-s-fill"></sl-icon>
     </sl-button></a>
   {% end %}
   {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path }}"><sl-button type="primary" size="small" outline>
+    <a href="{{ paginator.next_page_path }}"><sl-button variant="primary" size="small" outline>
       Next Page
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button></a>

bridgetown-website/src/_pages/blog/[category].serb

@@ -27,13 +27,13 @@ prototype:
 
 <p style="text-align:right; margin-top:4rem; display:flex; gap:1em; justify-content:space-around">
   {% if paginator.previous_page %}
-    <a href="{{ paginator.previous_page_path }}"><sl-button type="primary" size="small" outline>
+    <a href="{{ paginator.previous_page_path }}"><sl-button variant="primary" size="small" outline>
       Previous Page
       <sl-icon slot="prefix" library="remixicon" name="system/arrow-left-s-fill"></sl-icon>
     </sl-button></a>
   {% end %}
   {% if paginator.next_page %}
-    <a href="{{ paginator.next_page_path }}"><sl-button type="primary" size="small" outline>
+    <a href="{{ paginator.next_page_path }}"><sl-button variant="primary" size="small" outline>
       Next Page
       <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
     </sl-button></a>

bridgetown-website/src/_pages/index.md

@@ -22,7 +22,7 @@ While your competitors are wrestling with complicated build tools, limited progr
 {:style="margin-left:auto; margin-right:auto; max-width:43em"}
 
 <p>
-  <a href="/docs"><sl-button type="primary" pill size="large">
+  <a href="/docs"><sl-button variant="primary" pill size="large">
     <sl-icon slot="prefix" library="remixicon" name="development/code-box"></sl-icon>
     Get Started Today
   </sl-button></a>
@@ -132,7 +132,7 @@ Like the Ruby language itself, **Bridgetown** is optimized for [web developer ha
 
 
 <p>
-  <a href="/docs"><sl-button type="primary" outline>
+  <a href="/docs"><sl-button variant="primary" outline>
     <sl-icon slot="prefix" library="remixicon" name="development/code-box"></sl-icon>
     Install Now
   </sl-button></a>
@@ -181,7 +181,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   All of the features you’ve grown to love from the world of static site generation. Front Matter. Markdown. Easy permalinks. File-based content deployment with Git history and atomic builds. Data transformation pipelines. Paginated archives. It's all here and ready to roll.
 
-  <p><a href="/docs/core-concepts"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/core-concepts"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -194,7 +194,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   Set up collections for whatever types of content you need. Define taxonomies. Create relationships between different pieces of content. And when you need to, easily generate new content at build-time (or in real-time!) by connecting to a Headless CMS and other web APIs.
 
-  <p><a href="/docs/resources"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/resources"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -207,7 +207,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   Actually more than one. Actually three! Liquid. ERB. Serbea. Increasing levels of power and sophistication with each step. Liquid, created by Shopify, is easy to get started with. Upgrade to ERB for the same syntax Ruby on Rails employs. Or choose Serbea, a superset of ERB which brings the best of Ruby and Liquid templates together.
 
-  <p><a href="/docs/template-engines"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/template-engines"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -220,7 +220,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   Best practices in modern web design revolve around components, discrete building blocks of visual and semantic functionality. Use Bridgetown components for a modular approach to your site design, pull in GitHub's ViewComponent for even more power, or sprinkle frontend web components on top for that extra sizzle.
 
-  <p><a href="/docs/components"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/components"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -233,7 +233,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   Some projects don't need an SSR backend. But for the ones that do, Bridgetown's got you covered. It comes with Roda baked-in, one of the fastest Ruby web frameworks in the biz. And when we say "baked-in", we literally mean it. Create a regular view template and add a dynamic route block at the top which can handle all the requests you'll throw at it. Need even more power? Mount a Rails API using Rack. All in one monorepo. Now that's a stack.
 
-  <p><a href="/docs/routes"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/routes"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -246,7 +246,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   Bridgetown sets you up with blazing-fast, zero-config esbuild & PostCSS. Or pick Webpack if you prefer. Either way, add modern JavaScript libraries like Turbo, Stimulus, Lit, even Preact with a simple command. Install comprehensive component libraries such as Shoelace for rapid UI development. Go big with interactive functionality or stay minimalist for that “zero JS" experience. It's totally your choice.
 
-  <p><a href="/docs/frontend-assets"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/frontend-assets"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -259,7 +259,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   Bridgetown might just be the easiest way to get started learning and writing Ruby code. Craft custom plugins to enhance your site build and content with a straightforward DSL and make huge strides in only a few lines! If you already have experience writing Rails apps, you should feel right at home. (Yes, we love Active Support too!)
 
-  <p><a href="/docs/plugins"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/plugins"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -272,7 +272,7 @@ Bridgetown's philosophy is if we take the time to build what you'll actually nee
 
   For static-only projects, you can deploy Bridgetown sites literally anywhere which supports HTML/CSS/JS files. Jamstack-style hosts are great options for performance and security. For a full-stack production setup with database access, Redis caching, and all the rest, Render is our recommended hosting platform.
 
-  <p><a href="/docs/deployment"><sl-button type="primary" size="small" outline pill>
+  <p><a href="/docs/deployment"><sl-button variant="primary" size="small" outline pill>
     Read the Docs
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a></p>
@@ -282,7 +282,7 @@ Then when you're ready, [bundled configurations](/docs/bundled-configurations) a
 {:style="text-align:center; margin-top:3rem; margin-left:auto; margin-right:auto; max-width:50em"}
 
 <p>
-  <a href="/docs"><sl-button type="primary" pill size="large">
+  <a href="/docs"><sl-button variant="primary" pill size="large">
     Start Your Build Today
     <sl-icon slot="suffix" library="remixicon" name="system/arrow-right-s-fill"></sl-icon>
   </sl-button></a>

bridgetown-website/src/_partials/_footer.serb

@@ -45,7 +45,7 @@
 
       <p>
         <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fbridgetownrb.com&via={{ site.metadata.twitter }}&text=Check%20out%20this%20awesome%20new%20static%20site%20generator%20built%20in%20Ruby%21&hashtags=SpinUpBridgetown%2CJamstack">
-          <sl-button type="primary" size="small">
+          <sl-button variant="primary" size="small">
             <sl-icon slot="prefix" library="remixicon" name="logos/twitter-fill"></sl-icon>
             Tweet
           </sl-button>
@@ -58,7 +58,7 @@
 
       <p>
         <a href="/feed.xml">
-          <sl-button type="warning" size="small">
+          <sl-button variant="warning" size="small">
             <sl-icon slot="prefix" library="remixicon" name="device/rss-fill"></sl-icon>
             News Feed
           </sl-button>