Quick Start for Editors

Welcome! This guide is designed for content editors and non-technical team members who need to update website content. No programming experience required!

What You Can Do as an Editor

As a content editor, you can update:

• Committee member information (names, roles, emails, photos) Most common task
• FAQ questions and answers
• Event information (dates, schedules, descriptions)
• Page text content (headings, paragraphs, descriptions)
• Blog post tags (for filtering by country)

Note: You’ll be editing files on GitHub, which is like editing documents in Google Drive - but for code!

Getting Started

1. Access the Repository

   The FiNAN website files are stored on GitHub:

   • Go to github.com/poncardasm/finan-website
   • You’ll need a GitHub account - create one for free if you don’t have one
   • Ask the project administrator to add you as a collaborator

2. Understanding GitHub

   Think of GitHub as:

   • Repository (Repo): A folder containing all website files
   • Branches: Different versions of the files (usually you’ll work on main)
   • Commits: Saved changes with a description of what you changed
   • Pull Requests: Proposed changes that need review before going live

3. Choose Your Editing Method

   You can edit files in two ways:

   Option A: GitHub Web Interface (Recommended for Editors)

   Edit files directly in your browser - no installation needed!

   • Navigate to the file you want to edit
   • Click the pencil icon (Edit this file)
   • Make your changes
   • Scroll down and add a description of your changes
   • Click “Commit changes”

   Option B: GitHub Desktop (For Frequent Editors)

   Download files to your computer for easier editing:

   • Download GitHub Desktop
   • Clone the repository
   • Edit files in a text editor
   • Commit and push your changes

   For most editors, Option A (web interface) is sufficient!

Common Editing Tasks

Task 1: Adding or Updating Committee Members

This is the most common task for editors. Here’s the step-by-step process:

Prepare the Member Photo

Photo Requirements:

• Format: JPG or PNG (JPG preferred)
• Size: At least 400x400 pixels (square works best)
• Quality: Clear, professional headshot
• File size: Under 500KB for fast loading

File Naming Convention (IMPORTANT):

• Use lowercase letters only
• Separate words with hyphens (-)
• No spaces or special characters
• Example: john-doe.jpg ✅
• Not: John Doe.jpg ❌ or john_doe.jpg ❌

Complete Process

1. Upload the Photo

   Navigate to the appropriate country folder:

   • For Finland: src/assets/images/committee/finland/
   • For Sweden: src/assets/images/committee/sweden/
   • For Norway: src/assets/images/committee/norway/
   • (Other countries will have similar paths)

   Then:

   • Click “Add file” → “Upload files”
   • Drag and drop your photo or click to browse
   • Add a commit message like: “Add committee photo for John Doe”
   • Click “Commit changes”

2. Navigate to the Committee Data File

   Go to the country’s committee file:

   • For Finland: src/data/representation/committee/finlandCommittee.ts
   • For Sweden: src/data/representation/committee/swedenCommittee.ts
   • For Norway: src/data/representation/committee/norwayCommittee.ts

   Click the pencil icon to edit

3. Add the Image Import

   At the top of the file (after existing imports), add:

   // Import committee member images
   import johnDoeImage from '@/assets/images/committee/finland/john-doe.jpg';

   Important naming:

   • Image filename: john-doe.jpg (kebab-case with hyphens)
   • Variable name: johnDoeImage (camelCase, no hyphens)

4. Add the Member to the Committee Array

   export const finlandCommittee = [
     {
       name: 'John Doe',
       role: 'Country Representative',
       email: 'john.doe@example.com',
       phone: '+358 12 345 6789', // Optional
       image: johnDoeImage, // Must match the import variable name
     },
     // ... other members
   ] as const satisfies readonly CommitteeMember[];

5. Commit Your Changes

   • Add a commit message: “Add John Doe to Finland committee”
   • Click “Commit changes”

Common Mistakes to Avoid

❌ DON’T: Use spaces in filenames → john doe.jpg
✅ DO: Use hyphens → john-doe.jpg

❌ DON’T: Mismatch variable names → Import johnDoe but use johnDoeImage
✅ DO: Keep names consistent → Import and use johnDoeImage

❌ DON’T: Forget to import the image at the top
✅ DO: Always add the import statement before using it

❌ DON’T: Remove commas or brackets
✅ DO: Keep the structure intact and add commas between entries

Need Help? See the Committee Management Guide for detailed instructions with screenshots.

Task 2: Updating FAQ Content

To add or edit FAQ questions:

1. Navigate to src/data/pages/faq/faqData.ts

2. Click the pencil icon to edit

3. Find the appropriate category (general, membership, licensing, support)

4. Add your new FAQ entry:

   {
     question: 'What are the membership benefits?',
     answer: 'FiNAN members receive access to professional development resources, networking opportunities, and advocacy support.',
   },

5. Add a commit message: “Add FAQ about membership benefits”

6. Click “Commit changes”

See more: FAQ Management Guide

Task 3: Updating Event Information

To update event details:

1. Navigate to the event data file (e.g., src/data/events/triennialGathering2026Schedule.ts)

2. Click the pencil icon to edit

3. Update event details like:

   • Event date
   • Schedule times
   • Session descriptions
   • Speaker information

4. Add a descriptive commit message

5. Click “Commit changes”

See more: Event Management Guide

Task 4: Editing Page Text

To change text on any page:

1. Navigate to src/pages/ and find the page (e.g., about.astro)

2. Click the pencil icon to edit

3. Find the text you want to change (it’s usually in quotes or between HTML tags)

4. Make your changes carefully without removing quotes or tags

5. Add a commit message describing what you changed

6. Click “Commit changes”

Important File Locations for Editors

Here are the files you’ll most commonly work with:

Committee Information

src/data/representation/committee/
├── finlandCommittee.ts       # Finland committee members
├── swedenCommittee.ts        # Sweden committee members
├── norwayCommittee.ts        # Norway committee members
├── denmarkCommittee.ts       # Denmark committee members
├── icelandCommittee.ts       # Iceland committee members
├── faroeIslandsCommittee.ts  # Faroe Islands committee members
└── greenlandCommittee.ts     # Greenland committee members

Committee Photos

src/assets/images/committee/
├── finland/     # Finland committee photos
├── sweden/      # Sweden committee photos
├── norway/      # Norway committee photos
├── denmark/     # Denmark committee photos
├── iceland/     # Iceland committee photos
└── ...

FAQ Content

src/data/pages/faq/
└── faqData.ts   # All FAQ questions and answers

Event Information

src/data/events/
└── triennialGathering2026Schedule.ts   # Event schedule

Page Content

src/pages/
├── index.astro              # Home page
├── about.astro              # About page
├── membership.astro         # Membership page
├── faq.astro                # FAQ page
├── contact.astro            # Contact page
└── representation/          # Country pages
    ├── finland.astro
    ├── sweden.astro
    └── ...

Understanding the File Structure

When you edit a file, you’ll see some special syntax. Here’s what it means:

TypeScript Data Files (.ts)

// Import statement - brings in images or code
import johnDoeImage from '@/assets/images/committee/finland/john-doe.jpg';

// Export statement - makes data available to the website
export const finlandCommittee = [
  {
    // Object with member information
    name: 'John Doe', // Text in quotes
    role: 'Representative',
    email: 'john@example.com',
    image: johnDoeImage, // No quotes - it's a variable
  },
  // Comma separates members
] as const satisfies readonly CommitteeMember[];

Key points:

• Text values need quotes: 'John Doe'
• Variable names (like images) don’t need quotes: johnDoeImage
• Commas separate items
• Don’t delete the weird syntax at the end (as const satisfies...)

Astro Page Files (.astro)

---
// This section at the top is TypeScript
import Component from '../components/Component.astro';
const data = 'some data';
---

<!-- This section is HTML -->
<h1>Welcome to FiNAN</h1>
<p>This is a paragraph.</p>

Key points:

• Content between --- markers is code
• Content after is HTML (the actual page content)
• Edit the HTML section for text changes

Workflow Best Practices

1. Make Small, Focused Changes

• Edit one thing at a time (e.g., one committee member, one FAQ)
• Don’t make multiple unrelated changes in one commit
• This makes it easier to track and undo if needed

2. Write Clear Commit Messages

Good commit messages:

• ✅ “Add Maria Santos to Sweden committee”
• ✅ “Update FAQ question about membership fees”
• ✅ “Fix typo in About page heading”

Bad commit messages:

• ❌ “Update”
• ❌ “Changes”
• ❌ “Fix stuff”

3. Preview Before Committing

• Read your changes carefully before saving
• Check for typos and formatting
• Make sure you didn’t accidentally delete important syntax

4. Ask for Help When Needed

If you’re unsure:

• Ask a developer to review your changes
• Test on a preview environment if available
• Reference this documentation
• Don’t be afraid to ask questions!

What NOT to Edit

To avoid breaking the website, do not edit:

• File extensions (.ts, .astro, etc.)
• Import statements (unless adding new ones as shown above)
• Anything with export, const, satisfies, as const
• Code inside <script> or <style> tags
• Configuration files (astro.config.mjs, package.json, etc.)

When in doubt, ask a developer!

Getting Help

When You Need Assistance

1. Check the documentation:

   • Committee Management Guide - Detailed committee editing guide
   • FAQ Management - FAQ editing guide
   • Common Issues - Troubleshooting

2. Look at examples:

   • See src/data/representation/committee/finlandCommittee.ts for the best reference

3. Ask the team:

   • Contact the development team via GitHub issues
   • Tag someone in a comment on your commit

Common Error Messages

If you see an error after committing:

• “Build failed” - You might have a syntax error (missing comma, quote, etc.)
• “Image not found” - Check the file path and filename
• “Type error” - The data structure doesn’t match expectations

Don’t panic! You can always undo changes. Ask for help if you see errors.

Next Steps

Now that you know the basics:

1. Try making a small change - Start with something simple like updating a FAQ
2. Read detailed guides - See Committee Management for in-depth instructions
3. Explore the repository - Browse through files to understand the structure
4. Bookmark this page - Come back whenever you need a refresher

Remember: You can’t break anything permanently! All changes are tracked and can be undone. Don’t be afraid to experiment and learn.

Happy editing!