spyder-ide · conradolandia · Feb 11, 2025 · Jul 16, 2025 · Jul 16, 2025 · Jul 16, 2025
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,200 @@
+# Contributing to the Spyder Website
+
+Thank you for your interest in contributing to the Spyder website! This guide will help you get started with different types of contributions.
+
+## Table of Contents
+
+- [Contributing to the Spyder Website](#contributing-to-the-spyder-website)
+  - [Table of Contents](#table-of-contents)
+  - [Getting Started](#getting-started)
+  - [Development Setup](#development-setup)
+  - [Types of Contributions](#types-of-contributions)
+  - [Creating Blog Posts](#creating-blog-posts)
+    - [Adding New Authors](#adding-new-authors)
+    - [Creating the Blog Post](#creating-the-blog-post)
+  - [Code Contributions](#code-contributions)
+    - [Guidelines](#guidelines)
+    - [File Structure](#file-structure)
+  - [Reporting Issues](#reporting-issues)
+  - [Pull Request Process](#pull-request-process)
+    - [Review Process](#review-process)
+  - [Style Guidelines](#style-guidelines)
+  - [Questions?](#questions)
+
+## Getting Started
+
+1. **Fork the repository** from [spyder-website](https://github.com/spyder-ide/spyder-website)
+2. **Clone your fork** locally:
+   ```bash
+   git clone https://github.com/YOUR-USERNAME/spyder-website.git
+   cd spyder-website
+   ```
+3. **Create a new branch** for your changes:
+   ```bash
+   git checkout -b your-feature-branch
+   ```
+
+## Development Setup
+
+1. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+2. **Start the development server**:
+   ```bash
+   npm run dev
+   ```
+   The site will be available at `http://localhost:5173`
+
+3. **Available scripts**:
+   - `npm run dev` - Start development server
+   - `npm run build` - Build for production
+   - `npm run preview` - Preview production build
+
+## Types of Contributions
+
+We welcome various types of contributions:
+
+- **Blog posts** - Share news, tutorials, or insights about Spyder
+- **Bug fixes** - Fix issues in the website functionality
+- **Feature enhancements** - Improve existing features or add new ones
+- **Documentation** - Improve clarity and completeness of documentation
+
+## Creating Blog Posts
+
+### Adding New Authors
+
+If the blog post author(s) haven't been added yet:
+
+1. **Create author folder** in `static/assets/authors/` using a simple identifier (no spaces/special characters)
+2. **Add author files**:
+   - Square avatar image (recommended: 512×512px WEBP format)
+   - `metadata.json` file:
+   ```json
+   {
+       "name": "Author's Display Name",
+       "image": "filename.webp"
+   }
+   ```
+
+### Creating the Blog Post
+
+1. **Create post folder** in `src/routes/blog/` (folder name becomes URL slug - use lowercase, no spaces)
+
+2. **Add main content file** `+page.md` with proper frontmatter:
+   ```yaml
+   ---
+   title: Blog Post Title # Required
+   author: author-id  # Required. For multiple authors, use array: [author1, author2]
+   pub_date: YYYY-MM-DD # Required (ISO format)
+   category: Category Name  # Optional
+   tags: Tag1, Tag2  # Optional (comma-separated)
+   summary: Concise overview of content # Required
+   ---
+   ```
+
+3. **Write content** using mdsvex Markdown:
+   - [Never indent code blocks](https://mdsvex.pngwn.io/docs#limitations)
+   - Use standard Markdown syntax for formatting
+   - Follow our [style guide](#style-guidelines) for consistency
+
+4. **Add images** (if needed):
+   ```markdown
+   ![Meaningful description](image.webp "Optional caption")
+   ```
+   - Store images in the post's folder
+   - Use descriptive alt text (avoid "image of...", "picture of...", etc.)
+   - Prefer WEBP format for better performance
+
+5. **Preview your post**:
+   ```bash
+   npm run dev
+   ```
+   - Verify post appears at `/blog/your-post-name`
+   - Check author metadata and image display
+   - Test on different screen sizes
+
+## Code Contributions
+
+### Guidelines
+
+- Follow the existing code style and conventions
+- Write clear, descriptive commit messages
+- Test your changes thoroughly
+- Update documentation if needed
+
+### File Structure
+
+- `src/routes/` - Page routes and content
+- `src/lib/` - Reusable components and utilities
+- `static/assets/` - Static assets (images, fonts, etc.)
+- `src/app.css` - Global styles
+
+## Reporting Issues
+
+Before creating an issue:
+
+1. **Search existing issues** to avoid duplicates
+2. **Use the issue template** (if available)
+3. **Include relevant details**:
+   - Clear description of the problem
+   - Steps to reproduce
+   - Expected vs. actual behavior
+   - Browser/OS information (if relevant)
+   - Screenshots (if applicable)
+
+## Pull Request Process
+
+1. **Ensure your changes work locally**:
+   ```bash
+   npm run dev
+   # Test your changes thoroughly
+   ```
+
+2. **Keep commits clean and descriptive**:
+   ```bash
+   git add .
+   git commit -m "Add: New blog post about feature X"
+   ```
+
+3. **Push to your fork**:
+   ```bash
+   git push origin your-feature-branch
+   ```
+
+4. **Create Pull Request**:
+   - Target the `main` branch
+   - Use a clear, descriptive title
+   - Fill out the PR template (if available)
+   - Link any related issues
+
+5. **After submission**:
+   - Be responsive to feedback
+   - Make requested changes promptly
+   - Keep your branch updated with main if needed
+
+### Review Process
+
+- All PRs require review before merging
+- CI/CD will automatically build and test your changes
+- Reviewers may request changes or ask questions
+- Once approved, maintainers will merge your PR
+
+## Style Guidelines
+
+- Use clear, concise language
+- Follow existing naming conventions
+- Maintain consistent formatting
+- Optimize images for web (prefer WEBP format)
+- Ensure accessibility best practices
+
+## Questions?
+
+If you have questions or need help:
+
+- Check existing [documentation](README.md)
+- Search [existing issues](https://github.com/spyder-ide/spyder-website/issues)
+- Create a new issue with the "question" label
+
+Thank you for contributing to the Spyder website! 🎉
diff --git a/README.md b/README.md
@@ -1,37 +1,173 @@
-# Spyder-Website
+# Spyder Website
 
-Minimal static [SvelteKit](https://kit.svelte.dev/) set-up made deployable to [GitHub Pages](https://metonym.github.io/sveltekit-gh-pages/). Based on [sveltekit-gh-pages](https://metonym.github.io/sveltekit-gh-pages/)
+![Spyder Logo](static/assets/media/spyder-logomark.png)
 
-- PostCSS framework provided by [TailwindCSS](https://tailwindcss.com/)
-- Icons from the [Svelte Icons Pack](https://leshak.github.io/svelte-icons-pack/)
-- Markdown files processed with [mdsvex](https://mdsvex.pngwn.io/)
+The official website for [Spyder IDE](https://www.spyder-ide.org) - a powerful scientific environment written in Python, for Python, and designed by and for scientists, engineers and data analysts.
 
-## Deployment
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Built with SvelteKit](https://img.shields.io/badge/Built%20with-SvelteKit-orange.svg)](https://kit.svelte.dev/)
+[![Deployed on GitHub Pages](https://img.shields.io/badge/Deployed%20on-GitHub%20Pages-blue.svg)](https://pages.github.com/)
 
-### 1) Install dependencies with NPM:
+🌐 **Live Site**: [www.spyder-ide.org](https://www.spyder-ide.org)
 
-```bash
-npm install
-```
+## About
 
-### 2) Test the website (optional)
+This repository contains the source code for the official Spyder IDE website. The site serves as:
 
-```bash
-npm run dev
-```
+- **Information hub** for Spyder features and capabilities
+- **Download center** for installers and releases
+- **Blog platform** for project updates and community news
+- **Documentation gateway** linking to guides and resources
+- **Community showcase** highlighting contributors and achievements
 
-And visit your local copy at [https://localhost:5173](https://localhost:5173)
+## Tech Stack
 
-### 3) Build the website
+This website is built with modern web technologies:
 
-```bash
-npm run build
+- **Framework**: [SvelteKit](https://kit.svelte.dev/) - Full-stack web framework
+- **Styling**: [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
+- **Content**: [mdsvex](https://mdsvex.pngwn.io/) - Markdown processor for Svelte
+- **Icons**: [Svelte Icons Pack](https://leshak.github.io/svelte-icons-pack/) - Icon library
+- **Deployment**: [GitHub Pages](https://pages.github.com/) - Static site hosting
+- **CI/CD**: GitHub Actions - Automated deployment
+
+## Features
+
+- ✨ **Modern Design** - Clean, responsive interface
+- 📱 **Mobile Optimized** - Works perfectly on all devices
+- 🚀 **Fast Performance** - Static site generation for speed
+- 📝 **Blog System** - Dynamic blog with author management
+- 🎨 **Component Library** - Reusable UI components
+- 🌍 **Internationalization** - Multi-language support ready
+- ♿ **Accessibility** - WCAG compliant design
+- 🔍 **SEO Optimized** - Meta tags and structured data
+
+## Quick Start
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (version 18 or higher)
+- [npm](https://www.npmjs.com/) (comes with Node.js)
+
+### Development Setup
+
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/spyder-ide/spyder-website.git
+   cd spyder-website
+   ```
+
+2. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+3. **Start development server**:
+   ```bash
+   npm run dev
+   ```
+
+   The site will be available at [http://localhost:5173](http://localhost:5173)
+
+### Available Scripts
+
+| Command                           | Description                              |
+| --------------------------------- | ---------------------------------------- |
+| `npm run dev`                     | Start development server with hot reload |
+| `npm run build`                   | Build the site for production            |
+| `npm run preview`                 | Preview the production build locally     |
+| `npm run generate-og-images`      | Generate Open Graph images               |
+| `npm run generate-contrib-data`   | Generate contributor data                |
+| `npm run generate-hubspot-data`   | Generate HubSpot integration data        |
+| `npm run generate-funding-schema` | Generate funding schema                  |
+
+## Project Structure
+
+```
+spyder-website/
+├── src/
+│   ├── routes/                 # Page routes and content
+│   │   ├── +page.svelte       # Homepage
+│   │   ├── about/             # About page
+│   │   ├── blog/              # Blog posts and pages
+│   │   └── download/          # Download page
+│   ├── lib/                   # Reusable components and utilities
+│   │   ├── blocks/            # Page section components
+│   │   ├── components/        # UI components
+│   │   ├── config/            # Configuration and data
+│   │   ├── i18n/              # Internationalization
+│   │   ├── store/             # State management
+│   │   └── utils/             # Utility functions
+│   ├── app.css                # Global styles
+│   └── app.html               # HTML template
+├── static/                    # Static assets
+│   └── assets/                # Images, fonts, media
+├── scripts/                   # Build and utility scripts
+└── ci/                        # CI/CD scripts
 ```
 
-You can also test the built website with
+## Deployment
+
+This website is automatically deployed to GitHub Pages using GitHub Actions. The deployment process:
+
+1. **Triggers** on push to `main` branch
+2. **Builds** the static site using SvelteKit
+3. **Generates** dynamic content (OG images, contributor data, etc.)
+4. **Deploys** to GitHub Pages
+
+### Manual Deployment
+
+For manual deployment or testing:
 
 ```bash
+# Build the site
+npm run build
+
+# Preview the built site
 npm run preview
 ```
 
-And preview your built site at [https://localhost:5174](https://localhost:5174)
+The built site will be available at [http://localhost:5174](http://localhost:5174)
+
+## Contributing
+
+We welcome contributions from the community! Please see our [Contributing Guide](CONTRIBUTING.md) for details on:
+
+- Setting up the development environment
+- Creating blog posts
+- Making code contributions
+- Submitting pull requests
+- Reporting issues
+
+### Quick Contribution Steps
+
+1. Fork this repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes
+4. Test locally (`npm run dev`)
+5. Commit your changes (`git commit -m 'Add amazing feature'`)
+6. Push to your branch (`git push origin feature/amazing-feature`)
+7. Open a Pull Request
+
+## Community
+
+- 🐍 **Main Project**: [Spyder IDE](https://github.com/spyder-ide/spyder)
+- 💬 **Discussions**: [GitHub Discussions](https://github.com/spyder-ide/spyder/discussions)
+- 🐛 **Issues**: [Bug Reports](https://github.com/spyder-ide/spyder/issues)
+- 📧 **Mailing List**: [Google Groups](https://groups.google.com/group/spyderlib)
+- 🐦 **Twitter**: [@Spyder_IDE](https://twitter.com/Spyder_IDE)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+
+## Acknowledgments
+
+- Built with ❤️ by [@conradolandia](https://github.com/conradolandia) and the Spyder development team
+- Special thanks to all [contributors](https://github.com/spyder-ide/spyder-website/graphs/contributors)
+- Powered by [SvelteKit](https://kit.svelte.dev/) and [TailwindCSS](https://tailwindcss.com/)
+- Hosted on [GitHub Pages](https://pages.github.com/)
+
+---
+
+*Made with love for the Python community*