DOCSEARCHbyAlgolia
Submit Docs

fuwari

repository·main·Indexed 26 days ago

https://github.com/saicaca/fuwari

A feature-rich, responsive static blog template built with Astro and Tailwind CSS. It includes built-in search, dark mode, smooth animations, and extended Markdown syntax supporting admonitions, GitHub repository cards, and advanced code blocks via Expressive Code. The project provides a CLI for managing posts and site builds, with support for deployment to Vercel, Netlify, and GitHub Pages.

Tokens
6.7K
Snippets
25
Records
53
Agent score
88%

What's inside fuwari

  2. Apply Text and Line Markers to code blocks

    main

    You can highlight specific lines or text within a code block using markers.

    Line Markers

    • Targeting lines: Use {line1, line2, start-end} syntax after the language identifier.
    • Marker types: Use del={lines} for deletions, ins={lines} for insertions, and {lines} for neutral marking.
    • Labels: You can add labels to markers using the syntax {"label": line_number} or by providing long labels on their own lines using {"label": start-end}.

    Text Markers

    • String matching: Use "text" to highlight specific text within lines.
    • Regex: Use /pattern/ to highlight text matching a regular expression.
    • Inline marker types: You can specify marker types for text matches using ins="text" or del="text".

    Diff Syntax

    Use the diff language identifier for standard diff-style highlighting (+ for insertions, - for deletions). You can also combine diff with syntax highlighting using diff lang="js".

    // Line 1 is targeted
// Line 2
// Line 3
// Line 4 is targeted
    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'
}
      function thisIsJavaScript() {
-   console.log('Old code to be removed')
+   console.log('New and shiny code!')
  }
    console.log('The words yes and yep will be marked.')

  4. Deploy Fuwari to Vercel, Netlify, or GitHub Pages

    main
    To deploy your blog, follow the standard Astro deployment guides. Before deploying, ensure you have updated astro.config.mjs to reflect your site's specific configuration (such as the base URL).

  6. Local development setup

    main

    To modify the blog locally:

    1. Clone the repository.
    2. Install dependencies using pnpm install (if pnpm is not installed, run npm install -g pnpm).
    3. Customize the blog by editing the src/config.ts configuration file.
    4. Create new posts using pnpm new-post <filename> and edit them in src/content/posts/.

  7. Configure and develop Fuwari

    main

    After initialization or forking the repository, follow these steps to set up and customize your blog:

    1. Install dependencies: Run pnpm install and pnpm add sharp.
    2. Customize: Edit src/config.ts to configure your blog settings.
    3. Create posts: Use the pnpm new-post <filename> command to generate a new post file in src/content/posts/.
    4. Deploy: Before deploying to Vercel, Netlify, or GitHub Pages, ensure you update the site settings in astro.config.mjs.

  8. Use Editor and Terminal Frames in code blocks

    main

    Fuwari uses Expressive Code to render code blocks with different visual frames.

    • Editor Frames: Use the title attribute to add a filename to the top of the code block.
    • Terminal Frames: By default, certain languages (like bash or powershell) render as terminal frames. You can add a title to these as well.
    • Overriding Frames: Use the frame attribute to change the visual style. Use frame="none" to remove all framing, or frame="code" to force a code editor style on a language that usually defaults to a terminal frame.
    console.log('Title attribute example')
    Write-Output "This one has a title!"
    echo "Look ma, no frame!"
    # Forced to code frame instead of terminal
function Watch-Tail { Get-Content -Tail 20 -Wait $args }

  9. Configure and run Fuwari locally

    main

    After creating your repository, follow these steps to set up your local development environment:

    1. Clone your repository.
    2. Install dependencies using pnpm install (install pnpm globally via npm install -g pnpm if needed).
    3. Customize your blog by editing src/config.ts.
    4. Start the local development server with pnpm dev to view your site at localhost:4321.
    5. To create a new post, use pnpm new-post <filename>. Posts are stored in src/content/posts/.
    pnpm install
pnpm dev
pnpm new-post <filename>

  11. Use Markdown Extended Syntax

    main

    Fuwari extends standard GitHub Flavored Markdown (GFM) with several specialized features:

    • Admonitions: Special information boxes for notes, warnings, etc.
    • GitHub Repository Cards: Visual cards to display GitHub repository information.
    • Advanced Code Blocks: Powered by Expressive Code for enhanced syntax highlighting and features.

  12. Set up Fuwari from a template or fork

    main

    To use the existing repository as a template:

    1. Generate a new repository from the template or fork the repository.
    2. Clone your repository locally.
    3. Install dependencies using pnpm install and pnpm add sharp.
    4. Customize your blog by editing src/config.ts.
    5. Deploy to platforms like Vercel, Netlify, or GitHub Pages (ensure you update astro.config.mjs before deploying).
    pnpm install
pnpm add sharp