codesee-io / oss-port

Connecting contributors and maintainers and helping all onboard better.

OSS Port

OSS Port is now Open-Source Hub! We've moved to a new repository.

Welcome to OSS Port! This website and community connects open source maintainers and collaborators. Please join our Discord channel if you have any questions or just want to chat!

Project setup

Requirements:

• Node v14 or above
• Yarn: npm install --global yarn

First-time setup:

1. check out this repository and navigate into it with cd oss-port
2. install the dependencies: yarn

🚀 When you've completed the setup steps, run the app:

yarn dev

github.dev environment

You can also contribute to OSS Port without having to run the app on your local machine! Go ahead and check out the github.dev steps below.

If you have a JavaScript development environment set up already and prefer to run locally, the approach will be familiar.

1. Create a fork of the OSS Port.
2. Once on your fork's page, either press the full stop . key or replace .com in the location bar in your browser to .dev.

Now you're in the github.dev editor! Feel free to hop ahead to our contributing section.

For more information on the Github.dev editor, please see their docs.

How to list your project

1. Get the project up and running first
2. Create your project's .mdx file:
   1. Create a new folder inside /public/projects/ and name it the same as your GitHub handle or organization
   2. Add a new .mdx file to that folder, and give it the name of your public repo. For example,
      • if your project URl is: https://github.com/Codesee-io/oss-port
      • you would create: /public/projects/Codesee-io/oss-port.mdx.
   3. Copy/paste the contents of /app/projects/_template.mdx into that file
3. Fill out the information — most of it is optional, but extremely helpful for potential contributors. If you opt not to include the optional content, delete it from your template.
4. Add a 200x200 image for your organization to your folder, for example, ./app/projects/distributeaid/da.png
5. Preview your changes by running yarn dev
6. When you're ready, open a PR!

How to add a CodeSee Map to your project listing

Make it easier for contributors to onboard to your project! With a CodeSee Map, they can visualize the entire codebase, with features allowing them to explore system dependencies, add additional context to pull requests, and more.

To add a Map to your project:

1. Sign up for CodeSee Maps (there's no commitment or cost!)
2. Create a Map for your repo following our instructions
3. Set your map to public!
4. Add an entry in your project's template for the Map (see example from Distribute Aid's Shipment Tracker project):

featuredMap:
  url: https://app.codesee.io/maps/public/848e3630-1650-11ec-8bc1-7d4a4822cc27
  description: Get a quick overview of the major areas of our repo

If you would like to display multiple maps you can add an entry called "maps"

maps:
  - url: https://app.codesee.io/maps/public/848e3630-1650-11ec-8bc1-7d4a4822cc27
    description: Get a quick visual overview of the major areas of our repo!
    subTitle: devdocs
  - url: https://app.codesee.io/maps/public/848e3630-1650-11ec-8bc1-7d4a4822cc27
    description: Another map!
    subTitle: testMap

That's it!

The CodeSee Map below is a good way to get familiar with the codebase:

Content

Tag policy

Final tags are up to the maintainers of OSS Port. Your tags may be modified for the benefit of the community and to improve discoverability.

We use title-casing for tags. For example: "First-Timer Friendly, Social Activism, C#, JavaScript".

How to remove your project from OSS Port

Open a PR to remove your project folder from this repository.

Notes

• Please pin the exact version of dependencies

oss-port's Issues

Cannot clone repository - File name too long

Cannot clone the repository to my local environment:

tyvik@Server:~/Projects$ git clone [email protected]:Codesee-io/oss-port.git
Cloning into 'oss-port'...
remote: Enumerating objects: 2407, done.
remote: Counting objects: 100% (932/932), done.
remote: Compressing objects: 100% (360/360), done.
remote: Total 2407 (delta 707), reused 623 (delta 565), pack-reused 1475
Receiving objects: 100% (2407/2407), 9.27 MiB | 5.25 MiB/s, done.
Resolving deltas: 100% (1347/1347), done.
error: unable to create file projects/tomassirio/68747470733a2f2f63646e2e706978616261792e636f6d2f70686f746f2f323031392f31312f30372f32302f32342f636865636b2d6c6973742d343630393832395f3936305f3732302e706e67.png: File name too long
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry with 'git restore --source=HEAD :/'

Add "Home" tab in the navbar for redirecting user to the main page

Currently on the website when the user clicks on the other links in the navbar he/she will get redirected to the respected page, so in order to get on the home the, page user need to click on the logo of the website which is located in the navbar but is not a good example of UX. In order to resolve this Add the "Home" tab in the navbar for redirecting users to the main page !!

Before

After

Bug: gatsby develop and gatsby build failing for nodejs v12

Npm & Node Version

Node = v12.18.3
NPM = 7.10.0

Issue

Reason

The cause is that optional chaining only works in the files which are somehow handled by Webpack. gatsby-node.js is unfortunately not. Please see the issue

Fix?

Pull request is being created 🙂

Better experience for side filters (suggestion)

Hi,

I was going through the application and found one thing that was not a good experience and thought to raise it over here.

Current Behaviorr:

The current behavior is filtering the projects when the selected filters are present in the project. For example, If I select the nodejs and nextjs filters, it will filter out the projects that are having both nextjs and nodejs tags.

Suggested Behavior

I would suggest that it should filter out all the projects related to nextjs and nodejs. I mean every project which has a tag nextjs OR nodejs

For example, If I want to see all projects related to Java and JavaScript. It's showing me none. It should list all the projects having tags of javascript or java.

Again, this is a suggestion 🥰 Thanks for making this project. 🥰

Multiple featured maps

As requested by @TyVik, we currently can only have one featured map on an entry.

Order of projects

It will easier for a user to find a project, if the order of the projects is alphetical order

markdownify project github link isn't working

I would like to fix this

Bug: No license field in package.json

Overview

While setting up the project locally, I came across this warning warning ../../../package.json: No license field (see the image below)

This happens when there is no "license" and/or "private" attribute in package.json.

Fix

Add license attribute to the package.json file.

Reference

Please check this official doc for the same.

Add link to the Discord in the header

URL:
https://discord.gg/JbAChX3a3a

Add templates for Issues

I would like to add two issue templates for this repository.

• but report
• feature request

Add GitHub Issue Forms

Title

GitHub has recently rolled out a public beta for their issue forms feature. This would allow you to create interactive issue templates and validate them 🤯.

Description

As we can see this repository currently uses no issue template. Your task is to create GitHub issue forms for this repository.

Language field

English is by far the suitable language for developers, but not everyone knows it well enough to lead an open-source software development. For example, our local community tracks issues in Russian (https://github.com/krddevdays/backend/issues).

Could you please add a separate field to specify possible conversation languages to develop?

Add registering via github OAuth or others

I would like to see "login/register with github" or other OAuth providers. That would be good. For OAuth Github it makes more sense, due to the projects, that you want to anaylze for the codesee map.

Improvement: Display images inline by default in project listings

The current behavior is that images are displayed on separate lines, using both the markdown syntax and html.

Markdown:

![](https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux)
![](https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux)

HTML:

<img src="https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux"/>
<img src="https://img.shields.io/github/workflow/status/flameshot-org/flameshot/Packaging(Linux)?label=gnu%2Flinux"/>

Here's what it looks like:

What I want it to look like:

I can get the images to display inline if I add style="display:inline;" to the image elements, but they get displayed without any padding. The current solution I am using to display the images the way I want to is to put them inside a single-row <table> element, each image surrounded by a <td> element.

It would be much better if the images were displayed inline by default, like they are in GitHub READMEs. This would make it easier to directly copy the badges from a GitHub README into a project .mdx file.

project alignment issue

projects are aligned to right side