winglang · skyrpex · Sep 1, 2023 · Sep 1, 2023 · Sep 4, 2023 · Sep 4, 2023
@@ -1,6 +1,11 @@
-bring cloud;
 bring ex;
 
+new ex.Astro(root: "../../astro");
+
+bring cloud;
+
+new cloud.Website(path: "");
+
 let bucket = new cloud.Bucket();
 let queue = new cloud.Queue();
 let api = new cloud.Api();

@@ -2,6 +2,9 @@
   "$schema": "https://turborepo.org/schema.json",
   "extends": ["//"],
   "pipeline": {
+    "dev": {
+      "dependsOn": ["^compile"]
+    },
     "compile": {
       "outputs": ["dist/**"],
       "env": ["SEGMENT_WRITE_KEY"]

@@ -0,0 +1,14 @@
+// import node from "@astrojs/node";
+// import react from "@astrojs/react";
+// import tailwind from "@astrojs/tailwind";
+import { defineConfig } from "astro/config";
+
+// https://astro.build/config
+export default defineConfig({
+  // output: "server",
+  // adapter: node({
+  //   mode: "middleware",
+  // }),
+  // integrations: [tailwind(), react()],
+  // trailingSlash: "never",
+});
@@ -0,0 +1,7 @@
+{
+  "name": "@wingconsole/astro",
+  "type": "module",
+  "dependencies": {
+    "astro": "^3.0.5"
+  }
+}
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
@@ -0,0 +1,12 @@
+---
+import favicon from "../astro.svg";
+---
+<html>
+  <head>
+    <title>Wing Astro</title>
+    <link rel="icon" type="image/svg" href={favicon.src}>
+  </head>
+  <body>
+    <h1>Hello world!</h1>
+  </body>
+</html>
@@ -0,0 +1,5 @@
+import { Config } from "tailwindcss";
+
+export default {
+  content: ["src/**/*"],
+} satisfies Config;
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "allowArbitraryExtensions": true,
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "downlevelIteration": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*"]
+}
@@ -0,0 +1,45 @@
+import { forwardRef } from "react";
+
+type AstroIconProps = React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
+  title?: string;
+  titleId?: string;
+} & React.RefAttributes<SVGSVGElement>;
+
+export const AstroIcon = forwardRef<SVGSVGElement, AstroIconProps>(
+  ({ title, titleId, ...props }, svgRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 128 128"
+        ref={svgRef}
+        aria-labelledby={titleId}
+        {...props}
+      >
+        {title && <title id={titleId}>{title}</title>}
+
+        <path
+          d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"
+          style={{ fill: "#000" }}
+        />
+        <path
+          fill="url(#a)"
+          d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7Z"
+        />
+        <defs>
+          <linearGradient
+            id="a"
+            x1="64.7"
+            x2="77.4"
+            y1="119.2"
+            y2="77.4"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#D83333" />
+            <stop offset="1" stopColor="#F041FF" />
+          </linearGradient>
+        </defs>
+      </svg>
+    );
+  },
+);
@@ -8,21 +8,19 @@ type RedisIconProps = React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
 export const RedisIcon = forwardRef<SVGSVGElement, RedisIconProps>(
   ({ title, titleId, ...props }, svgRef) => {
     return (
-      <>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 32 32"
-          ref={svgRef}
-          aria-labelledby={titleId}
-          {...props}
-        >
-          {title && <title id={titleId}>{title}</title>}
-          <path
-            fill="currentColor"
-            d="M32 19.1c0 .3-.4.7-1.3 1.1-1.7.9-10.5 4.5-12.4 5.5-1.9 1-3 1-4.4.3-1.5-.7-11-4.5-12.6-5.4-.9-.4-1.3-.7-1.3-1v3.2c0 .3.4.7 1.3 1 1.7.9 11.1 4.7 12.6 5.4 1.5.7 2.5.7 4.4-.3 1.9-1 10.7-4.6 12.4-5.5 1-.4 1.3-.8 1.3-1V19zm0-5.3c0 .4-.4.7-1.3 1.1-1.7 1-10.5 4.6-12.4 5.5-1.9 1-3 1-4.4.3-1.5-.7-11-4.5-12.6-5.3C.4 15 0 14.6 0 14.3v3.2c0 .4.4.7 1.3 1.1l12.6 5.3c1.5.7 2.5.8 4.4-.2 1.9-1 10.7-4.6 12.4-5.5 1-.5 1.3-.8 1.3-1.2v-3.2zm0-5.4c0-.3-.4-.6-1.3-1L18.6 2.8c-1.7-.6-2.4-.6-4.4.1l-13 5c-.8.4-1.2.7-1.2 1v3.3c0 .3.4.6 1.3 1l12.6 5.4c1.5.7 2.5.7 4.4-.3 1.9-1 10.7-4.6 12.5-5.5.8-.5 1.2-.8 1.2-1.1V8.4zm-20.5 3 7.4-1.1-2.3 3.3zm16.4-3-4.9 2-4.4-1.7 4.9-2zm-13-3.1L14.4 4l2.2.9 2.1-.7-.6 1.3 2.2.8-2.8.3-.6 1.5-1-1.6-3.2-.3zM9.6 7.2c2.2 0 4 .7 4 1.5 0 .9-1.9 1.5-4 1.5s-4-.6-4-1.5c0-.8 1.8-1.5 4-1.5z"
-          />
-        </svg>
-      </>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32"
+        ref={svgRef}
+        aria-labelledby={titleId}
+        {...props}
+      >
+        {title && <title id={titleId}>{title}</title>}
+        <path
+          fill="currentColor"
+          d="M32 19.1c0 .3-.4.7-1.3 1.1-1.7.9-10.5 4.5-12.4 5.5-1.9 1-3 1-4.4.3-1.5-.7-11-4.5-12.6-5.4-.9-.4-1.3-.7-1.3-1v3.2c0 .3.4.7 1.3 1 1.7.9 11.1 4.7 12.6 5.4 1.5.7 2.5.7 4.4-.3 1.9-1 10.7-4.6 12.4-5.5 1-.4 1.3-.8 1.3-1V19zm0-5.3c0 .4-.4.7-1.3 1.1-1.7 1-10.5 4.6-12.4 5.5-1.9 1-3 1-4.4.3-1.5-.7-11-4.5-12.6-5.3C.4 15 0 14.6 0 14.3v3.2c0 .4.4.7 1.3 1.1l12.6 5.3c1.5.7 2.5.8 4.4-.2 1.9-1 10.7-4.6 12.4-5.5 1-.5 1.3-.8 1.3-1.2v-3.2zm0-5.4c0-.3-.4-.6-1.3-1L18.6 2.8c-1.7-.6-2.4-.6-4.4.1l-13 5c-.8.4-1.2.7-1.2 1v3.3c0 .3.4.6 1.3 1l12.6 5.4c1.5.7 2.5.7 4.4-.3 1.9-1 10.7-4.6 12.5-5.5.8-.5 1.2-.8 1.2-1.1V8.4zm-20.5 3 7.4-1.1-2.3 3.3zm16.4-3-4.9 2-4.4-1.7 4.9-2zm-13-3.1L14.4 4l2.2.9 2.1-.7-.6 1.3 2.2.8-2.8.3-.6 1.5-1-1.6-3.2-.3zM9.6 7.2c2.2 0 4 .7 4 1.5 0 .9-1.9 1.5-4 1.5s-4-.6-4-1.5c0-.8 1.8-1.5 4-1.5z"
+        />
+      </svg>
     );
   },
 );
@@ -25,6 +25,7 @@ import {
 } from "@heroicons/react/24/solid";
 
 import { RedisIcon } from "../icons/redis-icon.js";
+import { AstroIcon } from "../icons/astro-icon.js";
 
 const isTest = /(\/test$|\/test:([^/\\])+$)/;
 const isTestHandler = /(\/test$|\/test:.*\/Handler$)/;
@@ -75,6 +76,9 @@ export const getResourceIconComponent = (
     case "wingsdk.cloud.Test": {
       return solid ? SolidBeakerIcon : BeakerIcon;
     }
+    case "wingsdk.ex.Astro": {
+      return AstroIcon;
+    }
     default: {
       return CubeIcon;
     }

@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+import { createProcedure, createRouter } from "../utils/createRouter.js";
+import { AstroSchema } from "../wingsdk.js";
+
+export const createAstroRouter = () => {
+  return createRouter({
+    "astro.url": createProcedure
+      .input(
+        z.object({
+          resourcePath: z.string(),
+        }),
+      )
+      .query(async ({ input, ctx }) => {
+        const simulator = await ctx.simulator();
+        const config = simulator.getResourceConfig(
+          input.resourcePath,
+        ) as AstroSchema;
+        return config?.attrs?.url ?? "";
+      }),
+  });
+};
@@ -2,6 +2,7 @@ import { mergeRouters, middleware } from "../utils/createRouter.js";
 
 import { createApiRouter } from "./api.js";
 import { createAppRouter } from "./app.js";
+import { createAstroRouter } from "./astro.js";
 import { createBucketRouter } from "./bucket.js";
 import { createConfigRouter } from "./config.js";
 import { createCounterRouter } from "./counter.js";
@@ -30,6 +31,7 @@ export const mergeAllRouters = () => {
     createUpdaterRouter(),
     createRedisRouter(),
     createWebsiteRouter(),
+    createAstroRouter(),
     createConfigRouter(),
   );
 

@@ -24,4 +24,5 @@ export type {
   ApiSchema,
   TableSchema,
   WebsiteSchema,
+  AstroSchema,
 } from "@winglang/sdk/lib/target-sim/schema-resources.js";
@@ -0,0 +1,19 @@
+import { useContext } from "react";
+
+import { AppContext } from "../AppContext.js";
+import { useAstro } from "../services/use-astro.js";
+import { useOpenExternal } from "../services/use-open-external.js";
+import { AstroInteraction } from "../ui/astro-interaction.js";
+
+export interface AstroInteractionViewProps {
+  resourcePath: string;
+}
+export const AstroInteractionView = ({
+  resourcePath,
+}: AstroInteractionViewProps) => {
+  const { appMode } = useContext(AppContext);
+  const { open } = useOpenExternal();
+  const { url } = useAstro({ resourcePath });
+
+  return <AstroInteraction appMode={appMode} onUrlClick={open} url={url} />;
+};
@@ -1,4 +1,5 @@
 import { ApiInteractionView } from "./api-interaction-view.js";
+import { AstroInteractionView } from "./astro-interaction-view.js";
 import { BucketInteractionView } from "./bucket-interaction-view.js";
 import { CounterInteractionView } from "./counter-interaction-view.js";
 import { FunctionInteractionView } from "./function-interaction-view.js";
@@ -19,6 +20,7 @@ export const ResourceInteractionView = ({
   resourcePath,
 }: ResourceViewProps) => {
   const getResourceView = () => {
+    console.log({ resourceType });
     switch (resourceType) {
       case "wingsdk.cloud.Queue": {
         return <QueueInteractionView resourcePath={resourcePath} />;
@@ -50,6 +52,9 @@ export const ResourceInteractionView = ({
       case "wingsdk.cloud.Website": {
         return <WebsiteInteractionView resourcePath={resourcePath} />;
       }
+      case "wingsdk.ex.Astro": {
+        return <AstroInteractionView resourcePath={resourcePath} />;
+      }
       default: {
         return <UnsupportedInteractionView resourceType={resourceType} />;
       }

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+import { trpc } from "./trpc.js";
+
+export interface UseAstroOptions {
+  resourcePath: string;
+}
+export const useAstro = ({ resourcePath }: UseAstroOptions) => {
+  const astroUrl = trpc["astro.url"].useQuery({ resourcePath });
+  const [url, setUrl] = useState("");
+
+  useEffect(() => {
+    setUrl(astroUrl.data ?? "");
+  }, [astroUrl.data]);
+
+  return {
+    url,
+  };
+};
@@ -0,0 +1,42 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/solid";
+import { Attribute, useTheme } from "@wingconsole/design-system";
+import classNames from "classnames";
+
+import { AppMode } from "../AppContext.js";
+
+export interface AstroInteractionProps {
+  url: string;
+  appMode: AppMode;
+  onUrlClick: (url: string) => void;
+}
+export const AstroInteraction = ({
+  appMode,
+  url,
+  onUrlClick,
+}: AstroInteractionProps) => {
+  const { theme } = useTheme();
+  return (
+    <div className="h-full flex-1 flex flex-col text-sm space-y-1">
+      <div className="relative grow flex-row flex items-center">
+        {appMode === "local" && (
+          <>
+            <Attribute
+              name="URL"
+              value={url}
+              noLeftPadding
+              dataTestId="cloud.website:url"
+            />
+            <ArrowTopRightOnSquareIcon
+              className={classNames(
+                theme.text2,
+                "text-sm flex ml-2 h-4 w-4 cursor-pointer",
+              )}
+              onClick={() => onUrlClick(url)}
+              data-testid="cloud.website:open-url"
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
@@ -158,6 +158,14 @@ export const ResourceMetadata = ({
             icon,
           };
 
+          break;
+        }
+        case "wingsdk.ex.Astro": {
+          resourceGroup = {
+            groupName: "Astro",
+            icon,
+          };
+
           break;
         }
       }
@@ -338,7 +346,8 @@ export const ResourceMetadata = ({
           )}
 
           {(node.type.startsWith("wingsdk.cloud") ||
-            node.type.startsWith("wingsdk.redis")) && (
+            node.type.startsWith("wingsdk.redis") ||
+            node.type.startsWith("wingsdk.ex")) && (
             <>
               <InspectorSection
                 text={resourceGroup?.groupName || "Interact"}