Skip to content

BioClub/labU

Repository files navigation

labU - A nice ProcessWire Setup for Labs & Hackerspaces

labU - BioClub Tokyo

Public Development Repository for the BioClub Tokyo Community Website. Theme for BioClub Tokyo.

The old BioClub Website is a bit chaotic, it does not really reflect all the projects, events, experiments and social activities that are happening at BioClub.

Unfortunately it's not possible for the BioClub community to change/update the old website and structure of the server, therefore we decided to make a new website - where we can implement the needs and requirements of the community.

The website and it's theme also need be free and open-source.

Discussion & Content

  • What do you want from the site?
  • What is still missing?
  • What is needed to run the BioClub?

Please write your ideas, suggestions and proposed content in the Shared Google Doc.

We also made a Shared Google Sheet to track the tasks and processes. Idealy we could move it to GitHub Issues/Projects, but let's work now with tools that everyone is familiar with.

Site Structure

Site structure ideas/suggestion should go into the \_structure folder.

Design

New Designs, Ideas & Suggestion should go into the \_design folder.

Figma

Here is also a shared Figma Project where we can jointly develop the Design for the Website.

XD

We also have a shared XD Document, please ask in the Discord #website channel for access.

HTML-izing

Turing the visual ideas into production-ready HTML is not the nicest work, but necessary.

Tachyons

If you are new to CSS, use Tachyons. Tachyons is realatively simple and verbose, no need to install a dev-environment, anyone with a web-browser and text editor can start using it. The CSS file is not optimzed.

TailwindCSS

TailwindCSS is another take on a utility-first CSS framework, the advantage of mix-ins and smaller file size, come with a slightly more complex dev-setup, that might deter first-time users, but comes with the benefit of smaller, tailor-made CSS files.

See the Tailwind Examples in the _html folder.

Why don't we just use code exported from Figma or XD? Because the generate code is very messy, slow and difficult to update. Exactly what we don't want.

Development

Wordpress used to be the universal tool of choice, but in recent releases Wordpress went more into an Website-Builder direction, rather than strengthening the CMS aspects of it. (Looking at you, Block Editor). It came to a point where it does not longer make sense to bend and modify Wordpress to function as a CMS/CMF.

Also, recently the move of both ACF and WPML from perpetual license to a wsubscription fee makes Wordpress even less attractive.

After evaluation other framesworks and alternatives like SSGs, we decided to build the new BioClub Community Website using ProcessWire. (But if there are other solutions, please share them in #website on the BioClub Discord).

Use Cases

1. Bi-Lingual Events

  • Create an Event Page with all the necessary event info.
  • Based on that data, create an Event Overview Page, showing all future events, ordered by date, includung resized image previews, title, and event abstract.
  • Once the event is finished - i.e. the event date is older than the current date, the event page moves to the Event Archive Page.
  • User can write Event Reports, which can be linked to the Event Page. Links to the Event Reports appear on the Event Page.

2. BioClub Projects

Requirements

What we need/want from a CMS/CMF:

  • Free and Open-Source Software
  • Needs to run on Apache on a Shared Server (LAMP)
  • User Management (Create new Users, change/update User Profile)
  • User Passwort Reset
  • Role-based Access Control (Admin, Editor, etc.)
  • Bi-lingual JP/EN
  • MarkDown
  • Custom Post/Page Types (ie. Events, Inventory, News, etc)
  • Support for Custom Fields Support
  • Server-side Image Resizing
  • HTTPS

Nice to have

  • Announce Mailing List Management (subscribe/unsubscribe)

ProcessWire Installation

TODO

  • Add SSL Certificate via Let's Encrypt, so we can have https://bioclub.toyko
  • Make Developement Site at https://bioclub.tokyo
  • Install ProcessWire at Developement Site
  • Create Template/Fields Export/Import System
  • Make Basic Pages
  • Make Site Bi-lingual, Japanese/English
  • Make Accounts for BioClub Community Members
  • Add Contact Form!

Please share your ideas, whishes and content at the Google Docs , and any more Development-related issues at GitHub Issues.

Notes