From 5142c0e542f88e98cc61c33aad939129b50126e4 Mon Sep 17 00:00:00 2001 From: Adem ilter Date: Fri, 11 Jun 2021 05:04:33 +0300 Subject: [PATCH] Example blog with comments (#24829) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * initial commit * delete comment * env name fix * Update README.md * remove hapi-boom * use next-image * fix alt attr * date fix for blog posts * reset gitignore * fix react best-practices * prettier * mdx to md * fix prettier config. lint đź‘Ť * Update examples/blog-with-comment/components/comment/list.js Co-authored-by: Lee Robinson * refactor api methods * fix: blog title * fix: html lang * next-mdx to gray-matter Co-authored-by: Noah Fischer <78238464+noahfschr@users.noreply.github.com> Co-authored-by: Lee Robinson Co-authored-by: Enes Akar --- examples/blog-with-comment/.env.local.example | 4 + examples/blog-with-comment/.gitignore | 34 +++++++ examples/blog-with-comment/.prettierrc | 4 + examples/blog-with-comment/README.md | 63 +++++++++++++ .../_posts/long-expected-party.md | 18 ++++ .../_posts/passing-of-grey-company.md | 18 ++++ .../blog-with-comment/_posts/prancing-pony.md | 18 ++++ .../_posts/riders-of-rohan.md | 18 ++++ .../components/comment/form.js | 45 ++++++++++ .../components/comment/index.js | 16 ++++ .../components/comment/list.js | 52 +++++++++++ .../blog-with-comment/components/container.js | 5 ++ .../blog-with-comment/components/header.js | 21 +++++ .../blog-with-comment/hooks/useComment.js | 64 +++++++++++++ .../blog-with-comment/lib/createComment.js | 35 ++++++++ .../blog-with-comment/lib/dateRelative.js | 7 ++ .../blog-with-comment/lib/deleteComment.js | 32 +++++++ .../blog-with-comment/lib/fetchComment.js | 25 ++++++ examples/blog-with-comment/lib/getPost.js | 43 +++++++++ examples/blog-with-comment/lib/getUser.js | 12 +++ .../blog-with-comment/lib/markdownToHtml.js | 7 ++ examples/blog-with-comment/lib/redis.js | 31 +++++++ examples/blog-with-comment/package.json | 31 +++++++ examples/blog-with-comment/pages/_app.js | 25 ++++++ examples/blog-with-comment/pages/_document.js | 29 ++++++ .../blog-with-comment/pages/api/comment.js | 16 ++++ examples/blog-with-comment/pages/index.js | 35 ++++++++ .../blog-with-comment/pages/posts/[slug].js | 84 ++++++++++++++++++ .../blog-with-comment/pages/posts/index.js | 34 +++++++ examples/blog-with-comment/postcss.config.js | 6 ++ examples/blog-with-comment/public/desk.jpg | Bin 0 -> 317143 bytes examples/blog-with-comment/tailwind.config.js | 10 +++ 32 files changed, 842 insertions(+) create mode 100644 examples/blog-with-comment/.env.local.example create mode 100644 examples/blog-with-comment/.gitignore create mode 100644 examples/blog-with-comment/.prettierrc create mode 100644 examples/blog-with-comment/README.md create mode 100644 examples/blog-with-comment/_posts/long-expected-party.md create mode 100644 examples/blog-with-comment/_posts/passing-of-grey-company.md create mode 100644 examples/blog-with-comment/_posts/prancing-pony.md create mode 100644 examples/blog-with-comment/_posts/riders-of-rohan.md create mode 100644 examples/blog-with-comment/components/comment/form.js create mode 100644 examples/blog-with-comment/components/comment/index.js create mode 100644 examples/blog-with-comment/components/comment/list.js create mode 100644 examples/blog-with-comment/components/container.js create mode 100644 examples/blog-with-comment/components/header.js create mode 100644 examples/blog-with-comment/hooks/useComment.js create mode 100644 examples/blog-with-comment/lib/createComment.js create mode 100644 examples/blog-with-comment/lib/dateRelative.js create mode 100644 examples/blog-with-comment/lib/deleteComment.js create mode 100644 examples/blog-with-comment/lib/fetchComment.js create mode 100644 examples/blog-with-comment/lib/getPost.js create mode 100644 examples/blog-with-comment/lib/getUser.js create mode 100644 examples/blog-with-comment/lib/markdownToHtml.js create mode 100644 examples/blog-with-comment/lib/redis.js create mode 100644 examples/blog-with-comment/package.json create mode 100644 examples/blog-with-comment/pages/_app.js create mode 100644 examples/blog-with-comment/pages/_document.js create mode 100644 examples/blog-with-comment/pages/api/comment.js create mode 100644 examples/blog-with-comment/pages/index.js create mode 100644 examples/blog-with-comment/pages/posts/[slug].js create mode 100644 examples/blog-with-comment/pages/posts/index.js create mode 100644 examples/blog-with-comment/postcss.config.js create mode 100644 examples/blog-with-comment/public/desk.jpg create mode 100644 examples/blog-with-comment/tailwind.config.js diff --git a/examples/blog-with-comment/.env.local.example b/examples/blog-with-comment/.env.local.example new file mode 100644 index 0000000000000..e2035e120e7aa --- /dev/null +++ b/examples/blog-with-comment/.env.local.example @@ -0,0 +1,4 @@ +REDIS_URL= +NEXT_PUBLIC_AUTH0_CLIENT_ID= +NEXT_PUBLIC_AUTH0_DOMAIN= +NEXT_PUBLIC_AUTH0_ADMIN_EMAIL= diff --git a/examples/blog-with-comment/.gitignore b/examples/blog-with-comment/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ b/examples/blog-with-comment/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/blog-with-comment/.prettierrc b/examples/blog-with-comment/.prettierrc new file mode 100644 index 0000000000000..fd496a820ea94 --- /dev/null +++ b/examples/blog-with-comment/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "semi": false +} diff --git a/examples/blog-with-comment/README.md b/examples/blog-with-comment/README.md new file mode 100644 index 0000000000000..0dca2a32b0b5f --- /dev/null +++ b/examples/blog-with-comment/README.md @@ -0,0 +1,63 @@ +# Blog with Comment + +This project adds commenting functionality to [Next.js blog application](https://github.com/vercel/next.js/tree/canary/examples/blog) using Upstash and Auth0. + +The comment box requires Auth0 authentication for users to add new comments. A user can delete their own comment. Also admin user can delete any comment. + +Comments are stored in Serverless Redis ([Upstash](http://upstash.com/)). + +### Demo + +[https://blog-with-comment.vercel.app/](https://blog-with-comment.vercel.app/) + +## `1` Project set up + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) +with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the +example: + +```bash +npx create-next-app --example blog-with-comment blog-with-comment-app +``` + +## `2` Set up environment variables + +Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git): + +```bash +cp .env.local.example .env.local +``` + +## `3` Configuring Upstash + +Go to the [Upstash Console](https://console.upstash.com/) and create a new database + +#### Upstash environment + +- `REDIS_URL`: Find the URL in the database details page in Upstash Console clicking on **Redis Connect** button. + +## `4` Configuring Auth0 + +1. Go to the [Auth0 dashboard](https://manage.auth0.com/) and create a new application of type **Single Page Web + Applications**. +2. Go to the settings page of the application +3. Configure the following settings: + - **Allowed Callback URLs**: Should be set to `http://localhost:3000/` when testing locally or typically + to `https://myapp.com/` when deploying your application. + - **Allowed Logout URLs**: Should be set to `http://localhost:3000/` when testing locally or typically + to `https://myapp.com/` when deploying your application. +4. Save the settings. + +#### Auth0 environment + +- `NEXT_PUBLIC_AUTH0_DOMAIN`: Can be found in the Auth0 dashboard under `settings`. +- `NEXT_PUBLIC_AUTH0_CLIENT_ID`: Can be found in the Auth0 dashboard under `settings`. +- `NEXT_PUBLIC_AUTH0_ADMIN_EMAIL`: This is the email of the admin user which you use while singing in Auth0. Admin is able to delete any comment. + +## Deploy Your Local Project + +To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket +and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=upstash-roadmap). + +**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to +match your `.env.local` file. diff --git a/examples/blog-with-comment/_posts/long-expected-party.md b/examples/blog-with-comment/_posts/long-expected-party.md new file mode 100644 index 0000000000000..8dc7eb1b95bf9 --- /dev/null +++ b/examples/blog-with-comment/_posts/long-expected-party.md @@ -0,0 +1,18 @@ +--- +title: "A Long-expected Party" +excerpt: "Gandalf arrives in the Shire for Bilbo's Farewell Birthday Party. +Bilbo leaves the Shire permanently." +date: "2021-03-02" +--- + +Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias +totam laborum pariatur quam. Praesentium quo veritatis expedita animi. + +Quite anything glass benefit. Such form clearly top tend can require my. Federal +degree sort performance region maintain. + +Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad +corrupti aut. Expedita culpa aut deleniti officiis. + +Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque +cum ea. diff --git a/examples/blog-with-comment/_posts/passing-of-grey-company.md b/examples/blog-with-comment/_posts/passing-of-grey-company.md new file mode 100644 index 0000000000000..cb27ea6f465cd --- /dev/null +++ b/examples/blog-with-comment/_posts/passing-of-grey-company.md @@ -0,0 +1,18 @@ +--- +title: "The Passing of the Grey Company" +excerpt: "Aragorn, Legolas, and Gimli are accompanied by the Grey Company as +they pass through the Paths of the Dead between Rohan and Gondor." +date: "2021-01-22" +--- + +Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias +totam laborum pariatur quam. Praesentium quo veritatis expedita animi. + +Quite anything glass benefit. Such form clearly top tend can require my. Federal +degree sort performance region maintain. + +Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad +corrupti aut. Expedita culpa aut deleniti officiis. + +Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque +cum ea. diff --git a/examples/blog-with-comment/_posts/prancing-pony.md b/examples/blog-with-comment/_posts/prancing-pony.md new file mode 100644 index 0000000000000..7fa5123243e52 --- /dev/null +++ b/examples/blog-with-comment/_posts/prancing-pony.md @@ -0,0 +1,18 @@ +--- +title: "At the Sign of the Prancing Pony" +excerpt: "The Hobbits reach the The Prancing Pony inn at Bree, where Frodo uses +a false name, Underhill." +date: "2021-03-03" +--- + +Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias +totam laborum pariatur quam. Praesentium quo veritatis expedita animi. + +Quite anything glass benefit. Such form clearly top tend can require my. Federal +degree sort performance region maintain. + +Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad +corrupti aut. Expedita culpa aut deleniti officiis. + +Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque +cum ea. diff --git a/examples/blog-with-comment/_posts/riders-of-rohan.md b/examples/blog-with-comment/_posts/riders-of-rohan.md new file mode 100644 index 0000000000000..f67dd3b40205b --- /dev/null +++ b/examples/blog-with-comment/_posts/riders-of-rohan.md @@ -0,0 +1,18 @@ +--- +title: "The Riders of Rohan" +excerpt: "Aragorn, Legolas, and Gimli follow the trail of the Orcs and find +several clues as to what happened with Merry and Pippin." +date: "2021-02-01" +--- + +Placeat consequuntur ullam aut sapiente illo velit. Eius facere ut molestias +totam laborum pariatur quam. Praesentium quo veritatis expedita animi. + +Quite anything glass benefit. Such form clearly top tend can require my. Federal +degree sort performance region maintain. + +Ut dignissimos sapiente culpa rerum pariatur consequatur. Corporis suscipit ad +corrupti aut. Expedita culpa aut deleniti officiis. + +Porro eum id sit quia expedita. Alias expedita asperiores. Corporis ex eum atque +cum ea. diff --git a/examples/blog-with-comment/components/comment/form.js b/examples/blog-with-comment/components/comment/form.js new file mode 100644 index 0000000000000..fee2240a88b3b --- /dev/null +++ b/examples/blog-with-comment/components/comment/form.js @@ -0,0 +1,45 @@ +import { useAuth0 } from '@auth0/auth0-react' + +function CommentForm({ text, setText, onSubmit }) { + const { isAuthenticated, logout, loginWithPopup } = useAuth0() + + return ( +
+