Refactor README and improve component imports

This commit is contained in:
KazooTTT
2025-01-04 12:41:16 +08:00
parent 9b71eb792d
commit 310ff3aa7f
9 changed files with 24 additions and 96 deletions

View File

@ -1,79 +1,7 @@
# Astro Resume # KazooTTT的博客
## Features 主页:[https://kazoottt.top](https://kazoottt.top)
- Astro v4 ## 鸣谢
- TailwindCSS utility classes
- ESLint / Prettier pre-installed and pre-configured
- Accessible, semantic HTML markup
- Responsive & SEO-friendly
- Dark / Light mode, using Tailwind and CSS variables (referenced from shadcn)
- [Astro Assets Integration](https://docs.astro.build/en/guides/assets/) for optimised images
- MD & [MDX](https://docs.astro.build/en/guides/markdown-content/#mdx-only-features) posts
- Pagination
- [Automatic RSS feed](https://docs.astro.build/en/guides/rss)
- Auto-generated [sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)
- [Expressive Code](https://expressive-code.com/) source code and syntax highlighter
## Credits 本项目基于 [https://github.com/srleom/astro-theme-resume](https://github.com/srleom/astro-theme-resume) 修改。
- [astro-theme-cactus](https://github.com/chrismwilliams/astro-theme-cactus) for blog design
- [minirezume-framer](https://minirezume.framer.website/) for resume homepage design
## Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
├── public/
├── src/
├── assets/
│   ├── components/
│   ├── content/
│   ├── layouts/
| ├── pages/
| ├── styles/
| ├── utils/
| ├── site.config.ts
│   └── types.ts
├── .elintrc.cjs
├── .gitignore
├── .prettierignore
├── package.json
├── prettier.config.cjs
├── README.md
├── tailwind.config.js
└── tsconfig.json
```
## Editing guide
### Site info
To edit site info such as site title and description, edit the `src/site.config.ts` file.
### Page contents
To edit the resume homepage content and design, edit the `src/pages/index.astro` file.
### Page components
To edit page components found site-wide such as the card used in the homepage, edit the files found in the `src/components/` directory.
### Layouts
To edit the base layouts of all pages, edit the `src/layouts/BaseLayout.astro` file.
To edit the layout of a blog article, edit the `src/layouts/BlogPost.astro` file.
### Blog content
To add blog content, insert `.md` files in the `src/content/` directory.
To add images in blog articles, insert a folder in the `src/content/` directory, add both the `.md` and image files into the new folder, and reference the image in your `.md` file.
## Theming
To change the theme colours of the site, edit the `src/styles/app.css` file.
To change the fonts of the site, add your font files into `/public`, add it as a `@font-face` in the `src/styles/app.css` file, as a `fontFamily` in the `tailwind.config.js` file, and apply the new font class to the `body` tag in the `src/layouts/BaseLayout.astro` file.

View File

@ -1,7 +1,7 @@
--- ---
import { Image } from 'astro:assets'
import type { ImageMetadata } from 'astro'
import { cn } from '@/utils' import { cn } from '@/utils'
import type { ImageMetadata } from 'astro'
import { Image } from 'astro:assets'
const { const {
as: Tag = 'div', as: Tag = 'div',
@ -49,8 +49,8 @@ if (imagePath) {
<div class='flex flex-col gap-y-1.5'> <div class='flex flex-col gap-y-1.5'>
<div class='flex flex-col gap-y-0.5'> <div class='flex flex-col gap-y-0.5'>
<h1 class='text-lg font-medium'>{heading}</h1> <h1 class='text-lg font-medium'>{heading}</h1>
<h2 class='text-muted-foreground'>{subheading}</h2> {subheading && <h2 class='text-muted-foreground'>{subheading}</h2>}
<h2 class='text-muted-foreground'>{date}</h2> {date && <h2 class='text-muted-foreground'>{date}</h2>}
</div> </div>
<slot /> <slot />
</div> </div>

View File

@ -1,8 +1,8 @@
--- ---
import type { CollectionEntry } from 'astro:content'
import FormattedDate from '../FormattedDate.astro'
import Card from '../Card.astro'
import { Icon } from 'astro-icon/components' import { Icon } from 'astro-icon/components'
import type { CollectionEntry } from 'astro:content'
import Card from '../Card.astro'
import FormattedDate from '../FormattedDate.astro'
import Label from '../Label.astro' import Label from '../Label.astro'
interface Props { interface Props {

View File

@ -1,6 +1,6 @@
--- ---
import PageLayout from '@/layouts/BaseLayout.astro'
import Button from '@/components/Button.astro' import Button from '@/components/Button.astro'
import PageLayout from '@/layouts/BaseLayout.astro'
const meta = { const meta = {
description: 'Not found', description: 'Not found',

View File

@ -4,10 +4,10 @@ export const prerender = true
import type { GetStaticPaths, Page } from 'astro' import type { GetStaticPaths, Page } from 'astro'
import type { CollectionEntry } from 'astro:content' import type { CollectionEntry } from 'astro:content'
import Button from '@/components/Button.astro'
import Pagination from '@/components/Paginator.astro' import Pagination from '@/components/Paginator.astro'
import PostPreview from '@/components/blog/PostPreview.astro' import PostPreview from '@/components/blog/PostPreview.astro'
import PageLayout from '@/layouts/BaseLayout.astro' import PageLayout from '@/layouts/BaseLayout.astro'
import Button from '@/components/Button.astro'
import { getAllPosts, getUniqueCategories, sortMDByDate } from '@/utils' import { getAllPosts, getUniqueCategories, sortMDByDate } from '@/utils'
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => { export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
@ -56,7 +56,7 @@ const paginationProps = {
<PageLayout meta={meta}> <PageLayout meta={meta}>
<div class='w-full'> <div class='w-full'>
<Button title='Back' href='/blog' style='button'> <Button title='Back' href='/categories' style='button'>
<svg <svg
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
width='14' width='14'

View File

@ -7,7 +7,7 @@ const allPosts = await getAllPosts()
const allCategories = getUniqueCategoriesWithCount(allPosts) const allCategories = getUniqueCategoriesWithCount(allPosts)
const meta = { const meta = {
description: "A list of all the topics I've written about in my posts", description: 'A list of all the topics I\'ve written about in my posts',
title: 'All Categories' title: 'All Categories'
} }
--- ---

View File

@ -36,7 +36,7 @@ const friends = [
}, },
{ {
name: `Roi's Blog`, name: `Roi's Blog`,
url: 'https://roi.moe/', url: 'https://roi.moe/'
} }
] ]
--- ---

View File

@ -18,9 +18,9 @@ Disallow: /500
` `
export const GET: APIRoute = () => { export const GET: APIRoute = () => {
return new Response(robotsTxt.trim(), { return new Response(robotsTxt.trim(), {
headers: { headers: {
'Content-Type': 'text/plain; charset=utf-8', 'Content-Type': 'text/plain; charset=utf-8'
}, }
}) })
} }

View File

@ -4,10 +4,10 @@ export const prerender = true
import type { GetStaticPaths, Page } from 'astro' import type { GetStaticPaths, Page } from 'astro'
import type { CollectionEntry } from 'astro:content' import type { CollectionEntry } from 'astro:content'
import Button from '@/components/Button.astro'
import Pagination from '@/components/Paginator.astro' import Pagination from '@/components/Paginator.astro'
import PostPreview from '@/components/blog/PostPreview.astro' import PostPreview from '@/components/blog/PostPreview.astro'
import PageLayout from '@/layouts/BaseLayout.astro' import PageLayout from '@/layouts/BaseLayout.astro'
import Button from '@/components/Button.astro'
import { getAllPosts, getUniqueTags, sortMDByDate } from '@/utils' import { getAllPosts, getUniqueTags, sortMDByDate } from '@/utils'
export const getStaticPaths: GetStaticPaths = async ({ paginate }) => { export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
@ -54,7 +54,7 @@ const paginationProps = {
<PageLayout meta={meta}> <PageLayout meta={meta}>
<div class='w-full'> <div class='w-full'>
<Button title='Back' href='/blog' style='button'> <Button title='Back' href='/tags' style='button'>
<svg <svg
xmlns='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg'
width='14' width='14'