Contribution Guide

​

Getting Started

​

Before You Contribute

1. Set up your development environment - Follow the setup guide
2. Understand the architecture - Review the project architecture
3. Find an issue to work on - Check the GitHub issues

​

Contribution Workflow

git clone https://github.com/YOUR_USERNAME/shs.git
cd shs

git checkout -b feature/your-feature-name

npm run lint

git add .
git commit -m "Add spring theme with sakura particles"

git push origin feature/your-feature-name

​

Coding Standards

​

ESLint Configuration

extends: [
  'plugin:vue/essential',
  '@vue/airbnb',
  '@vue/typescript/recommended',
  'plugin:storybook/recommended',
]

​

Code Style Rules

indent: ['error', 2, { SwitchCase: 1 }]

// TypeScript files require explicit function return types
export function calculateGrade(score: number): string {
  return score >= 90 ? 'A' : 'B';
}

'vue/multi-word-component-names': 'off'

• console.log is allowed in development
• Warnings in production
• No debugger statements in production

​

Import Paths

// Good
import Card from '@/components/Card.vue';
import { useThemeStore } from '@/stores/themes';

// Avoid
import Card from '../../../components/Card.vue';

​

Vue 3 Best Practices

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useThemeStore } from '@/stores/themes';

const themeStore = useThemeStore();
const count = ref(0);

const doubled = computed(() => count.value * 2);
</script>

<script setup lang="ts">
interface Props {
  title: string;
  count?: number;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  update: [value: number];
}>();
</script>

​

State Management

• stores/authentication.ts - User authentication
• stores/clock.ts - Time and clock state
• stores/schedules.ts - Bell schedules
• stores/themes.ts - Theme management
• stores/user-settings.ts - User preferences

import { useThemeStore } from '@/stores/themes';

const themeStore = useThemeStore();
themeStore.setTheme('sakura');

​

Common Contribution Areas

​

Adding New Themes

1. Create theme assets in src/themes/assets/
2. Configure theme in src/themes/base/
3. Update theme store in src/stores/themes.ts
4. Test theme switching functionality

​

Updating Lunch Menus

1. Locate menu data in src/data/
2. Update menu items and schedules
3. Test rendering in the UI

​

Fixing Bugs

1. Reproduce the bug locally
2. Identify the root cause
3. Write a fix with minimal changes
4. Test thoroughly
5. Consider adding a test case

​

Adding Features

1. Discuss the feature in a GitHub issue first
2. Design the feature to fit the existing architecture
3. Implement using existing patterns and components
4. Add Storybook stories for new components
5. Update documentation if needed

​

Testing Your Changes

# Run dev server and test in browser
npm run dev

# Test on localhost:8080
# Try different themes
# Test on mobile viewport

​

Pull Request Guidelines

​

Before Submitting

• Code passes npm run lint
• Changes tested locally
• Commit messages are clear
• No sensitive data or credentials committed
• Branch is up to date with main

​

PR Description Should Include

1. What - Summary of changes
2. Why - Reason for the changes
3. How - Approach taken
4. Testing - How you tested the changes
5. Screenshots - For UI changes

​

Review Process

• A team member will review your PR
• Address any requested changes
• Once approved, your PR will be merged
• Your changes will be deployed to Cloudflare Pages

​

Code Review Checklist

• Code quality: Follows ESLint rules and project patterns
• Functionality: Changes work as intended
• Performance: No unnecessary performance regressions
• Accessibility: UI changes are accessible
• Compatibility: Works across browsers
• Security: No security vulnerabilities introduced

​

Learning Resources

• Vue 3: Official Vue 3 Documentation
• TypeScript: TypeScript Handbook
• Pinia: Pinia Documentation
• Vite: Vite Guide

​

Getting Help

• GitHub Issues: Ask questions in issue comments
• Team Communication: Join the contributor team for guidance
• Code Comments: Read inline comments for context

​

Recognition