fix #69

adding levels based on coding and method difficulty

src/components/App.astro

@@ -7,8 +7,9 @@ import Footer from '../components/Footer';
 import { getCollection, getEntry } from 'astro:content';
 import { getRecursivelyEntryData } from '../logic'
 import Modals from './Modals';
-import type { Collection } from './CollectionCard';
+
 import { SeriesPositionLeadingColumn, SeriesPositionCentralColumn, SeriesPositionTrailingColumn } from '../constants';
+import type { Series } from '../types';
 
 
 const authors = await getCollection('authors')
@@ -26,7 +27,7 @@ for(const seriesEntry of series){
   seriesDataIndex[seriesEntry.id]['body'] = seriesEntry.body
 }
 
-const seriesValues:Collection[] = Object.values(seriesDataIndex) 
+const seriesValues:Series[] = Object.values(seriesDataIndex) 
 
 const associatedPartners = await getCollection('associatedPartners')
 const associatedPartnersData = associatedPartners.map((entry) => {

src/components/AuthorCard.tsx

@@ -1,8 +1,4 @@
-export interface Author {
-  id: string
-  name: string
-  fullName?: string
-}
+import type { Author } from "../types"
 
 const AuthorCard: React.FC<{ author: Author }> = ({ author }) => {
   return <b>{author.fullName ?? author.name}</b>

src/components/NotebookCard.css

@@ -5,7 +5,7 @@
   overflow: hidden;
 }
 
-.CollectionCard a {
+.SeriesCard a {
   text-decoration: none;
 }
 

src/components/NotebookCard.tsx

@@ -1,25 +1,11 @@
-import AuthorCard, { type Author } from "./AuthorCard.tsx"
+import AuthorCard from "./AuthorCard.tsx"
 import "./NotebookCard.css"
 import Link from "./Link.tsx"
 import Avatar from "boring-avatars"
 import { ArrowRight } from "iconoir-react"
 import { DateTime } from "luxon"
-
-export interface Notebook {
-  id: string
-  href: string
-  title: string
-  langModel?: string
-  excerpt?: string
-  githubUrl?: string
-  googleColabUrl?: string
-  sha?: string
-  authors: Author[]
-  date?: Date
-  seealso?: Notebook[]
-  showLinks?: boolean
-  links?: { label: string; href: string }[]
-}
+import type { Notebook } from "../types.ts"
+import { NotebookLevelColors } from "../constants.ts"
 
 // const AvatarVariants = ["marble", "beam", "pixel", "sunset", "ring", "bauhaus"]
 const NotebookCard: React.FC<{
@@ -35,17 +21,21 @@ const NotebookCard: React.FC<{
     "- title:",
     notebook?.title,
     "notebook.langModel",
-    notebook.langModel
+    notebook.langModel,
+    notebook
   )
   return (
     <div className={`NotebookCard shadow-sm ${className}`}>
       <div className="px-3 py-2 d-flex align-items-center">
         <div className="Avatar position-relative">
           <Avatar
             size={40}
-            name={notebook.href}
+            name={notebook.id}
             variant="marble"
             square={false}
+            colors={NotebookLevelColors[notebook.levels.method].concat(
+              NotebookLevelColors[notebook.levels.coding]
+            )}
           />
         </div>
         <div className="mx-3">

src/components/NotebookModal.tsx

@@ -1,6 +1,6 @@
 import Page from "./Page"
-import type { Notebook } from "./NotebookCard"
 import NotebookViewer from "./NotebookViewer"
+import type { Notebook } from "../types"
 
 interface NotebookModalProps {
   notebook: Notebook

src/components/NotebookViewer.tsx

@@ -2,14 +2,13 @@ import React from "react"
 import { Col, Container, Row } from "react-bootstrap"
 import CodeSnippet from "./CodeSnippet"
 import MarkdownSnipped from "./MarkdownSnippet"
-import type { Notebook } from "./NotebookCard"
 import NotebookCard from "./NotebookCard"
 import AuthorCard from "./AuthorCard"
 import Alert from "./Alert"
 import { DateTime } from "luxon"
 import "./NotebookViewer.css"
 import { OverlayTrigger, Tooltip } from "react-bootstrap"
-import type { CellInfo } from "../types"
+import type { CellInfo, Notebook } from "../types"
 import { ModelLanguagesLabels } from "../constants"
 
 export interface NotebookViewerProps {

src/components/NotebooksModal.tsx

@@ -1,7 +1,7 @@
 import Page from "./Page"
-import type { Notebook } from "./NotebookCard"
 import NotebookCard from "./NotebookCard"
 import { Col, Container, Row } from "react-bootstrap"
+import type { Notebook } from "../types"
 
 interface NotebookModalProps {
   notebooks: Notebook[]

src/components/RegisterForm.tsx

@@ -7,7 +7,6 @@ import {
   PlanEducational,
   PlanLabels,
   BrowserViewTermsOfUse,
-  PlanResearcherPlus,
 } from "../constants"
 import { useBrowserStore, usePersistentStore } from "../store"
 import { DateTime } from "luxon"

src/components/CollectionCard.css → src/components/SeriesCard.css

@@ -1,30 +1,30 @@
-.CollectionCard {
+.SeriesCard {
   position: relative;
   overflow: hidden;
   border-radius: var(--impresso-border-radius-lg);
   box-shadow: var(--shadow-lg);
   background-color: rgba(255, 255, 255, 0.29);
 }
 
-.CollectionCard ol {
+.SeriesCard ol {
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
-.CollectionCard h2,
-.CollectionCard h3 {
+.SeriesCard h2,
+.SeriesCard h3 {
   font-size: inherit;
   font-weight: var(--impresso-wght-bold);
 
   font-variation-settings: "wght" var(--impresso-wght-bold);
 }
-.CollectionCard h2 {
+.SeriesCard h2 {
   font-size: 1.5rem;
   margin: 0;
   font-variation-settings: "wght" var(--impresso-wght-medium);
 }
-.CollectionCard .map-bg img {
+.SeriesCard .map-bg img {
   position: absolute;
   top: 0;
   left: 0;
@@ -35,7 +35,7 @@
   object-fit: cover;
 }
 
-.CollectionCard .overlay {
+.SeriesCard .overlay {
   position: absolute;
   z-index: -1;
   top: 0;

src/components/SeriesCard.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import "./SeriesCard.css"
+import NotebookCard from "./NotebookCard.tsx"
+import MarkdownSnippet from "./MarkdownSnippet.tsx"
+import type { Series } from "../types.ts"
+
+/**
+ * Props for the SeriesCard component.
+ *
+ * @interface SeriesCardProps
+ * @extends {React.HTMLProps<HTMLDivElement>}
+ *
+ * @property {Series} series - The series data to be displayed in the card.
+ */
+export interface SeriesCardProps extends React.HTMLProps<HTMLDivElement> {
+  series: Series
+}
+
+const SeriesCard: React.FC<SeriesCardProps> = ({
+  className = "",
+  series,
+  children,
+}) => {
+  if (!series) {
+    console.error("[SeriesCard] - series is not defined")
+    return null
+  }
+  const hasCover = series.cover?.url
+  return (
+    <div className={`SeriesCard d-flex flex-column ${className}`}>
+      <section className="p-3">
+        <h2>{series.title}</h2>
+        <h3>{series.excerpt}</h3>
+        {series.body ? <MarkdownSnippet value={series.body} /> : null}
+        {children}
+      </section>
+      <ol className="mb-3 mx-3">
+        {series.notebooks.map((notebook) => (
+          <li key={notebook.href} className="mt-2">
+            <NotebookCard notebook={notebook} />
+          </li>
+        ))}
+      </ol>
+      {hasCover && (
+        <div className="map-bg">
+          <div className="overlay"></div>
+          <img src={series.cover?.url} alt={series.cover?.alt} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default SeriesCard