Merge branch 'main' of github.com:redwoodjs/redwood into feature/cust…

…om-functions-test * 'main' of github.com:redwoodjs/redwood: Better SEO by default on every pages (redwoodjs#3026) Add more info in the terminal | Tweak gitpod settings (redwoodjs#3185) Undo accidentally vscode settings change (redwoodjs#3184) Upgrade RHF to v7.11.0 (redwoodjs#3043) [setup tailwind] Include tailwind by adding directives to index.css (redwoodjs#3181) Configure cloud based development for contributors (redwoodjs#3150)
dac09 · Aug 3, 2021 · 10663a2 · 10663a2
2 parents d71222a + ec04a2b
commit 10663a2
Show file tree

Hide file tree

Showing 32 changed files with 362 additions and 247 deletions.
diff --git a/.gitpod.yml b/.gitpod.yml
@@ -0,0 +1,47 @@
+# Learn more about this file at https://www.gitpod.io/docs/references/gitpod-yml
+checkoutLocation: redwood
+workspaceLocation: .
+
+tasks:
+  - name: Terminal
+    openMode: split-left
+    init: |
+      mkdir ../rw-test-app
+    command: |
+      cd ../rw-test-app
+      echo -e "\n\n\033[94m ======================================================" && echo -e "\n\033[33mThe test project been linked. If you make further changes to the framework..." &&  echo -e "\033[33mRun \033[92m'yarn rwfw project:sync'\033[33m to watch & sync changes into the test project" &&  echo -e "\n\033[94m ======================================================\n\n"
+
+
+  - name: "Dev Servers"
+    openMode: split-right
+    before: export RW_PATH="/workspace/redwood"
+    init: |
+      yarn install
+      yarn run build:test-project ../rw-test-app --typescript --link --verbose
+    command: |
+      cd ../rw-test-app
+      yarn rw dev
+
+
+ports:
+  - port: 8911
+    onOpen: ignore
+  - port: 8910
+    onOpen: notify
+
+github:
+  prebuilds:
+    # enable for the default branch (defaults to true)
+    master: true
+    # enable for all branches in this repo (defaults to false)
+    branches: true
+    # enable for pull requests coming from this repo (defaults to true)
+    pullRequests: true
+    # enable for pull requests coming from forks (defaults to false)
+    pullRequestsFromForks: false
+    # add a check to pull requests (defaults to true)
+    addCheck: true
+    # add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
+    addComment: false
+    # add a "Review in Gitpod" button to the pull request's description (defaults to false)
+    addBadge: true
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,18 +8,7 @@
   "workbench.colorCustomizations": {
     "statusBar.background": "#b85833",
     "statusBarItem.hoverBackground": "#ce7350",
-    "statusBar.foreground": "#e7e7e7",
-    "activityBar.activeBackground": "#ce7350",
-    "activityBar.activeBorder": "#82dc9b",
-    "activityBar.background": "#ce7350",
-    "activityBar.foreground": "#15202b",
-    "activityBar.inactiveForeground": "#15202b99",
-    "activityBarBadge.background": "#82dc9b",
-    "activityBarBadge.foreground": "#15202b",
-    "titleBar.activeBackground": "#b85833",
-    "titleBar.activeForeground": "#e7e7e7",
-    "titleBar.inactiveBackground": "#b8583399",
-    "titleBar.inactiveForeground": "#e7e7e799"
+    "statusBar.foreground": "#e7e7e7"
   },
   "search.exclude": {
     "**/dist": true,

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -9,6 +9,7 @@ Before interacting with the Redwood community, please read and understand our [C
 - [Contributing](#contributing)
   - [Local Development](#local-development)
     - [Code Organization](#code-organization)
+    - [Browser-based Setup](#browser-based-setup)
     - [Local Setup](#local-setup)
       - [Redwood Framework](#redwood-framework)
       - [Redwood App: Create a Functional Test Project](#redwood-app-create-a-functional-test-project)
@@ -48,6 +49,16 @@ The Redwood Framework lives in the monorepo `redwoodjs/redwood` (which is where
 
 Throughout this document, we'll assume your local copy of the Redwood Framework is in a directory called `redwood` and your Redwood App is in a directory called `redwood-app`.
 
+### Browser-based Setup
+
+Use the following button to start a development environment in the cloud and access it through your browser.
+
+This will generate a test blog project, and link it with the framework code in `main` - and gives you an easy playground to try out your fixes and contributions.
+
+> Note: if you make changes to the framework, you will need to run `yarn rwfw project:sync` in the terminal, so that your changes are watched and reflected in the test project
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/redwoodjs/redwood)
+
 ### Local Setup
 
 #### Redwood Framework

diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
     "clean:prisma": "rimraf node_modules/.prisma/client && node node_modules/@prisma/client/scripts/postinstall.js",
     "lint": "yarn framework lint",
     "lint:fix": "yarn framework lint:fix",
-
     "postinstall": "yarn framework install",
     "build:link": "node ./tasks/build-and-copy",
     "build:test-project": "node ./tasks/test-project/test-project"

diff --git a/packages/cli/src/commands/generate/__tests__/helpers.test.js b/packages/cli/src/commands/generate/__tests__/helpers.test.js
@@ -11,10 +11,17 @@ import * as helpers from '../helpers'
 import * as page from '../page/page'
 
 const PAGE_TEMPLATE_OUTPUT = `import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const FooBarPage = () => {
   return (
     <>
+      <MetaTags
+        title="FooBar"
+        // description="FooBar description"
+        /* you should un-comment description and add a unique description, 155 characters or less
+        You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
       <h1>FooBarPage</h1>
       <p>
         Find me in <code>./web/src/pages/FooBarPage/FooBarPage.js</code>

diff --git a/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap b/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap
@@ -2,10 +2,18 @@
 
 exports[`creates a page component 1`] = `
 "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const HomePage = () => {
   return (
     <>
+      <MetaTags
+        title=\\"Home\\"
+        // description=\\"Home description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
+
       <h1>HomePage</h1>
       <p>
         Find me in <code>./web/src/pages/HomePage/HomePage.js</code>
@@ -24,10 +32,18 @@ export default HomePage
 
 exports[`creates a page component 2`] = `
 "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const ContactUsPage = () => {
   return (
     <>
+      <MetaTags
+        title=\\"ContactUs\\"
+        // description=\\"ContactUs description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
+
       <h1>ContactUsPage</h1>
       <p>
         Find me in <code>./web/src/pages/ContactUsPage/ContactUsPage.js</code>
@@ -46,10 +62,18 @@ export default ContactUsPage
 
 exports[`creates a page component with a plural word for name 1`] = `
 "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const CatsPage = () => {
   return (
     <>
+      <MetaTags
+        title=\\"Cats\\"
+        // description=\\"Cats description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
+
       <h1>CatsPage</h1>
       <p>
         Find me in <code>./web/src/pages/CatsPage/CatsPage.js</code>
@@ -68,10 +92,18 @@ export default CatsPage
 
 exports[`creates a page component with params 1`] = `
 "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const PostPage = ({ id }) => {
   return (
     <>
+      <MetaTags
+        title=\\"Post\\"
+        // description=\\"Post description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
+
       <h1>PostPage</h1>
       <p>
         Find me in <code>./web/src/pages/PostPage/PostPage.js</code>
@@ -191,10 +223,18 @@ describe('HomePage', () => {
 exports[`file generation 3`] = `
 Object {
   "fileContent": "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const HomePage = () => {
   return (
     <>
+      <MetaTags
+        title=\\"Home\\"
+        // description=\\"Home description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
+
       <h1>HomePage</h1>
       <p>
         Find me in <code>./web/src/pages/HomePage/HomePage.js</code>
@@ -267,10 +307,18 @@ describe('PostPage', () => {
 exports[`file generation with route params 3`] = `
 Object {
   "fileContent": "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const PostPage = ({ id }) => {
   return (
     <>
+      <MetaTags
+        title=\\"Post\\"
+        // description=\\"Post description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+      You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
+
       <h1>PostPage</h1>
       <p>
         Find me in <code>./web/src/pages/PostPage/PostPage.js</code>
@@ -311,10 +359,17 @@ export default Routes",
 
 exports[`generates typescript pages 1`] = `
 "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 const TSFilesPage = () => {
   return (
     <>
+      <MetaTags
+        title=\\"TSFiles\\"
+        // description=\\"TSFiles description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+        You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
       <h1>TSFilesPage</h1>
       <p>
         Find me in <code>./web/src/pages/TsFilesPage/TsFilesPage.tsx</code>
@@ -359,6 +414,7 @@ describe('TSFilesPage', () => {
 
 exports[`generates typescript pages 4`] = `
 "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 type TSParamFilesPageProps = {
   id: string
@@ -367,6 +423,12 @@ type TSParamFilesPageProps = {
 const TSParamFilesPage = ({ id }: TSParamFilesPageProps) => {
   return (
     <>
+      <MetaTags
+        title=\\"TSParamFiles\\"
+        // description=\\"TSParamFiles description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+        You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
       <h1>TSParamFilesPage</h1>
       <p>
         Find me in <code>./web/src/pages/TsParamFilesPage/TsParamFilesPage.tsx</code>
@@ -386,6 +448,7 @@ export default TSParamFilesPage
 
 exports[`generates typescript pages 5`] = `
 "import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 
 type TSParamTypeFilesPageProps = {
   id: number
@@ -394,6 +457,12 @@ type TSParamTypeFilesPageProps = {
 const TSParamTypeFilesPage = ({ id }: TSParamTypeFilesPageProps) => {
   return (
     <>
+      <MetaTags
+        title=\\"TSParamTypeFiles\\"
+        // description=\\"TSParamTypeFiles description\\"
+        /* you should un-comment description and add a unique description, 155 characters or less
+        You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
       <h1>TSParamTypeFilesPage</h1>
       <p>
         Find me in <code>./web/src/pages/TsParamTypeFilesPage/TsParamTypeFilesPage.tsx</code>

diff --git a/packages/cli/src/commands/generate/page/templates/page.tsx.template b/packages/cli/src/commands/generate/page/templates/page.tsx.template
@@ -1,4 +1,5 @@
 import { Link, routes } from '@redwoodjs/router'
+import { MetaTags } from '@redwoodjs/web'
 <% if (paramName !== '') { %>
 type ${pascalName}PageProps = {
   ${paramName}: ${paramType}
@@ -7,6 +8,12 @@ type ${pascalName}PageProps = {
 const ${pascalName}Page = (<%- paramName === '' ? '' : `${propParam}: ${pascalName}PageProps` %>) => {
   return (
     <>
+      <MetaTags
+        title="${pascalName}"
+        // description="${pascalName} description"
+        /* you should un-comment description and add a unique description, 155 characters or less
+        You can look at this documentation for best practices : https://developers.google.com/search/docs/advanced/appearance/good-titles-snippets */
+      />
       <h1>${pascalName}Page</h1>
       <p>
         Find me in <code>${outputPath}</code>

diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap b/packages/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffold.test.js.snap
@@ -177,7 +177,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Float\\"
+          transformValue=\\"Float\\"
         />
 
         <FieldError name=\\"rating\\" className=\\"rw-field-error\\" />
@@ -212,7 +212,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Json\\"
+          transformValue=\\"Json\\"
         />
 
         <FieldError name=\\"metadata\\" className=\\"rw-field-error\\" />
@@ -1299,7 +1299,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Float\\"
+          transformValue=\\"Float\\"
         />
         <FieldError name=\\"rating\\" className=\\"rw-field-error\\" />
 
@@ -1332,7 +1332,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Json\\"
+          transformValue=\\"Json\\"
         />
         <FieldError name=\\"metadata\\" className=\\"rw-field-error\\" />
 

diff --git a/...es/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffoldNoNest.test.js.snap b/...es/cli/src/commands/generate/scaffold/__tests__/__snapshots__/scaffoldNoNest.test.js.snap
@@ -177,7 +177,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Float\\"
+          transformValue=\\"Float\\"
         />
 
         <FieldError name=\\"rating\\" className=\\"rw-field-error\\" />
@@ -212,7 +212,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Json\\"
+          transformValue=\\"Json\\"
         />
 
         <FieldError name=\\"metadata\\" className=\\"rw-field-error\\" />
@@ -1259,7 +1259,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Float\\"
+          transformValue=\\"Float\\"
         />
         <FieldError name=\\"rating\\" className=\\"rw-field-error\\" />
 
@@ -1292,7 +1292,7 @@ const PostForm = (props) => {
           className=\\"rw-input\\"
           errorClassName=\\"rw-input rw-input-error\\"
           validation={{ required: true }}
-          dataType=\\"Json\\"
+          transformValue=\\"Json\\"
         />
         <FieldError name=\\"metadata\\" className=\\"rw-field-error\\" />