## Explanation
-### Concept of Pointers
-In [UIX](https://uix.unyt.org), [Pointers](https://unyt.org/glossary#pointer) are a fundamental concept for managing shared data across different parts of your application. Pointers allow different components or [endpoints](https://unyt.org/glossary#endpoint) to access and modify the same data. In the context of our shared shopping list, a Pointer could represent the list of items to buy.
+### Persistent Storage of Files
+To provide a seamless experience, our screenshot app demonstrates how to persistently store files. This means that even if the application is restarted, previous screenshots will be stored.
-Pointers are synchronized over the [Supranet](https://unyt.org/glossary#supranet), based on our powerful [DATEX](https://datex.unyt.org) networking protocol that ensures real-time updates and consistency across endpoints. When one user adds or removes an item from the shopping list, the changes are propagated to all connected endpoints through the Supranet, keeping the data in sync.
-
-### Persistent Storage of Pointer Data
-To provide a seamless experience, our shared shopping list app also demonstrates how to persistently store Pointer data. This means that even if the application is restarted, the shopping list will be up-to-date.
-
-### Front-End Rendering and Hydration
-UIX supports both front-end and back-end rendering with hydration. Front-end rendering allows us to create a dynamic and interactive user interface on the client side. When a user interacts with the shopping list (e.g., adds or removes items), the changes are reflected in real-time.
-
-Hydration is the process of converting the initial HTML content sent from the server into a fully interactive UI on the client side. This ensures that the app is ready for user interactions as soon as it loads.
+### File Provider
+To access files the back-end exposes a route via UIX.FileProvider to serve static files.
---
diff --git a/app.dx b/app.dx
index 4974895..6ea6afb 100644
--- a/app.dx
+++ b/app.dx
@@ -1,4 +1,4 @@
-name: "SharedList Example",
+name: "Website Screenshot Example",
icon_path: "https://cdn.unyt.org/unyt-resources/logos/unyt/square-dark-background.png";
plugin git_deploy (
diff --git a/backend/.dx b/backend/.dx
index 366d003..f798781 100644
--- a/backend/.dx
+++ b/backend/.dx
@@ -1,7 +1,7 @@
use stage from #public.uix;
endpoint: stage {
- prod: @+example_list
+ prod: @+example_screenshot
},
location: stage {
@@ -9,5 +9,5 @@ location: stage {
},
domain: stage {
- prod: 'shared-list.unyt.app'
+ prod: 'screenshot.unyt.app'
}
\ No newline at end of file
diff --git a/backend/Capture.ts b/backend/Capture.ts
new file mode 100644
index 0000000..8d54634
--- /dev/null
+++ b/backend/Capture.ts
@@ -0,0 +1,24 @@
+import puppeteer from "https://deno.land/x/puppeteer@16.2.0/mod.ts";
+
+export default class Capture {
+ static async take(url: string | URL, fullPage = false, size = {
+ width: 1920,
+ height: 1080
+ }) {
+ const browser = await puppeteer.launch({
+ headless: true,
+ ignoreHTTPSErrors: true,
+ timeout: 60_000,
+ });
+ const page = await browser.newPage();
+ await page.setViewport(size);
+ await page.goto(url.toString(), {
+ waitUntil: "networkidle2"
+ });
+ const result = await page.screenshot({
+ fullPage
+ }) as Buffer;
+ await browser.close();
+ return result;
+ }
+}
\ No newline at end of file
diff --git a/backend/entrypoint.tsx b/backend/entrypoint.tsx
index 93704a9..be0de49 100644
--- a/backend/entrypoint.tsx
+++ b/backend/entrypoint.tsx
@@ -1,10 +1,39 @@
import { UIX } from "uix/uix.ts";
-import "common/theme.ts";
-import { Overview } from "common/components/Overview.tsx";
-import { listStorage } from "backend/lists.ts";
+import { UIX_CACHE_PATH } from "uix/uix_all.ts";
+import Capture from './Capture.ts';
+import { Path } from "uix/utils/path.ts";
+import { timeout } from "unyt_core/datex_all.ts";
-// The frontend routes definition
+@endpoint export class Screenshot {
+ @timeout(40_000)
+ @property static async take(url: string | URL, config?: {
+ width: number,
+ height: number,
+ fullSize?: boolean
+ }): Promise}/)
as HTMLImageElement;
+ }
+}
+
+// The backend routes definition
export default {
- '/': UIX.renderStatic(
-
-})
-export class List extends UIX.BaseComponent
-
- {this.options.$.list.$.title}
--
- {
- map(this.options.list.items, (item, index) =>
-
- - - - {item.$.amount} {item.$.type}{always(()=>item.amount! > 1 ? 's': '')} - - ) - } -
-
-
-
-
- this.addItem())}>Add
-
+
+})
+export class MainPage extends UIX.BaseComponent {
+ @id declare url: HTMLInputElement;
+ @id declare images: HTMLDivElement;
+ @id declare submit: HTMLDivElement;
+
+ private async capture() {
+ if (!this.submit.classList.contains("active"))
+ return;
+
+ const url = this.url.value.startsWith("http") ?
+ this.url.value :
+ `https://${this.url.value}`;
+
+ this.url.disabled = true;
+ this.submit.classList.toggle("active", false);
+ try {
+ const image = await Screenshot.take(url);
+ this.images.prepend(image);
+ } catch (error) {
+ console.error(error);
+ alert("Oups, could not create screenshot!");
+ } finally {
+ this.submit.classList.toggle("active", true);
+ this.url.disabled = false;
+ }
+ }
+}
\ No newline at end of file
diff --git a/common/components/Overview.scss b/common/components/Overview.scss
deleted file mode 100644
index c959bf7..0000000
--- a/common/components/Overview.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-
-:host {
- &>div {
- display: flex;
- flex-direction: column;
- font-size: x-large;
- margin-top: 40px;
- padding: 10px;
- text-align: center;
- grid-gap: 20px;
- gap: 20px;
- }
-}
diff --git a/common/components/Overview.tsx b/common/components/Overview.tsx
deleted file mode 100644
index c41a0e1..0000000
--- a/common/components/Overview.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { UIX } from "uix";
-import { SharedList } from "backend/lists.ts";
-import { map } from "unyt_core/functions.ts";
-
-@UIX.template(function(this: Overview) {
- return UIX Screenshot App
+ Get a screenshot of any given URL. + + +this.capture())} class="submit active">Capture
+
+ Screenshot
+ +
-
-})
-export class Overview extends UIX.BaseComponent<{lists: Map