Custom wm AI page + doc RT (#326)

* Custom wm AI page + doc RT

* Handle youtube videos

* Adjusting purple

---------

Co-authored-by: Faton Ramadani <[email protected]>

docs/code_editor/add_variables_resources.mdx

@@ -1,4 +1,6 @@
 import DocCard from '@site/src/components/DocCard';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 # Add Resources and Variables to Code
 
@@ -31,39 +33,56 @@ There are 2 main ways resources are used within scripts:
 
 ### Passing resources as parameters to scripts (prefered)
 
-Provided you have the right permissions and the resource type exists in the workspace, you can access resources from scripts, flows and apps using the Windmill client. For example, to access the `u/user/my_postgresql` resource of the `posgtgresql` Resource Type we would create a script.
+Provided you have the right permissions and the resource type exists in the workspace, you can access resource types from scripts, flows and apps using the Windmill client or [TypedDict](https://mypy.readthedocs.io/en/stable/typed_dict.html) in Python.
 
-Typescript:
+From the code editor's toolbar, click on the `+ Type` button and pick the right resource type.  For example, to access the `u/user/my_postgresql` resource of the `posgtgresql` Resource Type we would create a script:
+
+<Tabs className="unique-tabs">
+<TabItem value="TypeScript" label="TypeScript" attributes={{className: "text-xs p-4 !mt-0 !ml-0"}}>
 
 ```typescript
 type Postgresql = object;
 // OR one can fully type it
 type Postgresql = {
-	host: string;
-	port: number;
-	user: string;
-	dbname: string;
-	sslmode: string;
-	password: string;
-};
+  host: string,
+  port: number,
+  user: string,
+  dbname: string,
+  sslmode: string,
+  password: string,
+  root_certificate_pem: string 
+}
 
 export async function main(postgres: Postgresql) {
 	// Use Resource...
 }
 ```
 
-Python:
+</TabItem>
+<TabItem value="Python" label="Python" attributes={{className: "text-xs p-4 !mt-0 !ml-0"}}>
 
 ```python
-postgresql = dict
-
-def main(postgres: postgresql):
-    # Use Resource...
+from typing import TypedDict
+
+class postgresql(TypedDict):
+    host: str
+    port: int
+    user: str
+    dbname: str
+    sslmode: str
+    password: str
+    root_certificate_pem: str
+
+def main(selected_postgres: postgresql):
+	# Use Resource...
 ```
 
+</TabItem>
+</Tabs>
+
 And then select the Resource in the arguments section on the right:
 
-![Select resource](../core_concepts/3_resources_and_types/select_resource.png.webp)
+![Select resource](../core_concepts/3_resources_and_types/select_resource.png)
 
 :::tip
 

docs/core_concepts/3_resources_and_types/index.mdx

@@ -144,6 +144,8 @@ The convenience functions do this are:
 
 ## Using Resources
 
+All details on the [Add Resources and Variables to Code Editor](../../code_editor/add_variables_resources.mdx) page:
+
 <div class="grid grid-cols-2 gap-6 mb-4">
 	<DocCard
 		title="Add Resources and Variables to Code Editor"
@@ -152,51 +154,6 @@ The convenience functions do this are:
 	/>
 </div>
 
-There are 2 main ways resources are used within scripts:
-
-### Passing resources as parameters to scripts (prefered)
-
-Provided you have the right permissions and the resource type exists in the workspace, you can access resources from scripts, flows and apps using the Windmill client. For example, to access the `u/user/my_postgresql` resource of the `posgtgresql` Resource Type we would create a script.
-
-Typescript:
-
-```typescript
-type Postgresql = object;
-// OR one can fully type it
-type Postgresql = {
-	host: string;
-	port: number;
-	user: string;
-	dbname: string;
-	sslmode: string;
-	password: string;
-};
-
-export async function main(postgres: Postgresql) {
-	// Use Resource...
-}
-```
-
-Python:
-
-```python
-postgresql = dict
-
-def main(postgres: postgresql):
-    # Use Resource...
-```
-
-And then select the Resource in the arguments section on the right:
-
-![Select resource](./select_resource.png.webp)
-
-:::tip
-
-You can also edit the Resource or even create a new one right from the Code
-editor.
-
-:::
-
 ### Fetching them from within a script by using the wmill client in the respective language
 
 By clicking on `+ Resource`, you'll get to pick a resource from your workspace and be able to fetch it from within the script.

package.json

@@ -35,7 +35,7 @@
 		"events": "^3.3.0",
 		"file-loader": "^6.2.0",
 		"framer-motion": "^8.5.3",
-		"lucide-react": "^0.134.0",
+		"lucide-react": "^0.284.0",
 		"postcss": "^8.4.21",
 		"prism-react-renderer": "^1.3.5",
 		"raw-loader": "^4.0.2",

src/landing/FlowSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-	List,
+	Workflow,
 	Bug,
 	Play,
 	CalendarClock,
@@ -12,15 +12,15 @@ import {
 	Webhook,
 	OctagonIcon,
 	CheckCircle2,
-	ServerCrashIcon,
 	TimerOffIcon,
-	ToyBrickIcon,
+	Unplug,
 	Database,
 	InfinityIcon,
 	Voicemail,
 	BedIcon,
 	Calendar,
-	Bot
+	Bot,
+	LucideWebhook
 } from 'lucide-react';
 import { GitBranch, Repeat, Verified } from 'lucide-react';
 
@@ -32,13 +32,13 @@ import { BoltIcon } from '@heroicons/react/20/solid';
 const tabs = [
 	{
 		label: 'Flow editor',
-		icon: List,
+		icon: Workflow,
 		id: 'flow-editor',
 		data: [
 			{
 				title: 'Sequence',
 				description: 'Build complex Flows from atomic scripts.',
-				icon: List,
+				icon: Workflow,
 				caption: <div>Sequence scripts from your workspace, the <a href="https://hub.windmill.dev/" target="_blank">Hub</a> or <a href="/docs/code_editor" target="_blank">write them</a> directly.</div>,
 				video: {
 					videoSrc: '/videos/flow-sequence.mp4',
@@ -103,7 +103,7 @@ const tabs = [
 				title: 'Resume Workflows with secret webhooks',
 				description:
 					'Automatically resume workflows with secret webhooks. This is useful for resuming workflows after an approval step.',
-				icon: Verified,
+				icon: LucideWebhook,
 				caption: 'Resume Workflows with secret webhooks.',
 				imageSrc: '/images/page_arguments.png.webp',
 				altText: 'Resume with webhooks'
@@ -123,7 +123,7 @@ const tabs = [
 	},
 	{
 		label: 'Error Handling',
-		icon: ServerCrashIcon,
+		icon: Bug,
 		id: 'error-handling',
 		data: [
 			{
@@ -174,14 +174,14 @@ const tabs = [
 	},
 	{
 		label: 'Integrations',
-		icon: ToyBrickIcon,
+		icon: Unplug,
 		id: 'retries',
 		data: [
 			{
 				title: 'Connect third-party services',
 				description:
 					'Connect data providers & external APIs together.',
-				icon: ToyBrickIcon,
+				icon: Unplug,
 				caption: <div>Connect data providers & <a href="/docs/integrations/integrations_on_windmill" target="_blank">external APIs</a> together.</div>,
 				video: {
 					videoSrc: '/videos/flow_integrations.mp4',

src/landing/Footer.jsx

@@ -130,13 +130,13 @@ export default function Footer() {
 							</p>
 						</div>
 						<div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
-							<p className="text-center text-xs leading-5 text-gray-500">
+							<p className="text-center text-xs leading-5 text-gray-400">
 								&copy; 2023 Windmill Labs, Inc. All rights reserved. <br />
 								1111B S Governors Ave, Dover, DE 19904, USA
 							</p>
 							<div className="flex justify-center items-center mt-4">
 								<img className="h-10" src="/img/soc.png" alt="SOC Compliance badge" />
-								<p className="text-xs text-left leading-6 text-gray-500 ml-2">
+								<p className="text-xs text-left leading-6 text-gray-400 ml-2">
 									Windmill Labs is SOC 2 Type II compliant
 								</p>
 							</div>

src/landing/HeroAI.jsx

@@ -11,23 +11,20 @@ export default function HeroAI() {
 
 			<div className="grid gap-4 mx-auto max-w-7xl px-6 gap-y-8 lg:flex lg:px-8 py-16 items-center">
 				<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl lg:flex-shrink-0 lg:pt-8">
-					<div className="text-sm font-semibold leading-none border p-2 w-min whitespace-nowrap flex  rounded-md">
-						Windmill AI
-					</div>
 
-					<h1 className="mt-4 !text-4xl tracking-tight sm:!text-6xl">
+					<h1 className="mt-4 !text-4xl tracking-tight sm:!text-5xl text-purple-600 dark:text-purple-400">
 						Build internal tools with Windmill AI
 					</h1>
-					<h2 className="mt-6 text-lg leading-8  font-medium">
+					<h2 className="mt-6 text-lg leading-8  font-normal">
 						Windmill is a low-code platform for building endpoints, flows, and apps from simple
 						scripts. The presence of code at the heart of Windmill offers unlimited possibilities so
 						as not to rely solely on pre-built integrations.
 					</h2>
-					<h2 className="mt-6 text-lg leading-8  font-medium">
-						With the integration of AI models within Windmill, your willpower alone can create the
+					<h2 className="mt-6 text-lg leading-8  font-normal">
+						With the integration of AI models within Windmill, your willpower alongside a few prompts can create the
 						internal tools you want in just a few seconds.
 					</h2>
-					<h2 className="mt-6 text-lg leading-8  font-medium">
+					<h2 className="mt-6 text-lg leading-8  font-normal">
 						The AI generates code that matches Windmill's specifications, especially the interaction
 						with external APIs.
 					</h2>
@@ -37,7 +34,7 @@ export default function HeroAI() {
 							href="https://app.windmill.dev/user/login"
 							onClick={() => window.plausible('try-cloud')}
 							data-analytics='"try-cloud"'
-							className="rounded-md transition-all bg-blue-500 px-4 py-2 text-base font-semibold leading-7 text-white hover:bg-blue-800 hover:!text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 !no-underline"
+							className="rounded-md transition-all px-4 py-2 text-base font-semibold leading-7 text-purple-600 hover:!text-purple-900 dark:text-purple-400 hover:!text-purple-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 !no-underline"
 							rel="nofollow"
 						>
 							Try Windmill Cloud
@@ -53,7 +50,7 @@ export default function HeroAI() {
 					</div>
 				</div>
 				<div className="mt-16 sm:mt-8 h-full rounded-md overflow-hidden">
-					<video src="/videos/flow_ai.mp4" autoPlay={true} loading="lazy" />
+					<video src="/videos/flow_ai.mp4" autoPlay={true} loop={true} loading="lazy" />
 				</div>
 			</div>
 		</div>

src/landing/LandingHeader.jsx

@@ -11,7 +11,7 @@ import ThemeToggleButton from './ThemeToggleButton';
 const resources = [
 	{
 		name: 'Team',
-		description: 'Find out who we are and why we do what we do.',
+		description: 'The team behind Windmill.',
 		href: '/team'
 	},
 

src/landing/ScriptSection.tsx

@@ -22,7 +22,7 @@ import {
 	Box,
 	Gitlab
 } from 'lucide-react';
-import { SiGnubash, SiGo, SiPython, SiDeno, SiVisualstudiocode, SiGraphql } from 'react-icons/si/index';
+import { SiGnubash, SiGo, SiPython, SiTypescript, SiVisualstudiocode, SiGraphql } from 'react-icons/si/index';
 import { useDeveloperMode } from '../pages';
 
 import Section from './Section';
@@ -83,7 +83,7 @@ const tabs = [
 			{
 				title: 'Typescript',
 				description: '',
-				icon: SiDeno,
+				icon: SiTypescript,
 				caption: <div>Deno as the <a href="/docs/getting_started/scripts_quickstart/typescript" target="_blank">TypeScript</a> runtime.</div>,
 				svg: '/images/typescript-code.svg',
 				altText: 'Write scripts in Typescript'

src/landing/tabs/TabContent.tsx

@@ -28,14 +28,25 @@ export default function TabContent({ data, color }) {
 
 	function renderAsset(data) {
 		if (data[selectedIndex].video) {
-			return (
-				<video
-					className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
-					autoPlay
-					loop
-					src={data[selectedIndex].video?.videoSrc}
-				/>
-			);
+			if (data[selectedIndex].video?.videoSrc?.startsWith('https://www.youtube.com')) {
+				return (
+					<iframe
+						src={data[selectedIndex].video?.videoSrc}
+						allowFullScreen
+						height="460"
+						className="border-2 rounded-xl  dark:border-gray-800"
+					/>
+				);
+			} else {
+				return (
+					<video
+						className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
+						autoPlay
+						loop
+						src={data[selectedIndex].video?.videoSrc}
+					/>
+				);
+			}
 		} else if (data[selectedIndex].imageSrc) {
 			return (
 				<img

src/pages/brand.jsx

@@ -39,7 +39,7 @@ export default function About() {
                     <h2 className="leading-9 mb-6 text-3xl">
                         About Windmill
                     </h2>
-                    <p className="text-base font-normal text-gray-500 dark:text-gray-400 mt-12">
+                    <p className="text-base font-normal text-gray-500 dark:text-gray-200 mt-12">
                         <div className="flex flex-col gap-4">
                             <p>
                                 Windmill is an open-source platform to build internal tools from scripts and low code builders.
@@ -58,7 +58,7 @@ export default function About() {
                     <h2 className="leading-9 mb-6 text-3xl">
                         License
                     </h2>
-                    <p className="text-base font-normal text-gray-500 dark:text-gray-400 mt-12">
+                    <p className="text-base font-normal text-gray-500 dark:text-gray-200 mt-12">
                         <div className="flex flex-col gap-4">
                             <p>
                                 Windmill is released under the AGPLv3 license. This means the software is free and open-source. If you make modifications and distribute them, you must also release those changes under the AGPLv3. Significantly, if you run a modified version of Windmill on a server and let others interact with it over a network, you are obligated to provide them a way to access the modified source code. This ensures the software remains transparent and free for all users, even when used in online applications.
@@ -97,7 +97,7 @@ export default function About() {
                     <h2 className="leading-9 mb-6 text-3xl">
                         Brand Assets
                     </h2>
-                    <p className="text-base font-normal text-gray-500 dark:text-gray-400 mt-12">
+                    <p className="text-base font-normal text-gray-500 dark:text-gray-200 mt-12">
                         <div className="flex flex-col gap-4">
                             <p>
                                 Make sure to use the official Windmill brand assets for your publications.