Skip to content

Commit

Permalink
social added for footer
Browse files Browse the repository at this point in the history
  • Loading branch information
HYP3R00T committed Aug 1, 2024
1 parent 1637b1f commit f5a75a6
Show file tree
Hide file tree
Showing 9 changed files with 280 additions and 36 deletions.
102 changes: 102 additions & 0 deletions config.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import type { SocialObjects } from "@/lib/types";

export const SITE = {
website: "https://hyperoot.dev", // replace this with your deployed domain
author: "HYP3R00T",
Expand Down Expand Up @@ -39,3 +41,103 @@ export const docconfig = {
hide_repo_button: false,
hide_author: true,
};

// Set your social. It will appear in footer. Don't change the `name` value.
export const Socials: SocialObjects = [
{
name: "Github",
href: "https://github.com/HYP3R00T/",
linkTitle: ` ${SITE.title} on Github`,
active: true,
},
{
name: "Facebook",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Facebook`,
active: false,
},
{
name: "Instagram",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Instagram`,
active: false,
},
{
name: "LinkedIn",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on LinkedIn`,
active: false,
},
{
name: "Mail",
href: "mailto:[email protected]",
linkTitle: `Send an email to ${SITE.title}`,
active: true,
},
{
name: "Twitter",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Twitter`,
active: false,
},
{
name: "Twitch",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Twitch`,
active: false,
},
{
name: "YouTube",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on YouTube`,
active: false,
},
{
name: "WhatsApp",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on WhatsApp`,
active: false,
},
{
name: "Snapchat",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Snapchat`,
active: false,
},
{
name: "Pinterest",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Pinterest`,
active: false,
},
{
name: "Discord",
href: "https://discord.gg/tWZRBhaPhd",
linkTitle: `${SITE.title} on Discord`,
active: true,
},
{
name: "GitLab",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on GitLab`,
active: false,
},
{
name: "Reddit",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Reddit`,
active: false,
},
{
name: "Telegram",
href: "https://github.com/HYP3R00T/",
linkTitle: `${SITE.title} on Telegram`,
active: false,
},
{
name: "Mastodon",
href: "https://mastodon.social/@hyp3r00t",
linkTitle: `${SITE.title} on Mastodon`,
active: true,
},
];
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"rehype-external-links": "^3.0.0",
"simple-icons-astro": "^13.3.0",
"tailwind-merge": "^2.4.0",
"tailwindcss": "^3.4.6",
"tailwindcss-animate": "^1.0.7",
Expand Down
26 changes: 25 additions & 1 deletion src/components/core/Footer.astro
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
---
import { Socials } from "config";
import { getIconByName } from "@/components/core/Icons";
import { Button } from "@/components/ui/button";
// To pass the tailwindcss classes to the astro component
const { class: className } = Astro.props;
---

<footer class:list={["py-6 px-6 w-full", className]}>
<footer class:list={["py-[1.2rem] px-6 w-full", className]}>
<div
class="flex flex-col items-center justify-between gap-4 md:flex-row container"
>
Expand All @@ -23,5 +27,25 @@ const { class: className } = Astro.props;
class="font-medium underline underline-offset-4">GitHub</a
>.
</p>
<div class="flex gap-4">
{
Socials.filter((social) => social.active).map((social) => {
const Icon = getIconByName(social.name);
return (
<a
href={social.href}
title={social.linkTitle}
target="_blank"
rel="noreferrer"
class="text-muted-foreground hover:text-primary"
>
<Button size="icon" variant="ghost">
{Icon && <Icon className="h-[1.2rem] w-[1.2rem]" />}
</Button>
</a>
);
})
}
</div>
</div>
</footer>
44 changes: 44 additions & 0 deletions src/components/core/Icons.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Mail, type LucideIcon } from "lucide-react";

import {
Github,
Facebook,
Instagram,
Linkedin,
X as Twitter,
Twitch,
Youtube,
Whatsapp,
Snapchat,
Pinterest,
Discord,
Gitlab,
Reddit,
Telegram,
Mastodon,
} from "simple-icons-astro";

type IconComponent = LucideIcon | ((props: any) => JSX.Element);

export const ICONS: { [key: string]: IconComponent } = {
Github,
Facebook,
Instagram,
LinkedIn: Linkedin,
Mail,
Twitter,
Twitch,
YouTube: Youtube,
WhatsApp: Whatsapp,
Snapchat,
Pinterest,
Discord,
GitLab: Gitlab,
Reddit,
Telegram,
Mastodon,
};

export const getIconByName = (name: string): IconComponent | null => {
return ICONS[name] || null;
};
26 changes: 13 additions & 13 deletions src/content/docs/Custom Components/Callout.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,31 @@ The `Callout` component is designed to highlight important information, warnings

### Props

**`variant`**
- **`variant`**

Type: `string`
Type: `string`

Default: "info"
Default: "info"

Options: `"info" | "warning" | "danger" | "success"`
Options: `"info" | "warning" | "danger" | "success"`

Description: Defines the type of alert to display. The variant determines the color, icon, and default title of the alert.
Description: Defines the type of alert to display. The variant determines the color, icon, and default title of the alert.

**`title`**
- **`title`**

Type: `string`
Type: `string`

Default: Default titles based on the variant
Default: Default titles based on the variant

Description: Custom title for the alert. If not provided, the default title for the specified variant will be used.
Description: Custom title for the alert. If not provided, the default title for the specified variant will be used.

**`icon`**
- **`icon`**

Type: `LucideIcon` (optional)
Type: `LucideIcon` (optional)

Default: Default icon based on the variant
Default: Default icon based on the variant

Description: A custom icon to use in the alert. If not provided, the default icon for the specified variant will be used. You can look for icons at [lucide.dev](https://lucide.dev/icons/).
Description: A custom icon to use in the alert. If not provided, the default icon for the specified variant will be used. You can look for icons at [lucide.dev](https://lucide.dev/icons/).

### Basic Usage
To use the Callout component, import it and use it in your Astro files with the desired variant and title.
Expand Down
42 changes: 21 additions & 21 deletions src/content/docs/Custom Components/Card.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,38 @@ The `Card` component is designed to present content in a styled container with s

### Props

#### title
- **`title`**

Type: `string`
Type: `string`

Description: The title text to display in the card.
Description: The title text to display in the card.

#### icon
- **`icon`**

Type: `LucideIcon` (optional)
Type: `LucideIcon` (optional)

Default: `Terminal`
Default: `Terminal`

Description: A custom icon to display in the card. If not provided, the default `Terminal` icon will be used. You can look for icons at [lucide.dev](https://lucide.dev/icons/).
Description: A custom icon to display in the card. If not provided, the default `Terminal` icon will be used. You can look for icons at [lucide.dev](https://lucide.dev/icons/).

#### color
- **`color`**

Type: `string` (optional)
Type: `string` (optional)

Default: `"primary"`
Default: `"primary"`

Options:
<span class="bg-Pink text-background p-1 border rounded text-sm font-semibold">"Pink"</span>
<span class="bg-Purple text-background p-1 border rounded text-sm font-semibold">"Purple"</span>
<span class="bg-Red text-background p-1 border rounded text-sm font-semibold">"Red"</span>
<span class="bg-Orange text-background p-1 border rounded text-sm font-semibold">"Orange"</span>
<span class="bg-Yellow text-background p-1 border rounded text-sm font-semibold">"Yellow"</span>
<span class="bg-Green text-background p-1 border rounded text-sm font-semibold">"Green"</span>
<span class="bg-Teal text-background p-1 border rounded text-sm font-semibold">"Teal"</span>
<span class="bg-Sky text-background p-1 border rounded text-sm font-semibold">"Sky"</span>
<span class="bg-Blue text-background p-1 border rounded text-sm font-semibold">"Blue"</span>
Options:
<span class="bg-Pink text-background p-1 border rounded text-sm font-semibold">"Pink"</span>
<span class="bg-Purple text-background p-1 border rounded text-sm font-semibold">"Purple"</span>
<span class="bg-Red text-background p-1 border rounded text-sm font-semibold">"Red"</span>
<span class="bg-Orange text-background p-1 border rounded text-sm font-semibold">"Orange"</span>
<span class="bg-Yellow text-background p-1 border rounded text-sm font-semibold">"Yellow"</span>
<span class="bg-Green text-background p-1 border rounded text-sm font-semibold">"Green"</span>
<span class="bg-Teal text-background p-1 border rounded text-sm font-semibold">"Teal"</span>
<span class="bg-Sky text-background p-1 border rounded text-sm font-semibold">"Sky"</span>
<span class="bg-Blue text-background p-1 border rounded text-sm font-semibold">"Blue"</span>

Description: The background color for the card. This is used for both the card's background and the button's hover state. If not provided, the default color is <span class="bg-primary text-background p-1 border rounded text-sm font-semibold">"primary"</span>.
Description: The background color for the card. This is used for both the card's background and the button's hover state. If not provided, the default color is <span class="bg-primary text-background p-1 border rounded text-sm font-semibold">"primary"</span>.

### Basic Usage

Expand Down
Loading

0 comments on commit f5a75a6

Please sign in to comment.