A comprehensive, interactive website providing personalized guidance for sustainable computing practices. Built with Nuxt 3 and designed for deployment on GitHub Pages.
- Personalized Questionnaire - Get tailored recommendations based on your role, capabilities, and goals
- For Users - Practical advice for reducing your personal computing carbon footprint (40-60% reduction possible)
- For Developers - Technical implementations of carbon-aware computing patterns with code examples in multiple frameworks
- Carbon Intensity APIs - Integration guides for real-time grid carbon data
- Multi-Framework Support - Code examples in Vue/Nuxt, React/Next.js, Svelte/SvelteKit, and Vanilla JavaScript
- Interactive Visualizations - Carbon intensity forecasts, usage charts, and GitHub-style heatmaps
- Community Contributions - Submit your own guides via GitHub OAuth with image uploads, complexity tagging, and filtering
- Node.js 18+ and npm
# Install dependencies
npm install
# Start development server at http://localhost:3000
npm run dev
# Build for production
npm run build
# Generate static site
npm run generate
# Preview production build
npm run preview# Generate static site
npm run generate
# Deploy to GitHub Pages
npm run deployThe site will be available at: https://[your-username].github.io/Green_Computing_Guidelines/
.
├── pages/ # Application pages
│ ├── index.vue # Landing page
│ ├── basics.vue # Green computing fundamentals
│ ├── questionnaire.vue # Interactive questionnaire
│ ├── contribute/ # Community contribution form
│ │ └── index.vue # Multi-step contribution wizard
│ └── guidelines/
│ ├── developer/ # Developer-specific guidance
│ │ └── [slug].vue # Community-contributed guides
│ └── user/ # User-specific guidance
│ └── [slug].vue # Community-contributed guides
├── components/ # Reusable Vue components
│ ├── NavigationBar.vue # Site navigation
│ ├── contribute/ # Contribution form components
│ │ ├── SectionEditor.vue # Section content editor
│ │ ├── ImageUploader.vue # Image upload with preview
│ │ ├── IconPicker.vue # PhosphorIcon selector
│ │ └── PreviewPane.vue # Live preview
│ └── [other components]
├── stores/ # Pinia state management
│ ├── questionnaire.ts # Questionnaire answers & logic
│ ├── contribution.ts # Contribution form state
│ └── github-auth.ts # GitHub OAuth state
├── composables/ # Composable functions
│ ├── useGitHubAuth.ts # GitHub Device Flow auth
│ └── useGitHubIssues.ts # GitHub Issues API
├── scripts/ # Build & generation scripts
│ ├── generate-guide.js # Generate Vue page from JSON
│ └── update-community-guides.js # Update guide index
├── content/ # Content data files
│ └── community-guides.json # Index of community guides
├── assets/ # CSS, images, fonts
│ └── css/
│ └── main.scss # Global styles
├── public/ # Static assets
│ └── images/
│ └── community/ # Uploaded guide images
└── nuxt.config.ts # Nuxt configuration
- Everyday computer users
- Students and office workers
- Anyone wanting to reduce their digital carbon footprint
Key Topics:
- Carbon-aware computing (timing high-energy tasks)
- Power settings optimization (Windows, macOS, Linux, Mobile)
- Device lifespan extension (save 75-85% of carbon)
- Smart software choices (browsers, email, streaming)
- Internet usage optimization (Wi-Fi vs cellular)
- Smart purchasing decisions (refurbished, certifications)
- Software engineers
- DevOps engineers
- System architects
Key Topics:
- Carbon Intensity APIs (UK API, Electricity Maps, WattTime, Carbon Aware SDK)
- Time shifting (scheduling workloads during low-carbon hours)
- Location shifting (choosing greener regions)
- Virtual capacity curves (carbon-aware scaling)
- Implementation examples in multiple frameworks
- Framework: Nuxt 3 (Vue 3)
- State Management: Pinia
- Styling: SCSS
- Charts: Chart.js
- Content: @nuxt/content
- Deployment: GitHub Pages (static site generation)
By following the guidelines in this site, users can expect:
- 40-60% reduction in computing carbon footprint
- $50-200/year in electricity savings
- 2-3 years extended device lifespan
- Significant contribution to global carbon reduction when practices are aggregated
- UK Carbon Intensity API - Free, no authentication required
- Electricity Maps - Global coverage
- WattTime API - North America and beyond
- Carbon Aware SDK - Open source
If deploying to a GitHub Pages subdirectory, update nuxt.config.ts:
app: {
baseURL: process.env.NODE_ENV === 'production'
? '/Green_Computing_Guidelines/' // Replace with your repo name
: '/',
}If using a custom domain, set baseURL: '/' in production.
Contributions are welcome! This project aims to provide accessible, accurate, and actionable green computing guidance.
The site supports community-contributed guides through a structured submission process.
User Flow:
1. User visits /contribute page
2. Authenticates with GitHub (OAuth Device Flow)
3. Fills out structured form (metadata, tags, sections)
4. Submits → Creates GitHub Issue with JSON data
5. Admin reviews and adds "approved" label
6. Scripts generate Vue page and update indexes
7. Changes are committed and site rebuilds
| File | Purpose |
|---|---|
pages/contribute/index.vue |
Multi-step contribution form |
stores/contribution.ts |
Form state management (Pinia) |
stores/github-auth.ts |
GitHub OAuth state |
composables/useGitHubAuth.ts |
GitHub Device Flow authentication |
composables/useGitHubIssues.ts |
GitHub Issues API wrapper |
scripts/generate-guide.js |
Generates Vue page from JSON |
scripts/update-community-guides.js |
Updates community-guides.json index |
content/community-guides.json |
Index of all community guides |
# Generate a Vue page from contribution JSON
node scripts/generate-guide.js '<json-data>'
# Update community-guides.json with new entry
node scripts/update-community-guides.js '<json-data>'interface GuideContribution {
meta: {
title: string;
slug: string; // auto-generated from title
type: 'developer' | 'user';
complexity?: 'foundation' | 'standard' | 'advanced'; // required for developer
description: string;
icon: string; // PhosphorIcon name
contributor: {
github: string;
name?: string;
};
createdAt: string;
};
tags: {
roles: string[]; // ['developer', 'devops', etc.]
capabilities: string[]; // ['carbon-api', 'cloud-metrics', etc.]
goals: string[]; // ['quick-wins', 'reduce-costs', etc.]
};
sections: GuideSection[];
}
interface GuideSection {
id: string;
title: string;
type: 'content' | 'tabs' | 'cards' | 'code' | 'tip' | 'warning' | 'image';
content?: string; // Markdown for content/tip/warning
items?: SectionItem[]; // For tabs/cards
code?: {
language: string;
filename?: string;
code: string;
};
image?: {
data: string; // base64 encoded image (in submission)
filename: string; // original filename
alt: string; // alt text for accessibility
caption?: string; // optional caption
path?: string; // public path (in generated file)
};
}Developer guides support filtering by complexity level:
- Foundation - Essential concepts everyone should know. No prerequisites.
- Standard - Common patterns requiring basic green computing knowledge.
- Advanced - Complex implementations for experienced developers.
- Recommended For You - Based on questionnaire answers (matches guide tags to user's selected goals/capabilities).
Each guide has one complexity tag. The "Recommended" status is computed dynamically based on the user's questionnaire responses, not set by the contributor.
Contributors can add images to their guides:
- Supported formats: PNG, JPG, GIF, WebP
- Max file size: 2MB per image
- Storage: Images are stored in
public/images/community/{slug}/
How it works:
- User uploads image via the contribution form
- Image is converted to base64 and stored in the submission JSON
- When
generate-guide.jsruns, it:- Decodes the base64 image
- Saves it to
public/images/community/{slug}/image-{n}.{ext} - Updates the section with the public file path
- Generated Vue file references the local image path
Image section structure:
{
type: 'image',
title: 'Optional Section Title',
image: {
data: 'data:image/png;base64,...', // In submission
filename: 'diagram.png',
alt: 'Architecture diagram', // Required for accessibility
caption: 'Figure 1: System overview' // Optional
}
}Built-in guides in pages/guidelines/developer/index.vue use the builtInGuides array:
const builtInGuides: Guide[] = [
{
slug: 'carbon-apis',
title: 'Carbon Intensity APIs',
complexity: 'foundation', // 'foundation' | 'standard' | 'advanced'
recommendedFor: ['quick-wins', 'reduce-costs'], // questionnaire goals
// ... other fields
}
]This project is open source and available for educational and non-commercial use.
- GitHub Repository: https://github.com/prodmodfour/Green_Computing_Guidelines
- Live Site: https://prodmodfour.github.io/Green_Computing_Guidelines/
Built with 💚 for a more sustainable digital future.