Skip to content

Commit

Permalink
Reposition Marketing
Browse files Browse the repository at this point in the history
  • Loading branch information
@steven-tey
steven-tey committed Nov 17, 2022
1 parent 8fedec8 commit 06e2c48
Show file tree
Hide file tree
Showing 10 changed files with 254 additions and 317 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<a href="https://dub.sh">
<img alt="Dub – an open-source link shortener SaaS with built-in analytics + free custom domains." src="https://user-images.githubusercontent.com/28986134/200727801-6355c62e-60b5-45d7-a83d-44b11545e471.png">
<img alt="Dub – an open-source link management tool for modern marketing teams to create, share, and track short links." src="https://user-images.githubusercontent.com/28986134/200727801-6355c62e-60b5-45d7-a83d-44b11545e471.png">
<h1 align="center">Dub</h1>
</a>

<p align="center">
An open-source link shortener SaaS with built-in analytics + free custom domains.
An open-source link management tool for modern marketing teams to create, share, and track short links.
</p>

<p align="center">
Expand All @@ -28,7 +28,7 @@

## Introduction

Dub is an open-source link shortener with built-in analytics + free custom domains. Built with [Vercel Edge Functions](http://vercel.com/edge), [Upstash Redis](https://docs.upstash.com/redis), and [Planetscale MySQL](https://planetscale.com/).
Dub is an open-source link management tool for modern marketing teams to create, share, and track short links. Built with [Vercel Edge Functions](http://vercel.com/edge), [Upstash Redis](https://docs.upstash.com/redis), and [Planetscale MySQL](https://planetscale.com/).

Here are some of the features that Dub provides out-of-the-box:

Expand Down
13 changes: 0 additions & 13 deletions components/app/links/link-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
Chart,
Delete,
Edit,
Eye,
LoadingDots,
QR,
ThreeDots,
Expand Down Expand Up @@ -147,18 +146,6 @@ export default function LinkCard({ props }: { props: LinkProps }) {
<span className="ml-1 hidden sm:inline-block">clicks</span>
</p>
</Link>
{title && description && image && (
<a
href={`https://${domain || "dub.sh"}/_proxy/${
domain || "dub.sh"
}/${encodeURI(key)}`}
target="_blank"
rel="noreferrer"
className="group rounded-full bg-gray-100 p-1.5 transition-all duration-75 hover:scale-105 hover:bg-blue-100 active:scale-95"
>
<Eye className="text-gray-700 transition-all group-hover:text-blue-800" />
</a>
)}
</div>
<h3 className="max-w-[200px] truncate text-sm font-medium text-gray-700 md:max-w-md lg:max-w-2xl xl:max-w-3xl">
{url}
Expand Down
133 changes: 15 additions & 118 deletions components/app/modals/add-edit-link-modal/advanced-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ export default function AdvancedSettings({
data: LinkProps;
setData: Dispatch<SetStateAction<LinkProps>>;
}) {
const [expanded, setExpanded] = useState(false);

const { url, title, description, image, password, expiresAt } = data;

const { utm_source, utm_medium, utm_campaign } = useMemo(() => {
Expand All @@ -33,128 +31,27 @@ export default function AdvancedSettings({

return (
<div>
<div className="px-4 sm:px-16">
<button
type="button"
className="flex items-center space-x-2"
onClick={() => setExpanded(!expanded)}
<div className="relative">
<div
className="absolute inset-0 flex items-center px-4 sm:px-16"
aria-hidden="true"
>
<ChevronRight
className={`h-5 w-5 text-gray-600 ${
expanded ? "rotate-90" : ""
} transition-all`}
/>
<p className="text-sm text-gray-600">Advanced options</p>
</button>
<div className="w-full border-t border-gray-300" />
</div>
<div className="relative flex justify-center">
<span className="bg-white px-2 text-sm text-gray-500">Optional</span>
</div>
</div>

{expanded && (
<motion.div key="accordion-root" {...AnimationSettings}>
<AccordionPrimitive.Root
type="single"
collapsible={true}
className="mt-4 grid border-t border-b border-gray-200 bg-white px-2 py-8 sm:px-8"
>
{/* UTM Builder Section */}
<AccordionPrimitive.Item
value="utm"
className="rounded-t-lg border border-gray-200"
>
<AccordionPrimitive.Header>
<AccordionPrimitive.Trigger className="group flex w-full items-center justify-between space-x-2 rounded-t-lg p-5 text-left transition-all duration-75 hover:bg-gray-50 focus:outline-black active:bg-gray-100">
<div className="flex h-6 items-center justify-start space-x-2">
<ChevronRight className="h-5 w-5 shrink-0 text-gray-700 transition-all ease-in-out group-radix-state-open:rotate-90" />
<span className="text-sm font-medium text-gray-900">
UTM Builder
</span>
</div>
{utm_source && utm_medium && utm_campaign && (
<CheckCircleFill className="h-6 w-6 text-black" />
)}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<AccordionPrimitive.Content className="pb-3">
<UTMSection {...{ data, setData }} />
</AccordionPrimitive.Content>
</AccordionPrimitive.Item>
<div className="mt-4 grid px-4 sm:px-16">
<UTMSection {...{ data, setData }} />

{/* OG Tags Section */}
<AccordionPrimitive.Item
value="og"
className="border border-t-0 border-gray-200"
>
<AccordionPrimitive.Header>
<AccordionPrimitive.Trigger className="group flex w-full items-center justify-between space-x-2 p-5 text-left transition-all duration-75 hover:bg-gray-50 focus:outline-black active:bg-gray-100">
<div className="flex h-6 items-center justify-start space-x-2">
<ChevronRight className="h-5 w-5 shrink-0 text-gray-700 transition-all ease-in-out group-radix-state-open:rotate-90" />
<span className="text-sm font-medium text-gray-900">
Custom Social Previews
</span>
</div>
{title && description && image && (
<CheckCircleFill className="h-6 w-6 text-black" />
)}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<AccordionPrimitive.Content className="pb-3">
<OGSection {...{ data, setData }} />
</AccordionPrimitive.Content>
</AccordionPrimitive.Item>
<OGSection {...{ data, setData }} />

{/* Password Protection */}
<AccordionPrimitive.Item
value="password"
className="border border-t-0 border-gray-200"
>
<AccordionPrimitive.Header>
<AccordionPrimitive.Trigger className="group flex w-full items-center justify-between space-x-2 p-5 text-left transition-all duration-75 hover:bg-gray-50 focus:outline-black active:bg-gray-100">
<div className="flex h-6 items-center justify-start space-x-2">
<ChevronRight className="h-5 w-5 shrink-0 text-gray-700 transition-all ease-in-out group-radix-state-open:rotate-90" />
<span className="text-sm font-medium text-gray-900">
Password Protection
</span>
</div>
{password && (
<CheckCircleFill className="h-6 w-6 text-black" />
)}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<AccordionPrimitive.Content className="px-5 pb-3">
<PasswordSection {...{ data, setData }} />
</AccordionPrimitive.Content>
</AccordionPrimitive.Item>
<PasswordSection {...{ data, setData }} />

{/* Expiration Date */}
<AccordionPrimitive.Item
value="expire"
className="overflow-hidden rounded-b-lg border border-t-0 border-gray-200"
>
<AccordionPrimitive.Header>
<AccordionPrimitive.Trigger className="group flex w-full items-center justify-between space-x-2 p-5 text-left transition-all duration-75 hover:bg-gray-50 focus:outline-black active:bg-gray-100">
<div className="flex h-6 items-center justify-start space-x-2">
<ChevronRight className="h-5 w-5 shrink-0 text-gray-700 transition-all ease-in-out group-radix-state-open:rotate-90" />
<span className="text-sm font-medium text-gray-900">
Expiration Date
</span>
{expiresAt &&
new Date().getTime() > new Date(expiresAt).getTime() && (
<span className="bg-amber-500 px-2 py-0.5 text-xs uppercase text-white">
Expired
</span>
)}
</div>
{expiresAt && (
<CheckCircleFill className="h-6 w-6 text-black" />
)}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
<AccordionPrimitive.Content className="px-5 pb-3">
<ExpirationSection {...{ data, setData }} />
</AccordionPrimitive.Content>
</AccordionPrimitive.Item>
</AccordionPrimitive.Root>
</motion.div>
)}
<ExpirationSection {...{ data, setData }} />
</div>
</div>
);
}
Loading

0 comments on commit 06e2c48

Please sign in to comment.