Skip to content
This repository has been archived by the owner on Mar 27, 2024. It is now read-only.

Commit

Permalink
make everything lazy loading and resized a lot of images
Browse files Browse the repository at this point in the history
  • Loading branch information
@tommerty
tommerty committed Nov 17, 2023
1 parent d1f2e84 commit a7200bb
Show file tree
Hide file tree
Showing 19 changed files with 52 additions and 40 deletions.
Binary file modified public/blankbackdropyellowgreen.webp
View file
Binary file not shown.
Binary file modified public/dummyitemsforblankbackdrop.webp
View file
Binary file not shown.
Binary file modified public/linkshortener.webp
View file
Binary file not shown.
Binary file modified public/linkshortenerbutton.webp
View file
Binary file not shown.
Binary file modified public/livenowasset.webp
View file
Binary file not shown.
Binary file modified public/livestreambackdrop.webp
View file
Binary file not shown.
Binary file modified public/mediakitbackdrop.webp
View file
Binary file not shown.
Binary file modified public/stats-mockup.webp
View file
Binary file not shown.
Binary file modified public/twittercard.webp
View file
Binary file not shown.
Binary file added public/yellowbeaniegirl.webp
View file
Binary file not shown.
Binary file modified public/youtubecard.webp
View file
Binary file not shown.
22 changes: 11 additions & 11 deletions src/components/BounceFeatures.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import type { ReactNode } from "react";
import { motion } from "framer-motion";
import { WindowMockup } from "./WindowMockup";

import Image from "@/components/Image";
export const BouncyCardsFeatures = () => {
return (
<section className="mx-auto text-surface-800">
Expand All @@ -16,12 +16,12 @@ export const BouncyCardsFeatures = () => {
<div className="hidden md:block">
<div className="absolute bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
<Image src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
</span>
</div>
<div className="absolute bottom-0 left-1/2 top-0 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
<Image src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
</span>
</div>
</div>
Expand All @@ -41,7 +41,7 @@ export const BouncyCardsFeatures = () => {
<CardDescription>Brand accounts allow you to manage multiple accounts from one place</CardDescription>
<div className="absolute bottom-0 left-4 right-4 top-28 translate-y-8 rounded-t-2xl bg-transparent p-4 transition-transform duration-500 group-hover:translate-y-2 group-hover:rotate-[2deg]">
<span className="block text-center font-semibold text-indigo-50">
<img src="/stats-mockup.webp" />
<Image src="/stats-mockup.webp" />
</span>
</div>
</BounceCard>
Expand All @@ -50,12 +50,12 @@ export const BouncyCardsFeatures = () => {
<CardDescription>Powerful link shortening tool to help your brand image</CardDescription>
<div className="absolute bottom-0 left-4 right-4 top-28 translate-y-8 rounded-t-2xl bg-transparent p-4 transition-transform duration-500 group-hover:translate-y-4 group-hover:rotate-[2deg]">
<span className="block text-center w-full font-semibold text-indigo-50">
<img src="/linkshortener.webp" />
<Image src="/linkshortener.webp" />
</span>
</div>
<div className="absolute bottom-0 left-4 right-4 top-14 translate-y-24 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-2 group-hover:rotate-[2deg]">
<span className="block text-center w-full font-semibold text-indigo-50">
<img src="/linkshortenerbutton.webp" />
<Image src="/linkshortenerbutton.webp" />
</span>
</div>
</BounceCard>
Expand All @@ -64,12 +64,12 @@ export const BouncyCardsFeatures = () => {
<CardDescription className="z-20">Helping streamers showcase their livestreams, no matter the platform</CardDescription>
<div className="absolute left-4 right-4 top-0 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-transform duration-[250ms] group-hover:-translate-y-2 group-hover:rotate-[2deg] ">
<span className="block text-center w-full font-semibold text-indigo-50">
<img src="/livestreambackdrop.webp" />
<Image src="/livestreambackdrop.webp" />
</span>
</div>
<div className="absolute bottom-0 left-4 right-4 top-14 translate-y-24 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-16 group-hover:rotate-[2deg]">
<span className="block text-center w-full font-semibold text-indigo-50">
<img src="/livenowasset.webp" />
<Image src="/livenowasset.webp" />
</span>
</div>
</BounceCard>
Expand All @@ -80,17 +80,17 @@ export const BouncyCardsFeatures = () => {
</div>
<div className="absolute bottom-0 left-4 right-4 top-16 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-transform duration-[250ms] group-hover:-translate-y-2 group-hover:rotate-[-2deg]">
<span className="block text-center w-full font-semibold text-indigo-50">
<img src="/mediakitbackdrop.webp" />
<Image src="/mediakitbackdrop.webp" />
</span>
</div>
<div className="absolute bottom-0 right-36 top-36 scale-90 translate-y-20 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-2 group-hover:rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/twittercard.webp" />
<Image src="/twittercard.webp" />
</span>
</div>
<div className="absolute bottom-0 left-36 top-36 scale-75 translate-y-20 rounded-t-2xl bg-transparent p-4 transition-transform duration-700 group-hover:translate-y-2 group-hover:-rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/youtubecard.webp" />{" "}
<Image src="/youtubecard.webp" />{" "}
</span>
</div>
</BounceCard>
Expand Down
3 changes: 2 additions & 1 deletion src/components/Branding.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { AnimatePresence, motion } from "framer-motion";
import Image from "@/components/Image";

const Branding = () => {
const variants = {
Expand All @@ -12,7 +13,7 @@ const Branding = () => {
<a href="/">
<span className="flex items-center px-4 font-semibold text-[#1F1F1F] duration-300 bg-surface-100 py-1 rounded-badge gap-2">
<div className="group-hover:-rotate-0 rotate-45 transition-all">
<img src="/icon.svg" className="w-6 h-6" />
<Image src="/icon.svg" className="w-6 h-6" />
</div>
<span className="font-bold text-2xl doras-logo">doras.to</span>
</span>
Expand Down
13 changes: 7 additions & 6 deletions src/components/HoverBlockDetail.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import { motion } from "framer-motion";
import { BounceCard, CardTitle, CardDescription } from "./BounceFeatures";
import Image from "@/components/Image";

interface Props {
// Define the props for the component here
Expand All @@ -20,12 +21,12 @@ const HoverBlockDetail: React.FC<Props> = (props) => {
<div className="-z-10">
<div className="absolute bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
<Image src="/blankbackdropyellowgreen.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
</span>
</div>
<div className="absolute bottom-0 left-1/2 top-0 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-10 group-hover:-rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
<Image src="/backdropitems1.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-1000" />
</span>
</div>
</div>
Expand All @@ -40,12 +41,12 @@ const HoverBlockDetail: React.FC<Props> = (props) => {
<div className="-z-10">
<div className="absolute bottom-0 rotate-6 left-1/2 top-20 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:translate-y-40 group-hover:-rotate-3">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
<Image src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
</span>
</div>
<div className="absolute rotate-6 bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-5 group-hover:-rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
<Image src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
</span>
</div>
</div>
Expand All @@ -60,12 +61,12 @@ const HoverBlockDetail: React.FC<Props> = (props) => {
<div className="-z-10">
<div className="absolute bottom-0 rotate-6 left-1/2 top-20 group-hover:-top-10 translate-y-2 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:translate-y-40 group-hover:-rotate-3">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
<Image src="/markdownblock.webp" className="w-3/4 transition-all duration-1000" />
</span>
</div>
<div className="absolute rotate-6 bottom-0 left-1/2 top-0 -translate-y-0 rounded-t-2xl bg-transparent p-4 transition-all duration-700 group-hover:-translate-y-5 group-hover:-rotate-6">
<span className=" mx-auto text-center w-full font-semibold text-indigo-50">
<img src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
<Image src="/backdropwithmarkdown.webp" className="w-3/4 group-hover:w-1/2 transition-all duration-700" />
</span>
</div>
</div>
Expand Down
10 changes: 10 additions & 0 deletions src/components/Image.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
class?: string;
}

const Image: React.FC<ImageProps> = ({ class: classProp, className, style, ...props }) => {
const classes = className || classProp;
return <img className={classes} style={style} {...props} loading="lazy" />;
};

export default Image;
4 changes: 2 additions & 2 deletions src/components/Testimonials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const Card = ({
onClick={() => setSelected(position)}
className="absolute top-0 left-0 w-full min-h-full p-8 lg:p-12 cursor-pointer flex flex-col justify-between rounded-3xl"
>
<img src={imageSrc} className="w-24 h-24 rounded-full" />
<img loading="lazy" src={imageSrc} className="w-24 h-24 rounded-full" />
<p className="text-lg lg:text-xl font-light italic mb-8">"{description}"</p>
<div>
<span className="block font-semibold text-lg">{name}</span>
Expand Down Expand Up @@ -148,7 +148,7 @@ const testimonials = [
link: "brady"
},
{
imageSrc: "./yellowbeaniegirl.png",
imageSrc: "./yellowbeaniegirl.webp",
description: "Doras has been an amazing tool with my art. It gives some additional insight into my audience - where they are coming from and what they're clicking in my links. This has been a tremendous help in sharing and selling my art online.",
name: "Yellow Beanie Girl",
title: "Artist",
Expand Down
34 changes: 16 additions & 18 deletions src/components/linkspage/BioBlock.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,34 @@
import { downloadImageUser } from "@/supabase"
import { downloadImageUser } from "@/supabase";
import BioCheck from "./bio";
import type { ServerDataItem } from "@/server_types";
import * as lucide from "lucide-react";
import Image from "@/components/Image";

interface Props {
user: ServerDataItem;
textColorSolid: string;
}
const BioBlock: React.FC<Props> = ({ user, textColorSolid }) => {
return (
<div className="flex flex-col justify-center items-center">
<img src={downloadImageUser(user.pic)} className={"w-44 h-44 object-cover mask " + user.design.profile_pic_shape} />
<Image src={downloadImageUser(user.pic)} className={"w-44 h-44 object-cover mask " + user.design.profile_pic_shape} />
<div className="flex items-center mx-auto text-center">
<h2 className="flex items-center text-4xl font-black" style={{ color: textColorSolid }}>
{user.displayname}
{
user.account_type == "premium" && (
<div className="tooltip" data-tip="Premium">
<lucide.BadgeCheck className="ml-1" />
</div>
)
}
{
user.account_type == "staff" && (
<div className="tooltip tooltip-primary tooltip-left z-50" data-tip="Staff">
<lucide.ShieldCheck className="ml-1" />
</div>
)
}
{user.account_type == "premium" && (
<div className="tooltip" data-tip="Premium">
<lucide.BadgeCheck className="ml-1" />
</div>
)}
{user.account_type == "staff" && (
<div className="tooltip tooltip-primary tooltip-left z-50" data-tip="Staff">
<lucide.ShieldCheck className="ml-1" />
</div>
)}
</h2>
</div>
<BioCheck color={textColorSolid} bio={user?.bio || ""} />
</div>
)
}
);
};
export default BioBlock;
3 changes: 2 additions & 1 deletion src/components/navbar/navbar.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { NavMenuDesktop } from "@/components/navbar/NavMenuDesktop";
import { JoinWaitlist } from "@/components/JoinWaitlist";
import { Button } from "@/components/ui/button";
import { BiLogoDiscord } from "react-icons/bi/index.js";
import Image from "@/components/Image";
---

<Container>
Expand All @@ -13,7 +14,7 @@ import { BiLogoDiscord } from "react-icons/bi/index.js";
<div class="block md:hidden">
<!-- <DropdownMenuNav client:only /> -->
</div>
<a class="text-xl flex items-center font-bold gap-2"><img src="/assets/icon.svg" class="w-10 h-10" /><span>Doras.to</span></a>
<a class="text-xl flex items-center font-bold gap-2"><img loading="lazy" src="/assets/icon.svg" class="w-10 h-10" /><span>Doras.to</span></a>
</div>
<div class="navbar-center hidden md:flex">
<!-- <NavMenuDesktop client:only /> -->
Expand Down
3 changes: 2 additions & 1 deletion src/pages/[user]/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import BioCheck from "@/components/linkspage/bio";
import ChipTabs from "@/components/linkspage/tabs";
import { getTextColorForBackground } from "@/lib/utils";
import BioBlock from "@/components/linkspage/BioBlock";
const { page } = Astro.props;
const { user } = Astro.params;
Expand Down Expand Up @@ -132,7 +133,7 @@ if (!user_user.theme.font || user_user.theme.font.font.length == 0) {
}
return (
<a href={"https://github.com/" + link.url} target="_blank" class="w-full">
<img style={`border-radius:12px;`} width="100%" src={`https://github-stats.doras.to/?username=${link.url}&theme=dark&show_icons=true&bg_color=${link.colour.background.replace("#", "")}&text_color=${TextColour}&icon_color=${TextColour}&title_color=${TextColour}&hide_border=true&hide_rank=${!link.options?.rank}&hide=${hide}`} />;
<img loading="lazy" style={`border-radius:12px;`} width="100%" src={`https://github-stats.doras.to/?username=${link.url}&theme=dark&show_icons=true&bg_color=${link.colour.background.replace("#", "")}&text_color=${TextColour}&icon_color=${TextColour}&title_color=${TextColour}&hide_border=true&hide_rank=${!link.options?.rank}&hide=${hide}`} />;
</a>
);
}
Expand Down

0 comments on commit a7200bb

Please sign in to comment.