Add support for link-groups

2 years ago · b741a0e1ee
parent 8200993af4
commit b741a0e1ee
7 changed files with 117 additions and 10 deletions
--- a/sitemap.mjs
+++ b/sitemap.mjs
@ -9,13 +9,14 @@ async function getBestPracticesIds() {
  return fs.readdir(path.join(process.cwd(), 'src/best-practices'));
 }

-export function shouldIndexPage(page) {
+export function shouldIndexPage(pageUrl) {
  return ![
    'https://roadmap.sh/404',
    'https://roadmap.sh/terms',
    'https://roadmap.sh/privacy',
    'https://roadmap.sh/pdfs',
-  ].includes(page);
+    'https://roadmap.sh/g',
+  ].includes(pageUrl);
 }

 export async function serializeSitemap(item) {
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -11,6 +11,7 @@ import Analytics from '../components/Analytics/Analytics.astro';

 export interface Props {
  title: string;
+  redirectUrl?: string;
  description?: string;
  keywords?: string[];
  noIndex?: boolean;
@ -29,6 +30,7 @@ const {
  canonicalUrl: givenCanonical = '',
  sponsor,
  jsonLd = [],
+  redirectUrl = '',
 } = Astro.props;

 // Remove trailing slashes to consider the page as canonical
@ -49,6 +51,7 @@ const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${i
    <meta name='description' content={description} />
    <meta name='author' content='Kamran Ahmed' />
    <meta name='keywords' content={keywords.join(', ')} />
+    {redirectUrl && <meta http-equiv='refresh' content={`1;url=${redirectUrl}`} />}
    {noIndex && <meta name='robots' content='noindex' />}
    <meta
      name='viewport'
@ -92,14 +95,19 @@ const commitUrl = `https://github.com/kamranahmedse/developer-roadmap/commit/${i
    {jsonLd.length > 0 && <script type='application/ld+json' set:html={JSON.stringify(jsonLd)} />}
  </head>
  <body>
+    <slot name='page-header'>
      <YouTubeBanner />
      <Navigation />
+    </slot>
+
    <slot />

+    <slot name='page-footer'>
      <OpenSourceBanner />
      <Footer />
      {sponsor && <Sponsor sponsor={sponsor} />}
      <slot name='after-footer' />
      <Analytics />
+    </slot>
  </body>
 </html>
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@ -5,7 +5,7 @@ const { frontmatter = {} } = Astro.props;
 const { title, description, noIndex = false } = frontmatter;
 ---

-<BaseLayout title={title} description={description} noIndex={noIndex}>
+<BaseLayout {...frontmatter}>
  <div class='container prose py-12'>
    <slot />
  </div>
--- a/src/layouts/SkeletonLayout.astro
+++ b/src/layouts/SkeletonLayout.astro
@ -0,0 +1,13 @@
+---
+import BaseLayout, { Props as BaseLayoutProps } from './BaseLayout.astro';
+
+export interface Props extends BaseLayoutProps {}
+
+const props = Astro.props;
+---
+
+<BaseLayout {...props}>
+  <div slot='page-header'></div>
+  <slot />
+  <div slot='page-footer'></div>
+</BaseLayout>
--- a/src/lib/link-group.ts
+++ b/src/lib/link-group.ts
@ -0,0 +1,39 @@
+import type { MarkdownFileType } from './file';
+
+export interface LinkGroupFrontmatter {
+  [key: string]: string;
+}
+
+export type LinkGroupFileType = MarkdownFileType<LinkGroupFrontmatter> & {
+  id: string;
+};
+
+/**
+ * Generates id from the given linkGroup file
+ * @param filePath Markdown file path
+ *
+ * @returns unique linkGroup identifier
+ */
+function linkGroupPathToId(filePath: string): string {
+  const fileName = filePath.split('/').pop() || '';
+
+  return fileName.replace('.md', '');
+}
+
+/**
+ * Gets all the linkGroups sorted by the publishing date
+ * @returns Promisifed linkGroup files
+ */
+export async function getAllLinkGroups(): Promise<LinkGroupFileType[]> {
+  const linkGroups = await import.meta.glob<LinkGroupFileType>('/src/link-groups/*.md', {
+    eager: true,
+  });
+
+  const linkGroupFiles = Object.values(linkGroups);
+  const enrichedLinkGroups = linkGroupFiles.map((linkGroupFile) => ({
+    ...linkGroupFile,
+    id: linkGroupPathToId(linkGroupFile.file),
+  }));
+
+  return enrichedLinkGroups;
+}
--- a/src/link-groups/1.md
+++ b/src/link-groups/1.md
@ -0,0 +1,7 @@
+---
+speedup-js: https://marvinh.dev/blog/speeding-up-javascript-ecosystem/
+23-min-ts: https://www.youtube.com/watch?v=YmxwicpROps
+bun-vs-node: https://www.youtube.com/watch?v=qCX8rw4qOSA
+aws-2023: https://cs.fyi/guide/how-to-learn-aws/
+db-playground: https://github.com/kamranahmedse/db-playground
+---
--- a/src/pages/g/[linkGroupId]/[linkId].astro
+++ b/src/pages/g/[linkGroupId]/[linkId].astro
@ -0,0 +1,39 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
+import { getAllLinkGroups } from '../../../lib/link-group';
+
+export async function getStaticPaths() {
+  const linkGroups = await getAllLinkGroups();
+
+  return linkGroups.flatMap((linkGroup) => {
+    const linkGroupLinks = linkGroup.frontmatter;
+
+    return Object.keys(linkGroupLinks).map((slug) => {
+      return {
+        params: {
+          linkGroupId: linkGroup.id,
+          linkId: slug,
+        },
+        props: {
+          linkGroup,
+        },
+      };
+    });
+  });
+}
+
+const { linkId } = Astro.params;
+const { linkGroup } = Astro.props;
+
+const fullUrl = linkGroup.frontmatter[linkId!];
+---
+
+<SkeletonLayout title='Redirecting..' noIndex={true} redirectUrl={fullUrl}>
+  <div class='p-8'>
+    <h2 class='text-xl font-bold'>Redirecting ..</h2>
+    <p>Click the link below if you are not redirected automatically.</p>
+
+    <p><a href={fullUrl} class='underline text-blue-700'>{fullUrl}</a></p>
+  </div>
+</SkeletonLayout>