diff --git a/bun.lockb b/bun.lockb
index bc93c67..27d9837 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 70e5c15..36f66d9 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"dayjs": "^1.11.10",
+ "htmx.org": "^1.9.12",
"kysely": "^0.26.0",
"lucide-react": "^0.309.0",
"nanoid": "^5.0.4",
diff --git a/src/components/WebComponentWrapper.astro b/src/components/WebComponentWrapper.astro
index d0695b4..dd003ce 100644
--- a/src/components/WebComponentWrapper.astro
+++ b/src/components/WebComponentWrapper.astro
@@ -1,4 +1,6 @@
---
+import { LockClosedIcon } from "@radix-ui/react-icons";
+
interface Props {
contentId?: string;
imageUrl: string;
@@ -9,8 +11,47 @@ const { contentId = "", imageUrl = "#", location = "" } = Astro.props;
---
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ İçeriği görmek için butona bas!
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
İçeriği görmek için butona bas!
-
-
-
-
-
+
-
+
diff --git a/src/components/locked-content.ts b/src/components/locked-content.ts
new file mode 100644
index 0000000..58018e9
--- /dev/null
+++ b/src/components/locked-content.ts
@@ -0,0 +1,62 @@
+class LockedContent extends HTMLElement {
+ constructor() {
+ super();
+
+ // Clone the template
+ let template = document.getElementById(
+ "locked-content-template"
+ ) as HTMLTemplateElement;
+ let templateContent = template.content;
+
+ // Get attributes
+ const contentId = this.getAttribute("contentId");
+ const imageURL = this.getAttribute("imageURL") ?? "#";
+
+ // Fetch functions
+ const incrementCounter = async (id: string) =>
+ await fetch(`http://localhost:3000/api/location/increment/${id}`, {
+ method: "PATCH",
+ });
+
+ // Attach cloned template to DOM
+ const shadowRoot = this.attachShadow({ mode: "open" });
+ shadowRoot.appendChild(templateContent.cloneNode(true));
+
+ // Set image source URL
+ const content = shadowRoot.getElementById("content") as HTMLImageElement;
+ content.src = imageURL;
+
+ // Add onclick listener to unlock content button
+ const unlockContentButton = shadowRoot.getElementById(
+ "unlock-content-button"
+ );
+
+ if (unlockContentButton) {
+ unlockContentButton.addEventListener("click", () => {
+ if (contentId) {
+ incrementCounter(contentId);
+ }
+ });
+ }
+ }
+}
+
+class UnlockContentButton extends HTMLElement {
+ constructor() {
+ super();
+
+ const host = document.getElementById("locked-content");
+
+ if (host) {
+ let template = host.shadowRoot?.getElementById(
+ "unlock-content-button-template"
+ ) as HTMLTemplateElement;
+ let templateContent = template.content;
+
+ this.appendChild(templateContent.cloneNode(true));
+ }
+ }
+}
+
+customElements.define("locked-content", LockedContent);
+customElements.define("unlock-content-button", UnlockContentButton);
diff --git a/src/env.d.ts b/src/env.d.ts
index 381873d..0cce2e4 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -2,3 +2,9 @@
///
///
///
+
+export declare global {
+ interface Window {
+ htmx: any;
+ }
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b417c12..06682d2 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -38,5 +38,11 @@
+
+