⭐ Create new page from URL

src/components/Scenarios/Scenarios.tsx

@@ -34,6 +34,14 @@ export function Scenarios() {
                         </CreateZone>
                     </Link>
                 </li>
+                <li>
+                    <Link href="/new/from-url">
+                        <CreateZone className={styles.scenario}>
+                            <h2>Website</h2>
+                            To redesign your old site
+                        </CreateZone>
+                    </Link>
+                </li>
                 <li>
                     <Link href="/new/from-instagram">
                         <CreateZone className={styles.scenario}>

src/pages/api/scrape/scrape-web.ts

@@ -0,0 +1,36 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { isValidUrl } from '../../../utils/validators/isValidUrl';
+
+export interface ScrapeWebResponse {
+    // TODO: [🌋] ErrorableResponse
+
+    /**
+     * Information about the Instagram user
+     */
+    webInfo: any /* <- !!! */;
+}
+
+export default async function scrapeInstagramUserHandler(
+    request: NextApiRequest,
+    response: NextApiResponse<ScrapeWebResponse>,
+) {
+    const url = request.query.url;
+
+    if (!isValidUrl(url)) {
+        return response.status(400).json({ message: 'GET param url is not valid URL' } as any /* <-[🌋] */);
+    }
+
+    const response = await fetch(url as string);
+
+    const webInfo = await response.text();
+
+    // console.info('👤', { instagramUser });
+
+    return response.status(200).json({ webInfo } satisfies ScrapeWebResponse);
+}
+
+/**
+ * TODO: !!! [🧠] How to extract the article from the web?
+ * TODO: !!! Use puppeteer to scrape the web
+ * TODO: [🕍] Cache the scraping
+ */

src/pages/new/from-image.tsx

@@ -43,6 +43,7 @@ export default function NewWallpaperFromImagePage() {
 /**
  * TODO: Split between /new/from-image and /new/just-from-image
  * TODO: Allow to use Camera (maybe in new route /new/from-camera)
+ * TODO: [👐] Unite design of all /new/* pages
  * TODO: [🌾] Unite design of all /new/* pages
  * TODO: [🥩] Make /new/just-from-image
  * TODO: [🏍] Standardize process of getting input data for new wallpaper

src/pages/new/from-prompt.tsx

@@ -1,12 +1,9 @@
 import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { StaticAppHead } from '../../components/AppHead/StaticAppHead';
 import { Center } from '../../components/SimpleLayout/Center';
 import styles from '../../styles/static.module.css' /* <- TODO: [🤶] Get rid of page css and only use components (as <StaticLayout/>) */;
 
 export default function NewWallpaperFromPromptPage() {
-    const router = useRouter();
-
     return (
         <>
             <StaticAppHead subtitle={null} />
@@ -39,5 +36,6 @@ export default function NewWallpaperFromPromptPage() {
 }
 
 /**
+ * TODO: [👐] Unite design of all /new/* pages
  * TODO: [🏍] Standardize process of getting input data for new wallpaper
  */

src/pages/new/from-url.tsx

@@ -0,0 +1,55 @@
+import { useRef } from 'react';
+import { StaticAppHead } from '../../components/AppHead/StaticAppHead';
+import { Center } from '../../components/Center/Center';
+import styles from '../../styles/static.module.css' /* <- TODO: [🤶] Get rid of page css and only use components (as <StaticLayout/>) */;
+import { isValidUrl } from '../../utils/validators/isValidUrl';
+import type { ScrapeWebResponse } from '../api/scrape/scrape-web';
+
+export default function NewWallpaperFromPromptPage() {
+    const urlInputRef = useRef<HTMLInputElement | null>(null);
+
+    return (
+        <>
+            <StaticAppHead subtitle={null} />
+
+            <div className={styles.page}>
+                <main>
+                    <Center>
+                        <h1>AI Web Maker</h1>
+                        Write URL to make new web from:
+                        <br />
+                        <input type="url" placeholder="https://example.com" ref={urlInputRef} />
+                        <button
+                            className="button-TODO"
+                            onClick={async () => {
+                                const url = urlInputRef.current?.value;
+
+                                if (!isValidUrl(url)) {
+                                    alert('Please write valid URL');
+                                }
+
+                                const reponse = await fetch(`/api/scrape/scrape-web?url=${url}`);
+                                const { webInfo } = (await reponse.json()) as ScrapeWebResponse;
+
+                                console.info('🌍', { webInfo });
+                            }}
+                        >
+                            Create
+                        </button>
+                    </Center>
+                </main>
+
+                {/* TODO: Make here some footer
+                <footer>
+                    <FooterSection />
+                </footer>
+                */}
+            </div>
+        </>
+    );
+}
+
+/**
+ * TODO: !!! Implement
+ * TODO: [👐] Unite design of all /new/* pages
+ */