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

chore: best practices header

Browse Source
feat/favorite
Arik Chakma 1 year ago
parent 4328ea309e
commit 23d6bab782
2 changed files with 90 additions and 76 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. 71
      src/components/BestPracticeHeader.astro
  2. 77
      src/components/RoadmapHeader.astro

71
src/components/BestPracticeHeader.astro
Unescape View File

@ -2,6 +2,7 @@
import Icon from './AstroIcon.astro'; import Icon from './AstroIcon.astro';
import LoginPopup from './AuthenticationFlow/LoginPopup.astro'; import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
import BestPracticeHint from './BestPracticeHint.astro'; import BestPracticeHint from './BestPracticeHint.astro';
import { MarkFavorite } from './FeaturedItems/MarkFavorite';
import ProgressHelpPopup from './ProgressHelpPopup.astro'; import ProgressHelpPopup from './ProgressHelpPopup.astro';
export interface Props { export interface Props {
@ -18,35 +19,35 @@ const isBestPracticeReady = !isUpcoming;
<LoginPopup /> <LoginPopup />
<ProgressHelpPopup /> <ProgressHelpPopup />
<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='mb-3 mt-0 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>
<p class='text-sm text-gray-500 sm:text-lg'>{description}</p> <p class="text-sm text-gray-500 sm:text-lg">{description}</p>
</div> </div>
<div class='flex justify-between'> <div class="flex justify-between">
<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 px-3 py-1.5 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>
</a> </a>
{ {
isBestPracticeReady && ( isBestPracticeReady && (
<button <button
data-guest-required data-guest-required
data-popup='login-popup' data-popup="login-popup"
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' 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"
> >
<Icon icon='download' /> <Icon icon="download" />
<span class='ml-2 hidden sm:inline'>Download</span> <span class="ml-2 hidden sm:inline">Download</span>
</button> </button>
) )
} }
@ -55,40 +56,48 @@ const isBestPracticeReady = !isUpcoming;
isBestPracticeReady && ( isBestPracticeReady && (
<a <a
data-auth-required 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"
target="_blank" target="_blank"
href={`/pdfs/best-practices/${bestPracticeId}.pdf`} 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>
</a> </a>
) )
} }
<button <button
data-guest-required data-guest-required
data-popup='login-popup' data-popup="login-popup"
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='Subscribe for Updates' aria-label="Subscribe for Updates"
> >
<Icon icon='email' /> <Icon icon="email" />
<span class='ml-2'>Subscribe</span> <span class="ml-2">Subscribe</span>
</button> </button>
</div> </div>
{ {
isBestPracticeReady && ( isBestPracticeReady && (
<div class="flex items-center gap-1 sm:gap-2">
<MarkFavorite
resourceId={bestPracticeId}
resourceType="best-practice"
className="flex h-7 w-7 items-center justify-center rounded-md bg-gray-500 text-white !opacity-100 hover:bg-gray-600 sm:h-8 sm:w-8"
client:load
/>
<a <a
href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`} href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
target='_blank' target="_blank"
class='inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm' class="inline-flex items-center justify-center 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='Suggest Changes' aria-label="Suggest Changes"
> >
<Icon icon='comment' class='h-3 w-3' /> <Icon icon="comment" class="h-3 w-3" />
<span class='ml-2 hidden sm:inline'>Suggest Changes</span> <span class="ml-2 hidden sm:inline">Suggest Changes</span>
<span class='ml-2 inline sm:hidden'>Suggest</span> <span class="ml-2 inline sm:hidden">Suggest</span>
</a> </a>
</div>
) )
} }
</div> </div>

77
src/components/RoadmapHeader.astro
Unescape View File

@ -36,63 +36,63 @@ const isRoadmapReady = !isUpcoming;
<LoginPopup /> <LoginPopup />
<ProgressHelpPopup /> <ProgressHelpPopup />
<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">
<YouTubeAlert /> <YouTubeAlert />
<div class='mb-3 mt-0 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>
<p class='text-sm text-gray-500 sm:text-lg'>{description}</p> <p class="text-sm text-gray-500 sm:text-lg">{description}</p>
</div> </div>
<div class='flex justify-between'> <div class="flex justify-between">
<div class='flex gap-1 sm:gap-2'> <div class="flex gap-1 sm:gap-2">
{ {
!hasSearch && ( !hasSearch && (
<> <>
<a <a
href='/roadmaps' href="/roadmaps"
class='rounded-md bg-gray-500 px-3 py-1.5 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 Roadmaps' aria-label="Back to All Roadmaps"
> >
&larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span> &larr;<span class="hidden sm:inline">&nbsp;All Roadmaps</span>
</a> </a>
{isRoadmapReady && ( {isRoadmapReady && (
<> <>
<button <button
data-guest-required data-guest-required
data-popup='login-popup' data-popup="login-popup"
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"
> >
<Icon icon='download' /> <Icon icon="download" />
<span class='ml-2 hidden sm:inline'>Download</span> <span class="ml-2 hidden sm:inline">Download</span>
</button> </button>
<a <a
data-auth-required 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"
target='_blank' target="_blank"
href={`/pdfs/roadmaps/${roadmapId}.pdf`} href={`/pdfs/roadmaps/${roadmapId}.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>
</a> </a>
</> </>
)} )}
<button <button
data-guest-required data-guest-required
data-popup='login-popup' data-popup="login-popup"
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='Subscribe for Updates' aria-label="Subscribe for Updates"
> >
<Icon icon='email' /> <Icon icon="email" />
<span class='ml-2'>Subscribe</span> <span class="ml-2">Subscribe</span>
</button> </button>
</> </>
) )
@ -102,11 +102,11 @@ const isRoadmapReady = !isUpcoming;
hasSearch && ( hasSearch && (
<a <a
href={`/${roadmapId}`} href={`/${roadmapId}`}
class='rounded-md bg-gray-500 px-3 py-1.5 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 Visual Roadmap' aria-label="Back to Visual Roadmap"
> >
&larr; &larr;
<span class='inline'>&nbsp;Visual Roadmap</span> <span class="inline">&nbsp;Visual Roadmap</span>
</a> </a>
) )
} }
@ -115,16 +115,21 @@ const isRoadmapReady = !isUpcoming;
{ {
isRoadmapReady && ( isRoadmapReady && (
<div class="flex items-center gap-1 sm:gap-2"> <div class="flex items-center gap-1 sm:gap-2">
<MarkFavorite resourceId={roadmapId} resourceType="roadmap" className="bg-gray-500 text-white rounded-md h-8 w-8 flex items-center justify-center !opacity-100" client:load /> <MarkFavorite
resourceId={roadmapId}
resourceType="roadmap"
className="flex h-7 w-7 items-center justify-center rounded-md bg-gray-500 text-white !opacity-100 hover:bg-gray-600 sm:h-8 sm:w-8"
client:load
/>
<a <a
href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`} href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
target='_blank' target="_blank"
class='inline-flex items-center justify-center rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm' class="inline-flex items-center justify-center 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='Suggest Changes' aria-label="Suggest Changes"
> >
<Icon icon='comment' class='h-3 w-3' /> <Icon icon="comment" class="h-3 w-3" />
<span class='ml-2 hidden sm:inline'>Suggest Changes</span> <span class="ml-2 hidden sm:inline">Suggest Changes</span>
<span class='ml-2 inline sm:hidden'>Suggest</span> <span class="ml-2 inline sm:hidden">Suggest</span>
</a> </a>
</div> </div>
) )

Write Preview
Loading…
Cancel
Save