@ujjan/built-badge 0.1.0 → 0.1.1

package/README.md

@@ -4,11 +4,33 @@ Reusable "Built at Ujjan.com" badge kit for adding Ujjan attribution to project
 
 ## Rule
 
-Place the badge inside a project's footer component or footer partial only.
+Render the badge slot from a project's footer component or footer partial only, immediately before the actual `<footer>` element.
 If a page does not render a footer, it should not render this badge.
 
+The slot intentionally sits outside the footer box while remaining owned by the footer component. It reserves space above the footer so page content does not collide with the badge. The badge uses its own equal right and bottom gap instead of the project's regular content gutter.
+
 ## Quick Start
 
+Install the package:
+
+```bash
+npm install @ujjan/built-badge
+```
+
+Then copy or import the assets/snippets you need from the installed package:
+
+```txt
+node_modules/@ujjan/built-badge/dist/ujjan-badge.css
+node_modules/@ujjan/built-badge/dist/ujjan-badge.png
+node_modules/@ujjan/built-badge/snippets/html.html
+node_modules/@ujjan/built-badge/snippets/php.php
+node_modules/@ujjan/built-badge/snippets/react.tsx
+```
+
+For plain HTML or legacy PHP projects, copying the CSS, PNG, and snippet into the project is usually the simplest option.
+
+### Manual Copy
+
 Copy these files into your project:
 
 - `dist/ujjan-badge.css`
@@ -20,19 +42,25 @@ Load the CSS from the page or layout that owns the footer:
 <link rel="stylesheet" href="/assets/ujjan-badge.css">
 ```
 
-Then place the badge markup inside the footer:
+Then place the badge slot immediately before the footer:
 
 ```html
-<a
-  class="ujjan-built-badge"
-  href="https://ujjan.com/work/promptiles"
-  target="_blank"
-  rel="noopener noreferrer"
-  aria-label="Built at Ujjan.com"
->
-  <img src="/assets/ujjan-badge.png" alt="" width="25" height="30">
-  <span>Built at Ujjan.com</span>
-</a>
+<div class="ujjan-built-badge-slot">
+  <a
+    class="ujjan-built-badge"
+    href="https://ujjan.com/work/promptiles"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="Built at Ujjan.com"
+  >
+    <img class="ujjan-built-badge__logo" src="/assets/ujjan-badge.png" alt="" width="25" height="30">
+    <span class="ujjan-built-badge__text">Built at Ujjan.com</span>
+  </a>
+</div>
+
+<footer>
+  ...
+</footer>
 ```
 
 Use the project case-study slug after `/work/`, for example:
@@ -49,11 +77,12 @@ https://ujjan.com
 
 ## Plain HTML
 
-Use [snippets/html.html](snippets/html.html) inside your footer:
+Use [snippets/html.html](snippets/html.html) immediately before your footer, from the same footer partial/component:
 
 ```html
+<!-- Ujjan badge slot goes here -->
 <footer>
-  <!-- Ujjan badge goes here -->
+  ...
 </footer>
 ```
 
@@ -70,20 +99,29 @@ If `$ujjanCaseStudySlug` is not set or is empty, the badge links to `https://ujj
 
 ## React
 
-Copy [snippets/react.tsx](snippets/react.tsx) into your component library, import the CSS once, and render it from your footer component:
+Install the package:
+
+```bash
+npm install @ujjan/built-badge
+```
+
+For the current version, copy [snippets/react.tsx](snippets/react.tsx) into your component library, import the CSS once, and render the slot from your footer component before the footer element:
 
 ```tsx
-import "./ujjan-badge.css";
-import { UjjanBuiltBadge } from "./UjjanBuiltBadge";
+import "@ujjan/built-badge/css";
+import { UjjanBuiltBadgeSlot } from "./UjjanBuiltBadge";
 
 export function Footer() {
   return (
-    <footer>
-      <UjjanBuiltBadge
+    <>
+      <UjjanBuiltBadgeSlot
         caseStudySlug="promptiles"
         logoSrc="/assets/ujjan-badge.png"
       />
-    </footer>
+      <footer>
+        ...
+      </footer>
+    </>
   );
 }
 ```
@@ -91,7 +129,7 @@ export function Footer() {
 Omit `caseStudySlug` until the case study is live:
 
 ```tsx
-<UjjanBuiltBadge logoSrc="/assets/ujjan-badge.png" />
+<UjjanBuiltBadgeSlot logoSrc="/assets/ujjan-badge.png" />
 ```
 
 ## Files
@@ -108,6 +146,9 @@ The CSS uses custom properties so each project can tune the badge without editin
 
 ```css
 :root {
+  --ujjan-badge-slot-min-height: 116px;
+  --ujjan-badge-slot-edge-gap: 36px;
+  --ujjan-badge-slot-mobile-edge-gap: 16px;
   --ujjan-badge-bg: #1e2126;
   --ujjan-badge-border: #505050;
   --ujjan-badge-text: #fff;

package/dist/ujjan-badge.css

@@ -1,3 +1,15 @@
+.ujjan-built-badge-slot {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  justify-content: var(--ujjan-badge-slot-justify, flex-end);
+  width: 100%;
+  min-height: var(--ujjan-badge-slot-min-height, 116px);
+  padding: var(--ujjan-badge-slot-top-gap, 32px)
+    var(--ujjan-badge-slot-edge-gap, 36px)
+    var(--ujjan-badge-slot-edge-gap, 36px);
+}
+
 .ujjan-built-badge {
   position: relative;
   display: inline-flex;
@@ -15,6 +27,7 @@
   text-decoration: none;
   cursor: pointer;
   isolation: isolate;
+  box-sizing: border-box;
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
@@ -97,3 +110,12 @@
     transition: none;
   }
 }
+
+@media (max-width: 520px) {
+  .ujjan-built-badge-slot {
+    justify-content: var(--ujjan-badge-slot-mobile-justify, center);
+    padding-right: var(--ujjan-badge-slot-mobile-edge-gap, 16px);
+    padding-left: var(--ujjan-badge-slot-mobile-edge-gap, 16px);
+    padding-bottom: var(--ujjan-badge-slot-mobile-edge-gap, 16px);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ujjan/built-badge",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Reusable footer badge kit for Built at Ujjan.com attribution.",
   "homepage": "https://ujjan.com",
   "repository": {

package/snippets/html.html

@@ -1,12 +1,14 @@
-<!-- Place this inside the project's footer only. -->
+<!-- Place this immediately before the project's footer, inside the footer component/partial only. -->
 <!-- Use https://ujjan.com when the project case study is not published yet. -->
-<a
-  class="ujjan-built-badge"
-  href="https://ujjan.com/work/promptiles"
-  target="_blank"
-  rel="noopener noreferrer"
-  aria-label="Built at Ujjan.com"
->
-  <img class="ujjan-built-badge__logo" src="/assets/ujjan-badge.png" alt="" width="25" height="30">
-  <span class="ujjan-built-badge__text">Built at Ujjan.com</span>
-</a>
+<div class="ujjan-built-badge-slot">
+  <a
+    class="ujjan-built-badge"
+    href="https://ujjan.com/work/promptiles"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="Built at Ujjan.com"
+  >
+    <img class="ujjan-built-badge__logo" src="/assets/ujjan-badge.png" alt="" width="25" height="30">
+    <span class="ujjan-built-badge__text">Built at Ujjan.com</span>
+  </a>
+</div>

package/snippets/php.php

@@ -1,6 +1,7 @@
 <?php
 /**
- * Place this partial inside the project's footer only.
+ * Place this partial immediately before the project's footer,
+ * inside the footer component/template only.
  *
  * Optional:
  * $ujjanCaseStudySlug = 'promptiles';
@@ -16,13 +17,15 @@ $ujjanBadgeHref = $ujjanBadgeSlug !== ''
   ? $ujjanBadgeBaseUrl . '/work/' . rawurlencode($ujjanBadgeSlug)
   : $ujjanBadgeBaseUrl;
 ?>
-<a
-  class="ujjan-built-badge"
-  href="<?= htmlspecialchars($ujjanBadgeHref, ENT_QUOTES, 'UTF-8') ?>"
-  target="_blank"
-  rel="noopener noreferrer"
-  aria-label="Built at Ujjan.com"
->
-  <img class="ujjan-built-badge__logo" src="/assets/ujjan-badge.png" alt="" width="25" height="30">
-  <span class="ujjan-built-badge__text">Built at Ujjan.com</span>
-</a>
+<div class="ujjan-built-badge-slot">
+  <a
+    class="ujjan-built-badge"
+    href="<?= htmlspecialchars($ujjanBadgeHref, ENT_QUOTES, 'UTF-8') ?>"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label="Built at Ujjan.com"
+  >
+    <img class="ujjan-built-badge__logo" src="/assets/ujjan-badge.png" alt="" width="25" height="30">
+    <span class="ujjan-built-badge__text">Built at Ujjan.com</span>
+  </a>
+</div>

package/snippets/react.tsx

@@ -4,6 +4,10 @@ type UjjanBuiltBadgeProps = {
   logoSrc?: string;
 };
 
+type UjjanBuiltBadgeSlotProps = UjjanBuiltBadgeProps & {
+  slotClassName?: string;
+};
+
 const UJJAN_BASE_URL = "https://ujjan.com";
 
 function getUjjanBadgeHref(caseStudySlug?: string) {
@@ -42,3 +46,16 @@ export function UjjanBuiltBadge({
     </a>
   );
 }
+
+export function UjjanBuiltBadgeSlot({
+  slotClassName = "",
+  ...badgeProps
+}: UjjanBuiltBadgeSlotProps) {
+  const classes = ["ujjan-built-badge-slot", slotClassName].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes}>
+      <UjjanBuiltBadge {...badgeProps} />
+    </div>
+  );
+}