Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore/updates for new Greenwood website #172

Merged
merged 2 commits into from
Nov 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,6 @@ See our [website](https://merry-caramel-524e61.netlify.app/) for API docs and ex

## Motivation

**WCC** is not a static site generator, framework or bundler. It is focused on producing raw HTML from Web Components with the intent of being easily integrated into a site generator or framework, like [**Greenwood**](https://github.com/ProjectEvergreen/greenwood/) or [**Eleventy**](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/), the original motivation for creating [this project](https://github.com/ProjectEvergreen/greenwood/issues/935).
**WCC** is not a static site generator, framework or bundler. It is designed with the intent of being able to produce raw HTML from standards compliant Web Components and easily integrated _into_ a site generator or framework, like [**Greenwood**](https://www.greenwoodjs.dev). The Project Evergreen team also maintains similar integrations for [**Eleventy**](https://github.com/ProjectEvergreen/eleventy-plugin-wcc/) and [Astro](https://github.com/ProjectEvergreen/astro-wcc).

In addition, **WCC** hopes to provide a surface area to explore patterns around [streaming](https://github.com/ProjectEvergreen/wcc/issues/5), [serverless and edge rendering](https://github.com/thescientist13/web-components-at-the-edge), and as acting as a test bed for the [Web Components Community Groups](https://github.com/webcomponents-cg)'s discussions around community protocols, like [hydration](https://github.com/ProjectEvergreen/wcc/issues/3).
8 changes: 4 additions & 4 deletions docs/pages/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ Below are some example of how **WCC** is being used right now.

## Server Rendering (SSR)

For the project [**Greenwood**](https://github.com/ProjectEvergreen/greenwood/), **WCC** is going to be used to provide a _Next.js_ like experience by allowing users to author [server-side routes using native custom elements](https://www.greenwoodjs.io/docs/server-rendering/#routes)! ✨
For the project [**Greenwood**](https://www.greenwoodjs.dev/), **WCC** is used to provide a _Next.js_ like experience by allowing users to author [server-side routes using native custom elements](https://www.greenwoodjs.dev/docs/pages/server-rendering/#web-server-components)! ✨

```js
import '../components/card/card.js';
import fetch from 'node-fetch';

export default class ArtistsPage extends HTMLElement {
async connectedCallback() {
if (!this.shadowRoot) {
const artists = await fetch('https://www.domain.com/api/artists').then(resp => resp.json());
const artists = await fetch('https://www.domain.com/api/artists')
.then(resp => resp.json());
const html = artists.map(artist => {
return `
<wc-card>
Expand Down Expand Up @@ -297,4 +297,4 @@ A couple examples of using WCC + JSX are available for reference and reproductio
* [Counter](https://github.com/thescientist13/greenwood-counter-jsx)
* [Todo App](https://github.com/thescientist13/todo-app)

Both of these examples can compile JSX for _**the client or the server**_ using [Greenwood](https://www.greenwoodjs.io/), and can even be used with great testing tools like [**@web/test-runner**](https://modern-web.dev/docs/test-runner/overview/)! 💪
Both of these examples can compile JSX for _**the client or the server**_ using [Greenwood](https://www.greenwoodjs.dev/), and can even be used with great testing tools like [**@web/test-runner**](https://modern-web.dev/docs/test-runner/overview/)! 💪
6 changes: 3 additions & 3 deletions sandbox/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ <h2>Declarative Shadow DOM (has JS)</h2>
<pre>
&lt;sb-card
title="iPhone 9"
thumbnail="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
thumbnail="https://www.greenwoodjs.dev/assets/greenwood-logo-og.png"
&gt;&lt;/sb-card&gt;
</pre>

Expand All @@ -104,15 +104,15 @@ <h2>HTML Web Component (Light DOM + has JS)</h2>
</style>
<sb-picture-frame title="Greenwood Logo">
<img
src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
src="https://www.greenwoodjs.dev/assets/greenwood-logo-og.png"
alt="Greenwood logo"
/>
</sb-picture-frame>

<pre>
&lt;sb-picture-frame title="Greenwood Logo"&gt;
&lt;img
src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
src="https://www.greenwoodjs.dev/assets/greenwood-logo-og.png"
alt="Greenwood logo"
/&gt;
&lt;/sb-picture-frame&gt;
Expand Down
Loading