github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor logic for download and subscribe popups

Browse Source
pull/3813/head
Kamran Ahmed 2 years ago
parent ec45a565ea
commit 82334bbcae
3 changed files with 21 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      src/components/BestPracticeHeader.astro
  2. 10
      src/components/Navigation/Navigation.astro
  3. 29
      src/components/RoadmapHeader.astro

33
src/components/BestPracticeHeader.astro
Unescape View File

@ -20,7 +20,7 @@ const isBestPracticeReady = !isUpcoming;
<div class='border-b'> <div class='border-b'>
<div class='container relative py-5 sm:py-12'> <div class='container relative py-5 sm:py-12'>
<div class='mt-0 mb-3 sm:mb-6'> <div class='mb-3 mt-0 sm:mb-6'>
<h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'> <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
{title} {title}
</h1> </h1>
@ -31,7 +31,7 @@ const isBestPracticeReady = !isUpcoming;
<div class='flex gap-1 sm:gap-2'> <div class='flex gap-1 sm:gap-2'>
<a <a
href='/best-practices' href='/best-practices'
class='rounded-md bg-gray-500 py-1.5 px-3 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm' class='rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm'
aria-label='Back to All Best Practices' aria-label='Back to All Best Practices'
> >
&larr;<span class='hidden sm:inline'>&nbsp;All Best Practices</span> &larr;<span class='hidden sm:inline'>&nbsp;All Best Practices</span>
@ -40,9 +40,9 @@ const isBestPracticeReady = !isUpcoming;
{ {
isBestPracticeReady && ( isBestPracticeReady && (
<button <button
id='download-button' data-guest-required
data-popup='login-popup' data-popup='login-popup'
class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm' class='hidden inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
aria-label='Download Roadmap' aria-label='Download Roadmap'
ga-category='Subscription' ga-category='Subscription'
ga-action='Clicked Popup Opener' ga-action='Clicked Popup Opener'
@ -57,13 +57,14 @@ const isBestPracticeReady = !isUpcoming;
{ {
isBestPracticeReady && ( isBestPracticeReady && (
<a <a
id='download-link' data-auth-required
class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm' class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
aria-label='Download Roadmap' aria-label='Download Roadmap'
ga-category='Subscription' ga-category='Subscription'
ga-action='Clicked Popup Opener' ga-action='Clicked Popup Opener'
ga-label='Download Roadmap Popup' ga-label='Download Roadmap Popup'
href={`/best-practices/${bestPracticeId}.png`} target="_blank"
href={`/pdfs/best-practices/${bestPracticeId}.pdf`}
> >
<Icon icon='download' /> <Icon icon='download' />
<span class='ml-2 hidden sm:inline'>Download</span> <span class='ml-2 hidden sm:inline'>Download</span>
@ -72,9 +73,9 @@ const isBestPracticeReady = !isUpcoming;
} }
<button <button
id='subscribe-button' data-guest-required
data-popup='login-popup' data-popup='login-popup'
class='inline-flex items-center justify-center rounded-md bg-yellow-400 py-1.5 px-3 text-xs font-medium hover:bg-yellow-500 sm:text-sm' class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
aria-label='Subscribe for Updates' aria-label='Subscribe for Updates'
ga-category='Subscription' ga-category='Subscription'
ga-action='Clicked Popup Opener' ga-action='Clicked Popup Opener'
@ -104,19 +105,3 @@ const isBestPracticeReady = !isUpcoming;
<BestPracticeHint bestPracticeId={bestPracticeId} /> <BestPracticeHint bestPracticeId={bestPracticeId} />
</div> </div>
</div> </div>
<script>
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME } from '../lib/constants';
const subscribeButton = document.getElementById('subscribe-button');
const downloadButton = document.getElementById('download-button');
const downloadLink = document.getElementById('download-link');
const token = Cookies.get(TOKEN_COOKIE_NAME);
if (token) {
subscribeButton?.classList.add('hidden');
downloadButton?.classList.add('hidden');
downloadLink?.classList.remove('hidden');
}
</script>

10
src/components/Navigation/Navigation.astro
Unescape View File

@ -27,8 +27,8 @@ import AccountDropdown from './AccountDropdown.astro';
<a href='/videos' class='text-gray-400 hover:text-white'>Videos</a> <a href='/videos' class='text-gray-400 hover:text-white'>Videos</a>
</li> </li>
</ul> </ul>
<ul class='hidden w-[172px] h-8 items-center gap-5 sm:flex justify-end'> <ul class='hidden h-8 w-[172px] items-center justify-end gap-5 sm:flex'>
<li data-guest-required class="hidden"> <li data-guest-required class='hidden'>
<a href='/login' class='text-gray-400 hover:text-white'>Login</a> <a href='/login' class='text-gray-400 hover:text-white'>Login</a>
</li> </li>
<li> <li>
@ -36,7 +36,7 @@ import AccountDropdown from './AccountDropdown.astro';
<a <a
data-guest-required data-guest-required
class='hidden w-28 flex h-8 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600' class='flex hidden h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
href='/signup' href='/signup'
> >
<span>Sign Up</span> <span>Sign Up</span>
@ -116,7 +116,7 @@ import AccountDropdown from './AccountDropdown.astro';
<a <a
data-guest-required data-guest-required
href='/signup' href='/signup'
class='text-xl text-white md:text-lg hidden' class='hidden text-xl text-white md:text-lg'
> >
Login Login
</a> </a>
@ -125,7 +125,7 @@ import AccountDropdown from './AccountDropdown.astro';
<a <a
data-guest-required data-guest-required
href='/signup' href='/signup'
class='text-xl text-green-300 hover:text-green-400 md:text-lg hidden' class='hidden text-xl text-green-300 hover:text-green-400 md:text-lg'
> >
Sign Up Sign Up
</a> </a>

29
src/components/RoadmapHeader.astro
Unescape View File

@ -41,7 +41,7 @@ const isRoadmapReady = !isUpcoming;
<div class='container relative py-5 sm:py-12'> <div class='container relative py-5 sm:py-12'>
<YouTubeAlert /> <YouTubeAlert />
<div class='mt-0 mb-3 sm:mb-4 sm:mt-4'> <div class='mb-3 mt-0 sm:mb-4 sm:mt-4'>
<h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'> <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
{title} {title}
</h1> </h1>
@ -63,9 +63,9 @@ const isRoadmapReady = !isUpcoming;
{isRoadmapReady && ( {isRoadmapReady && (
<button <button
id='download-button' data-guest-required
data-popup='login-popup' data-popup='login-popup'
class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm' class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
aria-label='Download Roadmap' aria-label='Download Roadmap'
ga-category='Subscription' ga-category='Subscription'
ga-action='Clicked Popup Opener' ga-action='Clicked Popup Opener'
@ -78,12 +78,13 @@ const isRoadmapReady = !isUpcoming;
{isRoadmapReady && ( {isRoadmapReady && (
<a <a
id='download-link' data-auth-required
class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm' class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
aria-label='Download Roadmap' aria-label='Download Roadmap'
ga-category='Subscription' ga-category='Subscription'
ga-action='Clicked Popup Opener' ga-action='Clicked Popup Opener'
ga-label='Download Roadmap Popup' ga-label='Download Roadmap Popup'
target='_blank'
href={`/pdfs/roadmaps/${roadmapId}.pdf`} href={`/pdfs/roadmaps/${roadmapId}.pdf`}
> >
<Icon icon='download' /> <Icon icon='download' />
@ -92,9 +93,9 @@ const isRoadmapReady = !isUpcoming;
)} )}
<button <button
id='subscribe-button' data-guest-required
data-popup='login-popup' data-popup='login-popup'
class='inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm' class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
aria-label='Subscribe for Updates' aria-label='Subscribe for Updates'
ga-category='Subscription' ga-category='Subscription'
ga-action='Clicked Popup Opener' ga-action='Clicked Popup Opener'
@ -149,19 +150,3 @@ const isRoadmapReady = !isUpcoming;
</div> </div>
{note && <RoadmapNote text={note} />} {note && <RoadmapNote text={note} />}
<script>
import Cookies from 'js-cookie';
import { TOKEN_COOKIE_NAME } from '../lib/constants';
const subscribeButton = document.getElementById('subscribe-button');
const downloadButton = document.getElementById('download-button');
const downloadLink = document.getElementById('download-link');
const token = Cookies.get(TOKEN_COOKIE_NAME);
if (token) {
subscribeButton?.classList.add('hidden');
downloadButton?.classList.add('hidden');
downloadLink?.classList.remove('hidden');
}
</script>

Write Preview
Loading…
Cancel
Save