diff --git a/README.md b/README.md index 75379cb..840d74a 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,39 @@ Example Astro app configured for [Webflow Cloud](https://webflow.com/cloud). | `npm run preview` | Build and preview with Wrangler locally | | `npm run deploy` | Deploy with Webflow Cloud CLI | +## Set up Webflow CLI + +Install Webflow CLI (global install is optional; you can also run the CLI without `npx` in the export step below). + +```bash +npm install -g @webflow/webflow-cli +``` + +Log in to Webflow and select your desired workspace from the opened browser window. You can append `--force` to reset any existing authentication. + +```bash +npx webflow auth login +``` + +Then, install the needed dependencies. + +```bash +npm install +``` + +Sync all the Webflow components into your local filesystem. Answer the prompts to generate and configure your `webflow.json`. + +```bash +npx webflow devlink export +``` + +Select your desired Webflow site from the sites listed. + +You can also view our DevLink documentation to learn more about all the options, features, and supported elements. + +The `webflow.json` `devlink-export` block tells the Webflow CLI where to write generated React components from your linked Webflow site. After running `webflow cloud init` (or `webflow auth login` + `webflow devlink export`) the CLI populates `./src/webflow/` with components you can import directly into your Vite app. + + ## Learn more - [Astro documentation](https://docs.astro.build) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 35394fb..20afb45 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,15 +1,16 @@ --- -import { DevLinkProvider } from "../../webflow/DevLinkProvider"; -import { DEVLINK_SCOPE_CLASS } from "../../webflow/devlinkScope"; +import { DevLinkProvider } from '../../webflow/DevLinkProvider'; +import { DevLinkFontTags } from '../../webflow/webflow_modules/DevLinkFontTags'; import "../../webflow/css/global.css"; // Webflow Styles --- - +
+