Customizing VitePress as Personal Homepage

Introduction

My homepage is built with VitePress. Previously, it looked like this:

The left and right sides were unbalanced, making it quite unappealing.

So I made a simple design mockup using Google Slides:

With this as my target, I researched how to develop VitePress to achieve this design.

Importing Components

After researching components related to "SNS links" and "theme toggle button", I decided to import these components from the VitePress official repository:

• VPSocialLink.vue
• VPSocialLinks.vue
• VPSwitch.vue
• VPSwitchAppearance.vue

MyLayout.vue

Based on the slots provided in Layout Slots, I tested and chose the appropriate slot home-hero-after, and created a MyLayout.vue component:

MyLayout.vue

<script setup>
import DefaultTheme from "vitepress/theme";

import VPSwitchAppearance from './VPSwitchAppearance.vue'
import VPSocialLinks from './VPSocialLinks.vue'

import { useData } from '../composables/data'
const { theme } = useData()

const { Layout } = DefaultTheme;
</script>

<template>
  <Layout>
    <template #home-hero-after>
      <div>
        <VPSocialLinks :links="theme.socialLinks" />
      </div>
      <div class="my_VPSwitch">
        <VPSwitchAppearance />
      </div>
    </template>
  </Layout>
</template>

Since the VPSocialLinks component needs theme.socialLinks, I imported theme.

Centering the Theme Toggle Button

The SNS links VPSocialLinks component comes with centered CSS styles in its <style> section, so no manual adjustment was needed.

<style scoped>
.VPSocialLink {
  display: flex;
  -content: center;
  align-items: center;
}
</style>

What needs manual centering adjustment is the theme toggle button.

I added a my_VPSwitch class to the toggle button in MyLayout.vue, then adjusted the centering and padding in custom.css.

.my_VPSwitch {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

Done.

Background Image

I had planned to use a pure white line art as the background image, so visitors would be pleasantly surprised when clicking the theme toggle button.

╰(￣ω￣ｏ)

I searched Google using the keywords Hatsune Miku Line Art, casually found two line art images of MiKU, and fed them to ChatGPT to process them.

ChatGPT Processing Line Art

Prompt

Make white areas transparent and black areas white, please.

Response

# Load the new image
image_path = '/mnt/data/image.png'
image_new = Image.open(image_path)

# Convert the image to grayscale
grayscale_image_new = image_new.convert("L")

# Create a new image with an alpha channel (RGBA) based on the grayscale values
transparent_image_new = Image.new("RGBA", grayscale_image_new.size)

# Iterate through each pixel to apply the transformation:
# Convert non-white areas to white and white areas to transparent
for x in range(grayscale_image_new.width):
    for y in range(grayscale_image_new.height):
        pixel = grayscale_image_new.getpixel((x, y))
        # Set white areas (close to 255) to be transparent
        if pixel > 200:
            transparent_image_new.putpixel((x, y), (255, 255, 255, 0))  # Transparent
        else:
            transparent_image_new.putpixel((x, y), (255, 255, 255, 255))  # Solid white

# Save the transformed image
output_path_new = '/mnt/data/converted_image_transparent.png'
transparent_image_new.save(output_path_new)

output_path_new

Then I estimated the middle spacing and combined the two images in Photoshop, setting it as the background for the body.

Trying DALL-E for Images

I tried making some line art using ChatGPT's DALL-E, but the results weren't very satisfactory.

1

2

3

4

5

I have already been exploring Stable Diffusion.