Initial upload

README.md

@@ -1,17 +1,17 @@
-# Example: Shared Shopping List
+# Example: Screenshot app
 
-This repository demonstrates some essential concept of the [UIX](https://uix.unyt.org) framework such as [pointers](https://unyt.org/glossary#pointer), [SSR](https://unyt.org/glossary#ssr) and [Web components](https://unyt.org/glossary#web-components) using the example of a **shared shopping list**.
+This repository demonstrates some essential concept of the [UIX](https://uix.unyt.org) framework such as [Realm Imports](https://unyt.org/glossary#realm-import) and [Web components](https://unyt.org/glossary#web-components) using the example of a **website screenshot app**.
 
 
-The repository includes persistent data storage and implements both [front-end](https://unyt.org/glossary#back-end) and [back-end](https://unyt.org/glossary#back-end) rendering with [hydration](https://unyt.org/glossary#hydration).
+The repository includes persistent file storage and implements [front-end](https://unyt.org/glossary#back-end).
 
 ## Installation
 1. Install the **UIX command line tool** following the [Getting Started](https://docs.unyt.org/manual/uix/getting-started#the-uix-command-line-tool) guide in our documentation.
 
 2. Clone this repository to your local machine:
 
  ```bash
- $ git clone https://github.com/unyt-org/example-shared-list.git
+ $ git clone https://github.com/unyt-org/example-website-screenshot.git
  ```
 3. Run the project local
  ```bash
@@ -24,48 +24,37 @@ This diagram outlines the UIX default project structure.
 We split our code base in [back-end](https://unyt.org/glossary#back-end), [front-end](https://unyt.org/glossary#front-end), and commons folder.
 ```
 .
-└── example-shared-list/
+└── example-website-screenshot/
  ├── backend/
  │ ├── .dx // Config file for deployment
  │ └── entrypoint.tsx // Back-end entrypoint
  ├── common/
  │ ├── compoments/
- │ │ ├── List.scss // List style declaration
- │ │ ├── List.tsx // List component
- │ │ ├── Overview.scss // Overview style declaration
- │ │ └── Overview.tsx // Overview component
- │ └── theme.ts // Global style theme
+ │ │ ├── MainPage.scss // Main style declaration
+ │ │ └── MainPage.tsx // Main component
  ├── frontend/
  │ ├── entrypoint.css // Front-end style declaration
  │ └── entrypoint.tsx // Front-end entrypoint
  ├── app.dx // Endpoint config file
- └── deno.json // Deno config file
+ └── deno.json  // Deno config file
 ```
 
 ## Features
-* Support for multiple synced lists
-* Items can be checked/unchecked
-* Items contain name, amount and unit
-* Items can be added and removed
-* Unchecked items can be auto-removed
+* Take screenshot on the back-end
+* Display of screenshot on front-end
+* Auto caching support
+* Exposes UIX.FileProvider on `/image/*`-route
 
 ## Preview
 <img src=".github/screenshot.png" width="400">
 
 
 ## 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.
 
 ---
 

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 (

backend/.dx

@@ -1,13 +1,13 @@
 use stage from #public.uix;
 
 endpoint: stage {
- prod: @+example_list
+ prod: @+example_screenshot
 },
 
 location: stage {
  prod: @+unyt_eu1
 },
 
 domain: stage {
- prod: 'shared-list.unyt.app'
+ prod: 'screenshot.unyt.app'
 }

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;
+ }
+}

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<HTMLImageElement> {
+ const fileName = `${url.toString().replaceAll(/[^a-zA-Z0-9\?\-\.]+/g, '_')}.png`;
+ const filePath = UIX_CACHE_PATH.getChildPath(fileName);
+ if (filePath.fs_exists)
+ return this.getImage(filePath);
+
+ const fileData = await Capture.take(
+ url, 
+ config?.fullSize, {
+ width: config?.width ?? 1920,
+ height: config?.height ?? 1080
+ }
+ );
+ await Deno.writeFile(filePath, fileData);
+ return this.getImage(filePath);
+ }
+
+ static getImage(filePath: Path<`${string}:`, boolean>) {
+ return <img src={'/image/'.concat(filePath.name)}/> as HTMLImageElement;
+ }
+}
+
+// The backend routes definition
 export default {
- '/': UIX.renderStatic(<Overview lists={listStorage}/>), // On '/'-route display the overview component
- '*': null // Letting the frontend handle all other routes
+ '/': null,
+ '/image/*': new UIX.FileProvider(UIX_CACHE_PATH)
 } satisfies UIX.Entrypoint;