# vitepress-sls-blog-tmpl

Vitepress blog template for freedom sites by Ivan K.

## Use in your project

See `example` dir

## Use in dev mode

Clone repo and run inside it.

```
pnpm link
pnpm build:tw
```

The `build:tw` command only builds tailwind classes that are used in
this blog template. All other styles as included in layout and
are built via vitepress of your project

## Config

```
export default {
  themeConfig: {
    // show author name on the posts list items
    showAuthorInPostList: true
    authors:
      - id: john-smith
        name: John Smith
        descr: Some MD descr
        link?: If defined then this link will be used. If not then will be use link to author page
    homeBgParalaxOffset: 150
    sidebarLogoSrc: "/img/sidebar-logo.webp",
  },
};
```

## Site config

```
  topBar:
    links:
      - text: "${PROPS.t.links.donate}"
        href: "${PROPS.siteUrl}/${PROPS.lang}/page/donate"
        icon: "${PROPS.donateIcon}"
        # show on desktop and on mobile
        mobileToo: true
        # show only on mobile and don't show on desktop
        mobileOnly: true

```

## Post meta data

You can publish all types of posts - article, post, video and audio. They are the same.

### All the posts have common parameters

```
---
title?: Use it only if you want to replace title which is got from H1 tag
description: content of meta descr and preview text if it allowed
# If true - then use description or first part of the post in a list and article
# If false | undefined - then use first part of the post in a list and don't use in article
descrAsPreview: true | false
# If has text - then use this text in a list and in an article
# If not set - then depend of descrAsPreview
# It won't shown in a post if media, or cover is set
previewText: text for list item and article preview
pubDate: Publication date in iso format. Better to use time to order posts which are published at the same day
# The main image of article. Optional
cover: /media/img.jpg
coverDescr: description of cover image in MD format
# ID of author of site team. It it some other author just put his name into the text
authorId: john-smith
# Url where you can find comments of it post in social media
commentUrl: https://...
# List of tags. Tags can include spaces
tags:
  - some
# Add canonical link to page head for SEO (prevents duplicate content issues)
canonical: "https://example.com/en/post/post-slug"  # URL канонической страницы
# или
canonical: "self"  # Ссылка на саму страницу
# или
canonical: "s"     # Сокращенная версия

...special params
---
```

### Special parameters of posts

```
---
...common params

# Link to a video on youtube or another platform. It is used in a watch video button
videoLink: htts://...
# Language of video link if it doesn't equal the language of the page
videoLinkLang: en | ru | ...
# Links to poscast of this post
podcasts:
  # means special page of this podcast e.g on https://mave.digital
  site: "https://..",
  castbox: "https://..",
  soundstream: "https://..",
  spotify: "https://..",
  vk: "https://..",
  yandexmusic: "https://..",
  deezer: "https://..",
  pocketcasts: "https://..",
  applepodcasts: "https://..",
  overcast: "https://..",
  zvuk: "https://..",
  podcastaddiction: "https://..",
# Language of podcast if it doesn't equal the language of the page
podcastLang: en | ru | ...
---

If the post doesn't have any media then the first image will be used as main image to show in lists.

## SEO Features

### Canonical Links
Add `canonical` parameter to your post frontmatter to automatically include a canonical link in the page head. This helps search engines understand which version of a page is the primary one, preventing duplicate content issues.

**Options:**
- `canonical: "https://example.com/en/post/post-slug"` - Link to another page
- `canonical: "self"` - Link to the current page itself
- `canonical: "s"` - Short version of "self"

See [CANONICAL_README.md](CANONICAL_README.md) for detailed documentation.
```

## Publish

```
yarn publish
```

## Youtube

see https://github.com/miletorix/vitepress-youtube-embed

```
<YouTubeEmbed video-id="vidid" />
```