@webflow/webflow-cli 1.19.0 → 1.20.1

package/dist/cloud-scaffolds/astro/src/pages/index.astro

@@ -1,62 +1,68 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Section, Container, Block, Link } from '../../devlink/_Builtin/Basic';
+
+// Import DevLink components from "../../webflow/*"
+// import { ComponentName } from "../../webflow/ComponentName";
 ---
 
 <Layout>
-  <Section
-    client:load
-    tag="section"
-    className="margin-bottom-24px"
-    style={{
-      minHeight: '100vh',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}
-  >
-    <Container>
-      <Block
-        tag="div"
-        className="hero-split"
-        style={{
-          textAlign: 'center',
-          maxWidth: '600px',
-          margin: '0 auto'
-        }}
-      >
-        <h1 class="margin-bottom-24px">Welcome to Webflow Cloud</h1>
-        <p class="margin-bottom-24px">This is a simple test using Basic components with enhanced styling.</p>
-        <div style={{marginTop: '12px'}}>
-          <Link
-            button={true}
-            options={{
-              href: "https://developers.webflow.com/webflow-cloud/getting-started"
-            }}
-            className="button-primary"
+  <section class="hero-section">
+    <div class="container">
+      <div class="hero-content">
+        <h1 class="hero-title">Welcome to Webflow Cloud</h1>
+        <p class="hero-description">Your Astro project is ready. Start building and sync your Webflow components and design system.</p>
+        <div class="hero-cta">
+          <a
+            href="https://developers.webflow.com/data-clients/docs/getting-started"
+            class="button-primary"
           >
             Get Started
-          </Link>
+          </a>
         </div>
-      </Block>
-    </Container>
-  </Section>
+      </div>
+    </div>
+  </section>
 </Layout>
 
 <style>
-  h1 {
+  .hero-section {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero-content {
+    text-align: center;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  .hero-title {
     font-size: 2.5rem;
     font-weight: 700;
+    margin-bottom: 1.5rem;
     background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
 
+  .hero-description {
+    margin-bottom: 1.5rem;
+  }
+
+  .hero-cta {
+    margin-top: 0.75rem;
+  }
+
   .button-primary {
+    display: inline-block;
+    padding: 12px 24px;
     border-radius: 4px;
     background: #146ef5;
     color: #ffffff;
+    text-decoration: none;
     box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2);
   }
 

package/dist/cloud-scaffolds/astro/webflow.json

@@ -2,11 +2,12 @@
   "cloud": {
     "framework": "astro"
   },
-  "devlink": {
-    "rootDir": "./devlink",
-    "cssModules": true,
-    "fileExtensions": {
-      "js": "jsx"
-    }
+  "devlink-export": {
+    "rootDir": "./webflow",
+    "components": ".*",
+    "componentGroups": ".*",
+    "ts": false,
+    "cssScopes": true,
+    "relativeHrefRoot": "/"
   }
 }

package/dist/cloud-scaffolds/nextjs/README.md

@@ -2,7 +2,21 @@ This is a [Next.js](https://nextjs.org) project bootstrapped with [`webflow clou
 
 ## Getting Started
 
-First, run the development server:
+First, install dependencies:
+
+```bash
+npm install
+```
+
+Then, export your Webflow components:
+
+```bash
+webflow devlink export
+```
+
+This will create the `src/webflow/` directory with your Webflow components and styles.
+
+Finally, run the development server:
 
 ```bash
 npm run dev
@@ -12,4 +26,22 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
-You can deploy your app by running [`webflow cloud deploy`](https://developers.webflow.com/webflow-cloud/environment).
+## Webflow Components
+
+Your Webflow components are exported to `src/webflow/`. To update them when you make changes in Webflow:
+
+```bash
+webflow devlink export
+```
+
+Learn more about [Webflow DevLink](https://developers.webflow.com/data/docs/devlink-overview).
+
+## Deployment
+
+Deploy your app by running:
+
+```bash
+webflow cloud deploy
+```
+
+Learn more about [Webflow Cloud deployment](https://developers.webflow.com/webflow-cloud/environment).

package/dist/cloud-scaffolds/nextjs/eslint.config.mjs

@@ -11,7 +11,12 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
-  { ignorePatterns: ["**/devlink/**"] },
+  {
+    ignores: [
+      "**/webflow/**",
+      "**/webflow-*/**",
+    ],
+  },
 ];
 
 export default eslintConfig;

package/dist/cloud-scaffolds/nextjs/src/app/globals.css

@@ -2,7 +2,7 @@
 @layer properties, theme, base, webflow, components, utilities;
 
 /* Webflow global styles are imported in the 'webflow' layer */
-@import "../devlink/css/global.css" layer(webflow);
+@import "../webflow/css/global.css" layer(webflow);
 @import "tailwindcss";
 
 :root {

package/dist/cloud-scaffolds/nextjs/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono, Inter } from "next/font/google";
 import "./globals.css";
-import { DevLinkProvider } from "@/devlink/DevLinkProvider";
+import { DevLinkProvider } from "@/webflow/DevLinkProvider";
 
 const inter = Inter({
   subsets: ["latin"],

package/dist/cloud-scaffolds/nextjs/src/app/page.css

@@ -0,0 +1,45 @@
+.hero-section {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero-content {
+  text-align: center;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  margin-bottom: 1.5rem;
+}
+
+.hero-cta {
+  margin-top: 0.75rem;
+}
+
+.button-primary {
+  display: inline-block;
+  padding: 12px 24px;
+  border-radius: 4px;
+  background: #146ef5;
+  color: #ffffff;
+  text-decoration: none;
+  box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2);
+}
+
+.button-primary:hover {
+  background: #2c80fd;
+  color: #ffffff;
+}

package/dist/cloud-scaffolds/nextjs/src/app/page.tsx

@@ -1,64 +1,30 @@
 "use client";
 
-import { Section, Block, Link } from "@/devlink/_Builtin";
+import "./page.css";
+
+// Import DevLink components from "@/webflow/*"
+// import { ComponentName } from "@/webflow/ComponentName";
 
 export default function Home() {
   return (
-    <Section
-      tag="section"
-      style={{
-        minHeight: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <Block tag="div" className="container">
-        <Block
-          tag="div"
-          className="hero-split"
-          style={{
-            textAlign: "center",
-            maxWidth: "600px",
-            margin: "0 auto",
-          }}
-        >
-          <h1
-            className="margin-bottom-24px"
-            style={{
-              fontSize: "2.5rem",
-              fontWeight: 700,
-              background: "linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%)",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent",
-              backgroundClip: "text",
-            }}
-          >
-            Welcome to Webflow Cloud
-          </h1>
-          <Block tag="p" className="margin-bottom-24px">
-            This is a simple test using Basic components with enhanced styling.
-          </Block>
-          <div style={{ marginTop: "12px" }}>
-            <Link
-              button={true}
-              options={{
-                href: "https://developers.webflow.com/webflow-cloud/getting-started",
-              }}
+    <section className="hero-section">
+      <div className="container">
+        <div className="hero-content">
+          <h1 className="hero-title">Welcome to Webflow Cloud</h1>
+          <p className="hero-description">
+            Your Next.js project is ready. Start building and sync your Webflow
+            components and design system.
+          </p>
+          <div className="hero-cta">
+            <a
+              href="https://developers.webflow.com/data-clients/docs/getting-started"
               className="button-primary"
-              style={{
-                borderRadius: "4px",
-                background: "#146ef5",
-                color: "#ffffff",
-                boxShadow:
-                  "0px 0.5px 1px rgba(0, 0, 0, 0.25), inset 0px 29px 23px -16px rgba(255, 255, 255, 0.04), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.2)",
-              }}
             >
               Get Started
-            </Link>
+            </a>
           </div>
-        </Block>
-      </Block>
-    </Section>
+        </div>
+      </div>
+    </section>
   );
 }

package/dist/cloud-scaffolds/nextjs/src/webflow.d.ts

@@ -0,0 +1,14 @@
+// Webflow component and CSS type declarations
+// These modules will be created by 'webflow devlink export'
+
+// CSS module declarations
+declare module "*.css" {
+  const content: Record<string, string>;
+  export default content;
+}
+
+// Webflow component modules
+declare module "@/webflow/webflow_modules/*" {
+  const Component: any;
+  export default Component;
+}

package/dist/cloud-scaffolds/nextjs/webflow.json

@@ -2,8 +2,12 @@
   "cloud": {
     "framework": "nextjs"
   },
-  "devlink": {
-    "rootDir": "./src/devlink",
-    "cssModules": true
+  "devlink-export": {
+    "rootDir": "./src/webflow",
+    "components": ".*",
+    "componentGroups": ".*",
+    "ts": true,
+    "cssScopes": true,
+    "relativeHrefRoot": "/"
   }
 }