diff --git a/src/pages/docs/introduction/about.md b/src/pages/docs/introduction/about.md new file mode 100644 index 00000000..6ffd3e31 --- /dev/null +++ b/src/pages/docs/introduction/about.md @@ -0,0 +1,41 @@ +--- +layout: docs +order: 1 +tocHeading: 2 +--- + +# About + +Greenwood's goal is to bring the power of modern development to the web we all know and love. For those who still want the option to just start with an HTML file, Greenwood aims to be a faithful and authentic gateway to the web platform and web friendly JavaScript runtimes. It's why we consider Greenwood your _**workbench**_ for the web, and not a framework per se; we don't mind going vanilla. 🍦 + +> Whether you are building a blog or a single page application, a hobby project or passion project, we encourage you to give Greenwood a try! + +## Features + +Some of Greenwood's feature include: + +- Unbundled local development flow, with `E-Tags` headers, for efficient caching and live reloads +- Out of the box support for ESM and Web APIs, on both the client and server +- Server Side Rendering of Web Components (Light and Shadow DOM) +- API Routes +- Automatic code splitting through user defined ` + + + + + +``` + +## URL + +The [`URL`](https://developer.mozilla.org/en-US/docs/Web/API/URL) constructor provides an elegant way for referencing [static assets](/docs/resources/assets/) on the client and on the server, it works great when combined with [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) for easily interacting with search params in a request. + +Here is an example of some of these APIs in action in an API Route handler: + +```js +export async function handler(request) { + const params = new URLSearchParams(request.url.slice(request.url.indexOf("?"))); + const name = params.has("name") ? params.get("name") : "World"; + + console.log({ name }); + + // ... +} +``` + +## FormData + +[`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) is a great example of a Web API that works great both on the client and the server. + +In the browser, it can be used to easily gather the inputs of a `
` tag for communicating with a backend API: + +```html + + + + + + +

Search Page

+ + + + +
+ + +``` + +On the server, we can use the same API to collect the inputs from that form request: + + + +```js +// src/pages/api/search.js +// we pull in WCC here to generate HTML fragments for us +import { getProductsBySearchTerm } from "../../db/client.js"; + +export async function handler(request) { + // use the web standard FormData to get the incoming form submission + const formData = await request.formData(); + const term = formData.has("term") ? formData.get("term") : ""; + const products = await getProductsBySearchTerm(term); + + // ... +} +``` + + diff --git a/src/pages/docs/introduction/welcome-to-greenwood.md b/src/pages/docs/introduction/welcome-to-greenwood.md deleted file mode 100644 index 5f6c7d26..00000000 --- a/src/pages/docs/introduction/welcome-to-greenwood.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: docs -order: 1 -tocHeading: 2 ---- - -# Welcome To Greenwood diff --git a/src/pages/docs/resources/scripts.md b/src/pages/docs/resources/scripts.md index eddef8e2..07347147 100644 --- a/src/pages/docs/resources/scripts.md +++ b/src/pages/docs/resources/scripts.md @@ -65,22 +65,9 @@ import { Foo } from "./foo.js"; import { Foo } from "foo"; ``` -## Import Attributes +## Node Modules -Greenwood supports [Import Attributes](https://github.com/tc39/proposal-import-attributes) on the client and the [the server](/docs/pages/server-rendering/#custom-imports) seamlessly, supporting both CSS and JSON module out of the box. - -```js -import sheet from "./styles.css" with { type: "css" }; -import data from "./data.json" with { type: "json" }; - -console.log({ sheet, data }); -``` - -> ⚠️ _Although Import Attributes are not baseline yet, Greenwood supports polyfilling them with a [configuration flag](/docs/reference.configuration/#polyfills)._ - -## NPM - -Packages from [**npm**](https://www.npmjs.com/) can be used by installing them with your favorite package manager. In the browser, Greenwood will automatically build up an import map from any packages defined in the `dependencies` property of your _package.json_. +Packages from [**npm**](https://www.npmjs.com/) (and compatible registries) can be used by installing them with your favorite package manager. In the browser, Greenwood will automatically build up an import map from any packages defined in the `dependencies` property of your _package.json_. Below are some examples: @@ -102,7 +89,7 @@ export class SimpleGreeting extends LitElement { customElements.define("simple-greeting", SimpleGreeting); ``` -You can reference the **node_modules** directly from a `