cecil/links

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

3.3.3 2024-12-16 08:59 UTC

Requires

• cecil/theme-links: ^1.3
• cecil/theme-netlify: ^2.1
• cecil/theme-pwa: ^2.10

MIT

• Arnaud Ligny

README

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

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 --ask

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 identities in cecil.yml:

title: <main title>
baseurl: <site URL, with a final backslash>
baseline: "<short presentation>" # optional, recommended
description: "<SEO description>" # optional, recommended
author: # used by metatags, optional
  name: <author name>
  url: <url>
  email: <email> # used in social identities block, optional
social: # social identities
  <name>: # github, linkedin, instagram, youtube, mastodon, bluesky, threads, twitter or x
    url: <url>
avatar: avatar.png
image: avatar.png # Open Graph image, optional, recommended
manifest:
  theme_color: "#0369a1"   # theme color
  background_color: "#fff" # PWA background color
serviceworker:
  enabled: false           # turns on PWA
# CSS theme and buttons colors
links:
  theme: default # "default, "gradient-1" or "gradient-2"
  buttons:
    color: page # page or css ('page' by default)

Tip

The exhaustive Cecil documentation is available at cecil.app.

Manage page

From pages/index.md file you can:

1. change page structure with blocks array in front matter
2. add links in front matter
3. add rich content authoring in Markdown in page body (optional)

---
blocks:
  - name: content # page content
  - name: links   # page links
  - name: social  # social identities
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

You can disable buttons custom color:

cecil.yml:

links:
  buttons:
    color: css

Theme

Tailwind CSS is required:

npm install -D tailwindcss

Theme colors

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

npx tailwindcss -i ./themes/links/tailwind.css -o ./assets/styles.css

Theme CSS

You can change theme CSS through the file tailwind.css:

1. Copy ./theme/links/tailwind.css to ./tailwind.css
2. Rebuild CSS:

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

Update

If you want to update the links theme and 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