EasyFest

EasyFest provides a simple and straightforward event/festival webpage building toolkit.

How it's made

EasyFest consists of three parts:

• a back end Node.js server that acts as the content management system (CMS)
• a front end Node.js server that pre-builds the website to make it fast
• a design file made with Penpot whose design tokens can be synchronized using penpot-export

Both servers run at the same time.

Requirements & getting started

Clone this code repository to your computer using git:

git clone https://github.com/PIWEEK/easyfest.git

Next, you need to install the Node.js JavaScript runtime. Supported Node.js versions are documented in the package.json file of the back end and the front end.

The expected version to be used during development is in the .node-version files; it's also symlinked to .nvmrc files for compatibility purposes.

If you're using a Node.js version manager like nvm or n, you may install the expected version running nvm use or n auto in a terminal. Otherwise, check your node version manager software documentation to know how to install it.

Bootstraping the back end

First, install the dependencies running in a terminal:

cd backend/
npm ci

Second, specify the environment variables:

# copy `.env.example` to a file called `.env`.
cp .env.example .env

# use your preferred editor to populate it according to the steps defined within
$EDITOR .env

Then, build the Strapi back end with npm run build and run it with npm run start. This will be similar in deployments. More info about deployments.

Alternatively, if you want to develop further the CMS locally, run npm run develop instead. Note that doing so can cause changes in the code that could deviate your site code from what EasyFest provides. You're free to do it, although if anything breaks, you get to keep both pieces.

Starting the front end

First, install the dependencies:

cd frontend/
npm ci

Second, specify the environment variables:

# copy `.env.example` to a file called `.env`.
cp .env.example .env

# use your preferred editor to populate it according to the steps defined within
# (you may leave the ones starting with `PENPOT_*` as they are for now)
$EDITOR .env

Then, the front end can be started successfully.

Run it with npm run dev, if in local development, or npm run build and node build/index.js in deployments. More info about deployments.

Using EasyFest

Filling in the content

EasyFest provides sane defaults for quickly getting the site up and running.

You can go through the CMS and edit whatever you want, but it will probably come in handy to know the most relevant parts.

In the site single type, you'll be able to edit the status of your event, and whether registrations are open.

In the settings single type, you can provide some global properties for the site, like the title, the logo of your event (logo_horiz), or your social_media_links. Switches starting with show_* will control the visibility of such pages; e.g. disable the Streaming page with the show_streaming switch if your event is face-to-face.

Use the homepage single type to customize the homepage contents. You'll find some default texts to help you along. For activities_section and speakers_section, you'll need to fill some contents in the activity collection type and the public-profile collection type.

Just make sure you click the Save and Publish buttons at the top right and refresh your browser to see the changes!

Customizing EasyFest styles

Currently, EasyFest allows you to comfortably theme colors and typographies of your site using Penpot. To do so:

1. First, download the design template .penpot file from here.
2. Then, open up your Penpot instance in a browser and import the file to your workspace.
3. Follow the guide within by navigating to the "👋 How it works" page.

When you're done, copy the URL reflected in your browser. We will use it to tell the code where to take the new tokens from. Run in a terminal:

npx penpot-export inspect <PASTE YOUR FILE URL HERE>

It'll output something similar to this:

The following details are the result of inspecting the provided URL:
    Penpot instance: https://design.penpot.app/
    Workspace id: f542b13d-6fc1-8116-8002-fc0aaa3627ae
    File id: 52961d58-0a92-80c2-8003-2fc8ab8b34dd
    Page id: 38f1e350-296d-80f1-8002-fd390f93b03d

Copy the indicated file id, and replace the one at your environment variables with it (if you're curious, that value will end up being read by the penpot-export config).

Finally, run npm run sync-penpot: the EasyFest design tokens files for the front end will be updated.

If you were running the front end locally, you'll see the new styles right away in your browser. Ta-da!

License

EasyFest is provided under the Apache 2.0 license, which is an open source license approved by the Open Source Initiative.