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.
Contribute to Forem this Hacktoberfest!
Christina Gorton for The DEV Team ・ Oct 2 '20
In no particular order, here are the folks who made commits this week, their GitHub profiles, and their merged PRs.
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
- Signup as new user to the app
- Go to home feed
- 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
- Run storybook
- 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
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:
Fixed:
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?
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?
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 :
after :
Added tests?
no
Added to documentation?
no
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:
This is after:
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:)
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
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:
- Remove the Flare Tag from the post title.
- 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
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
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
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?
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"
}
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
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?
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
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
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:
Admin Config:
Post Management:
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?
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)
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)
Thank you to all the contributors! Great work.