Comments (24)
Thanks! I will try that. Still I would be glad if you could add it in the next update if you have free time.
from mysocials.
yah fixing it
from mysocials.
Works amazing, thanks 👍🏻
from mysocials.
to add a view counter basically analysis just add a new schema in property in userSchema i.e profileViews and update its value i.e currentview + 1 whenever new user visits its page make sure to add cookie to make it unique per user
and about profile image just update the value of the image:{
type: String,
max:4000
}, as you need
pretty simple and i am gonna add detailed views analysis in some days
from mysocials.
Thanks for the fast answer! One thing, I meant the background of the user, not the profile image.
from mysocials.
misunderstood but its pretty simple you need to add a new value in the user schema and add a div with img in it and in the dashboard add a input to update the value and the img src thats it
from mysocials.
By the way I want to mention a small but important bug
let's say my username is test, and I change it to test1, I now own both test and test1 links which results in being able to claim unlimited links. Also when I change to test1 it keeps displaying the name as test in the dashboard
from mysocials.
By the way I want to mention a small but important bug let's say my username is test, and I change it to test1, I now own both test and test1 links which results in being able to claim unlimited links. Also when I change to test1 it keeps displaying the name as test in the dashboard
fixed!!
from mysocials.
Hey, I tried to add custom background feature myself I listed every change I made really sorry if its hard to read. I made these changes but when I click publish, the page gets reload and the background link is always gone. I don't know if you can help from here but I wanted to ask. (I don't get any errors, it says succesfully published profile)
Added background:{type: String,} in schema/user.js
Changed api/create/route.js:12 const { username, bio, youtube, insta, face, github, name, back } = await request.json();
Added api/create/route.js:35 background: back
Changed api/create/route.js:38 return NextResponse.json({ message: "success", name, username, bio, youtube, insta, face, github, back }, { status: 200 });
Added api/create/route.js:50 background: back
Changed api/create/route.js:52 background: back return NextResponse.json({ message: "success", name, username, bio, youtube, insta, face, github, back }, { status: 200 });
Added (user)/_components/ManageForm.jsx:21 const [back, SetBack] = useState('');
Changed (user)/_components/ManageForm.jsx:41 body: JSON.stringify({ username, bio, insta, face, github, youtube, name, back }),
Changed (user)/_components/ManageForm.jsx:65 if (!username && !bio && !insta && !face && !github && !youtube && !back) {
Added (user)/_components/ManageForm.jsx:79 SetBack(data.data.background);
Added (user)/_components/ManageForm.jsx Background
Link<Input value={back} onChange={(e) => SetBack(e.target.value)} id="back" type="url" placeholder="example.com/video.mp4" />
Added (page)/_components/UserSocials.jsx:22 const [back, SetBack] = useState('');
Changed (page)/_components/UserSocials.jsx:26 if (!bio && !insta && !face && !github && !youtube && !back) {
Added (page)/_components/UserSocials.jsx:46 SetBack(data.data.background);
Added (page)/_components/UserSocials.jsx:57
from mysocials.
in /app/(user)/_components /ManageForm.jsx
theres a func that reloads page setTimeout(() => { location.reload(); }, 1000)
might making trouble try removing it or change the timeout delay
from mysocials.
Hey, removing it solved the issue of link being disappear from dashboard, however I still can't see the background on my profile 🤔
from mysocials.
did you added img tag with proper fetching and assigning src? in the UserSocials.jsx?
from mysocials.
Probably not. I tried these but they only display videos or images, I don't know how to display both videos and images at once
<.video src={back} className="h-full w-full object-fill" autoPlay loop muted/>
<.img src={back} className="h-full w-full object-fill"/>
from mysocials.
pretty easy fix just add a logic, if theres .mp4 in the back
i.e background url render video eliment else img
{ back.includes(".mp4") : (<video do stuff here/>) ? (<img do stiff here/>) }
from mysocials.
it will work ig
from mysocials.
I just changed places of ? and : and it works!! You are a genius 😄
from mysocials.
haha mistakenly swapped the place
glad it worked 😁
from mysocials.
I changed few things about the user links, I tried for an hour to center the buttons but I couldn't do it im pretty sure its easy but can u help?
<div className="grid relative gap-3 grid-cols-10 max-w-[1000px]">
{!youtube ? null : (
<Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={youtube}><Youtube className="absolute left-6 h-5 w-5"/></Link>
)}
{!insta ? null : (
<Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={insta}><Instagram className="absolute left-6 h-5 w-5"/></Link>
)}
{!face ? null : (
<Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={face}><Facebook className="absolute left-6 h-5 w-5"/></Link>
)}
{!github ? null : (
<Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={github}><Github className="absolute left-6 h-5 w-5"/></Link>
)}
</div>
from mysocials.
I changed few things about the user links, I tried for an hour to center the buttons but I couldn't do it im pretty sure its easy but can u help?
<div className="grid relative gap-3 grid-cols-10 max-w-[1000px]"> {!youtube ? null : ( <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={youtube}><Youtube className="absolute left-6 h-5 w-5"/></Link> )} {!insta ? null : ( <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={insta}><Instagram className="absolute left-6 h-5 w-5"/></Link> )} {!face ? null : ( <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={face}><Facebook className="absolute left-6 h-5 w-5"/></Link> )} {!github ? null : ( <Link className="w-full transition md:w-[420px] sm:w-[300px] mx-auto h-14 content-center flex items-center justify-center rounded-lg hover:text-white hover:scale-110 relative" target="_blank" href={github}><Github className="absolute left-6 h-5 w-5"/></Link> )} </div>
just add place-items-center
or place-content-center
in this
<div className="grid relative gap-3 grid-cols-10 max-w-[1000px]">
from mysocials.
and why grid-cols-10
?
from mysocials.
It currently looks like this, adding place-items-center
or place-content-center
didn't fix it
I wanted the links to be next to each other that's why I added grid-cols-10
from mysocials.
dude thats what making it to not be in center the grid-cols-10
just replace it with grid-cols-4
from mysocials.
I replaced it to grid-cols-4
and also removed few things and now its working thanks! but I was also going to make adding custom url's so that's why I did that. If the user adds more or less than 4 links then grid-cols-4
also doesn't work. How can we keep the symbols aligned no matter how many links the user adds?
This is what grid-cols-4
with 3 links looks like:
from mysocials.
Oh I fixed it by changing few things on the div
from mysocials.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mysocials.