+
+
+
diff --git a/docs/src/components/icons.ts b/docs/src/components/icons.ts
new file mode 100644
index 0000000..83ee43d
--- /dev/null
+++ b/docs/src/components/icons.ts
@@ -0,0 +1,13 @@
+export const icons = {
+ 'focus': ``,
+ 'settings': ``,
+ 'plus': ``,
+ 'archive': ``,
+ 'checkbox': ``,
+ 'file-export': ``,
+ 'users': ``,
+ 'login': ``,
+ 'puzzle': ``,
+ 'cloud': ``,
+ 'mood-smile': ``,
+}
\ No newline at end of file
diff --git a/docs/src/content/docs/index.md b/docs/src/content/docs/index.md
deleted file mode 100644
index 72138ad..0000000
--- a/docs/src/content/docs/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: "Linkding"
-description: "Linkding is a self-hosted bookmarking service that is designed be to be minimal, fast, and easy to set up using Docker."
----
-
-linkding is a bookmark manager that you can host yourself.
-It's designed be to be minimal, fast, and easy to set up using Docker.
-
-The name comes from:
-- *link* which is often used as a synonym for URLs and bookmarks in common language
-- *Ding* which is German for thing
-- ...so basically something for managing your links
-
-**Feature Overview:**
-- Clean UI optimized for readability
-- Organize bookmarks with tags
-- Bulk editing, Markdown notes, read it later functionality
-- Share bookmarks with other users or guests
-- Automatically provides titles, descriptions and icons of bookmarked websites
-- Automatically archive websites, either as local HTML file or on Internet Archive
-- Import and export bookmarks in Netscape HTML format
-- Installable as a Progressive Web App (PWA)
-- Extensions for [Firefox](https://addons.mozilla.org/firefox/addon/linkding-extension/) and [Chrome](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe), as well as a bookmarklet
-- SSO support via OIDC or authentication proxies
-- REST API for developing 3rd party apps
-- Admin panel for user self-service and raw data access
-
-
-**Demo:** https://demo.linkding.link/
-
-**Screenshot:**
-
-
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
new file mode 100644
index 0000000..5e7a98a
--- /dev/null
+++ b/docs/src/content/docs/index.mdx
@@ -0,0 +1,69 @@
+---
+title: linkding
+description: A self-hosted bookmarking service that is designed to be minimal, fast and easy to set up.
+template: splash
+hero:
+ tagline: A self-hosted bookmark manager designed be to be minimal, fast, and easy to set up.
+ actions:
+ - text: Get started
+ link: /installation
+ icon: right-arrow
+ - text: GitHub
+ link: https://github.com/sissbruecker/linkding
+ icon: external
+ variant: minimal
+ attrs:
+ target: _blank
+ - text: Demo
+ link: https://demo.linkding.link
+ icon: external
+ variant: minimal
+ attrs:
+ target: _blank
+---
+
+import { CardGrid } from '@astrojs/starlight/components';
+import Card from '../../components/Card.astro';
+
+
+
+
+
+
+
+
+
+## Features
+
+
+
+ Optimized for readability, allowing to quickly add and find bookmarks without distractions.
+
+
+ Features can be enabled or disabled as needed, adjustable UI through a number of settings.
+
+
+ Automatically fetches titles, descriptions, icons and preview images of bookmarked websites.
+
+
+ Automatically create snapshots of bookmarked websites, either as local HTML file or on the Internet Archive.
+
+
+ Apply any operation to a selection of bookmarks or the whole collection.
+
+
+ Import and export bookmarks in the Netscape HTML format.
+
+
+ Supports multiple users, with the ability to share bookmarks with other users or guests.
+
+
+ Extensions for [Firefox](https://addons.mozilla.org/firefox/addon/linkding-extension/) and [Chrome](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe) allow adding and searching bookmarks from within the browser.
+
+
+ REST API for developing scripts or 3rd party apps.
+
+
+ A single Docker container, using SQLite as database. Automated migrations, zero breaking changes.
+
+
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index b1be77b..8ee7be6 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -1,9 +1,29 @@
+:root {
+ --sl-nav-gap: 0.8rem;
+
+ --sl-text-xs: var(--sl-text-sm);
+}
+
+:root,
+::backdrop {
+ /* Colors (dark mode) */
+ --sl-color-white: hsl(0, 0%, 97%); /* “white” */
+ --sl-color-gray-1: hsl(224, 20%, 94%);
+ --sl-color-gray-2: hsl(224, 6%, 85%);
+ --sl-color-gray-3: hsl(224, 6%, 70%);
+ --sl-color-gray-4: hsl(224, 7%, 36%);
+ --sl-color-gray-5: hsl(224, 10%, 23%);
+ --sl-color-gray-6: hsl(224, 14%, 16%);
+ --sl-color-black: hsl(224, 10%, 10%);
+
+ --sl-color-accent: hsl(241, 75%, 64%);
+ --sl-color-text-accent: hsl(241, 90%, 82%);
+}
+
:root[data-theme='light'],
[data-theme='light'] ::backdrop {
--sl-color-accent: hsl(241, 63%, 59%);
--sl-color-text-accent: hsl(241, 63%, 55%);
-
- --sl-nav-gap: 0.8rem;
}
/* Align site search */
@@ -11,6 +31,80 @@
justify-content: flex-end;
}
+/* Site title */
.site-title img {
height: 36px;
+}
+
+/* Social icon size */
+.social-icons svg {
+ width: 20px;
+ height: 20px;
+}
+
+/* Index page */
+[data-has-hero] header {
+ background: transparent;
+ border-bottom: solid 1px transparent;
+ backdrop-filter: blur(10px);
+}
+
+[data-has-hero] .page {
+ --hero-gradient: hsla(241, 63%, 59%, 0.2);
+ background: linear-gradient(205deg, var(--hero-gradient), transparent 30%);
+}
+
+[data-has-hero][data-theme="dark"] .page {
+ --hero-gradient: hsla(241, 63%, 59%, 0.25);
+}
+
+[data-has-hero] .hero {
+ padding-bottom: 1rem;
+}
+
+[data-has-hero] .hero-image img {
+ width: 100%;
+ border: solid 1px var(--sl-color-gray-5);
+ border-radius: .4rem;
+ box-shadow: var(--sl-shadow-lg);
+}
+
+[data-has-hero] .hero-image.dark img {
+ box-shadow: none;
+}
+
+[data-has-hero][data-theme="dark"] .hero-image.light {
+ display: none;
+}
+
+[data-has-hero][data-theme="light"] .hero-image.dark {
+ display: none;
+}
+
+[data-has-hero] h2 {
+ margin-top: 3rem;
+}
+
+[data-has-hero] .card-grid {
+ margin-top: 2rem !important;
+}
+
+@media (min-width: 50rem) {
+ [data-has-hero] .page {
+ --hero-gradient: hsla(241, 63%, 59%, 0.2);
+ background: linear-gradient(205deg, var(--hero-gradient), transparent 50%);
+ }
+
+ [data-has-hero] .hero {
+ padding-bottom: 4rem;
+ }
+
+ [data-has-hero] h2 {
+ margin-top: 6rem !important;
+ }
+
+ [data-has-hero] .card-grid {
+ margin-top: 3rem !important;
+ gap: 3rem;
+ }
}
\ No newline at end of file
+
+
+
+
+## Features
+
+