Release 0.3
As we progress through the world of open source and my course about open source, we have reached and completed another milestone of the course, which is Release 0.3. In this we were instructed to work on 2 PR's from a repo that you already experienced previously or a new one. So I have chosen the same one from last Release 0.2, The KEC Computer Club.
What i did was, i created a new layout so that it can be used globally whenever they have a new blog post coming in. Which features the use of cards, and couple of styling to make it visually appealing to read and overall improve the clarity of the website.
Screenshot of updated page:
In this screenshot we can see the interface which consist of forms, in which title is an input area and content is a textarea. I also added an option to upload an image to the blog post, which also has the feature to remove and add again, if the user didn't like the image they choose at the first time.
Image upload is handled by:
// Handle image upload
imageInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
imagePreview.src = e.target.result;
imagePreview.style.display = 'block';
previewImage.src = e.target.result;
previewImage.style.display = 'block';
removeImageBtn.style.display = 'inline-block';
};
reader.readAsDataURL(file);
}
});
// Remove image
removeImageBtn.addEventListener('click', () => {
imagePreview.src = '';
imagePreview.style.display = 'none';
previewImage.src = '';
previewImage.style.display = 'none';
removeImageBtn.style.display = 'none';
imageInput.value = '';
});
</script>
Also this page features an option to preview the blog post, which will show you title page and the preview of the image uploaded.
// Update title preview
titleInput.addEventListener('input', () => {
previewTitle.textContent = titleInput.value || 'Blog Title Preview';
});
// Update content preview
contentInput.addEventListener('input', () => {
previewContent.textContent = contentInput.value || 'Your blog content will appear here...';
});
// Toggle Preview section
previewBtn.addEventListener('click', () => {
if (blogPreview.style.display === 'none') {
blogPreview.style.display = 'block';
previewBtn.textContent = 'Hide Preview';
} else {
blogPreview.style.display = 'none';
previewBtn.textContent = 'Preview';
}
});
You can see this in action in the below screenshots !
Like i said this PR is also pending to be reviewed, if i get any updates i will surely update it here along with their comments and changes they request.
Conclusion
After all, this was fun, and at the same time, it required time and communication with the repo owners. As I have mentioned in the previous releases, open source is a combination of people from around the world, so it is not expected to have them available any time at our convenience. Its assignment helped me learn more about open source and also the languages. At the end of the day, I am happy to host my contribution on the internet, and it may help others to use the website better.
Links
AJO GEORGE
20-11-2024
SOCIAL SHARE CARD GENERATOR