Cách Tạo Chủ Đề Trong Gatsby Với Stitches

Gatsby là một khung React phổ biến được sử dụng để xây dựng các trang web và ứng dụng. Thiết kế của nó ưu tiên bảo mật, khả năng mở rộng và hiệu suất. Gatsby được hỗ trợ bởi một hệ sinh thái lớn, bao gồm các Plugin để tích hợp các dịch vụ, các chủ đề để cấu hình đơn giản và Công thức để tự động hóa các tác vụ thường ngày. Trong hướng dẫn này, bạn sẽ học cách tạo chủ đề trong Gatsby bằng Stitches.

Để bắt đầu với hướng dẫn này, hãy đảm bảo bạn có những điều sau

Node.js phiên bản 14 trở lên được cài đặt
đã cài đặt trình quản lý gói sợi.
Kiến thức trước về đường khâu
Kiến thức trước về Gatsby

Chúng tôi cũng giả định rằng bạn đã cài đặt CLI của Gatsby trên toàn cầu; làm npm install -g gatsby-clinếu không.

Stitches là gì?

Stitches là một khung công tác React cho phép bạn tự tin tạo và tạo kiểu cho các thành phần có thể tái sử dụng. Nó bao gồm hỗ trợ cho các khung công tác khác như Vue, Svelte và Vanilla HTML. Stitches được tạo ra để giúp các nhà phát triển tránh các nội suy chống không cần thiết trong thời gian chạy, cải thiện hiệu suất ứng dụng. Hãy bắt đầu bằng cách tạo một ứng dụng Gatsby mới.

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Lệnh trên sẽ sao chép ứng dụng Gatsby starter với cấu trúc thư mục bên dưới.

📦gatsby-site
┣ 📂src
 ┃ ┗ 📂pages
 ┃ ┃ ┗ 📜index.js
 ┣ 📂static
 ┃ ┗ 📜favicon.ico
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc
 ┣ 📜LICENSE
 ┣ 📜README.md
 ┣ 📜gatsby-config.js
 ┣ 📜package-lock.json
 ┗ 📜package.json

Thiết lập và định cấu hình các đường khâu

Bây giờ, hãy cấu hình Stitches với ứng dụng Gatsby của bạn. Đầu tiên, bạn phải cài đặt plugin Gatsby để tạo kiểu với Stitches bằng lệnh bên dưới.

yarn add gatsby-theme-stitches @stitches/react

Sau khi cài đặt hoàn tất, hãy mở tệp gatsby-config.js và thêm Stitches vào mảng plugin bằng đoạn mã bên dưới.

module.exports = {
  /* Your site config here */
  plugin: ['gatsby-theme-stitches'],
}

Tại thời điểm này, bạn đã sẵn sàng để bắt đầu tạo kiểu cho ứng dụng Gatsby của mình bằng Stitches. Có hai cách để giải quyết vấn đề này.

Bạn có thể chọn tạo cấu hình của mình bằng cách phủ bóng gatsby-theme-stitches/src/configmô-đun
Bạn có thể nhập các thuộc tính trực tiếp vào ứng dụng của mình.

import { styled } from 'gatsby-theme-stitches/src/config';

Để sử dụng phương pháp đầu tiên, hãy tạo một gatsby-theme-stitches/config.jstệp và thêm các cấu hình sau.

import { createStitches } from '@stitches/react';

// You should export all properties
export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
   theme: {
    colors: {
      black500: "hsl(0, 0%, 0%)",
      white500: "hsl(0, 0%, 100%)",
      gray500: "hsl(206,10%,76%)",
      blue500: "hsl(206,100%,50%)",
      purple500: "hsl(252,78%,60%)",
      green500: "hsl(148,60%,60%)",
      red500: "hsl(352,100%,62%)",
    },
    space: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    fontSizes: {
      1: "12px",
      2: "13px",
      3: "15px",
    },
    fonts: {
      untitled: "Untitled Sans, apple-system, sans-serif",
      mono: "Söhne Mono, menlo, monospace",
    },
    borderRadius: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    borders: {
      1: "1px solid #ccc",
      2: "2px solid #ccc",
      3: "3px solid #ccc",
      4: "none",
    },
    paddings: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    margins: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    widths: {
      1: "100%",
      2: "50%",
      3: "25%",
    },
  },
});

Trong đoạn mã trên, bạn đã xuất tất cả các thuộc tính Stitches có sẵn, vì vậy bạn có thể nhập và sử dụng chúng. Sau đó, chúng tôi xác định các chủ đề cho các phần tử trong ứng dụng của mình và chúng tôi sẽ sử dụng các thuộc tính chủ đề để tạo kiểu cho các phần tử của chúng tôi.

Tạo và tạo kiểu cho các phần tử tùy chỉnh.

Hãy tiếp tục và sử dụng Stitches để tạo kiểu cho các phần tử mà chúng ta sẽ sử dụng trong ứng dụng Gatsby của mình. Để tách biệt mối quan tâm, chúng tôi sẽ tạo một thư mục thành phần trong thư mục gốc của dự án cho tất cả các kiểu của phần tử. Tạo một tệp mới có tên Button.jstrong thư mục thành phần và thêm các đoạn mã bên dưới.

import { styled } from '../../stitches.config';

export const Button = styled("button", {
   // base styles
  display: "block",
  border: "$4",
  borderRadius: "$1",
  color: "$white500",

  variants: {
    size: {
      sm: {
        fontSize: "13px",
        height: "25px",
        paddingRight: "10px",
        paddingLeft: "10px",
      },
      lg: {
        fontSize: "15px",
        height: "35px",
        paddingLeft: "15px",
        paddingRight: "15px",
      },
    },
    bg: {
      primary: {
        backgroundColor: "#2196f3",
        "&:hover": {
          backgroundColor: "#64b5f6",
        },
      },
      secondary: {
        backgroundColor: "#009688",
        "&:hover": {
          backgroundColor: "#4db6ac",
        },
      },
      danger: {
        backgroundColor: "#f44336",
        "&:hover": {
          backgroundColor: "#ef9a9a",
        },
      },
      success: {
        backgroundColor: "#4caf50",
        color: "white",
        "&:hover": {
          backgroundColor: "#a5d6a7",
        },
      },
    },
  },
});

Trong đoạn mã trên, chúng tôi đã nhập các thuộc tính được tạo kiểu từ tệp cấu hình Stitches, cho phép chúng tôi tùy chỉnh thành phần. Chúng tôi đã sử dụng các thuộc tính mà chúng tôi đã xác định trong chủ đề của mình để thêm kiểu cơ sở của phần tử bằng cách sử dụng biểu tượng $ theo sau là các thuộc tính chủ đề. Sau đó, chúng tôi sử dụng thuộc tính biến thể để xác định kiểu dáng cho màu nền của thành phần (bg) và kích thước (size). Tiếp theo, tạo Container.jsvà thêm các đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Container = styled("div", {
   // base styles
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  padding: "$2",
  backgroundColor: "$white500",

  variants: {
    fd: {
      column: {
        flexDirection: "column",
      },
      row: {
        flexDirection: "row",
      },
    },
    size: {
      sm: {
        width: "100%",
        height: "50px",
      },
      lg: {
        width: "100%",
        height: "60px",
      },
    },
    align: {
      center: {
        alignItems: "center",
      },
      left: {
        alignItems: "flex-start",
      },
      right: {
        alignItems: "flex-end",
      },
    },
  },
});

Trong thành phần Vùng chứa, chúng tôi đặt các chủ đề kiểu cơ sở và xác định kiểu để căn chỉnh và đặt kích thước của vùng chứa bằng cách sử dụng thuộc tính biến thể. Tiếp theo, tạo một Image.jstệp và thêm đoạn mã bên dưới.

import { styled } from "@stitches/react"

export const Image = styled("img", {
  display: "block",
  width: "$1",
  height: "auto",
  maxWidth: "100%",
  maxHeight: "100%",
  margin: "0 auto",
  variants: {
    size: {
      sm: {
        width: "50%",
        height: "50%",
        maxWidth: "100%",
        maxHeight: "100%",
        margin: "0 auto",
      },
      lg: {
        width: "100%",
        height: "auto",
        maxWidth: "100%",
        maxHeight: "100%",
        margin: "0 auto",
      },
    },
  },
})

Chúng tôi cũng xác định kiểu để có một hình ảnh lớn và nhỏ, kiểu thay đổi căn chỉnh hình ảnh và các chủ đề được áp dụng cho các kiểu cơ bản. Tiếp theo, tạo một Header.jstệp và thêm đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Header = styled("nav", {
  // base styles
  display: "flex",
  flexDirection: "row",
  justifyContent: "space-between",
  alignItems: "center",
  padding: "$2",
  backgroundColor: "$white500",
  borderBottom: "1px solid #e6e6e6",
 
  variants: {
    size: {
      sm: {
        width: "100%",
        height: "50px",
      },
      lg: {
        width: "100%",
        height: "60px",
      },
    },
    bg: {
      primary: {
        backgroundColor: "#2196f3",
        "&:hover": {
          backgroundColor: "#64b5f6",
        },
      },
      secondary: {
        backgroundColor: "#009688",
        "&:hover": {
          backgroundColor: "#4db6ac",
        },
      },
      danger: {
        backgroundColor: "#f44336",
        "&:hover": {
          backgroundColor: "#ef9a9a",
        },
      },
      success: {
        backgroundColor: "#4caf50",
        "&:hover": {
          backgroundColor: "#a5d6a7",
        },
      },
    },
  },
});

Tiếp theo, tạo một Card.jstệp và thêm các đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Card = styled("div", {
  display: "flex",
  justifyContent: "center",
  flexDirection: "column",
  padding: "$1",
  margin: "$2"

  variants: {
    align: {
      center: {
        alignItems: "center",
      },
      left: {
        alignItems: "flex-start",
      },
      right: {
        alignItems: "flex-end",
      },
    },
    boder: {
        none: { 
            border: "none"
        },
        solid: {
            border: "solid 1px #e6e6e6"
        }
    }
  },
});

Tiếp theo, thêm một tệp mới Input.js, với đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Input = styled("input", {
  display: "block",
  marginBottom: "10px",

  variants: {
    size: {
      sm: {
        fontSize: "13px",
        height: "25px",
        paddingRight: "10px",
        paddingLeft: "10px",
      },
      lg: {
        fontSize: "15px",
        height: "35px",
        paddingLeft: "15px",
        paddingRight: "15px",
      },
    },
  },
});

Đoạn mã trên có phần tử Input để xử lý đầu vào của người dùng. Trong thành phần Đầu vào ở trên, chúng tôi muốn các đầu vào lớn và nhỏ và chúng tôi đã xác định kiểu cho thành phần đó bằng cách sử dụng thuộc tính biến thể. Tiếp theo, thêm một tệp mới Text.jsvà thêm đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Text = styled('p', {
    fontFamily: '$mono',
    color: '$black5000',
  
    variants: {
      size: {
        1: {
          fontSize: '10px',
        },
        2: {
          fontSize: '12px',
        },
        3: {
          fontSize: '14px',
        },
      },
    },
  });

Trong đoạn mã trên, chúng tôi đã tạo một thành phần để cho phép chúng tôi thêm và tạo kiểu cho một đoạn văn.

Tạo ứng dụng blog

Bây giờ chúng ta đã tạo kiểu các yếu tố chúng ta cần cho ứng dụng này, hãy tiếp tục và tạo một blog. Đầu tiên, chúng ta cần cập nhật pages/index.jstệp để nhập tất cả các thành phần mà chúng ta vừa tạo bằng đoạn mã bên dưới.

import { Button } from "../components/Button"
import { Input } from "../components/Input"
import { Card } from "../components/Card"
import { Text } from "../components/Text"
import { Header } from "../components/Header"
import { Image } from "../components/Image"
import { Container } from "../components/Container"

Tiếp theo, chúng tôi sẽ sử dụng thành phần để cập nhật thành phần Trang chủ với đoạn mã bên dưới.

export default function Home() {
  const [modal, setModal] = useState(false)

  const showModal = () => {
    setModel(!model)
  }
  return (
    <>
      <Container>
        <Header bg="primary">
          <Text size="1">My Blog App</Text>
          <Button bg="secondary" size="sm" onClick={showModal}>
            New Blog
          </Button>
        </Header>
        {model && (
          <Card boder="solid">
            <Text size="1">Titile:</Text>
            <Input />
            <Text size="1">Content</Text>
            <Input />
            <Text size="1">Cover Image</Text>
            <Input />
            <Button bg="primary" size="sm">
              Post
            </Button>
          </Card>
        )}
        <Text>Blog Posts</Text>
      </Container>
      <Container fd="row">
        {blogs.map(blog => (
          <Card boder="solid">
            <Image src={blog.cover} size="lg" />
            <Text size="3">{blog.title}</Text>
            <Text size="1">{blog.content}</Text>
            <Text size="1">{blog.date}</Text>
          </Card>
        ))}
      </Container>
    </>
  )
}

Trong đoạn mã trên, chúng tôi đã cập nhật thành phần Trang chủ bằng cách sử dụng các thành phần mà chúng tôi đã tạo kiểu bằng Stitches. Chúng tôi đã áp dụng các phong cách chúng tôi muốn cho từng thành phần được sử dụng trong thành phần Trang chủ của chúng tôi. Chúng tôi có một trường nhập biểu mẫu sẽ được chuyển đổi để ẩn hoặc hiển thị nó bằng cách sử dụng biến trạng thái Phương thức . Sau đó, chúng tôi lướt qua các chi tiết blog mà chúng tôi sẽ tạo trong thời gian ngắn bằng cách sử dụng chức năng bản đồ và hiển thị chúng cho người dùng.

Cuối cùng, thêm các đối tượng mảng blog sau vào thành phần Home .

...
  const blogs = [
    {
      title: "How to build a website",
      content:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://www.hostgator.com/blog/wp-content/uploads/2017/09/MakeOwnWebsite.png",
      date: "2020-01-01",
    },
    {
      title: "Getting started with OpenReplay",
      content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://opengraph.githubassets.com/2ddbe84dccfbcc774b1c9861dd327d2efd7e1cd49964dc01229c181bea751e60/openreplay/documentation",
      date: "2020-01-01",
    },
    {
      title: "Node.js Vs React",
      content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://miro.medium.com/max/1400/1*CpDidbInbG4Er_0j_hknFQ.jpeg",
      date: "2020-01-01",
    },
  ]
...

Kiểm tra ứng dụng

Với ứng dụng demo blog đã được tạo, hãy tiếp tục và thử nghiệm nó. Chạy các lệnh để thay đổi thư mục thành thư mục dự án và khởi động ứng dụng.

cd gatsby-site
gatsby develop

Sau đó, điều hướng đến http: // localhost: 8000 / và bạn sẽ thấy kết quả bên dưới trên trang chỉ mục.

Sự kết luận

Bằng cách xây dựng ứng dụng demo blog, bạn đã học cách tạo giao diện người dùng chủ đề trong ứng dụng Gatsby với Stitches. Đầu tiên, chúng tôi bắt đầu với phần giới thiệu về Gatsby và Stitches, và bạn đã học cách định cấu hình Stitches với Gatsby và tạo kiểu cho một số thành phần. Bây giờ bạn đã biết cách tích hợp Gatsby và Stitches, bạn sẽ tạo kiểu ứng dụng Gatsby tiếp theo của mình như thế nào?

Nguồn: https://blog.openreplay.com/creating-a-theme-in-a-gatsby-application-with-stitches

#Gatsby #stitches

What is GEEK

Buddha Community

Cách Tạo Chủ Đề Trong Gatsby Với Stitches

Trung Nguyen

1659181080

Cách Tạo Chủ Đề Trong Gatsby Với Stitches

Gatsby là một khung React phổ biến được sử dụng để xây dựng các trang web và ứng dụng. Thiết kế của nó ưu tiên bảo mật, khả năng mở rộng và hiệu suất. Gatsby được hỗ trợ bởi một hệ sinh thái lớn, bao gồm các Plugin để tích hợp các dịch vụ, các chủ đề để cấu hình đơn giản và Công thức để tự động hóa các tác vụ thường ngày. Trong hướng dẫn này, bạn sẽ học cách tạo chủ đề trong Gatsby bằng Stitches.

Để bắt đầu với hướng dẫn này, hãy đảm bảo bạn có những điều sau

Node.js phiên bản 14 trở lên được cài đặt
đã cài đặt trình quản lý gói sợi.
Kiến thức trước về đường khâu
Kiến thức trước về Gatsby

Chúng tôi cũng giả định rằng bạn đã cài đặt CLI của Gatsby trên toàn cầu; làm npm install -g gatsby-clinếu không.

Stitches là gì?

Stitches là một khung công tác React cho phép bạn tự tin tạo và tạo kiểu cho các thành phần có thể tái sử dụng. Nó bao gồm hỗ trợ cho các khung công tác khác như Vue, Svelte và Vanilla HTML. Stitches được tạo ra để giúp các nhà phát triển tránh các nội suy chống không cần thiết trong thời gian chạy, cải thiện hiệu suất ứng dụng. Hãy bắt đầu bằng cách tạo một ứng dụng Gatsby mới.

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Lệnh trên sẽ sao chép ứng dụng Gatsby starter với cấu trúc thư mục bên dưới.

📦gatsby-site
┣ 📂src
 ┃ ┗ 📂pages
 ┃ ┃ ┗ 📜index.js
 ┣ 📂static
 ┃ ┗ 📜favicon.ico
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc
 ┣ 📜LICENSE
 ┣ 📜README.md
 ┣ 📜gatsby-config.js
 ┣ 📜package-lock.json
 ┗ 📜package.json

Thiết lập và định cấu hình các đường khâu

Bây giờ, hãy cấu hình Stitches với ứng dụng Gatsby của bạn. Đầu tiên, bạn phải cài đặt plugin Gatsby để tạo kiểu với Stitches bằng lệnh bên dưới.

yarn add gatsby-theme-stitches @stitches/react

Sau khi cài đặt hoàn tất, hãy mở tệp gatsby-config.js và thêm Stitches vào mảng plugin bằng đoạn mã bên dưới.

module.exports = {
  /* Your site config here */
  plugin: ['gatsby-theme-stitches'],
}

Tại thời điểm này, bạn đã sẵn sàng để bắt đầu tạo kiểu cho ứng dụng Gatsby của mình bằng Stitches. Có hai cách để giải quyết vấn đề này.

Bạn có thể chọn tạo cấu hình của mình bằng cách phủ bóng gatsby-theme-stitches/src/configmô-đun
Bạn có thể nhập các thuộc tính trực tiếp vào ứng dụng của mình.

import { styled } from 'gatsby-theme-stitches/src/config';

Để sử dụng phương pháp đầu tiên, hãy tạo một gatsby-theme-stitches/config.jstệp và thêm các cấu hình sau.

import { createStitches } from '@stitches/react';

// You should export all properties
export const {
  styled,
  css,
  globalCss,
  keyframes,
  getCssText,
  theme,
  createTheme,
  config,
} = createStitches({
   theme: {
    colors: {
      black500: "hsl(0, 0%, 0%)",
      white500: "hsl(0, 0%, 100%)",
      gray500: "hsl(206,10%,76%)",
      blue500: "hsl(206,100%,50%)",
      purple500: "hsl(252,78%,60%)",
      green500: "hsl(148,60%,60%)",
      red500: "hsl(352,100%,62%)",
    },
    space: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    fontSizes: {
      1: "12px",
      2: "13px",
      3: "15px",
    },
    fonts: {
      untitled: "Untitled Sans, apple-system, sans-serif",
      mono: "Söhne Mono, menlo, monospace",
    },
    borderRadius: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    borders: {
      1: "1px solid #ccc",
      2: "2px solid #ccc",
      3: "3px solid #ccc",
      4: "none",
    },
    paddings: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    margins: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    widths: {
      1: "100%",
      2: "50%",
      3: "25%",
    },
  },
});

Trong đoạn mã trên, bạn đã xuất tất cả các thuộc tính Stitches có sẵn, vì vậy bạn có thể nhập và sử dụng chúng. Sau đó, chúng tôi xác định các chủ đề cho các phần tử trong ứng dụng của mình và chúng tôi sẽ sử dụng các thuộc tính chủ đề để tạo kiểu cho các phần tử của chúng tôi.

Tạo và tạo kiểu cho các phần tử tùy chỉnh.

Hãy tiếp tục và sử dụng Stitches để tạo kiểu cho các phần tử mà chúng ta sẽ sử dụng trong ứng dụng Gatsby của mình. Để tách biệt mối quan tâm, chúng tôi sẽ tạo một thư mục thành phần trong thư mục gốc của dự án cho tất cả các kiểu của phần tử. Tạo một tệp mới có tên Button.jstrong thư mục thành phần và thêm các đoạn mã bên dưới.

import { styled } from '../../stitches.config';

export const Button = styled("button", {
   // base styles
  display: "block",
  border: "$4",
  borderRadius: "$1",
  color: "$white500",

  variants: {
    size: {
      sm: {
        fontSize: "13px",
        height: "25px",
        paddingRight: "10px",
        paddingLeft: "10px",
      },
      lg: {
        fontSize: "15px",
        height: "35px",
        paddingLeft: "15px",
        paddingRight: "15px",
      },
    },
    bg: {
      primary: {
        backgroundColor: "#2196f3",
        "&:hover": {
          backgroundColor: "#64b5f6",
        },
      },
      secondary: {
        backgroundColor: "#009688",
        "&:hover": {
          backgroundColor: "#4db6ac",
        },
      },
      danger: {
        backgroundColor: "#f44336",
        "&:hover": {
          backgroundColor: "#ef9a9a",
        },
      },
      success: {
        backgroundColor: "#4caf50",
        color: "white",
        "&:hover": {
          backgroundColor: "#a5d6a7",
        },
      },
    },
  },
});

Trong đoạn mã trên, chúng tôi đã nhập các thuộc tính được tạo kiểu từ tệp cấu hình Stitches, cho phép chúng tôi tùy chỉnh thành phần. Chúng tôi đã sử dụng các thuộc tính mà chúng tôi đã xác định trong chủ đề của mình để thêm kiểu cơ sở của phần tử bằng cách sử dụng biểu tượng $ theo sau là các thuộc tính chủ đề. Sau đó, chúng tôi sử dụng thuộc tính biến thể để xác định kiểu dáng cho màu nền của thành phần (bg) và kích thước (size). Tiếp theo, tạo Container.jsvà thêm các đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Container = styled("div", {
   // base styles
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  padding: "$2",
  backgroundColor: "$white500",

  variants: {
    fd: {
      column: {
        flexDirection: "column",
      },
      row: {
        flexDirection: "row",
      },
    },
    size: {
      sm: {
        width: "100%",
        height: "50px",
      },
      lg: {
        width: "100%",
        height: "60px",
      },
    },
    align: {
      center: {
        alignItems: "center",
      },
      left: {
        alignItems: "flex-start",
      },
      right: {
        alignItems: "flex-end",
      },
    },
  },
});

Trong thành phần Vùng chứa, chúng tôi đặt các chủ đề kiểu cơ sở và xác định kiểu để căn chỉnh và đặt kích thước của vùng chứa bằng cách sử dụng thuộc tính biến thể. Tiếp theo, tạo một Image.jstệp và thêm đoạn mã bên dưới.

import { styled } from "@stitches/react"

export const Image = styled("img", {
  display: "block",
  width: "$1",
  height: "auto",
  maxWidth: "100%",
  maxHeight: "100%",
  margin: "0 auto",
  variants: {
    size: {
      sm: {
        width: "50%",
        height: "50%",
        maxWidth: "100%",
        maxHeight: "100%",
        margin: "0 auto",
      },
      lg: {
        width: "100%",
        height: "auto",
        maxWidth: "100%",
        maxHeight: "100%",
        margin: "0 auto",
      },
    },
  },
})

Chúng tôi cũng xác định kiểu để có một hình ảnh lớn và nhỏ, kiểu thay đổi căn chỉnh hình ảnh và các chủ đề được áp dụng cho các kiểu cơ bản. Tiếp theo, tạo một Header.jstệp và thêm đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Header = styled("nav", {
  // base styles
  display: "flex",
  flexDirection: "row",
  justifyContent: "space-between",
  alignItems: "center",
  padding: "$2",
  backgroundColor: "$white500",
  borderBottom: "1px solid #e6e6e6",
 
  variants: {
    size: {
      sm: {
        width: "100%",
        height: "50px",
      },
      lg: {
        width: "100%",
        height: "60px",
      },
    },
    bg: {
      primary: {
        backgroundColor: "#2196f3",
        "&:hover": {
          backgroundColor: "#64b5f6",
        },
      },
      secondary: {
        backgroundColor: "#009688",
        "&:hover": {
          backgroundColor: "#4db6ac",
        },
      },
      danger: {
        backgroundColor: "#f44336",
        "&:hover": {
          backgroundColor: "#ef9a9a",
        },
      },
      success: {
        backgroundColor: "#4caf50",
        "&:hover": {
          backgroundColor: "#a5d6a7",
        },
      },
    },
  },
});

Tiếp theo, tạo một Card.jstệp và thêm các đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Card = styled("div", {
  display: "flex",
  justifyContent: "center",
  flexDirection: "column",
  padding: "$1",
  margin: "$2"

  variants: {
    align: {
      center: {
        alignItems: "center",
      },
      left: {
        alignItems: "flex-start",
      },
      right: {
        alignItems: "flex-end",
      },
    },
    boder: {
        none: { 
            border: "none"
        },
        solid: {
            border: "solid 1px #e6e6e6"
        }
    }
  },
});

Tiếp theo, thêm một tệp mới Input.js, với đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Input = styled("input", {
  display: "block",
  marginBottom: "10px",

  variants: {
    size: {
      sm: {
        fontSize: "13px",
        height: "25px",
        paddingRight: "10px",
        paddingLeft: "10px",
      },
      lg: {
        fontSize: "15px",
        height: "35px",
        paddingLeft: "15px",
        paddingRight: "15px",
      },
    },
  },
});

Đoạn mã trên có phần tử Input để xử lý đầu vào của người dùng. Trong thành phần Đầu vào ở trên, chúng tôi muốn các đầu vào lớn và nhỏ và chúng tôi đã xác định kiểu cho thành phần đó bằng cách sử dụng thuộc tính biến thể. Tiếp theo, thêm một tệp mới Text.jsvà thêm đoạn mã bên dưới.

import { styled } from "@stitches/react";

export const Text = styled('p', {
    fontFamily: '$mono',
    color: '$black5000',
  
    variants: {
      size: {
        1: {
          fontSize: '10px',
        },
        2: {
          fontSize: '12px',
        },
        3: {
          fontSize: '14px',
        },
      },
    },
  });

Trong đoạn mã trên, chúng tôi đã tạo một thành phần để cho phép chúng tôi thêm và tạo kiểu cho một đoạn văn.

Tạo ứng dụng blog

Bây giờ chúng ta đã tạo kiểu các yếu tố chúng ta cần cho ứng dụng này, hãy tiếp tục và tạo một blog. Đầu tiên, chúng ta cần cập nhật pages/index.jstệp để nhập tất cả các thành phần mà chúng ta vừa tạo bằng đoạn mã bên dưới.

import { Button } from "../components/Button"
import { Input } from "../components/Input"
import { Card } from "../components/Card"
import { Text } from "../components/Text"
import { Header } from "../components/Header"
import { Image } from "../components/Image"
import { Container } from "../components/Container"

Tiếp theo, chúng tôi sẽ sử dụng thành phần để cập nhật thành phần Trang chủ với đoạn mã bên dưới.

export default function Home() {
  const [modal, setModal] = useState(false)

  const showModal = () => {
    setModel(!model)
  }
  return (
    <>
      <Container>
        <Header bg="primary">
          <Text size="1">My Blog App</Text>
          <Button bg="secondary" size="sm" onClick={showModal}>
            New Blog
          </Button>
        </Header>
        {model && (
          <Card boder="solid">
            <Text size="1">Titile:</Text>
            <Input />
            <Text size="1">Content</Text>
            <Input />
            <Text size="1">Cover Image</Text>
            <Input />
            <Button bg="primary" size="sm">
              Post
            </Button>
          </Card>
        )}
        <Text>Blog Posts</Text>
      </Container>
      <Container fd="row">
        {blogs.map(blog => (
          <Card boder="solid">
            <Image src={blog.cover} size="lg" />
            <Text size="3">{blog.title}</Text>
            <Text size="1">{blog.content}</Text>
            <Text size="1">{blog.date}</Text>
          </Card>
        ))}
      </Container>
    </>
  )
}

Trong đoạn mã trên, chúng tôi đã cập nhật thành phần Trang chủ bằng cách sử dụng các thành phần mà chúng tôi đã tạo kiểu bằng Stitches. Chúng tôi đã áp dụng các phong cách chúng tôi muốn cho từng thành phần được sử dụng trong thành phần Trang chủ của chúng tôi. Chúng tôi có một trường nhập biểu mẫu sẽ được chuyển đổi để ẩn hoặc hiển thị nó bằng cách sử dụng biến trạng thái Phương thức . Sau đó, chúng tôi lướt qua các chi tiết blog mà chúng tôi sẽ tạo trong thời gian ngắn bằng cách sử dụng chức năng bản đồ và hiển thị chúng cho người dùng.

Cuối cùng, thêm các đối tượng mảng blog sau vào thành phần Home .

...
  const blogs = [
    {
      title: "How to build a website",
      content:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://www.hostgator.com/blog/wp-content/uploads/2017/09/MakeOwnWebsite.png",
      date: "2020-01-01",
    },
    {
      title: "Getting started with OpenReplay",
      content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://opengraph.githubassets.com/2ddbe84dccfbcc774b1c9861dd327d2efd7e1cd49964dc01229c181bea751e60/openreplay/documentation",
      date: "2020-01-01",
    },
    {
      title: "Node.js Vs React",
      content:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel consectetur euismod, nisi nisl aliquet nisi, eget consectetur nisl nisi eget nisi. Nullam euismod, nisi vel",
      cover:
        "https://miro.medium.com/max/1400/1*CpDidbInbG4Er_0j_hknFQ.jpeg",
      date: "2020-01-01",
    },
  ]
...

Kiểm tra ứng dụng

Với ứng dụng demo blog đã được tạo, hãy tiếp tục và thử nghiệm nó. Chạy các lệnh để thay đổi thư mục thành thư mục dự án và khởi động ứng dụng.

cd gatsby-site
gatsby develop

Sau đó, điều hướng đến http: // localhost: 8000 / và bạn sẽ thấy kết quả bên dưới trên trang chỉ mục.

Sự kết luận

Bằng cách xây dựng ứng dụng demo blog, bạn đã học cách tạo giao diện người dùng chủ đề trong ứng dụng Gatsby với Stitches. Đầu tiên, chúng tôi bắt đầu với phần giới thiệu về Gatsby và Stitches, và bạn đã học cách định cấu hình Stitches với Gatsby và tạo kiểu cho một số thành phần. Bây giờ bạn đã biết cách tích hợp Gatsby và Stitches, bạn sẽ tạo kiểu ứng dụng Gatsby tiếp theo của mình như thế nào?

Nguồn: https://blog.openreplay.com/creating-a-theme-in-a-gatsby-application-with-stitches

#Gatsby #stitches

Josefa Corwin

1659852060

A Template Language That Completely Separates Structure and Logic/Ruby

Curly

Curly is a template language that completely separates structure and logic. Instead of interspersing your HTML with snippets of Ruby, all logic is moved to a presenter class.

Installing

Installing Curly is as simple as running gem install curly-templates. If you're using Bundler to manage your dependencies, add this to your Gemfile

gem 'curly-templates'

Curly can also install an application layout file, replacing the .erb file commonly created by Rails. If you wish to use this, run the curly:install generator.

$ rails generate curly:install

How to use Curly

In order to use Curly for a view or partial, use the suffix .curly instead of .erb, e.g. app/views/posts/_comment.html.curly. Curly will look for a corresponding presenter class named Posts::CommentPresenter. By convention, these are placed in app/presenters/, so in this case the presenter would reside in app/presenters/posts/comment_presenter.rb. Note that presenters for partials are not prepended with an underscore.

Add some HTML to the partial template along with some Curly components:

<!-- app/views/posts/_comment.html.curly -->
<div class="comment">
  <p>
    {{author_link}} posted {{time_ago}} ago.
  </p>

  {{body}}

  {{#author?}}
    <p>{{deletion_link}}</p>
  {{/author?}}
</div>

The presenter will be responsible for providing the data for the components. Add the necessary Ruby code to the presenter:

# app/presenters/posts/comment_presenter.rb
class Posts::CommentPresenter < Curly::Presenter
  presents :comment

  def body
    SafeMarkdown.render(@comment.body)
  end

  def author_link
    link_to @comment.author.name, @comment.author, rel: "author"
  end

  def deletion_link
    link_to "Delete", @comment, method: :delete
  end

  def time_ago
    time_ago_in_words(@comment.created_at)
  end

  def author?
    @comment.author == current_user
  end
end

The partial can now be rendered like any other, e.g. by calling

render 'comment', comment: comment
render comment
render collection: post.comments

Curly components are surrounded by curly brackets, e.g. {{hello}}. They always map to a public method on the presenter class, in this case #hello. Methods ending in a question mark can be used for conditional blocks, e.g. {{#admin?}} ... {{/admin?}}.

Identifiers

Curly components can specify an identifier using the so-called dot notation: {{x.y.z}}. This can be very useful if the data you're accessing is hierarchical in nature. One common example is I18n:

<h1>{{i18n.homepage.header}}</h1>

# In the presenter, the identifier is passed as an argument to the method. The
# argument will always be a String.
def i18n(key)
  translate(key)
end

The identifier is separated from the component name with a dot. If the presenter method has a default value for the argument, the identifier is optional – otherwise it's mandatory.

Attributes

In addition to an identifier, Curly components can be annotated with attributes. These are key-value pairs that affect how a component is rendered.

The syntax is reminiscent of HTML:

<div>{{sidebar rows=3 width=200px title="I'm the sidebar!"}}</div>

The presenter method that implements the component must have a matching keyword argument:

def sidebar(rows: "1", width: "100px", title:); end

All argument values will be strings. A compilation error will be raised if

an attribute is used in a component without a matching keyword argument being present in the method definition; or
a required keyword argument in the method definition is not set as an attribute in the component.

You can define default values using Ruby's own syntax. Additionally, if the presenter method accepts arbitrary keyword arguments using the **doublesplat syntax then all attributes will be valid for the component, e.g.

def greetings(**names)
  names.map {|name, greeting| "#{name}: #{greeting}!" }.join("\n")
end

{{greetings alice=hello bob=hi}}
<!-- The above would be rendered as: -->
alice: hello!
bob: hi!

Note that since keyword arguments in Ruby are represented as Symbol objects, which are not garbage collected in Ruby versions less than 2.2, accepting arbitrary attributes represents a security vulnerability if your application allows untrusted Curly templates to be rendered. Only use this feature with trusted templates if you're not on Ruby 2.2 yet.

Conditional blocks

If there is some content you only want rendered under specific circumstances, you can use conditional blocks. The {{#admin?}}...{{/admin?}} syntax will only render the content of the block if the admin? method on the presenter returns true, while the {{^admin?}}...{{/admin?}} syntax will only render the content if it returns false.

Both forms can have an identifier: {{#locale.en?}}...{{/locale.en?}} will only render the block if the locale? method on the presenter returns true given the argument "en". Here's how to implement that method in the presenter:

class SomePresenter < Curly::Presenter
  # Allows rendering content only if the locale matches a specified identifier.
  def locale?(identifier)
    current_locale == identifier
  end
end

Furthermore, attributes can be set on the block. These only need to be specified when opening the block, not when closing it:

{{#square? width=3 height=3}}
  <p>It's square!</p>
{{/square?}}

Attributes work the same way as they do for normal components.

Collection blocks

Sometimes you want to render one or more items within the current template, and splitting out a separate template and rendering that in the presenter is too much overhead. You can instead define the template that should be used to render the items inline in the current template using the collection block syntax.

Collection blocks are opened using an asterisk:

{{*comments}}
  <li>{{body}} ({{author_name}})</li>
{{/comments}}

The presenter will need to expose the method #comments, which should return a collection of objects:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def comments
    @post.comments
  end
end

The template within the collection block will be used to render each item, and it will be backed by a presenter named after the component – in this case, comments. The name will be singularized and Curly will try to find the presenter class in the following order:

Posts::ShowPresenter::CommentPresenter
Posts::CommentPresenter
CommentPresenter

This allows you some flexibility with regards to how you want to organize these nested templates and presenters.

Note that the nested template will only have access to the methods on the nested presenter, but all variables passed to the "parent" presenter will be forwarded to the nested presenter. In addition, the current item in the collection will be passed, as well as that item's index in the collection:

class Posts::CommentPresenter < Curly::Presenter
  presents :post, :comment, :comment_counter

  def number
    # `comment_counter` is automatically set to the item's index in the collection,
    # starting with 1.
    @comment_counter
  end

  def body
    @comment.body
  end

  def author_name
    @comment.author.name
  end
end

Collection blocks are an alternative to splitting out a separate template and rendering that from the presenter – which solution is best depends on your use case.

Context blocks

While collection blocks allow you to define the template that should be used to render items in a collection right within the parent template, context blocks allow you to define the template for an arbitrary context. This is very powerful, and can be used to define widget-style components and helpers, and provide an easy way to work with structured data. Let's say you have a comment form on your page, and you'd rather keep the template inline. A simple template could look like:

<!-- post.html.curly -->
<h1>{{title}}</h1>
{{body}}

{{@comment_form}}
  <b>Name: </b> {{name_field}}<br>
  <b>E-mail: </b> {{email_field}}<br>
  {{comment_field}}

  {{submit_button}}
{{/comment_form}}

Note that an @ character is used to denote a context block. Like with collection blocks, a separate presenter class is used within the block, and a simple convention is used to find it. The name of the context component (in this case, comment_form) will be camel cased, and the current presenter's namespace will be searched:

class PostPresenter < Curly::Presenter
  presents :post
  def title; @post.title; end
  def body; markdown(@post.body); end

  # A context block method *must* take a block argument. The return value
  # of the method will be used when rendering. Calling the block argument will
  # render the nested template. If you pass a value when calling the block
  # argument it will be passed to the presenter.
  def comment_form(&block)
    form_for(Comment.new, &block)
  end

  # The presenter name is automatically deduced.
  class CommentFormPresenter < Curly::Presenter
    # The value passed to the block argument will be passed in a parameter named
    # after the component.
    presents :comment_form

    # Any parameters passed to the parent presenter will be forwarded to this
    # presenter as well.
    presents :post

    def name_field
      @comment_form.text_field :name
    end

    # ...
  end
end

Context blocks were designed to work well with Rails' helper methods such as form_for and content_tag, but you can also work directly with the block. For instance, if you want to directly control the value that is passed to the nested presenter, you can call the call method on the block yourself:

def author(&block)
  content_tag :div, class: "author" do
    # The return value of `call` will be the result of rendering the nested template
    # with the argument. You can post-process the string if you want.
    block.call(@post.author)
  end
end

Context shorthand syntax

If you find yourself opening a context block just in order to use a single component, e.g. {{@author}}{{name}}{{/author}}, you can use the shorthand syntax instead: {{author:name}}. This works for all component types, e.g.

{{#author:admin?}}
  <p>The author is an admin!</p>
{{/author:admin?}}

The syntax works for nested contexts as well, e.g. {{comment:author:name}}. Any identifier and attributes are passed to the target component, which in this example would be {{name}}.

Setting up state

Although most code in Curly presenters should be free of side effects, sometimes side effects are required. One common example is defining content for a content_for block.

If a Curly presenter class defines a setup! method, it will be called before the view is rendered:

class PostPresenter < Curly::Presenter
  presents :post

  def setup!
    content_for :title, post.title

    content_for :sidebar do
      render 'post_sidebar', post: post
    end
  end
end

Escaping Curly syntax

In order to have {{ appear verbatim in the rendered HTML, use the triple Curly escape syntax:

This is {{{escaped}}.

You don't need to escape the closing }}.

Comments

If you want to add comments to your Curly templates that are not visible in the rendered HTML, use the following syntax:

{{! This is some interesting stuff }}

Presenters

Presenters are classes that inherit from Curly::Presenter – they're usually placed in app/presenters/, but you can put them anywhere you'd like. The name of the presenter classes match the virtual path of the view they're part of, so if your controller is rendering posts/show, the Posts::ShowPresenter class will be used. Note that Curly is only used to render a view if a template can be found – in this case, at app/views/posts/show.html.curly.

Presenters can declare a list of accepted variables using the presents method:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
end

A variable can have a default value:

class Posts::ShowPresenter < Curly::Presenter
  presents :post
  presents :comment, default: nil
end

Any public method defined on the presenter is made available to the template as a component:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author_link
    # You can call any Rails helper from within a presenter instance:
    link_to author.name, profile_path(author), rel: "author"
  end

  private

  # Private methods are not available to the template, so they're safe to
  # use.
  def author
    @post.author
  end
end

Presenter methods can even take an argument. Say your Curly template has the content {{t.welcome_message}}, where welcome_message is an I18n key. The following presenter method would make the lookup work:

def t(key)
  translate(key)
end

That way, simple ``functions'' can be added to the Curly language. Make sure these do not have any side effects, though, as an important part of Curly is the idempotence of the templates.

Layouts and content blocks

Both layouts and content blocks (see content_for) use yield to signal that content can be inserted. Curly works just like ERB, so calling yield with no arguments will make the view usable as a layout, while passing a Symbol will make it try to read a content block with the given name:

# Given you have the following Curly template in
# app/views/layouts/application.html.curly
#
#   <html>
#     <head>
#       <title>{{title}}</title>
#     </head>
#     <body>
#       <div id="sidebar">{{sidebar}}</div>
#       {{body}}
#     </body>
#   </html>
#
class ApplicationLayout < Curly::Presenter
  def title
    "You can use methods just like in any other presenter!"
  end

  def sidebar
    # A view can call `content_for(:sidebar) { "some HTML here" }`
    yield :sidebar
  end

  def body
    # The view will be rendered and inserted here:
    yield
  end
end

Rails helper methods

In order to make a Rails helper method available as a component in your template, use the exposes_helper method:

class Layouts::ApplicationPresenter < Curly::Presenter
  # The components {{sign_in_path}} and {{root_path}} are made available.
  exposes_helper :sign_in_path, :root_path
end

Testing

Presenters can be tested directly, but sometimes it makes sense to integrate with Rails on some levels. Currently, only RSpec is directly supported, but you can easily instantiate a presenter:

SomePresenter.new(context, assigns)

context is a view context, i.e. an object that responds to render, has all the helper methods you expect, etc. You can pass in a test double and see what you need to stub out. assigns is the hash containing the controller and local assigns. You need to pass in a key for each argument the presenter expects.

Testing with RSpec

In order to test presenters with RSpec, make sure you have rspec-rails in your Gemfile. Given the following presenter:

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def body
    Markdown.render(@post.body)
  end
end

You can test the presenter methods like this:

# You can put this in your `spec_helper.rb`.
require 'curly/rspec'

# spec/presenters/posts/show_presenter_spec.rb
describe Posts::ShowPresenter, type: :presenter do
  describe "#body" do
    it "renders the post's body as Markdown" do
      assign(:post, double(:post, body: "**hello!**"))
      expect(presenter.body).to eq "<strong>hello!</strong>"
    end
  end
end

Note that your spec must be tagged with type: :presenter.

Examples

Here is a simple Curly template – it will be looked up by Rails automatically.

<!-- app/views/posts/show.html.curly -->
<h1>{{title}}<h1>
<p class="author">{{author}}</p>
<p>{{description}}</p>

{{comment_form}}

<div class="comments">
  {{comments}}
</div>

When rendering the template, a presenter is automatically instantiated with the variables assigned in the controller or the render call. The presenter declares the variables it expects with presents, which takes a list of variables names.

# app/presenters/posts/show_presenter.rb
class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def title
    @post.title
  end

  def author
    link_to(@post.author.name, @post.author, rel: "author")
  end

  def description
    Markdown.new(@post.description).to_html.html_safe
  end

  def comments
    render 'comment', collection: @post.comments
  end

  def comment_form
    if @post.comments_allowed?
      render 'comment_form', post: @post
    else
      content_tag(:p, "Comments are disabled for this post")
    end
  end
end

Caching

Caching is handled at two levels in Curly – statically and dynamically. Static caching concerns changes to your code and templates introduced by deploys. If you do not wish to clear your entire cache every time you deploy, you need a way to indicate that some view, helper, or other piece of logic has changed.

Dynamic caching concerns changes that happen on the fly, usually made by your users in the running system. You wish to cache a view or a partial and have it expire whenever some data is updated – usually whenever a specific record is changed.

Dynamic Caching

Because of the way logic is contained in presenters, caching entire views or partials by the data they present becomes exceedingly straightforward. Simply define a #cache_key method that returns a non-nil object, and the return value will be used to cache the template.

Whereas in ERB you would include the cache call in the template itself:

<% cache([@post, signed_in?]) do %>
  ...
<% end %>

In Curly you would instead declare it in the presenter:

class Posts::ShowPresenter < Curly::Presenter
  presents :post

  def cache_key
    [@post, signed_in?]
  end
end

Likewise, you can add a #cache_duration method if you wish to automatically expire the fragment cache:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_duration
    30.minutes
  end
end

In order to set any cache option, define a #cache_options method that returns a Hash of options:

class Posts::ShowPresenter < Curly::Presenter
  ...

  def cache_options
    { compress: true, namespace: "my-app" }
  end
end

Static Caching

Static caching will only be enabled for presenters that define a non-nil #cache_key method (see Dynamic Caching.)

In order to make a deploy expire the cache for a specific view, set the version of the view to something new, usually by incrementing by one:

class Posts::ShowPresenter < Curly::Presenter
  version 3

  def cache_key
    # Some objects
  end
end

This will change the cache keys for all instances of that view, effectively expiring the old cache entries.

This works well for views, or for partials that are rendered in views that themselves are not cached. If the partial is nested within a view that is cached, however, the outer cache will not be expired. The solution is to register that the inner partial is a dependency of the outer one such that Curly can automatically deduce that the outer partial cache should be expired:

class Posts::ShowPresenter < Curly::Presenter
  version 3
  depends_on 'posts/comment'

  def cache_key
    # Some objects
  end
end

class Posts::CommentPresenter < Curly::Presenter
  version 4

  def cache_key
    # Some objects
  end
end

Now, if the version of Posts::CommentPresenter is bumped, the cache keys for both presenters would change. You can register any number of view paths with depends_on.

Curly integrates well with the caching mechanism in Rails 4 (or Cache Digests in Rails 3), so the dependencies defined with depends_on will be tracked by Rails. This will allow you to deploy changes to your templates and have the relevant caches automatically expire.

Thanks

Thanks to Zendesk for sponsoring the work on Curly.

Contributors

Daniel Schierbeck (@dasch)
Benjamin Quorning (@bquorning)
Jeremy Rodi (@medcat)
Alisson Cavalcante Agiani (@thelinuxlich)
Łukasz Niemier (@hauleth)
Cristian Planas (@Gawyn)
Steven Davidovitz (@steved)

Build Status

Author: zendesk
Source code: https://github.com/zendesk/curly

#ruby #ruby-on-rails

davis mike

1626331037

Caching In WordPress: What You Need to Learn?

WordPress caching has nothing new to showcase in this context. WordPress websites also run on a specific server system and you have to make sure these servers work well for user engagement. So caching can help your website server work effectively to serve too many visitors collectively. The commonly requested items can be converted into varied copies that the website server doesn’t want to showcase every time to every website visitor. Classification of Caching is usually divided into two kinds. The Client-Side Caching & the Server Side Caching. Where client-side caching has nothing to do with your website, Server Side Caching is usually its opposite. Read more on https://bit.ly/3rbqvVh

#caching plugins #server side caching #client side caching #wordpress websites #wordpress caching

Hillard Witting

1594375500

What is Distributed Caching

In this tutorial we are going to learn about what a cache is ? when we are going to use?, and How to use it? in a detailed manner.

So first of all,

What is a Cache?

Imagine that you have a system like this. Client Application request for some results from the server and the server asks those details form the Database. Then Database pullout the results to the Application server. Without pulling data from the Database all the time we can maintain another database/server to store data called Cache. Here there are 2 scenarios that you might want to use a cache.

When you requesting for a commonly used data, and every time we ask for those data we need to provide from the Database. Instead of this, you can save those commonly used data in a cache (in-memory cache). Here we can reduce network calls.
When you are doing a calculation by getting data from the database. You can reduce the number of calculations here. Store the result in cache and get the value from the cache without doing recomputations all the time. (Example: Assume you have a Student Management System and you need to calculate the average marks for a particular exam for a particular student. Store Average value in cache memory with key-value pair.)
We have all servers and they are hitting the database. It’s going to be a lot of loads. Instead of getting one cache, we can use more caches as a distributed system for Avoid load in the Database.

Can we store all the data in the cache?

No! We can’t store all the data in the cache because of multiple reasons.

The hardware that we use to make cache memories is much more expensive than a normal database.
If you store a ton of data on cache the search time will increase compared to the database.

So that now you know we can store infinite data on the database and we need to store the most valuable data in the cache.

When do you load data into the cache? When do you evict data from the cache?

Loading or Evicting data from the cache is called a Policy. So the cache performance depends on your cache policy. There are a number of policies you can have. The Most popular one is LRU(Least Recently Used).

**LRU **— you can add recently used entries to the bottom of the cache and least recently used entries go to the bottom. If you want to add new entries but the cache is almost full, then you can evict(kick) out those least recently used data.

Image for post

Some other Policies are,

Least Recently Used (LRU)
First In First Out (FIFO)
Random

#distributed-cache #caching-server #redis #caching

Adolphus Tillman

1659179100

How to Create A Theme in Gatsby with Stitches

Gatsby is a popular React framework used to build webpages and apps. Its design prioritizes security, scalability, and performance. Gatsby is supported by a large ecosystem, which includes Plugins for integrating services, themes for simple configuration, and Recipes for automating routine tasks. In this tutorial, you’ll learn how to create a theme in Gatsby with Stitches.

To get started with this tutorial, ensure you have the following

Node.js version 14 or later installed
yarn package manager installed.
Prior Knowledge of Stitches
Prior Knowledge of Gatsby

We also assume you have installed Gatsby’s CLI globally; do npm install -g gatsby-cli if not.

See more at: https://blog.openreplay.com/creating-a-theme-in-a-gatsby-application-with-stitches

#Gatsby #stitches