clicepfl / clic-website Goto Github PK

• Add a description of all activities (content for the descriptions can be found here : https://docs.google.com/document/d/1WIedFO6q1tE5W01KCHk-GQNczBrcEZilWvJifDsBHRE/edit#heading=h.gll79seyf78j)
• Display the timetable of the event (can be found here : https://docs.google.com/spreadsheets/d/1Me1pKsRY6rTz8DUV_RL0z6wrwJvNF1RJveTvlAlTFvM/edit#gid=0)
• Add event registration link (https://form.jotformeu.com/90643784572365)

Create copy of repo that is open source, use production scripts to update it on each deployment

Development should be frozen until this issue is solved

Refactor the project source code structure, follow best practices (ex : https://github.com/focusaurus/express_code_structure)

Use grunt instead of current make.js

The current frontpage displays the list of committee members. Currently, when clicking, it redirects to the people.epfl page. It would be worthwile to replace it with the pôle email ([email protected], [email protected],...). Visitors are more interested in contacting the pôle rather than the actual person.

This is open to discussion. Any opinion on that?

ICBD page still contains info for the 2019 edition. We should update it to reflect the information and schedule of the upcoming edition.

Sponsorship contract valid until May 14th 2020.

The new articles of association have now come into effect, therefore we can revert the change in #30

Add redirection from address /events/icbd to the ICBD page. Needed because the fliers had a typo and are already printed.

Motivation

From the start I wanted to create a content management system (CMS) that only used files (no database). The goal was to have a standalone, file-based, version control friendly software that could be automagically deployed without additional configuration or system stack.

However, the software in its current form still requires manual editing of files (which in itself is not a problem). But I believe the software can abstract the content system further, and this abstraction could be controlled through a GUI software, which would help non-developer content editors manage the system.

Thus, I would want to ideally produce a standalone flat-file CMS that bundles this abstraction, the GUI software that controls it (for instance using electron), which generates files in the system itself, which can be tracked and version controlled (also through the GUI), and also deployment tools. The GUI (based on web technologies), could also be used to preview the website in itself. Still, no database would be required.

Examples

I stumbled upon https://getkirby.com/ which my gf used for a project, however it is a proprietary, paid license system. I realized that what I actually wrote for the CLIC website was very similar (although far less generic) than this file-based CMS. Thus, I believe I can write an equivalent system, that could be free and open-source, and there's probably a lot more potential in this.

Proposed implementation

There are 3 parts to the system: the web server (which is also used in production), the GUI that controls the files, and the machinery that glues everything together, which implements the content-file abstraction and tools for development and deployment.

• Web server: ideally, it could be language agnostic (or at least, we could easily produce different versions of the core server): this would allow deployment on many different platforms (the backend could be either of NodeJS, PHP, ...)

• GUI: an electron app (ideally, it bundles itself and all the other parts of the software including the runtime, so that content editors can simply download a binary or something). This would be an admin panel where all the content is managed, and versions could also be pushed through a GUI to Github for instance (either directly to master or through pull requests). The GUI should also be able to display the actual web server, allowing quick preview in the software itself.

• Glue: written as logic behind the electron app, it will only run client-side anyway.

This year's articles of association have not yet come into effect, so we need to temporarily link to the previous ones instead (2011).

Have different sponsor tiers, displayed differently on the homepage

——————————— Platinum ———————————
Logo Google        Logo Swissquote        Logo Ubisoft
———————————— Gold ———————————--
Logo Together        Logo One Plus        Logo Audio technica
———————————— Silver ———————————--
                        Logo Huawei
———————————— Bronze ———————————--
                              Logo Salt

however this should not interfere with the existing carousel display of the sponsors (such as https://clic.epfl.ch/about)

Proposed implementation

Sponsors component (https://github.com/clicepfl/clic-website/blob/master/src/components/sponsors/sponsors-list.json) has JSON definition modified as follows: it is an object, which keys are tiers containing arrays of sponsors

{
  "platinum": [
    {
      "name": "Foo Sponsor",
      ...
    },
    ...
   ],
  "gold": [
    ... 
  ],
  ...
}

Back-end implementations of https://github.com/clicepfl/clic-website/blob/master/src/components/sponsors/sponsors.ts are modified accordingly

View display implementation at https://github.com/clicepfl/clic-website/blob/master/src/components/sponsors/sponsors-view.njk are separated into 2 displays: one that separates each tier visually (with a stylized header such as https://codepen.io/mandymichael/pen/xpLNeV) and one that simply fetches all images (as currently on about/)

Modify docs accordingly

https://github.com/clicepfl/clic-website-production

• Write documentation for the website and server in Markdown in the docs/ folder to live alongside code.
• Pick a docs HTML generator (that preferably runs with node), examples :
  • https://docusaurus.io/docs/en/installation
  • https://gitdocs.netlify.com/
  • https://electricjs.com/docs/

• Pick a templating engine (Mustache, twigjs, pug, ...)
• Write template renderer component
• Rewrite static pages with rendering controllers (caching ?)
• Write templating docs in src/components/

• Write complete set of docs, scripts and protocols to redeploy the complete server in case any part of the system breaks down (web infrastructure could be reinstalled from scratch to running as auto as possible, write steps by steps for manual parts) in production repo

Nested hierarchies are confusing and poorly documented. All sub-routers should be mounted at root and redefine URLs from root path /

Footer font is not super readable, especially on mobile because its font-weight is very thin. Find compromise between style and accessibility.

With the official arrival of commissions, CLIC must support and promote them.
There should be a "generic" way to display them. Either a single page commissions with a short description and maybe link to their respective website, or a page per commission, grouped under a single endpoint (e.g. /commission/ogj, /commission/ictravel,...).
Left to discuss with the IT team to figure out what is simpler, and what commissions wish to have.

Page for renting stuff from CLIC

Add and configure security libraries that add defenses out of the box ;

• HTTP headers : https://helmetjs.github.io/
• XSS sanitizer ; https://github.com/cure53/DOMPurify
• Rate limiting: https://github.com/animir/node-rate-limiter-flexible

More Express security best practices: https://expressjs.com/en/advanced/best-practice-security.html

Page with events listing

Some speaker changed their venue, and we slightly updated rooms. Needs correction.

This page could then be displayed by the proxy if/when the website server is unavailable.

This is fairly important, as the normal "bad gateway" message from the proxy is fairly ugly.

While this may seem somewhat pointless since both the proxy and the website are running on the same computer, this is for future-proofing if one day the proxy is separate (which is my end-goal)

• Write new component for gallery
• Templates to render it
• Router rules
• Write doc for edits

We need to display

• Email (somehow hidden from robots)
• Physical address

Possible locations:

• About page
• Home page
• Dedicated contact page
• Footer of every page

Makefile should not be part of the software implementation git repo. It is purely a production script that is even dangerous for development work. Should be moved into a submodule (such as production) along with other production tools.

https://github.com/clicepfl/icburger

Create a favicon for the website, upload it and link the necessary views

Sticky : don't close this issue, it will probably always be valid.

1. Run npm update to upgrade all dependencies
2. Check that all the software still runs correctly

Reason : packages get out-of-date and vulnerabilities are discovered. This ensures that all packages are up-to-date (but we should always check that it does not break the current software).

At the moment, content on Nextcloud (in particular images and videos) are totally hidden from the website. In particular, if we wish to display content on the website it must be either copied (and tracked) using github, or forcefully copied and untracked (because too heavy c.f. Stallman video).

It would be better to allow the website/CMS to read from the Nextcloud, one way or another. This will allow to track media content with nextcloud and not github anymore, and have more dynamic content (e.g. have a dynamic gallery, and not some hardcoded images).

Important to remember that there are different unix users for nextcloud and web (good security practice, but make it harder)

Some possible ways:

• Symlink of nextcloud in website, with some common unix group
• Use webdav and internal routes redirection to a specific nextcloud folder
• ??

Referring to #25, some documents with restricted access should also be made available on the site.

Access control should be implemented with Tequila authentication.

Close to the list of sponsors, there should be a message for companies that wish to support us. For example, right below the list of sponsors, a simple text such as
"Vous souhaitez nous soutenir ? Contactez nous à sponsoring.clic [at] epfl.ch"
Not the correctly formatted address (with @), to avoid robot spammers.

Update news RMS with conference video

• Put WebM video from nextcloud found here into assets/untracked (this folder is not tracked by git!)
• Update news markdown to include video
• Update SASS to make it pretty

Server scripts and configurations (will) live at repo https://github.com/clicepfl/clic-server-config

Can use https://mmenujs.com/

Fairtiq is one of our new sponsors. Waiting for Camille's reply about the size of the logo.

Add a page containing the full description of the association and links to official documents related to the association.

Official documents include for example the CLIC's articles of association (in French: statuts juridiques).

Some documents should be publicly available, others should have restricted access (#26).

Use CSS translate3d property for smoother animation in infinite background translation : see https://codepen.io/Scarbrough9/pen/XbZQZr

• Write sass-doc compliant code (http://sassdoc.com/) in the src/sass/style.sass file.
• Use sassdoc and generate static website documentation
• Refactor sass style and use sass' features better (inheritance, mixins, ...)

• Buggy display (flexbox forces a single row) when there are >3 news. Fix by implementing a div reset every 3 news.
• Implement more SASS styles at .news-article to cover the whole Markdown spec

Swissquote logo is too dark for the front page, but cannot be set too light either to be displayed properly on /about

• Decide format : YAML or XML ? Body uses Markdown. Also decide content structure.
• File hierarchy, assets location
• Write module that parses the news files
• Integrate with templating #4 and internationalization #5
• Write documentation to ease news edit

• Create new template for 404 page
• Render it through general router, last rule

Add news "nouveau site"

• Write an internationalization component (do we use an existing engine ? Should also consider different rendering techniques such as Markdown sources, maybe delegate to controllers or renderer)
• Define routing rules to capture languages
• Write translations for existing pages

• Implement a sponsor provider that reads from a json file
• Define the json schema for sponsors

Sponsor component implemented in #20. Things still left to do :

• Find end date for all sponsors and write them in src/components/sponsors/sponsors-list.json with format expiration: {day: 42, month: 42, year: 4242}
• Write doc to ease modification of sponsors list with JSON schema

This person cancelled her participation, so Olivier asked her name to be removed

The list of committee members is outdated. We must update the list of people, roles, as well as use up-to-date pics.

Expose logo asset to the outside world, used for e.g. email signatures and other official references

• News component for editors see #11
• Sponsors component for editors see #37
• Gallery component for editors see #46
• Templating in src/components see #4
• General markdown docs (file structure, compile / run instructions, ...) see #2
• SASS documentation (sassdocs?) see #3