Update documentation; add org file for button

src/component/accordion.org

@@ -1,7 +1,7 @@
 #+title: Using cl-sbt/accordion Macros in a Web Application
 #+author: Marcus Kammer
 #+email: marcus.kammer@mailbox.org
-#+date: [2023-09-01 Fri]
+#+date: [2023-09-02 Sat]
 * Introduction
 
 The accordion component is a popular UI element that helps to organize and
@@ -126,25 +126,3 @@ This example demonstrates how to integrate the cl-sbt/accordion macros into a
 web application to create an interactive accordion component. The macros help
 generate the necessary HTML structure for the accordion, which allows users to
 navigate through content conveniently.
-
-To get started, follow these steps:
-
-1. Make sure you have included the Bootstrap CSS and JavaScript libraries in
-   your HTML. Also, include the Spinneret library for HTML generation.
-
-2. Define your web application package and import the necessary packages,
-   including cl-sbt/accordion.
-
-3. Implement the `generate-accordion-page` function. This function generates an
-   HTML page with an accordion using the cl-sbt/accordion macros.
-
-4. Call the `generate-accordion-page` function within your application's logic
-   to generate the HTML page with the accordion.
-
-5. Bootstrap's JavaScript library will handle the expansion and collapse
-   animations of the accordion content, providing an interactive user
-   experience.
-
-By using these macros, you can easily create accordion components that allow
-users to navigate and view content in a user-friendly manner within your web
-application.

src/component/button.lisp

@@ -1,31 +1,7 @@
-;; https://getbootstrap.com/docs/5.3/components/buttons/
-
-;; The Bootstrap button component is a versatile and customizable interface
-;; element used in numerous contexts across web applications. These buttons are
-;; often utilized for various actions and functionalities such as form
-;; submissions, toggling visibility of content, triggering modals, and
-;; initiating other interactive behaviors.
-
-;; A Bootstrap button is typically defined by an HTML button element or an a
-;; element styled with Bootstrap's pre-defined CSS classes.
-
-;; Here are some key features of the Bootstrap button component:
-
-;; Button styles: Bootstrap includes several built-in button styles that
-;; indicate different types of actions, including 'primary', 'secondary',
-;; 'success', 'danger', 'warning', 'info', 'light', 'dark', and 'link'. These
-;; styles control the color of the button.
-
-;; Button sizes: Bootstrap buttons can be resized using the 'btn-lg' or
-;; 'btn-sm' classes for larger and smaller buttons, respectively. There's also
-;; a 'btn-block' class that makes a button take up the full width of its parent
-;; container.
-
-;; Button states: Buttons can also have different states like 'active' and
-;; 'disabled'.
-
-;; Outline buttons: Bootstrap also provides 'outline' button styles which have
-;; transparent backgrounds and a colored border and text.
+;;;; button.lisp
+;;;;
+;;;; This file defines a package for generating Bootstrap button components
+;;;; using Common Lisp macros.
 
 (defpackage cl-sbt/btn
   (:use :cl)

src/component/button.org

@@ -0,0 +1,75 @@
+#+title: Using cl-sbt/button Macros in a Web Application
+#+author: Marcus Kammer
+#+email: marcus.kammer@mailbox.org
+#+date: [2023-09-02 Sat]
+* Introduction
+
+Buttons are fundamental elements in modern user interfaces. They are essential
+for triggering actions or navigating within or between pages. They come in
+various styles and sizes to fit different contexts and user needs. This
+document will cover how to implement button elements in a web application using
+the cl-sbt/button macros.
+
+** Bootstrap Buttons
+
+[[https://getbootstrap.com/docs/][Bootstrap]] is a commonly used front-end framework that provides a variety of UI
+components, including [[https://getbootstrap.com/docs/5.3/components/buttons/][buttons]]. Using Bootstrap, you can easily style buttons
+and add functionality without the need for extensive custom CSS or JavaScript.
+
+*** How Bootstrap Buttons Work
+
+Bootstrap buttons are usually generated using HTML and get styled via CSS
+classes provided by the framework. The Bootstrap JavaScript library can add
+interactivity to buttons, such as states or tooltips. Here's what to know:
+
+- Buttons can be hyperlinks, button elements, or input elements.
+- Bootstrap provides various classes to change the button's appearance.
+- You can easily hook JavaScript events to Bootstrap buttons for interactivity.
+
+* Integrating cl-sbt/btn Macros
+
+To implement Bootstrap-style buttons in your Common Lisp web application, the
+cl-sbt/button macros can be used. These macros generate the HTML structure
+required for different types of Bootstrap buttons.
+
+#+begin_src lisp
+  (defpackage my-web-app
+    (:use :cl :cl-sbt/btn)
+    (:export :generate-button-page))
+
+  (in-package :my-web-app)
+
+  (defun generate-button-page ()
+    "Generates an HTML page with various buttons using cl-sbt/button macros."
+    (spinneret:with-html-string
+      (:html
+       (:head
+        (:title "Button Examples")
+        ;; Include Bootstrap CSS and JavaScript links here
+        )
+       (:body
+        (:h1 "Button Examples")
+        (btn-primary () "Primary")
+        ;; Include Bootstrap JavaScript initialization script here
+        ))))
+
+  (generate-button-page)
+#+end_src
+
+#+RESULTS:
+#+begin_example
+<html lang=en>
+ <head>
+  <meta charset=UTF-8>
+  <title>Button Examples</title>
+ </head>
+ <body>
+  <h1>Button Examples</h1>
+  <button class="btn btn-primary" type=button>Primary</button>
+ </body>
+</html>
+#+end_example
+
+This example demonstrates the integration of the cl-sbt/button macros into a
+web application. The macros assist in generating the required HTML for
+different types of Bootstrap buttons.