Merge pull request #2 from ningowood/v0.2

Merge V0.2 to main #1: From Precedent (Next.js) template to rebuild.

.gitignore

@@ -0,0 +1,5 @@
+# In the future we will open source these core folder!
+
+# Below is development file
+development-guide.md
+tobedone

LICENSE

@@ -1,21 +1,5 @@
-MIT License
+We are in development now. Every folder would change any time.
 
-Copyright (c) 2022 ningowood
+Each folder may have different LICENSE.
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+Now feel free to take any code as you wish with no concerned, but we guarantee no responsibility either.

README.md

@@ -1,56 +1,35 @@
-# [Ningowood](http://ningowood), a brand new "Micro-Frontend Tools" oriented Metaverse space. For Web 3.0 we created.
+# [Ningowood](http://ningowood) v0.2.0: Add the missing community to the spreadsheet database ecology
 
 ![](./public/static/showcase-20221126.webp)
 
-## Why we are here
+## Read the newest artitle
 
-Through every day deep immerse in the Cyberized Internet, so many data we meet and create, but it still got the situation that so separated everywhere. And combine with the real world, for example, how many the Games we brought in physics, when is the last time we go to Hospital, how to plan my future by tracking every thing just happened...?
+[Ningowood v0.2.0: Add the missing community to the spreadsheet database ecology](./blogs/2023-0618-ningowood-v0_2.md): in writing...
 
-Yes, there already have some awesome tool to track all data by your own (AirTable is what I really like), and both have an brilliant API workflow to communicate with other tools. But except you must track them manually(which u must define the data struction one by one) and painfully(the data relations is so hard to link about globally), you still got the final big question, where should all the data landing?
+## Webinar resource
 
-## What we will do in the future
-
-> Thanks to Single SPA and the Micro Frontend ecosystem, we now have the sights and ability to build so many micro-app in one page for your comfortably usage.
-
-* Use different common model (Time | Quantity | Cost | Location | People | Notes..) to track any entities you want (Games | Films & Open Source Communities…).
-* Share with others: the game-time u laughed with your friend, the social-time u just learn from others and even the food you just cooked for your lover, anything you track can directly share to others, and stored in her/his own database (Datas can sync with each other related and can have Open API auth to anywhere u want to use)!
-* No-Code Editor and even powerful Canvas to draw, or build any workflow you want for your own data.
-* Powerful community work for you every-time: Following the Official API, any of we can create any micro-tools, and then published directly to your target users.
-* Using the leading-edge techniques, build and find every data relations for you.
-* Change any UI you like. Even the official Login UI, navbar UI, whereever you see about, you can change it to another and share with others. Powered by Headless UI, Single SPA and more to build this plugin System.
-* Abundance 3rd part API, because we are not autistic to code. AirTable, Notion, Strapi, IMDB, LetterboxD, GOG, Steam, Github, Zapier, Dropbox... and more to come.
-* And finally, all the data belongs to you. You can choose where to store (in Cloud or in your Own Computer). Export to any format like Excel, PPT, and more!
+* 2023-06-XX: (en-US)(Uploading soon) share v0.2 to the global world in Youtube.
+* 2023-06-XX: (zh-CN)(Inner Resource) share v0.2 to MiraclePlus.
+* 2022-11-26: (zh-CN)(Inner Resource) share v0.1 to freeCodeCamp, Tianjin, China.
 
 ## Development togehter
 
-> Group is just beginning, welcome your contribute!
-
-* Git clone this monorepo
-* Independently install node_modules in both microfrontends/apps* and microbackends/apps*
-* Before `be-root` repo start, run PostgreSQL in your machine first.
-  * Then, 
-* Any question new, please discusstion in this repo or contact the community by joining the group (See below).
-
-## Open Source, or charge?
-
-Open source is the most important way where we study all the leading-edge technique knowledege. We don't want to leave it. When the Open Source is controlling this Software World, so many open source project earned what they deserved. Let's see where we can get.
-
-## Metaverse is not died, long live with the XR experience.
+> Everything is just beginning, welcome your contribute!
 
-JavaScript is everywhere, build it in XR is just the beginning for our world.
+* Git clone this monorepo.
+* For v0.1.0: Independently install node_modules in both microfrontends/* and microbackends/*.
+* Any development question new, please submit in [Issues](https://github.com/ningowood/ningowood/issues).
 
-## Contact
+## Community
 
-* Discord Group: https://discord.gg/YeZQ8fegmq
-* Wechat Personal: hylerrix
-* Wechat Official Account: ningowood
-* For more idea about this repo , directly message to me: [email protected].
+* Official Github Discussion: [Here](https://github.com/ningowood/ningowood/discussions).
+* Official Discord Group: [Here](https://discord.gg/YeZQ8fegmq).
+* Official Wechat Account: ningowood
 
 ## Notice
 
-1. This is a very first demo preview of Ningowood. After online registration, ur data starts to be collected in the Ningo Cloud. Register with ur real email to receive further updates! (Only email will remain in the first stable release.)
-2. Introduction about Ningowood will continuing writing in this place. Functionality updates about Ningowood will continuing pushing to this repo. Don't forget to back to this sweety home any time u want!
+This is a first-period demo preview of Ningowood. After online registration, ur data starts to be collected in the cloud database. Register with your real email to receive further updates! (Only email will remain in the first stable release.)
 
 ## License
 
-MIT for now.
+[SEE HERE](./LICENSE) for now.

blogs/2023-0618-ningowood-v0_2.md

@@ -0,0 +1,76 @@
+# [Ningowood](http://ningowood) v0.2.0: Add the missing community to the spreadsheet database ecology
+
+![](./public/static/showcase-20221126.webp)
+
+## Why you need: About the numerous data
+
+Through every day deep immerse in the era of Internet Web 2.0, we meet and create so much data, but it still has the not rejoicing situation in which data is separated everywhere.
+
+Take a real-world scenario, for example, how much money did we spend on physics and digital games, when is the last time we go to the cinema to watch a movie shown in IMAX laser, and what places have my friend and I visited on the previous trip...
+
+how to plan my future by tracking everything that just happened...?
+
+We want to track, sort, filter and group. We want to see it
+
+and more.
+
+Yes, there already have some awesome tool to track all data by your own (AirTable is what I really like), and both have an brilliant API workflow to communicate with other tools. But except you must track them manually(which u must define the data struction one by one) and painfully(the data relations is so hard to link about globally), you still got the final big question, where should all the data landing?
+
+## INFOM structured: From multiple apps to spreadsheet databases.
+
+> We want to find the all-in-one tool.
+
+> From using multiple apps in multiple places to using spreadsheet databases in one place.
+
+> Notion, AirTable
+
+## Retrieve the data that belongs to you
+
+## What we will do in the future
+
+> Thanks to Single SPA and the Micro Frontend ecosystem, we now have the sights and ability to build so many micro-app in one page for your comfortably usage.
+
+* Use different common model (Time | Quantity | Cost | Location | People | Notes..) to track any entities you want (Games | Films & Open Source Communities…).
+* Share with others: the game-time u laughed with your friend, the social-time u just learn from others and even the food you just cooked for your lover, anything you track can directly share to others, and stored in her/his own database (Datas can sync with each other related and can have Open API auth to anywhere u want to use)!
+* No-Code Editor and even powerful Canvas to draw, or build any workflow you want for your own data.
+* Powerful community work for you every-time: Following the Official API, any of we can create any micro-tools, and then published directly to your target users.
+* Using the leading-edge techniques, build and find every data relations for you.
+* Change any UI you like. Even the official Login UI, navbar UI, whereever you see about, you can change it to another and share with others. Powered by Headless UI, Single SPA and more to build this plugin System.
+* Abundance 3rd part API, because we are not autistic to code. AirTable, Notion, Strapi, IMDB, LetterboxD, GOG, Steam, Github, Zapier, Dropbox... and more to come.
+* And finally, all the data belongs to you. You can choose where to store (in Cloud or in your Own Computer). Export to any format like Excel, PPT, and more!
+
+## The future action in the AI era
+
+## Development togehter
+
+> Group is just beginning, welcome your contribute!
+
+* Git clone this monorepo
+* Independently install node_modules in both microfrontends/apps* and microbackends/apps*
+* Before `be-root` repo start, run PostgreSQL in your machine first.
+  * Then, 
+* Any question new, please discusstion in this repo or contact the community by joining the group (See below).
+
+## Open Source, or charge?
+
+Open source is the most important way where we study all the leading-edge technique knowledege. We don't want to leave it. When the Open Source is controlling this Software World, so many open source project earned what they deserved. Let's see where we can get.
+
+## Metaverse is not died, long live with the XR experience.
+
+JavaScript is everywhere, build it in XR is just the beginning for our world.
+
+## Contact
+
+* Discord Group: https://discord.gg/YeZQ8fegmq
+* Wechat Personal: hylerrix
+* Wechat Official Account: ningowood
+* For more idea about this repo , directly message to me: [email protected].
+
+## Notice
+
+1. This is a very first demo preview of Ningowood. After online registration, ur data starts to be collected in the Ningo Cloud. Register with ur real email to receive further updates! (Only email will remain in the first stable release.)
+2. Introduction about Ningowood will continuing writing in this place. Functionality updates about Ningowood will continuing pushing to this repo. Don't forget to back to this sweety home any time u want!
+
+## License
+
+[SEE HERE](./LICENSE) for now.

microbackends/README.md

@@ -0,0 +1,5 @@
+# Notice
+
+This is a folder using in v0.1.0, to show what it feels like to use many micro-frontend applications in one website.
+
+It's no use in v0.2.0, and it will change any time in the future.

microfrontends/README.md

@@ -0,0 +1,5 @@
+# Notice
+
+This is a folder using in v0.1.0, to show what it feels like to use many micro-frontend applications in one website.
+
+It's no use in v0.2.0, and it will change any time in the future.

ningowood.com/.env.example

@@ -0,0 +1,16 @@
+### These env vars are for authentication & database to work. If you don't require them, feel free to enter dummy values for all these.
+
+# Create a free PostgreSQL database: https://vercel.com/postgres
+# If you're deploying this template with a Vercel Deploy Button, these will be configured automatically for you.
+POSTGRES_PRISMA_URL=
+POSTGRES_URL_NON_POOLING=
+
+# Follow the instructions here to create a Google OAuth app: https://refine.dev/blog/nextauth-google-github-authentication-nextjs/#for-googleprovider-make-sure-you-have-a-google-account
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# Only for production – generate one here: https://generate-secret.vercel.app/32
+NEXTAUTH_SECRET=
+
+## Only required for localhost
+NEXTAUTH_URL=http://localhost:3000

ningowood.com/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

ningowood.com/.gitignore

@@ -0,0 +1,40 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# misc
+.vscode

ningowood.com/.prettierignore

@@ -0,0 +1,3 @@
+yarn.lock
+node_modules
+.next

ningowood.com/LICENSE.md

@@ -0,0 +1,5 @@
+We are in development now. Every folder would change any time.
+
+Each folder may have different LICENSE.
+
+Now feel free to take any code as you wish with no concerned, but we guarantee no responsibility either.

ningowood.com/README.md

@@ -0,0 +1,90 @@
+<a href="https://precedent.dev">
+  <img alt="Precedent – Building blocks for your Next project" src="https://precedent.dev/opengraph-image">
+  <h1 align="center">Precedent</h1>
+</a>
+
+<p align="center">
+  Building blocks for your Next project
+</p>
+
+<p align="center">
+  <a href="https://twitter.com/steventey">
+    <img src="https://img.shields.io/twitter/follow/steventey?style=flat&label=steventey&logo=twitter&color=0bf&logoColor=fff" alt="Steven Tey Twitter follower count" />
+  </a>
+  <a href="https://github.com/steven-tey/precedent">
+    <img src="https://img.shields.io/github/stars/steven-tey/precedent?label=steven-tey%2Fprecedent" alt="Precedent repo star count" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="#introduction"><strong>Introduction</strong></a> ·
+  <a href="#one-click-deploy"><strong>One-click Deploy</strong></a> ·
+  <a href="#tech-stack--features"><strong>Tech Stack + Features</strong></a> ·
+  <a href="#author"><strong>Author</strong></a>
+</p>
+<br/>
+
+## Introduction
+
+Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.
+
+## One-click Deploy
+
+You can deploy this template to Vercel with the button below:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent&project-name=precedent&repository-name=precedent&demo-title=Precedent&demo-description=An%20opinionated%20collection%20of%20components%2C%20hooks%2C%20and%20utilities%20for%20your%20Next%20project.&demo-url=https%3A%2F%2Fprecedent.dev&demo-image=https%3A%2F%2Fprecedent.dev%2Fopengraph-image&env=GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET,NEXTAUTH_SECRET&envDescription=How%20to%20get%20these%20env%20variables%3A&envLink=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent%2Fblob%2Fmain%2F.env.example&stores=%5B%7B"type"%3A"postgres"%7D%5D)
+
+You can also clone & create this repo locally with the following command:
+
+```bash
+npx create-next-app precedent --example "https://github.com/steven-tey/precedent"
+```
+
+## Tech Stack + Features
+
+https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4
+
+### Frameworks
+
+- [Next.js](https://nextjs.org/) – React framework for building performant apps with the best developer experience
+- [Auth.js](https://authjs.dev/) – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
+- [Prisma](https://www.prisma.io/) – Typescript-first ORM for Node.js
+
+### Platforms
+
+- [Vercel](https://vercel.com/) – Easily preview & deploy changes with git
+- [Vercel Postgres](https://vercel.com/postgres) – Serverless Postgres at the Edge
+
+### UI
+
+- [Tailwind CSS](https://tailwindcss.com/) – Utility-first CSS framework for rapid UI development
+- [Radix](https://www.radix-ui.com/) – Primitives like modal, popover, etc. to build a stellar user experience
+- [Framer Motion](https://framer.com/motion) – Motion library for React to animate components with ease
+- [Lucide](https://lucide.dev/) – Beautifully simple, pixel-perfect icons
+- [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) – Optimize custom fonts and remove external network requests for improved performance
+- [`ImageResponse`](https://beta.nextjs.org/docs/api-reference/image-response) – Generate dynamic Open Graph images at the edge
+- [`react-wrap-balancer`](https://github.com/shuding/react-wrap-balancer) – Simple React component that makes titles more readable
+
+### Hooks and Utilities
+
+- `useIntersectionObserver` –  React hook to observe when an element enters or leaves the viewport
+- `useLocalStorage` – Persist data in the browser's local storage
+- `useScroll` – React hook to observe scroll position ([example](https://github.com/steven-tey/precedent/blob/main/components/layout/navbar.tsx#L12))
+- `nFormatter` – Format numbers with suffixes like `1.2k` or `1.2M`
+- `capitalize` – Capitalize the first letter of a string
+- `truncate` – Truncate a string to a specified length
+- [`use-debounce`](https://www.npmjs.com/package/use-debounce) – Debounce a function call / state update
+
+### Code Quality
+
+- [TypeScript](https://www.typescriptlang.org/) – Static type checker for end-to-end typesafety
+- [Prettier](https://prettier.io/) – Opinionated code formatter for consistent code style
+- [ESLint](https://eslint.org/) – Pluggable linter for Next.js and TypeScript
+
+### Miscellaneous
+
+- [Vercel Analytics](https://vercel.com/analytics) – Track unique visitors, pageviews, and more in a privacy-friendly way
+
+## Author
+
+- Steven Tey ([@steventey](https://twitter.com/steventey))

ningowood.com/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,18 @@
+import NextAuth, { NextAuthOptions } from "next-auth";
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import prisma from "@/lib/prisma";
+import GoogleProvider from "next-auth/providers/google";
+
+export const authOptions: NextAuthOptions = {
+  adapter: PrismaAdapter(prisma),
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+    }),
+  ],
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

ningowood.com/app/fonts/index.ts

@@ -0,0 +1,12 @@
+import localFont from "next/font/local";
+import { Inter } from "next/font/google";
+
+export const sfPro = localFont({
+  src: "./SF-Pro-Display-Medium.otf",
+  variable: "--font-sf",
+});
+
+export const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});

ningowood.com/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;