Merge pull request #2 from thinc-org/dev

Dev

.eslintrc

@@ -87,7 +87,8 @@
                 "unused-imports/no-unused-vars": [
                     "error",
                     { "argsIgnorePattern": "^_" }
-                ]
+                ],
+                "import/no-extraneous-dependencies": "off" // mjs is only used by Astro for configuration, false positive
             }
         },
         // Configuration for Astro

.prettierrc

@@ -2,5 +2,13 @@
     "tabWidth": 4,
     "semi": true,
     "singleQuote": true,
-    "plugins": ["prettier-plugin-tailwindcss"]
+    "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-astro"],
+    "overrides": [
+        {
+            "files": "*.astro",
+            "options": {
+                "parser": "astro"
+            }
+        }
+    ]
 }

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "thinc-roadmap",
+    "name": "thinc-knowledge",
     "type": "module",
     "scripts": {
         "dev": "astro dev",
@@ -18,8 +18,10 @@
         "@types/react": "^18.0.21",
         "@types/react-dom": "^18.0.6",
         "astro": "^3.2.2",
+        "get-src": "^1.0.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
+        "rss-parser": "^3.13.0",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "^3.0.24"
     },
@@ -37,6 +39,7 @@
         "eslint-plugin-unused-imports": "^3.0.0",
         "prettier": "^3.0.3",
         "prettier-plugin-astro": "^0.12.0",
-        "prettier-plugin-tailwindcss": "^0.5.5"
+        "prettier-plugin-tailwindcss": "^0.5.5",
+        "react-icons": "^4.11.0"
     }
 }

src/components/Section.tsx

@@ -3,15 +3,21 @@ import { twMerge } from 'tailwind-merge';
 export const Section = ({
     children,
     className,
+    prose,
 }: {
     children: React.ReactNode;
-    className: string;
+    className?: string;
+    prose?: boolean;
 }) => {
     return (
-        <section
-            className={twMerge('flex w-full justify-center px-5', className)}
-        >
-            <div className="h-full w-full max-w-screen-lg py-8">{children}</div>
+        <section className={twMerge('flex w-full justify-center', className)}>
+            <div
+                className={`h-full w-full p-8 ${
+                    prose ? 'max-w-prose' : 'max-w-screen-lg'
+                }`}
+            >
+                {children}
+            </div>
         </section>
     );
 };

src/components/blog/BlogCard.tsx

@@ -0,0 +1,23 @@
+export const BlogCard = ({
+    title,
+    link,
+    imgSrc,
+}: {
+    title: string;
+    link: string;
+    imgSrc: string;
+}) => {
+    return (
+        <a
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="space-y-4 rounded-lg border bg-white p-4"
+        >
+            <div className="grid h-36 w-full place-content-center overflow-hidden rounded-md">
+                <img src={imgSrc} className="scale-110" />
+            </div>
+            <h4 className="text-lg font-semibold text-slate-700">{title}</h4>
+        </a>
+    );
+};

src/components/roadmap/LevelTag.tsx

@@ -0,0 +1,23 @@
+export const LevelTag = ({ level }: { level: string }) => {
+    const colorSchema = {
+        beginner: '#4ade80',
+        intermediate: '#fbbf24',
+        advanced: '#ef4444',
+    };
+
+    const color = colorSchema as Record<string, string>;
+
+    return (
+        <div className="flex">
+            <div
+                className="rounded-full px-2 py-1 text-xs font-semibold uppercase"
+                style={{
+                    color: color[level],
+                    backgroundColor: `${color[level]}15`,
+                }}
+            >
+                {level}
+            </div>
+        </div>
+    );
+};

src/components/roadmap/RoadmapCard.tsx

@@ -0,0 +1,40 @@
+import { twMerge } from 'tailwind-merge';
+
+import { LevelTag } from './LevelTag';
+
+export const RoadmapCard = ({
+    className,
+    slug,
+    level,
+    title,
+    description,
+}: {
+    className?: string;
+    slug: string;
+    level: string;
+    title: string;
+    description: string;
+}) => {
+    return (
+        <div
+            className={twMerge(
+                'flex w-full rounded-lg border-2 bg-slate-50',
+                className,
+            )}
+        >
+            <a
+                href={`/roadmap/${slug}`}
+                className="flex h-full w-full items-center px-10 py-8 text-center"
+            >
+                <div className="text-left">
+                    <LevelTag level={level} />
+
+                    <h3 className="mt-1 text-2xl font-semibold text-slate-800">
+                        {title}
+                    </h3>
+                    <p className="text-slate-600">{description}</p>
+                </div>
+            </a>
+        </div>
+    );
+};

src/consts.ts

@@ -1,5 +1,5 @@
 // Place any global data in this file.
 // You can import this data from anywhere in your site by using the `import` keyword.
 
-export const SITE_TITLE = 'Thinc Roadmap';
-export const SITE_DESCRIPTION = 'Thinc First Act Roadmap';
+export const SITE_TITLE = 'Thinc Knowledgee';
+export const SITE_DESCRIPTION = 'Thinc Knowledge';