Techtonica

This repo is for the Techtonica website, which is currently hosted on DreamHost.

• Who
• What
• How
• Getting Started
  • Install Pre-Commit Hooks
  • Running Locally
  • Using Docker to Run Locally
  • CSS / SCSS
  • Updating Dependencies
• Deployment to DreamHost
  • Initial Setup
  • Updating the Site

Who

The audience of the website is made up of (potential) volunteers, sponsors, and program participants.

What

We need to effectively communicate that Techtonica and its participants are worth supporting and share details of the program for potential applicants and volunteers.

How

There should be a good understanding of how the program works with vetting, training, mentoring, and placements.

Detailed instructions on how to update the website: https://docs.google.com/document/d/1oL3BaemFfUD7DfoFzhTSwcX4lPxYbWN3Dy9oZFfGP0Y/edit

Getting Started

This app uses Python 3.6; please stick to this version when doing development.

Install Pre-Commit Hooks

This project uses various pre-commit hooks to ensure code quality and formatting consistency.

1. Install pre-commit globally.

2. Install the project pre-commit hooks:

   pre-commit install -f --install-hooks

Running Locally

If you prefer using Docker, see instructions.

It is recommended you use a virtual environment tool to keep dependencies required by different projects separate. Learn more about Python virtual environments.

Install the project dependencies. In the project root run:

pip install -r dev.txt

Start the application's server:

FLASK_DEBUG=1 FLASK_APP=main_site.py flask run

Browse to http://localhost:5000.

Using Docker to Run Locally

First Time Using Docker?

1. Download Docker Desktop
2. cd into the folder that holds your techtonica.org repo
3. Run your app: docker-compose up

⚠️ When there are updates to requirements.txt or Dockerfile, you will have to rebuild the Docker image in order for those changes to take effect.

For Docker Pros

• To run app: docker-compose up
• To rebuild Docker image: docker build . -t techtonica/website --pull
• To push latest image to Docker Hub: docker push techtonica/website

CSS / SCSS

Styling changes should be made to the Sass (.scss) files and then compiled to CSS using one of the following commands:

👷‍♀️ Install Sass using one of the following

Mac: brew install sass/sass/sass Windows: choco install sass

sass static/sass/style.scss static/css/style.css
sass --watch static/sass/style.scss static/css/style.css

Updating the Demographics Chart for the Apply Section

At the moment, we do not have styling in place that will enable us to have a coded, adequately sized piechart while still maintaining mobile responsiveness. Until that happens, here is how to update the piechart when numbers change.

1. Start the server.
2. Open the browser and navigate to the Apply page.
3. Update the data section in static/js/piechart.js#L30.
4. Uncomment out following in full-time-program.html.

  <!-- <div class="blue-background">
     <canvas id="myChart" width="700" height="350"></canvas>
  </div> -->

5. Take a screenshot of the piechart on the rendered page.
6. Add the screenshot to the static/img directory saved with YEAR-H#-Cohort-Demographics.jpg, ex. 2023-H1-Cohort-Demographics.jpg.
7. Update full-time-program.html to point to the new image you just added. Update the alt text if necessary.

 <img
     src="{{ url_for('static', filename='img/2023-H1-Cohort-Demographics.jpg') }}"
     alt="2023 Cohort Demographics."
     class="full-width-img"
  />

8. Recomment the following.

  <!-- <div class="blue-background">
     <canvas id="myChart" width="700" height="350"></canvas>
  </div> -->

9. Stop the server
10. Commit your code and open a pull request

Updating Dependencies

This project uses pip-tools to manage dependencies. If you need to add or remove a Python library dependency:

1. Edit requirement.in

2. Generate requirements.txt:

   pip-compile -U

Once the new library is used in the code base, you'll need to update the isort config to reflect third party library usage:

pre-commit run seed-isort-config -a --hook-stage manual

For development dependencies:

1. Edit dev.in

2. Generate dev.txt:

   pip-compile -U dev.in

Deployment to DreamHost

Make sure you branch off develop, if you want to make changes.

a. push changes to new branch

b. merge new branch into develop

c. push develop to GitHub

d. delete new branch

e. deploy develop to staging

f. merge develop into main

g. push main to GitHub

h. deploy main to techtonica.org

i. tag the date after deployment

Initial Setup

1. Follow the instructions in the Setting up and deploying Python Flask to Dreamhost blog post.

2. Update package tools, while you're still operating in the virtual environment:

   pip install -U pip setuptools pip-tools

Updating the Site

Important: Only ever Pull form the server!

1. Log in via SSH using your SSH key.

2. Change directory to the appropriate domain:

   cd techtonica.org

   or

   cd staging.techtonica.org

3. Activate the virtual envrionment:

   . bin/activate

4. Change to the source directory:

   cd techtonica

5. Pull the latest code using

   git pull

6. Update requirements:

   pip-sync

7. "Restart" the server to showcase new changes

// staging.techtonica.org
systemctl --user stop gunicorn_staging
systemctl --user enable gunicorn_staging
systemctl --user restart gunicorn_staging 
systemctl --user status gunicorn_staging

  // testing.techtonica.org
systemctl --user stop gunicorn_testing
systemctl --user enable gunicorn_testing
systemctl --user restart gunicorn_testing
systemctl --user status gunicorn_testing

// techtonica.org
systemctl --user stop gunicorn_techtonica
systemctl --user enable gunicorn_techtonica
systemctl --user restart gunicorn_techtonica
systemctl --user status gunicorn_techtonica

1. Deactivate virtual envirement and exit server:

   deactivate

   exit