working on MDX functionality

updated website

This commit completely overhauls the blog post page, replacing the previous simple MDX renderer with a modern, feature-rich, and component-based architecture.

Key changes include:

A new layout composed of dedicated components: BlogPostHeader, BlogPostContent, BlogPostSidebar, RelatedPosts, and BlogPostComments.

Introduction of EnhancedCodeBlock using react-syntax-highlighter for themeable code blocks with language detection and a copy-to-clipboard feature.

A central MDXContent component that provides custom styling for standard markdown elements and integrates custom MDX components.

Server-side generation of a Table of Contents from post headings.

A scroll-spy implementation in the sidebar to highlight the currently active section in the ToC.

Improved SEO with more comprehensive metadata for Open Graph and Twitter.

Use of Suspense for better loading states for content and comments.

The rehype-slug and rehype-autolink-headings plugins have been disabled as heading IDs are now generated within the rendering components to support the new ToC.

Adds the Peerlist project embed badge to the footer on both desktop and mobile layouts. This helps increase project visibility and showcases it on the Peerlist platform.

📊 Project Overview

The Aram Tutorials website is now ~85% complete - a modern, full-stack Next.js application for technology education with comprehensive database integration and a polished user experience.

✅ Major Components Implemented:

1. Database & Backend Infrastructure (100% Complete)

• ✅ Prisma ORM Integration: Complete schema definition with PostgreSQL
• ✅ Neon PostgreSQL Setup: Cloud database configured and connected
• ✅ Database Schema: All required tables implemented:
  • BlogPost (with featured images, YouTube URLs, reading time)
  • Category (Mac, Windows, Android, VS Code, Homebrew, Google Tools)
  • Tag (beginner, installation, configuration, productivity, etc.)
  • PostTag (many-to-many relationship)
  • NewsletterSubscription
  • ContactSubmission
  • Comment (with approval system)
  • User
• ✅ Database Utilities: Complete CRUD operations with Prisma
• ✅ Sample Content: Created 3 realistic blog posts for testing
• ✅ Data Seeding: Initial categories and tags populated

2. API Routes (100% Complete)

• ✅ /api/contact - Contact form submission with validation
• ✅ /api/newsletter - Newsletter subscription management
• ✅ /api/search - Blog post search functionality
• ✅ Input Validation: Zod schemas for all API endpoints
• ✅ Error Handling: Proper error responses and logging

3. Core Pages (100% Complete)

• ✅ Homepage (/):
  • Hero section with brand tagline Tech Made Simple – One Tutorial at a Time
  • Featured posts section
  • Categories grid with visual tiles
  • Newsletter signup form
  • Recent posts display
• ✅ Tutorials Page (/tutorials):
  • Filterable blog post grid
  • Category and tag filtering
  • Search functionality
  • Pagination support
  • Responsive design
• ✅ Individual Tutorial Pages (/tutorials/[slug]):
  • Full blog post content rendering
  • Related posts suggestions
  • Social sharing buttons
  • Reading time and metadata
• ✅ About Page (/about):
  • Creator bio and mission statement
  • YouTube channel integration
  • Skills and experience sections
• ✅ Contact Page (/contact):
  • Contact form with validation
  • Direct email display
  • FAQ section
• ✅ Legal Pages:
  • Privacy Policy (/privacy)
  • Terms of Service (/terms)

4. UI Component Library (95% Complete)

• ✅ Core Components: Button, Card, Input, Badge, Dialog, Dropdown
• ✅ Layout Components: Header, Footer, Navigation
• ✅ Blog Components: BlogCard, CategoryBadge, TagComponent, PostHeader
• ✅ Interactive Elements: SearchInput, LoadingSpinner, BackButton
• ✅ Responsive Design: Mobile-first approach throughout
• ✅ Accessibility: Proper ARIA labels and keyboard navigation

5. Design System (90% Complete)

• ✅ Typography: Clean sans-serif fonts (Geist)
• ✅ Color Palette: Deep blue primary (#1e293b), accent colors for categories
• ✅ Component Variants: Multiple sizes and styles
• ✅ Animations: Smooth transitions and hover effects
• ✅ Visual Hierarchy: Consistent spacing and layout patterns

6. Technical Infrastructure (90% Complete)

• ✅ Next.js 14: App router with TypeScript
• ✅ Tailwind CSS: Custom configuration with design tokens
• ✅ ESLint & Prettier: Code quality and formatting
• ✅ Type Safety: Comprehensive TypeScript definitions
• ✅ SEO Optimization: Meta tags, OpenGraph, structured data
• ✅ Performance: Image optimization, code splitting

7. Content Management (85% Complete)

• ✅ Database-Driven: All content stored in PostgreSQL
• ✅ Category System: 6 main categories with icons and colors
• ✅ Tagging System: Flexible tag-based organization
• ✅ Search Functionality: Full-text search across posts
• ✅ Sample Content: 3 realistic tutorial posts created

🔧 Recent URL & Domain Updates

• ✅ Website URL: Updated from aramtutorials.com → tutorials.aramb.dev
• ✅ SEO Metadata: All OpenGraph URLs updated
• ✅ Contact References: Legal pages and contact forms updated
• ✅ Email Consistency: Standardized to [email protected]
• ✅ Canonical URLs: Proper domain references throughout

🚧 Remaining Tasks (15% of project)

• [ ] Dark Mode Toggle: Theme switching functionality
• [ ] NextAuth.js: Admin authentication system
• [ ] Analytics Integration: Plausible or Google Analytics
• [ ] Vercel Blob Storage: File upload system
• [ ] Final Testing: Cross-browser compatibility
• [ ] Production Deployment: Vercel hosting setup

📁 File Structure Created

src/
├── app/                 # Next.js 14 app router
├── components/          # Reusable UI components
├── lib/                 # Utilities and database
├── types/               # TypeScript definitions
prisma/                  # Database schema and migrations
scripts/                 # Database seeding scripts

🎯 Current Status

• Development Server: Running at http://localhost:3000 ✅
• Database: Connected and populated ✅
• Core Functionality: Fully operational ✅
• Content: Sample tutorials available ✅
• Design: Polished and responsive ✅
• SEO: Optimized metadata ✅

Init Devlog

phew! after hassling and trying to add cloud convert functionality, i felt that the old transcription result component was super ugly, so i refactored it with some design help from claude

Hereby I present to you:

🎉 Transcriptr v2.1.0 Update - Enhanced Download System!

Hey everyone! We're excited to announce Transcriptr v2.1.0 with some fantastic new features that make working with your transcriptions even better! 📄✨

🆕 What's New

📥 Multi-Format Download System

Your transcriptions are now available in 4 different formats:
- 📝 TXT - Plain text for simple sharing
- 📋 Markdown - Structured format with headings

- 📄 DOCX - Professional Word documents
- 🔴 PDF - Print-ready documents with proper formatting

All accessible from a sleek dropdown menu with beautiful icons! 🎨

🌍 Smart Arabic Language Support

• Automatic detection of Arabic text in your transcriptions
• Clear beta warnings for DOCX and PDF formats when using Arabic
• Helpful recommendations to use TXT or Markdown for best Arabic compatibility
• User-friendly notices explaining format limitations

🎨 Beautiful UI Improvements

• Unified card design - Clean, mobile-inspired layout
• Enhanced dropdown visibility - Solid backgrounds with proper contrast
• Professional document generation - Real DOCX files with proper structure
• Optimized performance - Better memory management and faster downloads

🔧 Technical Enhancements

📄 Real Document Generation

• DOCX files now use the proper docx library for authentic Word documents
• PDF files feature automatic text wrapping and professional layout
• Markdown exports include structured headings and formatting

🌐 Internationalization

• Unicode detection for Arabic text using comprehensive character ranges
• Format-specific warnings that appear only when relevant
• Smart recommendations based on language detection

🚀 Continued Universal Audio Support

Don't forget about our existing 15+ audio format support:
- iPhone recordings (M4A) ✅
- Windows media (WMA) ✅

- Professional formats (AIFF, CAF) ✅
- All major formats with automatic conversion ✅

💡 What This Means for You

1. More flexibility - Choose the perfect format for your needs
2. Better workflow integration - DOCX files work perfectly with Word, Google Docs
3. Print-ready documents - PDFs look professional and format consistently
   
4. Arabic language support - Clear guidance for non-Latin script users
5. Cleaner interface - Everything organized and easy to find

🎯 Perfect For:

• Students sharing notes in different formats
• Professionals creating formal documents
  
• Content creators working with transcripts
• International users working with Arabic content
• Anyone who wants flexibility in their workflow

Try it out now at transcriptr.aramb.dev and let us know what you think!

V2 is here!

Welcome to the completely redesigned Transcriptr! We've rebuilt the entire platform from the ground up to deliver a faster, more reliable, and feature-rich transcription experience.

Lightning Fast Performance
Completely rewritten with Next.js for blazing-fast load times and seamless user experience.

Enhanced Reliability
Improved error handling, better file format support, and automatic retry mechanisms for failed transcriptions.

Modern Interface
Beautiful new design with improved accessibility, better mobile support, and intuitive user workflows.

Ready to experience the future of transcription? Upload your first file and see the difference!

feat: implement global text size adjustment across entire application

• Add fontSize from SettingsContext to all text components throughout the app
• Update ThemedText component to use dynamic font sizing with multipliers
• Replace hardcoded fontSize values in StyleSheets with dynamic scaling:
  • Titles: fontSize * 1.75-2
  • Subtitles: fontSize * 1.25
    
  • Regular text: fontSize
  • Small text: fontSize * 0.81-0.94
• Apply text size adjustment to main screens:
  • Lessons list (app/(tabs)/index.tsx)
  • Vocabulary screen (app/(tabs)/vocabulary.tsx)
  • Individual lesson screens (app/lessons/[bookId].tsx, app/lessons/[bookId]/[lessonId].tsx)
  • Vocabulary detail screen (app/vocabulary/[id].tsx)
  • ComingSoon and EditScreenInfo components
• Ensure consistent font scaling across all UI components and content areas
• Fix accessibility issue where text size setting only affected settings menu

Closes: Text size adjustment now works universally throughout the entire application interface

feat(settings): overhaul settings screen with native-style UI

This commit completely redesigns the main settings screen to provide a more modern, intuitive, and platform-consistent user experience, moving away from a basic SectionList to a custom-styled ScrollView with grouped cards.

• Replaces SectionList with a ScrollView and styled cards for a native look and feel.
• Reorganizes settings items into more logical groups: Content & Learning and Support & Info.
• Adds a new Rate This App screen to encourage user feedback and store ratings.
• Refactors all settings sub-screens (Appearance, About, etc.) to use the unified useSettings context and adopt consistent, theme-aware styling.
• Bumps app version to 0.0.8 to reflect the new features and UI enhancements.

had some errors, trying to figure out theming

Working on android version now, fixed icons using material UI icons

I have been working on adding the vocabulary page, and synchronizing it with the API which I was working on prior to this.

There are multiple changes here:

Added list of vocabs fetching from API
Added a filter
updated edge cases for filters, added clear filter button
used SF Symbols (for iPhone only) for the filter icon, and made it a nice modal

Finally finished with vocab API, about to integrate with app

Having lots of problems with nextjs pageprops :(

This pull request introduces several configuration updates and documentation changes to enhance development workflows and enforce coding standards. The most important changes include adding accessibility and coding rules, updating editor settings for consistent formatting, and preserving TypeScript errors in lesson content for educational purposes.

Accessibility and Coding Rules

• .github/copilot-instructions.md: Added extensive rules for accessibility and coding practices, covering ARIA attributes, semantic elements, JavaScript best practices, and TypeScript conventions. These rules aim to improve code quality and maintainability.

Editor Configuration Updates

• .vscode/settings.json: Configured default formatters for multiple file types, enabled format-on-save and format-on-paste, and set up code actions for fixing issues and organizing imports using Biome and Prettier.
• .gemini/settings.json: Set the preferred editor to zed for a streamlined editing experience.

Educational Content Rules

• .kilocode/rules/rules.md: Added rules to preserve TypeScript errors in lesson content, emphasizing their educational value in teaching vocabulary and grammar concepts.

fix(data): align all book 1 lesson data with the authoritative schema

This commit resolves widespread schema inconsistencies found across all lesson files in src/data/vocab/book1/lessons/. The data structures in these files did not match the authoritative TypeScript interfaces defined in src/data/vocab/vocab.ts, leading to potential type errors and data integrity issues.

The following systematic corrections have been applied to all 23 lesson files:

• Title and Description Keys: The title and description objects in each lesson file were updated to use the standardized ar and en keys, replacing the non-compliant arabic and english keys.

• Translation Keys: The translation object within each vocabulary item was updated to use the en key, replacing the non-compliant english key.

• Example Keys: The objects within the examples array for each vocabulary item were updated to use arabic and english keys, replacing the non-compliant ar and en keys.

These changes ensure that all lesson data is now type-safe and strictly conforms to the defined schema, improving maintainability and preventing future validation errors.

feat(vocab): enrich vocabulary data with examples and detailed properties

This commit introduces a comprehensive update to the vocabulary data for Book 1, significantly enhancing the learning experience.

Key changes include:
- Example Sentences: Added multiple usage examples with translations for nearly every vocabulary item across all lessons (1-23).
- Data Enrichment: Populated transliteration, provided more detailed definition fields, and added/refined tags for better categorization.
- Data Structure Refactoring: Standardized language keys from ar/en to arabic/english in title, translation, and examples objects for consistency.
- Corrections & Diacritics: Added missing diacritical marks to Arabic words and corrected various vocabulary items and their plural forms.

adding examples to all of the lesson in book1

changing the layout

refactor(vocab): simplify lesson vocabulary data structure

Each lesson vocabulary file now exports a single lesson object directly, rather than an array containing a single object. This simplifies the data structure and makes it easier to import and consume individual lesson vocabularies.

BREAKING CHANGE: The vocabularyLists export has been removed from lesson vocabulary files.

due to the sheer complexity and length of these vocab lists, i will be seperating them by lesson in the data/vocab directory

finished up to lesson 7

adding vocab 3, skipped over 2, will come back later

done with v1

Finally finished vocab for madinah book 1

Using Gemini 2.5 Pro to extract lesson data from those 3 PDFs

Made many changes to visual appearance of the app

check github for log: https://github.com/aramb-dev/madinah-app

adding liquid glass for apple devices

using https://callstackincubator.github.io/react-native-bottom-tabs/docs/guides/usage-with-expo-router.html

added API
https://madinah.arabic.aramb.dev/docs
https://madinah.arabic.aramb.dev/api