xapps-site Project Structure Analysis

Project Overview

Project Name: xapps-site
Type: Jekyll Static Site (Documentation & Marketing)
Base URL: Shopify apps documentation and product site
Build Tool: Jekyll with Ruby

Directory Structure

Root Level Files

• _config.yml - Jekyll configuration with GA4 tracking and docs collection settings
• Gemfile / Gemfile.lock - Ruby dependencies
• package.json - Node scripts for dev/build (Jekyll commands)
• CNAME - Custom domain configuration
• README.md - Project documentation
• reviews.md - Customer reviews content
• HTML Pages: index.html, docs.html, contact.html, privacy-policy.html

Core Directories

_docs/ - Documentation Source Files

Contains 14 markdown documentation files organized by feature:

Custom Redirect Features:

• custom-widget.md - Widget-based redirects (popup/topbar/select)
• custom-auto.md - Automatic redirects for custom domains
• markets-widget.md - Location-based widget redirects
• markets-auto.md - Automatic location-based redirects

Developer References:

• dev-custom-widget.md - Developer guide for Custom Widget
• dev-custom-auto.md - Developer guide for Custom Auto
• dev-markets-widget.md - Developer guide for Markets Widget
• dev-markets-auto.md - Developer guide for Markets Auto

Configuration & Settings:

• getting-started.md - Onboarding guide
• plans.md - Pricing and feature plans
• display-settings.md - Widget frequency and timing settings
• geo-targeting.md - Location matching and visibility rules
• utm-tracking.md - Analytics and UTM parameters
• faq.md - Frequently asked questions
• theme-embed.md - Theme integration guide

_layouts/ - Jekyll Templates

• default.html - Main site layout
• docs.html - Documentation page layout with sidebar navigation

_includes/ - Reusable Components

• header.html - Header component
• globe.html - Interactive globe component

assets/ - Static Assets

• browserconfig.xml - Browser config for Microsoft tiles
• manifest.json - PWA manifest file

css/ - Stylesheets

• style.css - Main stylesheet (responsive design, doc sidebar, theme variables)

js/ - JavaScript

• globe.js - Interactive globe functionality
• theme.js - Theme switching (light/dark mode)
• contact-canvas.js - Contact form animations

raw/ - Raw Documentation

Contains unprocessed versions of developer docs:

• docs/dev-custom-auto.md
• docs/dev-custom-widget.md
• docs/dev-markets-auto.md
• docs/dev-markets-widget.md

textures/ - 3D Assets

• earth.txt / earth.backup.txt - Globe texture data

_site/ - Built Output

Generated by Jekyll build process. Mirror of source with compiled HTML.

Documentation Categories & Hierarchy

Feature Categories:

1. Custom Redirects (order: 1-3)
   • Custom Widget (order: 3)
   • Custom Auto (order: 2)
2. Markets Redirects (order: 4-5)
   • Markets Widget (order: 5)
   • Markets Auto (order: 4)
3. Configuration (order: 6-7)
   • Display Settings (order: 6)
   • Geo Targeting (order: 7)
4. Integration & Analytics (order: 8-9)
   • UTM & Tracking (order: 8)
   • Theme Embed (order: 9)
5. General (order: 10-11)
   • Getting Started (order: 10)
   • Plans (order: 11)
   • FAQ
6. Developers (order: 12-15)
   • Custom Widget (order: 12)
   • Custom Auto (order: 13)
   • Markets Widget (order: 14)
   • Markets Auto (order: 15)

Recent Changes Made (March 3, 2026)

Menu Item Title Updates

Removed “Developer Reference” suffix from menu item titles in Related Docs sections and page titles:

Files Updated:

1. _docs/custom-widget.md - Related Docs link updated
2. _docs/custom-auto.md - Related Docs link and title updated
3. _docs/markets-widget.md - Related Docs link updated
4. _docs/markets-auto.md - Related Docs link updated
5. _docs/geo-targeting.md - Related Docs link updated
6. _docs/dev-custom-widget.md - Title updated from “Custom Widget Developer Reference” → “Custom Widget”
7. _docs/dev-custom-auto.md - Title updated from “Custom Auto Developer Reference” → “Custom Auto”
8. _docs/dev-markets-widget.md - Title updated from “Markets Widget Developer Reference” → “Markets Widget”
9. _docs/dev-markets-auto.md - Title updated from “Markets Auto Developer Reference” → “Markets Auto”

Changes Applied:

• Sidebar menu (.docs-sidebar__group) now displays shorter, cleaner titles
• Related Docs sections have simplified link text while maintaining functionality
• All page routes remain unchanged (e.g., /docs/dev-custom-widget/ still functional)

Jekyll Configuration Details

Collections:

• docs - Outputs to true, permalink pattern: /docs/:path/

Analytics:

• Google Analytics 4 enabled (Measurement ID: G-F9BYNNKRNV)

Scripts:

• npm run dev → bundle exec jekyll serve (local development)
• npm run build → bundle exec jekyll build (production build)

Key Features

1. Documentation-Focused Site - 14 detailed markdown docs with cross-linking
2. Responsive Design - CSS with theme variables for light/dark modes
3. Interactive Elements - Globe visualization, theme switcher, contact animations
4. SEO & PWA - Meta configuration, manifest file, GA4 tracking
5. Developer-Friendly - Structured docs with code examples and API references
6. Plan/Pricing Structure - Free, Basic, and Pro tier feature differentiation

Navigation Structure

Main Navigation:

• Index (home page)
• Docs (documentation portal)
• Contact
• Privacy Policy

Documentation Sidebar Categories:

• Custom Redirects
• Markets Redirects
• Configuration
• Integration
• General
• Developers

Build & Deployment

The site is a static Jekyll site suitable for GitHub Pages or any static host. Built output in _site/ directory contains all compiled HTML and assets.