8 |
9 | ## Current status of dino
10 |
11 | 
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 |
19 | ## Features
20 |
21 | - [x] A simple to use note taking experience
22 | - [x] Folders to organise notes in a concise, easy and well-understoof manner
23 | - [ ] A storage space like google cloud, dropbox so of around `5Gb` to access your files alongside your notes
24 |
25 | ## Contributing
26 |
27 | ALl help is appreciated. If you want to contribute to `dino`, pls make a pull request and I'll review it.
28 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Reporting a Vulnerability
4 |
5 | DM me on https://twitter.com/japrozss or email me at `sainijaproz@gmail.com`
--------------------------------------------------------------------------------
/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/banner.png
--------------------------------------------------------------------------------
/assets/dark_mode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/dark_mode.png
--------------------------------------------------------------------------------
/assets/editor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/editor.png
--------------------------------------------------------------------------------
/assets/main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/main.png
--------------------------------------------------------------------------------
/assets/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/menu.png
--------------------------------------------------------------------------------
/assets/modal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/modal.png
--------------------------------------------------------------------------------
/assets/quickfind.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/quickfind.png
--------------------------------------------------------------------------------
/assets/sidebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japrozs/dino/4298a5e8f43ad6f18df48b41b187ac4049002b13/assets/sidebar.png
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "packages": ["server"],
3 | "npmClient": "yarn",
4 | "version": "0.0.0"
5 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "root",
3 | "private": true,
4 | "devDependencies": {
5 | "lerna": "^4.0.0"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/server/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | yarn-debug.log
--------------------------------------------------------------------------------
/server/.env.example:
--------------------------------------------------------------------------------
1 | DATABASE_URL=
2 | REDIS_URL=
3 | PORT=
4 | SESSION_SECRET=
5 | CORS_ORIGIN=
6 | DO_ENDPOINT=
7 | DO_ACCESS_KEY_ID=
8 | DO_SECRET_ACCESS_KEY=
--------------------------------------------------------------------------------
/server/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:latest
2 |
3 | WORKDIR /usr/src/app
4 |
5 | COPY package.json ./
6 | COPY yarn.lock ./
7 |
8 | RUN yarn
9 |
10 | COPY . .
11 | COPY .env.production .env
12 |
13 | RUN yarn build
14 |
15 |
16 | ENV NODE_ENV production
17 |
18 | EXPOSE 8080
19 | CMD ["node", "dist/index.js"]
20 | USER node
--------------------------------------------------------------------------------
/server/ormconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "postgres",
3 | "host": "localhost",
4 | "port": 5432,
5 | "username": "postgres",
6 | "password": "postgres",
7 | "database": "dino2",
8 | "entities": ["dist/entities/*.js"],
9 | "migrations": ["dist/migrations/*.js"]
10 | }
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "gen-env": "gen-env-types .env -o src/env.d.ts -e .",
8 | "build": "tsc",
9 | "watch": "tsc -w",
10 | "dev": "nodemon dist/index.js",
11 | "start": "node dist/index.js"
12 | },
13 | "keywords": [],
14 | "author": "",
15 | "license": "ISC",
16 | "dependencies": {
17 | "apollo-server-express": "2.25.0",
18 | "aws-sdk": "^2.1040.0",
19 | "connect-redis": "^6.0.0",
20 | "cors": "^2.8.5",
21 | "dotenv-safe": "^8.2.0",
22 | "express": "^4.17.1",
23 | "express-session": "^1.17.2",
24 | "graphql": "^15.6.1",
25 | "graphql-type-json": "^0.3.2",
26 | "ioredis": "^4.27.11",
27 | "multer": "^1.4.3",
28 | "multer-s3": "^2.10.0",
29 | "pg": "^8.7.1",
30 | "type-graphql": "^1.1.1",
31 | "typeorm": "^0.2.38"
32 | },
33 | "devDependencies": {
34 | "@types/connect-redis": "^0.0.17",
35 | "@types/express-session": "^1.17.4",
36 | "@types/graphql-type-json": "^0.3.2",
37 | "@types/ioredis": "^4.27.6",
38 | "@types/multer": "^1.4.7",
39 | "@types/multer-s3": "^2.7.11",
40 | "@types/node": "^16.11.8",
41 | "@types/nodemailer": "^6.4.4",
42 | "@types/uuid": "^8.3.1",
43 | "argon2": "^0.28.2",
44 | "gen-env-types": "^1.3.0",
45 | "nodemailer": "^6.6.5",
46 | "typescript": "^4.5.2",
47 | "uuid": "^8.3.2"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/server/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const __prod__ = process.env.NODE_ENV === "production";
2 | export const COOKIE_NAME = "qid";
3 | export const FORGET_PASSWORD_PREFIX = "forget-password:";
4 |
--------------------------------------------------------------------------------
/server/src/entities/Folder.ts:
--------------------------------------------------------------------------------
1 | import { Field, ObjectType } from "type-graphql";
2 | import {
3 | CreateDateColumn,
4 | BaseEntity,
5 | Entity,
6 | PrimaryGeneratedColumn,
7 | UpdateDateColumn,
8 | Column,
9 | ManyToOne,
10 | } from "typeorm";
11 | import { User } from "./User";
12 |
13 | @ObjectType()
14 | @Entity()
15 | export class Folder extends BaseEntity {
16 | @Field()
17 | @PrimaryGeneratedColumn()
18 | id: number;
19 |
20 | @Field()
21 | @Column()
22 | name: string;
23 |
24 | @Field()
25 | @Column()
26 | color: string;
27 |
28 | @Field(() => [String])
29 | @Column("simple-array")
30 | noteIds: string[];
31 |
32 | @Field(() => User)
33 | @ManyToOne(() => User, (user) => user.folders)
34 | creator: User;
35 |
36 | @Field()
37 | @Column()
38 | creatorId: number;
39 |
40 | @Field(() => String)
41 | @CreateDateColumn()
42 | createdAt: Date;
43 |
44 | @Field(() => String)
45 | @UpdateDateColumn()
46 | updatedAt: Date;
47 | }
48 |
--------------------------------------------------------------------------------
/server/src/entities/Note.ts:
--------------------------------------------------------------------------------
1 | import { Field, ObjectType } from "type-graphql";
2 | import {
3 | CreateDateColumn,
4 | BaseEntity,
5 | Entity,
6 | PrimaryGeneratedColumn,
7 | UpdateDateColumn,
8 | Column,
9 | ManyToOne,
10 | } from "typeorm";
11 | import { User } from "./User";
12 |
13 | @ObjectType()
14 | @Entity()
15 | export class Note extends BaseEntity {
16 | @Field()
17 | @PrimaryGeneratedColumn()
18 | id: number;
19 |
20 | @Field()
21 | @Column()
22 | title: string;
23 |
24 | @Field(() => String)
25 | @Column({ nullable: true })
26 | body: string;
27 |
28 | @Field(() => String)
29 | @Column({ default: "active" })
30 | status: string;
31 |
32 | @Field(() => User)
33 | @ManyToOne(() => User, (user) => user.notes)
34 | creator: User;
35 |
36 | @Field()
37 | @Column()
38 | creatorId: number;
39 |
40 | @Field(() => String)
41 | @CreateDateColumn()
42 | createdAt: Date;
43 |
44 | @Field(() => String)
45 | @UpdateDateColumn()
46 | updatedAt: Date;
47 | }
48 |
--------------------------------------------------------------------------------
/server/src/entities/User.ts:
--------------------------------------------------------------------------------
1 | import { Field, ObjectType } from "type-graphql";
2 | import {
3 | Column,
4 | CreateDateColumn,
5 | BaseEntity,
6 | Entity,
7 | PrimaryGeneratedColumn,
8 | UpdateDateColumn,
9 | OneToMany,
10 | } from "typeorm";
11 | import { Folder } from "./Folder";
12 | import { Note } from "./Note";
13 |
14 | @ObjectType()
15 | @Entity()
16 | export class User extends BaseEntity {
17 | @Field()
18 | @PrimaryGeneratedColumn()
19 | id: number;
20 |
21 | @Field()
22 | @Column()
23 | name: string;
24 |
25 | @Field()
26 | @Column({ default: "light" })
27 | theme: string;
28 |
29 | @Field()
30 | @Column({
31 | default:
32 | "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y",
33 | })
34 | imgUrl: string;
35 |
36 | @Field()
37 | @Column({ unique: true })
38 | email: string;
39 |
40 | @Column()
41 | password!: string;
42 |
43 | @Field(() => [Note])
44 | @OneToMany(() => Note, (note) => note.creator)
45 | notes: Note[];
46 |
47 | @Field(() => [Folder])
48 | @OneToMany(() => Folder, (folder) => folder.creator)
49 | folders: Folder[];
50 |
51 | @Field(() => String)
52 | @CreateDateColumn()
53 | createdAt: Date;
54 |
55 | @Field(() => String)
56 | @UpdateDateColumn()
57 | updatedAt: Date;
58 | }
59 |
--------------------------------------------------------------------------------
/server/src/env.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace NodeJS {
2 | interface ProcessEnv {
3 | DATABASE_URL: string;
4 | REDIS_URL: string;
5 | PORT: string;
6 | SESSION_SECRET: string;
7 | CORS_ORIGIN: string;
8 | DO_ENDPOINT: string;
9 | DO_ACCESS_KEY_ID: string;
10 | DO_SECRET_ACCESS_KEY: string;
11 | }
12 | }
--------------------------------------------------------------------------------
/server/src/index.ts:
--------------------------------------------------------------------------------
1 | import "reflect-metadata";
2 | import "dotenv-safe/config";
3 | import { __prod__, COOKIE_NAME } from "./constants";
4 | import express from "express";
5 | import { ApolloServer } from "apollo-server-express";
6 | import { buildSchema } from "type-graphql";
7 | import { UserResolver } from "./resolvers/user";
8 | import Redis from "ioredis";
9 | import session from "express-session";
10 | import connectRedis from "connect-redis";
11 | import cors from "cors";
12 | import { createConnection } from "typeorm";
13 | import { User } from "./entities/User";
14 | import { Note } from "./entities/Note";
15 | import path from "path";
16 | import { NoteResolver } from "./resolvers/note";
17 | import { Folder } from "./entities/Folder";
18 | import { FolderResolver } from "./resolvers/folder";
19 | import avatarUpload from "./resolvers/upload/avatar";
20 |
21 | const main = async () => {
22 | const conn = await createConnection({
23 | type: "postgres",
24 | url: process.env.DATABASE_URL,
25 | logging: true,
26 | synchronize: true,
27 | migrations: [path.join(__dirname, "./migrations/*")],
28 | entities: [User, Note, Folder],
29 | });
30 | await conn.runMigrations();
31 |
32 | const app = express();
33 |
34 | const RedisStore = connectRedis(session);
35 | const redis = new Redis(process.env.REDIS_URL);
36 | app.set("trust proxy", 1);
37 | app.use(
38 | cors({
39 | origin: process.env.CORS_ORIGIN,
40 | credentials: true,
41 | })
42 | );
43 | app.use(
44 | session({
45 | name: COOKIE_NAME,
46 | store: new RedisStore({
47 | client: redis,
48 | disableTouch: true,
49 | }),
50 | cookie: {
51 | maxAge: 1000 * 60 * 60 * 24 * 365 * 10, // 10 years
52 | httpOnly: true,
53 | sameSite: "lax",
54 | secure: __prod__,
55 | domain: __prod__ ? ".japrozsaini.me" : undefined,
56 | },
57 | saveUninitialized: false,
58 | secret: process.env.SESSION_SECRET,
59 | resave: false,
60 | })
61 | );
62 |
63 | const apolloServer = new ApolloServer({
64 | schema: await buildSchema({
65 | resolvers: [UserResolver, NoteResolver, FolderResolver],
66 | validate: false,
67 | }),
68 | context: ({ req, res }) => ({
69 | req,
70 | res,
71 | redis,
72 | }),
73 | });
74 |
75 | app.use("/upload/", avatarUpload);
76 |
77 | apolloServer.applyMiddleware({
78 | app,
79 | cors: false,
80 | });
81 |
82 | app.listen(parseInt(process.env.PORT), () => {
83 | console.log(`🚀 Server started on localhost:${process.env.PORT}`);
84 | });
85 | };
86 |
87 | main().catch((err) => {
88 | console.error(err);
89 | });
90 |
--------------------------------------------------------------------------------
/server/src/middleware/isAuth.ts:
--------------------------------------------------------------------------------
1 | import { Context } from "../types";
2 | import { MiddlewareFn } from "type-graphql";
3 |
4 | export const isAuth: MiddlewareFn114 | Quick Find 115 |
116 |123 | Settings 124 |
125 |196 | Saving... 197 |
198 | ) : ( 199 |200 | Saved{" "} 201 | 202 | {timeSinceShort(note.updatedAt)} ago 203 | 204 |
205 | )} 206 |dino.app
10 | 58 | {name} 59 |
60 | 92 |119 | {data?.getNote.title} 120 |
121 |31 | {name} 32 |
33 |{children}
; 17 | case "H1": 18 | return ( 19 |{children};
55 | case "image":
56 | return {el};
12 | }
13 |
14 | if (leaf.italic) {
15 | el = {el};
16 | }
17 |
18 | if (leaf.underline) {
19 | el = {el};
20 | }
21 |
22 | if (leaf.highlighted) {
23 | el = (
24 |
25 | {el}
26 |
27 | );
28 | }
29 |
30 | return {el};
31 | };
32 |
--------------------------------------------------------------------------------
/web/src/components/ui/editor/editor.tsx:
--------------------------------------------------------------------------------
1 | import { useApolloClient } from "@apollo/client";
2 | import areEqual from "deep-equal";
3 | import isHotkey from "is-hotkey";
4 | import isUrl from "is-url";
5 | import React, {
6 | createRef,
7 | useCallback,
8 | useEffect,
9 | useMemo,
10 | useRef,
11 | useState,
12 | } from "react";
13 | import { BaseEditor, createEditor, Descendant } from "slate";
14 | import { Editable, ReactEditor, Slate, withReact } from "slate-react";
15 | import {
16 | GetNoteQuery,
17 | UpdateNoteTitleDocument,
18 | useGetNoteQuery,
19 | useUpdateNoteMutation,
20 | useUpdateNoteTitleMutation,
21 | } from "../../../generated/graphql";
22 | import { Navbar, toggleStyle } from "../Navbar";
23 | import { renderElement } from "./core/renderElement";
24 | import { renderLeaf } from "./core/renderLeaf";
25 | import ContentEditable from "react-contenteditable";
26 | import { withHistory } from "slate-history";
27 |
28 | interface EditorProps {
29 | note: GetNoteQuery["getNote"];
30 | }
31 |
32 | type CustomElement = {
33 | type: string;
34 | url?: string;
35 | children: CustomText[];
36 | };
37 | type CustomText = { text: string };
38 | declare module "slate" {
39 | interface CustomTypes {
40 | Editor: BaseEditor & ReactEditor;
41 | Element: CustomElement;
42 | Text: CustomText;
43 | }
44 | }
45 | export type SlateEditor = BaseEditor & ReactEditor;
46 |
47 | const useEditorConfig = (editor: SlateEditor) => {
48 | const onKeyDown = useCallback(
49 | (event) => KeyBindings.onKeyDown(editor, event),
50 | [editor]
51 | );
52 | const { isVoid, isInline } = editor;
53 | editor.isVoid = (element) => {
54 | return ["image"].includes(element.type) || isVoid(element);
55 | editor.isInline = (element) =>
56 | ["link"].includes(element.type) || isInline(element);
57 | };
58 | return { renderElement, renderLeaf, onKeyDown };
59 | };
60 |
61 | const KeyBindings = {
62 | onKeyDown: (editor: any, event: any) => {
63 | if (isHotkey("mod+b", event)) {
64 | toggleStyle(editor, "bold");
65 | return;
66 | }
67 | if (isHotkey("mod+i", event)) {
68 | toggleStyle(editor, "italic");
69 | return;
70 | }
71 | if (isHotkey("mod+`", event)) {
72 | toggleStyle(editor, "code");
73 | return;
74 | }
75 | if (isHotkey("mod+u", event)) {
76 | toggleStyle(editor, "underline");
77 | return;
78 | }
79 | if (isHotkey("mod+h", event)) {
80 | toggleStyle(editor, "highlighted");
81 | return;
82 | }
83 | },
84 | };
85 |
86 | const useSelection = (editor: SlateEditor) => {
87 | const [selection, setSelection] = useState(editor.selection);
88 | const setSelectionOptimized = useCallback(
89 | (newSelection) => {
90 | // don't update the component state if selection hasn't changed.
91 | if (areEqual(selection, newSelection)) {
92 | return;
93 | }
94 | setSelection(newSelection);
95 | },
96 | [setSelection, selection]
97 | );
98 |
99 | return [selection, setSelectionOptimized];
100 | };
101 |
102 | export const Editor: React.FC{children}
195 |28 | We{"'"}ve sent an email with a link to change your 29 | password! 30 |
31 | )} 32 |
28 | Dino is a new way to jot down your thoughts
29 | and all the stuff that you want to access easily and
30 | quickly. Cos
31 | {"'"} not everything is about productivity
32 |
47 | 
56 |
60 | Unlike other tools, Dino has a zero
61 | learning curve which means you can start using it
62 | without any confusion
63 |
72 | 
81 |
85 | Dino user interface is clean, minimal and
86 | organised so you only get to see your docs when you want
87 | to
88 |
*/}
96 | 
101 |
22 | Dino is a new way to jot down your thoughts
23 | and all the stuff that you want to access easily and
24 | quickly. Cos
25 | {"'"} not everything is about productivity
26 |
41 |
50 |
54 | Unlike other tools, Dino has a zero
55 | learning curve which means you can start using it
56 | without any confusion
57 |
66 |
75 |
79 | Dino user interface is clean, minimal and
80 | organised so you only get to see your docs when you want
81 | to
82 |
*/}
90 |
95 |