I do not have a Mac computer, so I can only create this issue (instead of a PR)

and then the same problem below

https://learn-redwood.netlify.app/docs/ leads to a 404 not found error

1. Remove the sections "Docusaurus" and "Features" that came with Docusaurus by default.

• Remove from sidebar (sidebar.js)
• Remove the docs (all .md files in docs outside the tutorial dir)
• Remove "Style guide" and "Second Doc" links from footer (replace with tutorial?)

2. Make "Tutorial" the default section that is open when you visit learn.redwood.com/docs.

This may be trickier than it seems.

I noticed on the site that the contrast value for span.token.comment is currently too low (in both light and dark mode) to be accessible as it is 1.64. Generally the minimum contrast level to be accessible is 4.5:1 for AA or 3:1 for large text.

I was able to encounter this issue by going to https://learn-redwood.netlify.app/docs/tutorial/cells and viewing the code example that contains // web/src/components/BlogPostsCell/BlogPostsCell.js at the top (screenshot below)

visually the contrast looked too low for me, I used the Google Developer Tools to confirm the contrast level.

I am available to work on resolving this issue.

Make the homepage more "Redwoody"

Accessing "/" defaults to a homepage splash, mostly still the docusuarus defaults.

We don't really need a homepage for now as we just have tutorial content. Let's set a up a soft redirect from "/" to "/docs"

PR #56 attempts to add tutorial part 2

I was unable to get a redirect working to take user from /docs/tutorial2/ to the first article (/docs/tutorial2/welcome-to-redwood-part-ii-redwoods-revenge)

This needs to be done in such a way the redirects work in all locales
/docs/tutorial2/ -> /docs/tutorial2/welcome-to-redwood-part-ii-redwoods-revenge
/fr/docs/tutorial2/ -> /fr/docs/tutorial2/welcome-to-redwood-part-ii-redwoods-revenge

Creating this issue to track our progress around this!

Current Behavior

When in the English locale all results are English pages. When in the French locale, nothing is returned, for english or french words.

Algolia Config

I don't remember if I asked them to crawl all of learn-redwood.netlify.app or just learn-redwood.netlify.app/en/docs? In the dashboard that Algolia provides it doesn't let me see what the config currently is.

Docusaurus Config

It sounds like the Docusaurus peeps think that re-configuring the sitemap should have fixed everything automatically? When I look at the sitemap I see all links like https://learn-redwood.netlify.app/docs/tutorial/cells which don't specify any locale, and going there directly returns the English version of that page, but doesn't redirect to have the /en in the path. Maybe we need to directly include links to the French pages in the sitemap? Or does Docusaurus do some magic behind the scenes to tell Algolia about translated equivalent pages?

https://learn-redwood.netlify.app/docs/ leads to a 404 not found error

Just a brand new project, everything works great, except for this little annoying issue, happens for all my tests

All the test files will have this error every 2 minutes or something, and if you click to open the file, the error is gone, then after a while, happens again

I am using "@redwoodjs/core": "0.35.1" and vscode 1.58.2

It is from this plugin:

The error message is:

  ● Test suite failed to run

    Cannot find module '~__REDWOOD__USER_ROUTES_FOR_MOCK' from 'node_modules/@redwoodjs/testing/dist/MockProviders.js'

    Require stack:
      node_modules/@redwoodjs/testing/dist/MockProviders.js
      node_modules/@redwoodjs/testing/dist/customRender.js
      node_modules/@redwoodjs/testing/dist/index.js
      web/src/components/ToDosCell/ToDosCell.test.tsx

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (node_modules/@redwoodjs/testing/dist/MockProviders.js:32:5)

What am I missing here?

Now that Prisma supports proper DB types we should update the tutorial to use TEXT for post body and contact message body.

@Thieffen translated the tutorial into French over here

I started moving these translations into our localization management system Crowdin.
https://github.com/redwoodjs/learn.redwoodjs.com/tree/master/to-upload

This is blocked until I confirm with Thieffen whether he wants to do this himself so he can get credit for his translations in the repo.

Hi

I think the Edit this page link doesn’t work in the Tutorial page -> Welcome to Redwood

And I think also all Edit this page link in all the tutorial doesn’t work. 👇

When clicking on it, It displays Not found 👇

I think this because the link provided in href as follows : Edit this page and this doesn’t work.

It doesn’t go to this page : welcome-to-redwood.md 👇

If I’m true, I will be very lucky to fix this bug, And I will ask for a question
And If I’m wrong, Sorry and I will be careful again.

Thanks

The paragraph

Most generate commands (i.e., everything but yarn rw generate dataMigration) can be undone by their corresponding destroy command. For example, yarn rw generate cell can be undone with yarn rw d cell.

should be prominently mentioned in both Our First Page tutorial section and Quick Start section. The absence of such an explanation cost me a lot of lost time.

My advice here is based on my firm belief that the success to became a great company depends on the documentation clarity a lot more than a world-class implementation of the product itself

The Generators section shows the default UserExample model

This visual suggests that the UserExample model is the only content in the file api/db/schema.prisma - when the complete content is this

Solution for this exists in many screenshots in the Tutorial doc - use the comment line to indicate that there is additional information above the UserExample model, or even better, show the full content of the api/db/schema.prisma file

@clairefro We want to add a really simple analytics package to the site, but I can't figure out where to put this <script> tag. 😕 This is much easier in CameronJS. 😉

<script defer data-domain="learn.redwoodjs.com" src="https://plausible.io/js/plausible.js"></script>

In preparation for publishing tutorial pt1 in Italian, we need to translate the Navbar and Footer strings.

To do this, use the Spanish UI string translation as a guide.

1. From project root, cp -r i18n/es/docusaurus-theme-classic i18n/it/docusaurus-theme-classic
2. In i18n/it/docusaurus-theme-classic, for each string in footer.json and navbar.json, translate the message property value

Please preserve proper nouns like "Discord", "Discourse", "GitHub" etc. as-is.

That's it! Docusaurus is set up to look for i18n strings at this filepath, so once these json files are translated these strings will be automatically resolved for any /it page

Some of our custom styles have been appearing differently in production vs development, such as font size, code block colors, footer colors, etc.

It may have to do with how Docusaurus is using webpack for production build - custom.css appears not to be the "last word" when it comes to styling. A workaround is to use !important for our custom styles.

facebook/docusaurus#3678

@clairefro wanna run that pinecone against the tutorial again?? Just pushed a bunch of changes for the 0.25 release which has a bunch of new prisma commands. It also rearranges the last two steps: Authentication comes before Deployment now. 😬 Is that going to cause problems?

Once dbAuth is available we'll update the tutorial to use that instead of a third party provider

Hello @clairefro I would like to help with the translation. I did use Crowdin back 5 years ago with the OWASP when we were doing the translation of OWASP ASVS. I also did some translations of learnyounode workshops.
I'm a native Spanish speaker, currently working in London, used to co-organise JSConf.uy in Uruguay.
Regards

render.com supports using SQLite in production so we're going to use them for deployment instead of Netlify.

In Tutorial II: Multiple Comments, the following code sample is provided illustrating components that are spaced apart. The technique used does work, but since Tailwind CSS is being used as the styling solution, it might be helpful to take advantage of the space between utility.

Here is the code as provided:

// web/src/components/CommentsCell/CommentsCell.js

export const Success = ({ comments }) => {
  return (
    <div className="-mt-8">
      {comments.map((comment) => (
        <div key={comment.id} className="mt-8">
          <Comment comment={comment} />
        </div>
      ))}
    </div>  
  )
}

And here is what this code would look like if the space between utility was used:

// web/src/components/CommentsCell/CommentsCell.js

export const Success = ({ comments }) => {
  return (
    <div className="space-y-8">
      {comments.map((comment) => (
        <div key={comment.id}>
          <Comment comment={comment} />
        </div>
      ))}
    </div>  
  )
}

For context, here is the CSS used for the class .space-y-8:

& > * + * {
  margin-top: 2rem;
}

I would be happy to put a PR together for this if desired!

https://learn.redwoodjs.com/docs/tutorial2/adding-comments-to-the-schema/#adding-the-comment-model

The relation with Post need onDelete: Cascade to work properly

model Comment {
  id        Int      @id @default(autoincrement())
  name      String
  body      String
  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)
  postId    Int
  createdAt DateTime @default(now())
}

I am in contact with Crowdin to figure out how to move our existing translations to our new base branch main

Tutorial II should be pretty stable now, let's move to learn.redwoodjs.com!

Hello Awesome redwood team,

Could you please update the reference to "Flash/useFlash" under "Saving Data" section of redwood tutorial as it will be replaced by Toaster and toast? Hope this will help newbies like me to avoid using the old hook.

Thank you,
Sean

This should be a pretty simple change on GitHub's end, and then just need to let Netlify know to build a different default branch.

The current theme colors are the default teal from Docusaurus.

• Let's make theme colors more "Redwoody" (see below)
• Spruce (lol) up some of the drab markdown (default bland Quote block styling comes to mind)

See the .com docs for general look + feel reference (doesn't have to be a clone).

P.S. Rob revealed some not-so-secrets about the official color scheme [here].(#5 (comment))

And here are tips on styling with Docusaurus

Part way through the tutorial we switch from BlogLayout to BlogPostLayout in the router.

Layouts

We'll wrap HomePage and AboutPage with the BlogLayout, using a <Set>:

import { Router, Route, Set } from '@redwoodjs/router'
import BlogLayout from 'src/layouts/BlogLayout'

const Routes = () => {
  return (
    <Router>
      <Set wrap={BlogLayout}>
        <Route path="/about" page={AboutPage} name="about" />
        <Route path="/" page={HomePage} name="home" />
      </Set>
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

Routing Params

Code sample says one while the text explanation says the other:

And while we're in the routes file, lets move the route inside the Set with the BlogPostLayout.

<Router>
  <Set wrap={BlogLayout}>
    <Route path="/blog-post/{id}" page={BlogPostPage} name="blogPost" />
    <Route path="/about" page={AboutPage} name="about" />
    <Route path="/" page={HomePage} name="home" />
  </Set>
  <Route notfound page={NotFoundPage} />
</Router>

Web Authentication

import { Router, Route, Set, Private } from '@redwoodjs/router'
import BlogPostLayout from 'src/layouts/BlogPostLayout'

const Routes = () => {
  return (
    <Router>
      <Set wrap={BlogPostLayout}>
        <Route path="/blog-post/{id:Int}" page={BlogPostPage} name="blogPost" />
        <Route path="/contact" page={ContactPage} name="contact" />
        <Route path="/about" page={AboutPage} name="about" />
        <Route path="/" page={HomePage} name="home" />
      </Set>
      <Private unauthenticated="home">
        <Route path="/admin/posts/new" page={NewPostPage} name="newPost" />
        <Route path="/admin/posts/{id:Int}/edit" page={EditPostPage} name="editPost" />
        <Route path="/admin/posts/{id:Int}" page={PostPage} name="post" />
        <Route path="/admin/posts" page={PostsPage} name="posts" />
      </Private>
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

Wait For Merge!

Needs redwoodjs/redwood#3261 to be released before merging this!

@callingmedic911 did you want to update these as well?

With a fresh Redwood blog (yarn create redwood-app ./redwoodblog):

1. running yarn rw test --coverage creates the coverage directory in ./web
2. running yarn rw test api --coverage or yarn rw test web --coverage creates the coverage directory in the project's root directory
3. running yarn rw test --coverage --coverageDirectory=./coverage is equivalent to (1)
4. as a workaround, running yarn rw test --coverage --coverageDirectory=`pwd`/coverage creates the coverage directory in the project's root directory

Add a Readme section for showing translators how to get involved with the translation process in Crowdin

Hello,
@clairefro I wish to contribute to translate Redwood tutorials to Italian.
Is it possible?

Hello @clairefro,

I am fluent in Italian (native), English and French.

I would like to contribute to the translation of the RedwoodJS documentation (English --> Italian).

It would be my pleasure to participate in the growth of this community.

I ran through the tutorial from beginning to deployment the other day and noted that the Auth Docs bit token needs an update.
) doesn't line up with the content form the invite email. Netlify no longer emails a link ending in #invite_token, instead it's a link like this;

https://mandrillapp.com/track/click/31128206/stoic-knuth-4c4640.netlify.app?p=eyJzIjoiVXprcy1JSEhUckhhWkNEM1d1VlZfM0FkazlFIiwidiI6MSwicCI6IntcInVcIjozMTEyODIwNixcInZcIjoxLFwidXJsXCI6XCJodHRwOlxcXC9cXFwvc3RvaWMta251dGgtNGM0NjQwLm5ldGxpZnkuYXBwXFxcLyNpbnZpdGVfdG9rZW49V0dTRW5BWUR3OGE0X3k5RXFpN29wUVwiLFwiaWRcIjpcImQ0YTdlM2RjMjVhNjRmMDZiOWRjMTA0NzE5NGZlYmM1XCIsXCJ1cmxfaWRzXCI6W1wiOWViNjRkZGFlMTdmMmRiODA2ZDY0ZDk0OTY0MTFkODRkZTAzNTY3Y1wiXX0ifQ

If you copy the p attribute and base64 decode it, and parse it, you get an object like so;

{
    "s": "Uzks-IHHTrHaZCD3WuVV_3Adk9E",
    "v": 1,
    "p": "{\"u\":31128206,\"v\":1,\"url\":\"http:\\/\\/stoic-knuth-4c4640.netlify.app\\/#invite_token=WGSEnAYDw8a4_y9Eqi7opQ\",\"id\":\"d4a7e3dc25a64f06b9dc1047194febc5\",\"url_ids\":[\"9eb64ddae17f2db806d64d9496411d84de03567c\"]}"
}

You can see the #invite_token in there but it's not as clear.

I tried using the ?p=eyJzIjoiVXprcy1JSEhUckhhWkNEM1d1VlZfM0FkazlFIiwidiI6MSwicCI6IntcInVcIjozMTEyODIwNixcInZcIjoxLFwidXJsXCI6XCJodHRwOlxcXC9cXFwvc3RvaWMta251dGgtNGM0NjQwLm5ldGxpZnkuYXBwXFxcLyNpbnZpdGVfdG9rZW49V0dTRW5BWUR3OGE0X3k5RXFpN29wUVwiLFwiaWRcIjpcImQ0YTdlM2RjMjVhNjRmMDZiOWRjMTA0NzE5NGZlYmM1XCIsXCJ1cmxfaWRzXCI6W1wiOWViNjRkZGFlMTdmMmRiODA2ZDY0ZDk0OTY0MTFkODRkZTAzNTY3Y1wiXX0ifQ on my localhost but that did not seem to work for me.

My proposal

But if you look at the URL it will end in something like #invite_token=6gFSXhugtHCXO5Whlc5V. Copy that (including the #) and append it to your localhost URL:

Becomes

But if you look at the URL it will end in ?p=SOMELONGSTRING. Copy that p value and paste it into your favorite base64 decoder (or this if you dont know https://codebeautify.org/base64-decode) look in the payload for the #invite_token=SOMEOTHERSTRING. Copy that (including the #) and append it to your localhost URL http://localhost:8910/#invite_token=6gFSXhugtHCXO5Whlc5Vg

wordz

It's a Catch 22 — we need to delete migrations/, change provider to postgres, and then create a new migration. However, we need to set the local DB connection env var DATABASE_URL to a functional postgres instance, which would mean setting up a local postgres. I think I found a hacky way to do it.

If the reader has postgres installed locally, use that

For people who know what they're doing, the best path forward is to use a local postgres DB. We should suggest that.

Use the Cloud Hosted DB and --create-only

Because of Prisma Shadow DB 😈 craziness, using a hosted DB for local dev actually requires two DBs: one for dev and the other as a Shadow DB used during migration creation for a kind of verify-before-apply.

HOWEVER, this works (it's just brittle and not to be messed up):

• delete migrations/ and set the datasource as postgres
• create the hosted postgres and get the connection string
• then use that connection string in .env DATABASE_URL
• and then run rw prisma migrate dev --create-only

And it Works™, even without the shadow DB.

We need to explain this is a workaround for quick Tutorial experience. The right way is to create an actual local dev DB (see doc). If they mess things up, e.g. apply to hosted DB, they could 1) delete migrations/ and then 2) run rw prisma migrate reset which seems to do the trick.

This needs to be tested. But I think it's a way forward.

Hi

I think authentication link in the following path /docs/tutorial/administration.md future step needs to be updated to this

Because it open a 404 page: 👇

Thanks

This problem report has two parts - and everything below is a function of the terminal shell being used. In this report only PowerShell is being used

Part 1

A Picture tells this better:

Here is the screenshot of pasting the text copied to VSCode internal terminal, running PowerShell shell:

Note that the text copied from the tutorial to the clipboard contains the EOL character:

This behavior is NOT correct - the text should be pasted without the EOL character in order to give the user a chance to add something to this text, and the user should press the keyboard Enter key.

Here is the immediate consequence of having the EOL as a part of the command:

I am not sure whether the same problem should be fixed elsewhere in the Tutorial text

Part 2

Observe the image below, where the response to the generator's prompt is entered "over" (instead than below) the command line text. When I entered create posts data (and pressed return), the following happened:

The CLI command yarn rw prisma migrate dev took the create posts text, but the PowerShell was also fed the same string ("create : The term 'create' is not recognized ...")

Note that all this could have been avoided by ensuring that yarn rw prisma migrate dev does not contain the EOL character. It seems that many different shells used by most users are of a more tolerant nature, however we need to ensure that all shells work the same way

The award-winning tutorial is ~18,000 words long. Should we help users find stuff quickly by adding a search bar?

How to add search bar in Docusaurus: https://v2.docusaurus.io/docs/search

Obstacles:

1. How to approach i18n?
2. Who owns API key?

Similar to #38 I noticed on the site that the contrast value for certain text in the footer and navigation is currently too low to be accessible. Generally the minimum contrast level to be accessible is 4.5:1 for AA or 3:1 for large text.

Screenshots below:

I am happy to work on updating the colors in the footer and navigation to be more accessible but am not sure in terms of branding what colors would be appropriate.

There are two types of content we must translate: markdown docs and UI strings.

We've already gotten started with markdown translation flow, but haven't tried any UI strings yet (= strings NOT in markdown, like in navbar, sidebar, footer, etc)

There is a how-to in the unreleased i18n docs. See section "JSON files" and the file tree diagram beneath.

As a first baby step for understanding UI string translation in Docusaurus 2, we can translate the footer into French.

Docs -> Docs
Community -> Communauté
More -> Plus
Built with Docusaurus -> Construit avec Docusaurus

*I do not speak French - if you have a better translation please feel free to use! The purpose of this exercise is to understand UI string translation structure

Add a prettier config file with generally acceptable formats. Should tackle:

• indentation (2 spaces?)
• yes to semi-colons
• anything else you feel is important

At least this is the case on my screen...
Anybody with a well calibrated screen (Apple devices?) to confirm ?

The English tutorial content is current as of Nov 10, 2020...

We need to manually backfill the commits from .com made on and after Nov 11, 2020 (starting with commit titled auth.js)

Here are the commits
https://github.com/redwoodjs/redwoodjs.com/commits/main?before=f78c0475ead96097b552c9fd3ba133401630f52c+35&branch=main&path%5B%5D=TUTORIAL.md

Unfortunately this is not so simple as git diffing, as the single long TUTORIAL.md file from .com has been split into sections on "learn".

It will involve checking the commit, finding some text that reveals the commit's context, using Algolia search or project search in "learn" to find the associated section and update it to mirror the commit.

If all goes well, this will automatically trigger Crowdin to require updates in the French translation.

On the RBAC page there are a few dead links due to improper absolute URL rendering by Docusaurus perhaps.

Example:

"If you cloned the redwood-tutorial code from GitHub you'll need to create a Netlify site and deploy it, then enable Netlify Identity as described in the first part of the tutorial."

Markdown:

...then [enable Netlify Identity](../tutorial/authentication#netlify-identity-setup) as described...

Which renders an incorrect path /docs/tutorial2/tutorial/authentication:

curl -iI https://learn.redwoodjs.com/docs/tutorial2/tutorial/authentication#netlify-identity-setup
HTTP/2 404

This relative parent directory syntax is used five (5) times in two (2) files:

• /docs/tutorial/wrapping-up.md:
• /docs/tutorial2/role-based-authorization-control-rbac.md:

Hi,

I follow the tutorial wich is very well thank for your work redwood is awesome I will continue to use it for a long time

If we follow the tutorial we will have an error when we want to create a post at the Deployment section, because we don't pass the roles to requireAuth.

export const createPost = ({ input }) => {
  requireAuth() // we don't pass any roles to require
  return db.post.create({
    data: input,
  })
}

Wich will cause an error on the API

api | ERROR [2021-12-10 13:02:34.337 +0000] (graphql-server): Cannot destructure property 'roles' of 'undefined' as it is undefined.
api |     error: {
api |       "message": "Cannot destructure property 'roles' of 'undefined' as it is undefined.",
api |       "locations": [
api |         {
api |           "line": 2,
api |           "column": 3
api |         }
api |       ],
api |       "path": [
api |         "createPost"
api |       ]
api |     }

to avoid the problem I have to add an admin role to my user on Netlify / Identity and set the first param of requireAuth to currentUser by default.

export const requireAuth = ({ roles } = context.currentUser) => {
  if (!isAuthenticated()) {
    throw new AuthenticationError("You don't have permission to do that.")
  }

  if (!hasRole({ roles })) {
    throw new ForbiddenError("You don't have access to do that.")
  }
}

The missing lines are

// web/src/pages/ContactPage/ContactPage.js

import { Form, TextField, TextAreaField, Submit } from '@redwoodjs/forms'
import BlogLayout from 'src/layouts/BlogLayout'

const ContactPage = () => {
  const onSubmit = (data) => {
    console.log(data)
  }

Please note: trying to make a PR instead I got stuck with the "triplet" following the javascript tag (see below)

|```javascript{3,15,16}
|// web/src/pages/ContactPage/ContactPage.js

(the '|" character inserted in col 1 to prevent this editor from interpreting this code).

Our page has lovely theming now thanks to Rob but I noticed our footer is somewhat hard to read in light mode.

There is not enough contrast between the dark gray bg and dark red text.

The dark red text is similarly hard to read on dark red bg in dark mode

Light mode

Dark mode

This happens in the Cell section

I am surprised to still find value in repeating the whole Tutorial chapter (motive is really to develop the "muscle memory)