Keywords

creativity metrics, art analytics, artalytics

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Repository Overview

The Artalytics Main Website serves as the primary marketing and product showcase platform for Artalytics, the digital art analytics and authentication platform. Built with Quarto, it features responsive design, comprehensive SEO optimization, and integration with R for dynamic content generation and data visualization.

Repository Structure

site-main/
├── _quarto.yml              # Main Quarto configuration
├── _website.yml             # Website-specific settings
├── index.qmd                # Homepage
├── how-it-works.qmd         # Product explanation
├── metrics-overview.qmd     # Metrics documentation overview
├── _faq.qmd                 # FAQ section (included component)
├── articles/                # Article content and resources
├── demo/                    # Product demonstration materials
├── www/                     # Static web assets
│   ├── css/                 # Stylesheets
│   │   ├── styles.css      # Main styles
│   │   ├── modals.css      # Modal styling
│   │   └── colors.css      # Color definitions
│   └── images/             # Image assets
├── _R/                      # R scripts for content generation
├── .github/
│   └── workflows/
│       └── deploy-site.yml # GitHub Actions deployment
├── README.md               # Repository documentation
└── artalytics-pages.Rproj  # RStudio project file

Technology Stack

  • Platform: Quarto Website
  • Theme: Cosmo (Bootstrap-based)
  • R Integration: Dynamic content generation and data visualization
  • Deployment: GitHub Actions → Direct server deployment via SSH
  • Server: Apache2 on artalytics.app
  • Dependencies: R packages (ggplot2, plotly, reshape2)

Configuration Architecture

Quarto Configuration (_quarto.yml)

project:
  type: website

metadata-files:
  - _website.yml

format:
  html:
    theme: cosmo
    lightbox: true
    smooth-scroll: true
    link-external-newwindow: true
    css:
      - ./www/css/styles.css
      - ./www/css/modals.css
      - ./www/css/colors.css
    title-prefix: "Artalytics"
    description-meta: "Artalytics transforms creativity into actionable data..."

Website Configuration (_website.yml)

  • Extended metadata and navigation settings
  • Email configuration for contact forms
  • SEO optimization settings

Deployment Architecture

Automated Deployment Pipeline

# .github/workflows/deploy-site.yml
name: Deploy-Site
on:
  push:
    branches: [main]

jobs:
  deploy:
    steps:
      - Install system dependencies
      - Setup Quarto and R
      - Install R packages
      - Render website
      - Deploy to artalytics.app
      - Reload Apache server

System Requirements

  • Quarto: Version 1.6.0
  • R: Latest version
  • R Packages: ggplot2, plotly, reshape2
  • System Dependencies: libcurl4-openssl-dev, libssl-dev, libxml2-dev

Development Workflow

Local Development Setup

# Clone repository
git clone [repository-url]
cd site-main

# Install R dependencies (if using R)
Rscript -e "install.packages(c('ggplot2', 'plotly', 'reshape2'))"

# Preview site locally
quarto preview

# Open in RStudio (optional)
open artalytics-pages.Rproj

Content Development

Page Structure

All pages use Quarto Markdown format:

---
title: "Page Title"
description: "Page description for SEO"
---

# Page Content

Content with R integration capabilities

R Integration

# Example R code block in .qmd files
#| echo: false
#| warning: false

library(ggplot2)
# Generate dynamic content or visualizations

Building and Testing

Development Commands

# Render entire site
quarto render

# Preview with live reload
quarto preview

# Check site configuration
quarto check

# Render specific page
quarto render index.qmd

Testing Checklist

  • Test responsive design across devices
  • Verify all internal and external links
  • Check R code execution and outputs
  • Validate HTML and CSS
  • Test contact forms and interactions

Content Management

Site Structure

  1. Homepage (index.qmd): Product overview and value proposition
  2. How It Works (how-it-works.qmd): Product functionality explanation
  3. Metrics Overview (metrics-overview.qmd): Technical capabilities
  4. Articles: Thought leadership and case studies
  5. Demo: Interactive product demonstrations
  6. FAQ: Common questions and answers

Dynamic Content

  • R Visualizations: Generated charts and analytics
  • Data Integration: Real-time or processed data displays
  • Interactive Elements: Plotly charts and interactive components

Styling Architecture

CSS Organization

  1. styles.css: Main site styling and layout
  2. modals.css: Modal dialog styling
  3. colors.css: Color variable definitions

Design System

  • Primary Colors: Defined in colors.css
  • Typography: Responsive font sizing and hierarchy
  • Components: Reusable UI components and layouts
  • Responsive Design: Mobile-first approach

Brand Integration

  • Consistent with Artalytics brand guidelines
  • Professional color palette and typography
  • Cohesive visual identity across all pages

SEO and Metadata Optimization

Meta Configuration

# In _quarto.yml
title-meta: "Digital Art Analytics and Authentication Platform"
author-meta: "Bobby Fatemi, Founder at Artalytics"
description-meta: "Artalytics transforms creativity into actionable data..."
keywords: ["creativity metrics", "art analytics", "artalytics"]
image: ./www/images/png/social-card.png
image-alt: "Digital Artwork Analytics"

SEO Best Practices

  • Descriptive page titles with brand prefix
  • Meta descriptions for all pages
  • Open Graph and Twitter Card integration
  • Semantic HTML structure
  • Alt text for all images
  • Internal linking strategy

Interactive Features

Smooth Scrolling

  • Enhanced user experience
  • Smooth navigation between sections
  • Improved accessibility

R Integration and Data Visualization

R Script Organization

  • **_R/ Directory**: Centralized R scripts
  • Dynamic Generation: Real-time chart creation
  • Data Processing: Analytics and metric calculations

Visualization Capabilities

  • ggplot2: Static chart generation
  • plotly: Interactive visualizations
  • reshape2: Data transformation and manipulation

Example R Integration

# In .qmd files
#| echo: false
#| fig-width: 10
#| fig-height: 6

library(ggplot2)
library(plotly)

# Create interactive visualization
p <- ggplot(data, aes(x = variable, y = value)) +
  geom_line() +
  theme_minimal()

ggplotly(p)

Performance Optimization

Image Optimization

  • Responsive image sizing
  • Optimized file formats (WebP where supported)
  • Lightbox integration for large images
  • Alt text for accessibility

Code Optimization

  • Efficient R code execution
  • Quarto freeze for cached computations
  • Minified CSS and JavaScript
  • Optimized asset loading

Server Performance

  • Apache configuration optimization
  • Gzip compression
  • Browser caching strategies
  • CDN considerations

Security Considerations

Deployment Security

  • SSH key-based deployment
  • Secure server configuration
  • HTTPS enforcement
  • Regular security updates

Content Security

  • Sanitized user inputs (if any)
  • Secure external link handling
  • Privacy protection in analytics
  • GDPR compliance considerations

Integration with Artalytics Ecosystem

Cross-Platform Linking

  • Blog: Link to blog.artalytics.app for content marketing
  • Metrics Guide: Reference metrics.artalytics.info for technical details
  • Certificates: Link to certificates.art for authentication features
  • Investment: Connect to investor materials appropriately

Brand Consistency

  • Unified visual identity across platforms
  • Consistent messaging and positioning
  • Coordinated content strategy
  • Shared asset management

Analytics and Monitoring

Performance Monitoring

  • Website analytics integration
  • Performance metric tracking
  • User behavior analysis
  • Conversion tracking

Error Monitoring

  • Server error tracking
  • JavaScript error monitoring
  • Uptime monitoring
  • Performance alerting

Maintenance and Updates

Regular Maintenance Tasks

  • Content Updates: Product features, pricing, testimonials
  • Technical Updates: Quarto, R, and dependency updates
  • Security Updates: Server and application security patches
  • Performance Reviews: Site speed and optimization audits

Content Review Cycle

  • Monthly content accuracy reviews
  • Quarterly strategic content updates
  • Annual comprehensive site audit
  • Ongoing SEO optimization

Troubleshooting Guide

Common Issues

Deployment Failures

# Check GitHub Actions logs
# Verify SSH connectivity
ssh root@artalytics.app

# Check server permissions
ls -la /var/www/html/

# Verify Apache status
systemctl status apache2

R Integration Issues

# Check R installation
R --version

# Verify R packages
Rscript -e "library(ggplot2); library(plotly); library(reshape2)"

# Test R code execution
quarto render --execute-debug

Styling Issues

  • Check CSS file paths in _quarto.yml
  • Verify responsive design across devices
  • Test browser compatibility
  • Validate CSS syntax

Debug Commands

# Comprehensive site check
quarto check

# Render with debug output
quarto render --debug

# Check deployed site
curl -I https://artalytics.app

# Test server response
ping artalytics.app

Best Practices

Content Development

  • Write clear, engaging copy focused on user benefits
  • Use consistent tone and voice across all pages
  • Include relevant keywords naturally
  • Structure content with proper headings
  • Test all interactive elements

Technical Development

  • Follow Quarto best practices for configuration
  • Use semantic HTML structure
  • Implement proper error handling
  • Test thoroughly before deployment
  • Monitor performance continuously

Collaboration

  • Use clear commit messages
  • Document significant changes
  • Coordinate with other Artalytics properties
  • Maintain consistent brand messaging
  • Regular stakeholder reviews