amycommits / civic_hacking_hub Goto Github PK

use Tailwind classes to add elements and make it look similar to the screenshot attached.
Here is the tailwind cheat sheet that I always use: https://nerdcave.com/tailwind-cheat-sheet

h1: Welcome to the Civic Hacking Hub!
h2: Find causes that you care about to sharpen your programming skills, and to make a positive difference in the world!

(lets not worry about the small facts for now)

<NuxtLink to="/project" class="bg-primary text-white text-center w-screen md:w-1/2">Get Started</NuxtLink>

I'm leaving the particular CSS up to whoever picks this up, but keep in mind that tailwind starts with the mobile size, and that you can specify for the styles to change for bigger screens.

I don't know what version I was using on my other laptop but
nvm use lts/dubnium

works when you npm i --force

it should just be using --lts

Currently the coding organization page looks "bad"

http://localhost:3000/coding_org

I would like that information to look more like this:

The example codepen: https://codepen.io/jaynewey/pen/dyGxjBZ

The components involved are located in the components/code_orgs folder
CodeOrgCard.vue - the individual code organization
CodeOrgWrapper.vue - takes the stored information to invoke multiple CodeOrgCard.vue instances

https://docs.github.com/en/search-github/searching-on-github/searching-for-repositories#search-by-topic

I am available for discussion on how to implement this, but I believe making a: github.api.js file in the api folder should be able to get us the majority of the way there.

https://docs.github.com/en/search-github/searching-on-github/searching-for-repositories#search-by-topic

I would like to set up a way to get the open source projects from non-profits automatically because it will be more reliable than people entering in projects manually.

Inside of the: server/db/migrations/20200113212529_create_projects.js

add

table.json('language_tags')

on its own line between:
table.string('setup_link', 250)
table.integer('code_organization_id').unsigned()

https://knexjs.org/#Schema-json
This can be verified by setting up the postgres database and following the directions in the database README: server/db/README.md

Hi @duaimei, how are you?

I am new with VueJS, but I want to learn :)

I saw that the knexfile.js is importing a file called ./sercets and probably it can make a mistake in future, should be ./secrets because we have a file secrets.example.js

replace the information in the second step with:

$ git fetch --all
$ git checkout dev
$ git pull
$ git checkout -b

The problem:
In order to test behavior, I would like to use Cypress.

How to implement?
https://docs.cypress.io/guides/getting-started/installing-cypress#Installing
npm install cypress --save-dev

npx cypress open
^ should initialize the cypress folder. Delete the default tests, and just create a simple hello world test that verifies that the landing page loads. More tests issues will be created after the initial setup.

If you have questions, feel free to ask!

This is needed in order to have the site show information correctly:

server/db/seeds/development/code_organizations.js

The available fields are listed here:
server/db/migrations/20200113212517_create_code_organizations.js

I have the name in the seeds, but I need the url and the description

The three that I have listed are:
Ruby For Good: https://rubyforgood.org/
Code For America: https://www.codeforamerica.org/
Code For DC: https://codefordc.org/

But if you're aware of any other coding organizations that support non-profits, I'd appreciate you adding them!

The initial page. The cards should look like properly made with css cards
The create a project page should look proper too.

The css library has been changed from BootStrap to Tailwind. Tailwind is great because you just put the keywords in the class="" and the framework knows how to handle it.

Here is an example Nuxt navbar:
https://www.limosyn.com/posts/creating-navbar-and-footer-in-nuxtjs-with-tailwindcss

in components/NavBar.vue
change the enclosing <div class="row"></div>
to <nav></nav>

and use the classes in the example for the nuxt links until all of the elements are on one line and spaced nicely starting from the top left.

make the nav background color bg-primary

A great reference for tailwind: https://nerdcave.com/tailwind-cheat-sheet

In the components/NavBar.vue

Find the Nuxt link that goes to Project and update it from

<div class="col-2"><nuxt-link to="/">Projects</nuxt-link></div>

to

<div class="col-2"><nuxt-link to="/project">Projects</nuxt-link></div>

There have been some changes to how the database is setup recently. In the installation instructions add a section for database setup:

brew install postgres
from the root directory:
cp secrets.example.js secrets.js
Open up that file and replace the database username and password with something valid on your machine
use those credentials to log into postgres and create the following database:
CREATE DATABASE civic_hacking;
Then you can use the instructions in the README found in server/db/README.md

Include some resources to help navigate postgres:

https://wiki.postgresql.org/wiki/Homebrew
https://gist.github.com/Kartones/dd3ff5ec5ea238d4c546

This depends on #72

In the server/db/seeds/development/projects.js file also insert the newList into the newest table: code_project_nonprofits

The code will be chained here with a "then": https://github.com/duaimei/civic_hacking_hub/blob/dev/server/db/seeds/development/projects.js#L48

If you query the projects table by project name from the newList, you will receive the id (project_id), code_organization_id and nonprofit_organization_id.

potential gotchas:

async weirdness

tips:

There is a README in the db folder that has the knex commands for running migrations, and seeding databases.
https://github.com/duaimei/civic_hacking_hub/tree/dev/server/db (look at it locally, it isn't formatted correctly on github)

I am including the Tailwind documentation on this in case these instructions are explaining too much: https://tailwindcss.com/docs/customizing-colors#curating-colors

in the root directory there is a tailwind.config.js file

On the first line of the file add:
const colors = require('tailwindcss/colors')

then add inside of the theme section ( but not inside extend, you can delete the extend {})
colors: {
},

Add all of the colors that are listed in the Tailwind documentation:

transparent: 'transparent',
  current: 'currentColor',
  black: colors.black,
  white: colors.white,
  gray: colors.trueGray,
  indigo: colors.indigo,
  red: colors.rose,
  yellow: colors.amber,

Then add these to the list as the site's custom color

primary: '#f7b226ff',
'primary-dark': '#624104ff',
secondary: '#537d8dff',
'secondary-dark': '#a5c0caff',
tertiary: '#a97d7eff',
'tertiary-dark': '#805b5fff',
'accent': '#971024ff',

This can be tested by adding class="bg-primary"

to the h1 tag in the pages/index.vue file and verifying that the color is now a shade of yellow

There is a README file for how to make a knex migration: https://github.com/duaimei/civic_hacking_hub/blob/dev/server/db/README.md

I did not realize that the formatting was so messed up because I normally look at it locally -.-', so if you want to fix it that would be great! But here's the main task.

$ knex migrate:make code_project_nonprofit

This should create a new file in server/db/migrations

Then use the same type of logic found in https://github.com/duaimei/civic_hacking_hub/blob/dev/server/db/migrations/20200113212529_create_projects.js#L16

to make the following three columns:
code_organization_id
project_id
nonprofit_organization_id

plus timestamps
https://github.com/duaimei/civic_hacking_hub/blob/dev/server/db/migrations/20200113212529_create_projects.js#L13

(figure out what version of node this is expecting to run)
npm run install -> npm install

Move the current index.vue file to the project folder

create a new index.vue in the page directory. Use the template.vue file.

Add an h1 attribute inside the div tags that says "Welcome to the Civic Hacking Hub"

Every page has a catch, for some reason the internal service is failing on load. Especially in the homepage.

We are using npm run dev script to develop the application without running npm start every each change.

But all time, we receive this message requiring our decision:

To change it we can add the telemetry option to false: https://github.com/nuxt/telemetry

@duaimei, what do you think about it?

to help people with onboarding

Details:
You can probably use a node docker container
it needs to have postgres
the postgres should have a database called: civic_hacking
The Procfile has the rest of the commands needed to deploy the app https://github.com/duaimei/civic_hacking_hub/blob/dev/Procfile (you may need to do npm run build before those commands)

I believe this project would benefit from a dockerized environment for development (and eventually even deployment).

It would be possible to creata a docker-compose environment containing postgres and node, which would make setup a lot easier.

include CI for cypress

define the node version in the package.json

hopefully all of the upgrades will help.

upgrade any dependencies that are broken as well

Inside the knexfile.js file in the root directory: on lines 7 and 8 the username and password are defined for postgres for development. That information will not be universal so it should be an environmental variable.

proposed solution:
install optional-require
https://www.npmjs.com/package/optional-require
npm i optional-require

create a secrets.js file that's just:

{
"DB_USER_NAME": "eback",
"DB_PASSWORD": "eback"
}

create a secrets.example.js which is the same as the file above, but the values are something like:

{
"DB_USER_NAME": "yourDbUserName",
"DB_PASSWORD": "yourDbUserName"
}

in the .gitignore file add secrets.js

then in the knexfile.js optionally require the secrets file, and replace lines 7 and 8 with:

  user: secrets.DB_USER_NAME,
  password: secrets.DB_PASSWORD,

change the default branch to main, and fix the Heroku work flow