Electric Hive

This repository hosts the code for the new website of the Electric Hive, an international programmer collective connecting experienced mentors with budding professionals and students. This project is currently under active pre-alpha development.

Demo

• electrichive.github.io

Deploy to Production

The site is served from the gh-pages of github.com/electrichive/hive-website-prod. To deploy from the latest updates on prod, run npm run deploy:github. Currently this configured to run automatically on completed pull requests to prod.

Authors

• @tomstrat
• @tristanschrader

Run Locally

git clone https://github.com/schradert/hive-website.git

Install as devcontainer

cd hive-website
code .

• In VS Code
  • Run > Remote-Containers: Open Folder in Container ...
  • Select /.../hive-website/
  • Run > File: Open Workspace from File ...
  • Select /.../hive-website/.vscode/hive.code-workspace

Install from terminal

cd hive-website
npm install

Start the development server

npm run start

Run tests

npm run test

Format code properly

npm run lint
npm run format

Use Storybook to view React component library

npm run storybook

Create a new component

npm run new-component

Hide an existing page

• In gatsby-config.js
  • Edit > siteMetaData > navbar > items
• In gatsby-node.js
  • Edit > hiddenPages array with name of page route

Project Structure

hive-website/
    .devcontainer/              -- VS Code devcontainer configuration
    .frontmatter/               -- Front Matter templates and extension configuration
    .github/
        workflows/              -- Github Actions workflows configurations
    .hygen/
        component/new/
            index.js            -- Code generation prompt for `npm run new-component` command
            *.ejs.t             -- EJS template files for code generation
    .storybook/                 -- Storybook configuration directory
    .vscode/
        hive.code-workspace     -- VS Code workspace definition
        settings.json           -- Special configuration for parent folder of VS Code workspace
    content/
        sandbox/                -- Content creation directory for "sandbox" posts
    coverage/                   -- Test coverage output (json, xml, etc.)
    node_modules/               -- NodeJS dependencies
    public/                     -- Root directory of code build
    src/
        components/             -- Every local component
            <component_name>
                *.stories.tsx   -- Component Storybook story
                *.styled.tsx    -- Component-specific "style components"
                *.test.tsx      -- Component unit tests
                index.tsx       -- Main logic of component
        pages/                  -- Each file is a page with the relative URL from its relative pathname
        stories/                -- Story files for each page in `pages/`
        styles/                 -- Global stylesheets or page-specific ones
        types/                  -- Project-wide Typescript datatypes
    static/                     -- Static multimedia assets like logos and PWA spec SVGs
    tests/                      -- Functional, integration, and E2E tests of `src/`

Roadmap

• Add more components and stories
• Additional browser support

Tech Stack

Gatsby, Jest, Typescript, Storybook, Github Actions, Vercel, VS Code