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
2. Click “Fork” in the top right
3. Create the fork in your account

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

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, 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!

// Configuration - Put your information here!
const eventName = "Example"; // This should be the name of your event WITHOUT "Daydream" at the start
const eventLocation = "Example City";
const eventAddress = "1600 Pennsylvania Avenue, Washington, DC 20500"; // Leave this empty if you don't want an address
const signupLink = "https://forms.hackclub.com/daydream-sign-up"; // Get your custom sign up link from this page: https://airtable.com/apppg7RHZv6feM66l/shr4kFqURo8fMIRie
// These two are optional-- leave them empty if you don't have anything!
const directionsURL = "https://www.google.com/maps/search/1600+pennsylvania+avenue+washington+dc/"
const contactLink = "mailto:example@daydream.hackclub.com"

// Sponsors Configuration - disable this if you don't have any sponsors to display!
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 exact schedule, this is just an example!
const scheduleData: { title: string; items: { event: string; time: string; }[] }[] = [
    {
        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" }
        ]
    },
    {
        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:

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. 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).