Skip to content

Commit

Permalink
fix(docs): reference version number.
Browse files Browse the repository at this point in the history
  • Loading branch information
Gervwyk committed Jul 18, 2023
1 parent 7a357d1 commit b121006
Show file tree
Hide file tree
Showing 3 changed files with 398 additions and 383 deletions.
65 changes: 35 additions & 30 deletions packages/docs/concepts/custom-html.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -29,46 +29,51 @@ _ref:
- id: md1
type: MarkdownWithCode
properties:
content: |
Lowdefy runs as Next.Js app. It is possible to extend the functionality of a Lowdefy app by loading custom code (HTML, CSS and JavaScript) into the HTML `head` and `body` of all pages. This can be useful for executing third party code such as Google Analytics, Intercom, etc. However, if the goal is to extend the functionality of your Lowdefy app with custom blocks, operators, actions or requests, use [plugins](/plugins).
content:
_nunjucks:
on:
version:
_ref: version.yaml
template: |
Lowdefy runs as Next.Js app. It is possible to extend the functionality of a Lowdefy app by loading custom code (HTML, CSS and JavaScript) into the HTML `head` and `body` of all pages. This can be useful for executing third party code such as Google Analytics, Intercom, etc. However, if the goal is to extend the functionality of your Lowdefy app with custom blocks, operators, actions or requests, use [plugins](/plugins).
The content loaded into the `head` and `body` tag can be any valid HTML. Be sure to only load trusted code into your app, as this code will be able to execute JavaScript on all pages of your Lowdefy app, which could expose you app or data to security vulnerabilities. Your own code can also be hosted from the [Lowdefy public folder](/hosting-files).
The content loaded into the `head` and `body` tag can be any valid HTML. Be sure to only load trusted code into your app, as this code will be able to execute JavaScript on all pages of your Lowdefy app, which could expose you app or data to security vulnerabilities. Your own code can also be hosted from the [Lowdefy public folder](/hosting-files).
## Schema to load custom code
## Schema to load custom code
- `app.html.appendHead: string`: Any valid HTML content can be loaded just before the `</head>` tag of the page.
- `app.html.appendBody: string`: Any valid HTML content can be loaded just before the `</body>` tag of the page.
- `app.html.appendHead: string`: Any valid HTML content can be loaded just before the `</head>` tag of the page.
- `app.html.appendBody: string`: Any valid HTML content can be loaded just before the `</body>` tag of the page.
Most often it is convenient to abstract this HTML out to a separate file using the [`_ref`](/_ref) operator.
Most often it is convenient to abstract this HTML out to a separate file using the [`_ref`](/_ref) operator.
> __Warning__: Code imported using `appendHead` or `appendBody` will be loaded, and can execute JavaScript on every page of your Lowdefy app.
> __Warning__: Code imported using `appendHead` or `appendBody` will be loaded, and can execute JavaScript on every page of your Lowdefy app.
#### Examples
#### Examples
###### Loading third party code snippet like Google Analytics:
###### Loading third party code snippet like Google Analytics:
To add [Google Analytics](/https://developers.google.com/analytics/devguides/collection/analyticsjs) to a Lowdefy app, the `lowdefy.yaml` can be setup with:
To add [Google Analytics](/https://developers.google.com/analytics/devguides/collection/analyticsjs) to a Lowdefy app, the `lowdefy.yaml` can be setup with:
```yaml
name: google-analytics-example
lowdefy: 3.23.2
# ...
app:
html:
appendHead: |
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
```yaml
name: google-analytics-example
lowdefy: {{ version }}
# ...
app:
html:
appendHead: |
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
# ...
```
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
# ...
```
- _ref:
path: templates/navigation_buttons.yaml
vars:
Expand Down

0 comments on commit b121006

Please sign in to comment.