Sitegeist.Slipstream

KO | EN

gitlite — search

#javascript #ai #llm #linux #macos #java #windows #cli #kubernetes #vue #awesome-list #ios #mcp #open-source

Sitegeist.Slipstream

(★ 8)

Define CSS and JS requirements for Fusion components that are moved to the head of the document.

Sitegeist.Slipstream Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Sitegeist.Slipstream

## Header requirements for presentational fusion

"Quantum slipstream transcends the normal warp barrier by penetrating the quantum barrier with a focused quantum field."

The slipstream package allows defining header requirements with presentational fusion by labeling the required tags with
a unique attribute. They are later deduplicated and moved to the target position. This allows defining additional the JS
and CSS requirements directly with the presentational fusion components.

### Authors & Sponsors

* Martin Ficzel - ficzel@sitegeist.de

> The development and the public releases of this package is generously sponsored by our employer [**site**geist].

## Usage

You can mark any HTML fragment to be moved to the head of the document by adding a `data-slipstream` attribute.

```html
<script data-slipstream src="yourCustomScript.js"></script>
<div>your component</div>
```

The slipstream middleware will parse the entire page and detect all those tags. The tags are then removed from the
original location and are appended to the header. Every tag is added only once, so if multiple components require the
same JS, only one is added to the given location.

### Alter target by tag name

By defining the `data-slipstream` attribute with an tag name, the target can be altered.

```html
<script data-slipstream="//body" src="yourCustomScript.js"></script>
<div>your component</div>
```

### Using CSS selector (id or class name) as target

If you want to target a specific element with an id or class name you can also use a selector prefixed with an `#` (id)
or an `.` (class name). The string itself musst start with a letter, underscore or hyphen. No spaces are allowed. Also
multiple id and classes combinations won't work, only a single class name or id works.

```html
<dialog data-slipstream="#bar"><p>Greetings, one and all!</p></dialog>
<dialog data-slipstream=".foo"><p>Greetings, one and all!</p></dialog>
 ```

### Using XPATH selector as target

```html
<script data-slipstream="//script[@defer]" src="yourCustomScript.js"></script>
 ```

### Location of the tag

To prepend the tag to the given target, you can add the `data-slipstream-prepend` attribute:

```html
<script data-slipstream="//body" data-slipstream-prepend src="yourCustomScriptAfterOpenendBody.js"></script>
<script data-slipstream data-slipstream-prepend src="yourCustomScriptAfterOpenendHead.js"></script>
```

To place a tag before or after a specific tag, you can add the `data-slipstream-before` or
`data-slipstream-after` attribute:

```html
<script data-slipstream="//script[@defer]" data-slipstream-before src="yourCustomScript.js" defer></script>
<script data-slipstream="//script[@defer]" data-slipstream-after src="yourCustomScript.js"></script>
```

### Debug mode

When the setting `Sitegeist.Slipstream.debugMode` is enabled, HTML comments are rendered to mark where tags were removed
and inserted. This is enabled in Development Context by default.

### Remove slipstream attributes

If the setting `Sitegeist.Slipstream.removeSlipstreamAttributes` is enabled, the attributes from slipstream get removed.
This is disabled in Development Context by default.

## Inner working and performance

The slipstream HTTP middleware will modify all responses with an active `X-Slipstream: Enabled` HTTP header.
This header is added to Neos.Neos:Page and Sitegeist.Monocle:Preview.Page already, so this will work for
Neos and Monocle right away. You will have to add the header `X-Slipstream: Enabled` for other controllers.

Since the response body is parsed and modified, this adds a minor performance penalty to every request. However
the package is designed to work together with Flowpack.FullpageCache, which will in turn cache the whole result
and mitigate the slight performance drawback.

## Installation

Sitegeist.Slipstream is available via packagist run `composer require sitegeist/slipstream`.

We use semantic-versioning so that every breaking change will increase the major version number.

## Contribution

We will gladly accept contributions. Please send us pull requests.

[**site**geist]: http://www.sitegeist.de

Sitegeist.Slipstream

Sitegeist.Slipstream Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Sitegeist.Slipstream

Sitegeist.Slipstream Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README