Add WWW-4 'Import your data' static mock page#13
Merged
NguyenCuong1989 merged 3 commits intoMay 17, 2026
Conversation
Review Summary by QodoAdd WWW-4 import-your-data static mock page
WalkthroughsDescription• Add import-your-data.html static mock page with gradient hero • Implement four SVG integration logos (Asana, Jira, Linear, GitHub) • Include migration links and preview image panel section • Update README.md with documentation for new mock Diagramflowchart LR
A["Gradient Hero<br/>with Logos"] --> B["Content Section"]
B --> C["Migration Links"]
B --> D["Preview Panel"]
E["README.md"] --> F["Documentation<br/>Updated"]
File Changes1. import-your-data.html
|
Hướng dẫn dành cho ReviewerThêm một trang mock HTML tĩnh độc lập mới cho hình ảnh Linear WWW-4 "Import your data", bao gồm hero gradient với logo các tích hợp, liên kết tài nguyên migration và một panel xem trước, đồng thời ghi lại trong README cùng với các mock hiện có. Lưu đồ cấu trúc HTML của import-your-data.htmlgraph TD
html["html"] --> head["head"]
html --> body["body"]
head --> meta_charset["meta charset"]
head --> meta_viewport["meta viewport"]
head --> title_el["title Import your data"]
head --> style_el["style (page CSS)"]
body --> hero_header["header.hero (gradient background)"]
body --> main_content["main.content"]
hero_header --> logo_row["div.logo-row"]
logo_row --> logo_asana["svg.logo Asana"]
logo_row --> logo_jira["svg.logo Jira"]
logo_row --> logo_linear["svg.logo Linear"]
logo_row --> logo_github["svg.logo GitHub"]
main_content --> h1_title["h1 Import your data"]
main_content --> p_lead["p.lead Sync data between Linear and your other tools."]
main_content --> links_div["div.links Migration resources"]
main_content --> panel_section["section.panel Migration preview"]
links_div --> link_pitch["a Pitch Linear"]
links_div --> link_pilot["a Run a pilot"]
links_div --> link_migration_guide["a Migration guide"]
panel_section --> preview_img["img Linear migration workflow"]
Thay đổi ở cấp độ file
Mẹo và câu lệnhTương tác với Sourcery
Tùy chỉnh trải nghiệm của bạnTruy cập dashboard để:
Nhận hỗ trợ
Original review guide in EnglishReviewer's GuideAdds a new standalone static HTML mock page for the Linear WWW-4 "Import your data" visual, including gradient hero with integration logos, migration resource links, and a preview panel, and documents it in the README alongside existing mocks. Flow diagram for the HTML structure of import-your-data.htmlgraph TD
html["html"] --> head["head"]
html --> body["body"]
head --> meta_charset["meta charset"]
head --> meta_viewport["meta viewport"]
head --> title_el["title Import your data"]
head --> style_el["style (page CSS)"]
body --> hero_header["header.hero (gradient background)"]
body --> main_content["main.content"]
hero_header --> logo_row["div.logo-row"]
logo_row --> logo_asana["svg.logo Asana"]
logo_row --> logo_jira["svg.logo Jira"]
logo_row --> logo_linear["svg.logo Linear"]
logo_row --> logo_github["svg.logo GitHub"]
main_content --> h1_title["h1 Import your data"]
main_content --> p_lead["p.lead Sync data between Linear and your other tools."]
main_content --> links_div["div.links Migration resources"]
main_content --> panel_section["section.panel Migration preview"]
links_div --> link_pitch["a Pitch Linear"]
links_div --> link_pilot["a Run a pilot"]
links_div --> link_migration_guide["a Migration guide"]
panel_section --> preview_img["img Linear migration workflow"]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Code Review by Qodo
1. Remote image dependency
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - mình đã tìm thấy 1 vấn đề và để lại một số nhận xét tổng quan:
- Phần header
.herocóaria-labelnhưng phần tử con.logo-rowlại được đánh dấuaria-hidden="true"trong khi từng SVG bên trong lại córole="img"vàaria-label. Hãy cân nhắc hoặc là biến các logo thành thuần trang trí (không dùng ARIA trên các SVG) hoặc bỏaria-hiddenđể công cụ hỗ trợ tiếp cận có thể truy cập các nhãn, rồi sau đó quyết định xemaria-labeltrên header có còn cần thiết hay không. - Hình ảnh xem trước kích thước lớn, nguồn ngoài trong
.panelcó thể được cải thiện bằng cách thêmloading="lazy"để tránh tải sớm không cần thiết và nâng cao hiệu năng cảm nhận khi mock này được mở rộng hoặc nhúng vào một trang lớn hơn.
Prompt cho tác nhân AI
Hãy xử lý các nhận xét từ code review này:
## Nhận xét tổng quan
- Phần header `.hero` có `aria-label` nhưng phần tử con `.logo-row` lại được đánh dấu `aria-hidden="true"` trong khi từng SVG bên trong lại có `role="img"` và `aria-label`. Hãy cân nhắc hoặc là biến các logo thành thuần trang trí (không dùng ARIA trên các SVG) hoặc bỏ `aria-hidden` để công cụ hỗ trợ tiếp cận có thể truy cập các nhãn, rồi sau đó quyết định xem `aria-label` trên header có còn cần thiết hay không.
- Hình ảnh xem trước kích thước lớn, nguồn ngoài trong `.panel` có thể được cải thiện bằng cách thêm `loading="lazy"` để tránh tải sớm không cần thiết và nâng cao hiệu năng cảm nhận khi mock này được mở rộng hoặc nhúng vào một trang lớn hơn.
## Nhận xét chi tiết
### Nhận xét 1
<location path="import-your-data.html" line_range="138-140" />
<code_context>
+ <a href="https://linear.app/switch/migration-guide">Migration guide</a>
+ </div>
+
+ <section class="panel" aria-label="Linear migration preview">
+ <img src="https://uploads.linear.app/fe63b3e2-bf87-46c0-8784-cd7d639287c8/191f6985-8562-4f62-9482-a094b69c4756/0e4ff63b-3da2-4699-912b-04afb68511e8" alt="Linear migration workflow" />
+ </section>
+ </main>
</code_context>
<issue_to_address>
**suggestion (performance):** Hãy cân nhắc thêm lazy loading và khai báo rõ kích thước cho hình ảnh nguồn ngoài này để cải thiện hiệu năng và độ ổn định layout.
Hiện tại, hình ảnh nguồn ngoài kích thước lớn này đang được tải sớm (eager) và thiếu thông tin gợi ý về kích thước. Hãy thêm `loading="lazy"` (và tùy chọn `decoding="async"`) và khai báo `width`/`height` hoặc `aspect-ratio` trong CSS để cải thiện tốc độ tải ban đầu và ngăn việc layout bị dịch chuyển.
```suggestion
<section class="panel" aria-label="Linear migration preview">
<img
src="https://uploads.linear.app/fe63b3e2-bf87-46c0-8784-cd7d639287c8/191f6985-8562-4f62-9482-a094b69c4756/0e4ff63b-3da2-4699-912b-04afb68511e8"
alt="Linear migration workflow"
loading="lazy"
decoding="async"
style="aspect-ratio: 16 / 9; width: 100%; height: auto;"
/>
</section>
```
</issue_to_address>Sourcery miễn phí cho mã nguồn mở - nếu bạn thấy hữu ích, hãy cân nhắc chia sẻ ✨
Original comment in English
Hey - I've found 1 issue, and left some high level feedback:
- The
.heroheader hasaria-labelbut its child.logo-rowis markedaria-hidden="true"while the individual SVGs haverole="img"andaria-label—consider either making the logos purely decorative (no ARIA on SVGs) or removingaria-hiddenso assistive tech can access the labels, and then decide whether the header’saria-labelis still needed. - The large external preview image in the
.panelcould benefit fromloading="lazy"to avoid unnecessary eager loading and improve perceived performance when this mock is extended or embedded in a larger page.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The `.hero` header has `aria-label` but its child `.logo-row` is marked `aria-hidden="true"` while the individual SVGs have `role="img"` and `aria-label`—consider either making the logos purely decorative (no ARIA on SVGs) or removing `aria-hidden` so assistive tech can access the labels, and then decide whether the header’s `aria-label` is still needed.
- The large external preview image in the `.panel` could benefit from `loading="lazy"` to avoid unnecessary eager loading and improve perceived performance when this mock is extended or embedded in a larger page.
## Individual Comments
### Comment 1
<location path="import-your-data.html" line_range="138-140" />
<code_context>
+ <a href="https://linear.app/switch/migration-guide">Migration guide</a>
+ </div>
+
+ <section class="panel" aria-label="Linear migration preview">
+ <img src="https://uploads.linear.app/fe63b3e2-bf87-46c0-8784-cd7d639287c8/191f6985-8562-4f62-9482-a094b69c4756/0e4ff63b-3da2-4699-912b-04afb68511e8" alt="Linear migration workflow" />
+ </section>
+ </main>
</code_context>
<issue_to_address>
**suggestion (performance):** Consider adding lazy loading and explicit dimensions to the external image to improve performance and layout stability.
This large external image currently loads eagerly and lacks size hints. Add `loading="lazy"` (and optionally `decoding="async"`) and define `width`/`height` or a CSS `aspect-ratio` to improve initial load and prevent layout shift.
```suggestion
<section class="panel" aria-label="Linear migration preview">
<img
src="https://uploads.linear.app/fe63b3e2-bf87-46c0-8784-cd7d639287c8/191f6985-8562-4f62-9482-a094b69c4756/0e4ff63b-3da2-4699-912b-04afb68511e8"
alt="Linear migration workflow"
loading="lazy"
decoding="async"
style="aspect-ratio: 16 / 9; width: 100%; height: auto;"
/>
</section>
```
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 37a4fad5e7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| </div> | ||
|
|
||
| <section class="panel" aria-label="Linear migration preview"> | ||
| <img src="https://uploads.linear.app/fe63b3e2-bf87-46c0-8784-cd7d639287c8/191f6985-8562-4f62-9482-a094b69c4756/0e4ff63b-3da2-4699-912b-04afb68511e8" alt="Linear migration workflow" /> |
There was a problem hiding this comment.
The mock’s main preview relies on a remote uploads.linear.app URL, so the page loses its most important visual element whenever the viewer is offline, behind a restricted network, or if that upload URL is removed/rotated. Because this page is meant to be a standalone local review artifact, hotlinking this asset makes the mock brittle in common review environments; checking the image into the repo (or embedding it as a data URI) would keep the mock reproducible.
Useful? React with 👍 / 👎.
Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a standalone static HTML mock for the Linear "Import your data" visual (WWW-4) and documents it in the README.
Changes:
- New
import-your-data.htmlwith gradient hero, four SVG integration logos, migration links, and a preview image panel. - README updated with a new section pointing reviewers to the new mock file.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| import-your-data.html | New static mock page implementing the WWW-4 design. |
| README.md | Adds a section documenting how to view the new mock. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+99
to
+118
| <header class="hero" aria-label="Integration logos on gradient background"> | ||
| <div class="logo-row" aria-hidden="true"> | ||
| <svg viewBox="0 0 64 64" class="logo" role="img" aria-label="Asana"> | ||
| <circle cx="32" cy="14" r="9" fill="currentColor" /> | ||
| <circle cx="18" cy="38" r="9" fill="currentColor" /> | ||
| <circle cx="46" cy="38" r="9" fill="currentColor" /> | ||
| </svg> | ||
|
|
||
| <svg viewBox="0 0 64 64" class="logo" role="img" aria-label="Jira"> | ||
| <path fill="currentColor" d="M32 6 58 32 32 58 6 32zm0 13.6L19.6 32 32 44.4 44.4 32z" /> | ||
| </svg> | ||
|
|
||
| <svg viewBox="0 0 64 64" class="logo" role="img" aria-label="Linear"> | ||
| <rect x="8" y="8" width="48" height="48" rx="15" ry="15" fill="none" stroke="currentColor" stroke-width="6" /> | ||
| <path d="M17 17 47 47" stroke="currentColor" stroke-width="7" stroke-linecap="round" /> | ||
| <path d="M26 17h21" stroke="currentColor" stroke-width="7" stroke-linecap="round" /> | ||
| <path d="M17 47h21" stroke="currentColor" stroke-width="7" stroke-linecap="round" /> | ||
| </svg> | ||
|
|
||
| <svg viewBox="0 0 64 64" class="logo" role="img" aria-label="GitHub"> |
|
|
||
| <section class="panel" aria-label="Linear migration preview"> | ||
| <img | ||
| src="https://uploads.linear.app/fe63b3e2-bf87-46c0-8784-cd7d639287c8/191f6985-8562-4f62-9482-a094b69c4756/0e4ff63b-3da2-4699-912b-04afb68511e8" |
Comment on lines
+118
to
+124
| <svg viewBox="0 0 64 64" class="logo" role="img" aria-label="GitHub"> | ||
| <circle cx="32" cy="32" r="30" fill="currentColor" /> | ||
| <path | ||
| d="M32.2 17.5c-8.8 0-15.9 7.1-15.9 15.8 0 6.9 4.5 12.7 10.8 14.8.8.1 1.1-.4 1.1-.8v-2.9c-4.4.9-5.3-1.8-5.3-1.8-.7-1.8-1.7-2.2-1.7-2.2-1.4-.9.1-.9.1-.9 1.5.1 2.4 1.6 2.4 1.6 1.4 2.3 3.7 1.7 4.6 1.3.1-1 .5-1.7 1-2.1-3.6-.4-7.4-1.8-7.4-8 0-1.8.6-3.3 1.6-4.4-.2-.4-.7-2 .1-4.3 0 0 1.3-.4 4.4 1.7a15.1 15.1 0 0 1 8 0c3-2.1 4.3-1.7 4.3-1.7.9 2.3.4 3.9.2 4.3 1 1.1 1.6 2.6 1.6 4.4 0 6.2-3.8 7.6-7.4 8 .6.5 1.1 1.4 1.1 2.8v4.1c0 .5.3 1 .9.8a15.8 15.8 0 0 0 10.8-14.8c0-8.7-7.1-15.8-15.9-15.8Z" | ||
| fill="#8d62d8" | ||
| /> | ||
| </svg> |
Comment on lines
+147
to
+150
|
|
||
| ## 🌐 Import your data mock | ||
|
|
||
| For the Linear `WWW-4` visual, open `import-your-data.html` in a browser to see the recreated gradient hero, integration logos, and migration preview section. |
| alt="Linear migration workflow" | ||
| loading="lazy" | ||
| decoding="async" | ||
| style="aspect-ratio: 16 / 9; width: 100%; height: auto;" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
WWW-4that recreates the gradient hero, integration logos, migration links, and a preview panel so designers and engineers can review the page locally.Description
import-your-data.html, a self-contained static mock that implements the gradient hero, four SVG integration logos (Asana, Jira, Linear, GitHub), migration links, and a preview image panel.README.mdto document the newimport-your-data.htmlmock alongside the existing mocks.Testing
python -m http.server 8000and verifiedcurl -I http://127.0.0.1:8000/import-your-data.htmlreturned HTTP 200 (success).artifacts/import-your-data.png(success).xmllint --html --noout import-your-data.htmlbut thexmllintcommand was not available in the environment (failed).curl -I -L https://linear.app/switch/migration-guidewhich returned HTTP 200 (success).Codex Task
Summary by Sourcery
Thêm một trang mock HTML tĩnh mới cho phần hình ảnh "Import your data" của Linear và ghi lại cách truy cập trang này cùng với các mock hiện có.
Tính năng mới:
import-your-data.html, một trang tĩnh độc lập tái tạo phần hero gradient, logo các tích hợp, liên kết migration và bảng xem trước cho trải nghiệm "Import your data" của Linear.Tài liệu:
Original summary in English
Summary by Sourcery
Add a new static HTML mock page for the Linear "Import your data" visual and document how to access it alongside existing mocks.
New Features:
Documentation: