Portal Index Page
10 | 11 | ); 12 | }; 13 | 14 | export default PortalIndexPage; 15 | -------------------------------------------------------------------------------- /tailwind-workspace-preset.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: {}, 4 | }, 5 | variants: { 6 | extend: {}, 7 | }, 8 | plugins: [ 9 | require('@tailwindcss/typography'), 10 | require('@tailwindcss/forms'), 11 | require('@tailwindcss/line-clamp'), 12 | require('@tailwindcss/aspect-ratio'), 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /apps/bloggo/pages/forgot-password.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Metatags } from '@bloggo/ui'; 4 | 5 | const ForgotPasswordPage: React.FC = () => { 6 | return ( 7 | <> 8 |Forgot Password Page
10 |
11 | );
12 | };
13 |
14 | export default ForgotPasswordPage;
15 |
--------------------------------------------------------------------------------
/apps/bloggo/.env.example:
--------------------------------------------------------------------------------
1 | # FIREBASE
2 | FIREBASE_API_KEY=AIzaSyDNotinqdiNETddK4e_MA_rNsz1gkYKChw
3 | FIREBASE_AUTH_DOMAIN=bloggo-9fc7d.firebaseapp.com
4 | FIREBASE_PROJECT_ID=bloggo-9fc7d
5 | FIREBASE_STORAGE_BUCKET=bloggo-9fc7d.appspot.com
6 | FIREBASE_MESSAGING_SENDER_ID=424368452854
7 | FIREBASE_APP_ID=1:424368452854:web:361dd4c39219757306e8d7
8 | FIREBASE_MEASUREMENT_ID=G-D2F125TYVK
--------------------------------------------------------------------------------
/libs/redux/src/lib/user/types.ts:
--------------------------------------------------------------------------------
1 | export interface IUserState {
2 | user?: Partial
19 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/libs/ui/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../../dist/out-tsc",
5 | "types": ["node"]
6 | },
7 | "files": [
8 | "../../node_modules/@nx/react/typings/cssmodule.d.ts",
9 | "../../node_modules/@nx/react/typings/image.d.ts"
10 | ],
11 | "exclude": [
12 | "**/*.spec.ts",
13 | "**/*.test.ts",
14 | "**/*.spec.tsx",
15 | "**/*.test.tsx",
16 | "**/*.spec.js",
17 | "**/*.test.js",
18 | "**/*.spec.jsx",
19 | "**/*.test.jsx",
20 | "jest.config.ts"
21 | ],
22 | "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
23 | }
24 |
--------------------------------------------------------------------------------
/apps/bloggo/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "plugin:@nx/react-typescript",
4 | "../../.eslintrc.json",
5 | "next",
6 | "next/core-web-vitals"
7 | ],
8 | "ignorePatterns": ["!**/*"],
9 | "overrides": [
10 | {
11 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
12 | "rules": {
13 | "@next/next/no-html-link-for-pages": ["error", "apps/bloggo/pages"]
14 | }
15 | },
16 | {
17 | "files": ["*.ts", "*.tsx"],
18 | "rules": {}
19 | },
20 | {
21 | "files": ["*.js", "*.jsx"],
22 | "rules": {}
23 | }
24 | ],
25 | "env": {
26 | "jest": true
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/libs/redux/src/lib/firebase/helpers.ts:
--------------------------------------------------------------------------------
1 | import { DocumentSnapshot, Timestamp } from 'firebase/firestore';
2 |
3 | /**`
4 | * Converts a firestore document to JSON
5 | * @param {DocumentSnapshot} doc
6 | */
7 | export const docToJSON = (doc: DocumentSnapshot) => {
8 | const data = doc.data();
9 | if (data) {
10 | return {
11 | ...data,
12 | // TIMESTAMP is not JSON serializable. Must be converted to milliseconds
13 | createdAt: data.createdAt.toMillis(),
14 | updatedAt: data.updatedAt.toMillis(),
15 | };
16 | } else {
17 | return null;
18 | }
19 | };
20 |
21 | export const fromMillis = Timestamp.fromMillis;
22 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "rootDir": ".",
5 | "sourceMap": true,
6 | "declaration": false,
7 | "moduleResolution": "node",
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "importHelpers": true,
11 | "target": "es2015",
12 | "module": "esnext",
13 | "lib": ["es2017", "dom"],
14 | "skipLibCheck": true,
15 | "skipDefaultLibCheck": true,
16 | "baseUrl": ".",
17 | "paths": {
18 | "@bloggo/redux": ["libs/redux/src/index.ts"],
19 | "@bloggo/ui": ["libs/ui/src/index.ts"]
20 | }
21 | },
22 | "exclude": ["node_modules", "tmp"]
23 | }
24 |
--------------------------------------------------------------------------------
/libs/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "jsx": "react-jsx",
5 | "allowJs": true,
6 | "esModuleInterop": true,
7 | "allowSyntheticDefaultImports": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "strict": true,
10 | "noImplicitOverride": true,
11 | "noPropertyAccessFromIndexSignature": true,
12 | "noImplicitReturns": true,
13 | "noFallthroughCasesInSwitch": true
14 | },
15 | "files": [],
16 | "include": [],
17 | "references": [
18 | {
19 | "path": "./tsconfig.lib.json"
20 | },
21 | {
22 | "path": "./tsconfig.spec.json"
23 | }
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/apps/bloggo-e2e/src/support/index.ts:
--------------------------------------------------------------------------------
1 | // ***********************************************************
2 | // This example support/index.js is processed and
3 | // loaded automatically before your test files.
4 | //
5 | // This is a great place to put global configuration and
6 | // behavior that modifies Cypress.
7 | //
8 | // You can change the location of this file or turn off
9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 |
16 | // Import commands.js using ES2015 syntax:
17 | import './commands';
18 |
--------------------------------------------------------------------------------
/libs/ui/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ui",
3 | "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 | "sourceRoot": "libs/ui/src",
5 | "projectType": "library",
6 | "tags": [],
7 | "targets": {
8 | "lint": {
9 | "executor": "@nx/linter:eslint",
10 | "outputs": ["{options.outputFile}"],
11 | "options": {
12 | "lintFilePatterns": ["libs/ui/**/*.{ts,tsx,js,jsx}"]
13 | }
14 | },
15 | "test": {
16 | "executor": "@nx/jest:jest",
17 | "outputs": ["{workspaceRoot}/coverage/libs/ui"],
18 | "options": {
19 | "jestConfig": "libs/ui/jest.config.ts",
20 | "passWithNoTests": true
21 | }
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/libs/redux/project.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "redux",
3 | "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 | "sourceRoot": "libs/redux/src",
5 | "projectType": "library",
6 | "targets": {
7 | "lint": {
8 | "executor": "@nx/linter:eslint",
9 | "outputs": ["{options.outputFile}"],
10 | "options": {
11 | "lintFilePatterns": ["libs/redux/**/*.ts"]
12 | }
13 | },
14 | "test": {
15 | "executor": "@nx/jest:jest",
16 | "outputs": ["{workspaceRoot}/coverage/libs/redux"],
17 | "options": {
18 | "jestConfig": "libs/redux/jest.config.ts",
19 | "passWithNoTests": true
20 | }
21 | }
22 | },
23 | "tags": []
24 | }
25 |
--------------------------------------------------------------------------------
/jest.preset.js:
--------------------------------------------------------------------------------
1 | const nxPreset = require('@nx/jest/preset').default;
2 |
3 | module.exports = {
4 | ...nxPreset,
5 | /* TODO: Update to latest Jest snapshotFormat
6 | * By default Nx has kept the older style of Jest Snapshot formats
7 | * to prevent breaking of any existing tests with snapshots.
8 | * It's recommend you update to the latest format.
9 | * You can do this by removing snapshotFormat property
10 | * and running tests with --update-snapshot flag.
11 | * Example: "nx affected --targets=test --update-snapshot"
12 | * More info: https://jestjs.io/docs/upgrading-to-jest29#snapshot-format
13 | */
14 | snapshotFormat: { escapeString: true, printBasicPrototype: true },
15 | };
16 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/auth-check.component.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/jsx-no-useless-fragment */
2 | import { ReactNode } from 'react';
3 |
4 | import { AppState, useAppSelector } from '@bloggo/redux';
5 |
6 | import { Link } from './link.component';
7 |
8 | type AppCheckProps = {
9 | // managed by Next
10 | fallback?: ReactNode;
11 | children: ReactNode;
12 | };
13 |
14 | export const AuthCheck = ({ children, fallback }: AppCheckProps) => {
15 | const { user } = useAppSelector((state: AppState) => state.user);
16 | return user ? (
17 | <>{children}
18 | ) : (
19 | <>{fallback} || (
20 | Must be authenticated to access resource.
21 | )
22 | );
23 | };
24 |
--------------------------------------------------------------------------------
/libs/redux/src/lib/user/index.ts:
--------------------------------------------------------------------------------
1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit';
2 |
3 | import type { IUser, IUserState } from './types';
4 |
5 | const initialState: IUserState = {
6 | user: undefined,
7 | username: undefined,
8 | };
9 |
10 | const userSlice = createSlice({
11 | name: '@@user',
12 | initialState,
13 | reducers: {
14 | setUser: (state, action: PayloadAction19 | {emoji && ( 20 | {emoji} 21 | )} 22 | {children || `Heading`} 23 |
24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "firestore": { 3 | "rules": "firestore.rules", 4 | "indexes": "firestore.indexes.json" 5 | }, 6 | "hosting": { 7 | "public": "dist/apps/bloggo", 8 | "ignore": [ 9 | "firebase.json", 10 | "**/.*", 11 | "**/node_modules/**" 12 | ] 13 | }, 14 | "storage": { 15 | "rules": "storage.rules" 16 | }, 17 | "emulators": { 18 | "auth": { 19 | "port": 9099 20 | }, 21 | "functions": { 22 | "port": 5001 23 | }, 24 | "firestore": { 25 | "port": 8080 26 | }, 27 | "hosting": { 28 | "port": 5000 29 | }, 30 | "pubsub": { 31 | "port": 8085 32 | }, 33 | "storage": { 34 | "port": 9199 35 | }, 36 | "ui": { 37 | "enabled": true, 38 | "port": 3000 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /libs/ui/src/lib/post/post-content.component.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactMarkdown from 'react-markdown'; 3 | import remarkGfm from 'remark-gfm'; 4 | 5 | import { Markdown } from '../markdown.component'; 6 | 7 | type PostContentProps = { 8 | content: string; 9 | }; 10 | 11 | // TODO: Add disquis for comments 12 | 13 | export const PostContent: React.FC
16 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/apps/bloggo/pages/portal/[slug].tsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import React, { useState } from 'react';
3 |
4 | import { AppState, useAppSelector } from '@bloggo/redux';
5 | import { AppLayout, AuthCheck, Metatags, PostEdit } from '@bloggo/ui';
6 |
7 | const PortalEditPostPage: React.FC = () => {
8 | const router = useRouter();
9 | const { slug } = router.query;
10 | const { user } = useAppSelector((state: AppState) => state.user);
11 |
12 | return (
13 | <>
14 |
20 |
22 | {/* POST TAGS */}
23 | {/* AUTHOR DATA */}
24 | {/* COMMENT SECTION */}
25 |
12 |
13 |
24 |
25 | 🪔
14 |15 | 404 16 |
17 | 18 | Whoops, the page you requested doesn't exists.{' '} 19 | 20 | 23 |
31 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/section-heading.component.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-empty-function */
2 | import React, { HTMLAttributes, ReactNode } from 'react';
3 |
4 | import NextPrevButtons from './buttons/next-prev-buttons.component';
5 |
6 | export interface SectionHeadingProps
7 | extends HTMLAttributes-
32 | {pages.map(({ path, pageName, emoji }, index) => {
33 | return (
34 |
- 35 | 41 | {emoji} 42 | {pageName} 43 | 44 | 45 | ); 46 | })} 47 |
26 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/buttons/share-post-button-container-component.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import { FiFacebook, FiInstagram, FiLinkedin, FiTwitter } from 'react-icons/fi';
4 |
5 | type SharePostButtonContainerProps = {
6 | className?: string;
7 | itemClass?: string;
8 | };
9 |
10 | export interface ISocialMedia {
11 | id: string;
12 | name: string;
13 | icon: JSX.Element;
14 | href: string;
15 | }
16 |
17 | // these social media links are for the blog page
18 | const socials: ISocialMedia[] = [
19 | { id: 'Facebook', name: 'Facebook', icon:
31 |
40 | {hasNextPrev && !isCenter && (
41 | 32 | {children || `Section Heading`} 33 |
34 | {desc && ( 35 | 36 | {desc} 37 | 38 | )} 39 |
42 |
44 | )}
45 |
33 | {socials.map((item, index) => (
34 |
42 | {item.icon}
43 |
44 | ))}
45 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/forms/form-feedback.component.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import { FiXCircle } from 'react-icons/fi';
4 |
5 | type FormFeedbackProps = {
6 | type: 'warning' | 'info' | 'success' | 'error';
7 | message: string;
8 | };
9 | export const FormFeedback: React.FC
22 |
48 | );
49 | };
50 |
--------------------------------------------------------------------------------
/nx.json:
--------------------------------------------------------------------------------
1 | {
2 | "npmScope": "bloggo",
3 | "affected": {
4 | "defaultBase": "main"
5 | },
6 | "tasksRunnerOptions": {
7 | "default": {
8 | "runner": "nx-cloud",
9 | "options": {
10 | "cacheableOperations": ["build", "lint", "test", "e2e"],
11 | "accessToken": "ZTNiM2IzYzctNzhlMS00MTA4LTkwYWMtMGRiYjQ4MGM1NTA3fHJlYWQtd3JpdGU="
12 | }
13 | }
14 | },
15 | "generators": {
16 | "@nx/react": {
17 | "application": {
18 | "babel": true
19 | }
20 | },
21 | "@nx/next": {
22 | "application": {
23 | "style": "scss",
24 | "linter": "eslint"
25 | }
26 | }
27 | },
28 | "defaultProject": "bloggo",
29 | "$schema": "./node_modules/nx/schemas/nx-schema.json",
30 | "targetDefaults": {
31 | "build": {
32 | "dependsOn": ["^build"],
33 | "inputs": ["production", "^production"]
34 | },
35 | "lint": {
36 | "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
37 | },
38 | "e2e": {
39 | "inputs": ["default", "^production"]
40 | },
41 | "test": {
42 | "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"]
43 | }
44 | },
45 | "namedInputs": {
46 | "default": ["{projectRoot}/**/*", "sharedGlobals"],
47 | "sharedGlobals": ["{workspaceRoot}/babel.config.json"],
48 | "production": [
49 | "default",
50 | "!{projectRoot}/.eslintrc.json",
51 | "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
52 | "!{projectRoot}/tsconfig.spec.json",
53 | "!{projectRoot}/jest.config.[jt]s",
54 | "!{projectRoot}/src/test-setup.[jt]s"
55 | ]
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/post/post-preview-card-author.component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Moment from 'react-moment';
3 |
4 | import { IFirestoreUserData } from '@bloggo/redux';
5 |
6 | import { Avatar } from '../avatar.component';
7 | import { Link } from '../link.component';
8 |
9 | type PostPreviewCardAuthorProps = {
10 | className?: string;
11 | author: IFirestoreUserData;
12 | date: number;
13 | hiddenAvatar?: boolean;
14 | size?: 'large' | 'normal';
15 | };
16 |
17 | export const PostPreviewCardAuthor: React.FC
23 |
47 |
24 |
33 |
34 |
35 |
46 | 43 | {message} 44 |
45 |
30 |
34 | {!hiddenAvatar && (
35 | {date}
54 |
55 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/buttons/bookmark-post-button.component.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React, { useState } from 'react';
3 |
4 | type BookmarkPostButtonProps = {
5 | containerClassName?: string;
6 | iconClass?: string;
7 | initBookmarked: boolean;
8 | postId: string;
9 | };
10 | // TODO: redux state
11 | export const BookmarkPostButton: React.FC
62 | {url && (
63 |
72 | );
73 | };
74 |
--------------------------------------------------------------------------------
/apps/bloggo/pages/portal/liked-posts.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { AppLayout, AuthCheck, Metatags, PortalNavbar } from '@bloggo/ui';
4 |
5 | const LikedPostsPage: React.FC = () => {
6 | return (
7 | <>
8 |
19 |
38 |
20 |
37 |
21 |
36 |
22 |
35 |
23 |
24 |
25 |
33 |
34 | | 27 | Post 28 | | 29 |
|---|
29 | {!onlyNext && (
30 |
40 | )}
41 | {!onlyPrev && (
42 |
50 | )}
51 |
52 | );
53 | };
54 |
55 | export default NextPrevButtons;
56 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/footer.component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Logo } from './logo.component';
4 | import { SocialMediaLinks } from './social-media-links.component';
5 |
6 | const footerNavigationOptions = [
7 | {
8 | id: '1',
9 | title: 'Explore',
10 | menus: [
11 | { href: '/login', label: 'Login' },
12 | { href: '/register', label: 'Register' },
13 | { href: '/forgot-password', label: 'Forgot Password' },
14 | ],
15 | },
16 | ];
17 |
18 | export const Footer: React.FC = () => {
19 | return (
20 |
21 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/post/post-preview-card-action-buttons.component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { AppState, useAppSelector } from '@bloggo/redux';
4 |
5 | import { BookmarkPostButton, LikePostButton } from '../buttons';
6 | import { CommentOnPostButton } from '../buttons/comment-on-post-button.component';
7 |
8 | type PostPreviewCardActionButtonsProps = {
9 | className?: string;
10 | itemClass?: string;
11 | likes: number;
12 | postId: string;
13 | href: string;
14 | isBookmarked: boolean;
15 | commentCount: number;
16 | hiddenCommentOnMobile?: boolean;
17 | onClickLike?: (id: string) => void;
18 | classBgIcon?: string;
19 | };
20 | export const PostPreviewCardActionButtons: React.FC<
21 | PostPreviewCardActionButtonsProps
22 | > = ({
23 | className = '',
24 | itemClass = 'px-3 h-8 text-xs',
25 | hiddenCommentOnMobile = true,
26 | isBookmarked,
27 | likes,
28 | postId,
29 | href,
30 | commentCount,
31 | classBgIcon,
32 | // eslint-disable-next-line @typescript-eslint/no-empty-function
33 | onClickLike = () => {},
34 | }) => {
35 | const { user } = useAppSelector((state: AppState) => state.user);
36 | return (
37 | <>
38 |
22 |
51 |
23 |
30 | {footerNavigationOptions.map((menu, index) => (
31 |
24 |
26 |
27 |
29 |
32 |
49 | ))}
50 | 33 | {menu.title} 34 |
35 |-
36 | {menu.menus.map((item, index) => (
37 |
- 38 | 43 | {item.label} 44 | 45 | 46 | ))} 47 |
39 | {user?.uid && (
40 |
54 |
57 | 6 min read
58 | {/* TODO: fix postId to have the slug */}
59 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/navbar/navigation.component.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable jsx-a11y/anchor-is-valid */
2 | import { nanoid } from '@reduxjs/toolkit';
3 | import { entries, groupBy, map } from 'lodash';
4 | import React, { Fragment } from 'react';
5 |
6 | import { AppState, useAppSelector } from '@bloggo/redux';
7 |
8 | import { INavEntry, NavigationEntry } from './navigation-entry.component';
9 |
10 | const generateUUID = () => `nc_${nanoid()}`;
11 |
12 | const dashboardNavigationMenus: INavEntry[] = [
13 | {
14 | id: generateUUID(),
15 | href: '/portal/posts',
16 | name: 'Posts',
17 | },
18 | {
19 | id: generateUUID(),
20 | href: '/portal/liked-posts',
21 | name: 'Liked Posts',
22 | },
23 | {
24 | id: generateUUID(),
25 | href: '/portal/edit-profile',
26 | name: 'Profile',
27 | },
28 | ];
29 |
30 | export const navigationOptions: INavEntry[] = [
31 | // hidden menu options until authentication is completed
32 | {
33 | id: generateUUID(),
34 | href: '/dashboard',
35 | name: 'Dashboard',
36 | type: 'dropdown',
37 | children: dashboardNavigationMenus,
38 | restriction: 'private',
39 | },
40 | {
41 | id: generateUUID(),
42 | href: 'https://github.com/msanvarov/bloggo',
43 | name: 'Github',
44 | restriction: 'public',
45 | },
46 | ];
47 |
48 | export const Navigation: React.FC = () => {
49 | const { user } = useAppSelector((state: AppState) => state.user);
50 | return (
51 | -
52 | {map(
53 | entries(groupBy(navigationOptions, 'restriction')),
54 | ([restriction, navigationEntries], i) => {
55 | if (restriction === 'private' && !user) {
56 | return null;
57 | }
58 | return (
59 |
26 |
39 |
27 |
38 | 29 | {post['title']} 30 |
31 | {post['description'] && ( 32 | 33 | {post['description']} 34 | 35 | )} 36 | 37 |
50 | }
53 | />
54 |
55 |
56 | ) : (
57 | Post couldn't be found...
58 | ); 59 | }; 60 | -------------------------------------------------------------------------------- /libs/ui/src/lib/sliders/newest-authors-slider.component.tsx: -------------------------------------------------------------------------------- 1 | import Glide from '@glidejs/glide'; 2 | import { nanoid } from '@reduxjs/toolkit'; 3 | import React, { useEffect } from 'react'; 4 | 5 | import { IFirestoreUsernameData } from '@bloggo/redux'; 6 | 7 | import NextPrevButtons from '../buttons/next-prev-buttons.component'; 8 | import { AuthorCard } from '../cards/author-card.component'; 9 | import { SectionHeading } from '../section-heading.component'; 10 | 11 | type NewestAuthorsSliderProps = { 12 | className?: string; 13 | heading: string; 14 | subHeading: string; 15 | authors: IFirestoreUsernameData[]; 16 | }; 17 | 18 | export const NewestAuthorsSlider: React.FC
57 |
76 | );
77 | };
78 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/buttons/comment-on-post-button.component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Link } from '../link.component';
4 |
5 | type CommentOnPostButton = {
6 | className?: string;
7 | href: string;
8 | commentCount?: number;
9 | };
10 | export const CommentOnPostButton: React.FC
58 |
59 | {heading}
60 |
61 |
75 |
62 |
70 | -
63 | {authors.map((item, index) => (
64 |
-
65 |
66 |
67 | ))}
68 |
38 |
43 |
77 | );
78 | };
79 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/badge/badge.component.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | import { Link } from '../link.component';
5 |
6 | export type BadgeColor =
7 | | 'pink'
8 | | 'green'
9 | | 'yellow'
10 | | 'red'
11 | | 'indigo'
12 | | 'blue'
13 | | 'purple'
14 | | 'gray';
15 |
16 | type BadgeProps = {
17 | className?: string;
18 | name: React.ReactNode;
19 | color?: BadgeColor;
20 | href?: string;
21 | };
22 |
23 | export const Badge: React.FC
55 |
76 |
56 |
61 | {author.username}
62 |
63 |
64 |
65 |
66 |
67 | {typeof date === 'object' ? date.seconds : date}
68 |
69 |
70 | ·
71 |
72 | {readingTime} min read
73 |
74 |
75 |
31 |
57 |
32 |
56 |
33 |
55 |
34 |
54 |
35 |
36 |
37 |
52 |
53 | | 39 | Post 40 | | 41 |42 | Status 43 | | 44 | 45 |46 | Edit 47 | | 48 |
|---|
34 |
85 | );
86 | };
87 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/navbar/navbar.component.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import { useRouter } from 'next/router';
3 | import { FiPenTool, FiSettings } from 'react-icons/fi';
4 |
5 | import { AppState, logout, useAppSelector } from '@bloggo/redux';
6 |
7 | import { Button } from '../buttons';
8 | import { DarkModeToggleContainer } from '../dark-mode-toggle';
9 | import { Logo } from '../logo.component';
10 | import { MenuBar } from '../menu-bar.component';
11 | import { SearchDropdown } from '../search-dropdown.component';
12 | import { NavbarActionButton } from './navbar-action-button.component';
13 | import './navbar.module.scss';
14 | import { Navigation } from './navigation.component';
15 |
16 | /* eslint-disable-next-line */
17 | export interface NavbarProps {
18 | isTopOfPage: boolean;
19 | }
20 |
21 | export const Navbar: React.FC
37 |
48 |
53 |
54 |
38 |
47 |
55 | {/* badges */}
56 |
58 |
59 |
60 |
61 | {!isAuthorHidden ? (
62 |
84 | 67 | 68 | {post.title} 69 | 70 |
71 |
72 |
83 |
31 |
76 | );
77 | };
78 |
--------------------------------------------------------------------------------
/apps/bloggo/pages/portal/edit-profile.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { AppState, useAppSelector } from '@bloggo/redux';
4 | import {
5 | AppLayout,
6 | AuthCheck,
7 | Button,
8 | Input,
9 | Label,
10 | Metatags,
11 | PortalNavbar,
12 | } from '@bloggo/ui';
13 |
14 | const EditProfilePage: React.FC = () => {
15 | const { username } = useAppSelector((state: AppState) => state.user);
16 | return (
17 | <>
18 |
32 |
75 |
33 |
36 |
37 |
74 |
38 |
70 |
51 |
60 |
61 |
62 | ) : (
63 |
64 |
67 |
68 | )}
69 |
71 |
73 |
31 |
76 |
32 |
74 |
75 |
77 | {/* heading */}
78 |
91 |
79 | {heading}
80 | {subHeading && (
81 |
82 | {subHeading}
83 |
84 | )}
85 |
86 | {/* content */}
87 |
88 | {children}
89 |
90 |
20 |
21 |
33 |
34 |
40 |
41 | {FILTERS.map((item, index) => (
42 |
45 | `${
46 | active
47 | ? 'text-primary-700 dark:text-neutral-200 bg-primary-50 dark:bg-neutral-700'
48 | : ''
49 | } cursor-default select-none relative py-2 pl-10 pr-4`
50 | }
51 | value={item}
52 | >
53 | {({ selected }) => (
54 | <>
55 |
60 | {item.name}
61 |
62 | {selected ? (
63 |
64 |
65 |
66 | ) : null}
67 |
68 | )}
69 |
70 | ))}
71 |
72 |
73 |
74 |
56 |
90 | );
91 | };
92 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bloggo",
3 | "version": "0.1.0",
4 | "license": "MIT",
5 | "author": {
6 | "name": "Sal Anvarov",
7 | "email": "msalanvarov@gmail.com",
8 | "url": "https://www.sal-anvarov.com"
9 | },
10 | "scripts": {
11 | "start": "nx serve",
12 | "build": "nx build",
13 | "test": "nx test"
14 | },
15 | "private": true,
16 | "dependencies": {
17 | "@glidejs/glide": "^3.5.2",
18 | "@headlessui/react": "^1.4.3",
19 | "@nx/node": "16.7.4",
20 | "@reduxjs/toolkit": "1.9.3",
21 | "@tailwindcss/aspect-ratio": "^0.4.0",
22 | "@tailwindcss/forms": "^0.4.0",
23 | "@tailwindcss/line-clamp": "^0.3.1",
24 | "@tailwindcss/typography": "^0.5.0",
25 | "@trivago/prettier-plugin-sort-imports": "^3.1.1",
26 | "@vercel/analytics": "^1.0.2",
27 | "autoprefixer": "10.4.2",
28 | "classnames": "^2.3.1",
29 | "core-js": "^3.6.5",
30 | "draft-js": "^0.11.7",
31 | "draftjs-md-converter": "^1.5.2",
32 | "firebase": "^9.6.3",
33 | "formik": "^2.2.9",
34 | "js-sha256": "^0.9.0",
35 | "lodash": "^4.17.21",
36 | "moment": "^2.29.1",
37 | "moment-timezone": "^0.5.34",
38 | "next": "13.3.0",
39 | "react": "18.2.0",
40 | "react-dom": "18.2.0",
41 | "react-draft-wysiwyg": "^1.14.7",
42 | "react-firebase-hooks": "^4.0.2",
43 | "react-icons": "^4.3.1",
44 | "react-is": "18.0.0",
45 | "react-markdown": "^7.1.2",
46 | "react-moment": "^1.1.1",
47 | "react-redux": "8.0.5",
48 | "react-tabs": "^3.2.3",
49 | "react-tooltip": "^4.2.21",
50 | "redux-persist": "^6.0.0",
51 | "regenerator-runtime": "0.13.7",
52 | "remark-gfm": "^3.0.1",
53 | "tailwindcss": "^3.0.15",
54 | "tslib": "^2.0.0",
55 | "yup": "^0.32.11"
56 | },
57 | "devDependencies": {
58 | "@nrwl/js": "16.7.4",
59 | "@nx/cypress": "16.7.4",
60 | "@nx/eslint-plugin": "16.7.4",
61 | "@nx/jest": "16.7.4",
62 | "@nx/linter": "16.7.4",
63 | "@nx/next": "16.7.4",
64 | "@nx/react": "16.7.4",
65 | "@nx/web": "16.7.4",
66 | "@nx/workspace": "16.7.4",
67 | "@testing-library/react": "14.0.0",
68 | "@types/glidejs__glide": "^3.4.1",
69 | "@types/jest": "29.4.4",
70 | "@types/node": "18.14.2",
71 | "@types/react": "18.2.14",
72 | "@types/react-dom": "18.2.6",
73 | "@types/react-draft-wysiwyg": "^1.13.4",
74 | "@types/react-tabs": "^2.3.4",
75 | "@types/yup": "^0.29.13",
76 | "@typescript-eslint/eslint-plugin": "5.62.0",
77 | "@typescript-eslint/parser": "5.62.0",
78 | "babel-jest": "29.4.3",
79 | "cypress": "^9.1.0",
80 | "eslint": "8.46.0",
81 | "eslint-config-next": "13.1.1",
82 | "eslint-config-prettier": "8.1.0",
83 | "eslint-plugin-cypress": "2.14.0",
84 | "eslint-plugin-import": "2.27.5",
85 | "eslint-plugin-jsx-a11y": "6.7.1",
86 | "eslint-plugin-react": "7.32.2",
87 | "eslint-plugin-react-hooks": "4.6.0",
88 | "jest": "29.4.3",
89 | "jest-environment-jsdom": "28.1.3",
90 | "nx": "16.7.4",
91 | "nx-cloud": "16.3.0",
92 | "postcss": "8.4.21",
93 | "prettier": "2.8.8",
94 | "sass": "1.55.0",
95 | "ts-jest": "29.1.1",
96 | "ts-node": "10.9.1",
97 | "typescript": "5.1.6"
98 | },
99 | "peerDependencies": {
100 | "postcss": "^8.4.5"
101 | }
102 | }
103 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/image/image-container.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { ImgHTMLAttributes, useEffect, useRef, useState } from 'react';
2 |
3 | import { AppState, useAppSelector } from '@bloggo/redux';
4 |
5 | import checkInViewIntersectionObserver from './image-inview-port.util';
6 | import placeholderImageLargeDarkHPng from './placeholders/placeholder-large-dark-h.png';
7 | import placeholderImageLargeDarkPng from './placeholders/placeholder-large-dark.png';
8 | import placeholderImageLargeHPng from './placeholders/placeholder-large-h.png';
9 | import placeholderImageLargePng from './placeholders/placeholder-large.png';
10 |
11 | interface ImageContainerProps extends ImgHTMLAttributes
57 |
67 |
88 |
89 |
68 |
87 |
69 |
86 |
70 |
85 | {getToastIcon(type)}
71 |
72 |
75 | {heading}
73 |{body}
74 |
76 |
83 |
84 |
97 | {__src ? (
98 | 
104 | ) : (
105 |
108 | )}
109 |
110 | );
111 | };
112 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/cards/author-card.component.tsx:
--------------------------------------------------------------------------------
1 | import { random } from 'lodash';
2 | import React from 'react';
3 | import { FiChevronRight } from 'react-icons/fi';
4 | import Moment from 'react-moment';
5 |
6 | import { IFirestoreUsernameData } from '@bloggo/redux';
7 |
8 | import { Avatar } from '../avatar.component';
9 | import { ImageContainer } from '../image';
10 | import { Link } from '../link.component';
11 |
12 | interface AuthorCardProps {
13 | className?: string;
14 | author: IFirestoreUsernameData;
15 | }
16 |
17 | // TODO: remove this
18 | const backgroundImageOptions: string[] = [
19 | 'https://images.pexels.com/photos/912410/pexels-photo-912410.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
20 | 'https://images.pexels.com/photos/7354542/pexels-photo-7354542.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
21 | 'https://images.pexels.com/photos/3651577/pexels-photo-3651577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
22 | 'https://images.pexels.com/photos/4064835/pexels-photo-4064835.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
23 | 'https://images.pexels.com/photos/3330118/pexels-photo-3330118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
24 | 'https://images.pexels.com/photos/4066850/pexels-photo-4066850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
25 | 'https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
26 | 'https://images.pexels.com/photos/7175377/pexels-photo-7175377.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
27 | 'https://images.pexels.com/photos/7663205/pexels-photo-7663205.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
28 | 'https://images.pexels.com/photos/973505/pexels-photo-973505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
29 | ];
30 |
31 | export const AuthorCard: React.FC
47 |
59 |
60 |
48 |
53 |
54 |
58 |
55 | 1 post
57 |
61 |
79 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/portal/user-posts-list.component.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | DocumentData,
3 | QueryDocumentSnapshot,
4 | collection,
5 | orderBy,
6 | query,
7 | } from 'firebase/firestore';
8 | import React from 'react';
9 | import { useCollection } from 'react-firebase-hooks/firestore';
10 |
11 | import { IFirestorePostData, db } from '@bloggo/redux';
12 |
13 | import { ImageContainer } from '../image';
14 | import { Link } from '../link.component';
15 |
16 | type UserPostsListProps = {
17 | uid?: string;
18 | };
19 |
20 | export const UserPostsList: React.FC
69 | {createdAt}
76 |
77 |
78 | 70 | @{username} 71 |
72 | 75 | Onboarded onError...
;
35 | }
36 | return (
37 |
38 | {posts.docs.length >= 1 ? (
39 | posts.docs.map((post) => {
40 | const postData = post.data() as IFirestorePostData;
41 | return (
42 |
45 |
61 |
50 |
60 | 51 | 56 | {postData.title} 57 | 58 |
59 |No posts to display
95 | )} 96 | 97 | ); 98 | }; 99 | -------------------------------------------------------------------------------- /libs/ui/src/lib/cards/small-post-preview-card.component.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Moment from 'react-moment'; 3 | 4 | import { IFirestorePostData } from '@bloggo/redux'; 5 | 6 | import { Avatar } from '../avatar.component'; 7 | import { BadgeList } from '../badge'; 8 | import { ImageContainer } from '../image'; 9 | import { Link } from '../link.component'; 10 | import { PostPreviewCardActionButtons } from '../post/post-preview-card-action-buttons.component'; 11 | 12 | type SmallPostPreviewCardProps = { 13 | className?: string; 14 | post: IFirestorePostData; 15 | }; 16 | 17 | export const SmallPostPreviewCard: React.FC
25 |
30 |
99 | );
100 | };
101 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/buttons/like-post-button.component.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import { doc, increment, writeBatch } from 'firebase/firestore';
3 | import React, { useState } from 'react';
4 | import { useDocument } from 'react-firebase-hooks/firestore';
5 |
6 | import { AppState, db, useAppSelector } from '@bloggo/redux';
7 |
8 | type LikePostButtonProps = {
9 | className?: string;
10 | likes: number;
11 | uid: string;
12 | postId: string;
13 | };
14 |
15 | const formatLikeNumber = (number: number): string => {
16 | let formattedNumber = '';
17 | if (number < 1000) {
18 | formattedNumber = number.toString();
19 | } else if (number < 1000000) {
20 | formattedNumber = (number / 1000).toFixed(1) + 'K';
21 | }
22 | return formattedNumber;
23 | };
24 |
25 | export const LikePostButton: React.FC
31 |
85 |
86 |
91 |
32 |
73 | 34 | 39 | {post.title} 40 | 41 |
42 | 43 | {post.description} 44 | 45 |
48 |
53 | {post.createdAt}
70 |
71 |
72 |
74 |
84 |
28 |
29 |
104 | );
105 | };
106 |
107 | export default LargePostPreviewCard;
108 |
--------------------------------------------------------------------------------
/libs/ui/src/lib/post/latest-posts-preview.component.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { IFirestorePostData } from '@bloggo/redux';
4 |
5 | import { Button } from '../buttons';
6 | import LargePostPreviewCard from '../cards/large-post-preview-card.component';
7 | import { SmallPostPreviewCard } from '../cards/small-post-preview-card.component';
8 | import { SectionHeading } from '../section-heading.component';
9 |
10 | type LatestPostPreviewProps = {
11 | className?: string;
12 | heading?: string;
13 | // TODO: create data model for categories
14 | categories: string[];
15 | posts: IFirestorePostData[];
16 | onGetMorePostsClick?: () => void;
17 | loading: boolean;
18 | endOfPosts: boolean;
19 | };
20 |
21 | export const LatestPostPreview: React.FC
45 |
103 |
46 |
64 |
69 | 52 | 57 | {post.title} 58 | 59 |
60 | 61 | {post.description} 62 | 63 |
77 | {post.createdAt}
87 |
88 |
89 |
90 |
91 | 80 | @{post.username} 81 |
82 | 85 | 86 |
92 |
102 |
54 | {heading}
55 |
92 | {posts.length < 1 && No posts to be displayed}
93 |
56 |
74 |
75 |
89 |
90 |
91 |
94 | {posts[0] &&
103 |
96 | {posts
97 | .filter((_, i) => i < 4 && i > 0)
98 | .map((item, index) => (
99 |
102 |
89 |
90 |
91 |
92 |
93 |
94 |
99 | {/* background */}
100 |
106 |
112 |
113 |
120 | Bloggo - Medium Clone
2 | 3 |
4 | 
5 |
8 | A full-stack Node.js application built with Next.js, and Firebase made as a clone to Medium. 9 |
10 | 11 |
12 | 
14 |
75 |
111 | {imagePreviewURL && (
112 |
76 |
90 |
110 |
91 |
105 |
107 | or drag and drop
106 |PNG, JPG, GIF up to 2MB
108 | {uploading &&{progress}%
} 109 |
113 |
120 | )}
121 |
122 | );
123 | };
124 |
--------------------------------------------------------------------------------
/apps/bloggo/pages/[username]/[slug].tsx:
--------------------------------------------------------------------------------
1 | import { doc } from 'firebase/firestore';
2 | import { GetStaticPaths, GetStaticProps } from 'next';
3 | import React from 'react';
4 | import { useDocumentData } from 'react-firebase-hooks/firestore';
5 |
6 | import {
7 | AppState,
8 | IFirestorePostData,
9 | db,
10 | getPostBySlugForUser,
11 | getPostPaths,
12 | getUserDataFromUsername,
13 | useAppSelector,
14 | } from '@bloggo/redux';
15 | import {
16 | AppLayout,
17 | BadgeList,
18 | ImageContainer,
19 | Metatags,
20 | PostContent,
21 | PostEntryMetadata,
22 | } from '@bloggo/ui';
23 |
24 | interface UserPostPageProps {
25 | path: string;
26 | post: IFirestorePostData | null;
27 | }
28 |
29 | export const getStaticProps: GetStaticProps
86 |
124 |
87 |
123 | 89 | {post.title} 90 |
91 | {post.description && ( 92 | 93 | {post.description} 94 | 95 | )} 96 | 97 |
98 |
111 |
121 |
122 |
112 | {/* Like and Comment buttons */}
113 |
120 |
114 |
115 |
116 |
117 | {/* Bookmark button */}
118 | {/* Share buttons */}
119 |
132 |
134 | Post not found
137 | )} 138 |
115 |
154 |
155 |
109 |
144 | );
145 | };
146 | return (
147 |
110 |
137 |
111 |
136 |
112 | {/*
122 |
123 | 119 | Placeholder title 120 |
121 |
124 | {/*
135 |
138 |
142 |
143 |
152 |
154 | {showSingleMenu && renderSingleHeader()}
155 |
120 |
160 |
121 |
158 |
159 |