The source code of Commit Conf 2023. This project contains the source code of a website based on eleventy and sass.

Getting Started

# Install node dependencies, including eleventy
npm i

# Run the local server
npm run watch

# connect to local server
sensible-browser http://localhost:8081

Start local server

npm run watch

Deploy

npm run build

bin/deploy

Folder structure

This project has the following basic structure

.
+-- bin
|   +-- compile-css // script to compile the content of [/src/_sass](/src/_sass) to '/build/css'
|   +-- create-webp // transform a PNG or JPG image to a WebP image
|   +-- i18n-check // test we have the same translations entries for each language
|   +-- optimize-images // optimize communities and sponsor logos
+-- src
|   +-- _data
|   |   +-- css.json // generated by compile-css, it give the path to the css file with its hash on the filename
|   |   +-- js.json // generated by webpack, it give the path to the js file with its hash on the filename
|   |   +-- site.js // Have all the global info of the event, like URLs, communities, sponsors, etc.
|   +-- _includes
|   |   +-- layouts // the templates of the website. At the moment, we only have one layout, but we can add more
|   |   +-- macros // components agnostic of the page content so we can reuse them
|   |   +-- partials // the different parts which compose pages. They are locale agnostic.
|   +-- _js // the Typescript files to use in this project
|   |   +-- main.js // the main file of the project. It is the entry point of the project and where we require all the other files we need in the website.
|   +-- _sass // the sass files to use in this project
|   +-- en // the english version of the website
|   |   +-- en.json // the json file for the english i18n of the website
|   +-- es // the spanish version of the website
|   |   +-- es.json // the json file for the spanish i18n of the website
+-- static // Where we locate the files eleventy only need to copy. Mostly images.
+-- _site  // Where eleventy will generate the website
+-- build  // Where CSS and JS files are precompiled
+-- README.md // this file
+-- .eleventy.js // Where eleventy is configured
+-- package.json // Where we define the basic scripts to run

Adding a section to a page

You need to:

1. Create a new file in the /src/_includes/partials folder with the content you want.
2. Add the i18n entries used in the file to i18n files (/src/en/en.json and /src/es/es.json).
3. Include the section the page file {% include "partials/my-new-section.njk" %}
4. TEST IT! Run npm run watch and check that the section is added to the page.

Adding a page

You need to:

1. Create a new file for each language supported. For example, you need to create a file in '/src/en/my-awesome-page.njk' and another one at '/src/es/my-awesome-page.njk'.
2. The content of each file is almost the same, the only difference is the title of the page. For example:

Then English file will be

---
Title: My awesome page
---
{% extends "layouts/base.njk" %}
{% block content %}
  ...
{% endblock %}

The Spanish file will be

---
Title: Mi increíble página
---
{% extends "layouts/base.njk" %}
{% block content %}
  ...
{% endblock %}

3. Add a link or a way to link to the new page on topbar | footer | other page.
4. TEST IT! Run npm run watch and check that the page can be reached on all the i18n languages.

Adding a sponsor

To add a sponsor, you need to:

1. Add the logo to /static/img/sponsors. Considerations for the logo image are:
   1. Filename: use the slugged name of the sponsor. For example: 'Foo Bar Báz' should have a name like 'foo-bar-baz.svg'.
   2. Format: You can use a SVG, PNG or JPG, but it's better to use SVG if possible. Using GitHub Actions, we automatically create an optimized version of the logo in the optimized subfolder using the optimize-images script. If the logo is a SVG, we only optimize it. If it is on another format, we create a JPG and a WEBP versions of the logo.
2. Add the sponsor info to /src/_data/sponsors.js. The structure of the file is:

[
  {
    name: "Awesome Sponsors", // sponsor category name
    items: [
      {
        name: "Foo Bar Báz", // sponsor name
        href: "https://foo.bar", // sponsor link
        svg: true, // only if the format of the logo is a SVG, otherwise you can omit this property
      },
      ... // other sponsors of this category
    ]
  },
  ... // other categories
]

Adding a community

To add a community, you need to:

1. Add the logo to /static/img/communities. Considerations for the logo image are:
   1. Filename: use the slugged name of the community. For example: 'Foo Bar Báz' should have a name like 'foo-bar-baz.svg'.
   2. Format: You can use a SVG, PNG or JPG, but it's better to use SVG if possible. Using GitHub Actions, we automatically create an optimized version of the logo in the optimized subfolder using the optimize-images script. If the logo is a SVG, we only optimize it. If it is on another format, we create a JPG and a WEBP versions of the logo.
2. Add the sponsor info to /src/_data/communities.js. The structure of the file is:

[
  {
    name: "Foo Bar Báz", // community name
    href: "https://foo.bar", // community link
    svg: true, // only if the format of the logo is a SVG, otherwise you can omit this property
  },
  ... // other communities
]

CICD

CICD depends on Github Actions. It depends on a Github repository secret with the name GH_PAGES_TOKEN. We have two workflows:

1. Build: It runs on every push to the master branch. It will build the website and deploy it to the gh-pages branch.
2. Optimize images: It runs on every push to the master branch. It will optimize the images in the static/img folder and commit the changes to the master branch.