Giter Club home page Giter Club logo

loc-digital-garden's Introduction

Ladies of Code Digitial Garden

About

This project is set up using nuxt 3. Find out more about the ambitions for this project here.

You can see the site here

Becoming a technical contributor to the Digital Garden

We would like to improve this site technically and we very much welcome open source contributors from the LoC community. Please see the existing set of improvements identified.

If you would be interested in contributing to these improvements, please express your interest on the issues themselves. We can then work together asynchronously on the issues.

In this project we work with feature branches & Pull Requests. If you have some changes you'd like us to review, please do open a Pull Request. This will then be reviewed by the Codeowners.

Adding a post to the Digital Garden

If you'd like to add a post to the Digital Garden, please follow the instructions in the CONTRIBUTORS file.

Setup

  1. Ensure you have the minimum versions of npm and node as specified in the package.json engines section.
  2. Make sure to install the dependencies:
# npm
npm install

Run locally

Start the development server on http://localhost:3000

npm run dev

See how the site looks in production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Checkout the deployment documentation for more information.

Tests

npm run test

Run all the tests in the suite.

npm run test:ui

and open this url in the browser http://localhost:51204/__vitest__/.

This provides a visual indication of the test run and may be helpful for debugging, more information here.

npx vitest name-of-test

To run a single test in isolate, you can target them using Vitest in this way

Test structure

All tests can be found in test directory. The folder structure follows the same structure of the src files.

More insight on decisions made in approach to tests can be found in Setting Up.

Linting and formatting

Checkout the scripts section of the package.json file to see the commands which can be run.

Typical developer flow after making local changes would be:

npm run format && lint

loc-digital-garden's People

Contributors

cfereday avatar charlottebrf avatar sarahu avatar sareg0 avatar

Stargazers

avatar avatar

Watchers

avatar avatar avatar avatar

loc-digital-garden's Issues

Create templates for issues and PRs

Acceptance Criteria

There is an issue template for

  • adding in new issues for work to be completed

There is a PR template for

  • PRs

  • codeowners file

The UI looks better

Task

Description of task

Resources

Useful resources which will help the developer gain context on the task

Acceptance Criteria

  • A clear set of criteria
  • which will let the dev know when they're done

Document how a new contributor can easily add a new post

Task

The site should enable any member of the LoC community to add a new entry and share knowledge.

Resources

TBC

Acceptance Criteria

  • There is documentation in the repo which enables new contributors to open a PR and add a new post easily
  • PoC PR raised by a member of LoC community for Q&A

Basic CI pipeline is setup for PRs

Acceptance criteria

Consider using Github Actions so that when a PR is opened:

  • Lint rules are run
  • Tests are run
  • If either of these fails then CI fails for the PR

Set up linting and formatting rules

Acceptance Criteria

  • ESLint is configured to enforce consistency in development
  • An engineer can easily lint and format code using NPM commands
  • Documentation is updated to make it clear how an engineer can lint and format their code
  • Check out which eslint plugin to use for vite / vitest https://www.npmjs.com/package/vite-plugin-eslint
  • Typescript rules are configured to enforce rules

Add in testing capabilities

Acceptance Criteria

  • The repo has a test runner Vitest and Vue test utils
  • The current components have tests to validate assumptions on behaviours
  • Documentation is added on how to run tests

Users can get back to the homepage from an entry page

Task

This task will make it easier for users to navigate around the site.

Resources

Examples:
https://security.snyk.io/vuln/SNYK-PYTHON-INDYNODE-3025422
https://app.sane.fyi/space/tiina-tiina-s-garden-50525
https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/

Acceptance Criteria

  • A user can see breadcrumbs when they are on the entry page
  • A user can click the homepage breadcrumb and be redirected back to the homepage from an entry

Site is deployed to production

Acceptance Criteria

  • Find a way to publish the site to production, most likely using Netlify
  • Add this to CI so that when a PR is merged, it's final CI step is to roll the changes out to production

The site has basic styling

Task

It looks better!

Resources

Useful resources which will help the developer gain context on the task

Acceptance Criteria

  • A clear set of criteria
  • which will let the dev know when they're done

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.