1. Categories and Tags

Every post is tagged with relevant categories. You can:

• Browse by category: Click any category tag on a post to see all posts in that category

• Category navigation: Use the category links at the top of the home page

• Multiple tags: Posts can belong to multiple categories, making them discoverable from different angles

Demo: Category Navigation

When you click on a category tag like "Planetary Science", you'll see:

1. Category Page Introduction (if available): A dedicated introduction page explaining the category
2. Filtered Post List: All posts tagged with that category, organized by series
3. Series as Units: Series are shown as complete units (carousels), not individual parts

Example Flow:

Home → Click "Planetary Science" → Category Page → All Planetary Science Posts

Category Page Structure:

• Introduction to the subject area
• Overview of key topics covered
• Table of contents for posts in this category
• Links to related categories

2. Series and Threads

Related posts can be grouped into series or threads:

• Series: A sequence of posts on a related topic (like chapters in a book)

• Series navigation: When viewing a post in a series, you'll see navigation to move between parts

• Series carousel: On the home page, series are shown as a single card with left/right arrows to browse through all parts

• Nested series: Series can contain sub-series, creating hierarchical structures

Demo: Series Navigation

Simple Series Example:

The 3D Background (Part 1 of 6)
├─ Part 1: Introduction
├─ Part 2: Terrain Generation
├─ Part 3: Atmospheric Effects
│   ├─ Fog Visualization
│   ├─ Rain Visualization
│   └─ Snow Visualization
├─ Part 4: Camera System
├─ Part 5: Cell Shading
└─ Part 6: Performance Optimization

Series Carousel on Homepage:

• Single card representing the entire series
• Left/Right arrows to navigate between parts
• Shows current part number (e.g., "Part 2 of 6")
• Click to view the current part

Series Navigation on Post Page:

• Sidebar shows all posts in the series
• Highlights current post
• Previous/Next buttons for sequential navigation
• Click any post in the series to jump directly

3. Table of Contents

Every blog post page includes a Table of Contents sidebar that shows:

• All blog posts organized hierarchically

• Series relationships (parent posts with nested children)

• Your current position in the content structure

• Quick navigation to any post

The table of contents is:

• Persistent: Stays visible as you scroll

• Collapsible: Click to show/hide

• Responsive: Moves to the bottom on mobile devices

Demo: Table of Contents Structure

Hierarchical Tree View:

1. Blog Architecture
   1.1. Overview
   1.2. Why Obsidian?
   1.3. From Markdown to Web
   1.4. Links and Navigation
   1.5. Advanced Features
   1.6. Build and Deployment

2. The 3D Background
   2.1. Introduction
   2.2. Terrain Generation
   2.3. Atmospheric Effects
      2.3.1. Fog Visualization
      2.3.2. Rain Visualization
      2.3.3. Snow Visualization
   2.4. Camera System
   2.5. Cell Shading
   2.6. Performance Optimization

3. Planetary Science & Space
   3.1. Overview
   3.2. Mars
   3.3. Europa
   3.4. Ganymede
   3.5. Titan

Features:

• Numbered hierarchy: Shows the position of each post
• Current post highlighting: Your current location is highlighted
• Expandable sections: Click to expand/collapse branches
• Direct navigation: Click any item to jump to that post

4. Search

The header search provides semantic search across all content:

• Vector-based: Uses embeddings for semantic understanding

• Real-time: Results update as you type

• Contextual: Finds posts by title, excerpt, and categories

Demo: Search Functionality

Search Examples:

• Type "fusion" → Finds posts about nuclear fusion, plasma physics, energy
• Type "3D rendering" → Finds posts about 3D graphics, WebGL, Three.js
• Type "Mars exploration" → Finds posts about Mars, planetary science, space missions

Search Results Include:

• Post title
• Excerpt/preview
• Matching categories
• Relevance score

5. Linked Posts

At the bottom of each post, you'll find Related Content:

• Posts that are linked from the current article

• Discover related topics and follow connections

• Expand your exploration organically

Demo: Link-Based Discovery

Example Link Chain:

Planetary Science & Space
  → Links to: Mars
    → Links to: Mars Sample Return
      → Links to: Sample Analysis Techniques
  → Links to: Europa
    → Links to: Subsurface Ocean
      → Links to: Astrobiology

Link Types:

• Forward links: Posts you link to (shown at bottom of current post)
• Backlinks: Posts that link to you (shown in their "Related Content")
• Bidirectional exploration: Navigate both directions

Design Philosophy

This navigation system is inspired by:

• Obsidian: Wiki-style linking and graph views

• Knowledge graphs: Emphasizing connections between ideas

• Progressive disclosure: Showing structure without overwhelming

• Multiple entry points: Different ways to discover the same content

Content Organization Approaches

This blog supports multiple approaches to organizing content. Each has its strengths and use cases.

Approach 1: Category-Based Organization

How it works:

• Posts are tagged with categories in frontmatter
• Category pages provide introductions and overviews
• Navigation menu shows top categories
• Filtering by category shows all related posts

Example Structure:

Categories:
  - Planetary Science
  - Nuclear Physics
  - Coding Projects
  - Business & Economics

Pros:

• ✅ Flexible: Posts can belong to multiple categories
• ✅ Easy to discover related content across different topics
• ✅ Category pages provide context and introductions
• ✅ Works well for cross-cutting topics
• ✅ Non-hierarchical: Doesn't force a single structure

Cons:

• ❌ Can become overwhelming with many categories
• ❌ Categories may overlap or become redundant
• ❌ Less structured than hierarchical approaches
• ❌ Requires manual tagging and maintenance

Best For:

• Blogs with diverse, cross-cutting topics
• Content that doesn't fit a single hierarchy
• Discovery-focused navigation
• Tag-based exploration

Approach 2: Directory Structure Mapping

How it works:

• File system directory structure maps directly to navigation
• Menu structure mirrors folder organization
• URLs reflect directory paths
• Natural hierarchy from file organization

Example Structure:

Blog/
├── Science/
│   ├── Planetary Science & Space/
│   │   ├── Mars.md
│   │   ├── Europa.md
│   │   └── Titan.md
│   ├── Nuclear/
│   │   ├── Fission & Fusion.md
│   │   └── LFTR.md
│   └── Condensed Matter Physics/
├── Coding/
│   ├── Blog Architecture/
│   └── The 3D Background/
└── Business/

Pros:

• ✅ Intuitive: Matches file system organization
• ✅ Automatic: Structure emerges from file organization
• ✅ Clear hierarchy: Easy to understand relationships
• ✅ Scalable: Works for large content collections
• ✅ Maintainable: Move files to reorganize

Cons:

• ❌ Rigid: One post can only be in one location
• ❌ File system constraints: Limited flexibility
• ❌ Cross-references: Harder to show multiple relationships
• ❌ Migration: Moving files changes URLs

Best For:

• Well-organized, hierarchical content
• Technical documentation
• Tutorial series
• Content with clear parent-child relationships

Approach 3: Content Hierarchy (Link-Based)

How it works:

• Content tree built from Obsidian links (<span class="obsidian-link disabled" data-link="Post Name" title="Link to: Post Name (not yet created)">Post Name</span>)
• Parent-child relationships from link patterns
• Table of Contents reflects link structure
• Series relationships preserved within hierarchy

Example Structure:

Blog Architecture (root)
├── Overview (linked from Blog Architecture)
│   └── Why Obsidian? (linked from Overview)
├── From Markdown to Web (linked from Blog Architecture)
└── Links and Navigation (linked from Blog Architecture)
    └── Advanced Features (linked from Links and Navigation)

Pros:

• ✅ Flexible: Multiple parents possible (graph structure)
• ✅ Semantic: Structure reflects actual relationships
• ✅ Dynamic: Changes as you add links
• ✅ Natural: Follows how you think about connections
• ✅ Non-destructive: Doesn't require file moves

Cons:

• ❌ Complex: Can create cycles (prevented by system)
• ❌ Implicit: Structure not immediately visible
• ❌ Requires links: Must actively link posts
• ❌ Can be messy: Many links create complex graphs

Best For:

• Knowledge bases
• Interconnected ideas
• Research notes
• Content with many cross-references

Approach 4: Hybrid (Recommended)

How it works:

• Combines directory structure, categories, and link-based hierarchy
• Directory structure provides primary organization
• Categories enable cross-cutting discovery
• Links create semantic relationships
• Series group related sequential content

Example:

Directory Structure (primary navigation)
  Science/Planetary Science & Space/
    ├── Mars.md (category: Planetary Science, links to: Europa)
    ├── Europa.md (category: Planetary Science, links to: Titan)
    └── Titan.md (category: Planetary Science)

Categories (filtering)
  Planetary Science → Shows all posts with this category

Links (relationships)
  Mars → Links to → Europa (shown in Related Content)

Series (grouping)
  The 3D Background (series)
    ├── Part 1: Introduction
    ├── Part 2: Terrain Generation
    └── Part 3: Atmospheric Effects

Pros:

• ✅ Best of all worlds: Structure, flexibility, and discovery
• ✅ Multiple entry points: Directory, category, link, series
• ✅ Scalable: Works for any content size
• ✅ Maintainable: Clear organization with flexibility
• ✅ User-friendly: Different navigation methods for different needs

Cons:

• ❌ More complex: Requires understanding multiple systems
• ❌ More maintenance: Need to manage categories, links, and structure
• ❌ Potential redundancy: Same content accessible multiple ways

Best For:

• Most blog types
• Content with both hierarchical and cross-cutting relationships
• Long-term content growth
• Diverse audience needs

Category Pages: Deep Dive

Category pages are special pages that provide introductions and organization for a category.

Current Implementation

How it works:

• Files named {category-name}-category.md are detected
• Shown at top of category-filtered views
• Can include introductions, overviews, and TOCs
• Supports full markdown content

Example:

Planetary Science-category.md
---
title: Planetary Science
published: published
categories:
  - Meta
---

# Planetary Science

Planetary science is the study of planets, moons, and planetary systems...

## Topics Covered

- Mars exploration and geology
- Icy moons and subsurface oceans
- Atmospheric studies
- Space missions and technology

## Featured Articles

<a href="/blog/Science%2FPlanetary_Science_Space%2FMars" class="obsidian-link active" title="Mars: The Red Planet and the Search for Life">Mars</a>
<a href="/blog/Science%2FPlanetary_Science_Space%2FEuropa" class="obsidian-link active" title="Europa: An Ocean World in the Outer Solar System">Europa</a>
<a href="/blog/Science%2FPlanetary_Science_Space%2FTitan" class="obsidian-link active" title="Titan: Saturn's Moon with Lakes and Seas">Titan</a>

Enhanced Category Pages (Proposed)

Features:

1. Automatic TOC Generation: Table of contents for all posts in category
2. Featured Posts: Highlight important or introductory posts
3. Subcategory Organization: Organize posts by subcategories
4. Related Categories: Show links to related categories
5. Series Overview: Show all series in this category

Example Enhanced Structure:

---
title: Planetary Science
category: Planetary Science
published: published
---

# Planetary Science

Introduction to planetary science...

## Table of Contents

<!-- Auto-generated TOC for all posts in this category -->

## Featured Articles

- <a href="/blog/Science%2FPlanetary_Science_Space%2FMars" class="obsidian-link active" title="Mars: The Red Planet and the Search for Life">Mars</a>: The Red Planet
- <a href="/blog/Science%2FPlanetary_Science_Space%2FEuropa" class="obsidian-link active" title="Europa: An Ocean World in the Outer Solar System">Europa</a>: Icy Moon with Subsurface Ocean
- <a href="/blog/Science%2FPlanetary_Science_Space%2FTitan" class="obsidian-link active" title="Titan: Saturn's Moon with Lakes and Seas">Titan</a>: Earth-like Moon of Saturn

## Series in This Category

- **Planetary Exploration Series**: Multi-part exploration of...
  - Part 1: Overview
  - Part 2: Mars Missions
  - Part 3: Outer Planet Exploration

## Subcategories

- **Inner Planets**: <span class="obsidian-link disabled" data-link="Mercury" title="Link to: Mercury (not yet created)">Mercury</span>, <span class="obsidian-link disabled" data-link="Venus" title="Link to: Venus (not yet created)">Venus</span>, <a href="/blog/Science%2FPlanetary_Science_Space%2FMars" class="obsidian-link active" title="Mars: The Red Planet and the Search for Life">Mars</a>
- **Outer Planets**: <span class="obsidian-link disabled" data-link="Jupiter" title="Link to: Jupiter (not yet created)">Jupiter</span>, <span class="obsidian-link disabled" data-link="Saturn" title="Link to: Saturn (not yet created)">Saturn</span>, <span class="obsidian-link disabled" data-link="Uranus" title="Link to: Uranus (not yet created)">Uranus</span>, <span class="obsidian-link disabled" data-link="Neptune" title="Link to: Neptune (not yet created)">Neptune</span>
- **Moons**: <a href="/blog/Science%2FPlanetary_Science_Space%2FEuropa" class="obsidian-link active" title="Europa: An Ocean World in the Outer Solar System">Europa</a>, <a href="/blog/Science%2FPlanetary_Science_Space%2FGanymede" class="obsidian-link active" title="Ganymede: The Solar System's Largest Moon">Ganymede</a>, <a href="/blog/Science%2FPlanetary_Science_Space%2FTitan" class="obsidian-link active" title="Titan: Saturn's Moon with Lakes and Seas">Titan</a>

## Related Categories

- <span class="obsidian-link disabled" data-link="Space Technology" title="Link to: Space Technology (not yet created)">Space Technology</span>
- <span class="obsidian-link disabled" data-link="Astrobiology" title="Link to: Astrobiology (not yet created)">Astrobiology</span>
- <a href="/blog/Engineering%2FRemote_Sensing" class="obsidian-link active" title="Remote Sensing Projects">Remote Sensing</a>

Directory-to-Menu Mapping

Mapping directory structure to navigation menu provides a natural, file-system-based organization.

Implementation Approach

Basic Mapping:

Directory Structure          →  Navigation Menu
─────────────────────────────────────────────────
Science/                    →  Science
  Planetary Science/         →    Planetary Science
    Mars.md                  →      Mars
    Europa.md                →      Europa
  Nuclear/                   →    Nuclear
    Fusion.md                →      Fusion

Advanced Features:

1. Menu Ordering: Use frontmatter to control menu order
2. Menu Labels: Custom labels different from file names
3. Hidden Items: Hide certain directories from menu
4. Grouping: Group related directories

Example Frontmatter:

---
title: Planetary Science & Space
menu:
  order: 2
  label: "Planetary Science"
  group: "Science"
  hidden: false
---

Pros and Cons

Pros:

• ✅ Intuitive: Matches file organization
• ✅ Automatic: No manual menu configuration
• ✅ Scalable: Works for large hierarchies
• ✅ Maintainable: Reorganize by moving files
• ✅ Clear structure: Easy to understand

Cons:

• ❌ Rigid: One location per post
• ❌ URL changes: Moving files changes URLs
• ❌ Cross-cutting: Hard to show multiple relationships
• ❌ File system constraints: Limited flexibility

Recommendations

For New Blogs

Start with Hybrid Approach:

1. Organize files in directories by topic
2. Use categories for cross-cutting themes
3. Link related posts with <span class="obsidian-link disabled" data-link="Post Name" title="Link to: Post Name (not yet created)">Post Name</span>
4. Group sequential content into series
5. Create category pages for major topics

For Existing Blogs

Migration Strategy:

1. Assess current structure: Review how content is organized
2. Identify patterns: Find natural groupings and relationships
3. Plan directory structure: Design folder hierarchy
4. Add categories: Tag posts with relevant categories
5. Add links: Create semantic connections between posts
6. Create category pages: Write introductions for major categories
7. Test navigation: Ensure all navigation methods work

Best Practices

1. Consistent naming: Use consistent file and category naming
2. Clear hierarchy: Keep directory structure logical
3. Meaningful links: Link posts that are actually related
4. Category pages: Create introductions for major categories
5. Series for sequences: Use series for multi-part content
6. Regular review: Periodically review and reorganize

Tips for Exploration

1. Start with categories: If you know your interest area, browse by category

2. Follow series: Series provide structured, sequential learning

3. Use the TOC: Get an overview of all content and your position

4. Use search: Find specific content with semantic search

5. Click links: Follow connections between related posts

6. Explore series: Use the carousel to browse through series parts

7. Check category pages: Read introductions to understand topic areas

8. Follow directory structure: Use folder organization as navigation guide

Series Structure

Series can be simple (linear sequence) or complex (nested hierarchies):

• Simple series: Part 1 → Part 2 → Part 3

• Nested series: A series can contain sub-series, like chapters containing sections

• Series within series: For example, "The 3D Background" contains "Atmospheric Effects" which has its own sub-posts

This structure allows for both broad overviews and deep dives into specific topics.

Content Tree Structure

The blog automatically builds a content tree from Obsidian links. When you link to another post using <span class="obsidian-link disabled" data-link="Post Name" title="Link to: Post Name (not yet created)">Post Name</span>, the system:

• Establishes relationships: Creates parent-child relationships between linked posts

• Builds hierarchy: Organizes content into a tree structure based on link patterns

• Preserves series: Maintains series relationships while incorporating link-based structure

• Prevents cycles: Ensures the tree structure remains acyclic

The Table of Contents reflects this tree structure, showing:

• Root nodes: Posts that aren't linked from other posts (or are series parents)

• Child nodes: Posts that are linked from parent posts

• Series grouping: Series posts are grouped under their parent, with link-based children nested within

This creates a natural navigation flow that follows the connections you've made in your notes.

Link-Based Navigation

Obsidian links (<span class="obsidian-link disabled" data-link="Post Name" title="Link to: Post Name (not yet created)">Post Name</span>) create implicit navigation paths:

• Forward links: Posts you link to become children in the tree

• Backlinks: Posts that link to you appear as potential parents

• Bidirectional exploration: Navigate both up (to parents) and down (to children)

The tree structure makes it easy to:

• Follow a thread: Start at a root post and explore its children

• Understand context: See what posts lead to the current one

• Discover connections: Find related content through link relationships

Future Enhancements

Planned improvements include:

• Graph view of post relationships

• Reading progress tracking

• Personalized recommendations

• Advanced filtering and sorting

• Export and sharing features

• Visual link graph showing all connections

• Enhanced category pages with auto-generated TOCs

• Directory-based menu generation

• Multi-level category hierarchies

This blog is built to help you explore ideas, make connections, and discover content that interests you. Use whichever navigation method feels most natural to you.