Compare commits

...

4 Commits

Author SHA1 Message Date
github-actions[bot]
5f4a86b1a8 Version Packages 2022-10-06 10:05:15 +02:00
Thomas Allmer
79e6f0df33 Create tame-tigers-marry.md 2022-10-06 09:32:19 +02:00
Matsu
04621c3f16 Update the error message on degit action 2022-10-06 09:32:19 +02:00
Nathan Brown
1cd9508384 docs: site cleanup
Remove extraneous words and correct misphrasings.
2022-09-10 10:34:13 +02:00
20 changed files with 66 additions and 56 deletions

View File

@@ -1,5 +1,11 @@
# @rocket/create # @rocket/create
## 0.1.1
### Patch Changes
- 79e6f0d: Update error message to include an action to resolve a possible [digit error](https://github.com/Rich-Harris/degit/issues/313).
## 0.1.0 ## 0.1.0
### Minor Changes ### Minor Changes

View File

@@ -1,6 +1,6 @@
{ {
"name": "@rocket/create", "name": "@rocket/create",
"version": "0.1.0", "version": "0.1.1",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },

View File

@@ -152,7 +152,11 @@ export class CreateCli {
await gitHandler.clone('./' + newFolderPath); await gitHandler.clone('./' + newFolderPath);
cloneError = false; cloneError = false;
} catch (e) { } catch (e) {
console.log(`${red('✖')} Could not apply the template - maybe the url is wrong?`); console.log(
`${red(
'✖',
)} Could not apply the template - maybe the url is wrong? If this problem persists, you could try clearing your .degit cache, usually located at ~/.degit`,
);
console.log(`${red('>')} ${e.message}`); console.log(`${red('>')} ${e.message}`);
const response = await prompts({ const response = await prompts({
type: 'text', type: 'text',

View File

@@ -93,4 +93,4 @@ If something is missing in the documentation or if you found some part confusing
## Credit ## Credit
This getting started guide was originally based off of [astro](https://astro.build/) getting started guide. This getting started guide was originally based off the [astro](https://astro.build/) getting started guide.

View File

@@ -44,11 +44,11 @@ Before we get started we need to engage the engines via
npm start npm start
``` ```
This with start rocket in development mode and you will see your site running in your browser. This will start rocket in development mode and you will see your site running in your browser.
## What is a page? ## What is a page?
A page is a file that ends either with `*.rocket.js`, `*.rocket.md` or `*.rocket.html` and is located in the input directory (`site/pages` by default). Pages will make up the majority or your website. A page is a file that ends either with `*.rocket.js`, `*.rocket.md` or `*.rocket.html` and is located in the input directory (`site/pages` by default). Pages will make up the majority of your website.
The simplest way to get started is to create a file The simplest way to get started is to create a file

View File

@@ -53,7 +53,7 @@ e.g.
## Recommended Project Structure ## Recommended Project Structure
Even if there is no enforce project structure it still makes sense to follow some common best practices. Even if there is no enforced project structure it still makes sense to follow some common best practices.
- `site/pages/*` - All the pages of your website (e.g. all `*.rocket.{js,md,html}` files) - `site/pages/*` - All the pages of your website (e.g. all `*.rocket.{js,md,html}` files)
- `site/pages/about/_assets/*` - Keep assets related to pages close to the page itself (e.g. images, videos, ...) - `site/pages/about/_assets/*` - Keep assets related to pages close to the page itself (e.g. images, videos, ...)
@@ -116,4 +116,4 @@ Rocket has complete control over how these files get processed, optimized, and b
For most users, the majority of your files will live inside of the `site/pages/` and `site/src/` directory so that Rocket can optimize them in your final build. By contrast, the `site/public/` directory is the place for any files to live outside of the Rocket build process. For most users, the majority of your files will live inside of the `site/pages/` and `site/src/` directory so that Rocket can optimize them in your final build. By contrast, the `site/public/` directory is the place for any files to live outside of the Rocket build process.
If you put a file into the public folder, it will not be processed by Rocket. Instead it will be copied into the build folder untouched. This can be useful for specific file like `robots.txt` or `site.webmanifest` or sometimes for assets like images that you need in a specific location. If you put a file into the public folder, it will not be processed by Rocket. Instead it will be copied into the build folder untouched. This can be useful for specific files like `robots.txt` or `site.webmanifest` or sometimes for assets like images that you need in a specific location.

View File

@@ -30,7 +30,7 @@ export const description = `An intro to Rocket pages, which is the actual websit
# Pages # Pages
**Pages** are a the only files that get rendered into the output folder. **Pages** are the only files that get rendered into the output folder.
3 types of pages are supported: 3 types of pages are supported:
@@ -38,11 +38,11 @@ export const description = `An intro to Rocket pages, which is the actual websit
- `*.rocket.html` - A page with HTML content. - `*.rocket.html` - A page with HTML content.
- `*.rocket.js` - A page with JavaScript content. - `*.rocket.js` - A page with JavaScript content.
Feel free to choose a format for each pages that best suits its content. Feel free to choose a format for each page that best suits its content.
## File-based Routing ## File-based Routing
Rockets uses Pages to do something called **file-based routing.** Every file in your `pages` directory becomes a page on your site, using the file name to decide the final route. Rocket uses Pages to do something called **file-based routing.** Every file in your `pages` directory becomes a page on your site, using the file name to decide the final route.
``` ```
site/pages/index.rocket.md -> mysite.com/ site/pages/index.rocket.md -> mysite.com/
@@ -72,7 +72,7 @@ export default () => `
👆 This is the JavaScript version which all other formats automatically convert to. 👆 This is the JavaScript version which all other formats automatically convert to.
However for you your convenience you can also write your page in HTML and it will be automatically converted into the JavaScript version above. However for your convenience you can also write your page in HTML and it will be automatically converted into the JavaScript version above.
👉 `site/pages/index.rocket.html` 👉 `site/pages/index.rocket.html`
@@ -104,8 +104,8 @@ Or you can write markdown.
Markdown and HTML files are automatically converted to their JavaScript equivalents. Markdown and HTML files are automatically converted to their JavaScript equivalents.
That is also how they get their template literal super powers. That is also how they get their template literal super powers.
Those converted files only life for a fraction of a second and are deleted after the page is done rendering. Those converted files only live for a fraction of a second and are deleted after the page is done rendering.
If you would like to keep them for debugging or out of curiosity you can export the following flag to prefect the cleanup. If you would like to keep them for debugging or out of curiosity you can export the following flag to prevent the cleanup.
```js ```js
export const keepConvertedFiles = true; export const keepConvertedFiles = true;

View File

@@ -90,7 +90,7 @@ For that reasons you can override the layout via exporting `layout` on a specifi
In the above example we have 4 layouts we define in different places. In the above example we have 4 layouts we define in different places.
1. Default layout use by all pages unless overwritten in `recursive.data.js` 1. Default layout used by all pages unless overwritten in `recursive.data.js`
2. Explicitly specifying a layout `index.rocket.js` 2. Explicitly specifying a layout `index.rocket.js`
3. use `blog/local.data.js` to set a layout for all pages in `blog` 3. use `blog/local.data.js` to set a layout for all pages in `blog`
4. use `docs/codelabs/local.data.js` to set a layout for all pages in `codelabs` 4. use `docs/codelabs/local.data.js` to set a layout for all pages in `codelabs`

View File

@@ -28,11 +28,11 @@ export const needsLoader = true;
# Components # Components
Components in Rocket are the "just" the web standard [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). They are used to create reusable components that can be used in any web page. Components in Rocket are "just" the web standard [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). They are used to create reusable components that can be used in any web page.
<inline-notification> <inline-notification>
Web component only live within the html body. For content within the head or a full html page please see [layouts](./50--layouts.rocket.md). Web components only live within the html body. For content within the head or a full html page please see [layouts](./50--layouts.rocket.md).
</inline-notification> </inline-notification>
@@ -84,7 +84,7 @@ We can now put this code in Rocket JavaScript, Markdown or Html pages.
<rocket-greeting>Go</rocket-greeting> <rocket-greeting>Go</rocket-greeting>
```` ````
will result a server rendered output that does not load ANY JavaScript will result in a server rendered output that does not load ANY JavaScript
``` ```
Hello World Hello World
@@ -124,7 +124,7 @@ Note the empty lines between html & markdown. They are necessary as this is how
## Manually Loading Components ## Manually Loading Components
We can define as many components as we want within a page but typically it's best to define them in a separate files. We can define as many components as we want within a page but typically it's best to define them in separate files.
So we will move our component code into a new file 👉 `/site/src/components/rocket-greeting.js` So we will move our component code into a new file 👉 `/site/src/components/rocket-greeting.js`
@@ -257,8 +257,8 @@ export const components = {
### Hydration ### Hydration
Component that do not have any interactivity will never need to be hydrated so they may be imported statically on the server side. Components that do not have any interactivity will never need to be hydrated so they may be imported statically on the server side.
All other component should be handled via the `components` object to enable handling of loading and registration. All other components should be handled via the `components` object to enable handling of loading and registration.
Doing so enables hydration based on attributes on the component. Doing so enables hydration based on attributes on the component.

View File

@@ -28,7 +28,7 @@ export const needsLoader = true;
# Layouts # Layouts
Layout are special in that sense that they output the full html page (including html, head, body, etc). Layouts are special in the sense that they output the full html page (including html, head, body, etc).
The simplest layout you can make is The simplest layout you can make is
@@ -48,7 +48,7 @@ export const layout = data => html`
`; `;
``` ```
and that will work fine however now every page will have the same `title` in the head. and that will work fine, however, now every page will have the same `title` in the head.
If we now have the following markdown file: If we now have the following markdown file:
@@ -95,7 +95,7 @@ For more details see the following [lit issue](https://github.com/lit/lit/issues
</inline-notification> </inline-notification>
In order to provide this `data.title` we now need to export is within the page. In order to provide this `data.title` we now need to export it within the page.
The code could look something like this. The code could look something like this.
````md ````md
@@ -151,7 +151,7 @@ const layoutB =
<inline-notification type="warning"> <inline-notification type="warning">
Partial html is not supported in [lit](http://lit.dev) as it uses the browser build in html parser which try to "auto correct" your html by closing tags. Partial html is not supported in [lit](http://lit.dev) as it uses the browser build in html parser which trys to "auto correct" your html by closing tags.
e.g. this e.g. this
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->

View File

@@ -30,7 +30,7 @@ Rocket uses **file-based routing** to generate your build URLs based on the file
## Static routes ## Static routes
Rocket Pages are Markdown (`rocket.md`), HTML (`rocket.html`) and JavaScript (`rocket.js`) in the `site/pages` directory become pages on your website. Each pages route is decided based on its filename and path within the `site/pages` directory. This means that there is no separate "routing config" to maintain in an Rocket project. Rocket Pages are Markdown (`rocket.md`), HTML (`rocket.html`) and JavaScript (`rocket.js`) in the `site/pages` directory become pages on your website. Each pages route is decided based on its filename and path within the `site/pages` directory. This means that there is no separate "routing config" to maintain in a Rocket project.
```bash ```bash
# Example: Static routes # Example: Static routes

View File

@@ -76,7 +76,7 @@ This will result in something like this:
</nav> </nav>
``` ```
Rocket comes with multiple build in menus you can see [below](#menu-types). Rocket comes with multiple built-in menus you can see [below](#menu-types).
## Menu Data ## Menu Data
@@ -107,11 +107,11 @@ Now the menu will be called "Docs".
Within a menu the text of the links is defined by the following priority: Within a menu the text of the links is defined by the following priority:
1. menuLinkText => `export const menuLinkText = 'Page Title In Menu';` 1. menuLinkText => `export const menuLinkText = 'Page Title In Menu';`
2. h1 => first `<h1>` in the page) 2. h1 => first `<h1>` in the page
3. title => html title tag 3. title => html title tag
4. sourceRelativeFilePath => fallback if no other option is available 4. sourceRelativeFilePath => fallback if no other option is available
You can influence that data that gets provided to the menu by setting exports. You can influence the data that gets provided to the menu by setting exports.
### link-text="..." ### link-text="..."
@@ -168,7 +168,7 @@ Sometimes there is a need to completely exclude a page from the pageTree.
Pages with this flag will not exist at all in the pageTree - therefore you will not be able to access them for "anything" not even in a sitemap or an update feed. Pages with this flag will not exist at all in the pageTree - therefore you will not be able to access them for "anything" not even in a sitemap or an update feed.
Pages that have sub pages can NOT use this flag as it would mean those sub pages would not have a parent page. Pages that have sub pages can NOT use this flag as it would mean those sub pages would not have a parent page.
Typical use case are utility pages that are not meant to be accessed by typical users. Typical use cases are utility pages that are not meant to be accessed by typical users.
```js ```js
export const menuExclude = true; export const menuExclude = true;
@@ -245,7 +245,7 @@ In case you want to take full control over the order you can apply the following
- The menu order and file system order will no longer match - The menu order and file system order will no longer match
- But no numbers in folder / filenames - But no numbers in folder / filenames
3. Instantiate a new PageTree and providing your own `modelComparatorFn` 3. Instantiate a new PageTree and provide your own `modelComparatorFn`
```js ```js
function modelComparatorFn(a, b) { function modelComparatorFn(a, b) {
@@ -261,7 +261,7 @@ In case you want to take full control over the order you can apply the following
## Page Tree ## Page Tree
The data of the page tree gets saves as a JSON file in the root of the `pages` directory. The data of the page tree gets saved as a JSON file in the root of the `pages` directory.
It typically looks something like this: It typically looks something like this:
@@ -440,7 +440,7 @@ import {
5. **NextMenu** 5. **NextMenu**
- shows the next page in the tree - shows the next page in the tree
- is either the first child or he next sibling - is either the first child or the next sibling
```html ```html
<web-menu name="next"> <web-menu name="next">

View File

@@ -31,7 +31,7 @@ export const needsLoader = true;
# Hydration # Hydration
By default all components are only rendered on the server. By default all components are only rendered on the server.
This however means those components are "static" and can not add interactivity. However, this means those components are "static" and can not add interactivity.
To add interactivity to your component you can either render it only on the client or you can render on the server and `hydrate` it on the client. To add interactivity to your component you can either render it only on the client or you can render on the server and `hydrate` it on the client.
@@ -69,9 +69,9 @@ The automatic loading/hydration only works if you [register components to the ro
## Server Loading ## Server Loading
Server Loading has almost zero impact on the client side page performance and is therefore fastest possible solution available. Server Loading has almost zero impact on the client side page performance and is therefore the fastest possible solution available.
Loading and rendering on the server is the default and for that reasons does not need to be specified. Loading and rendering on the server is the default and for that reason does not need to be specified.
```html ```html
<blog-header></blog-header> <blog-header></blog-header>
@@ -263,7 +263,7 @@ Results in `server rendering` of all `my-component`s.
Why theses impacts? Why theses impacts?
1. client - if you eagerly load & render the component on the client then bloating the html of some components by server rendering does not bring any benefit 1. client - if you eagerly load & render the component on the client then bloating the html of some components by server rendering does not bring any benefit
2. hydrate - hydration means that all component with the same tag name will be hydrated on the client - you can not keep a server only variation of a component 2. hydrate - hydration means that all components with the same tag name will be hydrated on the client - you can not keep a server only variation of a component
3. server - almost zero client side impact 3. server - almost zero client side impact
<inline-notification> <inline-notification>

View File

@@ -103,7 +103,7 @@ If your package is `"type": "module"` then you can also add exports.
} }
``` ```
Once you have an export it also enables to "self" reference your package. Once you have an export it also enables you to "self" reference your package.
Combine this with the `:resolve` function means that you can reference assets always with the same path. Combine this with the `:resolve` function means that you can reference assets always with the same path.
Completely unrelated to the path of the file itself. Completely unrelated to the path of the file itself.

View File

@@ -54,7 +54,7 @@ For settings that may be overridden within a page, use the [**data cascade**](./
</inline-notification> </inline-notification>
Rocket is primarily build around plugins for each of its systems. Rocket is primarily built around plugins for each of its systems.
Given that rocket comes with a list of default plugins and that presets can add plugins it's very important to not "just" set a new "plugins" property. Given that rocket comes with a list of default plugins and that presets can add plugins it's very important to not "just" set a new "plugins" property.
@@ -65,7 +65,7 @@ New plugins can be added and all default plugins can be adjusted or even removed
```js ```js
/** @type {import('rocket/cli').RocketCliConfig} */ /** @type {import('rocket/cli').RocketCliConfig} */
export default { export default {
// add a rollup plugins to the web dev server (will be wrapped with @web/dev-server-rollup) AND the rollup build (e.g. enable json importing) // add a rollup plugin to the web dev server (will be wrapped with @web/dev-server-rollup) AND the rollup build (e.g. enable json importing)
setupDevServerAndBuildPlugins: [], setupDevServerAndBuildPlugins: [],
// add a plugin to the web dev server (will not be wrapped) (e.g. esbuild for TypeScript) // add a plugin to the web dev server (will not be wrapped) (e.g. esbuild for TypeScript)
@@ -139,7 +139,7 @@ For some projects you might want to enable non-standard behaviors like importing
import data from './data.json'; import data from './data.json';
``` ```
You can accomplish this with Rollup and dev server plugins. Make sure to add both the dev-server plugin as well as the Rollup plugin, so that the behaviors is the same during development as it is in the production build. You can accomplish this with Rollup and dev server plugins. Make sure to add both the dev-server plugin as well as the Rollup plugin, so that the behavior is the same during development as it is in the production build.
For these cases you can use `setupDevServerAndBuildPlugins`, which will automatically add the plugin for you to both Rollup and dev-server: For these cases you can use `setupDevServerAndBuildPlugins`, which will automatically add the plugin for you to both Rollup and dev-server:
@@ -186,7 +186,7 @@ export default /** @type {import('rocket/cli').RocketCliOptions} */ ({
### BuildOptions (rollup) ### BuildOptions (rollup)
For example if you wanna add an `acron` plugin to rollup For example if you wanna add an `acorn` plugin to rollup
```js ```js
import { importAssertions } from 'acorn-import-assertions'; import { importAssertions } from 'acorn-import-assertions';

View File

@@ -34,7 +34,7 @@ export const subTitle =
Having a nice preview image for social media can be very helpful. Having a nice preview image for social media can be very helpful.
For that reason Rocket has a specific functionality to generate a preview image. For that reason Rocket has a specific functionality to generate a preview image.
This functionality is disable by default. You can enable it by exporting a `openGraphLayout` function/class instance. This functionality is disabled by default. You can enable it by exporting a `openGraphLayout` function/class instance.
The functionality is the same as normal [Layouts](../20--basics/50--layouts.rocket.md). The functionality is the same as normal [Layouts](../20--basics/50--layouts.rocket.md).
@@ -53,7 +53,7 @@ The functionality is the same as normal [Layouts](../20--basics/50--layouts.rock
site/pages/sitemap.xml.rocket.js -> open graph only happens for html files site/pages/sitemap.xml.rocket.js -> open graph only happens for html files
``` ```
2. During the the build phase is does the following steps 2. During the build phase it does the following steps
3. If there is a `filename.opengraph.html` file it will open that file in puppeteer 3. If there is a `filename.opengraph.html` file it will open that file in puppeteer
4. It sets its screen size to 1200×628px and takes a screenshot with DPR or 2 (e.g. the image will have 2400x1228px) 4. It sets its screen size to 1200×628px and takes a screenshot with DPR or 2 (e.g. the image will have 2400x1228px)
5. Adjusts the "output file" e.g. `index.html` by injecting 5. Adjusts the "output file" e.g. `index.html` by injecting
@@ -66,13 +66,13 @@ The functionality is the same as normal [Layouts](../20--basics/50--layouts.rock
if no `<meta property="og:image"` is present if no `<meta property="og:image"` is present
6. deletes the `filename.opengraph.html` file 6. Deletes the `filename.opengraph.html` file
## How to use it ## How to use it
Add an `openGraphLayout` export to our page. Add an `openGraphLayout` export to our page.
Generally it's probably bet if we put this in our root `recursive.data.js` file which means that every page will have this functionality. Generally it's probably best if we put this in our root `recursive.data.js` file which means that every page will have this functionality.
If a certain page needs a different layout we can override it. If a certain page needs a different layout we can override it.
👉 `recursive.data.js` 👉 `recursive.data.js`
@@ -244,7 +244,7 @@ export const subTitle = 'From zero to hero';
## Creating an Overview ## Creating an Overview
Once you have defined an openGraphLayout for all you pages it makes sense to check them. Once you have defined an openGraphLayout for all your pages it makes sense to check them.
This however can be a time consuming process. This however can be a time consuming process.
So it makes sense to use an overview over all the open graph images we will have. So it makes sense to use an overview over all the open graph images we will have.
@@ -312,7 +312,7 @@ export const layout = data => html`
`; `;
``` ```
There is quite some much in there so let's go though the code. There is quite a lot in there so let's go though the code.
```js ```js
import { pageTree } from '#src/layouts/layoutData.js'; import { pageTree } from '#src/layouts/layoutData.js';

View File

@@ -39,7 +39,7 @@ Rocket does handle content images automatically by
- producing multiple sizes so users download images that are meant for their resolution - producing multiple sizes so users download images that are meant for their resolution
- outputting multiple formats so the device can choose the best image format it supports - outputting multiple formats so the device can choose the best image format it supports
And the best thing about is you don't need to do anything. And the best thing is you don't need to do anything.
## Usage ## Usage
@@ -110,11 +110,11 @@ will result in
## Adjusting options ## Adjusting options
Under the hood it is using [11ty/image](https://www.11ty.dev/docs/plugins/image/) and all it's options are available. Under the hood it is using [11ty/image](https://www.11ty.dev/docs/plugins/image/) and all its options are available.
<inline-notification type="tip"> <inline-notification type="tip">
If you are using a layout preset like `@rocket/launch` then you probably don't want to touch/change these options as the preset will set it for you accordion to its layout needs. If you are using a layout preset like `@rocket/launch` then you probably don't want to touch/change these options as the preset will set it for you according to its layout needs.
The default preset for regular markdown content is available as `responsive`. The default preset for regular markdown content is available as `responsive`.
@@ -282,7 +282,7 @@ export default {
## Default widths ## Default widths
In order to understand the need for having a single image in multiple resolutions we need to understand the our website is served to many different environments and each may come with its own specific device pixel ratio (DPR). The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the Galaxy S20 report a device pixel ratio of 3, because the physical linear resolution is triple the logical linear resolution. In order to understand the need for having a single image in multiple resolutions we need to understand that our website is served to many different environments and each may come with its own specific device pixel ratio (DPR). The device pixel ratio is the ratio between physical pixels and logical pixels. For instance, the Galaxy S20 report a device pixel ratio of 3, because the physical linear resolution is triple the logical linear resolution.
Physical resolution: 1440 x 3200 Physical resolution: 1440 x 3200
Logical resolution: 480 x 1067 Logical resolution: 480 x 1067

View File

@@ -35,7 +35,7 @@ export const subTitle = 'Use web fonts to ensure a unique and consistent experie
Using web fonts can be tricky and as there are so many considerations Using web fonts can be tricky and as there are so many considerations
- Use a [Variable Font](https://web.dev/variable-fonts/)? - Use a [Variable Font](https://web.dev/variable-fonts/)?
- How to [reduced the size](https://web.dev/reduce-webfont-size/)? - How to [reduce the size](https://web.dev/reduce-webfont-size/)?
- How to avoid [a layout shift as the font is loaded](https://web.dev/preload-optional-fonts/)? - How to avoid [a layout shift as the font is loaded](https://web.dev/preload-optional-fonts/)?
- ... - ...
@@ -44,7 +44,7 @@ Here is a quick summary of what you should do as of 2022.
1. Use a variable font 1. Use a variable font
This means only ONE font file needs to be download for all the different weights and widths. This means only ONE font file needs to be download for all the different weights and widths.
This file is usually bigger then one weight of a font but smaller then multiple weights font files. This file is usually bigger than one weight of a font but smaller than multiple weights font files.
Not many fonts are "easily" accessible as a variable font. Often you need to manually [convert](https://convertio.co/ttf-woff/) a variable font ttf file to a web woff2 file. Not many fonts are "easily" accessible as a variable font. Often you need to manually [convert](https://convertio.co/ttf-woff/) a variable font ttf file to a web woff2 file.
@@ -75,7 +75,7 @@ Here is a quick summary of what you should do as of 2022.
3. Use optional fonts 3. Use optional fonts
In combination with 2. this means there will be NO layout shift at all. Nothing will be display until the font is loaded or a timeout (usually 100ms) is reached. If there is a timeout then for this page visit a fallback font will be used. In combination with 2. this means there will be NO layout shift at all. Nothing will be displayed until the font is loaded or a timeout (usually 100ms) is reached. If there is a timeout then for this page visit a fallback font will be used.
On the next page load the font will be cached and directly rendered with the web font. On the next page load the font will be cached and directly rendered with the web font.
```css ```css

View File

@@ -53,7 +53,7 @@ export const layout = new LayoutSidebar();
``` ```
You should also define it as a preset in the configuration so that it can copy some default public files. You should also define it as a preset in the configuration so that it can copy some default public files.
(this step is not requires but it is recommended) (this step is not required but it is recommended)
👉 `config/rocket.config.js` 👉 `config/rocket.config.js`

View File

@@ -79,7 +79,7 @@ The registration happens via
<script type="module" src="resolve:@rocket/launch/js/register-service-worker.js"></script> <script type="module" src="resolve:@rocket/launch/js/register-service-worker.js"></script>
``` ```
Below you find its implementation Below you'll find its implementation
```js server ```js server
const serviceWorkerRegistrationCode = await inlineFile( const serviceWorkerRegistrationCode = await inlineFile(