diff --git a/README.md b/README.md index 6359bfc..d75abce 100644 --- a/README.md +++ b/README.md @@ -12,17 +12,16 @@ ## Demo -Visit the folowing third party website []() links to see zoid in action -1. Extemely Basic integration +Visit the following third party website [third-party-nextjs-zoid.vercel.app](https://third-part-nextjs-zoid.vercel.app/) links to see zoid in action +1. Extemely Basic integration [Button](https://third-part-nextjs-zoid.vercel.app/test-button.html) -2. Some features tested - - -## Installation +2. Some features tested [Advanced](https://third-part-nextjs-zoid.vercel.app/test-advanced.html) +> [!NOTE] +> Each Zoiid Ifame comes from the following [NextJs 14](https://nextjs-zoid.vercel.app/) app -## About thhis repo +## About this repo This repo is based on the starter [create-t3-turbo](https://github.com/t3-oss/create-t3-turbo) It uses [Turborepo](https://turborepo.org) and contains: diff --git a/apps/nextjs/README.md b/apps/nextjs/README.md index d9413f4..2d9aa0b 100644 --- a/apps/nextjs/README.md +++ b/apps/nextjs/README.md @@ -14,7 +14,7 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next It integrate [Zoid](https://github.com/krakenjs/zoid) with the help of [Rollup](rollupjs.org/). -## What's in? +## 1. What's in? We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary. @@ -24,21 +24,6 @@ We try to keep this project as simple as possible, so you can start with just th - [Rollup](https://rollupjs.org) -## Getting Started - -### 1. First, set your env file -- Copy `.env.example` at the same place -- Rename the copy to `.env` - -### 2. run the development server: - -```bash -# First install the depedencies -npm install -# Then start Next.js dev server, Under the hood it will build bundle and watch Zoid components -npm run dev -``` - ### 2. Embbed the Zoid component Embed into any vanilla Html page one of the following Zoid test component : #### a. "MyZoidComponent" : @@ -66,29 +51,19 @@ A simple Button. > [!NOTE] > Change `localhost:3000` with your registred domain on production -### 3. Run the Page -Run your page under localhost or registred domain -### 4. +## Required Files +- **rollup.config.mjs** : +To bundle each zoid component with its dependencies and generate the \[filename\].js -Open [http://localhost:3000](http://localhost:3000) with your browser to see the usual HelloWold page. +- **tsconfig.rollup.json** : +Typescript configuratioon specific to the bundlling process -## Terminal Command +- **src/types/zoid.d.ts** : +An ugly but working typing of zoid and some other libarry from the @krakenJs suite -```bash -# Build and watch Zoid components, then start Next.js dev server -npm run dev -# Build Zoid components and then Next.js for production -npm run build -# Build Zoid components on demand -npm run build:zoid -``` - -## Required Files -- tsconfig.rollup.json -- rollup.config.mjs -- src/types/zoid.d.ts -- components/zoid/*.ts +- **components/zoid/*.ts** : +Folder to place the Zoid components, for now the RollupJs config expect to find a zoid components per .ts, so eah zoid omponoent should be .ts and everything in on file. - app/api/widgets/[component]/route - a page with Zoid integrated : - example 1: app/zoid-button/page.tsx diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx index 1e150e9..ced6c18 100644 --- a/apps/nextjs/src/app/page.tsx +++ b/apps/nextjs/src/app/page.tsx @@ -1,113 +1,16 @@ -import Image from "next/image"; +import Link from "next/link"; -export default function Home() { +export const runtime = "edge"; + +export default function HomePage() { return ( -
-
-

- Get started by editing  - src/app/page.tsx -

-
- - By{" "} - Vercel Logo - +
+
+

+ Next Js using Zoid +

+

This website expose 2 Zoid components to the followinng website : third-part-nextjs-zoid.vercel.app

-
- -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore starter templates for Next.js. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
+ ); } diff --git a/apps/nextjs/src/app/zoid-advanced/layout.tsx b/apps/nextjs/src/app/zoid-advanced/layout.tsx index 03e1391..91c2806 100644 --- a/apps/nextjs/src/app/zoid-advanced/layout.tsx +++ b/apps/nextjs/src/app/zoid-advanced/layout.tsx @@ -7,12 +7,12 @@ import { Toaster } from "@acme/ui/toast"; export const metadata: Metadata = { title: "Advanced example with Zoid", - description: "Simple example with Zoid", + description: "Advanced example with Zoid", openGraph: { title: "Advanced example with Zoid", - description: "Simple example with Zoid", + description: "Advanced example with Zoid", url: "https://nextjs-zoid.vercel.app", - siteName: "Advanced example with Zoid", + siteName: "NextJs Zoid", }, }; diff --git a/apps/third-party-website/public/test-advanced.html b/apps/third-party-website/public/test-advanced.html index 6aaa91f..24f2667 100644 --- a/apps/third-party-website/public/test-advanced.html +++ b/apps/third-party-website/public/test-advanced.html @@ -18,7 +18,7 @@
-
+
diff --git a/apps/third-party-website/src/app/page.tsx b/apps/third-party-website/src/app/page.tsx index bec5176..dc1cc7f 100644 --- a/apps/third-party-website/src/app/page.tsx +++ b/apps/third-party-website/src/app/page.tsx @@ -5,13 +5,13 @@ export const runtime = "edge"; export default function HomePage() { return (
-
-

+
+

Third-Part Vanilla HTML Website

-

Test 1 : basic button /test-button

-

Test 2 : basic button /test-advanced

+

Test 1 : basic button /test-button

+

Test 2 : basic button /test-advanced