Add rendering for best practices lists
This commit is contained in:
Kamran Ahmed committed
1 parent
f675f08d83
commit
f4e505113c
9 files changed
+116
-10
No files matched your search
+1
-1
@@ -1 +1 @@
|
||||
{"mockup":{"controls":{"control":[{"ID":"14805","typeID":"TextArea","zOrder":"7","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"461"},{"ID":"14806","typeID":"Label","zOrder":"8","measuredW":"251","measuredH":"28","x":"291","y":"464","properties":{"size":"20","text":"Minimize number of iframes"}},{"ID":"14813","typeID":"Label","zOrder":"9","measuredW":"327","measuredH":"40","x":"676","y":"216","properties":{"text":"Frontend Performance","size":"32"}},{"ID":"14848","typeID":"Canvas","zOrder":"10","w":"361","h":"150","measuredW":"100","measuredH":"70","x":"1089","y":"148"},{"ID":"14849","typeID":"Label","zOrder":"11","measuredW":"332","measuredH":"26","x":"1105","y":"166","properties":{"text":"Find the detailed version of this checklist","size":"18"}},{"ID":"14850","typeID":"Label","zOrder":"12","measuredW":"318","measuredH":"26","x":"1105","y":"194","properties":{"size":"18","text":"With details on how to implement these"}},{"ID":"14853","typeID":"Canvas","zOrder":"15","w":"373","h":"169","measuredW":"100","measuredH":"70","x":"229","y":"135"},{"ID":"14854","typeID":"__group__","zOrder":"16","measuredW":"191","measuredH":"27","w":"191","h":"27","x":"259","y":"209","properties":{"controlName":"ext_link:roadmap.sh/frontend"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"158","measuredH":"26","x":"33","y":"0","properties":{"size":"18","text":"Frontend Roadmap"}},{"ID":"1","typeID":"__group__","zOrder":"1","measuredW":"24","measuredH":"24","w":"24","h":"24","x":"0","y":"3","children":{"controls":{"control":[{"ID":"0","typeID":"Icon","zOrder":"0","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"1","typeID":"Icon","zOrder":"1","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}}]}}},{"ID":"14855","typeID":"__group__","zOrder":"17","measuredW":"202","measuredH":"27","w":"202","h":"27","x":"259","y":"245","properties":{"controlName":"ext_link:roadmap.sh/javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"169","measuredH":"26","x":"33","y":"0","properties":{"size":"18","text":"JavaScript Roadmap"}},{"ID":"1","typeID":"__group__","zOrder":"1","measuredW":"24","measuredH":"24","w":"24","h":"24","x":"0","y":"3","children":{"controls":{"control":[{"ID":"0","typeID":"Icon","zOrder":"0","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"1","typeID":"Icon","zOrder":"1","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}}]}}},{"ID":"14856","typeID":"Label","zOrder":"18","measuredW":"209","measuredH":"32","x":"259","y":"159","properties":{"size":"24","text":"Related Roadmaps"}},{"ID":"14857","typeID":"Arrow","zOrder":"19","w":"1","h":"76","measuredW":"150","measuredH":"100","x":"802","y":"124","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":0,"y":76.17275043077757},"stroke":"dotted","color":"10027263"}},{"ID":"14882","typeID":"TextArea","zOrder":"20","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"461"},{"ID":"14883","typeID":"Label","zOrder":"21","measuredW":"481","measuredH":"28","x":"897","y":"462","properties":{"size":"20","text":"Minified HTML - Remove comments and whitespaces"}},{"ID":"14915","typeID":"TextArea","zOrder":"22","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"500"},{"ID":"14916","typeID":"Label","zOrder":"23","measuredW":"271","measuredH":"28","x":"897","y":"501","properties":{"text":"Use Content Delivery Network","size":"20"}},{"ID":"14920","typeID":"TextArea","zOrder":"24","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1158"},{"ID":"14921","typeID":"Label","zOrder":"25","measuredW":"274","measuredH":"28","x":"893","y":"1161","properties":{"size":"20","text":"Pre-load URLs where possible"}},{"ID":"14922","typeID":"TextArea","zOrder":"26","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"501"},{"ID":"14923","typeID":"Label","zOrder":"27","measuredW":"461","measuredH":"28","x":"291","y":"504","properties":{"size":"20","text":"Minified CSS - Remove comments, whitespaces etc"}},{"ID":"14926","typeID":"TextArea","zOrder":"28","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1197"},{"ID":"14928","typeID":"Label","zOrder":"29","measuredW":"307","measuredH":"28","x":"893","y":"1198","properties":{"size":"20","text":"Concatenate CSS into a single file"}},{"ID":"14929","typeID":"TextArea","zOrder":"30","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"540"},{"ID":"14930","typeID":"Label","zOrder":"31","measuredW":"237","measuredH":"28","x":"291","y":"543","properties":{"size":"20","tLine truncated
|
||||
{"mockup":{"controls":{"control":[{"ID":"14805","typeID":"TextArea","zOrder":"7","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"461"},{"ID":"14806","typeID":"Label","zOrder":"8","measuredW":"251","measuredH":"28","x":"291","y":"464","properties":{"size":"20","text":"Minimize number of iframes"}},{"ID":"14813","typeID":"Label","zOrder":"9","measuredW":"327","measuredH":"40","x":"676","y":"216","properties":{"text":"Frontend Performance","size":"32"}},{"ID":"14848","typeID":"Canvas","zOrder":"10","w":"361","h":"150","measuredW":"100","measuredH":"70","x":"1089","y":"148"},{"ID":"14849","typeID":"Label","zOrder":"11","measuredW":"332","measuredH":"26","x":"1105","y":"166","properties":{"text":"Find the detailed version of this checklist","size":"18"}},{"ID":"14850","typeID":"Label","zOrder":"12","measuredW":"318","measuredH":"26","x":"1105","y":"194","properties":{"size":"18","text":"With details on how to implement these"}},{"ID":"14853","typeID":"Canvas","zOrder":"15","w":"373","h":"169","measuredW":"100","measuredH":"70","x":"226","y":"138"},{"ID":"14854","typeID":"__group__","zOrder":"16","measuredW":"191","measuredH":"27","w":"191","h":"27","x":"256","y":"212","properties":{"controlName":"ext_link:roadmap.sh/frontend"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"158","measuredH":"26","x":"33","y":"0","properties":{"size":"18","text":"Frontend Roadmap"}},{"ID":"1","typeID":"__group__","zOrder":"1","measuredW":"24","measuredH":"24","w":"24","h":"24","x":"0","y":"3","children":{"controls":{"control":[{"ID":"0","typeID":"Icon","zOrder":"0","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"1","typeID":"Icon","zOrder":"1","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}}]}}},{"ID":"14855","typeID":"__group__","zOrder":"17","measuredW":"202","measuredH":"27","w":"202","h":"27","x":"256","y":"248","properties":{"controlName":"ext_link:roadmap.sh/javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"169","measuredH":"26","x":"33","y":"0","properties":{"size":"18","text":"JavaScript Roadmap"}},{"ID":"1","typeID":"__group__","zOrder":"1","measuredW":"24","measuredH":"24","w":"24","h":"24","x":"0","y":"3","children":{"controls":{"control":[{"ID":"0","typeID":"Icon","zOrder":"0","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"1","typeID":"Icon","zOrder":"1","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}}]}}},{"ID":"14856","typeID":"Label","zOrder":"18","measuredW":"209","measuredH":"32","x":"256","y":"162","properties":{"size":"24","text":"Related Roadmaps"}},{"ID":"14857","typeID":"Arrow","zOrder":"19","w":"1","h":"76","measuredW":"150","measuredH":"100","x":"802","y":"124","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":0,"y":76.17275043077757},"stroke":"dotted","color":"10027263"}},{"ID":"14882","typeID":"TextArea","zOrder":"20","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"461"},{"ID":"14883","typeID":"Label","zOrder":"21","measuredW":"481","measuredH":"28","x":"897","y":"462","properties":{"size":"20","text":"Minified HTML - Remove comments and whitespaces"}},{"ID":"14915","typeID":"TextArea","zOrder":"22","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"849","y":"500"},{"ID":"14916","typeID":"Label","zOrder":"23","measuredW":"271","measuredH":"28","x":"897","y":"501","properties":{"text":"Use Content Delivery Network","size":"20"}},{"ID":"14920","typeID":"TextArea","zOrder":"24","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1108"},{"ID":"14921","typeID":"Label","zOrder":"25","measuredW":"274","measuredH":"28","x":"893","y":"1111","properties":{"size":"20","text":"Pre-load URLs where possible"}},{"ID":"14922","typeID":"TextArea","zOrder":"26","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"501"},{"ID":"14923","typeID":"Label","zOrder":"27","measuredW":"461","measuredH":"28","x":"291","y":"504","properties":{"size":"20","text":"Minified CSS - Remove comments, whitespaces etc"}},{"ID":"14926","typeID":"TextArea","zOrder":"28","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"850","y":"1147"},{"ID":"14928","typeID":"Label","zOrder":"29","measuredW":"307","measuredH":"28","x":"893","y":"1148","properties":{"size":"20","text":"Concatenate CSS into a single file"}},{"ID":"14929","typeID":"TextArea","zOrder":"30","w":"29","h":"30","measuredW":"200","measuredH":"140","x":"245","y":"540"},{"ID":"14930","typeID":"Label","zOrder":"31","measuredW":"237","measuredH":"28","x":"291","y":"543","properties":{"size":"20","tLine truncated
|
||||
@@ -10,7 +10,7 @@ title: "Frontend Performance"
|
||||
description: "Detailed list of best practices to improve your frontend performance"
|
||||
dimensions:
|
||||
width: 968
|
||||
height: 2734.48
|
||||
height: 1270.89
|
||||
schema:
|
||||
headline: "Frontend Performance Best Practices"
|
||||
description: "Detailed list of best practices to improve the frontend performance of your website. Each best practice carries further details and how to implement that best practice."
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
import BestPracticeHint from './BestPracticeHint.astro';
|
||||
import DownloadPopup from './DownloadPopup.astro';
|
||||
import Icon from './Icon.astro';
|
||||
import SubscribePopup from './SubscribePopup.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
bestPracticeId: string;
|
||||
isUpcoming?: boolean;
|
||||
}
|
||||
|
||||
const { title, description, bestPracticeId, isUpcoming = false } = Astro.props;
|
||||
const isBestPracticeReady = !isUpcoming;
|
||||
---
|
||||
|
||||
<DownloadPopup />
|
||||
<SubscribePopup />
|
||||
|
||||
<div class='border-b'>
|
||||
<div class='py-5 sm:py-12 container relative'>
|
||||
<div class='mt-0 mb-3 sm:mb-6'>
|
||||
<h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
|
||||
{title}
|
||||
</h1>
|
||||
<p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
|
||||
</div>
|
||||
|
||||
<div class='flex justify-between'>
|
||||
<div class='flex gap-1 sm:gap-2'>
|
||||
<a
|
||||
href='/best-practices'
|
||||
class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
|
||||
aria-label='Back to All Best Practices'
|
||||
>
|
||||
←<span class='hidden sm:inline'> All Best Practices</span>
|
||||
</a>
|
||||
|
||||
{
|
||||
isBestPracticeReady && (
|
||||
<button
|
||||
data-popup='download-popup'
|
||||
class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
|
||||
aria-label='Download Best Practice'
|
||||
ga-category='Subscription'
|
||||
ga-action='Clicked Popup Opener'
|
||||
ga-label='Download Best Practice Popup'
|
||||
>
|
||||
<Icon icon='download' />
|
||||
<span class='hidden sm:inline ml-2'>Download</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
<button
|
||||
data-popup='subscribe-popup'
|
||||
class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
|
||||
aria-label='Subscribe for Updates'
|
||||
ga-category='Subscription'
|
||||
ga-action='Clicked Popup Opener'
|
||||
ga-label='Subscribe Best Practice Popup'
|
||||
>
|
||||
<Icon icon='email' />
|
||||
<span class='ml-2'>Subscribe</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{
|
||||
isBestPracticeReady && (
|
||||
<a
|
||||
href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
|
||||
target='_blank'
|
||||
class='inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
|
||||
aria-label='Suggest Changes'
|
||||
>
|
||||
<Icon icon='comment' class='h-3 w-3' />
|
||||
<span class='ml-2 hidden sm:inline'>Suggest Changes</span>
|
||||
<span class='ml-2 inline sm:hidden'>Suggest</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<BestPracticeHint bestPracticeId={bestPracticeId} />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
export interface Props {
|
||||
bestPracticeId: string;
|
||||
}
|
||||
---
|
||||
|
||||
<div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
|
||||
<!-- Desktop: Roadmap Resources - Alert -->
|
||||
<div class='hidden sm:flex justify-between px-2 bg-white items-center rounded-md p-1.5'>
|
||||
<p class='text-sm'>
|
||||
<span class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'>Tip</span>
|
||||
Click the best practices for details and resources
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Mobile - Roadmap resources alert -->
|
||||
<p class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'>
|
||||
Click the best practices for details and resources
|
||||
</p>
|
||||
</div>
|
||||
@@ -5,7 +5,7 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
|
||||
|
||||
<Popup
|
||||
id='download-popup'
|
||||
title='Download Roadmap'
|
||||
title='Download'
|
||||
subtitle='Enter your email below to receive the download link.'
|
||||
>
|
||||
<form
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import DownloadPopup from './DownloadPopup.astro';
|
||||
import Icon from './Icon.astro';
|
||||
import ResourcesAlert from './ResourcesAlert.astro';
|
||||
import RoadmapHint from './RoadmapHint.astro';
|
||||
import RoadmapNote from './RoadmapNote.astro';
|
||||
import SubscribePopup from './SubscribePopup.astro';
|
||||
import TopicSearch from './TopicSearch/TopicSearch.astro';
|
||||
@@ -109,7 +109,7 @@ const isRoadmapReady = !isUpcoming;
|
||||
</div>
|
||||
|
||||
<!-- Desktop: Roadmap Resources - Alert -->
|
||||
{hasTopics && <ResourcesAlert roadmapId={roadmapId} />}
|
||||
{hasTopics && <RoadmapHint roadmapId={roadmapId} />}
|
||||
|
||||
{hasSearch && <TopicSearch />}
|
||||
</div>
|
||||
|
||||
File renamed without changes.
@@ -1,8 +1,8 @@
|
||||
---
|
||||
import BestPracticeHeader from '../../components/BestPracticeHeader.astro';
|
||||
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
|
||||
import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
|
||||
import MarkdownFile from '../../components/MarkdownFile.astro';
|
||||
import RoadmapHeader from '../../components/RoadmapHeader.astro';
|
||||
import UpcomingForm from '../../components/UpcomingForm.astro';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import { BestPracticeFrontmatter,getBestPracticeIds } from '../../lib/best-pratice';
|
||||
@@ -50,10 +50,10 @@ if (bestPracticeData.schema) {
|
||||
noIndex={bestPracticeData.isUpcoming}
|
||||
jsonLd={jsonLdSchema}
|
||||
>
|
||||
<RoadmapHeader
|
||||
<BestPracticeHeader
|
||||
title={bestPracticeData.title}
|
||||
description={bestPracticeData.description}
|
||||
roadmapId={bestPracticeId}
|
||||
bestPracticeId={bestPracticeId}
|
||||
isUpcoming={bestPracticeData.isUpcoming}
|
||||
/>
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@ const bestPractices = await getAllBestPractices();
|
||||
<SimplePageHeader
|
||||
title='Best Practices'
|
||||
description='Best practices on different topics with detailed implementation guidelines'
|
||||
showYouTubeAlert={true}
|
||||
/>
|
||||
|
||||
<div class='bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
|
||||
@@ -34,4 +33,4 @@ const bestPractices = await getAllBestPractices();
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
</BaseLayout>
|
||||
Reference in new issue
Block a user