Welcome to Share Your Links! This project is powered by Astro and CSS magic. If you're looking to create a sleek and customizable page to showcase all your important links, you're in the right place!
You can find this template in Astro Themes
Find all relevant links, including social media and websites, in one place: Share Your Links
- Clone this repository.
- Navigate to the project directory.
- Install dependencies using
npm install.
Get started in no time:
- Development: Run
npm run devornpm startto start the development server. - Build: Use
npm run buildto generate a production build. - Preview: Run
npm run previewto preview the production build. - Astro CLI: Explore additional Astro CLI commands using
npm run astro.
To customize the links displayed in your application, follow these steps:
- Open the
src/data.jsfile in your project. - Locate the section containing the information of the user links (
userLinks). - Modify each object within the
userLinksarray with the information you want to display. You can change the link title, the link itself, and the associated icon. - Save the changes in the
data.jsfile.
Here's an example of how you can change the information of the links:
const userLinks = [
{
title: "My website",
link: "https://mywebsite.com",
icon: "ant-design:global-outlined"
},
{
title: "Personal blog",
link: "https://blog.mywebsite.com",
icon: "fa-solid:book"
},
{
title: "Contact",
link: "mailto:[email protected]",
icon: "bi:chat-right-dots"
},
]- Once you have updated the information of the links in the
userData.jsfile, the changes will be automatically reflected in your application when you rebuild or run it.
Remember to ensure you provide valid links and that the icons used are available in the icon library you are using in your project.
To import icons into your project, we use the Iconify CDN and utilize the icon attribute of each Iconify icon in the userLinks. For example, to use an icon of React:
<iconify-icon icon="logos:react" width="27" height="27"></iconify-icon>In our data.js, we only need to specify the icon identifier, like this:
{
title: "React",
link: "https://reactjs.org/",
icon: "logos:react"
}Here's how you can add the Iconify script to the <head> section of your project:
<head>
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
</head>Once you include this script, you can use any Iconify icon by specifying its identifier in the icon attribute. Make sure to replace "logos:react" with the appropriate icon identifier for the icons you want to use. You can find a variety of icons available on the Iconify logos page.
Feel free to modify this project to suit your needs! Whether it's changing the layout, adding new features, or tweaking the styles, let your creativity flow.
- SofiDev
This project is licensed under the MIT License - see the LICENSE file for details. Feel free to explore, modify, and make it your own!