diff --git a/package.json b/package.json index 7463bf6..e47635d 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "astroplate", - "version": "1.2.4", + "version": "1.3.0", "description": "Astro and Tailwindcss boilerplate", "author": "zeon.studio", "license": "MIT", @@ -13,13 +13,13 @@ "remove-darkmode": "node scripts/removeDarkmode.js && yarn format" }, "dependencies": { - "@astrojs/image": "^0.17.0", + "@astrojs/image": "^0.17.1", "@astrojs/mdx": "^0.19.7", "@astrojs/react": "^2.2.1", "@astrojs/rss": "^2.4.3", "@astrojs/sitemap": "^1.3.3", - "@astrojs/tailwind": "^3.1.3", - "astro": "^2.6.4", + "@astrojs/tailwind": "^4.0.0", + "astro": "^2.7.0", "astro-auto-import": "^0.3.0", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", @@ -33,7 +33,7 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-icons": "^4.9.0", + "react-icons": "^4.10.1", "react-lite-youtube-embed": "^2.3.52", "remark-collapse": "^0.1.2", "remark-toc": "^8.0.1", @@ -44,16 +44,16 @@ "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", "@types/marked": "^5.0.0", - "@types/node": "20.3.1", - "@types/react": "18.2.12", - "@types/react-dom": "18.2.5", + "@types/node": "20.3.2", + "@types/react": "18.2.14", + "@types/react-dom": "18.2.6", "autoprefixer": "^10.4.14", "eslint": "^8.43.0", "postcss": "^8.4.24", "prettier": "^2.8.8", "prettier-plugin-astro": "^0.10.0", "prettier-plugin-tailwindcss": "^0.3.0", - "sass": "^1.63.4", + "sass": "^1.63.6", "tailwindcss": "^3.3.2", "tailwind-bootstrap-grid": "^5.0.1", "typescript": "5.1.3" diff --git a/src/config/social.json b/src/config/social.json old mode 100644 new mode 100755 index 59b4b7c..de364e5 --- a/src/config/social.json +++ b/src/config/social.json @@ -1,33 +1,24 @@ { - "facebook": "https://facebook.com/", - "twitter": "https://twitter.com/", - "mastodon": "https://mastodon.com/", - "instagram": "https://instagram.com/", - "youtube": "", - "linkedin": "", - "github": "", - "gitlab": "", - "discord": "", - "slack": "", - "medium": "", - "codepen": "", - "bitbucket": "", - "dribbble": "", - "behance": "", - "pinterest": "", - "soundcloud": "", - "tumblr": "", - "reddit": "", - "vk": "", - "whatsapp": "", - "snapchat": "", - "vimeo": "", - "tiktok": "", - "foursquare": "", - "rss": "", - "email": "", - "phone": "", - "address": "", - "skype": "", - "website": "" + "main": [ + { + "name": "facebook", + "icon": "FaFacebook", + "link": "https://www.facebook.com/" + }, + { + "name": "twitter", + "icon": "FaTwitter", + "link": "https://twitter.com/" + }, + { + "name": "github", + "icon": "FaGithub", + "link": "https://www.github.com/" + }, + { + "name": "linkedin", + "icon": "FaLinkedin", + "link": "https://www.linkedin.com/" + } + ] } diff --git a/src/content/authors/john-doe.md b/src/content/authors/john-doe.md index 2b72bd5..2269f4f 100644 --- a/src/content/authors/john-doe.md +++ b/src/content/authors/john-doe.md @@ -4,9 +4,17 @@ email: johndoe@email.com image: "/images/avatar.png" description: this is meta description social: - facebook: https://www.facebook.com/ - twitter: https://www.twitter.com/ - instagram: https://www.instagram.com/ +- name: github + icon: FaGithub + link: https://github.com + +- name: twitter + icon: FaTwitter + link: https://twitter.com + +- name: linkedin + icon: FaLinkedin + link: https://linkedin.com --- lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua. diff --git a/src/content/authors/sam-wilson.md b/src/content/authors/sam-wilson.md index fd6abc8..b41d729 100644 --- a/src/content/authors/sam-wilson.md +++ b/src/content/authors/sam-wilson.md @@ -4,9 +4,17 @@ email: samwilson@email.com image: "/images/avatar.png" description: this is meta description social: - facebook: https://www.facebook.com/ - twitter: https://www.twitter.com/ - instagram: https://www.instagram.com/ +- name: github + icon: FaGithub + link: https://github.com + +- name: twitter + icon: FaTwitter + link: https://twitter.com + +- name: linkedin + icon: FaLinkedin + link: https://linkedin.com --- lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua. diff --git a/src/content/authors/william-jacob.md b/src/content/authors/william-jacob.md index 4f7db81..801cb16 100644 --- a/src/content/authors/william-jacob.md +++ b/src/content/authors/william-jacob.md @@ -4,9 +4,17 @@ email: williamjacob@email.com image: "/images/avatar.png" description: this is meta description social: - facebook: https://www.facebook.com/ - twitter: https://www.twitter.com/ - instagram: https://www.instagram.com/ +- name: github + icon: FaGithub + link: https://github.com + +- name: twitter + icon: FaTwitter + link: https://twitter.com + +- name: linkedin + icon: FaLinkedin + link: https://linkedin.com --- lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr navigation et dolore magna aliqua. diff --git a/src/content/config.ts b/src/content/config.ts index e7357b8..95f0948 100755 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -24,11 +24,15 @@ const authorsCollection = defineCollection({ image: z.string().optional(), description: z.string().optional(), social: z - .object({ - facebook: z.string().optional(), - twitter: z.string().optional(), - instagram: z.string().optional(), - }) + .array( + z + .object({ + name: z.string().optional(), + icon: z.string().optional(), + link: z.string().optional(), + }) + .optional() + ) .optional(), draft: z.boolean().optional(), }), diff --git a/src/layouts/PostSingle.astro b/src/layouts/PostSingle.astro index f0f92aa..8a9c12f 100755 --- a/src/layouts/PostSingle.astro +++ b/src/layouts/PostSingle.astro @@ -2,7 +2,7 @@ import BlogCard from "@/components/BlogCard.astro"; import Share from "@/components/Share.astro"; import config from "@/config/config.json"; -import Disqus from "@/function-components/Disqus"; +import Disqus from "@/helpers/Disqus"; import { getSinglePage } from "@/lib/contentParser.astro"; import dateFormat from "@/lib/utils/dateFormat"; import similerItems from "@/lib/utils/similarItems"; diff --git a/src/layouts/components/AuthorCard.astro b/src/layouts/components/AuthorCard.astro index ca8da2f..7d16889 100644 --- a/src/layouts/components/AuthorCard.astro +++ b/src/layouts/components/AuthorCard.astro @@ -1,6 +1,6 @@ --- -import { Image } from "@astrojs/image/components"; import { plainify } from "@/lib/utils/textConverter"; +import { Image } from "@astrojs/image/components"; import Social from "./Social.astro"; const { data } = Astro.props; diff --git a/src/layouts/components/Social.astro b/src/layouts/components/Social.astro index a5358e8..1e2bd12 100755 --- a/src/layouts/components/Social.astro +++ b/src/layouts/components/Social.astro @@ -1,531 +1,28 @@ --- const { source, className } = Astro.props; +import DynamicIcon from "@/helpers/DynamicIcon"; -import { - IoCall, - IoGlobeOutline, - IoLocation, - IoLogoBehance, - IoLogoBitbucket, - IoLogoCodepen, - IoLogoDiscord, - IoLogoDribbble, - IoLogoFacebook, - IoLogoFoursquare, - IoLogoGithub, - IoLogoGitlab, - IoLogoInstagram, - IoLogoLinkedin, - IoLogoMastodon, - IoLogoMedium, - IoLogoPinterest, - IoLogoReddit, - IoLogoRss, - IoLogoSkype, - IoLogoSlack, - IoLogoSnapchat, - IoLogoSoundcloud, - IoLogoTiktok, - IoLogoTumblr, - IoLogoTwitter, - IoLogoVimeo, - IoLogoVk, - IoLogoWhatsapp, - IoLogoYoutube, - IoMail, -} from "react-icons/io5/index.js"; - -type SocialLink = { - facebook: string; - twitter: string; - mastodon: string; - instagram: string; - youtube: string; - linkedin: string; - github: string; - gitlab: string; - discord: string; - slack: string; - medium: string; - codepen: string; - bitbucket: string; - dribbble: string; - behance: string; - pinterest: string; - soundcloud: string; - tumblr: string; - reddit: string; - vk: string; - whatsapp: string; - snapchat: string; - vimeo: string; - tiktok: string; - foursquare: string; - rss: string; - email: string; - phone: string; - address: string; - skype: string; - website: string; -}; -const { - facebook, - twitter, - mastodon, - instagram, - youtube, - linkedin, - github, - gitlab, - discord, - slack, - medium, - codepen, - bitbucket, - dribbble, - behance, - pinterest, - soundcloud, - tumblr, - reddit, - vk, - whatsapp, - snapchat, - vimeo, - tiktok, - foursquare, - rss, - email, - phone, - address, - skype, - website, -}: SocialLink = source; +export interface ISocial { + name: string; + icon: string; + link: string; +} --- diff --git a/src/layouts/function-components/Disqus.tsx b/src/layouts/helpers/Disqus.tsx similarity index 100% rename from src/layouts/function-components/Disqus.tsx rename to src/layouts/helpers/Disqus.tsx diff --git a/src/layouts/helpers/DynamicIcon.tsx b/src/layouts/helpers/DynamicIcon.tsx new file mode 100755 index 0000000..004f56a --- /dev/null +++ b/src/layouts/helpers/DynamicIcon.tsx @@ -0,0 +1,49 @@ +import React, { FC } from "react"; +import type { IconType } from "react-icons"; +import * as AiIcons from "react-icons/ai/index.js"; +import * as BsIcons from "react-icons/bs/index.js"; +import * as FaIcons from "react-icons/fa/index.js"; +import * as FaIcons6 from "react-icons/fa6/index.js"; +import * as FiIcons from "react-icons/fi/index.js"; +import * as Io5Icons from "react-icons/io5/index.js"; +import * as RiIcons from "react-icons/ri/index.js"; +import * as TbIcons from "react-icons/tb/index.js"; +import * as TfiIcons from "react-icons/tfi/index.js"; + +type IconMap = Record; + +interface IDynamicIcon { + icon: string; + className?: string; +} + +const iconLibraries: { [key: string]: IconMap } = { + ai: AiIcons, + bs: BsIcons, + fa: FaIcons, + fa6: FaIcons6, + fi: FiIcons, + io5: Io5Icons, + ri: RiIcons, + tb: TbIcons, + tfi: TfiIcons, +}; + +const DynamicIcon: FC = ({ icon, ...props }) => { + const IconLibrary = getIconLibrary(icon); + const Icon = IconLibrary ? IconLibrary[icon] : undefined; + + if (!Icon) { + return Icon not found; + } + + return ; +}; + +const getIconLibrary = (icon: string): IconMap | undefined => { + const libraryKey = icon.substring(0, 2).toLowerCase(); + + return iconLibraries[libraryKey]; +}; + +export default DynamicIcon; diff --git a/src/layouts/partials/Footer.astro b/src/layouts/partials/Footer.astro index 998b76f..cd1b641 100755 --- a/src/layouts/partials/Footer.astro +++ b/src/layouts/partials/Footer.astro @@ -27,7 +27,7 @@ const { footer }: { footer: { name: string; url: string }[] } = menu;
- +
diff --git a/tsconfig.json b/tsconfig.json index e7f016d..3dfa47d 100755 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,14 +8,13 @@ "forceConsistentCasingInFileNames": true, "noEmit": true, "jsx": "react", - "resolveJsonModule": true, "isolatedModules": true, "incremental": true, "allowSyntheticDefaultImports": true, "paths": { - "@/function-components/*": ["./src/layouts/function-components/*"], "@/components/*": ["./src/layouts/components/*"], "@/shortcodes/*": ["./src/layouts/shortcodes/*"], + "@/helpers/*": ["./src/layouts/helpers/*"], "@/partials/*": ["./src/layouts/partials/*"], "@/*": ["./src/*"] }