vickilanger / opengates

Reference checklist of things to avoid gatekeeping in posts, articles, videos, talks, presentations, podcasts, and in any other content.

OpenGates "An AntiGatekeeping" Checklist

Mission

Reference checklist of things to avoid gatekeeping in posts, articles, videos, talks, presentations, podcasts, and in any other content.

It is your job to make sure that every piece of content you put out is inclusive, accessible, and welcoming to all. This checklist is here to make your life easier. No longer will you need to remeber every single thing you need to do in order to stop accidental gatekeeping in your content.

Add You or Your Community as an Adopter

1. Fork the repository.
2. Add a new row to adopters section on homepage, with your community, project's name, or company linked to your site in the first column. Then, after the arrow add what you're using OpenGates for in the second column. Example below
3. Open a pull request.

 - [Vicki Langer](https://twitter.com/Vicki_Langer) → Writing dev.to content & a beginners python book
 - [You]() → something awesome?

Contributing

If you would like to contribute, feel free to make a pull request.

First time? I suggest checking out issue #1 to add items for more details.

If you need more of a step-by-step, skim through this article about making your first contribution.

This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

Who Has Contributed?

All contributions are greatly appreciated.

opengates's Issues

[BUG] fix DNS config

Setup Resusable components for pages

Each individual page will stay in markdown for ease of update. I believe we could use templating with jekyll? Maybe that's a reasonable possibility. Though, I'm not sure jekyll will be suitable in the long term. I'm pretty sure we couldn't do #9 with jekyll.

Make a pretty 404 page

As a...

• person trying to access a page that may not exists. Either by failed URL typing or a broken link

I want...

• to see an error page

So that...

• I have links back to main areas and I know something went wrong. Extra points if it's cute

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

Add Items with References to `checklist_working-copy.md`

This will be a running issue to let you know how to add more items to the checklist

---

In the checklist_working-copy.md file, there are some checklist items to help dev creators and builders avoid accidental gatekeeping.

---

<!--TODO: Add more items and references-->

Within appropriate categories, you may add new checklist items with references. Below are some syntax examples.

All items added should look like the below

 - [ ] item ([ref](URL to a source with more info))
 - [ ] item ([ref](URL to a source with more info))

If you're adding a new category or subcategory of items, do it like this

## Category name
 - [ ] category item ([ref](source link))
 - [ ] category item ([ref](source link))
 - [ ] not ~~word~~ → **alternative**, **alternative**, or **alternative** ([ref](source link))
### Sub-Category name
 - [ ] sub-category item ([ref](source link))
 - [ ] sub-category item ([ref](source link))

Items must have a reference link. If you find one without a reference link, you are more than welcome to add it or comment on this issue with the link and we are happy to add it.

Keep it Clean and Useful

Some guidelines to keep things looking clean, organized, and easy to use (discussed here)

1. Keep line items as short and concise as possible
2. If adding a term to avoid, give only 2 or 3 alternative words.
   • If there are multiple terms with similar meaning, group them together
3. Absolutely no explanations. Instead, include a source like SelfDefined.App
4. Ensure source references are reputable. Prefer own voices references

Make it welcoming

When possible, try to frame things in a positive way. Sometimes, this won't be possible, but we'd like it to be as friendly as it can be. We don't want a "don't do this, don't do that, yep, not that either" list.

Proposed workflow:

1. Fork this repo
2. Add checklist items to checklist_working-copy.md keeping to the existing style/conventions:
   • follow the examples above
3. Once you are done and checked for typos, commit it & push your work to your fork
4. Submit a PR against this repo

Someone will look it over and, if deemed appropriate, will merge your PR.

Thanks for contributing! ♥

---

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

Setup versioning

https://semver.org/

https://www.contributor-covenant.org/translations/

Make OpenGates Responsive

[FEATURE] Automate pulling links to translated versions page

Currently, https://opengates.dev/translations/ pulls from translations.md and uses _layout/page. I'd love to see this automated and have it in columns, maybe a table?

In theory, it could look like the Contributor Covenant translations page which is created here.

All versions will be in versions folder. In #16, there are details about how the files are named.

Model OpenGates like Contributor Covenant

As a...

• project owner

I want to...

• include the OpenGates checklist as part of ourcontributing.md

So that...

• the OpenGates checklist can be used as a standard for the project and all contributors will know the expectations

Imagine something similar to how http://www.contributor-covenant.org/ has provided a standard cut & paste code_of_conduct.md
Idea credit: @andyhaskell

Note: modelling like this will require versioning and releases.

---

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

Create non-github UI (spin up rails app for submissions)

Needs

• Spin up rails app
• small form for submissions. (should submissions flow into gh as issues or prs?)
• Accessible

Stuff Needed

• [ ]

Requirements for Consistency

• Must adhere to WCAG accessibility standards for contrast and color blindness

Standard Fonts

• Comfortaa
• Pompiere
• Nunito
  (link to all three fonts)

Standard Colors

• #0b3c49 a dark blue, most text
• #f2a130 an orangey yellow
• #444444 a dark gray
• #86b500 greenish
• #f4f4f4 almost white, kinda gray

Proposed workflow:

1. Fork this repo
2. Once you are done and checked for typos, commit it & push your work to your fork
3. Submit a PR against this repo

Someone will look it over and, if deemed appropriate, will merge your PR.

Thanks for contributing!

---

Don't forget to check out the AntiGatekeeping Checklist for Content Creation and to see the hard work you put in.

Markdown link returns a 404

Describe the bug
When I click on the Markdown link on the main page, I see 404: Not found

The url path is: https://raw.githubusercontent.com/VickiLanger/OpenGates/main/site/checklist.md

To Reproduce or make the Bug happen again
Steps to reproduce the behavior:

1. Go to https://opengates.dev/
2. Scroll down to 'The Checklist'
3. Click "English (Markdown version)"
4. See 404 error

Expected behavior
Go to a markdown formatted page

It looks like the path should be https://github.com/VickiLanger/OpenGates/blob/main/site/versions/1/checklist.md

Additional context
Cool project

---

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

More Info on a checklist item

As a...

• user of OpenGates

I want...

• something like a tooltip or a reference link to give more info on an item

So that...

• I can get a better understanding of an item on the OpenGates checklist

not sure this can be done with jekyll

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

[BUG] CSS isn't working

Css file lives in site/style.css

page.html lives in _layouts but the link won't read the CSS?
<link rel="stylesheet" href="{{ baseurl }}/site/style.css">

Français HTML checklist not found

Problem:

Currently, the https://github.com/VickiLanger/OpenGates/blob/main/site/versions/1/checklist_fr.md doesn't show up in HTML like the English version does. It throws a 404.
(side note: we also need a 404 page #28, but that's not part of this issue)

Expected behavior

• French checklist works in markdown. https://raw.githubusercontent.com/VickiLanger/OpenGates/main/site/versions/1/checklist.md should have a French counterpart https://raw.githubusercontent.com/VickiLanger/OpenGates/main/site/versions/1/checklist_fr.md
• French checklist exists in html. https://opengates.dev/checklist/ should have a French counterpart https://opengates.dev/checklist_fr/
• Homepage links to French checklist. https://github.com/VickiLanger/OpenGates/blob/main/site/home.md should have - [Français (HTML version)](https://vickilanger.github.io/OpenGates/checklist_fr/) in it's "latest version of checklist" list

---

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

Translations for Version 1

This will be a running issue to let you know how to contribute translations

---

This can be a huge task. Please don't take it all on by yourself. It does not need to be done by any one person. Ask for help.

You may translate to any language you are fluent in. Yes yes, that means if you can and want to, you may even translate to Esperanto or even Klingon.

File Name

You'll create a new markdown file and give it the name checklist_language.md. However, you'll replace "language" with the language's language code. If you don't know it, click the link to find it. Here are some example file names:

checklist_pt-br.md
checklist_ja.md
checklist_hu.md

Proposed workflow:

1. Fork this repo
2. In the site/versions/1 folder, create a new file checklist_language.md and have fun translating site/versions/1/checklist.md
3. Once you are done and checked for typos, commit it & push your work to your fork
4. Submit a PR against this repo and reference this issue

Someone, fluent in that language, will look it over and give tell us it is good. Once we hear it is good, we will merge your PR.

Thanks for contributing! ♥

Jekyll not listening to title in config, but pulling h1 from readme

not sure why thing is happening. I copied the config stuff straight from Jekyll docs. I even tried to stringify, but that didn't help.

[FEATURE] Add visitor counter to footer

It would be cool if we had a visitor counter at the bottom. I'm imagining a '90s-esque counter

Add OpenGraph tags to help with social previews

• <meta property="og:title" content="" />

• <meta property="og:type" content="website" />

• <meta property="og:image" content="/site/....png" />

• <meta property="og:url" content="https://www.OpenGates.dev" />

• an image for the og:image

Purchase and set up Domain

Ability to remove or hide completed items

As a...

• user of this checklist

I want...

• the ability to remove or hide completed items

So that...

• The list gets less daunting as things are checked off.

Possible iterations

1. have the ability to fold or collapse sections (maybe using <details> and <summary> tags
2. give a button to hide/unhide all items that have been selected/completed

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

Français checklist not found

Problem:

Currently, the https://github.com/VickiLanger/OpenGates/blob/main/site/versions/1/checklist_fr.md doesn't show up in HTML like the English version does. It throws a 404.
(side note: we also need a 404 page #28, but that's not part of this issue)

Expected behavior

• French checklist works in markdown. https://raw.githubusercontent.com/VickiLanger/OpenGates/main/site/versions/1/checklist.md should have a French counterpart https://raw.githubusercontent.com/VickiLanger/OpenGates/main/site/versions/1/checklist_fr.md
• French checklist exists in html. https://opengates.dev/checklist/ should have a French counterpart https://opengates.dev/checklist_fr/
• Homepage links to French checklist. https://github.com/VickiLanger/OpenGates/blob/main/site/home.md should have - [Français (HTML version)](https://vickilanger.github.io/OpenGates/checklist_fr/) in it's "latest version of checklist" list

---

Don't forget to checkout AntiGatekeep Checklist for Content Creation and follow the bot on Twitter to see the hard work you put in.

[BUG] Card open graph Image not showing on Twitter

Twitter card isn't working properly. It should be pulling the og:image but it's not.

The preview image shows for iMessage and discord.

    <meta property="og:title" content="OpenGates" />
    <meta property="og:description" content="An Anti-Gatekeeping Checklist for Dev Content Creators" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/site/og_img.png" />
    <meta property="og:url" content="https://www.OpenGates.dev" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@vicki_langer" />

Build a Bot to post new entries on Twitter

As a...
Developer writing anti-gatekeeping propoganda
I want...
a twitter bot that posts new entries to this checklist as they are approved
So that...
I can keep up with each new entry in a place that I frequent

Could also:
post random items?
Post new issues or open issues every so often

email: [email protected]

[BUG] Links in header and footer are not properly using their hover color

On hover and active, there are color changes, but they aren't working. I know they aren't working because I used !important for the text color. But I'm not sure how to avoid that. I need to make those links a different color than the others.

a { 
    color: var(--dark-color);
    font-family: var(--text-font);
    font-weight: bold;
    background: linear-gradient(135deg, red, orange, yellow, green, blue, purple);
    background-clip: text;
    -webkit-background-clip: text;
    margin: auto;
    margin-right: .1rem;
    margin-left: .1rem;
}

#light-link {
    color: var(--light-color) !important;
}

a:hover, #light-link:hover {
    color: transparent !important;
    transition: 250ms ease;
    font-size: 1.2rem;
}

a:active, #light-link:active {
    color: rgba(0,0,0,.5) !important;
}