platform/packages/seo/README.md

77 lines
2.9 KiB
Markdown
Raw Normal View History

# Protevus SEO
2018-07-09 17:20:14 +00:00
![Pub Version (including pre-releases)](https://img.shields.io/pub/v/protevus_seo?include_prereleases)
2021-08-20 02:33:49 +00:00
[![Null Safety](https://img.shields.io/badge/null-safety-brightgreen)](https://dart.dev/null-safety)
2024-07-07 15:02:49 +00:00
[![Discord](https://img.shields.io/discord/1060322353214660698)](https://discord.gg/3X6bxTUdCM)
[![License](https://img.shields.io/github/license/dart-backend/protevus)](https://github.com/dart-backend/protevus/tree/master/packages/seo/LICENSE)
2021-08-20 02:33:49 +00:00
Helpers for building SEO-friendly Web pages in Protevus. The goal of `package:protevus_seo` is to speed up perceived client page loads, prevent the infamous [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content), and other SEO optimizations that can easily become tedious to perform by hand.
2018-07-09 06:14:25 +00:00
2018-11-08 16:19:31 +00:00
## Disabling inlining per-element
2021-08-20 02:33:49 +00:00
2018-11-08 16:19:31 +00:00
Add a `data-no-inline` attribute to a `link` or `script` to prevent inlining it:
```html
<script src="main.dart.js" data-no-inline></script>
```
2018-07-09 06:14:25 +00:00
## `inlineAssets`
A [response finalizer](https://protevus-docs.dukefirehawk.com/guides/request-lifecycle) that can be used in any application to patch HTML responses, including those sent with a templating engine like Jael3.
2018-07-09 06:14:25 +00:00
2021-08-20 02:33:49 +00:00
In any `text/html` response sent down, `link` and `script` elements that point to internal resources will have the contents of said file read, and inlined into the HTML page itself.
In this case, "internal resources" refers to a URI *without* a scheme, i.e. `/site.css` or `foo/bar/baz.js`.
2018-07-09 06:14:25 +00:00
```dart
import 'package:protevus_framework/protevus_framework.dart';
import 'package:protevus_seo/protevus_seo.dart';
import 'package:protevus_static/protevus_static.dart';
2018-07-09 06:14:25 +00:00
import 'package:file/local.dart';
2021-08-20 02:33:49 +00:00
void main() async {
var app = Protevus()..lazyParseBodies = true;
var fs = const LocalFileSystem();
var http = ProtevusHttp(app);
app.responseFinalizers.add(inlineAssets(fs.directory('web')));
app.use(() => throw ProtevusHttpException.notFound());
var server = await http.startServer('127.0.0.1', 3000);
print('Listening at http://${server.address.address}:${server.port}');
}
```
## `inlineAssetsFromVirtualDirectory`
2021-08-20 02:33:49 +00:00
This function is a simple one; it wraps a `VirtualDirectory` to patch the way it sends `.html` files. Produces the same functionality as `inlineAssets`.
```dart
import 'package:protevus_framework/protevus_framework.dart';
import 'package:protevus_seo/protevus_seo.dart';
import 'package:protevus_static/protevus_static.dart';
import 'package:file/local.dart';
2021-08-20 02:33:49 +00:00
void main() async {
var app = Protevus()..lazyParseBodies = true;
2018-07-09 06:14:25 +00:00
var fs = const LocalFileSystem();
var http = ProtevusHttp(app);
2018-07-09 06:14:25 +00:00
var vDir = inlineAssets(
2021-08-20 02:33:49 +00:00
VirtualDirectory(
2018-07-09 06:14:25 +00:00
app,
fs,
source: fs.directory('web'),
),
);
app.use(vDir.handleRequest);
app.use(() => throw ProtevusHttpException.notFound());
2018-07-09 06:14:25 +00:00
var server = await http.startServer('127.0.0.1', 3000);
print('Listening at http://${server.address.address}:${server.port}');
}
2021-08-20 02:33:49 +00:00
```