Rakia/Maryam-s-work
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CMS setup, update frontend pages and layouts, and modify json configs

Browse Source
This commit is contained in:
rakia
2025-08-30 13:43:22 +03:00
parent 81b875023b
commit 8997ad9f06
18 changed files with 786 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
next-env.d.ts vendored
View File

@ -1,5 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" />
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

3
next.config.mjs
View File

@ -1,4 +1,5 @@
import { withPayload } from "@payloadcms/next/withPayload";
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = {}; const nextConfig = {};
export default nextConfig; export default withPayload(nextConfig);

13
package.json
View File

@ -9,12 +9,19 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@payloadcms/db-mongodb": "^3.54.0",
"@payloadcms/next": "^3.54.0",
"@payloadcms/payload-cloud": "^3.54.0",
"@payloadcms/richtext-lexical": "^3.54.0",
"bootstrap": "^5.3.3", "bootstrap": "^5.3.3",
"next": "14.1.4", "graphql": "^16.11.0",
"react": "^18", "next": "15.5.2",
"payload": "^3.54.0",
"react": "^18.3.1",
"react-countup": "^6.5.2", "react-countup": "^6.5.2",
"react-dom": "^18", "react-dom": "^18.3.1",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-intersection-observer": "^9.16.0",
"react-modal-video": "^2.0.1", "react-modal-video": "^2.0.1",
"react-scroll-trigger": "^0.6.14", "react-scroll-trigger": "^0.6.14",
"react-skillbars": "^2.2.0", "react-skillbars": "^2.2.0",

2
src/app/(frontend)/[not-found]/page.jsx
View File

@ -1,4 +1,4 @@
import ErrorPage from '@/src/components/pages/error'; import ErrorPage from '@/components/pages/error';
import React from 'react'; import React from 'react';
const NotFound = () => { const NotFound = () => {

0
src/app/(frontend)/page.jsx → src/app/(frontend)/home.jsx
View File

48
src/app/(frontend)/layout.tsx Normal file
View File

@ -0,0 +1,48 @@
// import React from 'react'
// import './styles.css'
// export const metadata = {
// description: 'A blank template using Payload in a Next.js app.',
// title: 'Payload Blank Template',
// }
// export default async function RootLayout(props: { children: React.ReactNode }) {
// const { children } = props
// return (
// <html lang="en">
// <body>
// <main>{children}</main>
// </body>
// </html>
// )
// }
"use client"
import { useEffect } from 'react';
import "./globals.css";
import SwitchTab from '@/components/pages/common/dark-light';
//import SwitchTab from '../../pages/common/dark-light';
//import SwitchTab from '@/src/components/pages/common/dark-light';
//import SwitchTab from '@/src/components/pages/common/dark-light';
export default function RootLayout({ children }) {
useEffect(() => {
require('bootstrap/dist/js/bootstrap.min.js');
}, []);
return (
<html lang="en">
<head>
<link rel='icon' type='image/png' href='../favicon.ico' />
</head>
<body>
<SwitchTab addClass={undefined} />
{children}
</body>
</html>
);
}

0
src/app/(frontend)/layout.jsx → src/app/(frontend)/mslayout.jsx
View File

64
src/app/(frontend)/page.tsx Normal file
View File

@ -0,0 +1,64 @@
import { headers as getHeaders } from 'next/headers.js'
import Image from 'next/image'
import { getPayload } from 'payload'
import React from 'react'
import { fileURLToPath } from 'url'
import config from '@/payload.config'
import './styles.css'
import HomeOne from "@/components/pages/homes/home";
export default async function HomePage() {
const headers = await getHeaders()
const payloadConfig = await config
const payload = await getPayload({ config: payloadConfig })
const { user } = await payload.auth({ headers })
const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
return (
// <div className="home">
// <div className="content">
// <picture>
// <source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
// <Image
// alt="Payload Logo"
// height={65}
// src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
// width={65}
// />
// </picture>
// {!user && <h1>Welcome to your new project.</h1>}
// {user && <h1>Welcome back, {user.email}</h1>}
// <div className="links">
// <a
// className="admin"
// href={payloadConfig.routes.admin}
// rel="noopener noreferrer"
// target="_blank"
// >
// Go to admin panel
// </a>
// <a
// className="docs"
// href="https://payloadcms.com/docs"
// rel="noopener noreferrer"
// target="_blank"
// >
// Documentation
// </a>
// </div>
// </div>
// <div className="footer">
// <p>Update this page by editing</p>
// <a className="codeLink" href={fileURL}>
// <code>app/(frontend)/page.tsx</code>
// </a>
// </div>
// </div>
<>
<HomeOne />
</>
)
}

164
src/app/(frontend)/styles.css Normal file
View File

@ -0,0 +1,164 @@
:root {
--font-mono: 'Roboto Mono', monospace;
}
* {
box-sizing: border-box;
}
html {
font-size: 18px;
line-height: 32px;
background: rgb(0, 0, 0);
-webkit-font-smoothing: antialiased;
}
html,
body,
#app {
height: 100%;
}
body {
font-family: system-ui;
font-size: 18px;
line-height: 32px;
margin: 0;
color: rgb(1000, 1000, 1000);
@media (max-width: 1024px) {
font-size: 15px;
line-height: 24px;
}
}
img {
max-width: 100%;
height: auto;
display: block;
}
h1 {
margin: 40px 0;
font-size: 64px;
line-height: 70px;
font-weight: bold;
@media (max-width: 1024px) {
margin: 24px 0;
font-size: 42px;
line-height: 42px;
}
@media (max-width: 768px) {
font-size: 38px;
line-height: 38px;
}
@media (max-width: 400px) {
font-size: 32px;
line-height: 32px;
}
}
p {
margin: 24px 0;
@media (max-width: 1024px) {
margin: calc(var(--base) * 0.75) 0;
}
}
a {
color: currentColor;
&:focus {
opacity: 0.8;
outline: none;
}
&:active {
opacity: 0.7;
outline: none;
}
}
svg {
vertical-align: middle;
}
.home {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
padding: 45px;
max-width: 1024px;
margin: 0 auto;
overflow: hidden;
@media (max-width: 400px) {
padding: 24px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
h1 {
text-align: center;
}
}
.links {
display: flex;
align-items: center;
gap: 12px;
a {
text-decoration: none;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.admin {
color: rgb(0, 0, 0);
background: rgb(1000, 1000, 1000);
border: 1px solid rgb(0, 0, 0);
}
.docs {
color: rgb(1000, 1000, 1000);
background: rgb(0, 0, 0);
border: 1px solid rgb(1000, 1000, 1000);
}
}
.footer {
display: flex;
align-items: center;
gap: 8px;
@media (max-width: 1024px) {
flex-direction: column;
gap: 6px;
}
p {
margin: 0;
}
.codeLink {
text-decoration: none;
padding: 0 0.5rem;
background: rgb(60, 60, 60);
border-radius: 4px;
}
}
}

12
src/app/my-route/route.ts Normal file
View File

@ -0,0 +1,12 @@
import configPromise from '@payload-config'
import { getPayload } from 'payload'
export const GET = async (request: Request) => {
const payload = await getPayload({
config: configPromise,
})
return Response.json({
message: 'This is an example of a custom route.',
})
}

16
src/collections/Media.ts Normal file
View File

@ -0,0 +1,16 @@
import type { CollectionConfig } from 'payload'
export const Media: CollectionConfig = {
slug: 'media',
access: {
read: () => true,
},
fields: [
{
name: 'alt',
type: 'text',
required: true,
},
],
upload: true,
}

13
src/collections/Users.ts Normal file
View File

@ -0,0 +1,13 @@
import type { CollectionConfig } from 'payload'
export const Users: CollectionConfig = {
slug: 'users',
admin: {
useAsTitle: 'email',
},
auth: true,
fields: [
// Email added by default
// Add more fields as needed
],
}

41
src/components/pages/common/breadcrumb.jsx
View File

@ -1,17 +1,48 @@
import Link from 'next/link'; // import Link from 'next/link';
import breadCrumbBg from "../../../public/assets/img/pages/page-banner.jpg"; // import breadCrumbBg from "../../../public/assets/img/pages/page-banner.jpg";
const BreadCrumb = ({title, innerTitle}) => { // const BreadCrumb = ({title, innerTitle}) => {
// const firstThreeWords = title?.split(' ').slice(0, 1);
// return (
// <div className="page__banner" style={{backgroundImage: `url(${breadCrumbBg.src})`}}>
// <div className="container">
// <div className="row">
// <div className="col-xl-12">
// <div className="page__banner-content">
// <span>{firstThreeWords}</span>
// <ul>
// <li><Link href="/">Home</Link><span>|</span></li>
// <li>{innerTitle}</li>
// </ul>
// <h1>{title}</h1>
// </div>
// </div>
// </div>
// </div>
// </div>
// );
// };
// export default BreadCrumb;
const BreadCrumb = ({ title, innerTitle }) => {
const firstThreeWords = title?.split(' ').slice(0, 1); const firstThreeWords = title?.split(' ').slice(0, 1);
return ( return (
<div className="page__banner" style={{backgroundImage: `url(${breadCrumbBg.src})`}}> <div
className="page__banner"
style={{ backgroundImage: `url("/assets/img/pages/page-banner.jpg")` }}
>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col-xl-12"> <div className="col-xl-12">
<div className="page__banner-content"> <div className="page__banner-content">
<span>{firstThreeWords}</span> <span>{firstThreeWords}</span>
<ul> <ul>
<li><Link href="/">Home</Link><span>|</span></li> <li>
<Link href="/">Home</Link>
<span>|</span>
</li>
<li>{innerTitle}</li> <li>{innerTitle}</li>
</ul> </ul>
<h1>{title}</h1> <h1>{title}</h1>

62
src/components/pages/common/skill-bar.jsx
View File

@ -1,24 +1,56 @@
import { useState } from "react"; // import { useState } from "react";
import CountUp from 'react-countup'; // import CountUp from 'react-countup';
import ScrollTrigger from "react-scroll-trigger"; // import ScrollTrigger from "react-scroll-trigger";
import ReactSkillBar from 'react-skillbars'; // import ReactSkillBar from 'react-skillbars';
const SkillBarItem = ({countUp}) => { // const SkillBarItem = ({countUp}) => {
// const [skillBar, setSkillBar] = useState(false);
// const skillLevel = [
// { type: 'one', level: countUp }
// ];
// return (
// <>
// <ScrollTrigger onEnter={()=> setSkillBar(true)} onExit={()=> setSkillBar(false)}>
// <div className="skill__area-item-inner">
// {skillBar && <ReactSkillBar skills={skillLevel} height={10} animationDuration={2000} />}
// <span className="skill__area-item-count text-two">
// <span className="counter text-two">{skillBar && <CountUp start={0} end={countUp} duration={4} delay={1}></CountUp>}</span>%
// </span>
// </div>
// </ScrollTrigger>
// </>
// );
// };
// export default SkillBarItem;
import { useState, useEffect } from "react";
import CountUp from "react-countup";
import { useInView } from "react-intersection-observer";
import ReactSkillBar from "react-skillbars";
const SkillBarItem = ({ countUp }) => {
const [skillBar, setSkillBar] = useState(false); const [skillBar, setSkillBar] = useState(false);
const skillLevel = [ const { ref, inView } = useInView({ triggerOnce: true });
{ type: 'one', level: countUp } const skillLevel = [{ type: "one", level: countUp }];
];
useEffect(() => {
if (inView) setSkillBar(true);
}, [inView]);
return ( return (
<> <div ref={ref} className="skill__area-item-inner">
<ScrollTrigger onEnter={()=> setSkillBar(true)} onExit={()=> setSkillBar(false)}> {skillBar && (
<div className="skill__area-item-inner"> <ReactSkillBar skills={skillLevel} height={10} animationDuration={2000} />
{skillBar && <ReactSkillBar skills={skillLevel} height={10} animationDuration={2000} />} )}
<span className="skill__area-item-count text-two"> <span className="skill__area-item-count text-two">
<span className="counter text-two">{skillBar && <CountUp start={0} end={countUp} duration={4} delay={1}></CountUp>}</span>% <span className="counter text-two">
{skillBar && <CountUp start={0} end={countUp} duration={4} delay={1} />}
</span>
%
</span> </span>
</div> </div>
</ScrollTrigger>
</>
); );
}; };

6
src/components/pages/error/index.jsx
View File

@ -1,9 +1,9 @@
"use client"; "use client";
import SEO from '@/src/components/data/seo'; import SEO from '@/components/data/seo';
import HeaderThree from '@/src/components/layout/header/header-three'; import HeaderThree from '@/components/layout/header/header-three';
import BreadCrumb from '../common/breadcrumb'; import BreadCrumb from '../common/breadcrumb';
import Error from './error'; import Error from './error';
import FooterThree from '@/src/components/layout/footer/footer-three'; import FooterThree from '@/components/layout/footer/footer-three';
import ScrollToTop from '../common/scroll/scroll-to-top'; import ScrollToTop from '../common/scroll/scroll-to-top';
const ErrorPage = () => { const ErrorPage = () => {

299
src/payload-types.ts Normal file
View File

@ -0,0 +1,299 @@
/* tslint:disable */
/* eslint-disable */
/**
* This file was automatically generated by Payload.
* DO NOT MODIFY IT BY HAND. Instead, modify your source Payload config,
* and re-run `payload generate:types` to regenerate this file.
*/
/**
* Supported timezones in IANA format.
*
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "supportedTimezones".
*/
export type SupportedTimezones =
| 'Pacific/Midway'
| 'Pacific/Niue'
| 'Pacific/Honolulu'
| 'Pacific/Rarotonga'
| 'America/Anchorage'
| 'Pacific/Gambier'
| 'America/Los_Angeles'
| 'America/Tijuana'
| 'America/Denver'
| 'America/Phoenix'
| 'America/Chicago'
| 'America/Guatemala'
| 'America/New_York'
| 'America/Bogota'
| 'America/Caracas'
| 'America/Santiago'
| 'America/Buenos_Aires'
| 'America/Sao_Paulo'
| 'Atlantic/South_Georgia'
| 'Atlantic/Azores'
| 'Atlantic/Cape_Verde'
| 'Europe/London'
| 'Europe/Berlin'
| 'Africa/Lagos'
| 'Europe/Athens'
| 'Africa/Cairo'
| 'Europe/Moscow'
| 'Asia/Riyadh'
| 'Asia/Dubai'
| 'Asia/Baku'
| 'Asia/Karachi'
| 'Asia/Tashkent'
| 'Asia/Calcutta'
| 'Asia/Dhaka'
| 'Asia/Almaty'
| 'Asia/Jakarta'
| 'Asia/Bangkok'
| 'Asia/Shanghai'
| 'Asia/Singapore'
| 'Asia/Tokyo'
| 'Asia/Seoul'
| 'Australia/Brisbane'
| 'Australia/Sydney'
| 'Pacific/Guam'
| 'Pacific/Noumea'
| 'Pacific/Auckland'
| 'Pacific/Fiji';
export interface Config {
auth: {
users: UserAuthOperations;
};
blocks: {};
collections: {
users: User;
media: Media;
'payload-locked-documents': PayloadLockedDocument;
'payload-preferences': PayloadPreference;
'payload-migrations': PayloadMigration;
};
collectionsJoins: {};
collectionsSelect: {
users: UsersSelect<false> | UsersSelect<true>;
media: MediaSelect<false> | MediaSelect<true>;
'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
};
db: {
defaultIDType: string;
};
globals: {};
globalsSelect: {};
locale: null;
user: User & {
collection: 'users';
};
jobs: {
tasks: unknown;
workflows: unknown;
};
}
export interface UserAuthOperations {
forgotPassword: {
email: string;
password: string;
};
login: {
email: string;
password: string;
};
registerFirstUser: {
email: string;
password: string;
};
unlock: {
email: string;
password: string;
};
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users".
*/
export interface User {
id: string;
updatedAt: string;
createdAt: string;
email: string;
resetPasswordToken?: string | null;
resetPasswordExpiration?: string | null;
salt?: string | null;
hash?: string | null;
loginAttempts?: number | null;
lockUntil?: string | null;
sessions?:
| {
id: string;
createdAt?: string | null;
expiresAt: string;
}[]
| null;
password?: string | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "media".
*/
export interface Media {
id: string;
alt: string;
updatedAt: string;
createdAt: string;
url?: string | null;
thumbnailURL?: string | null;
filename?: string | null;
mimeType?: string | null;
filesize?: number | null;
width?: number | null;
height?: number | null;
focalX?: number | null;
focalY?: number | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-locked-documents".
*/
export interface PayloadLockedDocument {
id: string;
document?:
| ({
relationTo: 'users';
value: string | User;
} | null)
| ({
relationTo: 'media';
value: string | Media;
} | null);
globalSlug?: string | null;
user: {
relationTo: 'users';
value: string | User;
};
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-preferences".
*/
export interface PayloadPreference {
id: string;
user: {
relationTo: 'users';
value: string | User;
};
key?: string | null;
value?:
| {
[k: string]: unknown;
}
| unknown[]
| string
| number
| boolean
| null;
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-migrations".
*/
export interface PayloadMigration {
id: string;
name?: string | null;
batch?: number | null;
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users_select".
*/
export interface UsersSelect<T extends boolean = true> {
updatedAt?: T;
createdAt?: T;
email?: T;
resetPasswordToken?: T;
resetPasswordExpiration?: T;
salt?: T;
hash?: T;
loginAttempts?: T;
lockUntil?: T;
sessions?:
| T
| {
id?: T;
createdAt?: T;
expiresAt?: T;
};
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "media_select".
*/
export interface MediaSelect<T extends boolean = true> {
alt?: T;
updatedAt?: T;
createdAt?: T;
url?: T;
thumbnailURL?: T;
filename?: T;
mimeType?: T;
filesize?: T;
width?: T;
height?: T;
focalX?: T;
focalY?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-locked-documents_select".
*/
export interface PayloadLockedDocumentsSelect<T extends boolean = true> {
document?: T;
globalSlug?: T;
user?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-preferences_select".
*/
export interface PayloadPreferencesSelect<T extends boolean = true> {
user?: T;
key?: T;
value?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-migrations_select".
*/
export interface PayloadMigrationsSelect<T extends boolean = true> {
name?: T;
batch?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "auth".
*/
export interface Auth {
[k: string]: unknown;
}
declare module 'payload' {
export interface GeneratedTypes extends Config {}
}

37
src/payload.config.ts Normal file
View File

@ -0,0 +1,37 @@
// storage-adapter-import-placeholder
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import path from 'path'
import { buildConfig } from 'payload'
import { fileURLToPath } from 'url'
import sharp from 'sharp'
import { Users } from './collections/Users'
import { Media } from './collections/Media'
const filename = fileURLToPath(import.meta.url)
const dirname = path.dirname(filename)
export default buildConfig({
admin: {
user: Users.slug,
importMap: {
baseDir: path.resolve(dirname),
},
},
collections: [Users, Media],
editor: lexicalEditor(),
secret: process.env.PAYLOAD_SECRET || '',
typescript: {
outputFile: path.resolve(dirname, 'payload-types.ts'),
},
db: mongooseAdapter({
url: process.env.DATABASE_URI || '',
}),
sharp,
plugins: [
payloadCloudPlugin(),
// storage-adapter-placeholder
],
})

13
tsconfig.json
View File

@ -32,13 +32,16 @@
// "node_modules" // "node_modules"
// ] // ]
// } // }
{ {
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["src/*"] "@/*": [
"src/*"
],
"@payload-config": [
"./src/payload.config.ts"
]
}, },
"lib": [ "lib": [
"dom", "dom",
@ -60,7 +63,8 @@
{ {
"name": "next" "name": "next"
} }
] ],
"target": "ES2017"
}, },
"include": [ "include": [
"next-env.d.ts", "next-env.d.ts",
@ -72,4 +76,3 @@
"node_modules" "node_modules"
] ]
} }