vs-branch-8

.cursor/rules/css-style.mdc

@@ -0,0 +1,62 @@
+---
+description: whenever any *.css file is changed
+globs: 
+alwaysApply: false
+---
+## Introduction
+
+These guidelines establish consistent CSS coding practices, ensuring maintainable and responsive styles across the website.
+
+## Guidelines
+
+### CSS Variables
+- Define colors and typography in `:root`
+```css
+:root {
+  --primary-color: #007bff;
+  --font-family-base: 'Arial', sans-serif;
+  --spacing-unit: 1rem;
+}
+```
+
+### Responsive Design
+- Use mobile-first approach for media queries
+- Implement breakpoints at:
+  - 500px (mobile)
+  - 768px (tablet portrait)
+  - 900px (tablet landscape)
+  - 1300px (desktop)
+  - 1700px (large desktop)
+
+### Units and Measurements
+- Use `rem` units for font sizes and spacing
+- Use relative units for flexible layouts
+- Use percentages for fluid widths
+
+### Example Media Query Structure
+```css
+/* Mobile first base styles */
+.component {
+  width: 100%;
+}
+
+/* Tablet portrait */
+@media (min-width: 768px) {
+  .component {
+    width: 50%;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1300px) {
+  .component {
+    width: 33.33%;
+  }
+}
+```
+
+## Common Pitfalls
+- Using pixel units instead of relative units
+- Not following mobile-first approach
+- Hardcoding colors and typography instead of using CSS variables
+- Inconsistent breakpoint usage 

.cursor/rules/general-code-style.mdc

@@ -0,0 +1,45 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+## Introduction
+
+These guidelines establish fundamental coding standards that apply across all file types in the project, ensuring consistency and maintainability.
+
+## Guidelines
+
+### Indentation and Formatting
+- Use 2-space indentation consistently across all files
+- Maintain consistent spacing around operators and blocks
+- Follow language-specific formatting conventions
+
+### Code Organization
+- Follow DRY (Don't Repeat Yourself) principles
+- Reuse components, variables, and styles where possible
+- Keep related code grouped together logically
+
+### Documentation
+- Add comments for complex logic
+- Write self-documenting code where possible
+- Use clear, descriptive names for variables, functions, and components
+
+## Examples
+
+```javascript
+// Good - Self-documenting code with clear naming
+const calculateTotalPrice = (basePrice, taxRate) => {
+  return basePrice * (1 + taxRate);
+};
+
+// Bad - Unclear naming and unnecessary comments
+const calc = (p, t) => {
+  // multiply price by tax
+  return p * (1 + t);
+};
+```
+
+## Common Pitfalls
+- Inconsistent indentation across different file types
+- Code duplication instead of component reuse
+- Over-commenting obvious code while under-documenting complex logic 

.cursor/rules/html-markdown-style.mdc

@@ -0,0 +1,44 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+ ## Introduction
+
+These guidelines ensure consistent and semantic markup across HTML templates and Markdown content files, promoting accessibility and maintainability.
+
+## Guidelines
+
+### HTML Structure
+- Use semantic HTML elements appropriately
+  - `<header>` for page headers
+  - `<nav>` for navigation
+  - `<main>` for primary content
+  - `<article>` for self-contained content
+  - `<section>` for thematic grouping
+  - `<footer>` for page footers
+
+### CSS Class Naming
+- Follow BEM (Block Element Modifier) naming convention
+  ```html
+  <!-- Example of BEM naming -->
+  <nav class="s-header__nav">
+    <ul class="s-header__nav-list">
+      <li class="s-header__nav-item">
+        <a class="s-header__nav-link s-header__nav-link--active" href="#">Home</a>
+      </li>
+    </ul>
+  </nav>
+  ```
+
+### Markdown Usage
+- Keep content files in Markdown format where possible
+- Use appropriate heading levels (h1-h6)
+- Maintain consistent spacing between sections
+- Use lists and tables for structured content
+
+## Common Pitfalls
+- Using non-semantic div elements instead of appropriate HTML5 elements
+- Inconsistent BEM naming patterns
+- Converting Markdown content to HTML unnecessarily
+- Skipping heading levels in document structure

.cursor/rules/image-guidelines.mdc

@@ -0,0 +1,53 @@
+---
+description: working with images
+globs: 
+alwaysApply: false
+---
+ ## Introduction
+
+These guidelines ensure consistent image handling, optimization, and accessibility across the website.
+
+## Guidelines
+
+### Image Optimization
+- Compress all images to reduce file size while maintaining acceptable quality
+- Choose appropriate image formats:
+  - JPEG for photographs
+  - PNG for images with transparency
+  - SVG for icons and logos
+  - WebP as a modern alternative when browser support allows
+
+### Naming Convention
+- Follow the pattern: `[name]-[descriptor].[extension]`
+- Examples:
+  ```
+  profile-photo.jpg
+  hero-banner-large.png
+  icon-search.svg
+  ```
+
+### Accessibility
+- Include meaningful alt text for all images
+- Use empty alt="" for decorative images
+- Provide descriptive filenames that indicate image content
+
+### Example Implementation
+```html
+<!-- Good -->
+<img 
+  src="team-member-john.jpg" 
+  alt="Dr. John Smith, Lead Researcher"
+  width="300"
+  height="400"
+/>
+
+<!-- Bad -->
+<img src="IMG001.jpg" />
+```
+
+## Common Pitfalls
+- Uploading uncompressed images
+- Missing alt text on important images
+- Using generic or numbered filenames
+- Not following the naming convention
+- Forgetting to specify image dimensions

.cursor/rules/javascript-style.mdc

@@ -0,0 +1,58 @@
+---
+description: making js related edits
+globs: 
+alwaysApply: false
+---
+## Introduction
+
+These guidelines establish modern JavaScript coding practices, ensuring consistent and maintainable code across the project.
+
+## Guidelines
+
+### Modern JavaScript Features
+- Use ES6+ features consistently:
+  - Arrow functions for callbacks and methods
+  - Template literals for string interpolation
+  - Destructuring for object and array manipulation
+  - Spread/rest operators where appropriate
+
+### Code Structure
+- Always include 'use strict' mode
+- Use `const` by default, `let` when reassignment is needed
+- Never use `var`
+- Use camelCase for variable and function names
+
+### Asynchronous Code
+- Use async/await for asynchronous operations
+- Implement proper error handling with try/catch blocks
+```javascript
+// Good
+async function fetchData() {
+  try {
+    const response = await api.getData();
+    return response;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    throw error;
+  }
+}
+
+// Bad
+function fetchData() {
+  return api.getData()
+    .then(response => response)
+    .catch(error => console.error(error));
+}
+```
+
+### Event Handling
+- Prefer event delegation for multiple similar elements
+- Use descriptive event handler names
+- Remove event listeners when components are destroyed
+
+## Common Pitfalls
+- Not using strict mode
+- Mixing async/await with .then() chains
+- Missing error handling in async operations
+- Using var instead of const/let
+- Direct event binding instead of delegation for multiple elements 

.cursor/rules/project-structure.mdc

@@ -0,0 +1,29 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+## Introduction
+
+These guidelines ensure consistent project organization and documentation maintenance across the CoMPhy Lab website codebase.
+
+## Guidelines
+
+### Repository Structure
+- The README.md file at repository root serves as the primary documentation
+- Templates are located in `_layouts/*.html`
+- Each template has a corresponding CSS file:
+  - `default.html` → `assets/css/styles.css`
+  - `research.html` → `assets/css/research.css`
+  - `team.html` → `assets/css/team.css`
+  - All templates use `search.css` and `styles.css`
+
+### Documentation Maintenance
+- Keep README.md up-to-date with any structural changes
+- Document any new files or directories added to the project
+- Manual control over Jekyll server deployment is preferred
+
+## Common Pitfalls
+- Forgetting to update README.md after structural changes
+- Inconsistent template-to-CSS file mapping
+- Running Jekyll server automatically instead of manual control 

.cursor/rules/rule-writing-guide.mdc

@@ -0,0 +1,44 @@
+---
+description: creating new Cursor Project Rules (.mdc files)
+globs: 
+alwaysApply: false
+---
+## Purpose
+
+This meta-rule provides structured guidance for generating `.mdc` files that define Cursor Project Rules. It aims to ensure consistency, clarity, and adaptability across diverse codebases, with particular attention to projects utilizing CFD frameworks.
+
+## Applicability
+
+Utilize this meta-rule when:
+
+- Establishing new coding conventions or architectural patterns within your project.
+- Documenting project-specific workflows or standards.
+- Providing the AI with structured context to enhance code generation and assistance. @basilisk.ft
+
+## Instructions for Creating a Cursor Project Rule
+
+1. YAML Frontmatter: Begin each `.mdc` file with a YAML frontmatter block containing:
+   - `title`: A concise, descriptive title for the rule.
+   - `description`: A brief explanation of the rule's purpose and scope.
+   - `glob`: File pattern(s) that the rule should apply to.
+
+2. Content Structure: Organize the rule's content using markdown headings:
+   - Introduction: Explain the rationale behind the rule and its relevance to the project.
+   - Guidelines: Detail the specific standards, conventions, or procedures to follow.
+   - Examples: Provide code snippets or references to illustrate correct implementation.
+   - Common Pitfalls: Highlight frequent mistakes and how to avoid them.
+
+3. Language and Tone: Use clear, concise language. Maintain an academic and logical tone, focusing on precision and clarity.
+
+4. Formatting: Utilize markdown syntax appropriately:
+   - Use fenced code blocks with language identifiers for code examples.
+   - Employ bullet points or numbered lists for enumerations.
+   - Ensure proper indentation and spacing for readability.
+
+5. File Naming: Name the `.mdc` file using lowercase letters and hyphens (kebab-case), reflecting the rule's focus (e.g., `coding-standards.mdc`).
+
+6. Save files in .cursor/rules/
+
+## Example Prompt
+
+"Using the Meta-Rule for Crafting Cursor Project Rules based on our conversation here, create a new rule that outlines the coding standards for header files, including indentation, naming conventions, and documentation practices."