# **Your Daydream Website ☀️**

Your daydream needs its own website. This might be one of the only technical aspects you'll need when organizing your hackathon – and day-of mentoring. 

Now… on to how to make your site\!

First, fork the repository:

1. Go to [https://github.com/hackclub/daydream](https://github.com/hackclub/daydream)  
2. Click “Fork” in the top right  
3. Create the fork in your account

Then, clone your fork. In a terminal, run:  

```bash
git clone https://github.com/YOUR_USERNAME/daydream.git
cd daydream
```

Once you have a local copy of the site, you need to duplicate the example site. In the `src/routes` folder, copy the folder called `example`, and rename the copy to whatever you want your URL to be. 

For example, if you want your site to be at [daydream.hackclub.com/vermont](http://daydream.hackclub.com/vermont), name the folder `vermont`.

Next, you need to configure your event. Open `src/routes/yourcity/+page.svelte` in a text editor, and look at the top. Change all the fields to the information for your event\!

```js
// Configuration - Put your information here!
const eventName = "Example";
const eventLocation = "Example City";
const eventAddress = "1600 Pennsylvania Avenue, Washington, DC 20500";
// These two are optional
const directionsURL = "https://www.google.com/maps/search/1600+pennsylvania+avenue+washington+dc/"
const contactLink = "mailto:example@daydream.hackclub.com"

// Sponsors Configuration
const sponsorsEnabled = true; // Set to false to hide the entire sponsors section
const sponsors = [
    { image: "/example/logo1.png", name: "Sponsor 1", url: "https://example1.com" },
    { image: "/example/logo2.png", name: "Sponsor 2", url: "https://example2.com" },
    { image: "/example/logo3.png", name: "Sponsor 3", url: "https://example3.com" },
    { image: "/example/logo4.png", name: "Sponsor 4", url: "https://example4.com" },
    { image: "/example/logo5.png", name: "Sponsor 5", url: "https://example5.com" },
    { image: "/example/logo6.png", name: "Sponsor 6", url: "https://example6.com" },
    { image: "/example/logo7.png", name: "Sponsor 7", url: "https://example7.com" }
];

// Schedule Configuration - You don't need to use this schedule, this is just an example!
const scheduleData = {
    saturday: {
        title: "Saturday, September 27th",
        items: [
            { event: "Doors open", time: "11:00 AM" },
            { event: "Opening ceremony", time: "12:00 PM" },
            { event: "Lunch", time: "12:30 PM" },
            { event: "Start working on your project!", time: "1:00 PM" },
            { event: "Workshop 1", time: "2:00 PM" },
            { event: "Activity 1", time: "4:00 PM" },
            { event: "Workshop 2", time: "4:00 PM" },
            { event: "Dinner", time: "6:00 PM" },
            { event: "Lightning talks", time: "8:00 PM" },
            { event: "Midnight surprise", time: "12:00 AM" }
        ]
    },
    sunday: {
        title: "Sunday, September 28th",
        items: [
            { event: "Breakfast", time: "8:00 AM" },
            { event: "Demos!", time: "10:30 AM" },
            { event: "Closing ceremony", time: "12:00 PM" }
        ]
    }
};
```

Lastly, submit your site\! Use Git to push your changes:

```bash
git add .  
git commit \-m "Add \[Your City\] event page"  
git push
```

Then, go back to your repository, click "Contribute" → "Open pull request," and follow the instructions\!

> Are you adding custom images, like sponsor logos? Make a new folder in the `static` folder with your city name, then place them in there\! After that you can access the images at `/cityname/imagename.png`.

#### Wanna make your own site?

If you want to make your own site, it needs to be another page on [daydream.hackclub.com](http://daydream.hackclub.com). The site is written in SvelteKit, but you can do anything else within those bounds\!

> *Note: If you choose to make your own site, it needs to be mobile responsive and high quality (vibecoded AI slop is not allowed).*