HackspaceOS

Create an amazing new website for your local hackspace within minutes!

Want to support the development and stay updated?

<a href="https://www.patreon.com/bePatron?u=24983231"><img alt="Become a Patreon" src="_readme_images/patreon_button.svg"></a> <a href="https://liberapay.com/glowingkitty/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a>

=> 🌍 Example websites

=> 🌟 Features

=> 🛠 How to setup

=> 🧹 How to customize

=> 💻 How to contribute

<br/><br/> <img src="./_readme_images/screenshot_1.png">

<br/><br/> <img alt="🌍 Example websites" src="./_readme_images/heading_examples.png" id="examples" >

Take a look at the hackspaces which already use this template!:)

• TAMI, Tel Aviv (Israel): https://telavivmakers.org/
• Noisebridge, San Francisco (USA): about to launch, needs to be deployed
• and maybe your hackspace soon as well?:)

<br/><br/> <img alt="🌟 Features" src="./_readme_images/heading_features.png" id="features" >

This website template has a lot of super useful features for your hackspace! Don’t need all of them? Don’t worry, you can easily deactivate or customize them as well!

=> 💡LED Dark Mode!

=> 🛬Landingpage with all the essentials

=> ℹ️About section, tell your hackspace’s story

=> 🔍Search everything, everywhere

=> 🗓Create & see all your events

=> 🖼All photos in one place

=> 🛠Show your projects

=> 🏠List your spaces & machines

=> 📝Create, archive and see all your meeting notes

=> 👥Consensus Items

=> 💲Tell people how to donate

=> 🌍Multi-language support

Want more? Learn how to contribute!

<br/><br/> <img alt="💡LED Dark Mode!" src="./_readme_images/heading_led_darkmode.png" id="dark-mode" >

The most important key feature first - THIS WEBSITE HAS LEDs!!! *

I mean… do you really need anything else to convince your hackspace community?

*if the website visitor has Dark Mode activated on their device / operating system <br/><br/> <img src="./_readme_images/screenshot_led_dark_mode.png" >

<br/><br/> <img alt="🛬Landingpage with all the essentials" src="./_readme_images/heading_landingpage.png" id="landingpage" >

• "Currently open" indicator (automatically updated every minute)
• hackspace short description
• upcoming events (automatically updated every minute)
• overview of what areas your hackspace covers & quick links to search
• address, map & opening hours

<br/><br/> <img src="./_readme_images/screenshot_landingpage.png" >

<br/><br/> <img alt="ℹ️About section, tell your hackspace’s story" src="./_readme_images/heading_about.png" id="about" >

• the one rule - be excellent to each other
• how to participate
• your hackspace history

<img src="./_readme_images/screenshot_about.png" >

<br/><br/> <img alt="🔍Search everything, everywhere" src="./_readme_images/heading_search.png" id="search" >

• Discourse
• Wiki
• events
• projects
• meeting notes
• machines
• spaces
• social media channels

<img src="./_readme_images/screenshot_search.png" >

<br/><br/> <img alt="🗓Create & see all your events" src="./_readme_images/heading_events.png" id="events" >

• auto import existing events from Meetup and your Wiki, via Cronjob
• allow community members to create new events directly via the website (which then get automatically posted to your Meetup group and Discourse as well)

<img src="./_readme_images/screenshot_events.png" >

<br/><br/> <img alt="🖼All photos in one place" src="./_readme_images/heading_photos.png" id="photos" >

• from Twitter, Instagram, your Wiki & Flickr
• including preview of the connected social media posts
• sort by "Latest", "Oldest" or "Random" - to explore more of your hackspace's history!
• always see the latest photos on the landingpage (automatically updated every minute)

<img src="./_readme_images/screenshot_photos.png" >

<br/><br/> <img alt="🛠Show your projects" src="./_readme_images/heading_projects.png" id="projects" >

• auto import projects from your Discourse group
• link to the project section of your Discourse group to allow people to create new projects

<img src="./_readme_images/screenshot_projects.png" >

<br/><br/> <img alt="🏠List your spaces & machines" src="./_readme_images/heading_spaces.png" id="spaces" >

• list all your spaces & most important machines

<img src="./_readme_images/screenshot_spaces_machines.png" >

<br/><br/> <img alt="📝Create, archive and see all your meeting notes" src="./_readme_images/heading_meeting_notes.png" id="meeting-notes" >

• easy import of existing meeting notes from your Wiki
• automatically start a new meeting on Riseup Pad based on your meeting notes template
• presenter/note taker mode - to allow everyone to see what the current topic is (and how long the meeting is already going on)
• use #hashtags to tag keywords - which get extracted automatically when you finish a meeting

<img src="./_readme_images/screenshot_meeting_notes.png" >

<br/><br/> <img alt="👥Consensus Items" src="./_readme_images/heading_consensus.png" id="consensus" >

• auto import consensus items from your Discourse group
• link to the consensus items section of your Discourse group to allow people to create new projects

<img src="./_readme_images/screenshot_consensus.png" >

<br/><br/> <img alt="💲Tell people how to donate" src="./_readme_images/heading_donate.png" id="donate" >

• donation infos accessible from every page
• links to donate money, hardware or organize or volunteer an event

<img src="./_readme_images/screenshot_donate.png" >

<br/><br/> <img alt="🌍Multi-language support" src="./_readme_images/heading_multi_language.png" id="languages" >

• easily switch between languages
• more languages can be easily added via the translation files

<img src="./_readme_images/screenshot_multi_language.png" >

<br/><br/> <img alt="🛠 How to setup" src="./_readme_images/heading_setup.png" id="setup" >

Step 1: Clone this repo

git clone git@github.com:glowingkitty/HackspaceOS.git

Step 2: To add your own logo: Add the following files to _website/static/images/:

logo.svg
header_logo.jpg

Step 3: Create your own favicons and add the following files to _website/static/images/favicons/:

favicon.ico
favicon-32x32.png
favicon-16x16.png
apple-touch-icon.png

Step 4: Add your default background image as "header_banner.jpg" to _website/static/images/

Step 5: Make sure you have Python 3 installed and execute:

python3 install.py

Step 6: Test your website - you can start your webserver via:

python manage.py runserver

Step 7: Customize the settings in config.json for your hackspace (and make sure it's a valid JSON, otherwise the server won't be able to start).

Step 8: Deploy your website

<br/><br/> <img alt="🧹 How to customize" src="./_readme_images/heading_customize.png" id="customize" >

=> Click to show templates

=> Click to show CSS files

=> Click to show images

=> Click to show JavaScript files

=> How to add a new page:

• add a new view file with a new view class in views.py
• add new view class to init.py
• add template html in /templates
• add a new path for view in urls.py

<br/><br/> <img alt="💻How to contribute" src="./_readme_images/heading_contribute.png" id="contribute" >

Check out our To Do's Board. to see what tasks you could help with - and fill out this contact form, so we can get in contact.

Want to support the development financially? Donations are always welcomed! <a href="https://liberapay.com/glowingkitty/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a>