Skip to content

Commit

Permalink
OPTIMIZE:nginx server (#31)
Browse files Browse the repository at this point in the history
* ADD:gzip
FIX:nginx

* ADD:dynamic settings
  • Loading branch information
ismail-kharrobi committed Sep 15, 2023
1 parent 9546ac7 commit 1c460d7
Show file tree
Hide file tree
Showing 15 changed files with 200 additions and 38 deletions.
66 changes: 61 additions & 5 deletions frontend/code/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/code/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-spring/web": "^9.7.3",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const Home : FC = () : JSX.Element =>{
return (
<>

<div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-1">
<div className="flex flex-col items-center h-screen w-full sm:gap-y-8 gap-y-1 bg-accent">
<div className='flex justify-center relative items-start pt-6 h-2/6 max-h-48 sm:max-h-96 w-[90vw] sm:h-3/4 sm:w-[85vw]'>
<img className='w-full h-full object-cover object-top rounded-3xl' alt='leaderboard hero' src={herosvg} />
<Link to={"/Play"}><Button/></Link>
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const Layout : FC<PropsWithChildren> = () : JSX.Element =>
const obj = {x:"30",y:"20"}
return (
<>
<div data-theme="mytheme" className=' h-screen bg-slate-50 '>
<div data-theme="mytheme" className=' h-screen '>

<div className=' flex flex-row w-screen h-[8vh] bg-base-200'>
<div className='flex justify-start items-center z-50 pl-1 sm:pl-2 h-full w-full'>
Expand Down
Binary file modified frontend/code/src/Components/Profile/assets/Hero.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Profile/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const Profile = () =>{

return (
<>
<div className=" flex flex-col items-center h-full min-h-screen">
<div className=" flex flex-col items-center h-full min-h-screen bg-accent">
<div className='relative pt-12 h-auto max-h-[30vh] min-h-[16vh] md:min-h-[28vh] xl:min-h-[33vh] w-[85vw]'>

<div className='relative h-full w-full md:px-32 bg-[#2b3bfb] rounded-t-3xl'><img className='flex-1 w-full h-auto object-scale-down md:object-top object-bottom rounded-t-3xl' src={Hero} alt="bg hero"></img>
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Settings/assets/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const Avatar = (props:any) => {
return (
<div className="avatar">
<div className="w-24 rounded-full">
<div className="w-16 sm:w-24 rounded-full">
<img src={props.picture} alt="avatar" />
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/code/src/Components/Settings/assets/Edit.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const Edit = () => {
return (
<svg className="hover:cursor-pointer hover:fill-primary-content" width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg className="hover:cursor-pointer hover:fill-primary-content h-8 w-8 sm:w-10 sm:h-10" width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="19.7264" cy="19" rx="19.1812" ry="19" fill="#7139CE"/>
<path d="M21.2409 14.5L14.6066 21.0716L14.6066 21.0716C14.3919 21.2842 14.2846 21.3905 14.214 21.5215C14.1433 21.6525 14.1134 21.8005 14.0536 22.0967L13.313 25.7648C13.2459 26.0973 13.2123 26.2636 13.3067 26.3583C13.4012 26.4531 13.5675 26.4202 13.9003 26.3542L17.6214 25.6171C17.9147 25.559 18.0613 25.5299 18.1914 25.4608C18.3215 25.3917 18.4278 25.2865 18.6402 25.0761L18.6402 25.0761L25.279 18.5L21.2409 14.5Z" fill="white"/>
<path d="M21.9348 13.9679L14.652 21.182C14.64 21.1938 14.6281 21.2055 14.6163 21.2173C14.4551 21.3764 14.3002 21.5294 14.1907 21.7214C14.0811 21.9134 14.0281 22.1246 13.973 22.3442C13.9689 22.3604 13.9649 22.3766 13.9607 22.3929L13.2914 25.0452C13.2889 25.0548 13.2865 25.0645 13.284 25.0743C13.245 25.2283 13.201 25.4025 13.1861 25.5507C13.1696 25.7158 13.1704 26.015 13.4112 26.2569L13.8364 25.8336L13.4112 26.2569C13.6519 26.4987 13.9512 26.5008 14.1163 26.4851C14.2646 26.4709 14.439 26.4276 14.5931 26.3893C14.603 26.3869 14.6127 26.3845 14.6223 26.3821L17.3165 25.7149C17.3326 25.7109 17.3487 25.707 17.3647 25.703C17.5826 25.6494 17.792 25.5979 17.9829 25.4906C18.1738 25.3834 18.3268 25.2314 18.486 25.0733C18.4977 25.0617 18.5094 25.05 18.5212 25.0383L25.781 17.8472L25.8081 17.8203C26.1227 17.5088 26.4005 17.2336 26.5943 16.9818C26.8043 16.709 26.9722 16.3938 26.9722 16C26.9722 15.6062 26.8043 15.291 26.5943 15.0182C26.4005 14.7664 26.1227 14.4912 25.8081 14.1797L25.781 14.1528L25.5943 13.9679L25.5675 13.9414C25.2585 13.6352 24.9852 13.3645 24.7355 13.1757C24.4647 12.9708 24.1528 12.8075 23.7646 12.8075C23.3763 12.8075 23.0645 12.9708 22.7936 13.1757C22.5439 13.3645 22.2706 13.6352 21.9616 13.9414L21.9348 13.9679Z" stroke="white" strokeWidth="1.2"/>
Expand Down
79 changes: 79 additions & 0 deletions frontend/code/src/Components/Settings/assets/Inputs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { useSpring, animated } from '@react-spring/web'
import { useState } from 'react'
import { BsFillCheckCircleFill , BsFillXCircleFill } from 'react-icons/bs'
import { Edit } from './Edit';
// import { userContext } from '../../../Context';
import { useForm } from 'react-hook-form';
interface MyComponentProps {
name: string;
data:string;
}

export const Inputs = (props:MyComponentProps) => {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data : any)=> console.log(data);
console.log(errors);
// const {user} :any = useContext(userContext);
// const [myuser, setMyuser] = useState(user);
const [input, setInput] = useState(false)
const [springs ,api] = useSpring(() => ({
from: { x: '0%' , opacity:100},

}))
const handleNameClick = () =>{
if (input === false){
api.start({
to: {
x: springs.x.get() === '20%' ? '0' : '20%',
},

})
setInput(true)
}
else {
api.start({
to: {
x: springs.x.get() === '20%' ? '0' : '20%',
},

})
setInput(false)
}
}
return (
<div className='flex flex-col w-full sm:w-4/6'>
<h6 className='text-sm flex'> {props.name}</h6>
<div className="flex items-center h-16">
<form className='gap-y-2 flex p-2 flex-col' onSubmit={handleSubmit(onSubmit)}>
<div className="flex gap-x-2">
<input type="text" className={`h-12 w-full rounded-3xl text-center`} defaultValue={props.data} placeholder={props.data} {...register(props.name, {required: true, maxLength: 40 , minLength:4 , disabled:!input ? true:false})} />
</div>
</form>

{!input && <animated.div
style={{
...springs,
}}
onClick={handleNameClick}
>
<Edit/>
</animated.div>
}
{
input && <animated.div
style={{
...springs,
}}
onClick={handleNameClick}
>
<div className="flex gap-1 items-center">
<BsFillCheckCircleFill className='fill-green-400 hover:fill-green-700 hover:cursor-pointer h-8 w-8 sm:w-10 sm:h-10' />
<BsFillXCircleFill className='fill-red-600 hover:fill-red-700 hover:cursor-pointer h-8 w-8 sm:w-10 sm:h-10' />
</div>
</animated.div>
}
</div>
</div>

)
}
44 changes: 28 additions & 16 deletions frontend/code/src/Components/Settings/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,39 @@ import { Edit } from './assets/Edit'
import Newbie from '../Badges/Newbie.svg'
import Master from '../Badges/Master.svg'
import Ultimate from '../Badges/Ultimate.svg'
import { api }from '../../Api/base'
import { api as axsios }from '../../Api/base'
import toast from 'react-hot-toast'
import { useContext , useState , useEffect} from 'react'
import { userContext } from '../../Context'

import { Inputs } from './assets/Inputs'
export const Setting = () => {
const getdata :any = async() => {
const data:any = await api.get("/test")
return data
const data:any = await axsios.get("/test")
return data
}

const {user} :any = useContext(userContext);
const [myuser, setMyuser] = useState(user);
const data_names = ["First name","Last name","Email"]
const data_content = [user.name.first,user.name.last, user.email]

useEffect(()=>{
setMyuser(user)
},[myuser, user])


return (

<>

<div className="flex h-[90vh] w-full ">
<div className="flex h-[90vh] w-full font-poppins font-medium">
<h1 className='pt-6 pl-6 font-poppins font-medium text-xl text-neutral'>Profile Settings</h1>
<div className=" h-[82%] w-[90%] flex flex-col absolute bottom-0 right-0 bg-base-200 rounded-tl-2xl">
<h2 className='pt-4 pl-4 text-neutral'>change preview</h2>
<h2 className='pt-4 pl-4 text-neutral '>change preview</h2>
<div className="flex justify-center h-full w-full pt-8">
<div className="flex flex-col sm:flex-row sm:flex-wrap items-center gap-4 justify-between overflow-auto w-[90%] max-h-[20vh] bg-base-100 border-solid border-gray-400 border-2 rounded-3xl">
<div className='flex justify-between items-center gap-x-10 px-2 sm:px-0'>
<div className='relative sm:pl-10 pt-2 sm:pt-0'><Avatar picture={myuser.picture.medium}/>
<div className="flex flex-col sm:flex-row items-center gap-4 sm:justify-between justify-center overflow-scroll no-scrollbar w-[90%] max-h-[25vh] bg-base-100 border-solid border-gray-400 border-2 rounded-3xl">
<div className='flex justify-between items-center gap-x-10 px-2 sm:px-0'>
<div className='relative sm:pl-10 pt-6 sm:pt-0'><Avatar picture={myuser.picture.medium}/>
<div className="absolute bottom-0 right-0">
<Edit/>
</div>
Expand All @@ -52,20 +58,26 @@ export const Setting = () => {
}
);}}>
</div>
<img className={`h-[9vh] sm:h-[14vh] `} src={Newbie} alt="newbie badge" />
<img className={`h-[9vh] sm:h-[14vh] opacity-30`} src={Master} alt="Master badge" />
<img className={`h-[9vh] sm:h-[14vh] `} src={Ultimate} alt="Ultimate badge" />
<img className={`h-[9vh] md:h-[12vh] `} src={Newbie} alt="newbie badge" />
<img className={`h-[9vh] md:h-[12vh] opacity-30`} src={Master} alt="Master badge" />
<img className={`h-[9vh] md:h-[12vh] `} src={Ultimate} alt="Ultimate badge" />
</div>
</div>
</div>

<h2 className='pt-4 pl-4 text-neutral'>change preview</h2>
<div className="flex justify-center h-full w-full pt-8">
<div className="flex flex-col sm:flex-row justify-between w-[90%] h-[50vh] sm:max-h-[50vh] max-h-[40vh] bg-base-100 border-solid border-gray-400 border-2 rounded-3xl">
<div className="flex justify-start items-start pt-4 pl-4">
<h6 className='text-sm'>name</h6>

</div>
<div className='gap-4 p-6 flex-wrap shrink grid grid-cols-2 justify-between w-full h-56'>
{
data_names.map((x, index) => {
return (
<Inputs key={index} name={x} data={data_content[index]} />
)
})

}
</div>
</div>
</div>

Expand Down
1 change: 0 additions & 1 deletion frontend/code/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&family=Montserrat:ital,wght@0,700;1,500&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@layer base {
html {
font-family: Montserrat;
@apply no-scrollbar
}
}
3 changes: 1 addition & 2 deletions frontend/code/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ const root = ReactDOM.createRoot(
);

root.render(
// <React.StrictMode>
<>
<Toaster
position="top-right"
Expand All @@ -23,7 +22,7 @@ root.render(
<AllRouters/>
</UserContextProvider>
</>
// </React.StrictMode>

);


Expand Down
4 changes: 3 additions & 1 deletion frontend/code/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@ module.exports = {
utils: true, // adds responsive and modifier utility classes
rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
tailwindcss: {},
autoprefixer: {},
cssnano: {}
},
}
Empty file added migrate
Empty file.
30 changes: 22 additions & 8 deletions nginx/default.conf
Original file line number Diff line number Diff line change
@@ -1,22 +1,36 @@
server {
listen 80;
listen [::]:80;
server_name localhost;
listen 80;
listen [::]:80;
server_name localhost;
gzip on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/svg+xml application/octet-stream;

location / {
try_files $uri /index.html;
location / {
try_files $uri /index.html;

root /var/www/html/;
index index.html index.htm;
}
root /var/www/html/;
index index.html index.htm;
}

}
server {
listen 3001;

server_name localhost;

gzip on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/svg+xml application/octet-stream;

location / {

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://backend:3001/;
Expand Down

0 comments on commit 1c460d7

Please sign in to comment.