nighthawkcoders / flocker_frontend

Frontend Social Media Repository for Del Norte CompSci '25
https://nighthawkcoders.github.io/flocker_frontend/
Apache License 2.0
0 stars 45 forks source link

Introduction

Nighthawk Pages is a project designed to support students in their Computer Science and Software Engineering education. It offers a wide range of resources including tech talks, code examples, and educational blogs.

GitHub Pages can be customized by the blogger to support computer science learnings as the student works through the pathway of using Javascript, Python/Flask, Java/Spring.

Student Requirements

Del Norte HS students will be required to review their personal GitHub Pages at each midterm and final. This review will contain a compilation of personal work performed within each significant grading period.

In general, Students and Teachers are expected to use GitHub pages to build lessons, complete classroom hacks, perform work on JavaScript games, and serve as a frontend to full-stack applications.

Exchange of information could be:

  1. sharing a file: `wget "raw-link.ipynb"
  2. creating a template from this repository
  3. sharing a fork among team members
  4. etc.

History

This project is in its 3rd revision (aka 3.0).

The project was initially based on Fastpages. But this project has diverged from those roots into an independent entity. The decision to separate from Fastpages was influenced by the deprecation of Fastpages by authors. It is believed by our community that the authors of fastpages turned toward Quatro. After that change of direction fastpages did not align with the Teacher's goals and student needs. The Nighthawk Pages project has more of a raw development blogging need.

License

The Apache license has its roots in Fastpages. Thus, it carries its license forward. However, most of the code is likely unrecognizable from those roots.

Key Features

Contributions


GitHub Pages setup

The absolutes in setup up...

Activate GitHub Pages Actions: This step involves enabling GitHub Pages Actions for your project. By doing so, your project will be automatically deployed using GitHub Pages Actions, ensuring that your project is always up to date with the latest changes you push to your repository.

Update _config.yml: You need to modify the _config.yml file to reflect your repository's name. This configuration is crucial because it ensures that your project's styling is correctly applied, making your deployed site look as intended rather than unstyled or broken.

github_repo: "portfolio_2025" 
baseurl: "/portfolio_2025"

Set Repository Name in Makefile: Adjust the REPO_NAME variable in your Makefile to match your GitHub repository's name. This action facilitates the automatic updating of posts and notebooks on your local development server, improving the development process.

# Configuration, override port with usage: make PORT=4200
PORT ?= 4887
REPO_NAME ?= flocker_frontend 
LOG_FILE = /tmp/jekyll$(PORT).log

Tool requirements

All GitHub Pages websites are managed on GitHub infrastructure and use GitHub version control. Each time we change files in GitHub it initiates a GitHub Action, a continuous integration and development toolset, that rebuilds and publishes the site with Jekyll.

Development Environment Setup

Comprehensive start. A topic-by-topic guide to getting this project running is published here.

Quick start. A quick start below is a reminder, but is dependent on your knowledge. Only follow this instruction if you need a refresher. Always default to the comprehensive start if any problem occurs.

Clone Repo

Run these commands to obtain the project, then locate into the project directory with the terminal, install an extensive set of tools, and make.

git clone <this-repo> # git clone https://github.com/nighthawkcoders/portfolio_2025.git 
cd <repo-dir>/scripts # cd portfolio_2025

Windows WSL and/or Ubuntu Users

macOS Users

Kasm Cloud Desktop Users

Run Server on localhost

To preview the project you will need to "make" the project.

Bundle install

The very first time you clone run project you will need to run this Ruby command as the final part of your setup.

bundle install

Start the Server

This requires running terminal commands make, make stop, make clean, or make convert to manage the running server. Logging of details will appear in the terminal. A Makefile has been created in the project to support commands and start processes.

Start the server, this is the best choice for initial and iterative development. Note. after the initial make, you should see files automatically refresh in the terminal on VSCode save.

  make

Load web application into the Browser

Start the preview server in the terminal, The terminal output from make shows the server address. "Cmd" or "Ctl" click the http location to open the preview server in a browser. Here is an example Server address message, click on the Server address to load:...

  http://0.0.0.0:4887/flocker_frontend/

Regeneration of web application

Save on ".ipynb" or ".md" file activiates "regeneration". An example terminal message is below. Refresh the browser to see updates after the message displays.

  Regenerating: 1 file(s) changed at 2023-07-31 06:54:32
      _notebooks/2024-01-04-cockpit-setup.ipynb

Other "make" commands

Terminal messages are generated from background processes. At any time, click return or enter in a terminal window to obtain a prompt. Once you have the prompt you can use the terminal as needed for other tasks. Always return to the root of project cd ~/vscode/portfolio_2025 for all "make" actions.

Stop the preview server

Stopping the server ends the web server applications running process. However, it leaves constructed files in the project in a ready state for the next time you run make.

  make stop

Clean the local web application environment

This command will top the server and "clean" all previously constructed files (ie .ipynb -> .md). This is the best choice when renaming files has created duplicates that are visible when previewing work.

  make clean

Observe build errors

Test Jupyter Notebook conversions (ie .ipynb -> .md), this is the best choice to see if an IPYNB conversion error is occurring.

  make convert

Development Support

File Names in "_posts", "_notebooks"

There are two primary directories for creating blogs. The "_posts" directory is for authoring in markdown only. The "_notebooks" allows for markdown, pythons, javascript and more.

To name a file, use the following structure (If dates are in the future, review your config.yml setting if you want them to be viewed). Review these naming conventions.

Tags

Tags are used to organize pages by their tag the way to add tags is to add the following to your front matter such as the example seen here categories: [Tools] Each item in the same category will be lumped together to be seen easily on the search page.

Search

All pages can be searched for using the built-in search bar. This search bar will search for any word in the title of a page or in the page itself. This allows for easily finding pages and information that you are looking for. However, sometimes this may not be desirable so to hide a page from the search you need to add search_exclude: true to the front matter of the page. This will hide the page from appearing when the viewer uses search.

Navigation Bar

To add pages to the top navigation bar use _config.yml to order and determine which menus you want and how to order them. Review the_config.yml in this project for an example.

Blog Page

There is a blog page that has options for images and a description of the page. This page can help the viewer understand what the page is about and what they can expect to find on the page. The way to add images to a page is to have the following front matter image: /images/file.jpg and then the name of the image that you want to use. The image must be in the images folder. Furthermore, if you would like the file to not show up on the blog page hide: true can be added to the front matter.

SASS support

NIGHTHAWK Pages support a variety of different themes that are each overlaid on top of minima. To use each theme, go to the "_sass/minima/custom-styles.scss" file and simply comment or uncomment the theme you want to use.

To learn about the minima themes search for "GitHub Pages minima" and review the README.

To find a new theme search for "Github Pages Themes".

Includes

Layouts

Metadata

Metadata, also known as "front matter", is a set of key-value pairs that can provide additional information to GitHub Pages about .md and .ipynb files. This can and probably will be used in other file types (ie doc, pdf) if we add them to the system.

In the front matter, you can also define things like a title and description for the page. Additional front matter is defined to place content on the "Computer Science Lab Notebook" page. The courses: key will place data on a specific page with the nested week: placing data on a specific row on the page. The type: key in "front matter" will place the blog under the plans, hacks(ToDo), and tangibles columns.