You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: site/pages/10--docs/10--setup/20--adding-pages.rocket.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,11 +44,11 @@ Before we get started we need to engage the engines via
44
44
npm start
45
45
```
46
46
47
-
This with start rocket in development mode and you will see your site running in your browser.
47
+
This will start rocket in development mode and you will see your site running in your browser.
48
48
49
49
## What is a page?
50
50
51
-
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.
51
+
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.
52
52
53
53
The simplest way to get started is to create a file
Copy file name to clipboardExpand all lines: site/pages/10--docs/20--basics/10--project-structure.rocket.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,7 +53,7 @@ e.g.
53
53
54
54
## Recommended Project Structure
55
55
56
-
Even if there is no enforce project structure it still makes sense to follow some common best practices.
56
+
Even if there is no enforced project structure it still makes sense to follow some common best practices.
57
57
58
58
-`site/pages/*` - All the pages of your website (e.g. all `*.rocket.{js,md,html}` files)
59
59
-`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
116
116
117
117
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.
118
118
119
-
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.
119
+
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.
Copy file name to clipboardExpand all lines: site/pages/10--docs/20--basics/20--pages.rocket.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,19 +30,19 @@ export const description = `An intro to Rocket pages, which is the actual websit
30
30
31
31
# Pages
32
32
33
-
**Pages** are a the only files that get rendered into the output folder.
33
+
**Pages** are the only files that get rendered into the output folder.
34
34
35
35
3 types of pages are supported:
36
36
37
37
-`*.rocket.md` - A page with markdown content.
38
38
-`*.rocket.html` - A page with HTML content.
39
39
-`*.rocket.js` - A page with JavaScript content.
40
40
41
-
Feel free to choose a format for each pages that best suits its content.
41
+
Feel free to choose a format for each page that best suits its content.
42
42
43
43
## File-based Routing
44
44
45
-
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.
45
+
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.
46
46
47
47
```
48
48
site/pages/index.rocket.md -> mysite.com/
@@ -72,7 +72,7 @@ export default () => `
72
72
73
73
👆 This is the JavaScript version which all other formats automatically convert to.
74
74
75
-
However for you your convenience you can also write your page in HTML and it will be automatically converted into the JavaScript version above.
75
+
However for your convenience you can also write your page in HTML and it will be automatically converted into the JavaScript version above.
76
76
77
77
👉 `site/pages/index.rocket.html`
78
78
@@ -104,8 +104,8 @@ Or you can write markdown.
104
104
105
105
Markdown and HTML files are automatically converted to their JavaScript equivalents.
106
106
That is also how they get their template literal super powers.
107
-
Those converted files only life for a fraction of a second and are deleted after the page is done rendering.
108
-
If you would like to keep them for debugging or out of curiosity you can export the following flag to prefect the cleanup.
107
+
Those converted files only live for a fraction of a second and are deleted after the page is done rendering.
108
+
If you would like to keep them for debugging or out of curiosity you can export the following flag to prevent the cleanup.
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.
31
+
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.
32
32
33
33
<inline-notification>
34
34
35
-
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).
35
+
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).
36
36
37
37
</inline-notification>
38
38
@@ -84,7 +84,7 @@ We can now put this code in Rocket JavaScript, Markdown or Html pages.
84
84
<rocket-greeting>Go</rocket-greeting>
85
85
````
86
86
87
-
will result a server rendered output that does not load ANY JavaScript
87
+
will result in a server rendered output that does not load ANY JavaScript
88
88
89
89
```
90
90
Hello World
@@ -124,7 +124,7 @@ Note the empty lines between html & markdown. They are necessary as this is how
124
124
125
125
## Manually Loading Components
126
126
127
-
We can define as many components as we want within a page but typically it's best to define them in a separate files.
127
+
We can define as many components as we want within a page but typically it's best to define them in separate files.
128
128
129
129
So we will move our component code into a new file 👉 `/site/src/components/rocket-greeting.js`
130
130
@@ -257,8 +257,8 @@ export const components = {
257
257
258
258
### Hydration
259
259
260
-
Component that do not have any interactivity will never need to be hydrated so they may be imported statically on the server side.
261
-
All other component should be handled via the `components` object to enable handling of loading and registration.
260
+
Components that do not have any interactivity will never need to be hydrated so they may be imported statically on the server side.
261
+
All other components should be handled via the `components` object to enable handling of loading and registration.
262
262
263
263
Doing so enables hydration based on attributes on the component.
and that will work fine however now every page will have the same `title` in the head.
51
+
and that will work fine, however, now every page will have the same `title` in the head.
52
52
53
53
If we now have the following markdown file:
54
54
@@ -95,7 +95,7 @@ For more details see the following [lit issue](https://github.com/lit/lit/issues
95
95
96
96
</inline-notification>
97
97
98
-
In order to provide this `data.title` we now need to export is within the page.
98
+
In order to provide this `data.title` we now need to export it within the page.
99
99
The code could look something like this.
100
100
101
101
````md
@@ -151,7 +151,7 @@ const layoutB =
151
151
152
152
<inline-notificationtype="warning">
153
153
154
-
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.
154
+
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.
Copy file name to clipboardExpand all lines: site/pages/10--docs/20--basics/60--routing.rocket.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ Rocket uses **file-based routing** to generate your build URLs based on the file
30
30
31
31
## Static routes
32
32
33
-
Rocket Pages are Markdown (`rocket.md`), HTML (`rocket.html`) and JavaScript (`rocket.js`) in the `site/pages` directory become pages on your website. Each page’s 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.
33
+
Rocket Pages are Markdown (`rocket.md`), HTML (`rocket.html`) and JavaScript (`rocket.js`) in the `site/pages` directory become pages on your website. Each page’s 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.
Copy file name to clipboardExpand all lines: site/pages/10--docs/20--basics/70--navigation.rocket.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -76,7 +76,7 @@ This will result in something like this:
76
76
</nav>
77
77
```
78
78
79
-
Rocket comes with multiple build in menus you can see [below](#menu-types).
79
+
Rocket comes with multiple built-in menus you can see [below](#menu-types).
80
80
81
81
## Menu Data
82
82
@@ -107,11 +107,11 @@ Now the menu will be called "Docs".
107
107
Within a menu the text of the links is defined by the following priority:
108
108
109
109
1. menuLinkText => `exportconstmenuLinkText='Page Title In Menu';`
110
-
2. h1 => first `<h1>` in the page)
110
+
2. h1 => first `<h1>` in the page
111
111
3. title => html title tag
112
112
4. sourceRelativeFilePath => fallback if no other option is available
113
113
114
-
You can influence that data that gets provided to the menu by setting exports.
114
+
You can influence the data that gets provided to the menu by setting exports.
115
115
116
116
### link-text="..."
117
117
@@ -168,7 +168,7 @@ Sometimes there is a need to completely exclude a page from the pageTree.
168
168
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.
169
169
Pages that have sub pages can NOT use this flag as it would mean those sub pages would not have a parent page.
170
170
171
-
Typical use case are utility pages that are not meant to be accessed by typical users.
171
+
Typical use cases are utility pages that are not meant to be accessed by typical users.
172
172
173
173
```js
174
174
exportconstmenuExclude=true;
@@ -245,7 +245,7 @@ In case you want to take full control over the order you can apply the following
245
245
- The menu order and file system order will no longer match
246
246
- But no numbers in folder / filenames
247
247
248
-
3. Instantiate a new PageTree and providing your own `modelComparatorFn`
248
+
3. Instantiate a new PageTree and provide your own `modelComparatorFn`
249
249
250
250
```js
251
251
functionmodelComparatorFn(a, b) {
@@ -261,7 +261,7 @@ In case you want to take full control over the order you can apply the following
261
261
262
262
## Page Tree
263
263
264
-
The data of the page tree gets saves as a JSON file in the root of the `pages` directory.
264
+
The data of the page tree gets saved as a JSON file in the root of the `pages` directory.
By default all components are only rendered on the server.
34
-
This however means those components are "static" and can not add interactivity.
34
+
However, this means those components are "static" and can not add interactivity.
35
35
36
36
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.
37
37
@@ -69,9 +69,9 @@ The automatic loading/hydration only works if you [register components to the ro
69
69
70
70
## Server Loading
71
71
72
-
Server Loading has almost zero impact on the client side page performance and is therefore fastest possible solution available.
72
+
Server Loading has almost zero impact on the client side page performance and is therefore the fastest possible solution available.
73
73
74
-
Loading and rendering on the server is the default and for that reasons does not need to be specified.
74
+
Loading and rendering on the server is the default and for that reason does not need to be specified.
75
75
76
76
```html
77
77
<blog-header></blog-header>
@@ -263,7 +263,7 @@ Results in `server rendering` of all `my-component`s.
263
263
Why theses impacts?
264
264
265
265
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
266
-
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
266
+
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
0 commit comments