From aa6dd2a31ebe06a597d4e55ebcb3f443158e4105 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 10:05:46 +0200 Subject: [PATCH 01/21] chore: homepage content nits --- packages/www/src/pages/index.tsx | 60 +++++++++++++++----------------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 114ad0df5..c418129e5 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -158,14 +158,13 @@ export default function Homepage() {

Brisa mixes ideas from React's "Server Actions" and HTMX concepts. With Brisa, you can handle all browser events on the - server, such as forms, click events, etc. In addition, we offer - some extra HTML attributes to manage debounces, optimistic - updates, etc. + server, such as forms, click events and more. In addition, we + offer extra HTML attributes to manage debounces, optimistic + updates, among other things.

- The idea is that if you want you can create a SPA without Web - Components, only with the weight of the Brisa RPC to make the - connection with the server. + You can create a SPA without Web Components, with just the payload + of the Brisa RPC to make the connection with the server.

🌐 Full i18n support

- Brisa has a built-in internationalization (i18n) support that - allows you to translate your pages and routing, - carrying only the translations you consume. + Brisa has built-in internationalization support that allows you to{' '} + translate your pages and routes, loading only the + translations you consume.

πŸ“± Multi-platform

- Brisa allows you to build web applications that can be easily - converted to native applications for Android, iOS, - and desktop. It's full integrated with Tauri. + Brisa can also be used with Tauri, which allows you to build web + applications that can be easily converted to native applications + for Android, iOS, and desktop.

πŸ€” Web Platform Framework?

- Brisa's mission is to unify the both worlds (server and client) - using the Web Platform. One key feature is the ease with which{' '} - Web Components can be used, utilizing{' '} + Brisa's mission is to unify server and client using the Web + Platform. Web Components can easily be used, using{' '} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring ideas from the Web to the server. You can{' '} + We bring concepts from the web to the server. You can{' '} capture browser events on the server, such as forms, click - events, Web Components events, etc. And you can propagate them - through your server components. + events, Web Components events and others. They are progapated + through to your server components.

- It also streams Hypermedia over the wire during navigation - and Server Actions, utilizing HTTP in the way it was originally - intended. This is closely connected with Web Components because - they are part of the DOM, their attributes are updated, and - signals react to these changes. + Brisa also streams Hypermedia over the wire during + navigation and Server Actions, utilizing HTTP in the way it was + originally intended. This is closely connected with Web + Components, because they are part of the DOM, their attributes are + updated, and signals react to these changes.

- That said, it should be clarified that although we support Web - Components, you can create a MPA like a{' '} - SPA without using any Web Component, the grace is that you + With that said, it should be clarified that although we support + Web Components, you can create a MPA like a{' '} + SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server.

@@ -274,7 +272,7 @@ export default function Homepage() { fully leverage the web's native capabilities. We aim to empower developers, regardless of their stack or environment, to use Brisa to create advanced interactive experiences with less friction, - driving the adoption of the web platform as the foundation + driving the adoption of the Web Platform as the foundation for future development.

@@ -307,9 +305,9 @@ export default function Homepage() {

🎁 Gift to contributors

- Brisa is an open-source project, and we welcome contributions from - the community. We have a T-shirt gift for the first - contributors who help us improve the framework. + Brisa is an open-source projec, and is backed by contributions + from the community. We will send a T-shirt gift to the + first contributors who help us improve the framework.

- Enjoy using it + Enjoy Brisa ); From 05e259118616a29a0ef45eb6a1665a828c041894 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 10:11:39 +0200 Subject: [PATCH 02/21] chore: more nits and get rid of some emoji to make it a bit more serious --- packages/www/src/pages/index.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index c418129e5..1ab774692 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -115,7 +115,7 @@ export default function Homepage() {
-

πŸš€ Build fast apps fast

+

Build fast apps fast

Brisa pages are dynamically server-rendered JSX components, so there's zero JavaScript shipped to the browser{' '} @@ -133,12 +133,12 @@ export default function Homepage() {

-

🏝️ Web Component island-based

+

Web Component island-based

In Brisa everything by default runs only on the server, except the{' '} - src/web-components folder that also runs on the + src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and - hydrated on the client using native Web APIs, as they are + hydrated on the client using native Web APIs, where they are transformed into Web Components with Signals.

@@ -154,7 +154,7 @@ export default function Homepage() {
-

πŸ“² Browser-events on Server

+

Browser-events on Server

Brisa mixes ideas from React's "Server Actions" and HTMX concepts. With Brisa, you can handle all browser events on the @@ -183,11 +183,11 @@ export default function Homepage() {

-

🌐 Full i18n support

+

Full i18n support

Brisa has built-in internationalization support that allows you to{' '} - translate your pages and routes, loading only the - translations you consume. + translate your pages and routes, while downloading + only the used translations.

-

πŸ“± Multi-platform

+

Multi-platform

Brisa can also be used with Tauri, which allows you to build web applications that can be easily converted to native applications @@ -231,7 +231,7 @@ export default function Homepage() {

-

πŸ€” Web Platform Framework?

+

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web Platform. Web Components can easily be used, using{' '} @@ -303,7 +303,7 @@ export default function Homepage() {

-

🎁 Gift to contributors

+

Gift to contributors

Brisa is an open-source projec, and is backed by contributions from the community. We will send a T-shirt gift to the @@ -335,7 +335,7 @@ export default function Homepage() {

-

πŸ“š Documentation

+

Documentation

Learn more about Brisa by reading the{' '} @@ -345,7 +345,7 @@ export default function Homepage() {

-

πŸ’ Sponsors

+

Sponsors

Take a look at our{' '} From 6dccc7a7f7af518f0ffcc5e678bc52fbf42f8769 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 10:35:13 +0200 Subject: [PATCH 03/21] chore: more nits --- packages/www/src/pages/index.tsx | 55 ++++++++++++++++---------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 1ab774692..4a54694c6 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -92,17 +92,17 @@ export default function Homepage() { />

The Web Platform Framework

- Build web applications with speed and{' '} + Build web applications with speed and{" "} simplicity

@@ -117,8 +117,7 @@ export default function Homepage() {

Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, so - there's zero JavaScript shipped to the browser{' '} + Brisa pages are dynamically server-rendered JSX components, with zero JavaScript shipped to the browser{" "} by default.

Simple to write; fast to run.

@@ -135,10 +134,10 @@ export default function Homepage() {

Web Component island-based

- In Brisa everything by default runs only on the server, except the{' '} - src/web-components folder, which always run on the - client. Web components are rendered on the server (SSR) and - hydrated on the client using native Web APIs, where they are + In Brisa everything runs only on the server by default, except + the src/web-components folder, which always run on + the client. Web components are rendered on the server (SSR) + and hydrated on the client using native Web APIs, where they are transformed into Web Components with Signals.

@@ -185,7 +184,7 @@ export default function Homepage() {

Full i18n support

- Brisa has built-in internationalization support that allows you to{' '} + Brisa has built-in internationalization support that allows you to{" "} translate your pages and routes, while downloading only the used translations.

@@ -234,13 +233,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{' '} + Platform. Web Components can easily be used, using{" "} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{' '} + We bring concepts from the web to the server. You can{" "} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -256,7 +255,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{' '} + Web Components, you can create a MPA like a{" "} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -266,7 +265,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{' '} + server to client. We focus on maximizing efficiency by{" "} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -276,9 +275,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -337,18 +336,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{' '} + Learn more about Brisa by reading the{" "} Documentation .

-
+

Sponsors

- Take a look at our{' '} + Take a look at our{" "} Open Collective - {' '} - that we have just opened.{' '} + {" "} + that we have just opened.{" "}

- Enjoy Brisa + Enjoy Brisa
); From 3e890e7d9c73eb1b64f686ff5bef3c310a15cb2f Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 10:38:05 +0200 Subject: [PATCH 04/21] chore: more nits --- packages/www/src/pages/index.tsx | 59 ++++++++++++++++---------------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 4a54694c6..a3d7332b5 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -92,17 +92,16 @@ export default function Homepage() { />

The Web Platform Framework

- Build web applications with speed and{" "} - simplicity + Build web applications with speed and simplicity

@@ -117,8 +116,8 @@ export default function Homepage() {

Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with zero JavaScript shipped to the browser{" "} - by default. + Brisa pages are dynamically server-rendered JSX components, with{' '} + zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -134,10 +133,10 @@ export default function Homepage() {

Web Component island-based

- In Brisa everything runs only on the server by default, except - the src/web-components folder, which always run on - the client. Web components are rendered on the server (SSR) - and hydrated on the client using native Web APIs, where they are + In Brisa everything runs only on the server by default, except the{' '} + src/web-components folder, which always run on the + client. Web components are rendered on the server (SSR) and + hydrated on the client using native Web APIs, where they are transformed into Web Components with Signals.

@@ -153,7 +152,7 @@ export default function Homepage() {
-

Browser-events on Server

+

Browser-events on the server

Brisa mixes ideas from React's "Server Actions" and HTMX concepts. With Brisa, you can handle all browser events on the @@ -184,7 +183,7 @@ export default function Homepage() {

Full i18n support

- Brisa has built-in internationalization support that allows you to{" "} + Brisa has built-in internationalization support that allows you to{' '} translate your pages and routes, while downloading only the used translations.

@@ -233,13 +232,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{" "} + Platform. Web Components can easily be used, using{' '} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{" "} + We bring concepts from the web to the server. You can{' '} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -255,7 +254,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{" "} + Web Components, you can create a MPA like a{' '} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -265,7 +264,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{" "} + server to client. We focus on maximizing efficiency by{' '} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -275,9 +274,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -336,18 +335,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{" "} + Learn more about Brisa by reading the{' '} Documentation .

-
+

Sponsors

- Take a look at our{" "} + Take a look at our{' '} Open Collective - {" "} - that we have just opened.{" "} + {' '} + that we have just opened.{' '}

- Enjoy Brisa + Enjoy Brisa
); From 70cff8302178c71aa0444dd050faa375be11f9f6 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 11:59:19 +0200 Subject: [PATCH 05/21] chore: replace emoji with icons --- .../icons/chevrons-left-right-ellipsis.tsx | 21 +++++ packages/www/src/icons/languages.tsx | 22 +++++ packages/www/src/icons/monitor-smartphone.tsx | 20 +++++ packages/www/src/icons/tree-palm.tsx | 20 +++++ packages/www/src/icons/zap.tsx | 17 ++++ packages/www/src/pages/index.tsx | 80 ++++++++++++------- packages/www/src/styles/style.css | 1 + 7 files changed, 151 insertions(+), 30 deletions(-) create mode 100644 packages/www/src/icons/chevrons-left-right-ellipsis.tsx create mode 100644 packages/www/src/icons/languages.tsx create mode 100644 packages/www/src/icons/monitor-smartphone.tsx create mode 100644 packages/www/src/icons/tree-palm.tsx create mode 100644 packages/www/src/icons/zap.tsx diff --git a/packages/www/src/icons/chevrons-left-right-ellipsis.tsx b/packages/www/src/icons/chevrons-left-right-ellipsis.tsx new file mode 100644 index 000000000..d07fe86b2 --- /dev/null +++ b/packages/www/src/icons/chevrons-left-right-ellipsis.tsx @@ -0,0 +1,21 @@ +export default function ChevronsLeftRightEllipsis({ size = 24 }: { size: number }) { + return ( + + + + + + + + ); +} diff --git a/packages/www/src/icons/languages.tsx b/packages/www/src/icons/languages.tsx new file mode 100644 index 000000000..d1f315800 --- /dev/null +++ b/packages/www/src/icons/languages.tsx @@ -0,0 +1,22 @@ +export default function Languages({ size = 24 }: { size: number }) { + return ( + + + + + + + + + ); +} diff --git a/packages/www/src/icons/monitor-smartphone.tsx b/packages/www/src/icons/monitor-smartphone.tsx new file mode 100644 index 000000000..bed1de589 --- /dev/null +++ b/packages/www/src/icons/monitor-smartphone.tsx @@ -0,0 +1,20 @@ +export default function MonitorSmartphone({ size = 24 }: { size: number }) { + return ( + + + + + + + ); +} diff --git a/packages/www/src/icons/tree-palm.tsx b/packages/www/src/icons/tree-palm.tsx new file mode 100644 index 000000000..df1c18200 --- /dev/null +++ b/packages/www/src/icons/tree-palm.tsx @@ -0,0 +1,20 @@ +export default function TreePalm({ size = 24 }: { size: number }) { + return ( + + + + + + + ); +} diff --git a/packages/www/src/icons/zap.tsx b/packages/www/src/icons/zap.tsx new file mode 100644 index 000000000..eeb327c49 --- /dev/null +++ b/packages/www/src/icons/zap.tsx @@ -0,0 +1,17 @@ +export default function Zap({ size = 24 }: { size: number}) { + return ( + + + + ); +} diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index a3d7332b5..c738696dd 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -1,7 +1,12 @@ import CopyBox from '@/components/copy-box'; import { RenderCode } from '@/helpers/markdown-loader'; +import Zap from '@/icons/zap'; import GitHubIcon from '@/icons/github-icon'; import VideoIcon from '@/icons/video-icon'; +import TreePalm from '@/icons/tree-palm'; +import Languages from '@/icons/languages'; +import MonitorSmartphone from '@/icons/monitor-smartphone'; +import ChevronsLeftRightEllipsis from '@/icons/chevrons-left-right-ellipsis'; const fastAppsCode = ` // src/pages/index.tsx @@ -97,11 +102,11 @@ export default function Homepage() {
@@ -114,9 +119,12 @@ export default function Homepage() {
-

Build fast apps fast

+

+ +  Build fast apps fast +

- Brisa pages are dynamically server-rendered JSX components, with{' '} + Brisa pages are dynamically server-rendered JSX components, with{" "} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -131,9 +139,12 @@ export default function Homepage() {
-

Web Component island-based

+

+ +  Web Component island-based +

- In Brisa everything runs only on the server by default, except the{' '} + In Brisa everything runs only on the server by default, except the{" "} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -152,7 +163,10 @@ export default function Homepage() {

-

Browser-events on the server

+

+ +  Browser-events on the server +

Brisa mixes ideas from React's "Server Actions" and HTMX concepts. With Brisa, you can handle all browser events on the @@ -181,11 +195,14 @@ export default function Homepage() {

-

Full i18n support

+

+ +  Full i18n support +

- Brisa has built-in internationalization support that allows you to{' '} - translate your pages and routes, while downloading - only the used translations. + Brisa has built-in internationalization support that allows you to{" "} + translate your pages and routes, while downloading only the + used translations.

-

Multi-platform

+

+ +  Multi-platform +

Brisa can also be used with Tauri, which allows you to build web applications that can be easily converted to native applications @@ -232,13 +252,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{' '} + Platform. Web Components can easily be used, using{" "} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{' '} + We bring concepts from the web to the server. You can{" "} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -254,7 +274,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{' '} + Web Components, you can create a MPA like a{" "} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -264,7 +284,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{' '} + server to client. We focus on maximizing efficiency by{" "} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -274,9 +294,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -335,18 +355,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{' '} + Learn more about Brisa by reading the{" "} Documentation .

-
+

Sponsors

- Take a look at our{' '} + Take a look at our{" "} Open Collective - {' '} - that we have just opened.{' '} + {" "} + that we have just opened.{" "}

- Enjoy Brisa + Enjoy Brisa
); diff --git a/packages/www/src/styles/style.css b/packages/www/src/styles/style.css index 597b0575a..9ea79e952 100644 --- a/packages/www/src/styles/style.css +++ b/packages/www/src/styles/style.css @@ -327,6 +327,7 @@ main { h2 { font-size: 2.2rem; + display: flex; } } From 47d76c6638f8c1229128e59a1e8b62cca785529e Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 11:59:52 +0200 Subject: [PATCH 06/21] chore: lint --- .../icons/chevrons-left-right-ellipsis.tsx | 4 +- packages/www/src/icons/zap.tsx | 2 +- packages/www/src/pages/index.tsx | 46 +++++++++---------- 3 files changed, 27 insertions(+), 25 deletions(-) diff --git a/packages/www/src/icons/chevrons-left-right-ellipsis.tsx b/packages/www/src/icons/chevrons-left-right-ellipsis.tsx index d07fe86b2..0beba021d 100644 --- a/packages/www/src/icons/chevrons-left-right-ellipsis.tsx +++ b/packages/www/src/icons/chevrons-left-right-ellipsis.tsx @@ -1,4 +1,6 @@ -export default function ChevronsLeftRightEllipsis({ size = 24 }: { size: number }) { +export default function ChevronsLeftRightEllipsis({ + size = 24, +}: { size: number }) { return (
@@ -124,7 +124,7 @@ export default function Homepage() {  Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with{" "} + Brisa pages are dynamically server-rendered JSX components, with{' '} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -144,7 +144,7 @@ export default function Homepage() {  Web Component island-based

- In Brisa everything runs only on the server by default, except the{" "} + In Brisa everything runs only on the server by default, except the{' '} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -200,7 +200,7 @@ export default function Homepage() {  Full i18n support

- Brisa has built-in internationalization support that allows you to{" "} + Brisa has built-in internationalization support that allows you to{' '} translate your pages and routes, while downloading only the used translations.

@@ -252,13 +252,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{" "} + Platform. Web Components can easily be used, using{' '} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{" "} + We bring concepts from the web to the server. You can{' '} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -274,7 +274,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{" "} + Web Components, you can create a MPA like a{' '} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -284,7 +284,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{" "} + server to client. We focus on maximizing efficiency by{' '} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -294,9 +294,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -355,18 +355,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{" "} + Learn more about Brisa by reading the{' '} Documentation .

-
+

Sponsors

- Take a look at our{" "} + Take a look at our{' '} Open Collective - {" "} - that we have just opened.{" "} + {' '} + that we have just opened.{' '}

- Enjoy Brisa + Enjoy Brisa
); From 20243dfab34260dcd3a179e85d4dbf504bc286b7 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 13:50:41 +0200 Subject: [PATCH 07/21] chore: fix line height --- packages/www/src/styles/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/www/src/styles/style.css b/packages/www/src/styles/style.css index 9ea79e952..8cae155c8 100644 --- a/packages/www/src/styles/style.css +++ b/packages/www/src/styles/style.css @@ -257,7 +257,6 @@ main { .brisa-section:has(.code-example) { padding: 2rem 1rem; max-width: none; - line-height: 34px; font-size: 18px; color: var(--color-primary); @@ -328,6 +327,7 @@ main { h2 { font-size: 2.2rem; display: flex; + font-weight: 600; } } @@ -351,7 +351,7 @@ main { p { color: var(--color-secondary); font-size: 1.2rem; - font-weight: 500; + font-weight: 400; } } } From e9d4d467a2b5aa16f86a91fcd680da54ddfc9eea Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 13:54:02 +0200 Subject: [PATCH 08/21] chore: fix heading icons --- packages/www/src/pages/index.tsx | 56 +++++++++++++++---------------- packages/www/src/styles/style.css | 1 + 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 3281f5596..1fb9ba2c1 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -102,11 +102,11 @@ export default function Homepage() {
@@ -120,11 +120,11 @@ export default function Homepage() {

- +  Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with{' '} + Brisa pages are dynamically server-rendered JSX components, with{" "} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -140,11 +140,11 @@ export default function Homepage() {

- +  Web Component island-based

- In Brisa everything runs only on the server by default, except the{' '} + In Brisa everything runs only on the server by default, except the{" "} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -164,7 +164,7 @@ export default function Homepage() {

- +  Browser-events on the server

@@ -196,11 +196,11 @@ export default function Homepage() {

- +  Full i18n support

- Brisa has built-in internationalization support that allows you to{' '} + Brisa has built-in internationalization support that allows you to{" "} translate your pages and routes, while downloading only the used translations.

@@ -223,7 +223,7 @@ export default function Homepage() {

- +  Multi-platform

@@ -252,13 +252,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{' '} + Platform. Web Components can easily be used, using{" "} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{' '} + We bring concepts from the web to the server. You can{" "} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -274,7 +274,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{' '} + Web Components, you can create a MPA like a{" "} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -284,7 +284,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{' '} + server to client. We focus on maximizing efficiency by{" "} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -294,9 +294,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -355,18 +355,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{' '} + Learn more about Brisa by reading the{" "} Documentation .

-
+

Sponsors

- Take a look at our{' '} + Take a look at our{" "} Open Collective - {' '} - that we have just opened.{' '} + {" "} + that we have just opened.{" "}

- Enjoy Brisa + Enjoy Brisa
); diff --git a/packages/www/src/styles/style.css b/packages/www/src/styles/style.css index 8cae155c8..8fc58c796 100644 --- a/packages/www/src/styles/style.css +++ b/packages/www/src/styles/style.css @@ -328,6 +328,7 @@ main { font-size: 2.2rem; display: flex; font-weight: 600; + align-items: center; } } From 7cdc09f367ca15769ae6b14e368dfc941d63f658 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 13:56:26 +0200 Subject: [PATCH 09/21] chore: get rid of garrish image --- packages/www/src/pages/index.tsx | 53 ++++++++++++++------------------ 1 file changed, 23 insertions(+), 30 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 1fb9ba2c1..0196094bd 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -102,11 +102,11 @@ export default function Homepage() {
@@ -124,7 +124,7 @@ export default function Homepage() {  Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with{" "} + Brisa pages are dynamically server-rendered JSX components, with{' '} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -144,7 +144,7 @@ export default function Homepage() {  Web Component island-based

- In Brisa everything runs only on the server by default, except the{" "} + In Brisa everything runs only on the server by default, except the{' '} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -200,7 +200,7 @@ export default function Homepage() {  Full i18n support

- Brisa has built-in internationalization support that allows you to{" "} + Brisa has built-in internationalization support that allows you to{' '} translate your pages and routes, while downloading only the used translations.

@@ -231,13 +231,6 @@ export default function Homepage() { applications that can be easily converted to native applications for Android, iOS, and desktop.

- Multi-platform
@@ -252,13 +245,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{" "} + Platform. Web Components can easily be used, using{' '} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{" "} + We bring concepts from the web to the server. You can{' '} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -274,7 +267,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{" "} + Web Components, you can create a MPA like a{' '} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -284,7 +277,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{" "} + server to client. We focus on maximizing efficiency by{' '} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -294,9 +287,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -355,18 +348,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{" "} + Learn more about Brisa by reading the{' '} Documentation .

-
+

Sponsors

- Take a look at our{" "} + Take a look at our{' '} Open Collective - {" "} - that we have just opened.{" "} + {' '} + that we have just opened.{' '}

- Enjoy Brisa + Enjoy Brisa
); From 0a5c6327c687148ee6b53f671008827959d82e8e Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 16:05:46 +0200 Subject: [PATCH 10/21] Revert "chore: get rid of garrish image" This reverts commit 7cdc09f367ca15769ae6b14e368dfc941d63f658. --- packages/www/src/pages/index.tsx | 53 ++++++++++++++++++-------------- 1 file changed, 30 insertions(+), 23 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 0196094bd..1fb9ba2c1 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -102,11 +102,11 @@ export default function Homepage() {
@@ -124,7 +124,7 @@ export default function Homepage() {  Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with{' '} + Brisa pages are dynamically server-rendered JSX components, with{" "} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -144,7 +144,7 @@ export default function Homepage() {  Web Component island-based

- In Brisa everything runs only on the server by default, except the{' '} + In Brisa everything runs only on the server by default, except the{" "} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -200,7 +200,7 @@ export default function Homepage() {  Full i18n support

- Brisa has built-in internationalization support that allows you to{' '} + Brisa has built-in internationalization support that allows you to{" "} translate your pages and routes, while downloading only the used translations.

@@ -231,6 +231,13 @@ export default function Homepage() { applications that can be easily converted to native applications for Android, iOS, and desktop.

+ Multi-platform
@@ -245,13 +252,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{' '} + Platform. Web Components can easily be used, using{" "} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{' '} + We bring concepts from the web to the server. You can{" "} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -267,7 +274,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{' '} + Web Components, you can create a MPA like a{" "} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -277,7 +284,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{' '} + server to client. We focus on maximizing efficiency by{" "} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -287,9 +294,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -348,18 +355,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{' '} + Learn more about Brisa by reading the{" "} Documentation .

-
+

Sponsors

- Take a look at our{' '} + Take a look at our{" "} Open Collective - {' '} - that we have just opened.{' '} + {" "} + that we have just opened.{" "}

- Enjoy Brisa + Enjoy Brisa
); From ef8dea9fb50e06e97345b05961e56679b5b040bf Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 16:06:09 +0200 Subject: [PATCH 11/21] chore: lint --- packages/www/src/pages/index.tsx | 46 ++++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 1fb9ba2c1..c547e1aca 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -102,11 +102,11 @@ export default function Homepage() {
@@ -124,7 +124,7 @@ export default function Homepage() {  Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with{" "} + Brisa pages are dynamically server-rendered JSX components, with{' '} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -144,7 +144,7 @@ export default function Homepage() {  Web Component island-based

- In Brisa everything runs only on the server by default, except the{" "} + In Brisa everything runs only on the server by default, except the{' '} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -200,7 +200,7 @@ export default function Homepage() {  Full i18n support

- Brisa has built-in internationalization support that allows you to{" "} + Brisa has built-in internationalization support that allows you to{' '} translate your pages and routes, while downloading only the used translations.

@@ -252,13 +252,13 @@ export default function Homepage() {

What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{" "} + Platform. Web Components can easily be used, using{' '} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{" "} + We bring concepts from the web to the server. You can{' '} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -274,7 +274,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{" "} + Web Components, you can create a MPA like a{' '} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -284,7 +284,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{" "} + server to client. We focus on maximizing efficiency by{' '} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -294,9 +294,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -355,18 +355,18 @@ export default function Homepage() {

Documentation

- Learn more about Brisa by reading the{" "} + Learn more about Brisa by reading the{' '} Documentation .

-
+

Sponsors

- Take a look at our{" "} + Take a look at our{' '} Open Collective - {" "} - that we have just opened.{" "} + {' '} + that we have just opened.{' '}

- Enjoy Brisa + Enjoy Brisa
); From 386ebf8c514a62ac219f6cd2929260f34a483260 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 16:06:20 +0200 Subject: [PATCH 12/21] Revert "chore: fix heading icons" This reverts commit e9d4d467a2b5aa16f86a91fcd680da54ddfc9eea. --- packages/www/src/pages/index.tsx | 10 +++++----- packages/www/src/styles/style.css | 1 - 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index c547e1aca..3281f5596 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -120,7 +120,7 @@ export default function Homepage() {

- +  Build fast apps fast

@@ -140,7 +140,7 @@ export default function Homepage() {

- +  Web Component island-based

@@ -164,7 +164,7 @@ export default function Homepage() {

- +  Browser-events on the server

@@ -196,7 +196,7 @@ export default function Homepage() {

- +  Full i18n support

@@ -223,7 +223,7 @@ export default function Homepage() {

- +  Multi-platform

diff --git a/packages/www/src/styles/style.css b/packages/www/src/styles/style.css index 8fc58c796..8cae155c8 100644 --- a/packages/www/src/styles/style.css +++ b/packages/www/src/styles/style.css @@ -328,7 +328,6 @@ main { font-size: 2.2rem; display: flex; font-weight: 600; - align-items: center; } } From fe02b06490c64d0c090bef1c339f95272eaa12e3 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 16:07:07 +0200 Subject: [PATCH 13/21] Revert "chore: replace emoji with icons" This reverts commit 70cff8302178c71aa0444dd050faa375be11f9f6. --- .../icons/chevrons-left-right-ellipsis.tsx | 23 ------------- packages/www/src/icons/languages.tsx | 22 ------------ packages/www/src/icons/monitor-smartphone.tsx | 20 ----------- packages/www/src/icons/tree-palm.tsx | 20 ----------- packages/www/src/icons/zap.tsx | 17 ---------- packages/www/src/pages/index.tsx | 34 ++++--------------- packages/www/src/styles/style.css | 5 ++- 7 files changed, 9 insertions(+), 132 deletions(-) delete mode 100644 packages/www/src/icons/chevrons-left-right-ellipsis.tsx delete mode 100644 packages/www/src/icons/languages.tsx delete mode 100644 packages/www/src/icons/monitor-smartphone.tsx delete mode 100644 packages/www/src/icons/tree-palm.tsx delete mode 100644 packages/www/src/icons/zap.tsx diff --git a/packages/www/src/icons/chevrons-left-right-ellipsis.tsx b/packages/www/src/icons/chevrons-left-right-ellipsis.tsx deleted file mode 100644 index 0beba021d..000000000 --- a/packages/www/src/icons/chevrons-left-right-ellipsis.tsx +++ /dev/null @@ -1,23 +0,0 @@ -export default function ChevronsLeftRightEllipsis({ - size = 24, -}: { size: number }) { - return ( - - - - - - - - ); -} diff --git a/packages/www/src/icons/languages.tsx b/packages/www/src/icons/languages.tsx deleted file mode 100644 index d1f315800..000000000 --- a/packages/www/src/icons/languages.tsx +++ /dev/null @@ -1,22 +0,0 @@ -export default function Languages({ size = 24 }: { size: number }) { - return ( - - - - - - - - - ); -} diff --git a/packages/www/src/icons/monitor-smartphone.tsx b/packages/www/src/icons/monitor-smartphone.tsx deleted file mode 100644 index bed1de589..000000000 --- a/packages/www/src/icons/monitor-smartphone.tsx +++ /dev/null @@ -1,20 +0,0 @@ -export default function MonitorSmartphone({ size = 24 }: { size: number }) { - return ( - - - - - - - ); -} diff --git a/packages/www/src/icons/tree-palm.tsx b/packages/www/src/icons/tree-palm.tsx deleted file mode 100644 index df1c18200..000000000 --- a/packages/www/src/icons/tree-palm.tsx +++ /dev/null @@ -1,20 +0,0 @@ -export default function TreePalm({ size = 24 }: { size: number }) { - return ( - - - - - - - ); -} diff --git a/packages/www/src/icons/zap.tsx b/packages/www/src/icons/zap.tsx deleted file mode 100644 index f237f75b8..000000000 --- a/packages/www/src/icons/zap.tsx +++ /dev/null @@ -1,17 +0,0 @@ -export default function Zap({ size = 24 }: { size: number }) { - return ( - - - - ); -} diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 3281f5596..a3d7332b5 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -1,12 +1,7 @@ import CopyBox from '@/components/copy-box'; import { RenderCode } from '@/helpers/markdown-loader'; -import Zap from '@/icons/zap'; import GitHubIcon from '@/icons/github-icon'; import VideoIcon from '@/icons/video-icon'; -import TreePalm from '@/icons/tree-palm'; -import Languages from '@/icons/languages'; -import MonitorSmartphone from '@/icons/monitor-smartphone'; -import ChevronsLeftRightEllipsis from '@/icons/chevrons-left-right-ellipsis'; const fastAppsCode = ` // src/pages/index.tsx @@ -119,10 +114,7 @@ export default function Homepage() {

-

- -  Build fast apps fast -

+

Build fast apps fast

Brisa pages are dynamically server-rendered JSX components, with{' '} zero JavaScript shipped to the browser by default. @@ -139,10 +131,7 @@ export default function Homepage() {

-

- -  Web Component island-based -

+

Web Component island-based

In Brisa everything runs only on the server by default, except the{' '} src/web-components folder, which always run on the @@ -163,10 +152,7 @@ export default function Homepage() {

-

- -  Browser-events on the server -

+

Browser-events on the server

Brisa mixes ideas from React's "Server Actions" and HTMX concepts. With Brisa, you can handle all browser events on the @@ -195,14 +181,11 @@ export default function Homepage() {

-

- -  Full i18n support -

+

Full i18n support

Brisa has built-in internationalization support that allows you to{' '} - translate your pages and routes, while downloading only the - used translations. + translate your pages and routes, while downloading + only the used translations.

-

- -  Multi-platform -

+

Multi-platform

Brisa can also be used with Tauri, which allows you to build web applications that can be easily converted to native applications diff --git a/packages/www/src/styles/style.css b/packages/www/src/styles/style.css index 8cae155c8..597b0575a 100644 --- a/packages/www/src/styles/style.css +++ b/packages/www/src/styles/style.css @@ -257,6 +257,7 @@ main { .brisa-section:has(.code-example) { padding: 2rem 1rem; max-width: none; + line-height: 34px; font-size: 18px; color: var(--color-primary); @@ -326,8 +327,6 @@ main { h2 { font-size: 2.2rem; - display: flex; - font-weight: 600; } } @@ -351,7 +350,7 @@ main { p { color: var(--color-secondary); font-size: 1.2rem; - font-weight: 400; + font-weight: 500; } } } From 2410aaa1df98f0f26cef0c7c9de4f9dc0caf81b3 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 16:08:37 +0200 Subject: [PATCH 14/21] chore: typo --- packages/www/src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index a3d7332b5..3428a5317 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -303,7 +303,7 @@ export default function Homepage() {

Gift to contributors

- Brisa is an open-source projec, and is backed by contributions + Brisa is an open-source project, and is backed by contributions from the community. We will send a T-shirt gift to the first contributors who help us improve the framework.

From cfa6761b30f1d561d42db2969d568bd191206129 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Tue, 8 Oct 2024 16:12:17 +0200 Subject: [PATCH 15/21] chore: bring back emojis --- packages/www/src/pages/index.tsx | 64 ++++++++++++++++---------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 3428a5317..83e3aa4e0 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -97,11 +97,11 @@ export default function Homepage() {
@@ -114,9 +114,9 @@ export default function Homepage() {
-

Build fast apps fast

+

πŸš€ Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with{' '} + Brisa pages are dynamically server-rendered JSX components, with{" "} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -131,9 +131,9 @@ export default function Homepage() {
-

Web Component island-based

+

🏝️ Web Component island-based

- In Brisa everything runs only on the server by default, except the{' '} + In Brisa everything runs only on the server by default, except the{" "} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -152,7 +152,7 @@ export default function Homepage() {

-

Browser-events on the server

+

πŸ“² Browser-events on the server

Brisa mixes ideas from React's "Server Actions" and HTMX concepts. With Brisa, you can handle all browser events on the @@ -181,9 +181,9 @@ export default function Homepage() {

-

Full i18n support

+

🌐 Full i18n support

- Brisa has built-in internationalization support that allows you to{' '} + Brisa has built-in internationalization support that allows you to{" "} translate your pages and routes, while downloading only the used translations.

@@ -205,7 +205,7 @@ export default function Homepage() {
-

Multi-platform

+

πŸ“± Multi-platform

Brisa can also be used with Tauri, which allows you to build web applications that can be easily converted to native applications @@ -229,16 +229,16 @@ export default function Homepage() {

-

What does Web Platform Framework mean?

+

πŸ€” What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{' '} + Platform. Web Components can easily be used, using{" "} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{' '} + We bring concepts from the web to the server. You can{" "} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -254,7 +254,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{' '} + Web Components, you can create a MPA like a{" "} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -264,7 +264,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{' '} + server to client. We focus on maximizing efficiency by{" "} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -274,9 +274,9 @@ export default function Homepage() { for future development.

-
+
-

Gift to contributors

+

🎁 Gift to contributors

Brisa is an open-source project, and is backed by contributions from the community. We will send a T-shirt gift to the @@ -313,18 +313,18 @@ export default function Homepage() { target="_blank" rel="noopener noreferrer" > - + GitHub

-
+
Brisa T-shirt gift
@@ -333,20 +333,20 @@ export default function Homepage() {
-

Documentation

+

πŸ“š Documentation

- Learn more about Brisa by reading the{' '} + Learn more about Brisa by reading the{" "} Documentation .

-
-

Sponsors

+
+

πŸ’ Sponsors

- Take a look at our{' '} + Take a look at our{" "} Open Collective - {' '} - that we have just opened.{' '} + {" "} + that we have just opened.{" "}

- Enjoy Brisa + Enjoy Brisa
); From 7e4e58a934af2fdee5e3ab6e5ed2974bcafaeeed Mon Sep 17 00:00:00 2001 From: Guillem Arias Fauste Date: Wed, 9 Oct 2024 08:18:45 +0200 Subject: [PATCH 16/21] Update packages/www/src/pages/index.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Good one, thanks. Co-authored-by: Albert SabatΓ© --- packages/www/src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 83e3aa4e0..d1d18d72d 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -133,7 +133,7 @@ export default function Homepage() {

🏝️ Web Component island-based

- In Brisa everything runs only on the server by default, except the{" "} + In Brisa everything runs on the server by default, except the{" "} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are From 2fbd7db0e4e52a6b933cec2b3f4bd9fa36a8bc99 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Wed, 9 Oct 2024 11:31:56 +0200 Subject: [PATCH 17/21] chore: apply biome --- packages/www/src/pages/index.tsx | 46 ++++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index d1d18d72d..d7a0eaa69 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -97,11 +97,11 @@ export default function Homepage() {

@@ -116,7 +116,7 @@ export default function Homepage() {

πŸš€ Build fast apps fast

- Brisa pages are dynamically server-rendered JSX components, with{" "} + Brisa pages are dynamically server-rendered JSX components, with{' '} zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

@@ -133,7 +133,7 @@ export default function Homepage() {

🏝️ Web Component island-based

- In Brisa everything runs on the server by default, except the{" "} + In Brisa everything runs only on the server by default, except the{' '} src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are @@ -183,7 +183,7 @@ export default function Homepage() {

🌐 Full i18n support

- Brisa has built-in internationalization support that allows you to{" "} + Brisa has built-in internationalization support that allows you to{' '} translate your pages and routes, while downloading only the used translations.

@@ -232,13 +232,13 @@ export default function Homepage() {

πŸ€” What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web - Platform. Web Components can easily be used, using{" "} + Platform. Web Components can easily be used, using{' '} Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

- We bring concepts from the web to the server. You can{" "} + We bring concepts from the web to the server. You can{' '} capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components. @@ -254,7 +254,7 @@ export default function Homepage() {

With that said, it should be clarified that although we support - Web Components, you can create a MPA like a{" "} + Web Components, you can create a MPA like a{' '} SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server. @@ -264,7 +264,7 @@ export default function Homepage() { Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from - server to client. We focus on maximizing efficiency by{" "} + server to client. We focus on maximizing efficiency by{' '} minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower @@ -274,9 +274,9 @@ export default function Homepage() { for future development.

-
+
- + GitHub
-
+
Brisa T-shirt gift
@@ -335,18 +335,18 @@ export default function Homepage() {

πŸ“š Documentation

- Learn more about Brisa by reading the{" "} + Learn more about Brisa by reading the{' '} Documentation .

-
+

πŸ’ Sponsors

- Take a look at our{" "} + Take a look at our{' '} Open Collective - {" "} - that we have just opened.{" "} + {' '} + that we have just opened.{' '}

- Enjoy Brisa + Enjoy Brisa
); From 9cd5206904403ab08f7fe9da9fa10152e7515883 Mon Sep 17 00:00:00 2001 From: Guillem Arias Fauste Date: Thu, 10 Oct 2024 10:44:06 +0200 Subject: [PATCH 18/21] Update packages/www/src/pages/index.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Albert SabatΓ© --- packages/www/src/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index d7a0eaa69..8004b71a5 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -184,7 +184,7 @@ export default function Homepage() {

🌐 Full i18n support

Brisa has built-in internationalization support that allows you to{' '} - translate your pages and routes, while downloading + translate your pages and routes, while loading only the used translations.

Date: Thu, 10 Oct 2024 10:49:25 +0200 Subject: [PATCH 19/21] amend for clarification --- packages/www/src/pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 8004b71a5..0df46d413 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -161,8 +161,8 @@ export default function Homepage() { updates, among other things.

- You can create a SPA without Web Components, with just the payload - of the Brisa RPC to make the connection with the server. + You can create a lightweight SPA without Web Components, where the only payload + will be that of the Brisa RPC to make the connection with the server.

Date: Thu, 10 Oct 2024 10:49:47 +0200 Subject: [PATCH 20/21] lint --- packages/www/src/pages/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 0df46d413..4d6f8d2ea 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -161,8 +161,9 @@ export default function Homepage() { updates, among other things.

- You can create a lightweight SPA without Web Components, where the only payload - will be that of the Brisa RPC to make the connection with the server. + You can create a lightweight SPA without Web Components, + where the only payload will be that of the Brisa RPC to make the + connection with the server.

Date: Fri, 18 Oct 2024 11:45:58 +0200 Subject: [PATCH 21/21] amend Tauri feature description --- packages/www/src/pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/www/src/pages/index.tsx b/packages/www/src/pages/index.tsx index 4d6f8d2ea..71e3f6993 100644 --- a/packages/www/src/pages/index.tsx +++ b/packages/www/src/pages/index.tsx @@ -208,8 +208,8 @@ export default function Homepage() {

πŸ“± Multi-platform

- Brisa can also be used with Tauri, which allows you to build web - applications that can be easily converted to native applications + Brisa is fully integrated with Tauri. This means that with a small config change, + you can build web applications that can be easily converted to native applications for Android, iOS, and desktop.