diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..48ad019 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,21 @@ +# Project Information for AI Agents + +## Build Commands +- `pnpm dev` - Start development server +- `pnpm build` - Build for production (includes pagefind search index) +- `pnpm preview` - Preview production build + +## Code Quality +- `pnpm lint` - Run linter (biome) +- `pnpm format` - Format code (biome) +- `pnpm type-check` - Type check TypeScript + +## Project Stack +- Framework: Astro v5 +- Styling: Tailwind CSS +- Package Manager: pnpm +- Linting/Formatting: Biome + +## Notes +- This is a Fuwari blog template built with Astro +- Search functionality powered by Pagefind \ No newline at end of file diff --git a/src/content/posts b/src/content/posts new file mode 120000 index 0000000..765ee20 --- /dev/null +++ b/src/content/posts @@ -0,0 +1 @@ +../../../blog-post/published \ No newline at end of file diff --git a/src/content/posts/draft.md b/src/content/posts/draft.md deleted file mode 100644 index 77aba5a..0000000 --- a/src/content/posts/draft.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -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 ---- diff --git a/src/content/posts/expressive-code.md b/src/content/posts/expressive-code.md deleted file mode 100644 index 91d47e4..0000000 --- a/src/content/posts/expressive-code.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -title: Expressive Code Example -published: 2024-04-10 -description: How code blocks look in Markdown using Expressive Code. -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 - -``` - -#### 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 - -``` - -#### 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') -``` diff --git a/src/content/posts/guide/cover.jpeg b/src/content/posts/guide/cover.jpeg deleted file mode 100644 index 66104c3..0000000 Binary files a/src/content/posts/guide/cover.jpeg and /dev/null differ diff --git a/src/content/posts/guide/index.md b/src/content/posts/guide/index.md deleted file mode 100644 index 8db1e3d..0000000 --- a/src/content/posts/guide/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Simple Guides for Fuwari -published: 2024-04-01 -description: "How to use this blog template." -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 -description: This is the first post of my new Astro blog. -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 image
2. Start with `/`: For image in `public` dir
3. 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 -``` diff --git a/src/content/posts/markdown-extended.md b/src/content/posts/markdown-extended.md deleted file mode 100644 index c28173b..0000000 --- a/src/content/posts/markdown-extended.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Markdown Extended Features -published: 2024-05-01 -updated: 2024-11-29 -description: 'Read more about Markdown features in Fuwari' -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**]! - -``` \ No newline at end of file diff --git a/src/content/posts/markdown.md b/src/content/posts/markdown.md deleted file mode 100644 index 9695bbf..0000000 --- a/src/content/posts/markdown.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Markdown Example -published: 2023-10-01 -description: A simple example of a Markdown blog post. -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. diff --git a/src/content/posts/video.md b/src/content/posts/video.md deleted file mode 100644 index 4d53a95..0000000 --- a/src/content/posts/video.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Include Video in the Posts -published: 2023-08-01 -description: This post demonstrates how to include embedded video in a blog post. -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 - -