Skip to content

Commit 0941fd1

Browse files
committed
fix image paths in blog post
1 parent 01d09e5 commit 0941fd1

File tree

1 file changed

+98
-0
lines changed

1 file changed

+98
-0
lines changed
Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: "GSoC '25 Week 02 Update by Saumya Shahi"
3+
excerpt: "This week focused on documenting the brick tree structure, refining SVG path generation, and learning testing tools like Storybook."
4+
category: "DEVELOPER NEWS"
5+
date: "2025-06-14"
6+
slug: "2025-06-14-gsoc-25-saumya-shahi-week02"
7+
author: "@/constants/MarkdownFiles/authors/saumyashahi.md"
8+
tags: "gsoc25,sugarlabs,week02,saumya-shahi"
9+
image: "assets/Images/GSOC.png"
10+
---
11+
12+
<!-- markdownlint-disable -->
13+
14+
# Week 02 Progress Report by Saumya Shahi
15+
16+
**Project:** [Masonry Module - Music Blocks v4](https://github.com/sugarlabs/musicblocks-v4)
17+
**Mentors:** [Anindya Kundu](https://github.com/meganindya/)
18+
**Assisting Mentors:** [Walter Bender](https://github.com/walterbender), [Devin Ulibarri](https://github.com/pikurasa)
19+
**Reporting Period:** 2025-06-08 – 2025-06-14
20+
21+
---
22+
23+
## Goals for This Week
24+
25+
- Refine and complete configuration-driven rendering logic.
26+
- Test rendering of multiple brick types and validate correctness using sample input.
27+
- Document how brick configurations and connections should be modeled.
28+
- Start building foundational elements for brick tree rendering.
29+
30+
---
31+
32+
## This Week's Achievements
33+
34+
1. **Dynamic SVG Brick Rendering**
35+
- Finalized implementation for rendering SVG paths dynamically based on type-specific configurations.
36+
- Different bricks (e.g., nested bricks, simple bricks, expression bricks) now render accurately according to their label sizes, scale, and other config props.
37+
- Output adjusts responsively with different numbers of arguments, notches, and labels.
38+
39+
2. **Rendered Output Validation & Screenshots**
40+
- Verified each visual brick against expected path geometry.
41+
- Screenshots below show rendered bricks:
42+
- ![Simple Brick](public\assets\Images\simple-bricks.png)
43+
- ![Brick with Arguments](public\assets\Images\expression-bricks.png)
44+
- ![Nested Brick](public\assets\Images\nested-bricks.png)
45+
46+
2. **Bug Fix: Left SVG Path Issue**
47+
48+
* Fixed a critical error in path rendering for bricks — the left edge generation wasn’t calculating offsets correctly.
49+
* Cleaned up related path logic to improve readability and scalability for future nested structures.
50+
51+
3. **Storybook & Testing Familiarization**
52+
53+
* Understood how Storybook is used for visual component testing.
54+
* Learnt how to set up unit tests and component test files.
55+
* Setup groundwork for adding future test cases.
56+
57+
---
58+
59+
## Challenges & How I Overcame Them
60+
61+
- **Challenge:** Mapping the brick tree vs AST was initially confusing.
62+
**Solution:** Spent focused time breaking down what each structure is supposed to represent and clarified use cases.
63+
64+
- **Challenge:** SVG left path errors were hard to trace visually.
65+
**Solution:** Used visual diffing and debugger to narrow down bounding box and stroke-width miscalculations.
66+
67+
---
68+
69+
## Key Learnings
70+
71+
- Improved understanding of **SVG rendering logic** and path construction.
72+
- Got hands-on exposure to **Storybook**, and how visual tests can improve modular development.
73+
- Understood the **difference between data representations** for view (brick tree) and logic (AST).
74+
75+
76+
---
77+
78+
## Next Week's Roadmap
79+
80+
- Start implementing **multi-brick layout rendering**: bricks with children rendered as a tree in the workspace.
81+
- Introduce bounding box calculation utilities for each rendered brick.
82+
- Plan initial strategy for brick connection detection and snapping logic.
83+
84+
---
85+
86+
## Resources & References
87+
88+
- **Brick Rendering:** [Google Doc](https://docs.google.com/document/d/1UJXh3734S138BoTsGulzeTlZXstyvWd6syJK2eclMKI/edit?tab=t.dxoea5urpxyl#heading=h.wa29sjgrasfn)
89+
- **SVG Path Reference:** [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)
90+
- **Playground for Manual SVG Paths:** [SVG Path Editor](https://yqnn.github.io/svg-path-editor/)
91+
92+
---
93+
94+
## Acknowledgments
95+
96+
Thank you to my mentors, the Sugar Labs community, and fellow GSoC contributors for support and insightful feedback throughout the week.
97+
98+
---

0 commit comments

Comments
 (0)