Skip to content

Commit

Permalink
Fix: Open external discord links in newtab
Browse files Browse the repository at this point in the history 
- add no opener and no referer for all external links
  • Loading branch information
@akhilalekha
akhilalekha committed Jul 19, 2021
1 parent 6555ba9 commit 7e3ce5a
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 83 deletions.
144 changes: 87 additions & 57 deletions component/layout/HomeSpotlight/HomeSpotlight.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,95 @@
import styles from './HomeSpotlight.module.scss';
import Link from 'next/link';
import { useEffect } from 'react';
import styles from "./HomeSpotlight.module.scss";
import Link from "next/link";
import { useEffect } from "react";

export default function HomeSpotlight() {
useEffect(function mount() {
const title1 = document.getElementById("title1");
const title2 = document.getElementById("title2");
const title3 = document.getElementById("title3");

useEffect(function mount() {
const onScroll = () => {
anim(title1, title2, title3);
};

const title1 = document.getElementById('title1');
const title2 = document.getElementById('title2');
const title3 = document.getElementById('title3');
window.addEventListener("scroll", onScroll);
return function unMount() {
window.removeEventListener("scroll", onScroll);
};
});

const onScroll = () => {
anim(title1, title2, title3);
};

window.addEventListener("scroll", onScroll);
return function unMount() {
window.removeEventListener("scroll", onScroll);
};
});


return (
<section className={styles.spotlight}>
<div className={styles.stars}></div>
<div className={styles.twinkling}></div>
<div>
<h2>
<span className={styles.spotlight__title} id="title1">Planet Nullcast</span>
<span className={styles.spotlight__title} id="title2">A Place where</span>
<span className={styles.spotlight__title} id="title3">code-crazy devs chill!</span>
</h2>
<div className={styles.btnWrap}>
<Link href="https://discord.com/invite/5byDDp2qbK">
<a className="btn btn--whiteBorder" target="_blank">
<span className="btn__text">Join Discord</span>
</a>
</Link>
<Link href="/curriculum">
<a className="btn btn--whiteBorder">
<span className="btn__text">School of Ducks</span>
</a>
</Link>
</div>
</div>
<div className={styles.scroll}>
<svg width="42" height="88" viewBox="0 0 42 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="21" cy="44" r="20" stroke="#626262" strokeWidth="2"/>
<path d="M20.3 54.04l-5.9-5.9a1.044 1.044 0 010-1.482 1.044 1.044 0 011.481 0l4.111 4.111V35.053a1.053 1.053 0 112.107 0v15.708l4.111-4.111a1.044 1.044 0 011.482 0c.41.41.41 1.07 0 1.481l-5.901 5.901a1.043 1.043 0 01-.745.309c-.274 0-.54-.095-.745-.3z" fill="#626262" />
<path d="M20.3 54.04l-5.9-5.9a1.044 1.044 0 010-1.482 1.044 1.044 0 011.481 0l4.111 4.111V35.053a1.053 1.053 0 112.107 0v15.708l4.111-4.111a1.044 1.044 0 011.482 0c.41.41.41 1.07 0 1.481l-5.901 5.901a1.043 1.043 0 01-.745.309c-.274 0-.54-.095-.745-.3z" fill="#626262" />
</svg>
</div>
</section>
);
return (
<section className={styles.spotlight}>
<div className={styles.stars}></div>
<div className={styles.twinkling}></div>
<div>
<h2>
<span className={styles.spotlight__title} id="title1">
Planet Nullcast
</span>
<span className={styles.spotlight__title} id="title2">
A Place where
</span>
<span className={styles.spotlight__title} id="title3">
code-crazy devs chill!
</span>
</h2>
<div className={styles.btnWrap}>
<Link href="https://discord.com/invite/5byDDp2qbK">
<a
className="btn btn--whiteBorder"
target="_blank"
rel="noopener noreferer"
>
<span className="btn__text">Join Discord</span>
</a>
</Link>
<Link href="/curriculum">
<a className="btn btn--whiteBorder">
<span className="btn__text">School of Ducks</span>
</a>
</Link>
</div>
</div>
<div className={styles.scroll}>
<svg
width="42"
height="88"
viewBox="0 0 42 88"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="21" cy="44" r="20" stroke="#626262" strokeWidth="2" />
<path
d="M20.3 54.04l-5.9-5.9a1.044 1.044 0 010-1.482 1.044 1.044 0 011.481 0l4.111 4.111V35.053a1.053 1.053 0 112.107 0v15.708l4.111-4.111a1.044 1.044 0 011.482 0c.41.41.41 1.07 0 1.481l-5.901 5.901a1.043 1.043 0 01-.745.309c-.274 0-.54-.095-.745-.3z"
fill="#626262"
/>
<path
d="M20.3 54.04l-5.9-5.9a1.044 1.044 0 010-1.482 1.044 1.044 0 011.481 0l4.111 4.111V35.053a1.053 1.053 0 112.107 0v15.708l4.111-4.111a1.044 1.044 0 011.482 0c.41.41.41 1.07 0 1.481l-5.901 5.901a1.043 1.043 0 01-.745.309c-.274 0-.54-.095-.745-.3z"
fill="#626262"
/>
</svg>
</div>
</section>
);
}


const anim = (title1, title2, title3) => {
const scrollValue = document.documentElement.scrollTop;

title1.style.transform = 'rotate('+ (scrollValue / -40)+'deg) translateY('+ (scrollValue / 30) +'px)';
title2.style.transform = 'translateY('+ (scrollValue / 10) +'px)';
title3.style.transform = 'rotate('+ (scrollValue / 50 - 4.58)+'deg) scale('+ (1 + (scrollValue / 5000)) +') translateY('+ (scrollValue / 20) +'px)';
}
const scrollValue = document.documentElement.scrollTop;

title1.style.transform =
"rotate(" +
scrollValue / -40 +
"deg) translateY(" +
scrollValue / 30 +
"px)";
title2.style.transform = "translateY(" + scrollValue / 10 + "px)";
title3.style.transform =
"rotate(" +
(scrollValue / 50 - 4.58) +
"deg) scale(" +
(1 + scrollValue / 5000) +
") translateY(" +
scrollValue / 20 +
"px)";
};
51 changes: 28 additions & 23 deletions component/layout/SectionSwag/SectionSwag.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
import styles from "./SectionSwag.module.scss";
import Fade from 'react-reveal/Fade';
import Reveal from 'react-reveal/Reveal';
import Image from 'next/image';
import Fade from "react-reveal/Fade";
import Reveal from "react-reveal/Reveal";
import Image from "next/image";

export default function SectionSwag() {
return (
<section className={styles.section}>
<div className="container">
<Fade>
<div>
<h2 className="text-center">Want #swag?</h2>
<div className={styles.subtitle}>
<h3>Join our monthly raffle! </h3>
<div>
<h2 className="text-center">Want #swag?</h2>
<div className={styles.subtitle}>
<h3>Join our monthly raffle! </h3>
</div>
</div>
</div>
</Fade>
<div className="md:flex items-center justify-between mb-10 xl:mb-20">
<Fade>
<div className="md:w-8/12 xl:w-7/12 font-darker font-bold text-25 xl:text-34 text-gray-01 text-center md:text-left">
<p>
Every month, One Lucky Duck gets free swag shipped to their
doorstep, wherever in the world you are! All you have to do is
join our Discord channel today and tweet about the amazing things
we do. #nullcast #luckyduck
</p>
<p className={styles.pinktext}>
We will announce the winners on Twitter and through our discord
channel.
</p>
</div>
<div className="md:w-8/12 xl:w-7/12 font-darker font-bold text-25 xl:text-34 text-gray-01 text-center md:text-left">
<p>
Every month, One Lucky Duck gets free swag shipped to their
doorstep, wherever in the world you are! All you have to do is
join our Discord channel today and tweet about the amazing
things we do. #nullcast #luckyduck
</p>
<p className={styles.pinktext}>
We will announce the winners on Twitter and through our discord
channel.
</p>
</div>
</Fade>
<Reveal effect="moveDuck">
<Reveal effect="moveDuck">
<div className={styles.duck}>
<Image
src="/images/duck.svg"
Expand All @@ -39,10 +39,15 @@ export default function SectionSwag() {
height={383}
/>
</div>
</Reveal>
</Reveal>
</div>
<div className="cta text-center">
<a href="https://discord.com/invite/5byDDp2qbK" className="btn" target="_blank">
<a
rel="noopener noreferrer"
href="https://discord.com/invite/5byDDp2qbK"
className="btn"
target="_blank"
>
<span className="btn__text">JOIN THE FLOCK</span>
</a>
</div>
Expand Down
8 changes: 5 additions & 3 deletions component/layout/SiteFooter/SiteFooter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,19 +120,20 @@ export default function SiteFooter() {
href="https://twitter.com/nullcast_io?lang=en"
className={styles.twitter}
target="_blank"
rel="noopener noreferer"
>
<Image
src="/images/twitter-large.svg"
alt="twitter"
width={268}
height={268}
width="268rem"
height="268rem"
/>
<img />
</a>
<a
href="https://www.linkedin.com/company/nullcast/?originalSubdomain=in"
className={styles.linkedin}
target="_blank"
rel="noopener noreferer"
>
<Image
src="/images/linkedin-large.svg"
Expand All @@ -145,6 +146,7 @@ export default function SiteFooter() {
href="https://discord.com/invite/5byDDp2qbK"
className={styles.discord}
target="_blank"
rel="noopener noreferer"
>
<Image
src="/images/discord-large.svg"
Expand Down
1 change: 1 addition & 0 deletions pages/curriculum/[courseName]/[chapterName].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,7 @@ export default function Chapter({ chapterData, chapterName, courseName }) {
<a
className="text-white h-8 text-xs bg-indigo-600 w-full p-2 rounded-sm inline-flex items-center"
target="_blank"
rel="noopener noreferer"
>
Trouble? Join Discord
<svg
Expand Down

0 comments on commit 7e3ce5a

Please sign in to comment.