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.

Sign up for GitHub

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

Proof of concept of using client-side script in astro #112

Closed
wants to merge 2 commits into from
Closed

Proof of concept of using client-side script in astro #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
508abd6
Use `document` and import script inside astro component
pkong-ds Aug 26, 2024
90e3c62
Workaround astro `src/pages` server side build by defining components…
pkong-ds Aug 26, 2024
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
6 changes: 6 additions & 0 deletions ...es/developerTools/DeveloperToolCard.astro → ...DeveloperToolCard/DeveloperToolCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ import "./developer-tools-card.css";
const { url, imageSrc, title, content, id } = Astro.props;
---

<!--
NOTE: we added underscore prefix to make Astro ignore these client-side scripts, such that `document` and `window` can be accessed
ref https://github.com/withastro/astro/issues/5873#issuecomment-1384642348
-->
<script src="./developer-tools-card.ts"></script>

<a href={url ?? "#"} target="_blank">
<div class="developer-tools-card" id={id}>
<img src={imageSrc} />
Expand Down
0 ...s/developerTools/developer-tools-card.css → ...eveloperToolCard/developer-tools-card.css
View file
Open in desktop
File renamed without changes.
3 changes: 3 additions & 0 deletions src/components/DeveloperToolCard/developer-tools-card.ts
View file
Open in desktop
Copy link
Collaborator Author

@pkong-ds pkong-ds Aug 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Approach 2

  • Move all astro files into other folders, e.g. src/componetns
    • Maybe even better, move all pages to src/astro-pages/
      • e.g. src/astro-pages/DeveloperToolsPage.astro
      • then, in src/pages/developerTools/index.astro, only import the src/astro-pages/DeveloperToolsPage.astro w/o any extra logic
      • that way, we can work around src/pages problem

rationale: only src/pages scripts are buggy

Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { hi } from "./fn";

document.addEventListener("click", hi);
3 changes: 3 additions & 0 deletions src/components/DeveloperToolCard/fn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function hi() {
alert("hi");
}
2 changes: 1 addition & 1 deletion src/pages/developerTools/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro";
import DeveloperToolCard from "./DeveloperToolCard.astro";
import DeveloperToolCard from "../../components/DeveloperToolCard/DeveloperToolCard.astro";
import "./index.css";
---

Expand Down
Loading