htmx sample

Dart/htmx/dart-htmx/.gitignore

@@ -0,0 +1,81 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# dataconnect generated files
+.dataconnect
+
+# Dart
+.dart_tool/
+build/
+*.dart.js
+*.info.json
+*.js
+*.js.map
+*.js.deps
+*.js.symbols
+pubspec.lock
+functions.yaml

Dart/htmx/dart-htmx/README.md

@@ -0,0 +1,64 @@
+# Firebase SDK for Cloud Functions Sample - HTMX & Pico CSS
+
+This sample demonstrates using the **Firebase SDK for Cloud Functions** with Dart, HTMX, and Pico CSS to build a dynamic click-to-edit web application powered by Firestore.
+
+## Introduction
+
+The `contact` function serves an HTML page displaying a public message. Using HTMX, clicking "Click To Edit" fetches an edit form and swaps it into the page without a full reload. Submitting the form updates the message in Firestore (`messages/message`) and swaps the updated display card back into the page.
+
+Unauthenticated users can view the public message, while signed-in users can edit it. If an unauthenticated user attempts to edit, they are automatically redirected to a basic email/password sign-in page.
+
+Further reading:
+ - [Read more about Cloud Functions for Firebase](https://firebase.google.com/docs/functions)
+ - [HTMX Documentation](https://htmx.org/docs/)
+ - [Pico CSS Documentation](https://picocss.com/docs)
+
+## Initial setup, build tools and dependencies
+
+### 1. Clone this repo
+
+Clone or download this repo and open the `Dart/htmx/dart-htmx` directory.
+
+### 2. Create a Firebase project and configure the sample
+
+Create a Firebase Project on the [Firebase Console](https://console.firebase.google.com).
+
+Set up your Firebase project by running `firebase use --add`, select your Project ID and follow the instructions.
+
+### 3. Install the Firebase CLI
+
+You need to have installed the Firebase CLI. If you haven't, run:
+
+```bash
+npm install -g firebase-tools
+```
+
+## Deploy the app
+
+First you need to get the `dart` dependencies of the functions:
+
+```bash
+dart pub get
+```
+
+Deploy to Firebase using the following command:
+
+```bash
+firebase deploy
+```
+
+Alternatively, you can call `firebase emulators:start` to test the functions on the local emulator suite.
+
+## Try the sample
+
+After deploying the function, check the CLI's output to see the URL for your function.
+
+Open the URL in a browser to view the public message card. Click "Click To Edit" to sign in with demo credentials (`test@example.com` / `Test@12345`), modify the message text, and click "Save" to see HTMX, Firebase Auth, and Firestore in action.
+
+## Contributing
+
+We'd love that you contribute to the project. Before doing so please read our [Contributor guide](../../CONTRIBUTING.md).
+
+## License
+
+© Google, 2026. Licensed under an [Apache-2](../../../LICENSE) license.