Merge pull request #304 from codigoencasa/feat/docs-netlify

Feat/docs-netlify

.github/workflows/netlify.yml

@@ -0,0 +1,27 @@
+# .github/workflows/netlify.yml
+name: Build and Deploy to Documentation Netlify
+on:
+    pull_request:
+        branches:
+            - dev
+            - main
+        types: [closed]
+jobs:
+    build:
+        runs-on: ubuntu-18.04
+        steps:
+            - uses: actions/checkout@v2
+
+            - name: Deploy to Netlify
+              uses: nwtgck/actions-netlify@v1.2
+              with:
+                  publish-dir: './packages/docs/dist'
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  deploy-message: 'Deploy from GitHub Actions'
+                  enable-pull-request-comment: false
+                  enable-commit-comment: true
+                  overwrites-pull-request-comment: true
+              env:
+                  NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+                  NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+              timeout-minutes: 1

.gitignore

@@ -36,3 +36,5 @@ qr.svg
 package-lock.json
 yarn-error.log
 .npmrc
+# Local Netlify folder
+.netlify

packages/docs/.gitignore

@@ -41,3 +41,6 @@ package-lock.json
 
 # Cloudflare
 functions/**/*.js
+
+# Netlify
+.netlify

packages/docs/README.md

@@ -285,3 +285,72 @@ By default, the Cloudflare pages adaptor _does not_ include a `public/_routes.js
 In the above example, it's saying _all_ pages should be SSR'd. However, the root static files such as `/favicon.ico` and any static assets in `/build/*` should be excluded from the Functions, and instead treated as a static file.
 
 In most cases the generated `dist/_routes.json` file is ideal. However, if you need more granular control over each path, you can instead provide you're own `public/_routes.json` file. When the project provides its own `public/_routes.json` file, then the Cloudflare adaptor will not auto-generate the routes config and instead use the committed one within the `public` directory.
+
+## Express Server
+
+This app has a minimal [Express server](https://expressjs.com/) implementation. After running a full build, you can preview the build using the command:
+
+```
+npm run serve
+```
+
+Then visit [http://localhost:8080/](http://localhost:8080/)
+
+## Netlify
+
+This starter site is configured to deploy to [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/), which means it will be rendered at an edge location near to your users.
+
+### Local development
+
+The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run:
+
+1. Install Netlify CLI globally `npm i -g netlify-cli`.
+2. Build your site with both ssr and static `npm run build`.
+3. Start a local server with `npm run serve`.
+   In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally.
+4. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site.
+
+### Edge Functions Declarations
+
+[Netlify Edge Functions declarations](https://docs.netlify.com/edge-functions/declarations/)
+can be configured to run on specific URL patterns. Each edge function declaration associates
+one site path pattern with one function to execute on requests that match the path. A single request can execute a chain of edge functions from a series of declarations. A single edge function can be associated with multiple paths across various declarations.
+
+This is useful to determine if a page response should be Server-Side Rendered (SSR) or
+if the response should use a static-site generated (SSG) `index.html` file instead.
+
+By default, the Netlify Edge adaptor will generate a `.netlify/edge-middleware/manifest.json` file, which is used by the Netlify deployment to determine which paths should, and should not, use edge functions.
+
+To override the generated manifest, you can [add a declaration](https://docs.netlify.com/edge-functions/declarations/#add-a-declaration) to the `netlify.toml` using the `[[edge_functions]]` config. For example:
+
+```toml
+[[edge_functions]]
+  path = "/admin"
+  function = "auth"
+```
+
+### Deployments
+
+You can [deploy your site to Netlify](https://docs.netlify.com/site-deploys/create-deploys/) either via a Git provider integration or through the Netlify CLI. This starter site includes a `netlify.toml` file to configure your build for deployment.
+
+#### Deploying via Git
+
+Once your site has been pushed to your Git provider, you can either link it [in the Netlify UI](https://app.netlify.com/start) or use the CLI. To link your site to a Git provider from the Netlify CLI, run the command:
+
+```shell
+netlify link
+```
+
+This sets up [continuous deployment](https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git) for your site's repo. Whenever you push new commits to your repo, Netlify starts the build process..
+
+#### Deploying manually via the CLI
+
+If you wish to deploy from the CLI rather than using Git, you can use the command:
+
+```shell
+netlify deploy --build
+```
+
+You must use the `--build` flag whenever you deploy. This ensures that the Edge Functions that this starter site relies on are generated and available when you deploy your site.
+
+Add `--prod` flag to deploy to production.

packages/docs/adaptors/netlify-edge/vite.config.ts

@@ -1,4 +1,4 @@
-import { cloudflarePagesAdaptor } from '@builder.io/qwik-city/adaptors/cloudflare-pages/vite'
+import { netifyEdgeAdaptor } from '@builder.io/qwik-city/adaptors/netlify-edge/vite'
 import { extendConfig } from '@builder.io/qwik-city/vite'
 import baseConfig from '../../vite.config'
 
@@ -7,11 +7,12 @@ export default extendConfig(baseConfig, () => {
         build: {
             ssr: true,
             rollupOptions: {
-                input: ['src/entry.cloudflare-pages.tsx', '@qwik-city-plan'],
+                input: ['src/entry.netlify-edge.tsx', '@qwik-city-plan'],
             },
+            outDir: '.netlify/edge-functions/entry.netlify-edge',
         },
         plugins: [
-            cloudflarePagesAdaptor({
+            netifyEdgeAdaptor({
                 staticGenerate: true,
             }),
         ],

packages/docs/netlify.toml

@@ -1,7 +1,7 @@
 [build]
-  publish = "dist"
+publish = "dist"
-  command = "npm run build"
+command = "npm run build"
-[[headers]]
+
-  for = "/build/*"
+[[edge_functions]]
-  [headers.values]
+path = "/*"
-    Cache-Control = "public, max-age=31536000, immutable"
+function = "entry.netlify-edge"

packages/docs/package.json

@@ -6,9 +6,9 @@
     "build": "qwik build && npm run subfont",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
-    "build.server": "vite build -c adaptors/cloudflare-pages/vite.config.ts",
+    "build.server": "vite build -c adaptors/netlify-edge/vite.config.ts",
     "build.types": "tsc --incremental --noEmit",
-    "deploy": "wrangler pages dev ./dist",
+    "deploy": "netlify deploy",
     "dev": "vite --host --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
@@ -24,20 +24,22 @@
     "@builder.io/qwik-city": "0.0.128",
     "@fontsource/inter": "^4.5.14",
     "@iconify-json/tabler": "^1.1.49",
-    "@octokit/core": "^4.1.0",
     "@tailwindcss/aspect-ratio": "^0.4.0",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.0",
+    "@types/compression": "^1.7.2",
     "@types/eslint": "8.4.10",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.45.0",
     "@typescript-eslint/parser": "5.45.0",
     "autoprefixer": "10.4.13",
+    "compression": "^1.7.4",
     "eslint": "8.29.0",
     "eslint-plugin-qwik": "0.15.0",
     "imagetools-core": "^3.2.3",
-    "node-fetch": "3.3.0",
+    "netlify-cli": "^12.0.11",
+    "node-fetch": "^3.3.0",
     "postcss": "^8.4.19",
     "prettier": "2.8.0",
     "rehype-autolink-headings": "^6.1.1",
@@ -46,10 +48,9 @@
     "typescript": "4.8.4",
     "vite": "3.2.4",
     "vite-imagetools": "^4.0.11",
-    "vite-tsconfig-paths": "3.6.0",
+    "vite-tsconfig-paths": "3.6.0"
-    "wrangler": "latest"
   },
   "engines": {
-    "node": ">=15.0.0"
+    "node": ">=17.0.0"
   }
 }

packages/docs/public/_headers

@@ -1,4 +1,2 @@
-# https://developers.cloudflare.com/pages/platform/headers/
-
 /build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

packages/docs/src/components/widgets/Collaborators.tsx

@@ -1,8 +1,12 @@
 import { component$ } from '@builder.io/qwik'
-
+import { RequestHandlerCloudflarePages } from '@builder.io/qwik-city/middleware/cloudflare-pages'
 import { User } from '~/contexts'
 import Collaborator from './Collaborator'
 
+export const onRequest: RequestHandlerCloudflarePages = async () => {
+    console.log('??heree')
+}
+
 export const TaleUsers = component$((props: { users: User[] }) => {
     return (
         <>
@@ -16,7 +20,7 @@ export const TaleUsers = component$((props: { users: User[] }) => {
     )
 })
 
-export default component$((props: { users: any }) => {
+export default component$((props: { users: User[] }) => {
     return (
         <section class="relative ">
             <div class={'px-4 py-16 mx-auto max-w-6xl lg:py-20'}>

packages/docs/src/entry.express.tsx

@@ -0,0 +1,50 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the  entry point for the express server when building for production.
+ *
+ * Learn more about the cloudflare integration here:
+ * - https://qwik.builder.io/qwikcity/adaptors/node/
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/node'
+import qwikCityPlan from '@qwik-city-plan'
+import render from './entry.ssr'
+import express from 'express'
+import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
+import compression from 'compression'
+
+// Directories where the static assets are located
+const distDir = join(fileURLToPath(import.meta.url), '..', '..', 'dist')
+const buildDir = join(distDir, 'build')
+
+// Allow for dynamic port
+const PORT = process.env.PORT ?? 3000
+
+// Create the Qwik City express middleware
+const { router, notFound } = createQwikCity({ render, qwikCityPlan })
+
+// Create the express server
+// https://expressjs.com/
+const app = express()
+
+// Enable gzip compression
+app.use(compression())
+
+// Static asset handlers
+// https://expressjs.com/en/starter/static-files.html
+app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y' }))
+app.use(express.static(distDir, { redirect: false }))
+
+// Use Qwik City's page and endpoint request handler
+app.use(router)
+
+// Use Qwik City's 404 handler
+app.use(notFound)
+
+// Start the express server
+app.listen(PORT, () => {
+    /* eslint-disable */
+    console.log(`Server starter: http://localhost:${PORT}/`)
+})

packages/docs/src/entry.netlify-edge.tsx

@@ -0,0 +1,14 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the  entry point for netlify-edge when building for production.
+ *
+ * Learn more about the cloudflare integration here:
+ * - https://qwik.builder.io/qwikcity/adaptors/netlify-edge/
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/netlify-edge'
+import qwikCityPlan from '@qwik-city-plan'
+import render from './entry.ssr'
+
+export default createQwikCity({ render, qwikCityPlan })

packages/docs/src/routes/index.tsx

@@ -1,54 +1,35 @@
 import { component$, Resource } from '@builder.io/qwik'
 import { DocumentHead, useEndpoint } from '@builder.io/qwik-city'
-
 import Hero from '~/components/widgets/Hero'
 import Features from '~/components/widgets/Features'
 import FAQs from '~/components/widgets/FAQs'
-// import Stats from '~/components/widgets/Stats'
 import CallToAction from '~/components/widgets/CallToAction'
 import Collaborators from '~/components/widgets/Collaborators'
+import { fetchGithub } from '~/services/github'
+import { RequestHandlerNetlify } from '@builder.io/qwik-city/middleware/netlify-edge'
 import { GITHUB_TOKEN } from './docs/constant'
-import { RequestHandlerCloudflarePages } from '@builder.io/qwik-city/middleware/cloudflare-pages'
 
-export const apiGetCollaborators = async (token: string) => {
+export const onGet: RequestHandlerNetlify = async ({ platform }) => {
-    const data = await fetch(
-        `https://api.github.com/repos/codigoencasa/bot-whatsapp/contributors`,
-        {
-            method: 'GET',
-            headers: {
-                Accept: 'application/vnd.github+json',
-                'X-GitHub-Api-Version': '2022-11-28',
-                Authorization: `Bearer ${token}`,
-            },
-        }
-    )
-    const listUsers = data.json()
-    return listUsers
-}
-
-export const onRequest: RequestHandlerCloudflarePages = async ({
-    platform,
-}) => {
     console.log(`[🚩 platform]: `, platform)
-    console.log(`[🚩 platform .env]: `, (platform as any)?.GITHUB_TOKEN)
     const CHECK_GITHUB_TOKEN =
         (platform as any)?.['GITHUB_TOKEN'] ?? GITHUB_TOKEN
-    return apiGetCollaborators(CHECK_GITHUB_TOKEN)
+    const data = await fetchGithub(CHECK_GITHUB_TOKEN)
+    return data
 }
 
 export default component$(() => {
-    const dataUser = useEndpoint()
+    const resource = useEndpoint()
+
     return (
         <>
             <Hero />
             <Features />
             <CallToAction />
             <Resource
-                value={dataUser}
+                value={resource}
-                onResolved={(users) => <Collaborators users={users} />}
+                onResolved={(data: any) => <Collaborators users={data} />}
             ></Resource>
             <FAQs />
-            {/* <Stats /> */}
         </>
     )
 })

packages/docs/src/services/github.ts

@@ -0,0 +1,19 @@
+/**
+ * GET API from Github
+ * @returns
+ */
+export const fetchGithub = async (token: string) => {
+    const data = await fetch(
+        `https://api.github.com/repos/codigoencasa/bot-whatsapp/contributors`,
+        {
+            method: 'GET',
+            headers: {
+                Accept: 'application/vnd.github+json',
+                'X-GitHub-Api-Version': '2022-11-28',
+                Authorization: `Bearer ${token}`,
+            },
+        }
+    )
+    const listUsers = data.json()
+    return listUsers
+}