From 359f5d6a4d93e427ef482caf39d11a1649492996 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Mon, 23 Jan 2023 17:36:55 +0400 Subject: [PATCH] Add best practices page --- .../frontend-performance.pdf | Bin .../frontend-performance.md | 2 + .../FeaturedItems/FeaturedItems.astro | 6 +- src/components/GridItem.astro | 32 ++++++++ src/components/GridRoadmapItem.astro | 31 -------- src/components/Navigation.astro | 6 ++ src/lib/best-pratice.ts | 74 ++++++++++++++++++ src/pages/best-practices/index.astro | 37 +++++++++ src/pages/index.astro | 14 +++- src/pages/roadmaps.astro | 16 +++- 10 files changed, 179 insertions(+), 39 deletions(-) rename public/pdfs/{checklists => best-practices}/frontend-performance.pdf (100%) create mode 100644 src/components/GridItem.astro delete mode 100644 src/components/GridRoadmapItem.astro create mode 100644 src/lib/best-pratice.ts create mode 100644 src/pages/best-practices/index.astro diff --git a/public/pdfs/checklists/frontend-performance.pdf b/public/pdfs/best-practices/frontend-performance.pdf similarity index 100% rename from public/pdfs/checklists/frontend-performance.pdf rename to public/pdfs/best-practices/frontend-performance.pdf diff --git a/src/best-practices/frontend-performance/frontend-performance.md b/src/best-practices/frontend-performance/frontend-performance.md index 7dbc39990..f13b87e9e 100644 --- a/src/best-practices/frontend-performance/frontend-performance.md +++ b/src/best-practices/frontend-performance/frontend-performance.md @@ -4,6 +4,8 @@ pdfUrl: "/pdfs/best-practices/frontend-performance.pdf" order: 1 featuredTitle: "Frontend Performance" featuredDescription: "Detailed list of best practices to improve your frontend performance" +isNew: true +isUpcoming: false title: "Frontend Performance" description: "Detailed list of best practices to improve your frontend performance" dimensions: diff --git a/src/components/FeaturedItems/FeaturedItems.astro b/src/components/FeaturedItems/FeaturedItems.astro index 867170151..61cc59c5c 100644 --- a/src/components/FeaturedItems/FeaturedItems.astro +++ b/src/components/FeaturedItems/FeaturedItems.astro @@ -9,11 +9,9 @@ export interface Props { const { featuredItems, heading } = Astro.props; --- -
+
- diff --git a/src/components/GridItem.astro b/src/components/GridItem.astro new file mode 100644 index 000000000..f6502d5b7 --- /dev/null +++ b/src/components/GridItem.astro @@ -0,0 +1,32 @@ +--- +import type { RoadmapFileType } from '../lib/roadmap'; + +export interface Props { + url: string; + title: string; + description: string; + isNew: boolean; +} + +const { url, title, description, isNew } = Astro.props; +--- + + + + {title} + + + + { + isNew && ( + + New + + ) + } + diff --git a/src/components/GridRoadmapItem.astro b/src/components/GridRoadmapItem.astro deleted file mode 100644 index d7ffb1542..000000000 --- a/src/components/GridRoadmapItem.astro +++ /dev/null @@ -1,31 +0,0 @@ ---- -import type { RoadmapFileType } from '../lib/roadmap'; - -export interface Props { - roadmap: RoadmapFileType; -} - -const { roadmap } = Astro.props; -const frontmatter = roadmap.frontmatter; ---- - - - {frontmatter.title} - - - { - frontmatter.isNew && ( - - New - - ) - } - diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index af7f6f1d0..ccef66007 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -14,6 +14,9 @@ import Icon from './Icon.astro';
  • Roadmaps
    • +
  • + Best Practices +
  • Guides
    • @@ -48,6 +51,9 @@ import Icon from './Icon.astro';
  • Roadmaps
    • +
  • + Best Practices +
  • Guides
    • diff --git a/src/lib/best-pratice.ts b/src/lib/best-pratice.ts new file mode 100644 index 000000000..219b4a7ae --- /dev/null +++ b/src/lib/best-pratice.ts @@ -0,0 +1,74 @@ +import type { MarkdownFileType } from './file'; +import type { SponsorType } from '../components/Sponsor/Sponsor.astro'; + +export interface BestPracticeFrontmatter { + jsonUrl: string; + pdfUrl: string; + order: number; + featuredTitle: string; + featuredDescription: string; + title: string; + description: string; + isNew: boolean; + isUpcoming: boolean; + dimensions?: { + width: number; + height: number; + }; + sponsor?: SponsorType; + seo: { + title: string; + description: string; + keywords: string[]; + }; + schema?: { + headline: string; + description: string; + datePublished: string; + dateModified: string; + imageUrl: string; + }; +} + +export type BestPracticeFileType = MarkdownFileType & { + id: string; +}; + +function bestPracticePathToId(filePath: string): string { + const fileName = filePath.split('/').pop() || ''; + + return fileName.replace('.md', ''); +} + +/** + * Gets the IDs of all the best practices available on the website + * + * @returns string[] Array of best practices file IDs + */ +export async function getBestPracticeIds() { + const bestPracticeFiles = await import.meta.glob('/src/best-practices/*/*.md', { + eager: true, + }); + + return Object.keys(bestPracticeFiles).map(bestPracticePathToId); +} + +/** + * Gets all the best practice files + * + * @param tag Tag assigned to best practice + * @returns Promisified BestPracticeFileType[] + */ +export async function getAllBestPractices(): Promise { + const bestPracticeFilesMap = await import.meta.glob('/src/best-practices/*/*.md', { + eager: true, + }); + + const bestPracticeFiles = Object.values(bestPracticeFilesMap); + const bestPracticeItems = bestPracticeFiles.map((bestPracticeFile) => ({ + ...bestPracticeFile, + id: bestPracticePathToId(bestPracticeFile.file), + })); + + return bestPracticeItems.sort((a, b) => a.frontmatter.order - b.frontmatter.order); +} diff --git a/src/pages/best-practices/index.astro b/src/pages/best-practices/index.astro new file mode 100644 index 000000000..0cf14fcad --- /dev/null +++ b/src/pages/best-practices/index.astro @@ -0,0 +1,37 @@ +--- +import GridItem from '../../components/GridItem.astro'; +import SimplePageHeader from '../../components/SimplePageHeader.astro'; +import BaseLayout from '../../layouts/BaseLayout.astro'; +import { getAllBestPractices } from '../../lib/best-pratice'; + +const bestPractices = await getAllBestPractices(); +--- + + + + +
    +
    +
    + { + bestPractices.map((bestPractice) => ( + + )) + } +
    +
    +
    +     \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index 32e929f7e..8cbbdb889 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,12 +3,14 @@ import FeaturedGuides from '../components/FeaturedGuides.astro'; import FeaturedItems from '../components/FeaturedItems/FeaturedItems.astro'; import FeaturedVideos from '../components/FeaturedVideos.astro'; import BaseLayout from '../layouts/BaseLayout.astro'; +import { getAllBestPractices } from '../lib/best-pratice'; import { getAllGuides } from '../lib/guide'; import { getRoadmapsByTag } from '../lib/roadmap'; import { getAllVideos } from '../lib/video'; const roleRoadmaps = await getRoadmapsByTag('role-roadmap'); const skillRoadmaps = await getRoadmapsByTag('skill-roadmap'); +const bestPractices = await getAllBestPractices(); const guides = await getAllGuides(); const videos = await getAllVideos(); @@ -20,7 +22,7 @@ const videos = await getAllVideos(); permalink={'/'} >
    -
    +

    + ({ + text: bestPractice.frontmatter.featuredTitle, + url: `/best-practices/${bestPractice.id}`, + isNew: bestPractice.frontmatter.isNew, + isUpcoming: bestPractice.frontmatter.isUpcoming, + }))} + /> +
    diff --git a/src/pages/roadmaps.astro b/src/pages/roadmaps.astro index 1ce1f552e..97a9e274a 100644 --- a/src/pages/roadmaps.astro +++ b/src/pages/roadmaps.astro @@ -1,5 +1,5 @@ --- -import GridRoadmapItem from '../components/GridRoadmapItem.astro'; +import GridItem from '../components/GridItem.astro'; import SimplePageHeader from '../components/SimplePageHeader.astro'; import BaseLayout from '../layouts/BaseLayout.astro'; import { getRoadmapsByTag } from '../lib/roadmap'; @@ -24,13 +24,23 @@ const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
    { roleRoadmaps.map((roleRoadmap) => ( - + )) } { skillRoadmaps.map((skillRoadmap) => ( - + )) }