https://github.com/sofidevo/allmylinks
Display your social media Links💜
https://github.com/sofidevo/allmylinks
Last synced: 4 months ago
JSON representation
Display your social media Links💜
- Host: GitHub
- URL: https://github.com/sofidevo/allmylinks
- Owner: SofiDevO
- Created: 2024-05-03T07:26:35.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-01T04:52:43.000Z (over 1 year ago)
- Last Synced: 2025-04-01T09:01:41.733Z (about 1 year ago)
- Language: Astro
- Homepage: https://allmylinks-ten.vercel.app
- Size: 9.52 MB
- Stars: 23
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
### Share Your Links
[](https://github.com/tu_usuario/tu_repositorio)
[](https://opensource.org/licenses/MIT)
#### Description
## Use this template by running:
```bash
npm create astro@latest -- --template SofiDevO/allmylinks
```
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](https://portal.astro.build/themes/shareyourlinks/)
#### Quick Links
Find all relevant links, including social media and websites, in one place: [Share Your Links](https://example.com/share-your-links)
#### Installation
1. Clone this repository.
2. Navigate to the project directory.
3. Install dependencies using `npm install`.
## Usage
Get started in no time:
- **Development**: Run `npm run dev` or `npm start` to start the development server.
- **Build**: Use `npm run build` to generate a production build.
- **Preview**: Run `npm run preview` to preview the production build.
- **Astro CLI**: Explore additional Astro CLI commands using `npm run astro`.
### Updating User Links
To customize the links displayed in your application, follow these steps:
1. Open the `src/data.js` file in your project.
2. Locate the section containing the information of the user links (`userLinks`).
3. Modify each object within the `userLinks` array with the information you want to display. You can change the link title, the link itself, and the associated icon.
4. Save the changes in the `data.js` file.
Here's an example of how you can change the information of the links:
```javascript
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@example.com",
icon: "bi:chat-right-dots"
},
]
```
5. Once you have updated the information of the links in the `userData.js` file, 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.
### Including Icons
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:
```html
```
In our `data.js`, we only need to specify the icon identifier, like this:
```javascript
{
title: "React",
link: "https://reactjs.org/",
icon: "logos:react"
}
```
Here's how you can add the Iconify script to the `` section of your project:
```html
```
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](https://icon-sets.iconify.design/logos/).
#### Customization
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.
#### Author
- SofiDev
#### License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. Feel free to explore, modify, and make it your own!