async-labs / builderbook Goto Github PK

On mobile, when a user clicks any link in the Table of Contents (in sidebar of the read-chapter page) - the TOC should close, and the user should see the content of the section clicked

• Desktop with closed TOC
• Desktop with open TOC
• Mobile

Let's display a list of hyperlinked bookmarks on the user dashboard (the MyBooks page for a Customer user).

After creating a book, I'm being redirected to /admin
and there's no way to get the list of books

Instead of running marked on every page load, let's save html content to DB in addition to markdown content

• markdown content is used to compare content between database and Github
• html content is used for data on the page

Reuse even listener and move hideHeader code from withLayout HOC to ReadChapter page.
No other page needs hiding Header.

Optimize Header and Footer for mobile browser view

create intro chapter to show scrolling and TOC in action

Use SubscribeForm component to let readers subscribe to newsletters

Add Tutorial model and tutorials page

@tima101 sanitize-html causes issues with displaying some content in books. Since users will write all code in books (and will not add anything unsafe), we can remove sanitize-html.

marked does not convert markdown into html for heading

Decide which data to move to pages/admin/index.js
Decide if need pages/admin/book-detail.js

Data:

• book details, sync button, edit button
• book sales stats: sold count and free book count

Since Admin user won't have too many books, most likely 1-3 books, I suggest showing book details on admin/index.js (Admin dashboard) page instead of admin/book-detail.js page

@klyburke Any cons?

• decrease font weight of header tags
• change colors of section names in table of contents
• add chapter order, in addition to chapter title, in title tag

https://github.com/zeit/next.js/wiki/Getting-ready-for-production

We could add the following info to the README, in order to configure Google and Github apps:

Google auth callback:
[host]/oauth2callback

Github auth callback:
[host]/auth/github/callback

As an example, hover over the headers on this page:
https://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom

Set prefetch to false for the /logout route in the MenuDrop component

Otherwise, we get a browser console error like this:
GET https://demo.builderbook.org/_next/c3fa3d01-d44e-4ae4-88c9-0f836d00d8c2/page/logout.js net::ERR_ABORTED

Add Express route at '/robot.txt'

Boilerplate app should have:

• React, Next.js, Material-UI
• Express, Express Session
• connected to MongoDB with Mongoose
• Google OAuth 2.0

Dark themes for Github and Youtube are great for eyes.

Example of dark theme for Github: https://github.com/StylishThemes/GitHub-Dark

Consider adding dark theme with UX similar to DDG's:

I am trying to run the locally but when I try to login, it keeps giving me an error:

Error: redirect_uri_mismatch

The redirect URI in the request, http://localhost:8000/oauth2callback, does not match the ones authorized for the OAuth client.

Help!

Below error is not always reproducible and not crucial (app runs):

most recent: vercel/next.js@7b2cd84#diff-bec864430eb5752a683c8798d0c6bd6c
old: vercel/next.js@c210a2e

vercel/next.js#2152
vercel/next.js#3778

{ Error: Can't set headers after they are sent.
    at SendStream.headersAlreadySent (/home/tima/apps/builderbook/book/4-end/node_modules/send/index.js:390:13)
    at SendStream.send (/home/tima/apps/builderbook/book/4-end/node_modules/send/index.js:618:10)
    at onstat (/home/tima/apps/builderbook/book/4-end/node_modules/send/index.js:730:10)
    at FSReqWrap.oncomplete (fs.js:153:5) expose: false, statusCode: 500, status: 500 }

test out local and deployed apps

https://www.npmjs.com/package/sitemap#example-of-using-sitemapjs-with-express-

CSP: Content-Security-Policy: script-src 'self' https://builderbook.org
https://developers.google.com/web/fundamentals/security/csp/

Read and add some measures from:
https://expressjs.com/en/advanced/best-practice-security.html

please add title to AddBook and EditBook pages using Head from next/head

no need for description since pages are not indexed

When you scroll past content under an

heading, the current section (which is under

heading) on the TOC becomes un-highlighted.

We want the section to remain highlighted when reading any content within that section.

This is just a suggestion, but it would be nice to have an example of how Builder Book can be made with a relational database like SQL instead of using MongoDB, Mongoose, etc.

When you add a new book and click the Save button on the /admin/add-book page - sync the book with its Github repo and redirect to the /admin/book-detail page.

This way the admin does not need to click Sync with Github for book creation, only for book updates.

Hi,

Im trying to add 'react-big-calendar' to your boilerplate project, but getting the following error:

Module parse failed: C:\source\repos\KvutzatYavne\node_modules\react-big-calendar\lib\css\react-big-calendar.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .rbc-btn { | color: inherit; | font: inherit;

maybe adding webpack will solve this issue

Place code in /book directory, for each chapter N-start and N-end codebases.

In the beginning of chapter 7, the book goes over how to build the returnSection() function. However, that function is already built in 7-start. Furthermore, the book begins discussing how to build returnSidebar. However, 7-start already has code for returnSidebar() that appears to be fully built out. This makes it very confusing to follow, since I'm not sure what code I should be writing.

Makes code more readable at server/utils/slugify.js

Hi Kelly and Timur,

Question about the user of babel-node to start the server on Now. I was reading the babel docs which states the babel-node should not be used in production (link). What's the benefit of doing so in Chapter 8? Is it just to make the deploy process easier? What would the alternative be?

Btw, just finished the final chapter. Good stuff, thank you!

• how to start locally: mention .env and .env-config.js
• how to deploy: mention now.json and now's commands

Add snapshots to readme:

• Public user on read-chapter.js page,
• Customer user on read-chapter.js page,
• Admin user add-book.js page,
• Admin user book-detail.js page

What else?

Currently Header disappears/appears instantly, consider adding some animation that delays disappear/appear events. So it looks smoother and user knows what happened.

When an admin clicks save on the edit-book page, save and redirect the admin to the book-detail page

Entering into
/books/my-book-2/introduction
shows an error

After copying my .env into book/4-start and running yarn then yarn dev, I get the following error after logging in with Google:

    at SendStream.headersAlreadySent (/Users/earl/dev/builderbook/book/4-start/node_modules/send/index.js:390:13)
    at SendStream.send (/Users/earl/dev/builderbook/book/4-start/node_modules/send/index.js:618:10)
    at onstat (/Users/earl/dev/builderbook/book/4-start/node_modules/send/index.js:730:10)
    at FSReqWrap.oncomplete (fs.js:171:5) expose: false, statusCode: 500, status: 500 }

Furthermore, the app looks like this when logged in:

The user I am logged in with does have an avatar.

Create a new entry field on the add-book.js and edit-book.js pages so that an Admin user can add text next to the Buy Button for a book. For example, the text could be "On sale" or "Pre-order ends on Friday", etc.

Instead of requiring the user to select a chapter section to create a bookmark, let's have the user bookmark the section he/she is currently reading

• when a user is within a chapter section, the bookmark button should say Bookmark "section"
• after creating a bookmark in a chapter, the button should have options to Go to "section" or Bookmark "current section"

Bad readability since file is too long

Also give names to callbacks: verify and verified

This is a list of suggested examples. Each suggestion has a link to the original issue.

• Create an example using TypeScript instead of PropTypes and Babel #45
  • Typescript example: https://github.com/async-labs/async-saas
• Create an example using a relational database like SQL instead of MongoDB, Mongoose #44

This is just a suggestion, but it would be nice to have an example of how one could use TypeScript instead of PropTypes and Babel for Builder Book given the rising popularity of and support for TypeScript.