PHPackages                             pattern/silhouette - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. pattern/silhouette

ActiveStatamic-addon[Utility & Helpers](/categories/utility)

pattern/silhouette
==================

Dynamic user data for your static sites.

1.1.0(4y ago)1117MITPHP

Since Nov 29Pushed 4y agoCompare

[ Source](https://github.com/pttrnco/silhouette)[ Packagist](https://packagist.org/packages/pattern/silhouette)[ RSS](/packages/pattern-silhouette/feed)WikiDiscussions main Synced today

READMEChangelog (4)Dependencies (1)Versions (5)Used By (0)

Silhouette
==========

[](#silhouette)

#### Dynamic user data for your static sites.

[](#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

[](#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

[](#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

[](#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 }}