https://github.com/pttrnco/silhouette
Dynamic user data for your static sites
https://github.com/pttrnco/silhouette
statamic statamic-addon statamic-v3
Last synced: 2 months ago
JSON representation
Dynamic user data for your static sites
- Host: GitHub
- URL: https://github.com/pttrnco/silhouette
- Owner: pttrnco
- License: mit
- Created: 2020-11-28T05:21:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-03-21T03:06:46.000Z (about 4 years ago)
- Last Synced: 2025-03-09T22:04:41.317Z (about 1 year ago)
- Topics: statamic, statamic-addon, statamic-v3
- Language: PHP
- Homepage:
- Size: 9.77 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Silhouette
#### Dynamic user data for your static sites.
If you’ve ever wanted to add a sprinkle of user data to your static sites, Silhouette is for you.
### Installation
1. Pull in the package via Composer
```
composer require pattern/silhouette
```
2. Publish the config file
```
php artisan vendor:publish --provider=Pattern\Silhouette\ServiceProvider
```
3. If you are using the Eloquent driver for your users, add your user model into your `.env` file
```
SILHOUETTE_ELOQUENT_MODEL=App\User
```
### Usage
> Note: Silhouette relies on [AlpineJS](https://github.com/alpinejs/alpine) to work its magic. If you haven’t already included Alpine in your project, you’ll need to do that.
```
{{ silhouette attributes="name,email,initials,avatar" }}
{{ silhouette:auth }}
{{ silhouette:name }}
{{ silhouette:email }}
{{ silhouette:attribute }}
...
{{ /silhouette:auth }}
{{ silhouette:guest }}
Content you would want a guest to see.
{{ /silhouette:guest }}
{{ /silhouette}}
```
It all starts with the `{{ silhouette }}` tag pair. The attributes parameter is optional; by default Silhouette will attempt to return your user’s name, email address, initials, and avatar.
Any content inside of the `{{ silhouette:auth }}` tag pair will only show if a user is authenticated. Inside of this tag pair you have access to either the default attributes or those you specified in the `attributes` parameter.
Likewise, any content inside of the `{{ silhouette:guest }}` pair will only show if your visitor is not an authenticated user.
### Advanced Usage
As stated above, Silhouette uses [AlpineJS](https://github.com/alpinejs/alpine) to fetch and display your user’s data. It’s a great way to sprinkle interactivity throughout your website without committing to a larger framework like [React](https://reactjs.org) or [Vue](https://vuejs.org) (or [Svelte](https://svelte.dev) or [Elm](https://elm-lang.org) or [Angular](https://angular.io) or… oh geez), but there is a slightly more advanced use case that might trip some people up: nested `x-data` objects.
If, for instance, you’d like your users to be able to click on their avatar to toggle an ‘Account’ menu, you might do something like this:
```
{{ silhouette }}
{{ silhouette:auth }}
{{ /silhouette:auth }}
{{ silhouette:guest }}
Login
{{ /silhouette:guest }}
{{ /silhouette }}
```
The problem with this approach is that because of the way Silhouette works, you’ve just nested a new `x-data` context that is not aware of the `silhouette` object.
Alpine provides a way (through events and listeners) to communicate data across components (or even, as is the case here, within nested components). To get the above example to work, we need to add the `silhouette` object to our `x-data` and listen for changes to the parent’s `silhouette` object (via an `x-on` directive):
```
{{ silhouette }}
{{ silhouette:auth }}
{{ /silhouette:auth }}
{{ silhouette:guest }}
Login
{{ /silhouette:guest }}
{{ /silhouette }}
```
### Credits
Many thanks to [Mike Martin](https://mike-martin.ca) for the excellent idea and some early testing.
### License
Licensed under the MIT license, see [LICENSE](https://github.com/pttrnco/silhouette/blob/main/LICENSE) for details.