בנה ספריית תוכן הניתנת לסינון עם Claude Code

הבעיה

יש לך אוסף גדל של תוכן — הדרכות, מאמרים, משאבים, כל מה שזה לא יהיה — והאתר שלך פשוט מערם אותם מלמעלה למטה. עשר כרטיסיות זה בסדר. עשרים זה קיר. המבקרים לא מוצאים מה הם מחפשים, אז הם עוזבים. אתה יודע שאתה צריך חיפוש וסינונים, אבל לחזור על סינון אינטראקטיבי מאפס? זה אחר הצהריים שאין לך.

מה אתה בונה

קובץ HTML יחיד שפועל כספריית תוכן מלאה — רשת כרטיסיות רספונסיבית, חיפוש חי, כפתורי קטגוריה שניתן ללחוץ עליהם, תגי דרגת קושי, ומיון. פתח אותו בדפדפן והוא עובד. אין Node.js, אין סביבות עבודה, אין שלב בנייה. הטל את הנתונים שלך והוציא לדחיסה בכל מקום.

שלב 1: רשת הכרטיסיות

כל ספריה מתחילה עם משהו לדפדוף. בואו נבנה את הבסיס — רשת רספונסיבית של כרטיסיות תוכן שכבר נראית כמו מוצר אמיתי.

הנושא:

Create a single index.html file — a content library page. Add 9 sample cards in a responsive grid (1 column mobile, 2 tablet, 3 desktop). Each card has: title, short description (1 line), category badge (Productivity/Marketing/Finance/General), difficulty badge (Beginner = green, Intermediate = amber, Advanced = red), and read time. Make sure the 9 cards cover all four categories and all three difficulty levels. Use modern CSS — rounded corners, subtle shadows, smooth hover lift. No frameworks, no external CSS. Make it look like a premium learning platform. Include all styles in a style block.

מה Claude Code עושה: זה יוצר עמוד HTML מלא עם CSS Grid לעיצוב רספונסיבי — אין טריקים עם media queries, פשוט grid-template-columns נקי עם auto-fit. כל כרטיס מקבל תכונות נתונים לקטגוריה ודרגת קושי, שנשתמש בהן לסינון בהמשך.

נסה: פתח את index.html בדפדפן שלך. אתה אמור לראות 9 כרטיסיות ברשת של 3 עמודות. שנה את גודל הדפדפן שלך — הם צריכים להתמוטט ל-2, אז ל-1 עמודה. עבור על כרטיס — הוא אמור להרים עצמו בעדינות.

שלב 2: חיפוש חי

רשת בלי חיפוש היא פשוט קיר יותר יפה. בואו נהפוך אותו לאינטראקטיבי.

הנושא:

Add a search bar above the card grid with a magnifying glass icon (use an SVG). As the user types, filter the cards in real-time — match against both the title and description. If nothing matches, show a centered "No results found" message with a subtle icon. The search should be case-insensitive and feel instant.

מה Claude Code עושה: זה מוסיף מאזיין קלט שרץ עם כל הקשה במקלדת, משווה את טקסט החיפוש מול הכותרת והתיאור של כל כרטיס. כרטיסיות שלא מתאימות מוסתרות עם display: none. זה סינון בצד הלקוח — אין שרת, אין API, תגובה מיידית.

נסה: הקלד "מניות" בסרגל החיפוש. רק כרטיסיות עם "מניות" בכותרת או בתיאור צריכות להישאר. נקה את החיפוש — כל הכרטיסיות חוזרות. הקלד משהו אקראי — אתה אמור לראות את הודעת "לא נמצאו תוצאות".

שלב 3: כפתורי סינון קטגוריה

חיפוש עוזר לאנשים שיודעים מה הם רוצים. סינונים לפי קטגוריה עוזרים לכולם — פשוט לחץ ודפדף.

הנושא:

Add category filter pills above the card grid (below the search bar): All, Productivity, Marketing, Finance, General. Each pill shows the count of cards in that category. Clicking a pill filters the grid. The active pill gets a solid primary color (indigo), inactive pills are light gray. Make sure search and category filters work together — if I search "stock" and click "Finance", it shows only Finance cards matching "stock."

מה Claude Code עושה: זה בונה מערכת סינון קומפוזיבילית — סינון הקטגוריה לא מחליף את סינון החיפוש, הוא מתאפיל עליו. שתי התנאים חייבות להתקיים כדי שכרטיס יופיע. מספר הכפתורים של הקטגוריה בא מהנתונים, אז הם תמיד מדויקים.

נסה: לחץ על "שיווק" — רק כרטיסיות שיווק מופיעות. לחץ על "הכל" — הכל מאופס. עכשיו הקלד "בנה" בחיפוש, אז לחץ על "פרודוקטיביות" — אתה אמור לראות רק כרטיסיות פרודוקטיביות עם "בנה" בכותרת או בתיאור. שני הסינונים עובדים ביחד.

שלב 4: סינונים דרגת קושי

המבקרים שלך יכולים לחפש ולדפדף לפי נושא. אבל מישהו שמחפש ניצחון מהיר לרמת מתחילים עדיין צריך לסרוק כל כרטיס. בואו נתקן את זה.

הנושא:

Add a second row of difficulty filter pills below the category pills: All, Beginner, Intermediate, Advanced. Style them differently from category pills — smaller, with a border outline instead of a filled background. The active one should be dark (inverted). All three filters (search + category + difficulty) must combine — if I pick "Marketing" and "Beginner", I only see beginner marketing cards.

מה Claude Code עושה: זה מרחיב את פונקציית הסינון לבדיקת שלוש תנאים: התאמת חיפוש ו-התאמת קטגוריה ו-התאמת דרגת קושי. זה סינונים קומפוזיביליים בפעולה — כל שכבה היא עצמאית, אבל הם כולם משתלבים דרך פונקציית סינון יחידה. אותו דפוס מונע כל אתר מסחר אלקטרוני שאי פעם ביקרת בו.

נסה: לחץ על "כלכלה", אז "ביניים" — רק כרטיסיות כלכלה בדרגת ביניים מופיעות. הוסף מונח חיפוש בחלקו העליון. כל שלוש השכבות צריכות לצמצם את התוצאות. נקה הכל וכל 9 הכרטיסיות חוזרות.

שלב 5: מיון + חתימה סופית

הסינונים מצמצמים דברים. עכשיו בואו נתן למבקרים שליטה על הסדר — ונהפוך את כל העמוד להרגיש כמו מוצר שהוצא לאור.

הנושא:

Add a sort dropdown next to the search bar with a sliders icon. Three options: "Recommended" (default order), "Easiest first" (Beginner → Advanced), "Shortest first" (by read time). When the user changes sort, the cards reorder with smooth transitions. Also add: a gradient header section with a title and subtitle, smooth transitions when cards show/hide, and a centered "Can't find what you need?" link at the bottom.

מה Claude Code עושה: המיון פועל על ידי סידור מחדש של אלמנטים בעץ DOM על סמך תכונות נתונים — הוא קורא את דרגת הקושי או זמן הקריאה של כל כרטיס, ממיין את המערך, ותופס אותם מחדש לרשת בסדר החדש. ה-CSS transitions מטפלים בהאפקט הוויזואלי החלק.

נסה: שנה את המיון ל"קל ראשון" — כרטיסיות מתחילים עולים לחלקו העליון. עבור ל"קצר ראשון" — כרטיסיות מסתדרות מחדש לפי זמן קריאה. שלב הכל: בחר קטגוריה, דרגת קושי, מיון לפי קל, וחפש — הכל עובד ביחד. שנה גודל למובייל — העמוד כולו צריך להיות רספונסיבי.

מה בנית

התחלת עם קובץ ריק והסתיימת עם ספריית תוכן מלאה וחיקויית — חיפוש, שתי שכבות של כפתורי סינון, מיון, עיצוב רספונסיבי, וטיפול מלוטש. אין React, אין Next.js, אין npm install. קובץ HTML יחיד שאתה יכול לפתוח בכל מקום.

זוכר את הקיר של תוכן? זה עתה הפכת אותו למשהו שאנשים יכולים בעצם לנווט. הדפוסים כאן — CSS Grid לעיצוב רספונסיבי, סינון בצד הלקוח לחיפוש מיידי, ו-סינונים קומפוזיביליים שמתאפיים באופן עצמאי — הם אותם דפוסים מאחורי כל ספריית תוכן שאי פעם השתמשת בה.

קח את זה הלאה

• הוסף את הנתונים שלך — החלף את כרטיסיות הדוגמה בתוכן בפועל שלך. כל כרטיס הוא בלוק HTML עם תכונות נתונים.
• הוסף תוכן עניינים — לתוכן דפים ארוך יותר, חלץ כותרות ובנה סרגל ניווט בצד שניתן ללחוץ עליו.
• התחבר למסד נתונים — החלף את הכרטיסיות הסטטיים בנתונים שהנתקו מ-Supabase או Airtable והיה לך פלטפורמת תוכן דינמית.