## File: README.md # 🍥Fuwari [](https://deepwiki.com/saicaca/fuwari) [](https://app.fossa.com/projects/git%2Bgithub.com%2Fsaicaca%2Ffuwari?ref=badge_shield&issueType=license) A static blog template built with [Astro](https://astro.build). [**🖥️ Live Demo (Vercel)**](https://fuwari.vercel.app) 🌏 README in [**中文**](https://github.com/saicaca/fuwari/blob/main/docs/README.zh-CN.md) / [**日本語**](https://github.com/saicaca/fuwari/blob/main/docs/README.ja.md) / [**한국어**](https://github.com/saicaca/fuwari/blob/main/docs/README.ko.md) / [**Español**](https://github.com/saicaca/fuwari/blob/main/docs/README.es.md) / [**ไทย**](https://github.com/saicaca/fuwari/blob/main/docs/README.th.md) / [**Tiếng Việt**](https://github.com/saicaca/fuwari/blob/main/docs/README.vi.md) / [**Bahasa Indonesia**](https://github.com/saicaca/fuwari/blob/main/docs/README.id.md) (Provided by the community and may not always be up-to-date) ## ✨ Features - [x] Built with [Astro](https://astro.build) and [Tailwind CSS](https://tailwindcss.com) - [x] Smooth animations and page transitions - [x] Light / dark mode - [x] Customizable theme colors & banner - [x] Responsive design - [x] Search functionality with [Pagefind](https://pagefind.app/) - [x] [Markdown extended features](https://github.com/saicaca/fuwari?tab=readme-ov-file#-markdown-extended-syntax) - [x] Table of contents - [x] RSS feed ## 🚀 Getting Started 1. Create your blog repository: - [Generate a new repository](https://github.com/saicaca/fuwari/generate) from this template or fork this repository. - Or run one of the following commands: ```sh npm create fuwari@latest yarn create fuwari pnpm create fuwari@latest bun create fuwari@latest deno run -A npm:create-fuwari@latest ``` 2. To edit your blog locally, clone your repository, run `pnpm install` to install dependencies. - Install [pnpm](https://pnpm.io) `npm install pnpm` if you haven't. 3. Edit the config file `src/config.ts` to customize your blog. 4. Run `pnpm new-post ` to create a new post and edit it in `src/content/posts/`. 5. Deploy your blog to Vercel, Netlify, GitHub Pages, etc. following [the guides](https://docs.astro.build/en/guides/deploy/). You need to edit the site configuration in `astro.config.mjs` before deployment. ## 📝 Frontmatter of Posts ```yaml --- title: My First Blog Post published: 2023-09-09 image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false lang: jp # Set only if the post's language differs from the site's language in `config.ts` --- ``` ## 🧩 Markdown Extended Syntax In addition to Astro's default support for [GitHub Flavored Markdown](https://github.github.com/gfm/), several extra Markdown features are included: - Admonitions ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#admonitions)) - GitHub repository cards ([Preview and Usage](https://fuwari.vercel.app/posts/markdown-extended/#github-repository-cards)) - Enhanced code blocks with Expressive Code ([Preview](https://fuwari.vercel.app/posts/expressive-code/) / [Docs](https://expressive-code.com/)) ## ⚡ Commands All commands are run from the root of the project, from a terminal: | Command | Action | |:---------------------------|:----------------------------------------------------| | `pnpm install` | Installs dependencies | | `pnpm dev` | Starts local dev server at `localhost:4321` | | `pnpm build` | Build your production site to `./dist/` | | `pnpm preview` | Preview your build locally, before deploying | | `pnpm check` | Run checks for errors in your code | | `pnpm format` | Format your code using Biome | | `pnpm new-post ` | Create a new post | | `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` | | `pnpm astro --help` | Get help using the Astro CLI | ## ✏️ Contributing Check out the [Contributing Guide](https://github.com/saicaca/fuwari/blob/main/CONTRIBUTING.md) for details on how to contribute to this project. ## 📄 License This project is licensed under the MIT License. [](https://app.fossa.com/projects/git%2Bgithub.com%2Fsaicaca%2Ffuwari?ref=badge_large&issueType=license) --- ## File: docs/README.th.md # 🍥Fuwari แม่แบบสำหรับเว็บบล็อกแบบ static สร้างด้วย [Astro](https://astro.build) [**🖥️ ตัวอย่างการใช้งานจริง (Vercel)**](https://fuwari.vercel.app) ## ✨ คุณสมบัติ - [x] สร้างด้วย [Astro](https://astro.build) และ [Tailwind CSS](https://tailwindcss.com) - [x] มีอนิเมชั่นและการเปลี่ยนหน้าอย่างลื่นไหล - [x] โหมดสว่าง / โหมดมืด - [x] ปรับแต่งสีธีมและแบนเนอร์ได้ - [x] Responsive design (หน้าตาเว็บปรับเปลี่ยนตามขนาดจอ) - [x] ฟังก์ชันการค้นหา ขับเคลื่อนด้วย [Pagefind](https://pagefind.app/) - [x] [คุณสมบัติเพิ่มเติมสำหรับมาร์กดาวน์](https://github.com/saicaca/fuwari/blob/main/docs/README.th.md#-markdown-extended-syntax) - [x] สารบัญ - [x] RSS feed ## 🚀 เริ่มต้นใช้งาน 1. สร้าง repository ใหม่สำหรับบล็อกของคุณ: - [Generate repository ใหม่](https://github.com/saicaca/fuwari/generate) ขึ้นมาจากแม่แบบนี้ หรือจะ fork repository นี้ก็ได้ - หรือจะสร้างโดยการเลือกรันคำสั่งต่อไปนี้ คำสั่งใดคำสั่งหนึ่ง: ```sh npm create fuwari@latest yarn create fuwari pnpm create fuwari@latest bun create fuwari@latest deno run -A npm:create-fuwari@latest ``` 2. เริ่มแก้ไขบล็อกของคุณแบบ local โดยการ clone repository ของคุณ (จากข้อ 1) ไว้ในเครื่องของคุณ แล้วรันคำสั่ง `pnpm install` เพื่อติดตั้ง dependencies ที่จำเป็น - ติดตั้ง [pnpm](https://pnpm.io) ด้วยคำสั่ง `npm install pnpm` ก่อน ถ้ายังไม่เคยติดตั้ง 3. แก้ไขไฟล์การตั้งค่า `src/config.ts` เพื่อปรับแต่งบล็อกของคุณ 4. รันคำสั่ง `pnpm new-post ` เพื่อสร้างโพสต์ใหม่ใน `src/content/posts/` และแก้ไขไฟล์โพสต์นั้น ๆ ให้สมบูรณ์ 5. Deploy เว็บบล็อกของคุณไปยัง Vercel, Netlify, GitHub Pages หรือบริการอื่น ๆ โดยอ้างอิงวิธีการจาก[คู่มือนี้](https://docs.astro.build/en/guides/deploy/) อย่าลืมแก้ไขการตั้งค่าเว็บไซต์ในไฟล์ `astro.config.mjs` ก่อนที่คุณจะ deploy เว็บ ## 📝 Frontmatter (ส่วนหัวไฟล์) ของโพสต์ ```yaml --- title: โพสต์แรกของฉัน published: 2023-09-09 image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false lang: jp # เขียนค่านี้เมื่อภาษาของโพสต์นั้น ๆ แตกต่างจากภาษาของเว็บไซต์ที่ตั้งค่าไว้ใน `config.ts` เท่านั้น --- ``` ## 🧩 Markdown Extended Syntax เดิมที Astro มีการสนับสนุน[ภาษามาร์กดาวน์แบบของ GitHub](https://github.github.com/gfm/) ไว้อยู่แล้ว แต่ Fuwari ได้เพิ่มเติมคุณสมบัติพิเศษอื่น ๆ เข้าไปอีก: - Admonitions หรือ กล่องข้อมูลพิเศษ ([ดูตัวอย่างและการใช้งาน](https://fuwari.vercel.app/posts/markdown-extended/#admonitions)) - การ์ด GitHub Repository ([ดูตัวอย่างและการใช้งาน](https://fuwari.vercel.app/posts/markdown-extended/#github-repository-cards)) - บล็อกโค้ดขั้นสูง ด้วย Expressive Code ([ดูตัวอย่าง](https://fuwari.vercel.app/posts/expressive-code/) / [เอกสารประกอบ](https://expressive-code.com/)) ## ⚡ คำสั่ง คำสั่งที่รันได้ใน terminal จาก root ของโปรเจกต์: | คำสั่ง | การทำงาน | |:---------------------------|:-------------------------------------------------------| | `pnpm install` | ติดตั้ง dependencies | | `pnpm dev` | เปิดเซิร์ฟเวอร์สำหรับการพัฒนาแบบ local ที่ `localhost:4321` | | `pnpm build` | Build เว็บไซต์สำหรับใช้งานจริงไปยังโฟลเดอร์ `./dist/` | | `pnpm preview` | ดูตัวอย่าง build ของคุณแบบ local ก่อนที่จะ deploy จริง | | `pnpm check` | ดำเนินการตรวจสอบหาข้อผิดพลาดในโค้ดของคุณ | | `pnpm format` | จัดรูปแบบโค้ดของคุณด้วย Biome | | `pnpm new-post ` | สร้างโพสต์ใหม่ | | `pnpm astro ...` | รันคำสั่ง CLI เช่น `astro add`, `astro check` | | `pnpm astro --help` | แสดงวิธีใช้งาน Astro CLI | ## ✏️ การมีส่วนร่วม กรุณาอ่าน [แนวทางการมีส่วนร่วม](https://github.com/saicaca/fuwari/blob/main/CONTRIBUTING.md) สำหรับรายละเอียดวิธีการมีส่วนร่วมในโปรเจกต์นี้ ## 📄 สัญญาอนุญาต โปรเจกต์นี้เผยแพร่ภายใต้สัญญาอนุญาตแบบ MIT License --- ## File: src/content/posts/guide/index.md --- title: Simple Guides for Fuwari published: 2024-04-01 image: "./cover.jpeg" tags: ["Fuwari", "Blogging", "Customization"] category: Guides draft: false --- > Cover image source: [Source](https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/208fc754-890d-4adb-9753-2c963332675d/width=2048/01651-1456859105-(colour_1.5),girl,_Blue,yellow,green,cyan,purple,red,pink,_best,8k,UHD,masterpiece,male%20focus,%201boy,gloves,%20ponytail,%20long%20hair,.jpeg) This blog template is built with [Astro](https://astro.build/). For the things that are not mentioned in this guide, you may find the answers in the [Astro Docs](https://docs.astro.build/). ## Front-matter of Posts ```yaml --- title: My First Blog Post published: 2023-09-09 image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false --- ``` | Attribute | Description | |---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `title` | The title of the post. | | `published` | The date the post was published. | | `description` | A short description of the post. Displayed on index page. | | `image` | The cover image path of the post.1. Start with `http://` or `https://`: Use web image2. Start with `/`: For image in `public` dir3. With none of the prefixes: Relative to the markdown file | | `tags` | The tags of the post. | | `category` | The category of the post. | | `draft` | If this post is still a draft, which won't be displayed. | ## Where to Place the Post Files Your post files should be placed in `src/content/posts/` directory. You can also create sub-directories to better organize your posts and assets. ``` src/content/posts/ ├── post-1.md └── post-2/ ├── cover.png └── index.md ``` --- ## File: src/content/posts/draft.md --- title: Draft Example published: 2022-07-01 tags: [Markdown, Blogging, Demo] category: Examples draft: true --- # This Article is a Draft This article is currently in a draft state and is not published. Therefore, it will not be visible to the general audience. The content is still a work in progress and may require further editing and review. When the article is ready for publication, you can update the "draft" field to "false" in the Frontmatter: ```markdown --- title: Draft Example published: 2024-01-11T04:40:26.381Z tags: [Markdown, Blogging, Demo] category: Examples draft: false --- --- ## File: src/content/posts/expressive-code.md --- title: Expressive Code Example published: 2024-04-10 tags: [Markdown, Blogging, Demo] category: Examples draft: false --- Here, we'll explore how code blocks look using [Expressive Code](https://expressive-code.com/). The provided examples are based on the official documentation, which you can refer to for further details. ## Expressive Code ### Syntax Highlighting [Syntax Highlighting](https://expressive-code.com/key-features/syntax-highlighting/) #### Regular syntax highlighting ```js console.log('This code is syntax highlighted!') ``` #### Rendering ANSI escape sequences ```ansi ANSI colors: - Regular: Red Green Yellow Blue Magenta Cyan - Bold: Red Green Yellow Blue Magenta Cyan - Dimmed: Red Green Yellow Blue Magenta Cyan 256 colors (showing colors 160-177): 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 Full RGB colors: ForestGreen - RGB(34, 139, 34) Text formatting: Bold Dimmed Italic Underline ``` ### Editor & Terminal Frames [Editor & Terminal Frames](https://expressive-code.com/key-features/frames/) #### Code editor frames ```js title="my-test-file.js" console.log('Title attribute example') ``` --- ```html File name comment example ``` #### Terminal frames ```bash echo "This terminal frame has no title" ``` --- ```powershell title="PowerShell terminal example" Write-Output "This one has a title!" ``` #### Overriding frame types ```sh frame="none" echo "Look ma, no frame!" ``` --- ```ps frame="code" title="PowerShell Profile.ps1" # Without overriding, this would be a terminal frame function Watch-Tail { Get-Content -Tail 20 -Wait $args } New-Alias tail Watch-Tail ``` ### Text & Line Markers [Text & Line Markers](https://expressive-code.com/key-features/text-markers/) #### Marking full lines & line ranges ```js {1, 4, 7-8} // Line 1 - targeted by line number // Line 2 // Line 3 // Line 4 - targeted by line number // Line 5 // Line 6 // Line 7 - targeted by range "7-8" // Line 8 - targeted by range "7-8" ``` #### Selecting line marker types (mark, ins, del) ```js title="line-markers.js" del={2} ins={3-4} {6} function demo() { console.log('this line is marked as deleted') // This line and the next one are marked as inserted console.log('this is the second inserted line') return 'this line uses the neutral default marker type' } ``` #### Adding labels to line markers ```jsx {"1":5} del={"2":7-8} ins={"3":10-12} // labeled-line-markers.jsx {children && !active && (typeof children === 'string' ? {children} : children)} ``` #### Adding long labels on their own lines ```jsx {"1. Provide the value prop here:":5-6} del={"2. Remove the disabled and active states:":8-10} ins={"3. Add this to render the children inside the button:":12-15} // labeled-line-markers.jsx {children && !active && (typeof children === 'string' ? {children} : children)} ``` #### Using diff-like syntax ```diff +this line will be marked as inserted -this line will be marked as deleted this is a regular line ``` --- ```diff --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +this is an actual diff file -all contents will remain unmodified no whitespace will be removed either ``` #### Combining syntax highlighting with diff-like syntax ```diff lang="js" function thisIsJavaScript() { // This entire block gets highlighted as JavaScript, // and we can still add diff markers to it! - console.log('Old code to be removed') + console.log('New and shiny code!') } ``` #### Marking individual text inside lines ```js "given text" function demo() { // Mark any given text inside lines return 'Multiple matches of the given text are supported'; } ``` #### Regular expressions ```ts /ye[sp]/ console.log('The words yes and yep will be marked.') ``` #### Escaping forward slashes ```sh /\/ho.*\// echo "Test" > /home/test.txt ``` #### Selecting inline marker types (mark, ins, del) ```js "return true;" ins="inserted" del="deleted" function demo() { console.log('These are inserted and deleted marker types'); // The return statement uses the default marker type return true; } ``` ### Word Wrap [Word Wrap](https://expressive-code.com/key-features/word-wrap/) #### Configuring word wrap per block ```js wrap // Example with wrap function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` --- ```js wrap=false // Example with wrap=false function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` #### Configuring indentation of wrapped lines ```js wrap preserveIndent // Example with preserveIndent (enabled by default) function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` --- ```js wrap preserveIndent=false // Example with preserveIndent=false function getLongString() { return 'This is a very long string that will most probably not fit into the available space unless the container is extremely wide' } ``` ## Collapsible Sections [Collapsible Sections](https://expressive-code.com/plugins/collapsible-sections/) ```js collapse={1-5, 12-14, 21-24} // All this boilerplate setup code will be collapsed import { someBoilerplateEngine } from '@example/some-boilerplate' import { evenMoreBoilerplate } from '@example/even-more-boilerplate' const engine = someBoilerplateEngine(evenMoreBoilerplate()) // This part of the code will be visible by default engine.doSomething(1, 2, 3, calcFn) function calcFn() { // You can have multiple collapsed sections const a = 1 const b = 2 const c = a + b // This will remain visible console.log(`Calculation result: ${a} + ${b} = ${c}`) return c } // All this code until the end of the block will be collapsed again engine.closeConnection() engine.freeMemory() engine.shutdown({ reason: 'End of example boilerplate code' }) ``` ## Line Numbers [Line Numbers](https://expressive-code.com/plugins/line-numbers/) ### Displaying line numbers per block ```js showLineNumbers // This code block will show line numbers console.log('Greetings from line 2!') console.log('I am on line 3') ``` --- ```js showLineNumbers=false // Line numbers are disabled for this block console.log('Hello?') console.log('Sorry, do you know what line I am on?') ``` ### Changing the starting line number ```js showLineNumbers startLineNumber=5 console.log('Greetings from line 5!') console.log('I am on line 6') ``` --- ## File: src/content/posts/markdown.md --- title: Markdown Example published: 2023-10-01 tags: [Markdown, Blogging, Demo] category: Examples draft: false --- # An h1 header Paragraphs are separated by a blank line. 2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists look like: - this one - that one - the other one Note that --- not considering the asterisk --- the actual text content starts at 4-columns in. > Block quotes are > written like so. > > They can span multiple paragraphs, > if you like. Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺ ## An h2 header Here's a numbered list: 1. first item 2. second item 3. third item Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample: # Let me re-iterate ... for i in 1 .. 10 { do-something(i) } As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like: ``` define foobar() { print "Welcome to flavor country!"; } ``` (which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it: ```python import time # Quick, count to ten! for i in range(10): # (but not *too* quick) time.sleep(0.5) print i ``` ### An h3 header Now a nested list: 1. First, get these ingredients: - carrots - celery - lentils 2. Boil some water. 3. Dump everything in the pot and follow this algorithm: find wooden spoon uncover pot stir cover pot balance wooden spoon precariously on pot handle wait 10 minutes goto first step (or shut off burner when done) Do not bump wooden spoon or it will fall. Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above). Here's a link to [a website](http://foo.bar), to a [local doc](local-doc.html), and to a [section heading in the current doc](#an-h2-header). Here's a footnote [^1]. [^1]: Footnote text goes here. Tables can look like this: size material color --- 9 leather brown 10 hemp canvas natural 11 glass transparent Table: Shoes, their sizes, and what they're made of (The above is the caption for the table.) Pandoc also supports multi-line tables: --- keyword text --- red Sunsets, apples, and other red or reddish things. green Leaves, grass, frogs and other things it's not easy being. --- A horizontal rule follows. --- Here's a definition list: apples : Good for making applesauce. oranges : Citrus! tomatoes : There's no "e" in tomatoe. Again, text is indented 4 spaces. (Put a blank line between each term/definition pair to spread things out more.) Here's a "line block": | Line one | Line too | Line tree and images can be specified like so: [//]: # (![example image](./demo-banner.png "An exemplary image")) Inline math equations go in like so: $\omega = d\phi / dt$. Display math should get its own line and be put in in double-dollarsigns: $$I = \int \rho R^{2} dV$$ $$ \begin{equation*} \pi =3.1415926535 \;8979323846\;2643383279\;5028841971\;6939937510\;5820974944 \;5923078164\;0628620899\;8628034825\;3421170679\;\ldots \end{equation*} $$ And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc. --- ## File: src/content/posts/markdown-extended.md --- title: Markdown Extended Features published: 2024-05-01 updated: 2024-11-29 image: '' tags: [Demo, Example, Markdown, Fuwari] category: 'Examples' draft: false --- ## GitHub Repository Cards You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API. ::github{repo="Fabrizz/MMM-OnSpotify"} Create a GitHub repository card with the code `::github{repo="/"}`. ```markdown ::github{repo="saicaca/fuwari"} ``` ## Admonitions Following types of admonitions are supported: `note` `tip` `important` `warning` `caution` :::note Highlights information that users should take into account, even when skimming. ::: :::tip Optional information to help a user be more successful. ::: :::important Crucial information necessary for users to succeed. ::: :::warning Critical content demanding immediate user attention due to potential risks. ::: :::caution Negative potential consequences of an action. ::: ### Basic Syntax ```markdown :::note Highlights information that users should take into account, even when skimming. ::: :::tip Optional information to help a user be more successful. ::: ``` ### Custom Titles The title of the admonition can be customized. :::note[MY CUSTOM TITLE] This is a note with a custom title. ::: ```markdown :::note[MY CUSTOM TITLE] This is a note with a custom title. ::: ``` ### GitHub Syntax > [!TIP] > [The GitHub syntax](https://github.com/orgs/community/discussions/16925) is also supported. ``` > [!NOTE] > The GitHub syntax is also supported. > [!TIP] > The GitHub syntax is also supported. ``` ### Spoiler You can add spoilers to your text. The text also supports **Markdown** syntax. The content :spoiler[is hidden **ayyy**]! ```markdown The content :spoiler[is hidden **ayyy**]! ``` --- ## File: src/content/posts/video.md --- title: Include Video in the Posts published: 2023-08-01 tags: [Example, Video] category: Examples draft: false --- Just copy the embed code from YouTube or other platforms, and paste it in the markdown file. ```yaml --- title: Include Video in the Post published: 2023-10-19 // ... --- ``` ## YouTube ## Bilibili --- ## File: src/content/spec/about.md # About This is the demo site for [Fuwari](https://github.com/saicaca/fuwari). ::github{repo="saicaca/fuwari"} > ### Sources of images used in this site > - [Unsplash](https://unsplash.com/) > - [星と少女](https://www.pixiv.net/artworks/108916539) by [Stella](https://www.pixiv.net/users/93273965) > - [Rabbit - v1.4 Showcase](https://civitai.com/posts/586908) by [Rabbit_YourMajesty](https://civitai.com/user/Rabbit_YourMajesty)