DOCSEARCHbyAlgolia
Submit Docs

Kevin Hu's Technical Documentation and Blog

website·Indexed 30 days ago

https://hongwei0417.github.io

A collection of technical guides and blog posts covering frontend and backend development, including Angular directive operations, Jest environment setup for Angular, Tailwind CSS basics, and MongoDB external access configuration.

Tokens
3.5K
Snippets
26
Records
38
Agent score
69%

What's inside Kevin Hu's Blog

  1. Overview of Docusaurus core features

    Docusaurus is a documentation framework designed for quick installation and deployment. It allows developers to focus on content by placing documentation files in the docs directory and provides extensibility through React, enabling the customization of website layouts while maintaining consistent global elements like headers and footers.

  2. Use Angular Directives to modify host element behavior

    In Angular, Directives can be attached to a host element to modify or extend the behavior of that specific component or element.

  4. Apply conditional styles using Tailwind state modifiers

    Tailwind uses a prefix syntax (modifier:class) to apply styles based on element states, pseudo-elements, or responsive breakpoints.

    • Pseudo-classes: Use hover:, active:, or focus: (e.g., hover:bg-blue-500).
    • Pseudo-elements: Use before: or after: (e.g., before:content-['*']).
    • Responsive breakpoints: Use sm:, md:, lg:, xl:, or 2xl: to apply styles at specific screen widths.

  5. Access Tailwind configuration values in CSS with @theme

    The theme() function allows you to reference values defined in your tailwind.config.js file directly within your CSS files, such as spacing, colors, or breakpoints.
    .content-area {
    height: calc(100vh - theme("spacing.12"));
}
.content-area {
    height: calc(100vh - theme("spacing[2.5]"));
}

  6. Limit blog post length in list view using truncate comment

    To limit the amount of content displayed for a blog post in the list view, insert the <!-- truncate --> HTML comment at the point where the summary should end.
    This is the summary of a very long blog post.

<!-- truncate -->

This content will be hidden in the list view and only visible on the full post page.

  7. Create interactive Docusaurus blog posts using MDX

    Docusaurus blog posts support MDX, allowing you to embed React components directly within your markdown content to create interactive experiences.
    <button onClick={() => alert('button clicked!')}>Click me!</button>

  8. Create and manage blog posts in Docusaurus

    Docusaurus blogging features are powered by the @docusaurus/plugin-content-blog plugin. To create blog posts, add Markdown files or folders to the blog directory. Post dates are automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2019-05-30-welcome.md) or from an index.md file within a dated folder (e.g., 2019-05-30-welcome/index.md). Using a folder for a post allows for easier co-location of images.

  10. Dynamically wrap a host element with a parent component

    To wrap a host element inside a newly created dynamic component (making the new component the parent), use ViewContainerRef to create the component and Renderer2.appendChild to move the host element inside the new component's DOM node.
    constructor(
  private elementRef: ElementRef,
  private renderer: Renderer2,
  private viewContainerRef: ViewContainerRef
) {}

ngOnInit() {
  const component = this.viewContainerRef.createComponent(DynamicComponent);
  this.renderer.appendChild(
    component.location.nativeElement,
    this.elementRef.nativeElement
  );
}

  11. Create and organize blog posts in Docusaurus

    Docusaurus blogging features are powered by the @docusaurus/plugin-content-blog plugin. To create blog posts, add Markdown files or folders to the blog directory. To co-locate images with a specific post, use a folder structure (e.g., blog/post-name/index.md).

  12. Use arbitrary values for one-off styles

    When a predefined Tailwind utility doesn't match your needs, you can use square bracket notation [] to apply any specific value directly in the HTML class.
    <!-- width: 50vw -->
<div class="w-[50vw]"></div>

<!-- height: 50px -->
<div class="h-[50px]"></div>

<!-- margin: 15px -->
<div class="m-[15px]"></div>