diff --git a/themes/hugo-mod-bootstrap-scss/LICENSE b/themes/hugo-mod-bootstrap-scss/LICENSE new file mode 100644 index 0000000..ac1fc7e --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020 GoHugo.io + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/themes/hugo-mod-bootstrap-scss/README.md b/themes/hugo-mod-bootstrap-scss/README.md new file mode 100644 index 0000000..bf06229 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/README.md @@ -0,0 +1,91 @@ +[![Netlify Status](https://api.netlify.com/api/v1/badges/1afd337b-0273-4c6e-aa6f-e08bdde9833b/deploy-status)](https://app.netlify.com/sites/hugo-mod-bootstrap-scss/deploys) +  [Test Site](https://hugo-mod-bootstrap-scss.netlify.app/) + +This is a [Hugo module](https://gohugo.io/hugo-modules/) that packages the [Bootstrap v5](https://getbootstrap.com/) SCSS and JavaScript source ready to be used in Hugo. + +For Bootstrap v4, see [the v4 branch](https://github.com/gohugoio/hugo-mod-bootstrap-scss/tree/v4). + +You need the Hugo extended version and [Go](https://golang.org/dl/) to use this component. + +## Use + +Add the component to your Hugo site's config: + +```toml +[module] +[[module.imports]] +path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5" +``` + +### SCSS + +The Bootstrap SCSS will be mounted in `assets/scss/bootstrap`, so you can then import either all: + +```scss +@import "bootstrap/bootstrap"; +``` + +Or only what you need: + +```scss +// Configuration +@import "bootstrap/functions"; +@import "bootstrap/variables"; +@import "bootstrap/mixins"; +@import "bootstrap/utilities"; + +// Layout & components +@import "bootstrap/root"; +@import "bootstrap/reboot"; +@import "bootstrap/type"; +@import "bootstrap/images"; +@import "bootstrap/containers"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; +@import "bootstrap/transitions"; +@import "bootstrap/dropdown"; +@import "bootstrap/button-group"; +@import "bootstrap/nav"; +@import "bootstrap/navbar"; +@import "bootstrap/card"; +@import "bootstrap/accordion"; +@import "bootstrap/breadcrumb"; +@import "bootstrap/pagination"; +@import "bootstrap/badge"; +@import "bootstrap/alert"; +@import "bootstrap/progress"; +@import "bootstrap/list-group"; +@import "bootstrap/close"; +@import "bootstrap/toasts"; +@import "bootstrap/modal"; +@import "bootstrap/tooltip"; +@import "bootstrap/popover"; +@import "bootstrap/carousel"; +@import "bootstrap/spinners"; +@import "bootstrap/offcanvas"; + +// Helpers +@import "bootstrap/helpers"; + +// Utilities +@import "bootstrap/utilities/api"; +``` + +### JavaScript + +See the [Example Site](./exampleSite). + +## Versions + +This repository will be versioned following https://github.com/bep/semverpair + +## How to Upgrade Bootstrap + +1. Checkout the relevant branch (`main`=latest=Bootstrap 5, `v4`=Bootstrap 4) +1. Create a PR branch +1. Run `hugo mod get -u github.com/twbs/bootstrap` +1. Verify that `go.mod` is updated with correct version (run `hugo mod graph`). +1. Do `cd exampleSite` and run `hugo server` and make sure it works (and that `github.com/twbs/bootstrap` version is as expected in the table). +1. Create a Pull Request and verify that it builds and that the Netlify preview works. diff --git a/themes/hugo-mod-bootstrap-scss/assets/scss/bootstrap/_vendor/_rfs.scss b/themes/hugo-mod-bootstrap-scss/assets/scss/bootstrap/_vendor/_rfs.scss new file mode 100644 index 0000000..614c6bd --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/assets/scss/bootstrap/_vendor/_rfs.scss @@ -0,0 +1,348 @@ +// stylelint-disable scss/dimension-no-non-numeric-values + +// SCSS RFS mixin +// +// Automated responsive values for font sizes, paddings, margins and much more +// +// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE) + +// Configuration + +// Base value +$rfs-base-value: 1.25rem !default; +$rfs-unit: rem !default; + +@if $rfs-unit != rem and $rfs-unit != px { + @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`."; +} + +// Breakpoint at where values start decreasing if screen width is smaller +$rfs-breakpoint: 1200px !default; +$rfs-breakpoint-unit: px !default; + +@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem { + @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; +} + +// Resize values based on screen height and width +$rfs-two-dimensional: false !default; + +// Factor of decrease +$rfs-factor: 10 !default; + +@if type-of($rfs-factor) != number or $rfs-factor <= 1 { + @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; +} + +// Mode. Possibilities: "min-media-query", "max-media-query" +$rfs-mode: min-media-query !default; + +// Generate enable or disable classes. Possibilities: false, "enable" or "disable" +$rfs-class: false !default; + +// 1 rem = $rfs-rem-value px +$rfs-rem-value: 16 !default; + +// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 +$rfs-safari-iframe-resize-bug-fix: false !default; + +// Disable RFS by setting $enable-rfs to false +$enable-rfs: true !default; + +// Cache $rfs-base-value unit +$rfs-base-value-unit: unit($rfs-base-value); + +@function divide($dividend, $divisor, $precision: 10) { + $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1); + $dividend: abs($dividend); + $divisor: abs($divisor); + @if $dividend == 0 { + @return 0; + } + @if $divisor == 0 { + @error "Cannot divide by 0"; + } + $remainder: $dividend; + $result: 0; + $factor: 10; + @while ($remainder > 0 and $precision >= 0) { + $quotient: 0; + @while ($remainder >= $divisor) { + $remainder: $remainder - $divisor; + $quotient: $quotient + 1; + } + $result: $result * 10 + $quotient; + $factor: $factor * .1; + $remainder: $remainder * 10; + $precision: $precision - 1; + @if ($precision < 0 and $remainder >= $divisor * 5) { + $result: $result + 1; + } + } + $result: $result * $factor * $sign; + $dividend-unit: unit($dividend); + $divisor-unit: unit($divisor); + $unit-map: ( + "px": 1px, + "rem": 1rem, + "em": 1em, + "%": 1% + ); + @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) { + $result: $result * map-get($unit-map, $dividend-unit); + } + @return $result; +} + +// Remove px-unit from $rfs-base-value for calculations +@if $rfs-base-value-unit == px { + $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1); +} +@else if $rfs-base-value-unit == rem { + $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value)); +} + +// Cache $rfs-breakpoint unit to prevent multiple calls +$rfs-breakpoint-unit-cache: unit($rfs-breakpoint); + +// Remove unit from $rfs-breakpoint for calculations +@if $rfs-breakpoint-unit-cache == px { + $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1); +} +@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" { + $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value)); +} + +// Calculate the media query value +$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}); +$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width); +$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height); + +// Internal mixin used to determine which media query needs to be used +@mixin _rfs-media-query { + @if $rfs-two-dimensional { + @if $rfs-mode == max-media-query { + @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { + @content; + } + } + @else { + @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) { + @content; + } + } + } + @else { + @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) { + @content; + } + } +} + +// Internal mixin that adds disable classes to the selector if needed. +@mixin _rfs-rule { + @if $rfs-class == disable and $rfs-mode == max-media-query { + // Adding an extra class increases specificity, which prevents the media query to override the property + &, + .disable-rfs &, + &.disable-rfs { + @content; + } + } + @else if $rfs-class == enable and $rfs-mode == min-media-query { + .enable-rfs &, + &.enable-rfs { + @content; + } + } @else { + @content; + } +} + +// Internal mixin that adds enable classes to the selector if needed. +@mixin _rfs-media-query-rule { + + @if $rfs-class == enable { + @if $rfs-mode == min-media-query { + @content; + } + + @include _rfs-media-query () { + .enable-rfs &, + &.enable-rfs { + @content; + } + } + } + @else { + @if $rfs-class == disable and $rfs-mode == min-media-query { + .disable-rfs &, + &.disable-rfs { + @content; + } + } + @include _rfs-media-query () { + @content; + } + } +} + +// Helper function to get the formatted non-responsive value +@function rfs-value($values) { + // Convert to list + $values: if(type-of($values) != list, ($values,), $values); + + $val: ""; + + // Loop over each value and calculate value + @each $value in $values { + @if $value == 0 { + $val: $val + " 0"; + } + @else { + // Cache $value unit + $unit: if(type-of($value) == "number", unit($value), false); + + @if $unit == px { + // Convert to rem if needed + $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value); + } + @else if $unit == rem { + // Convert to px if needed + $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value); + } @else { + // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value + $val: $val + " " + $value; + } + } + } + + // Remove first space + @return unquote(str-slice($val, 2)); +} + +// Helper function to get the responsive value calculated by RFS +@function rfs-fluid-value($values) { + // Convert to list + $values: if(type-of($values) != list, ($values,), $values); + + $val: ""; + + // Loop over each value and calculate value + @each $value in $values { + @if $value == 0 { + $val: $val + " 0"; + } @else { + // Cache $value unit + $unit: if(type-of($value) == "number", unit($value), false); + + // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value + @if not $unit or $unit != px and $unit != rem { + $val: $val + " " + $value; + } @else { + // Remove unit from $value for calculations + $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value))); + + // Only add the media query if the value is greater than the minimum value + @if abs($value) <= $rfs-base-value or not $enable-rfs { + $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px); + } + @else { + // Calculate the minimum value + $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor); + + // Calculate difference between $value and the minimum value + $value-diff: abs($value) - $value-min; + + // Base value formatting + $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px); + + // Use negative value if needed + $min-width: if($value < 0, -$min-width, $min-width); + + // Use `vmin` if two-dimensional is enabled + $variable-unit: if($rfs-two-dimensional, vmin, vw); + + // Calculate the variable width between 0 and $rfs-breakpoint + $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; + + // Return the calculated value + $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")"; + } + } + } + } + + // Remove first space + @return unquote(str-slice($val, 2)); +} + +// RFS mixin +@mixin rfs($values, $property: font-size) { + @if $values != null { + $val: rfs-value($values); + $fluid-val: rfs-fluid-value($values); + + // Do not print the media query if responsive & non-responsive values are the same + @if $val == $fluid-val { + #{$property}: $val; + } + @else { + @include _rfs-rule () { + #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val); + + // Include safari iframe resize fix if needed + min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); + } + + @include _rfs-media-query-rule () { + #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val); + } + } + } +} + +// Shorthand helper mixins +@mixin font-size($value) { + @include rfs($value); +} + +@mixin padding($value) { + @include rfs($value, padding); +} + +@mixin padding-top($value) { + @include rfs($value, padding-top); +} + +@mixin padding-right($value) { + @include rfs($value, padding-right); +} + +@mixin padding-bottom($value) { + @include rfs($value, padding-bottom); +} + +@mixin padding-left($value) { + @include rfs($value, padding-left); +} + +@mixin margin($value) { + @include rfs($value, margin); +} + +@mixin margin-top($value) { + @include rfs($value, margin-top); +} + +@mixin margin-right($value) { + @include rfs($value, margin-right); +} + +@mixin margin-bottom($value) { + @include rfs($value, margin-bottom); +} + +@mixin margin-left($value) { + @include rfs($value, margin-left); +} \ No newline at end of file diff --git a/themes/hugo-mod-bootstrap-scss/config.toml b/themes/hugo-mod-bootstrap-scss/config.toml new file mode 100644 index 0000000..d648029 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/config.toml @@ -0,0 +1,21 @@ +[module] +[module.hugoVersion] +extended = true +[[module.mounts]] +# Workaround for https://github.com/gohugoio/hugo/issues/6945 +source = "assets/scss/bootstrap/_vendor" +target = "assets/scss/bootstrap/vendor" +[[module.mounts]] +source = "assets" +target = "assets" +[[module.imports]] +ignoreConfig = true +path = "github.com/twbs/bootstrap" +[[module.imports.mounts]] +source = "scss" +target = "assets/scss/bootstrap" +[[module.imports.mounts]] +source = "js" +target = "assets/js/bootstrap" +[[module.imports]] +path = "github.com/gohugoio/hugo-mod-jslibs-dist/popperjs" diff --git a/themes/hugo-mod-bootstrap-scss/exampleSite/assets/js/index.js b/themes/hugo-mod-bootstrap-scss/exampleSite/assets/js/index.js new file mode 100644 index 0000000..8940461 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/exampleSite/assets/js/index.js @@ -0,0 +1,22 @@ +// Import the Bootstrap components we want to use. +// See https://github.com/twbs/bootstrap/blob/main/js/index.umd.js +import Toast from 'js/bootstrap/src/toast'; +import Popover from 'js/bootstrap/src/popover'; +import Button from 'js/bootstrap/src/button.js'; +import Carousel from 'js/bootstrap/src/carousel.js'; + +(function () { + let toastElList = [].slice.call(document.querySelectorAll('.toast')); + let toastList = toastElList.map(function (toastEl) { + return new Toast(toastEl); + }); + + toastList.forEach(function (toast) { + toast.show(); + }); + + let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); + popoverTriggerList.map(function (popoverTriggerEl) { + return new Popover(popoverTriggerEl); + }); +})(); diff --git a/themes/hugo-mod-bootstrap-scss/exampleSite/assets/scss/styles.scss b/themes/hugo-mod-bootstrap-scss/exampleSite/assets/scss/styles.scss new file mode 100644 index 0000000..575f1a8 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/exampleSite/assets/scss/styles.scss @@ -0,0 +1,5 @@ +@import "bootstrap/bootstrap"; + +.bd-placeholder-img-lg { + @include font-size(5.5rem); +} diff --git a/themes/hugo-mod-bootstrap-scss/exampleSite/config.toml b/themes/hugo-mod-bootstrap-scss/exampleSite/config.toml new file mode 100644 index 0000000..59972ac --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/exampleSite/config.toml @@ -0,0 +1,14 @@ + +baseURL = "https://example.com" +disableKinds = ["page", "section", "taxonomy", "term"] + +[outputs] +home = ["HTML"] + +[module] +[module.hugoVersion] +# We use hugo.Deps to list dependencies, which was added in Hugo 0.92.0 +min = "0.92.0" + +[[module.imports]] +path="github.com/gohugoio/hugo-mod-bootstrap-scss/v5" \ No newline at end of file diff --git a/themes/hugo-mod-bootstrap-scss/exampleSite/go.mod b/themes/hugo-mod-bootstrap-scss/exampleSite/go.mod new file mode 100644 index 0000000..a29be84 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/exampleSite/go.mod @@ -0,0 +1,9 @@ +module github.com/gohugoio/hugo-mod-bootstrap-scss/exampleSite/v5 + +go 1.17 + +require ( + github.com/gohugoio/hugo-mod-bootstrap-scss/v5 v5.90100.90300 // indirect +) + +replace github.com/gohugoio/hugo-mod-bootstrap-scss/v5 => ../ diff --git a/themes/hugo-mod-bootstrap-scss/exampleSite/go.sum b/themes/hugo-mod-bootstrap-scss/exampleSite/go.sum new file mode 100644 index 0000000..c6f237f --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/exampleSite/go.sum @@ -0,0 +1,8 @@ +github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 h1:GZxx4Hc+yb0/t3/rau1j8XlAxLE4CyXns2fqQbyqWfs= +github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000/go.mod h1:mFberT6ZtcchrsDtfvJM7aAH2bDKLdOnruUHl0hlapI= +github.com/twbs/bootstrap v5.1.3+incompatible h1:19+1/69025oghttdacCOGvs1wv9D5lZnpfoCvKUsPCs= +github.com/twbs/bootstrap v5.1.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0= +github.com/twbs/bootstrap v5.2.1+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0= +github.com/twbs/bootstrap v5.3.0-alpha1+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0= +github.com/twbs/bootstrap v5.3.0-alpha3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0= +github.com/twbs/bootstrap v5.3.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0= diff --git a/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/index.html b/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/index.html new file mode 100644 index 0000000..ed3033f --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/index.html @@ -0,0 +1,165 @@ + + + + + + {{ .Title }} + + {{/* styles */}} + + + {{/* Load Bootstrap SCSS. */}} + {{ $options := dict "enableSourceMap" true }} + {{ if hugo.IsProduction }} + {{ $options := dict "enableSourceMap" false "outputStyle" "compressed" }} + {{ end }} + {{ $styles := resources.Get "scss/styles.scss" }} + {{ $styles = $styles | css.Sass $options }} + {{ if hugo.IsProduction }} + {{ $styles = $styles | fingerprint }} + {{ end }} + + + {{/* Load Bootstrap JS. */}} + {{ $js := resources.Get "js/index.js" }} + {{ $params := dict }} + {{ $sourceMap := cond hugo.IsProduction "" "inline" }} + {{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }} + {{ $js = $js | js.Build $opts }} + {{ if hugo.IsProduction }} + {{ $js = $js | fingerprint }} + {{ end }} + + + +
+

Bootstrap v5 Hugo Module

+

Dependencies

+

+ Note: We have a replacement of + github.com/gohugoio/hugo-mod-bootstrap-scss/v4 to point to the directory + one level up (we do this to get correct PR previews when we update + Bootstrap). The version number reflects the version in + go.mod. +

+ + + + + + + + + + + + + {{ range $index, $element := hugo.Deps }} + + + + + + + + + {{ end }} + +
#OwnerPathVersionTimeVendor
{{ add $index 1 }}{{ with $element.Owner }}{{ .Path }}{{ end }} + {{ $element.Path }} + {{ with $element.Replace }} + => + {{ .Path }} + {{ end }} + {{ $element.Version }}{{ with $element.Time }}{{ . }}{{ end }}{{ $element.Vendor }}
+

Toast (JS plugin)

+ +

Popover (JS plugin)

+ +

Buttons

+
+ + + +
+

Carousel

+ +
+ + diff --git a/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/partials/placeholder.html b/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/partials/placeholder.html new file mode 100644 index 0000000..0ddef7e --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/exampleSite/layouts/partials/placeholder.html @@ -0,0 +1,31 @@ +{{- $title := .title | default "Placeholder" -}} +{{- $class := .class -}} +{{- $default_color := "#6c757d" -}} +{{- $default_background := "#6c757d" -}} +{{- $color := .color | default $default_color -}} +{{- $background := .background | default $default_background -}} +{{- $width := .width | default "100%" -}} +{{- $height := .height | default "180" -}} +{{- $text := .text | default (printf "%sx%s" $width $height) -}} +{{- $show_title := not (eq $title "false") -}} +{{- $show_text := not (eq $text "false") -}} + diff --git a/themes/hugo-mod-bootstrap-scss/go.mod b/themes/hugo-mod-bootstrap-scss/go.mod new file mode 100644 index 0000000..3365316 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/go.mod @@ -0,0 +1,8 @@ +module github.com/gohugoio/hugo-mod-bootstrap-scss/v5 + +go 1.16 + +require ( + github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 // indirect + github.com/twbs/bootstrap v5.3.3+incompatible // indirect +) diff --git a/themes/hugo-mod-bootstrap-scss/go.sum b/themes/hugo-mod-bootstrap-scss/go.sum new file mode 100644 index 0000000..b921cd6 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/go.sum @@ -0,0 +1,4 @@ +github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000 h1:GZxx4Hc+yb0/t3/rau1j8XlAxLE4CyXns2fqQbyqWfs= +github.com/gohugoio/hugo-mod-jslibs-dist/popperjs/v2 v2.21100.20000/go.mod h1:mFberT6ZtcchrsDtfvJM7aAH2bDKLdOnruUHl0hlapI= +github.com/twbs/bootstrap v5.3.3+incompatible h1:goFoqinzdHfkeegpFP7pvhbd0g+A3O2hbU3XCjuNrEQ= +github.com/twbs/bootstrap v5.3.3+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0= diff --git a/themes/hugo-mod-bootstrap-scss/netlify.toml b/themes/hugo-mod-bootstrap-scss/netlify.toml new file mode 100644 index 0000000..0757f69 --- /dev/null +++ b/themes/hugo-mod-bootstrap-scss/netlify.toml @@ -0,0 +1,12 @@ +[build] + publish = "exampleSite/public" + command = "hugo --gc -s exampleSite --minify" + + [build.environment] + HUGO_VERSION = "0.143.1" + +[context.deploy-preview] + command = "hugo -s exampleSite --minify -D -F -b $DEPLOY_PRIME_URL" + +[context.branch-deploy] + command = "hugo -s exampleSite --minify --gc -b $DEPLOY_PRIME_URL" diff --git a/themes/hugo-mod-jslibs-dist/LICENSE b/themes/hugo-mod-jslibs-dist/LICENSE new file mode 100644 index 0000000..bc46972 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 GoHugo.io + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/themes/hugo-mod-jslibs-dist/README.md b/themes/hugo-mod-jslibs-dist/README.md new file mode 100644 index 0000000..3894317 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/README.md @@ -0,0 +1,6 @@ +# hugo-mod-jslibs-dist + +Thin Hugo Module wrappers around some popular JS libs' distribution source code. + + + diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/README.md b/themes/hugo-mod-jslibs-dist/alpinejs/README.md new file mode 100644 index 0000000..f1c807f --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/README.md @@ -0,0 +1,41 @@ +This module mounts [AlpineJS](https://github.com/alpinejs/alpine)'s `packages/.../dist` folders. + +See [Releases](https://github.com/gohugoio/hugo-mod-jslibs-dist/releases) for version information. We use the [Semver Pair](https://github.com/bep/semverpair) versioning scheme. + +The `packages` folder is mounted in `assets/jslibs/alpinejs/v3`. + +That means that you can just import it into your Hugo config: + +```toml +[[module.imports]] +path = "github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3" +``` + +And then use it in your JS files: + +```js +import Alpine from 'jslibs/alpinejs/v3/alpinejs/dist/module.esm.js'; +import intersect from 'jslibs/alpinejs/v3/intersect/dist/module.esm.js'; +import persist from 'jslibs/alpinejs/v3/persist/dist/module.esm.js'; + +// Set up and start Alpine. +(function() { + // Register AlpineJS plugins. + Alpine.plugin(intersect); + Alpine.plugin(persist); + + // Start Alpine. + Alpine.start(); + +})(); +``` + +Note that AlpineJS now requires ES target 2017 or later to work: + +```handlebars +{{ $params := dict }} +{{ $opts := dict "sourceMap" $sourceMap "minify" (ne hugo.Environment "development") "target" "es2017" "params" $params }} +{{ $js := $js | js.Build $opts }} +``` + +Note that this works great in combination with [Turbo](https://github.com/gohugoio/hugo-mod-jslibs/tree/master/turbo), but you would need to set up something like [these listeners](https://gist.github.com/bep/a9809f0cb119e44e8ddbe37dd1e58b50) to make it work properly. diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/config.toml b/themes/hugo-mod-jslibs-dist/alpinejs/config.toml new file mode 100644 index 0000000..ae22a01 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/config.toml @@ -0,0 +1,4 @@ +[module] +[[module.mounts]] +source = "packages" +target = "assets/jslibs/alpinejs/v3" diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/go.mod b/themes/hugo-mod-jslibs-dist/alpinejs/go.mod new file mode 100644 index 0000000..4f478b7 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/go.mod @@ -0,0 +1,3 @@ +module github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3 + +go 1.17 diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/builds/cdn.js b/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/builds/cdn.js new file mode 100644 index 0000000..a54e7e0 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/builds/cdn.js @@ -0,0 +1,7 @@ +import Alpine from './../src/index' + +window.Alpine = Alpine + +queueMicrotask(() => { + Alpine.start() +}) diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/builds/module.js b/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/builds/module.js new file mode 100644 index 0000000..1d9d6a7 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/builds/module.js @@ -0,0 +1,5 @@ +import Alpine from './../src/index' + +export default Alpine + +export { Alpine } diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/dist/cdn.js b/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/dist/cdn.js new file mode 100644 index 0000000..05af4e9 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/packages/alpinejs/dist/cdn.js @@ -0,0 +1,3364 @@ +(() => { + // packages/alpinejs/src/scheduler.js + var flushPending = false; + var flushing = false; + var queue = []; + var lastFlushedIndex = -1; + function scheduler(callback) { + queueJob(callback); + } + function queueJob(job) { + if (!queue.includes(job)) + queue.push(job); + queueFlush(); + } + function dequeueJob(job) { + let index = queue.indexOf(job); + if (index !== -1 && index > lastFlushedIndex) + queue.splice(index, 1); + } + function queueFlush() { + if (!flushing && !flushPending) { + flushPending = true; + queueMicrotask(flushJobs); + } + } + function flushJobs() { + flushPending = false; + flushing = true; + for (let i = 0; i < queue.length; i++) { + queue[i](); + lastFlushedIndex = i; + } + queue.length = 0; + lastFlushedIndex = -1; + flushing = false; + } + + // packages/alpinejs/src/reactivity.js + var reactive; + var effect; + var release; + var raw; + var shouldSchedule = true; + function disableEffectScheduling(callback) { + shouldSchedule = false; + callback(); + shouldSchedule = true; + } + function setReactivityEngine(engine) { + reactive = engine.reactive; + release = engine.release; + effect = (callback) => engine.effect(callback, { scheduler: (task) => { + if (shouldSchedule) { + scheduler(task); + } else { + task(); + } + } }); + raw = engine.raw; + } + function overrideEffect(override) { + effect = override; + } + function elementBoundEffect(el) { + let cleanup2 = () => { + }; + let wrappedEffect = (callback) => { + let effectReference = effect(callback); + if (!el._x_effects) { + el._x_effects = /* @__PURE__ */ new Set(); + el._x_runEffects = () => { + el._x_effects.forEach((i) => i()); + }; + } + el._x_effects.add(effectReference); + cleanup2 = () => { + if (effectReference === void 0) + return; + el._x_effects.delete(effectReference); + release(effectReference); + }; + return effectReference; + }; + return [wrappedEffect, () => { + cleanup2(); + }]; + } + function watch(getter, callback) { + let firstTime = true; + let oldValue; + let effectReference = effect(() => { + let value = getter(); + JSON.stringify(value); + if (!firstTime) { + queueMicrotask(() => { + callback(value, oldValue); + oldValue = value; + }); + } else { + oldValue = value; + } + firstTime = false; + }); + return () => release(effectReference); + } + + // packages/alpinejs/src/utils/dispatch.js + function dispatch(el, name, detail = {}) { + el.dispatchEvent( + new CustomEvent(name, { + detail, + bubbles: true, + // Allows events to pass the shadow DOM barrier. + composed: true, + cancelable: true + }) + ); + } + + // packages/alpinejs/src/utils/walk.js + function walk(el, callback) { + if (typeof ShadowRoot === "function" && el instanceof ShadowRoot) { + Array.from(el.children).forEach((el2) => walk(el2, callback)); + return; + } + let skip = false; + callback(el, () => skip = true); + if (skip) + return; + let node = el.firstElementChild; + while (node) { + walk(node, callback, false); + node = node.nextElementSibling; + } + } + + // packages/alpinejs/src/utils/warn.js + function warn(message, ...args) { + console.warn(`Alpine Warning: ${message}`, ...args); + } + + // packages/alpinejs/src/lifecycle.js + var started = false; + function start() { + if (started) + warn("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."); + started = true; + if (!document.body) + warn("Unable to initialize. Trying to load Alpine before `` is available. Did you forget to add `defer` in Alpine's ` +``` + +### Via NPM + +You can alternatively install this build from NPM for use inside your bundle like so: + +```shell +npm install @alpinejs/csp +``` + +Then initialize it from your bundle: + +```js +import Alpine from '@alpinejs/csp' + +window.Alpine = Alpine + +Alpine.start() +``` + + +## Basic Example + +To provide a glimpse of how using the CSP build might feel, here is a copy-pastable HTML file with a working counter component using a common CSP setup: + +```alpine + + + + + + + + +
+ + + +
+ + + + +``` + + +## API Restrictions + +Since Alpine can no longer interpret strings as plain JavaScript, it has to parse and construct JavaScript functions from them manually. + +Due to this limitation, you must use `Alpine.data` to register your `x-data` objects, and must reference properties and methods from it by key only. + +For example, an inline component like this will not work. + +```alpine + +
+ + + +
+``` + +However, breaking out the expressions into external APIs, the following is valid with the CSP build: + +```alpine + +
+ + + +
+``` + +```js +Alpine.data('counter', () => ({ + count: 1, + + increment() { + this.count++ + }, +})) +``` diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/advanced/extending.md b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/advanced/extending.md new file mode 100644 index 0000000..d908962 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/advanced/extending.md @@ -0,0 +1,378 @@ +--- +order: 3 +title: Extending +--- + +# Extending + +Alpine has a very open codebase that allows for extension in a number of ways. In fact, every available directive and magic in Alpine itself uses these exact APIs. In theory you could rebuild all of Alpine's functionality using them yourself. + + +## Lifecycle concerns +Before we dive into each individual API, let's first talk about where in your codebase you should consume these APIs. + +Because these APIs have an impact on how Alpine initializes the page, they must be registered AFTER Alpine is downloaded and available on the page, but BEFORE it has initialized the page itself. + +There are two different techniques depending on if you are importing Alpine into a bundle, or including it directly via a ` + +
+ + + +``` + +If you want to extract your extension code into an external file, you will need to make sure that file's ` + + +
+ +``` + + +### Via an NPM module + +If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the `Alpine` global object, and when you initialize Alpine by calling `Alpine.start()`. For example: + +```js +import Alpine from 'alpinejs' + +Alpine.directive('foo', ...) + +window.Alpine = Alpine +window.Alpine.start() +``` + +Now that we know where to use these extension APIs, let's look more closely at how to use each one: + + +## Custom directives + +Alpine allows you to register your own custom directives using the `Alpine.directive()` API. + + +### Method Signature + +```js +Alpine.directive('[name]', (el, { value, modifiers, expression }, { Alpine, effect, cleanup }) => {}) +``` + +  |   +---|--- +name | The name of the directive. The name "foo" for example would be consumed as `x-foo` +el | The DOM element the directive is added to +value | If provided, the part of the directive after a colon. Ex: `'bar'` in `x-foo:bar` +modifiers | An array of dot-separated trailing additions to the directive. Ex: `['baz', 'lob']` from `x-foo.baz.lob` +expression | The attribute value portion of the directive. Ex: `law` from `x-foo="law"` +Alpine | The Alpine global object +effect | A function to create reactive effects that will auto-cleanup after this directive is removed from the DOM +cleanup | A function you can pass bespoke callbacks to that will run when this directive is removed from the DOM + + +### Simple Example + +Here's an example of a simple directive we're going to create called: `x-uppercase`: + +```js +Alpine.directive('uppercase', el => { + el.textContent = el.textContent.toUpperCase() +}) +``` +```alpine +
+ Hello World! +
+``` + + +### Evaluating expressions + +When registering a custom directive, you may want to evaluate a user-supplied JavaScript expression: + +For example, let's say you wanted to create a custom directive as a shortcut to `console.log()`. Something like: + +```alpine +
+
+
+``` + +You need to retrieve the actual value of `message` by evaluating it as a JavaScript expression with the `x-data` scope. + +Fortunately, Alpine exposes its system for evaluating JavaScript expressions with an `evaluate()` API. Here's an example: + +```js +Alpine.directive('log', (el, { expression }, { evaluate }) => { + // expression === 'message' + + console.log( + evaluate(expression) + ) +}) +``` + +Now, when Alpine initializes the `
`, it will retrieve the expression passed into the directive ("message" in this case), and evaluate it in the context of the current element's Alpine component scope. + + +### Introducing reactivity + +Building on the `x-log` example from before, let's say we wanted `x-log` to log the value of `message` and also log it if the value changes. + +Given the following template: + +```alpine +
+
+ + +
+``` + +We want "Hello World!" to be logged initially, then we want "yolo" to be logged after pressing the ` +``` + +Now that accessing `$clipboard` returns a function itself, we can immediately call it and pass it an argument like we see in the template with `$clipboard('hello world')`. + +You can use the more brief syntax (a double arrow function) for returning a function from a function if you'd prefer: + +```js +Alpine.magic('clipboard', () => subject => { + navigator.clipboard.writeText(subject) +}) +``` + + +## Writing and sharing plugins + +By now you should see how friendly and simple it is to register your own custom directives and magics in your application, but what about sharing that functionality with others via an NPM package or something? + +You can get started quickly with Alpine's official "plugin-blueprint" package. It's as simple as cloning the repository and running `npm install && npm run build` to get a plugin authored. + +For demonstration purposes, let's create a pretend Alpine plugin from scratch called `Foo` that includes both a directive (`x-foo`) and a magic (`$foo`). + +We'll start producing this plugin for consumption as a simple ` + + +
+ +
+ +``` + +Notice how our script is included BEFORE Alpine itself. This is important, otherwise, Alpine would have already been initialized by the time our plugin got loaded. + +Now let's look inside of `/js/foo.js`'s contents: + +```js +document.addEventListener('alpine:init', () => { + window.Alpine.directive('foo', ...) + + window.Alpine.magic('foo', ...) +}) +``` + +That's it! Authoring a plugin for inclusion via a script tag is extremely simple with Alpine. + + +### Bundle module + +Now let's say you wanted to author a plugin that someone could install via NPM and include into their bundle. + +Like the last example, we'll walk through this in reverse, starting with what it will look like to consume this plugin: + +```js +import Alpine from 'alpinejs' + +import foo from 'foo' +Alpine.plugin(foo) + +window.Alpine = Alpine +window.Alpine.start() +``` + +You'll notice a new API here: `Alpine.plugin()`. This is a convenience method Alpine exposes to prevent consumers of your plugin from having to register multiple different directives and magics themselves. + +Now let's look at the source of the plugin and what gets exported from `foo`: + +```js +export default function (Alpine) { + Alpine.directive('foo', ...) + Alpine.magic('foo', ...) +} +``` + +You'll see that `Alpine.plugin` is incredibly simple. It accepts a callback and immediately invokes it while providing the `Alpine` global as a parameter for use inside of it. + +Then you can go about extending Alpine as you please. diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/advanced/reactivity.md b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/advanced/reactivity.md new file mode 100644 index 0000000..1650953 --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/advanced/reactivity.md @@ -0,0 +1,101 @@ +--- +order: 2 +title: Reactivity +--- + +# Reactivity + +Alpine is "reactive" in the sense that when you change a piece of data, everything that depends on that data "reacts" automatically to that change. + +Every bit of reactivity that takes place in Alpine, happens because of two very important reactive functions in Alpine's core: `Alpine.reactive()`, and `Alpine.effect()`. + +> Alpine uses VueJS's reactivity engine under the hood to provide these functions. +> [→ Read more about @vue/reactivity](https://github.com/vuejs/vue-next/tree/master/packages/reactivity) + +Understanding these two functions will give you super powers as an Alpine developer, but also just as a web developer in general. + + +## Alpine.reactive() + +Let's first look at `Alpine.reactive()`. This function accepts a JavaScript object as its parameter and returns a "reactive" version of that object. For example: + +```js +let data = { count: 1 } + +let reactiveData = Alpine.reactive(data) +``` + +Under the hood, when `Alpine.reactive` receives `data`, it wraps it inside a custom JavaScript proxy. + +A proxy is a special kind of object in JavaScript that can intercept "get" and "set" calls to a JavaScript object. + +[→ Read more about JavaScript proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) + +At face value, `reactiveData` should behave exactly like `data`. For example: + +```js +console.log(data.count) // 1 +console.log(reactiveData.count) // 1 + +reactiveData.count = 2 + +console.log(data.count) // 2 +console.log(reactiveData.count) // 2 +``` + +What you see here is that because `reactiveData` is a thin wrapper around `data`, any attempts to get or set a property will behave exactly as if you had interacted with `data` directly. + +The main difference here is that any time you modify or retrieve (get or set) a value from `reactiveData`, Alpine is aware of it and can execute any other logic that depends on this data. + +`Alpine.reactive` is only the first half of the story. `Alpine.effect` is the other half, let's dig in. + + +## Alpine.effect() + +`Alpine.effect` accepts a single callback function. As soon as `Alpine.effect` is called, it will run the provided function, but actively look for any interactions with reactive data. If it detects an interaction (a get or set from the aforementioned reactive proxy) it will keep track of it and make sure to re-run the callback if any of reactive data changes in the future. For example: + +```js +let data = Alpine.reactive({ count: 1 }) + +Alpine.effect(() => { + console.log(data.count) +}) +``` + +When this code is first run, "1" will be logged to the console. Any time `data.count` changes, it's value will be logged to the console again. + +This is the mechanism that unlocks all of the reactivity at the core of Alpine. + +To connect the dots further, let's look at a simple "counter" component example without using Alpine syntax at all, only using `Alpine.reactive` and `Alpine.effect`: + +```alpine + + +Count: +``` +```js +let button = document.querySelector('button') +let span = document.querySelector('span') + +let data = Alpine.reactive({ count: 1 }) + +Alpine.effect(() => { + span.textContent = data.count +}) + +button.addEventListener('click', () => { + data.count = data.count + 1 +}) +``` + + +
+ + +
Count:
+
+ + +As you can see, you can make any data reactive, and you can also wrap any functionality in `Alpine.effect`. + +This combination unlocks an incredibly powerful programming paradigm for web development. Run wild and free. diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/directives.md b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/directives.md new file mode 100644 index 0000000..ef15b7b --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/directives.md @@ -0,0 +1,7 @@ +--- +order: 4 +title: Directives +prefix: x- +font-type: mono +type: sub-directory +--- diff --git a/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/directives/bind.md b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/directives/bind.md new file mode 100644 index 0000000..7c84c9c --- /dev/null +++ b/themes/hugo-mod-jslibs-dist/alpinejs/packages/docs/src/en/directives/bind.md @@ -0,0 +1,198 @@ +--- +order: 4 +title: bind +--- + +# x-bind + +`x-bind` allows you to set HTML attributes on elements based on the result of JavaScript expressions. + +For example, here's a component where we will use `x-bind` to set the placeholder value of an input. + +```alpine +
+ +
+``` + + +## Shorthand syntax + +If `x-bind:` is too verbose for your liking, you can use the shorthand: `:`. For example, here is the same input element as above, but refactored to use the shorthand syntax. + +```alpine + +``` + + +## Binding classes + +`x-bind` is most often useful for setting specific classes on an element based on your Alpine state. + +Here's a simple example of a simple dropdown toggle, but instead of using `x-show`, we'll use a "hidden" class to toggle an element. + +```alpine +
+ + +
+ Dropdown Contents... +
+
+``` + +Now, when `open` is `false`, the "hidden" class will be added to the dropdown. + + +### Shorthand conditionals + +In cases like these, if you prefer a less verbose syntax you can use JavaScript's short-circuit evaluation instead of standard conditionals: + +```alpine +
+ +
+``` + +The inverse is also available to you. Suppose instead of `open`, we use a variable with the opposite value: `closed`. + +```alpine +
+ +
+``` + + +### Class object syntax + +Alpine offers an additional syntax for toggling classes if you prefer. By passing a JavaScript object where the classes are the keys and booleans are the values, Alpine will know which classes to apply and which to remove. For example: + +```alpine +
+``` + +This technique offers a unique advantage to other methods. When using object-syntax, Alpine will NOT preserve original classes applied to an element's `class` attribute. + +For example, if you wanted to apply the "hidden" class to an element before Alpine loads, AND use Alpine to toggle its existence you can only achieve that behavior using object-syntax: + +```alpine +