cecil/links

Links is a Linktree clone powered by Cecil, Tailwind CSS and Font Awesome.

Fund package maintenance!
ArnaudLigny
Open Collective

Installs: 12

Dependents: 0

Suggesters: 0

Security: 0

Stars: 3

Watchers: 1

Forks: 1

Open Issues: 1

Language:CSS

Type:project

2.0.0 2024-02-07 15:02 UTC

This package is auto-updated.

Last update: 2024-04-26 23:09:48 UTC


README

Links is a Linktree alternative powered by Cecil, Tailwind CSS and Font Awesome.

Links website

Demo: https://cecil-links-demo.netlify.app

Install

Important

PHP 8.1 and Composer are required.

The easiest way to create a new Links project is using Composer:

composer create-project cecil/links my-project

Usage

Preview

You can easily preview your site locally with the following command:

php cecil.phar serve --open

Tip

The option --open automatically open your site in the default web browser.

Configuration

Define site configuration and social links in cecil.yml:

title: <main title>
baseurl: <site URL, with a final backslash>
baseline: "<short description>" # optional, recommended
description: "<long description>" # optional, recommended
author: # used by metatags, optional
  name: <author name>
  url: <url>
social: # social links
  <name>: # twitter, github, linkedin, instagram, youtube
    url: <url>
avatar: avatar.png
metatags:
  favicon:
    image: avatar.png # optional, recommended
image: avatar.png # Open Graph image, optional, recommended
source: https://github.com/Cecilapp/Links # GitHub repository

Tip

The exhaustive Cecil documentation is available at cecil.app.

Manage links

Edit file pages/index.md to:

  1. add links in front matter
  2. free content in body (optional)
---
links:
  - title: <title>
    url: <url>
    color: "<hexa_code>" # hexadecimal color code, optional (e.g. "#1DA1F2")
    icon: <style>:<name> # Font Awesome icon (https://fontawesome.com/icons), optional (e.g. "brands:github")
---
Content here.

Publish

Run the following command:

php cecil.phar build

Then just deploy the content of _site directory to your web hosting solution.

Customize color

Theme

You can change the theme color through the file tailwind.config.js, then rebuild CSS:

npm install
npx tailwindcss -i ./assets/tailwind.css -o ./assets/styles.css

Social links

Out of the box, only the color of the following social providers are supported:

Twitter, GitHub, LinkedIn, Instagram and YouTube.

Update

If you want to update component themes (i.e.: fontawesome, pwa and netlity) you must run the following command:

composer update

License

Links is a free software distributed under the terms of the MIT license.

© Arnaud Ligny