Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ci: update integration docs #4060

Merged
merged 3 commits into from
Aug 5, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/docs/en/guides/integrations-guide/deno.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ npm run preview
After [performing a build](/en/guides/deploy/#building-your-site-locally) there will be a `dist/server/entry.mjs` module. You can start a server by importing this module in your Deno app:

```js
import './dist/entry.mjs';
import './dist/server/entry.mjs';
```

See the `start` option below for how you can have more control over starting the Astro server.
Expand Down Expand Up @@ -141,7 +141,7 @@ If you disable this, you need to write your own Deno web server. Import and call

```ts
import { serve } from 'https://deno.land/[email protected]/http/server.ts';
import { handle } from './dist/entry.mjs';
import { handle } from './dist/server/entry.mjs';

serve((req: Request) => {
// Check the request, maybe do static file handling here.
Expand Down
18 changes: 4 additions & 14 deletions src/content/docs/en/guides/integrations-guide/lit.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -82,35 +82,25 @@ To use your first Lit component in Astro, head to our [UI framework documentatio
* 💧 client-side hydration options, and
* 🤝 opportunities to mix and nest frameworks together

However, there's a key difference with Lit *custom elements* over conventional *components*: you can use the element tag name directly.

Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
Writing and importing a Lit component in Astro looks like this:

```js
// src/components/my-element.js
import { LitElement, html } from 'lit';

const tagName = 'my-element';

export class MyElement extends LitElement {
render() {
return html` <p>Hello world! From my-element</p> `;
}
}

customElements.define(tagName, MyElement);
customElements.define('my-element', MyElement);
```

> Note that exporting the `tagName` is **required** if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.

In your Astro template import this component as a side-effect and use the element.
Now, the component is ready to be imported via the Astro frontmatter:

```astro
---
// src/pages/index.astro
import { MyElement } from '../components/my-element.js';
---

// src/pages/index.astro import {MyElement} from '../components/my-element.js';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this right?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<MyElement />
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export default defineConfig({

## Examples

* [Browse projects with Astro Partytown on GitHub](https://github.com/search?q=%22@astrojs/partytown%22+filename:package.json\&type=Code) for more examples!
* [Browse projects with Astro Partytown on GitHub](https://github.com/search?q=%22%40astrojs%2Fpartytown%22+path%3A**%2Fpackage.json&type=code) for more examples!

## Troubleshooting

Expand Down
Loading