Logo
Posts Projects Photos

Configure Readme page modules (site, header/footer links, social, GitHub, skills) with field docs and examples.

Litos: Readme Page Config
2 mins
REC LitosDocumentation

The following files are compatible with this document:

  • src/pages/index.astro - readme page.
  • src/config.ts - readme page config.
  • src/components/base - most of the components come from here.

Site Configh3

Configure basic site information:

config.ts
export const SITE: Site = {
  title: 'Litos',
  description: 'Litos is a blog theme built with Astro.js and Dnzzk2.',
  website: 'https://litos.vercel.app/',
  lang: 'en',
  base: '/',
  author: 'Dnzzk2',
  ogImage: '/og-image.jpg',
}
PropertyDescription
titleThe title of the site.
descriptionThe description of the site.
websiteYour final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
langThe lang global attribute helps define the language of an element.
baseThe base path to deploy to. Astro will use this path as the root for your pages and assets both in development and in production build.
When you set it to /docs, astro dev will start your server at /docs.
authorThe author of the site.
ogImageThe Open Graph images of the site, but on the specific post page, you can use other ogImage instead.

Top jump link component configuration:

config.ts
export const HEADER_LINKS: Link[] = [
  {
    name: 'Posts',
    url: '/posts',
  },
]

Footer link component configuration:

export const FOOTER_LINKS: Link[] = [
  {
    name: 'Readme',
    url: '/',
  },
]

In the readme page, you can see a string of icons below the theme introduction, which can be configured below. Icons are from Iconify.

config.ts
export const SOCIAL_LINKS: SocialLink[] = [
  {
    name: 'github',
    url: 'https://github.com/yourname',
    icon: 'icon-[ri--github-fill]',
    count: 11,
  },
  {
    name: 'twitter',
    url: 'https://x.com/yourname',
    icon: 'icon-[ri--twitter-x-fill]',
  },
]
PropertyDescription
nameThe name of the social link.
urlThe URL of the social link.
iconThe icon of the social link.
countThe number of followers of this social media link. This is an optional field.

Spotlighth3

config.ts
export const GITHUB_CONFIG: GithubConfig = {
  ENABLED: true,
  GITHUB_USERNAME: 'Dnzzk2',
  TOOLTIP_ENABLED: true,
}
PropertyDescription
ENABLEDWhether to enable GitHub features.
GITHUB_USERNAMEThe GitHub username to fetch data.
TOOLTIP_ENABLEDWhether to enable Github Tooltip (the cursor hover card) features.

Skillsh3

On the readme page, you can see a skill display area where you can showcase your skills by configuring the following code:

config.ts
export const SKILLSSHOWCASE_CONFIG: SkillsShowcaseConfig = {
  SKILLS_ENABLED: true,
  SKILLS_DATA: [
    {
      direction: 'left',
      skills: [
        {
          name: 'JavaScript',
          icon: 'icon-[mdi--language-javascript]',
        },
        {
          name: 'CSS',
          icon: 'icon-[mdi--language-css3]',
        },
        {
          name: 'HTML',
          icon: 'icon-[mdi--language-html5]',
        },
        {
          name: 'TypeScript',
          icon: 'icon-[mdi--language-typescript]',
        },
      ],
    },
  ],
}
PropertyDescription
SKILLS_ENABLEDWhether to enable SkillsShowcase features.
SKILLS_DATAThe data of the skills. A single object represents a row.
    directionEach animation runs in two directions: left and right.
    skillsThe skills array.
        nameThe name of the skill.
        iconThe icon of the skill. Icons are from Iconify.
TIP

It is recommended to run the project locally and check its effectiveness. It is suggested to have at least three different skills per line.

Postsh3

Here, we mainly display pinned posts. If there are no pinned posts, we will display the latest number of size posts based on POSTS_CONFIG.