Removing mentions of Alpine.js (RIP)

docs/src/_data/site.js

@@ -1,7 +1,7 @@
 export default {
   title: "Basecoat",
   description: "A components library built with Tailwind CSS that works with any web stack.",
-  keywords: ["components", "component library", "component system", "UI", "UI kit", "shadcn", "shadcn/ui", "Tailwind CSS", "Tailwind", "CSS", "HTML", "Jinja", "Nunjucks", "Alpine.js"],
+  keywords: ["components", "component library", "component system", "UI", "UI kit", "shadcn", "shadcn/ui", "Tailwind CSS", "Tailwind", "CSS", "HTML", "Jinja", "Nunjucks", "JS", "JavaScript", "vanilla JS", "vanilla JavaScript"],
   author: {
     name: "Ronan Berder",
     x: "@hunvreus"

docs/src/_includes/partials/sidebar.njk

@@ -17,16 +17,8 @@
     "data-keep-mobile-sidebar-open": ""
   },
   popover_attrs={
-    "data-side": "right",
-    "data-align": "end",
-    "class": "w-80",
-    "x-init": "
-      if (window.innerWidth < 768) {
-        $el.setAttribute('data-side', 'top');
-        $el.setAttribute('data-align', 'start');
-        $el.classList.add('w-[271px]');
-      }
-    "
+    "data-side": "top",
+    "class": "w-[271px] md:w-[239px]"
   }
 ) %}
 <div class="grid gap-4">

docs/src/assets/styles.css

@@ -466,6 +466,9 @@
   .min-h-\[350px\] {
     min-height: 350px;
   }
+  .w-\(--sidebar-mobile-width\) {
+    width: var(--sidebar-mobile-width);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -502,6 +505,9 @@
   .w-\[271px\] {
     width: 271px;
   }
+  .w-\[calc\(100vw-24px\)\] {
+    width: calc(100vw - 24px);
+  }
   .w-full {
     width: 100%;
   }
@@ -1273,6 +1279,16 @@
       margin-left: calc(var(--spacing) * 4);
     }
   }
+  .md\:w-\(--sidebar-width\) {
+    @media (width >= 48rem) {
+      width: var(--sidebar-width);
+    }
+  }
+  .md\:w-\[239px\] {
+    @media (width >= 48rem) {
+      width: 239px;
+    }
+  }
   .md\:max-w-\[200px\] {
     @media (width >= 48rem) {
       max-width: 200px;

docs/src/introduction.njk

@@ -25,7 +25,7 @@ toc:
   <p><b>That's where Basecoat comes in.</b> It gives you modern, accessible components with the simplicity of plain HTML and Tailwind. Basecoat is:</p>
 
   <ul>
-    <li><b>Lightweight</b>: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.</li>
+    <li><b>Lightweight</b>: no runtime JS, just CSS and a tiny bit of vanilla JavaScript for the more interactive components.</li>
     <li><b>Easy to use</b>: add classes like <code>btn</code> or <code>input</code> and you're done.</li>
     <li><b>Framework-agnostic</b>: works with any backend or frontend stack.</li>
     <li><b>Accessible</b>: components follow accessibility best practices.</li>
@@ -42,7 +42,7 @@ toc:
 <div class="prose">
   <p>Add a single CSS file to your Tailwind setup. Use components by dropping in simple classes like <code>btn</code>, <code>form</code>, or <code>card</code>.</p>
 
-  <p>Some components (like modals or dropdowns) use a tiny bit of Alpine.js. You can skip it if you don't need interactivity.</p>
+  <p>Some components (like modals or dropdowns) use a tiny bit of vanilla JavaScript. You can skip it if you don't need interactivity.</p>
 
   <p>There's also a CLI to help you scaffold components and get set up fast.</p>