DEV Community

Cover image for Hacktoberfest Week Four — Thank you to our Contributors on Forem ❤️
Christina Gorton for The DEV Team

Posted on

Hacktoberfest Week Four — Thank you to our Contributors on Forem ❤️

It’s the Fourth week of Hacktoberfest and we’re continuing to celebrate by highlighting the amazing people in our community who have contributed to Forem's codebase!

We’re thrilled to share that we’ve had 12 contributors this week commit improvements across the many projects we have in our web, iOS, and Android apps 🎉

Thanks to the help of these wonderful folks, we’ve merged 18 PRs this week. Forem is still a small team so this amount of feature-building and bug-squashing is truly only enabled because of the community. As Forem grows, we intend to continue enabling the open source community to improve and expand our offerings with their invaluable help. We appreciate everyone for helping us sow this open source commitment from day one.

If you are interested in contributing check out our post on Forem projects you can contribute to this Hacktoberfest.

In no particular order, here are the folks who made commits this week, their GitHub profiles, and their merged PRs.

Rafi

Adding role and aria labels to welcome dialog help screen readers #10785

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Adding aria attributes to welcome dialog to help screen reader users

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

  1. Signup as new user to the app
  2. Go to home feed
  3. Try to navigate the welcome dialog with keyboard and screen reader

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

&

Showing example code in storybook #10765

What type of PR is this?

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

It shows example code in storybook that user can copy

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

code_sample

  1. Run storybook
  2. Go the example click "story" tab to view the source

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

&

Extracting prettier config #10847

What type of PR is this?

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [x] Optimization
  • [ ] Documentation Update

Description

Extracting prettier config in a common place to address comment https://github.com/forem/forem/pull/10765#discussion_r504686194

Related Tickets & Documents

N/A

QA Instructions, Screenshots, Recordings

Make changes and commit the file to check if prettier config works

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

&

Replacing globals with node env #10767

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [x] Optimization
  • [ ] Documentation Update

Description

It replaces eslint statement /* globals process module */ with /* eslint-env node */ and also fixes eslint errors in file missing it

Related Tickets & Documents

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Yash Dave

Fix overflow of indented code-blocks in lists #10782

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Adds styling for .highlight to <pre> inside <li>. I checked out the Rouge/redcarpet plugin file which indicates that the .highlight class should be applied to all code-blocks by default since DEV is using the default version too. I felt it would be a simpler fix via the CSS Route instead of configuring a custom renderer, which might lead to more bugs.

I did basic testing with the following article piece, to ensure that behavior for other elements didn't get switched:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget nunc sed dolor molestie eleifend. Nulla ut ante ultricies quam accumsan commodo.

```yml
- name: Get a dad-joke
  run: |
    echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"
\```

<pre>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</pre>
<code>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</code>

1. Curabitur vel tempus libero, vitae elementum purus. Cras et enim porttitor, congue odio in, eleifend mi.

    <pre>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</pre>
    <code>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</code>

    ```yml
    - name: Get a dad-joke
      run: |
        echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"
    ```

2. Curabitur vel tempus libero, vitae elementum purus. Cras et enim porttitor, congue odio in, eleifend mi.

Related Tickets & Documents

Fixes #9988

QA Instructions, Screenshots, Recordings

If there are any instances of <pre> blocks existing inside an <li> are there, a check will be needed to verify their behavior don't get changed. Would also love some feedback on whether it is better to fix this via a custom Renderer or is the CSS fix good? I would love to resend another PR with the renderer fix, albeit after more research on the same if it is the better solution.

Bug:

Bugged image, showing overflow

Fixed:

Fixed image, with no overflow

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

stopping that leak

Darshak Parikh

Add im-in.space Mastodon instance #10804

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix (I guess?)
  • [ ] Optimization
  • [ ] Documentation Update

Description

I added https://im-in.space, a Mastodon instance, to the list of allowed instances.

Related Tickets & Documents

#7981

QA Instructions, Screenshots, Recordings

NA

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

alt_text

Julien Maury

fix dropdown svg for dark themes - comment section #10769

What type of PR is this? (check all applicable)

  • Bug Fix

Description

If I understand this PR https://github.com/forem/forem/pull/9177 correctly, this modification solves the problem. Currently, with dark themes, the dropdown button is hidden.

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

before :

Screenshot 2020-10-11 at 15 44 13

after :

Screenshot 2020-10-11 at 17 02 39

Added tests?

no

Added to documentation?

no

Ivan Grekov

add fullscreen to code blocks #10784

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

I added fullscreen functionality for code blocks via panel, shown on hover. There are some updates for highlight code block, which allow division of concerns in code:

  • classnames starting with js- for event-listeners - in order to be independent from markup.
  • added 'highlight__panel-action', which allow to add several elements (action-icons, e.g. copy) by the same pattern, which will result in proper styling
  • added store of window scroll position and preventing scroll on document on fullscreen mode
  • added event-listener for escape key on keyboard for switching off the full-screen
  • scss is written in BEM, using some utility classes.
  • in order to keep size of markdown_parser_spec.rb below 250 lines, divide it into two files.
  • added padding for scrolled code on right side

This is how highlight block was before: before

This is after:

after2

after

after3

Related Tickets & Documents

Closes #8990

QA Instructions, Screenshots, Recordings

  • add different code blocks to the page
  • hover over code blocks to see the fullscreen button
  • click on button to enter fullscreen mode
  • click on button back / press 'escape' button

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

PS: I hope this pull-request will be helpful:)

Akshay Mahajan

Fix missing category in delete draft listing URL #10809

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [x] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

The JSON for listings on the listing dashboard page is missing the category key which causes an undefined in the delete listing URL. This PR adds the category key in the JSON.

Related Tickets & Documents

Fixes #10800

QA Instructions, Screenshots, Recordings

Before

Before

After

After

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

&

Remove flare tag from title and hightlight it within the tags row #10528

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [x] Optimization
  • [ ] Documentation Update

Description

This PR does 2 things:

  1. Remove the Flare Tag from the post title.
  2. Moves the flare tag to the first position within the list of tags and highlights it.

Related Tickets & Documents

Closes #10523

QA Instructions, Screenshots, Recordings

image

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

Jean-Francis Bastien

API - New endpoint to retrieve the articles in the reading list of the authenticated user #10540

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [x] Documentation Update

Description

Add a new endpoint in the DEV API to retrieve the reading list articles for the authenticated user.

GET api/articles/me/readinglist

Related Tickets & Documents

This feature was requested in Issue #6755.

QA Instructions, Screenshots, Recordings

You can try the new API endpoint via a curl command with a valid api-key.

curl -H "api-key: API-KEY" http://localhost:3000/api/readinglist 
Enter fullscreen mode Exit fullscreen mode

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [x] docs.forem.com/api
  • [ ] readme
  • [ ] no documentation needed

What gif best describes this PR or how it makes you feel?

Cat reading

Diogo Osório

Introduce /api/profile_images/:username endpoint #10547

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

This PR aims to introduce the operation GET /api/profile_images/:username to the API.

I struggled a bit with what the contract for the operation should be (as this isn't a "resource" per se), I ended up keeping it simple and re-using the structure I saw throughout the rest of the API, when dealing with profile images:

{
  "type_of": "profile_image",
  "profile_image": "/uploads/organization/profile_image/be5e87e9-5b77-40ea-81e8-dd10c6d01146.png",
  "profile_image_90": "/uploads/organization/profile_image/be5e87e9-5b77-40ea-81e8-dd10c6d01146.png"
}
Enter fullscreen mode Exit fullscreen mode

Having said that, I'm happy to refactor the contract to whatever the maintainers believe it to be the correct way to represent a profile image in this endpoint - I just ask for concrete example of what the response's payload should look like 😄 .

Related Tickets & Documents

https://github.com/forem/forem/issues/10132

QA Instructions, Screenshots, Recordings

curl "http://localhost:3000/api/profile_images/:username"

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [x] docs.forem.com
  • [ ] readme
  • [ ] no documentation needed

Karin Hendrikse

replace Envfile with env_sample and reference env file in auth docs #10864

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [x] Documentation Update

Description

While trying to set up the project locally I had trouble understanding some parts of the documentation.

I specifically added small pieces to the auth documentation about the fact that the variables should be in the .env file. I understand that it might be clear for those of us with a bunch of experience but hopefully it can help out juniors like me as well.

I also saw references to Envfile, and while maybe this word was used to refer to the .env_sample file, I think it might be clearer to specifically reference that file then.

Related Tickets & Documents

#10849

QA Instructions, Screenshots, Recordings

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [x] docs.forem.com
  • [ ] readme
  • [ ] no documentation needed

What gif best describes this PR or how it makes you feel?

dog is interested yet seems confused

Shubhankar Kanchan Gupta

Add rails dbconsole #10861

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [x] Documentation Update

Description

Adds rails dbconsole to open up database terminal, and explains why it is a better alternative.

Related Tickets & Documents

Fixes #10843

QA Instructions, Screenshots, Recordings

Screenshot from 2020-10-15 13-43-37

Added tests?

  • [ ] yes
  • [x] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [x] docs.forem.com
  • [ ] readme
  • [ ] no documentation needed

&

new liquid tag - dotnetfiddle #10788

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

This PR adds a new liquid tag, dotnetfiddle.

Related Tickets & Documents

Fixes #10402

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [x] docs.forem.com
  • [ ] readme
  • [ ] no documentation needed

PS : Apologies for the delay

Alexis Moody

Adds a new admin setting for experience levels. #10870

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

These admin settings are used in the post management UI to determine the range of experience. These values fallback to the ones we currently see in DEV, "Total Newbies" and "Senior Devs". There is also a removal of the word coding when talking about experience level, since the context for each forem instance should be implied when referencing experience.

Related Tickets & Documents

Closes #10845

QA Instructions, Screenshots, Recordings

  • Verify that the fallback values of 'Total Newbies' and 'Senior Devs' are present before testing the new functionality
  • As an admin with a config update role navigate to /admin/config
  • Toggle the Community Content section and observe there are two new fields at the bottom, Experience Low/High
  • Update those values with any text and save the config
  • Then, create a post and publish it
  • In your personal dashboard, click manage to view a post's experience level and observe that the saved config values are there. There should be no changes in setting the experience level of a post.
  • Navigate to /settings/ux and observe that under Content Customization the text now reads What is your approximate experience level (1-5)?

UX Settings:

Screen Shot 2020-10-15 at 3 26 01 PM

Admin Config:

Screen Shot 2020-10-15 at 3 26 32 PM

Post Management:

Screen Shot 2020-10-15 at 3 27 00 PM

Added tests?

  • [x] yes
  • [ ] no, because they aren't needed
  • [ ] no, because I need help

Added to documentation?

  • [ ] docs.forem.com
  • [ ] readme
  • [x] no documentation needed

[optional] Are there any post deployment tasks we need to perform?

Edit: We need to add the values we want to display in DEV's admin dashboard to keep "Senior Devs" instead of the newly included defaults.

[optional] What gif best describes this PR or how it makes you feel?

kim kardashian west saying "I wish everyone could experience this"

Daniel Chick

Handle Ten X Theme #231

What type of PR is this? (check all applicable)

  • [ ] Refactor
  • [x] Feature
  • [ ] Bug Fix
  • [ ] Documentation Update

Description

Added a check for the Ten X dark theme.

I noticed there is quite a bit of the project was refactored in #229 so once that is merged I will work on more proper theming capability.

Related Tickets & Documents

Closes #230

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Simulator Screen Shot - iPhone 11 Pro - 2020-10-04 at 19 16 21

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?


&

Update dependencies #233

What type of PR is this? (check all applicable)

  • [x] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Documentation Update

Description

Simply updating the dependency versions

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

  • [ ] docs.dev.to
  • [ ] readme
  • [x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

Thanks again for improving both Forem and the broader open source community by participating in Hacktoberfest. Happy coding!

Top comments (1)

Collapse
 
graciegregory profile image
Gracie Gregory (she/her)

Thank you to all the contributors! Great work.