Greg/MyFavStuff3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize Astro project with books collection and TailwindCSS setup

Browse Source
This commit is contained in:
greg 2025-05-21 00:37:53 +02:00
parent b814a25532
commit 86b335845d
21 changed files with 6187 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store
# jetbrains setting folder
.idea/

4
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,4 @@
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}

11
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,11 @@
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}

11
astro.config.mjs Normal file
View File

@ -0,0 +1,11 @@
// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [tailwindcss()]
}
});

16
content/books/my-first-book copy.md Normal file
View File

@ -0,0 +1,16 @@
---
title: "Dune 2"
year: 1966
media_type: "book"
genre: "Brol"
rating: 5
cover: "/covers/dune-placeholder.jpg"
status: "Read"
date_added: "2025-05-20"
tags: ["classic", "epic"]
author: "Frank Herbert"
pages: 412
isbn: "978-0441172719"
---
A masterpiece of science fiction, exploring themes of politics, religion, ecology, and human evolution on the desert planet Arrakis.

16
content/books/my-first-book.md Normal file
View File

@ -0,0 +1,16 @@
---
title: "Dune"
year: 1965
media_type: "book"
genre: "Science Fiction"
rating: 5
cover: "/covers/dune-placeholder.jpg"
status: "Read"
date_added: "2025-05-20"
tags: ["classic", "epic"]
author: "Frank Herbert"
pages: 412
isbn: "978-0441172719"
---
A masterpiece of science fiction, exploring themes of politics, religion, ecology, and human evolution on the desert planet Arrakis.

5736
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

20
package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "my-fav-stuff",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@tailwindcss/vite": "^4.1.7",
"astro": "^5.7.13",
"tailwindcss": "^4.1.7"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.7",
"autoprefixer": "^10.4.21"
}
}

6
postcss.config.cjs Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
'@tailwindcss/postcss': {},
autoprefixer: {},
},
};

1
public/covers/.gitkeep Normal file
View File

@ -0,0 +1 @@

9
public/favicon.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

BIN
public/placeholder-cover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

1
public/placeholder-covera.png Normal file
View File

@ -0,0 +1 @@

BIN
public/placeholder-coverbig.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

56
src/components/MediaCard.astro Normal file
View File

@ -0,0 +1,56 @@
---
// src/components/MediaCard.astro
let { title, cover, rating, url, description, author } = Astro.props; // Default destructuring for individual props
// If bookData is passed (e.g., from Alpine client-side rendering), parse it
if (Astro.props.bookData) {
try {
const parsedData = JSON.parse(Astro.props.bookData);
// Try both top-level and frontmatter fields
title = parsedData.title || (parsedData.frontmatter && parsedData.frontmatter.title);
cover = parsedData.cover || (parsedData.frontmatter && parsedData.frontmatter.cover);
rating = parsedData.rating || (parsedData.frontmatter && parsedData.frontmatter.rating);
url = parsedData.url;
description = parsedData.description || (parsedData.frontmatter && parsedData.frontmatter.description);
author = parsedData.author || (parsedData.frontmatter && parsedData.frontmatter.author);
} catch (e) {
console.error("MediaCard: Failed to parse bookData JSON", e, Astro.props.bookData);
// Fallback to individual props or defaults will apply if parsing fails
}
}
const placeholderCover = "/placeholder-cover.png"; // A generic placeholder if a cover is missing
---
<div class="bg-slate-50 border-2 border-sky-500 rounded-xl shadow-lg w-56 mx-auto p-4 my-4 transition-all duration-200 hover:shadow-2xl">
<a href={url} class="block">
<img
src={cover || placeholderCover}
alt={title ? `Cover for ${title}` : 'Book cover'}
class="w-full h-24 object-contain bg-gray-100 rounded-t-lg"
onerror={`this.onerror=null;this.src='${placeholderCover}';`}
/>
</a>
<div class="p-2">
<h3 class="text-sm font-semibold text-slate-800 mb-1 truncate">
<a href={url} class="hover:text-sky-600">{title}</a>
</h3>
{author && (
<p class="text-xs text-slate-500 mb-1">by {author}</p>
)}
{rating && (
<p class="text-xs text-slate-600 mb-1">Rating: {rating}/5</p>
)}
{description && (
<p class="text-xs text-slate-700 mt-1 overflow-hidden" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{description}</p>
)}
</div>
</div>
<style>
/* Basic placeholder styling, Tailwind will handle most of it */
img[src$="placeholder-cover.png"] {
object-fit: contain; /* Or 'scale-down' to ensure it fits without cropping */
background-color: #e9ecef; /* Light gray background for placeholder */
}
</style>

82
src/components/SiteLayout.astro Normal file
View File

@ -0,0 +1,82 @@
---
// SiteLayout.astro: Shared layout for header and navigation
import '../styles/global.css';
const { title = "My fav stuff", activeTab = "books" } = Astro.props;
const navTabs = [
{ label: "Books", href: "/books", key: "books" },
{ label: "Movies", href: "/movies", key: "movies" },
{ label: "TVSeries", href: "/tv-series", key: "tv-series" },
];
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<slot name="head" />
<style>
.fab {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 50;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: #0ea5e9;
color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
cursor: pointer;
transition: background 0.2s;
}
.fab:hover { background: #0369a1; }
.hamburger {
width: 2rem;
height: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
margin-right: 1rem;
}
.hamburger span {
height: 0.25rem;
background: #334155;
margin: 0.2rem 0;
border-radius: 2px;
width: 100%;
display: block;
}
</style>
</head>
<body class="font-sans bg-slate-50 text-slate-900 min-h-screen">
<header class="mb-4 flex flex-col md:flex-row items-center p-4 bg-white shadow rounded-lg">
<div class="flex items-center w-full mb-2 md:mb-0">
<div class="hamburger" title="Menu">
<span></span>
<span></span>
<span></span>
</div>
<h1 class="text-2xl font-bold text-slate-700 flex-1">{title}</h1>
</div>
<nav class="w-full md:w-auto">
<ul class="flex space-x-4 justify-center md:justify-start">
{navTabs.map(tab => (
<li>
<a href={tab.href} class={`font-medium px-3 py-1 rounded ${activeTab === tab.key ? 'bg-sky-100 text-sky-700 underline' : 'text-slate-600 hover:text-sky-600'}`}>{tab.label}</a>
</li>
))}
</ul>
</nav>
</header>
<main class="px-2 md:px-8">
<slot />
</main>
<a class="fab" href="#" title="Add new item">+</a>
</body>
</html>

157
src/pages/books.astro Normal file
View File

@ -0,0 +1,157 @@
---
// src/pages/books.astro
import SiteLayout from '../components/SiteLayout.astro';
import MediaCard from '../components/MediaCard.astro';
import '../styles/global.css';
const bookImports = import.meta.glob('../../content/books/*.md');
let allBooksAstro = []; // Use let to reassign after sorting
for (const path in bookImports) {
const bookModule = await bookImports[path]();
allBooksAstro.push({
frontmatter: bookModule.frontmatter,
url: bookModule.url || path.replace('../../content', '').replace('.md', ''),
description: bookModule.frontmatter.description || bookModule.rawContent()?.substring(0, 100) + '...' || 'No description available.',
// Ensure all necessary fields for filtering are directly accessible
genre: bookModule.frontmatter.genre,
rating: bookModule.frontmatter.rating,
title: bookModule.frontmatter.title, // for sorting
cover: bookModule.frontmatter.cover // for MediaCard
});
}
// Sort books by title alphabetically
allBooksAstro.sort((a, b) => a.title.localeCompare(b.title));
const uniqueGenres = [...new Set(allBooksAstro.map(book => book.genre).filter(Boolean))].sort();
const ratings = [5, 4, 3, 2, 1];
const pageTitle = "My Books Collection";
const booksFoundCount = allBooksAstro.length;
// Data to pass to Alpine.js
const alpineData = {
alpineBooks: allBooksAstro,
uniqueGenres,
ratings
};
---
<SiteLayout title={pageTitle} activeTab="books">
<div class="container mx-auto px-4 py-8" x-data="page" x-init="init()">
<header class="mb-8 text-center">
<h1 class="text-4xl font-bold text-slate-800">{pageTitle}</h1>
{booksFoundCount > 0 && (
<p class="text-lg text-slate-600 mt-2">
Displaying <span x-text="filteredBooks.length"></span> of {booksFoundCount} books.
</p>
)}
</header>
<!-- Filters -->
{booksFoundCount > 0 && (
<div class="mb-8 p-4 bg-slate-100 rounded-lg shadow">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
<div>
<label for="genre-filter" class="block text-sm font-medium text-slate-700 mb-1">Genre</label>
<select id="genre-filter" x-model="selectedGenre" class="mt-1 block w-full py-2 px-3 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm">
<option value="">All Genres</option>
<template x-for="genre in genres" :key="genre">
<option :value="genre" x-text="genre"></option>
</template>
</select>
</div>
<div>
<label for="rating-filter" class="block text-sm font-medium text-slate-700 mb-1">Min. Rating</label>
<select id="rating-filter" x-model="selectedRating" class="mt-1 block w-full py-2 px-3 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm">
<option value="">All Ratings</option>
<template x-for="rating in ratings" :key="rating">
<option :value="rating" x-text="`${rating} Stars`"></option>
</template>
</select>
</div>
<div class="md:mt-auto">
<button @click="resetFilters()" class="w-full bg-slate-500 hover:bg-slate-600 text-white font-semibold py-2 px-4 rounded-md shadow-sm sm:text-sm">
Reset Filters
</button>
</div>
</div>
</div>
)}
<!-- Book Grid -->
{booksFoundCount > 0 ? (
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-8 md:gap-10 justify-items-center">
{allBooksAstro.map(book => (
<div x-show={`$store && $store.matchesFilters ? $store.matchesFilters(${JSON.stringify(book)}) : true`}> {/* fallback to show all if Alpine not ready */}
<MediaCard
title={book.title || (book.frontmatter && book.frontmatter.title)}
cover={book.cover || (book.frontmatter && book.frontmatter.cover)}
rating={book.rating || (book.frontmatter && book.frontmatter.rating)}
url={book.url}
description={book.description || (book.frontmatter && book.frontmatter.description)}
author={book.author || (book.frontmatter && book.frontmatter.author)}
/>
</div>
))}
</div>
) : (
<div class="text-center py-10">
<p class="text-xl text-slate-500">No books found in your collection yet.</p>
<p class="text-slate-400 mt-2">Try adding some markdown files to the <code>content/books</code> directory.</p>
</div>
)}
<!-- Empty state for filters -->
<template x-if="booksFoundCount > 0 && filteredBooks.length === 0">
<div class="text-center py-10">
<p class="text-xl text-slate-500">No books match your current filters.</p>
<p class="text-slate-400 mt-2">Try adjusting or resetting your filters.</p>
</div>
</template>
</div>
</SiteLayout>
<script define:vars={alpineData} is:inline>
document.addEventListener('alpine:init', () => {
Alpine.data('page', () => ({
allBooks: alpineBooks, // from define:vars
genres: uniqueGenres, // from define:vars
ratings: ratings, // from define:vars
selectedGenre: '',
selectedRating: '',
init() {
// Could load filters from localStorage here if desired
console.log('Alpine component initialized with', this.allBooks.length, 'books.');
},
get filteredBooks() {
if (!this.allBooks) return [];
return this.allBooks.filter(book => {
const genreMatch = this.selectedGenre === '' || book.genre === this.selectedGenre;
const ratingValue = book.rating;
const selectedRatingValue = this.selectedRating === '' ? '' : parseInt(this.selectedRating);
let ratingMatch = this.selectedRating === '' || (ratingValue !== undefined && ratingValue !== null && ratingValue >= selectedRatingValue);
// Temporary debug log for rating filter
if (this.selectedRating !== '') {
console.log(
`Book: "${book.title}", Book Rating: ${ratingValue} (type: ${typeof ratingValue}), ` +
`Selected Dropdown Rating: "${this.selectedRating}" (type: ${typeof this.selectedRating}), ` +
`Parsed Selected: ${selectedRatingValue} (type: ${typeof selectedRatingValue}), Match: ${ratingMatch}`
);
}
return genreMatch && ratingMatch;
});
},
resetFilters() {
this.selectedGenre = '';
this.selectedRating = '';
}
}));
});
</script>

16
src/pages/index.astro Normal file
View File

@ -0,0 +1,16 @@
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>

3
src/styles/global.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

13
tailwind.config.js Normal file
View File

@ -0,0 +1,13 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{astro,js,jsx,ts,tsx}',
'./src/components/**/*.{astro,js,jsx,ts,tsx}',
'./src/pages/**/*.{astro,js,jsx,ts,tsx}',
'./content/**/*.{md,mdx}',
],
theme: {
extend: {},
},
plugins: [],
};

5
tsconfig.json Normal file
View File

@ -0,0 +1,5 @@
{
"extends": "astro/tsconfigs/strict",
"include": [".astro/types.d.ts", "**/*"],
"exclude": ["dist"]
}