-
- {children}
-
-
-);
+interface CodeBlockProps {
+ children: string;
+ language?: string;
+ showLineNumbers?: boolean;
+ className?: string;
+}
+
+// Simple syntax highlighting for common languages
+const highlightCode = (code: string, language: string): string => {
+ code = code.trim();
+
+ const patterns: Record
+ {showLineNumbers ? (
+
+
+ {lines.map((_, i) => (
+ {i + 1}
+ ))}
+
+
+
+
+
{children}
);
\ No newline at end of file
diff --git a/src/components/BlogPostCard.tsx b/src/components/BlogPostCard.tsx
deleted file mode 100644
index 382a651..0000000
--- a/src/components/BlogPostCard.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-
-interface BlogPostCardProps {
- title: string;
- description: string;
- date: string;
- slug: string;
- tags?: string[];
-}
-
-export const BlogPostCard: React.FC = ({
- title,
- description,
- date,
- slug,
- tags = []
-}) => {
- const formattedDate = new Date(date).toLocaleDateString('en-US', {
- year: 'numeric',
- month: 'long',
- day: 'numeric'
- });
-
- return (
-
-
-
- {title}
-
-
- {description}
-
-
-
- {tags.length > 0 && (
-
- {tags.map(tag => (
-
- {tag}
-
- ))}
-
- )}
-
-
-
- );
-};
\ No newline at end of file
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
deleted file mode 100644
index 7633ba7..0000000
--- a/src/components/Container.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-interface ContainerProps {
- children: React.ReactNode;
- className?: string;
- maxWidth?: string;
-}
-
-export const Container: React.FC = ({
- children,
- className = '',
- maxWidth = 'max-w-4xl'
-}) => (
-
- {children}
-
-);
-
-export const ArticleContainer: React.FC = ({ children, className = '' }) => (
-
- {children}
-
-);
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..80deae8
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+export const Footer: React.FC = () => {
+ const currentYear = new Date().getFullYear();
+
+ return (
+
+ );
+};
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..9d9136c
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,54 @@
+import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react';
+import React from 'react';
+
+export const Hero: React.FC = () => {
+ return (
+
+ {/* Background pattern */}
+
+
+
+
+
+
+ {/* Main heading */}
+
+ Digital Problem Solver
+
+
+
+ I work on Digital problems and build tools, scripts, and systems to solve them.
+
+
+ {/* Quick stats or focus areas */}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/MediumCard.astro b/src/components/MediumCard.astro
new file mode 100644
index 0000000..3825b7b
--- /dev/null
+++ b/src/components/MediumCard.astro
@@ -0,0 +1,130 @@
+---
+import Tag from './Tag.astro';
+
+interface Props {
+ post: {
+ title: string;
+ description: string;
+ date: string;
+ slug: string;
+ tags?: string[];
+ };
+}
+
+const { post } = Astro.props;
+const { title, description, date, slug, tags = [] } = post;
+
+const formattedDate = new Date(date).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric'
+});
+
+// Calculate reading time
+const wordCount = description.split(/\s+/).length;
+const readingTime = Math.max(1, Math.ceil(wordCount / 200));
+---
+
+
+
+
+ {title}
+
+
+ {formattedDate}
+
+
+
+
+ {description}
+
+
+
+
+ {readingTime} min
+
+ {tags.length > 0 && (
+
+ {tags.map((tag: string) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+
+
+
\ No newline at end of file
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
new file mode 100644
index 0000000..9741a0e
--- /dev/null
+++ b/src/components/SearchBar.tsx
@@ -0,0 +1,141 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+export const SearchBar: React.FC = () => {
+ const [query, setQuery] = useState('');
+ const inputRef = useRef(null);
+ const [isFocused, setIsFocused] = useState(false);
+
+ const handleInput = (e: React.ChangeEvent) => {
+ const value = e.target.value;
+ setQuery(value);
+
+ // Trigger search functionality
+ if (typeof window !== 'undefined') {
+ const postsContainer = document.getElementById('posts-container');
+ const allPosts = postsContainer?.querySelectorAll('.post-card') as NodeListOf;
+
+ if (!allPosts) return;
+
+ const queryLower = value.toLowerCase().trim();
+
+ allPosts.forEach((post: HTMLElement) => {
+ const title = post.querySelector('h3')?.textContent?.toLowerCase() || '';
+ const description = post.querySelector('.post-excerpt')?.textContent?.toLowerCase() || '';
+ const tags = Array.from(post.querySelectorAll('.highlighter-tag'))
+ .map(tag => tag.textContent?.toLowerCase() || '')
+ .join(' ');
+
+ const searchableText = `${title} ${description} ${tags}`;
+
+ if (searchableText.includes(queryLower) || queryLower === '') {
+ post.style.display = 'block';
+ post.style.opacity = '1';
+ post.style.transform = 'scale(1)';
+ } else {
+ post.style.display = 'none';
+ post.style.opacity = '0';
+ post.style.transform = 'scale(0.95)';
+ }
+ });
+ }
+ };
+
+ const clearSearch = () => {
+ setQuery('');
+ if (inputRef.current) {
+ inputRef.current.value = '';
+ inputRef.current.focus();
+ }
+
+ // Reset all posts
+ if (typeof window !== 'undefined') {
+ const postsContainer = document.getElementById('posts-container');
+ const allPosts = postsContainer?.querySelectorAll('.post-card') as NodeListOf;
+
+ allPosts?.forEach((post: HTMLElement) => {
+ post.style.display = 'block';
+ post.style.opacity = '1';
+ post.style.transform = 'scale(1)';
+ });
+ }
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ clearSearch();
+ }
+ };
+
+ return (
+
+
+ {/* Search input wrapper */}
+
+ setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
+ aria-label="Search blog posts"
+ />
+
+ {/* Search icon */}
+
+
+
+
+ {/* Clear button */}
+ {query && (
+
+ )}
+
+
+ {/* Search hint */}
+
+ ESC
+ to clear
+
+
+
+ {/* Active filter indicator */}
+ {query && (
+
+
+ Searching for: "{query}"
+
+
+
+ )}
+
+ {/* Results count (hidden by default, shown via JS) */}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/Tag.astro b/src/components/Tag.astro
new file mode 100644
index 0000000..bd062e2
--- /dev/null
+++ b/src/components/Tag.astro
@@ -0,0 +1,125 @@
+---
+interface Props {
+ tag: string;
+ index: number;
+ className?: string;
+}
+
+const { tag, index, className = '' } = Astro.props;
+
+// Color mapping based on tag content for variety
+const getColorClass = (tag: string) => {
+ const tagLower = tag.toLowerCase();
+ if (tagLower.includes('meta') || tagLower.includes('learning')) return 'highlighter-yellow';
+ if (tagLower.includes('debug') || tagLower.includes('tools')) return 'highlighter-pink';
+ if (tagLower.includes('ai') || tagLower.includes('automation')) return 'highlighter-blue';
+ if (tagLower.includes('script') || tagLower.includes('code')) return 'highlighter-green';
+ return 'highlighter-yellow'; // default
+};
+
+const colorClass = getColorClass(tag);
+---
+
+
+ {tag}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 2c08d7a..73d5c8e 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,18 +1,14 @@
---
+import '../styles/global.css';
+import { Footer } from '../components/Footer';
+import { Hero } from '../components/Hero';
+
interface Props {
title: string;
description?: string;
}
const { title, description = "Technical problem solver's blog - practical insights and learning notes" } = Astro.props;
-
-// About info from context
-const aboutInfo = {
- name: "Marc Mintel",
- role: "Technical problem solver",
- email: "marc@mintel.me",
- location: "Vulkaneifel, Germany"
-};
---
@@ -20,81 +16,166 @@ const aboutInfo = {
- {title} | {aboutInfo.name}
+ {title} | Marc Mintel
+
-
+
-
-
-
-
-
-
-
-
- {aboutInfo.name}
-
- {aboutInfo.role}
-
-
-
-
-
-
+
+
+
-
+
-
+
+
+
+
+
+
+
+
+
+
-
-
\ No newline at end of file
+