Skip to content

Add Discord button to the topline#14

Merged
Artifizer merged 1 commit into
constructorfabric:mainfrom
vzhuman:main
Jul 9, 2026
Merged

Add Discord button to the topline#14
Artifizer merged 1 commit into
constructorfabric:mainfrom
vzhuman:main

Conversation

@vzhuman

@vzhuman vzhuman commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

What changed

Discord button have been added to the website top line, nearby Github big blue button.

Pages to review

  • index.html
  • foundation.html
  • elements.html
  • learn.html
  • participate.html
  • privacy-policy.html
  • 404.html
  • styles.css
  • partials.jsx
  • assets/
  • Other:

Preview

A preview URL will be posted automatically by GitHub Actions after CI succeeds. The format is:

https://constructorfabric.github.io/website-previews/pr-<NUMBER>/

If you do not see a preview URL on this PR within a few minutes of pushing, see docs/pr-preview-process.md for troubleshooting.

Screenshots

Required for visual changes. Optional for text-only changes.

Desktop:

Screenshot 2026-07-09 at 1 53 15 PM

Mobile:

Screenshot 2026-07-09 at 1 54 30 PM

Checklist

  • I checked the site locally (Live Preview extension or python3 -m http.server)
  • I listed every affected page above
  • I added screenshots for visual changes
  • I avoided unrelated formatting changes
  • I followed the banned-words and no-emojis conventions in CONTRIBUTING.md

Summary by CodeRabbit

  • New Features
    • Updated the main header and mobile drawer call-to-action to open the Discord invite instead of the GitHub page.
    • Added a Discord icon to the updated call-to-action links.
    • External links now open in a new tab for a smoother browsing experience.

Signed-off-by: vzhuman <vzgrab@gmail.com>
@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

The header and mobile drawer call-to-action links in partials.jsx are changed from linking to the GitHub repository to linking to a Discord invite, each using an inline Discord SVG icon, updated label text, and external-link attributes.

Changes

Discord CTA update

Layer / File(s) Summary
Replace GitHub CTA with Discord CTA
partials.jsx
Header and mobile drawer anchors now link to a Discord invite with target="_blank" rel="noopener noreferrer", using an inline Discord SVG icon and "Discord" text instead of the previous GitHub icon/link.

Estimated code review effort: 1 (Trivial) | ~3 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title is concise and matches the main change: adding a Discord button to the top navigation.
Description check ✅ Passed The description follows the template and includes the required summary, affected page, preview, screenshots, and checklist.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@constructorfabric

Copy link
Copy Markdown

Preview deployment is ready:

https://constructorfabric.github.io/website-previews/pr-14/

This preview is built from the latest commit on this PR. It is regenerated automatically on every push. Old previews are cleaned up after 30 days.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
partials.jsx (1)

103-105: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Extract a reusable DiscordIcon component to match the existing GitHubIcon pattern.

The Discord SVG path is inlined identically in both the header (line 104) and the mobile drawer (line 136), differing only in size (16 vs 18). The codebase already defines a reusable GitHubIcon component (lines 60–66) that accepts a size prop. Extracting a DiscordIcon component would eliminate the duplication and keep the icon path in a single maintainable location.

♻️ Suggested refactor
 window.GitHubIcon = function GitHubIcon({ size = 18 }) {
   return (
     <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
       <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.87-1.37-3.87-1.37-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.24 3.34.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.16 1.18a10.96 10.96 0 0 1 5.75 0c2.2-1.49 3.16-1.18 3.16-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/>
     </svg>
   );
 };
+
+window.DiscordIcon = function DiscordIcon({ size = 18 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
+    </svg>
+  );
+};

Then use it in both locations:

-            <a className="btn btn-primary btn-sm header__cta-btn" href="https://discord.gg/QWHtHGgEdq" target="_blank" rel="noopener noreferrer">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>Discord
+            <a className="btn btn-primary btn-sm header__cta-btn" href="https://discord.gg/QWHtHGgEdq" target="_blank" rel="noopener noreferrer">
+              <DiscordIcon size={16}/>Discord
             </a>
-          <a className="btn btn-on-navy-primary btn-lg" href="https://discord.gg/QWHtHGgEdq" target="_blank" rel="noopener noreferrer">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>Discord
+          <a className="btn btn-on-navy-primary btn-lg" href="https://discord.gg/QWHtHGgEdq" target="_blank" rel="noopener noreferrer">
+            <DiscordIcon size={18}/>Discord
           </a>

Also applies to: 135-137

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@partials.jsx` around lines 103 - 105, The Discord SVG is duplicated in the
header CTA and mobile drawer, so extract it into a reusable DiscordIcon
component to match the existing GitHubIcon pattern. Add the new component
alongside GitHubIcon in partials.jsx, give it a size prop, and replace both
inline SVG usages with the shared component so the path lives in one place and
only the size varies.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@partials.jsx`:
- Around line 103-105: The Discord SVG is duplicated in the header CTA and
mobile drawer, so extract it into a reusable DiscordIcon component to match the
existing GitHubIcon pattern. Add the new component alongside GitHubIcon in
partials.jsx, give it a size prop, and replace both inline SVG usages with the
shared component so the path lives in one place and only the size varies.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: aead8cae-9378-4755-8075-759549bcabdd

📥 Commits

Reviewing files that changed from the base of the PR and between 9d00708 and e07de8f.

📒 Files selected for processing (1)
  • partials.jsx

@Artifizer
Artifizer merged commit 64d092c into constructorfabric:main Jul 9, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants