Giter VIP home page Giter VIP logo

frosti's Introduction

🧊 Frosti

A clean, elegant, and fast static blog template! Developed with Astro!

πŸ–₯️ Frosti DemoΒ Β Β /   🌏 δΈ­ζ–‡ READMEΒ Β Β /   ❀️My Blog

Note

For a better reading experience, please visit -> https://frosti.saroprock.com

πŸ–₯️ Preview

view

⏲️ performance

speed speed

✨ Features

  • βœ… Lighthouse 400
  • βœ… Blog content support
  • βœ… View transition animations
  • βœ… You can search your articles
  • βœ… Light / Dark mode available
  • βœ… Various components for enriching article content
    • Diverse alerts
    • Code block copy buttons
    • More content supported by daisyUI……
  • βœ… Various components for enriching page content
    • Timeline component
    • Friends card component
  • βœ… Comment system built with Waline
  • βœ… Beautiful pages built with Tailwind CSS and daisyUI

Note

The comment system needs to be configured by oneself, please refer to Waline Change src\components\Comment.astro.

πŸš€ Project Structure

\Frosti
β”œβ”€β”€ 400.png
β”œβ”€β”€ astro.config.mjs
β”œβ”€β”€ categories.txt
β”œβ”€β”€ CHANGELOG.md
β”œβ”€β”€ LICENSE
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ pnpm-lock.yaml
β”œβ”€β”€ public
|  β”œβ”€β”€ favicon.ico
|  β”œβ”€β”€ favicon.svg
|  β”œβ”€β”€ fonts
|  |  └── CascadiaCode.woff2
|  β”œβ”€β”€ home.webp
|  β”œβ”€β”€ profile.webp
|  └── view.png
β”œβ”€β”€ README.md
β”œβ”€β”€ src
|  β”œβ”€β”€ components
|  |  β”œβ”€β”€ BaseCard.astro
|  |  β”œβ”€β”€ BaseHead.astro
|  |  β”œβ”€β”€ blog
|  |  |  β”œβ”€β”€ error.astro
|  |  |  β”œβ”€β”€ info.astro
|  |  |  β”œβ”€β”€ success.astro
|  |  |  └── warning.astro
|  |  β”œβ”€β”€ Content.astro
|  |  β”œβ”€β”€ Comment.astro
|  |  β”œβ”€β”€ EnvelopeCard.astro
|  |  β”œβ”€β”€ Footer.astro
|  |  β”œβ”€β”€ FormattedDate.astro
|  |  β”œβ”€β”€ Header.astro
|  |  β”œβ”€β”€ HeaderMenu.astro
|  |  β”œβ”€β”€ License.astro
|  |  β”œβ”€β”€ page
|  |  |  β”œβ”€β”€ LinkCard.astro
|  |  |  β”œβ”€β”€ LinkThere.astro
|  |  |  └── TimeLine.astro
|  |  β”œβ”€β”€ ProfileCard.astro
|  |  β”œβ”€β”€ ProfileCardFooter.astro
|  |  β”œβ”€β”€ ProfileCardMenu.astro
|  |  β”œβ”€β”€ ProjectCard.astro
|  |  β”œβ”€β”€ ProjectJS.astro
|  |  └── ThemeIcon.astro
|  β”œβ”€β”€ consts.ts
|  β”œβ”€β”€ content
|  |  β”œβ”€β”€ blog
|  |  |  β”œβ”€β”€ markdown-style-guide.md
|  |  |  └── using-mdx.mdx
|  |  └── config.ts
|  β”œβ”€β”€ env.d.ts
|  β”œβ”€β”€ layouts
|  |  └── BaseLayout.astro
|  β”œβ”€β”€ pages
|  |  β”œβ”€β”€ about.mdx
|  |  β”œβ”€β”€ blog
|  |  |  β”œβ”€β”€ tag
|  |  |  β”œβ”€β”€ [...page].astro
|  |  |  └── [...slug].astro
|  |  β”œβ”€β”€ friend.mdx
|  |  β”œβ”€β”€ frosti.mdx
|  |  β”œβ”€β”€ index.mdx
|  |  β”œβ”€β”€ project.mdx
|  |  └── rss.xml.js
|  β”œβ”€β”€ scripts
|  |  β”œβ”€β”€ copybutton.mjs
|  |  └── time.mjs
|  └── styles
|     β”œβ”€β”€ global.scss
|     └── waline.scss
β”œβ”€β”€ tailwind.config.js
└── tsconfig.json

βœ’οΈ Article Information

Name Meaning Mandatory
title Article title Yes
description Article description Yes
pubDate Article date Yes
image Article cover No
tags Article tags No
badge Article badge No

⬇️ Usage

Use Frosti by passing the --template parameter to the create astro command!

npm create astro@latest -- --template EveSunMaple/Frosti

🎯 Plans

  • Add table of contents (done but CSS not written yet) (Jul 13 2024)
  • Add timeline component (Apr 21, 2024)
  • Add friends component (Apr 21, 2024)

πŸ‘€ Issues

  • global.css is too messy
  • ~~Light / Dark mode transition currently not implemented ENOUGHπŸ› οΈ
  • Website score has not reached 400 points yet GET IT✨

πŸŽ‰ Thanks

@Saicaca His inspiration was the main reason for me to create this theme.

@WRXinYue Helped me a lot when I was first starting out.

frosti's People

Contributors

evesunmaple avatar yaoqxcn avatar nick-cjyx9 avatar wrxinyue avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.