Merge pull request #255 from brunolm/master

Add Examples section

i18n/en-US/articles/server-request-and-response.md

@@ -79,6 +79,22 @@ class Application extends Nullstack {
 export default Application;
 ```
 
+It's also possible to expose server functions from your components to be in the web API. Instead of using a function that a `request` and a `response` pass the static function from your component to the express route.
+
+```js
+// server.js
+import Nullstack from 'nullstack';
+import Application from './src/Application';
+import WaifuComponent from './src/WaifuComponent';
+
+const context = Nullstack.start(Application);
+
+context.server.get('/waifus', WaifuComponent.getWaifus)
+
+export default context;
+```
+
+
 ## Next step
 
 ⚔ Learn about [styles](/styles).

i18n/en-US/components/Examples.yml

@@ -0,0 +1,21 @@
+title: "Nullstack Examples"
+description: "Check coolest stuff you can do with Nullstack"
+heading: "Nullstack Examples"
+tagline: "A collection of application examples with Nullstack."
+contribute: "We accept guest examples! You can write it up in markdown and open a PR to our <a href='https://github.com/nullstack/nullstack.github.io/pulls'>github repo</a>."
+posts:
+  - title: "Using Nullstack as a Web API"
+    href: "/examples/using-nullstack-as-a-web-api"
+    description: "Nullstack can be used as a web API, you can write your own endpoints or expose server functions."
+  - title: "Using Nullstack to build a Chrome Extension"
+    href: "/examples/using-nullstack-to-build-a-chrome-extension"
+    description: "Nullstack can be used to build a Chrome Extension."
+  - title: "Using Nullstack to build a Desktop Application"
+    href: "/examples/using-nullstack-to-build-a-desktop-application"
+    description: "Nullstack can be used to build a Desktop Application."
+  - title: "Using Nullstack to build a Mobile Application"
+    href: "/examples/using-nullstack-to-build-a-mobile-application"
+    description: "Nullstack can be used to build a Mobile Application."
+  - title: "Using Nullstack to build a personal Portfolio on GitHub"
+    href: "/examples/using-nullstack-to-build-a-personal-portfolio-on-github"
+    description: "Nullstack can be used to build a personal Portfolio on GitHub."

i18n/en-US/components/Header.yml

@@ -6,6 +6,8 @@ links:
     href: "/what-is-nullstack"
   - title: "Documentation"
     href: "/getting-started"
+  - title: "Examples"
+    href: "/examples"
   - title: "Blog"
     href: "/blog"
   - title: "Contributors"

i18n/en-US/examples/404.md

@@ -0,0 +1,9 @@
+---
+title: Page Not Found
+description: Sorry, this is not the page you are looking for.
+status: 404
+---
+
+Perhaps you want to learn more about [Nullstack](/what-is-nullstack)?
+
+Or do you want to contribute to our [blog](/blog)?

i18n/en-US/examples/using-nullstack-as-a-web-api.md

@@ -0,0 +1,36 @@
+---
+title: "Using Nullstack as a Web API"
+description: "Nullstack can be used as a web API, you can write your own endpoints or expose server functions."
+---
+Nullstack can be used as a Web API. Nullstack runs an Express server behind the scenes allowing you to configure your own routes and build a fully customized Web API.
+
+You can configure the Express routes by using the `server` object available in the Nullstack Context on `server.js`.
+
+```js
+// server.js
+import Nullstack from 'nullstack';
+import Application from './src/Application';
+
+const context = Nullstack.start(Application);
+
+context.server.get('/api/waifus', (request, response) => {
+  response.json({waifus: []});
+});
+
+export default context;
+```
+
+It's also possible to expose server functions from your components to be in the web API. Instead of using a function that a `request` and a `response` pass the static function from your component to the express route.
+
+```js
+// server.js
+import Nullstack from 'nullstack';
+import Application from './src/Application';
+import WaifuComponent from './src/WaifuComponent';
+
+const context = Nullstack.start(Application);
+
+context.server.get('/waifus', WaifuComponent.getWaifus)
+
+export default context;
+```

i18n/en-US/examples/using-nullstack-to-build-a-chrome-extension.md

@@ -0,0 +1,14 @@
+---
+title: "Using Nullstack to build a Chrome Extension"
+description: "Nullstack can be used to build a Chrome Extension"
+---
+Nullstack can be used as to build a Chrome Extension.
+
+These are all the changes required to make the app compatible as an extension:
+
+- `public/manifest.json` creates the Chrome Extension manifest file
+- `server.js` disables the default service worker, as the extension doesn't need it
+- `src/Application.jsx` is the entry component that will render the Popup code
+- `package.json` sets mode to SPA (default mode) and enables writing files to disk
+
+You can find a full example at [Mortaro/nullstack-chrome-extension](https://github.com/Mortaro/nullstack-chrome-extension).

i18n/en-US/examples/using-nullstack-to-build-a-desktop-application.md

@@ -0,0 +1,7 @@
+---
+title: "Using Nullstack to build a Desktop Application"
+description: "Nullstack can be used to build a Desktop Application"
+---
+Nullstack can be used as to build a Desktop Application with Electron.
+
+If you'd like to help complete this example, feel free to [send us a PR](https://github.com/nullstack/nullstack.github.io).

i18n/en-US/examples/using-nullstack-to-build-a-mobile-application.md

@@ -0,0 +1,7 @@
+---
+title: "Using Nullstack to build a Mobile Application"
+description: "Nullstack can be used to build a Mobile Application"
+---
+Nullstack can be used as to build a Mobile Application.
+
+If you'd like to help complete this example, feel free to [send us a PR](https://github.com/nullstack/nullstack.github.io).

i18n/en-US/examples/using-nullstack-to-build-a-personal-portfolio-on-github.md

@@ -0,0 +1,9 @@
+---
+title: "Using Nullstack to build a personal Portfolio on GitHub"
+description: "Nullstack can be used to build a personal Portfolio on GitHub"
+---
+Nullstack can be used to build a personal Portfolio on GitHub.
+
+Check out how to [deploy your website to GitHub pages](/how-to-deploy-to-github-pages).
+
+If you'd like to help complete this example, feel free to [send us a PR](https://github.com/nullstack/nullstack.github.io).

i18n/pt-BR/components/Examples.yml

@@ -0,0 +1,21 @@
+title: "Nullstack Examples"
+description: "Check coolest stuff you can do with Nullstack"
+heading: "Nullstack Examples"
+tagline: "A collection of application examples with Nullstack."
+contribute: "We accept guest examples! You can write it up in markdown and open a PR to our <a href='https://github.com/nullstack/nullstack.github.io/pulls'>github repo</a>."
+posts:
+  - title: "Using Nullstack as a Web API"
+    href: "/examples/using-nullstack-as-a-web-api"
+    description: "Nullstack can be used as a web API, you can write your own endpoints or expose server functions."
+  - title: "Using Nullstack to build a Chrome Extension"
+    href: "/examples/using-nullstack-to-build-a-chrome-extension"
+    description: "Nullstack can be used to build a Chrome Extension."
+  - title: "Using Nullstack to build a Desktop Application"
+    href: "/examples/using-nullstack-to-build-a-desktop-application"
+    description: "Nullstack can be used to build a Desktop Application."
+  - title: "Using Nullstack to build a Mobile Application"
+    href: "/examples/using-nullstack-to-build-a-mobile-application"
+    description: "Nullstack can be used to build a Mobile Application."
+  - title: "Using Nullstack to build a personal Portfolio on GitHub"
+    href: "/examples/using-nullstack-to-build-a-personal-portfolio-on-github"
+    description: "Nullstack can be used to build a personal Portfolio on GitHub."

i18n/pt-BR/components/Header.yml

@@ -6,6 +6,8 @@ links:
     href: "/pt-br/o-que-e-nullstack"
   - title: "Documentação"
     href: "/pt-br/comecando"
+  - title: "Exemplos"
+    href: "/pt-br/exemplos"
   - title: "Contribuidores"
     href: "/pt-br/contribuidores"
   - title: "Waifu"

i18n/pt-BR/examples/404.md

@@ -0,0 +1,9 @@
+---
+title: Page Not Found
+description: Sorry, this is not the page you are looking for.
+status: 404
+---
+
+Perhaps you want to learn more about [Nullstack](/what-is-nullstack)?
+
+Or do you want to contribute to our [blog](/blog)?

i18n/pt-BR/examples/using-nullstack-as-a-web-api.md

@@ -0,0 +1,36 @@
+---
+title: "Using Nullstack as a Web API"
+description: "Nullstack can be used as a web API, you can write your own endpoints or expose server functions."
+---
+Nullstack can be used as a Web API. Nullstack runs an Express server behind the scenes allowing you to configure your own routes and build a fully customized Web API.
+
+You can configure the Express routes by using the `server` object available in the Nullstack Context on `server.js`.
+
+```js
+// server.js
+import Nullstack from 'nullstack';
+import Application from './src/Application';
+
+const context = Nullstack.start(Application);
+
+context.server.get('/api/waifus', (request, response) => {
+  response.json({waifus: []});
+});
+
+export default context;
+```
+
+It's also possible to expose server functions from your components to be in the web API. Instead of using a function that a `request` and a `response` pass the static function from your component to the express route.
+
+```js
+// server.js
+import Nullstack from 'nullstack';
+import Application from './src/Application';
+import WaifuComponent from './src/WaifuComponent';
+
+const context = Nullstack.start(Application);
+
+context.server.get('/waifus', WaifuComponent.getWaifus)
+
+export default context;
+```

i18n/pt-BR/examples/using-nullstack-to-build-a-chrome-extension.md

@@ -0,0 +1,14 @@
+---
+title: "Using Nullstack to build a Chrome Extension"
+description: "Nullstack can be used to build a Chrome Extension"
+---
+Nullstack can be used as to build a Chrome Extension.
+
+These are all the changes required to make the app compatible as an extension:
+
+- `public/manifest.json` creates the Chrome Extension manifest file
+- `server.js` disables the default service worker, as the extension doesn't need it
+- `src/Application.jsx` is the entry component that will render the Popup code
+- `package.json` sets mode to SPA (default mode) and enables writing files to disk
+
+You can find a full example at [Mortaro/nullstack-chrome-extension](https://github.com/Mortaro/nullstack-chrome-extension).

i18n/pt-BR/examples/using-nullstack-to-build-a-desktop-application.md

@@ -0,0 +1,7 @@
+---
+title: "Using Nullstack to build a Desktop Application"
+description: "Nullstack can be used to build a Desktop Application"
+---
+Nullstack can be used as to build a Desktop Application with Electron.
+
+If you'd like to help complete this example, feel free to [send us a PR](https://github.com/nullstack/nullstack.github.io).

i18n/pt-BR/examples/using-nullstack-to-build-a-mobile-application.md

@@ -0,0 +1,7 @@
+---
+title: "Using Nullstack to build a Mobile Application"
+description: "Nullstack can be used to build a Mobile Application"
+---
+Nullstack can be used as to build a Mobile Application.
+
+If you'd like to help complete this example, feel free to [send us a PR](https://github.com/nullstack/nullstack.github.io).

i18n/pt-BR/examples/using-nullstack-to-build-a-personal-portfolio-on-github.md

@@ -0,0 +1,9 @@
+---
+title: "Using Nullstack to build a personal Portfolio on GitHub"
+description: "Nullstack can be used to build a personal Portfolio on GitHub"
+---
+Nullstack can be used to build a personal Portfolio on GitHub.
+
+Check out how to [deploy your website to GitHub pages](/how-to-deploy-to-github-pages).
+
+If you'd like to help complete this example, feel free to [send us a PR](https://github.com/nullstack/nullstack.github.io).

src/Application.njs

@@ -7,7 +7,9 @@ import Components from './Components';
 import Contributors from './Contributors';
 import Documentation from './Documentation';
 import Blog from './Blog';
+import Examples from './Examples';
 import Post from './Post';
+import PostExample from './PostExample';
 import Footer from './Footer';
 import Header from './Header';
 import Home from './Home';
@@ -66,6 +68,12 @@ class Application extends Nullstack {
           <Documentation route="/documentation" locale="en-US" persistent />
           <Documentation route="/pt-br/documentacao" locale="pt-BR" persistent />
 
+          <Examples route="/examples" locale="en-US" persistent />
+          <PostExample route="/examples/:slug" locale="en-US" persistent />
+
+          <Examples route="/pt-br/exemplos" locale="pt-BR" persistent />
+          <PostExample route="/pt-br/exemplos/:slug" locale="pt-BR" persistent />
+
           <Blog route="/blog" locale="en-US" persistent />
           <Post route="/blog/:slug" locale="en-US" persistent />
 

src/Examples.njs

@@ -0,0 +1,59 @@
+import Translatable from "./Translatable";
+
+class Examples extends Translatable {
+  prepare({ page }) {
+    page.priority = 0.3;
+  }
+
+  renderProject({ title, repository }) {
+    return (
+      <a
+        href={repository}
+        target={repository.indexOf("http") === 0 && "_blank"}
+        rel="noopener"
+        class="block text-pink-600 dark:text-pink-500 border-t border-gray-100 dark:border-gray-800 py-2 mt-2"
+      >
+        {title}
+      </a>
+    );
+  }
+
+  renderPostExample({ title, href, description, date, author }) {
+    return (
+      <a href={href} class="w-full block mb-8">
+        <h2 class="w-full text-md sm:text-xl font-light mb-2 text-pink-600">
+          {title}
+        </h2>
+        <p class="text-base" title={description}>
+          {description}
+        </p>
+      </a>
+    );
+  }
+
+  render() {
+    if (!this.i18n) return false;
+    return (
+      <section class="max-w-screen-lg mx-auto px-4 flex justify-between items-center flex-wrap py-12 sm:py-24">
+        <h1 class="w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3">
+          {this.i18n.heading}
+        </h1>
+        <p class="text-xl sm:text-2xl font-light block mb-3">
+          {" "}
+          {this.i18n.tagline}
+        </p>
+        <p
+          class="w-full prose dark:prose-dark max-w-none text-xl"
+          html={this.i18n.contribute}
+        />
+        <div class="w-full mt-8">
+          {this.i18n.posts?.map((post) => (
+            <PostExample {...post} />
+          ))}
+        </div>
+      </section>
+    );
+  }
+}
+
+export default Examples;