Improve docs

This commit is contained in:
Sascha Ißbrücker 2024-09-19 10:27:53 +02:00
parent ceceb56164
commit f3c1101746
9 changed files with 225 additions and 37 deletions

View file

@ -35,7 +35,7 @@ The name comes from:
**Screenshot:**
![Screenshot](/docs/src/assets/linkding-screenshot.png?raw=true "Screenshot")
![Screenshot](/docs/public/linkding-screenshot.png?raw=true "Screenshot")
## Getting Started

View file

@ -18,6 +18,7 @@ export default defineConfig({
label: 'Getting Started',
items: [
{ label: 'Installation', slug: 'installation' },
{ label: 'Options', slug: 'options' },
{ label: 'Managed Hosting', slug: 'managed-hosting' },
{ label: 'Browser Extension', slug: 'browser-extension' },
],
@ -25,7 +26,6 @@ export default defineConfig({
{
label: 'Guides',
items: [
{ label: 'Options', slug: 'options' },
{ label: 'Backups', slug: 'backups' },
{ label: 'Admin', slug: 'admin' },
{ label: 'Keyboard Shortcuts', slug: 'shortcuts' },

Binary file not shown.

After

Width:  |  Height:  |  Size: 432 KiB

View file

Before

Width:  |  Height:  |  Size: 447 KiB

After

Width:  |  Height:  |  Size: 447 KiB

View file

@ -0,0 +1,45 @@
---
import {icons} from './icons';
interface Props {
icon: keyof typeof icons;
title: string;
}
const {icon, title} = Astro.props;
---
<article class="card sl-flex">
<p class="title sl-flex">
{icon && <span class="icon" set:html={icons[icon]}/>}
<span set:html={title}/>
</p>
<div class="body">
<slot/>
</div>
</article>
<style>
.card {
flex-direction: column;
gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
}
.title {
font-weight: 600;
font-size: var(--sl-text-h4);
color: var(--sl-color-white);
line-height: var(--sl-line-height-headings);
gap: .8rem;
align-items: center;
}
.card .icon {
border-radius: 0.25rem;
color: var(--sl-color-text-accent);
}
.card .body {
margin: 0;
font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
}
</style>

View file

@ -0,0 +1,13 @@
export const icons = {
'focus': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r=".5" fill="currentColor" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>`,
'settings': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>`,
'plus': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>`,
'archive': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" /><path d="M10 12l4 0" /></svg>`,
'checkbox': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M9 12l2 2l4 -4" /></svg>`,
'file-export': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" /></svg>`,
'users': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /><path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /></svg>`,
'login': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" /><path d="M21 12h-13l3 -3" /><path d="M11 15l-3 -3" /></svg>`,
'puzzle': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>`,
'cloud': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878" /></svg>`,
'mood-smile': `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-mood-smile"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 10l.01 0" /><path d="M15 10l.01 0" /><path d="M9.5 15a3.5 3.5 0 0 0 5 0" /></svg>`,
}

View file

@ -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:**
![Screenshot](../../assets/linkding-screenshot.png)

View file

@ -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';
<a href="/linkding-screenshot.png" className="hero-image light">
<img src="/linkding-screenshot.png"/>
</a>
<a href="/linkding-screenshot-dark.png" className="hero-image dark">
<img src="/linkding-screenshot-dark.png"/>
</a>
## Features
<CardGrid>
<Card title="Focused" icon="focus">
Optimized for readability, allowing to quickly add and find bookmarks without distractions.
</Card>
<Card title="Customizable" icon="settings">
Features can be enabled or disabled as needed, adjustable UI through a number of settings.
</Card>
<Card title="Metadata" icon="plus">
Automatically fetches titles, descriptions, icons and preview images of bookmarked websites.
</Card>
<Card title="Archiving" icon="archive">
Automatically create snapshots of bookmarked websites, either as local HTML file or on the Internet Archive.
</Card>
<Card title="Bulk editing" icon="checkbox">
Apply any operation to a selection of bookmarks or the whole collection.
</Card>
<Card title="Import / Export" icon="file-export">
Import and export bookmarks in the Netscape HTML format.
</Card>
<Card title="Multi-User" icon="users">
Supports multiple users, with the ability to share bookmarks with other users or guests.
</Card>
<Card title="Browser extension" icon="puzzle">
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.
</Card>
<Card title="REST API" icon="cloud">
REST API for developing scripts or 3rd party apps.
</Card>
<Card title="Low maintenance" icon="mood-smile">
A single Docker container, using SQLite as database. Automated migrations, zero breaking changes.
</Card>
</CardGrid>

View file

@ -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;
}
}