Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
dylankyc authored and dylan committed Dec 18, 2024
0 parents commit 1dc19d2
Show file tree
Hide file tree
Showing 44 changed files with 10,780 additions and 0 deletions.
54 changes: 54 additions & 0 deletions .github/workflows/mdbook.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
# Sample workflow for building and deploying a mdBook site to GitHub Pages
#
# To get started with mdBook see: https://rust-lang.github.io/mdBook/index.html
#
name: Deploy mdBook site to Pages
on:
# Runs on pushes targeting the default branch
push:
branches: ["main"]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
env:
MDBOOK_VERSION: 0.4.43
steps:
- uses: actions/checkout@v4
- name: Install mdBook
run: |
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf -y | sh
rustup update
cargo install --version ${MDBOOK_VERSION} mdbook
- name: Setup Pages
id: pages
uses: actions/configure-pages@v5
- name: Build with mdBook
run: mdbook build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./book
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
book
Binary file added .img/import-orders-from-schema.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .img/import-orders.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions book.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[book]
authors = ["dylan"]
language = "en"
multilingual = false
src = "src"
title = "Dylan's Blog"
5 changes: 5 additions & 0 deletions run.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
#!/bin/bash

mdbook serve

# open localhost:3000
33 changes: 33 additions & 0 deletions src/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Summary

# Solana

- [Quickstart]()
- [使用 TypeScript 创建账户](solana/quickstart/使用TypeScript创建账户.md)
- [不使用 Anchor 开发 solana program(Native Program)](solana/quickstart/不使用Anchor开发solana的program.md)

# React

- [Functional Component]()
- [Render all chartjs charts in react typescript tailwindcss projects](react/functional-component/render-all-chartjs-charts.md)

# Rust

- [GRPC]()
- [Rust grpc helloworld](rust/grpc/rust-grpc-helloworld.md)
- [Diesel]()
- [Upgrade diesel to 2.0](rust/diesel/upgrade-diesel-to-2.0.md)
- [Use jsonb in diesel](rust/diesel/use-jsonb-in-diesel.md)
- [Tokio]()
- [Tokio Codec](rust/tokio/tokio-codec.md)
- [Async Healthcheck Multiple Endpoints](rust/tokio/async-healthcheck-multiple-endpoints.md)
- [Actix]()
- [prometheus support for actix-web project](rust/actix/prometheus-support-to-actix-web.md)
- [Send Http Request in Handle function And started function When Using Actix crate](rust/actix/send-http-request-in-handle-function-and-started-function-when-using-actix-crate.md)
- [Serde]()
- [Serialize time::OffsetDataTime type using serde_as in serde_with crate](rust/serde/serialize-time-offsetdatetime-type-using-serde-as-in-serde-with-crate.md)

# MUI

- [Upgrade]()
- [Upgrade from v4 to v5](mui/upgrade/upgrade-from-v4-to-v5.md)
81 changes: 81 additions & 0 deletions src/mui/upgrade/upgrade-from-v4-to-v5.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
# Title: Upgrading Material-UI from v4 to v5: A Comprehensive Guide

<!-- toc -->

- [Introduction:](#introduction)
- [Step 1: Upgrade React to 17.0.0:](#step-1-upgrade-react-to-1700)
- [Step 2: Update MUI packages and peer dependencies:](#step-2-update-mui-packages-and-peer-dependencies)
- [Step 3: Run codemods:](#step-3-run-codemods)
- [Step 4: Fix broken code:](#step-4-fix-broken-code)
- [Step 5: Replace all imports:](#step-5-replace-all-imports)
- [Step 6: Test and finalize:](#step-6-test-and-finalize)
- [References:](#references)

<!-- tocstop -->

# Introduction:

Material-UI is a popular React component library that provides a set of pre-built UI components for building modern and responsive web applications. With the release of Material-UI v5, there have been significant changes and improvements, making it essential for developers to upgrade from v4 to v5. In this blog post, we will walk you through the step-by-step process of upgrading Material-UI to its latest version.

# Step 1: Upgrade React to 17.0.0:

To start the upgrade process, it is necessary to update React to version 17.0.0 or above. This can be done using the following command:

```bash
yarn upgrade @material-ui/core@^4.11.2 react@^17.0.0
```

# Step 2: Update MUI packages and peer dependencies:

Next, we need to update the Material-UI packages and their peer dependencies. Run the following commands to install the required packages:

```bash
yarn add @mui/material @mui/styles
yarn add @mui/lab
yarn add @mui/icons-material
yarn add @emotion/react @emotion/styled
```

# Step 3: Run codemods:

Material-UI provides codemods that automatically adjust your code to account for breaking changes in v5. These codemods help in migrating your codebase efficiently. Run the following command to apply the preset-safe codemod:

```bash
npx @mui/codemod v5.0.0/preset-safe <path>
```

Additionally, you can run specific codemods for individual components or pages if needed. For example:

```bash
npx @mui/codemod v5.0.0/preset-safe components
npx @mui/codemod v5.0.0/preset-safe pages
```

# Step 4: Fix broken code:

After running the codemods, it's important to review your codebase for any broken code. One common issue is the usage of the `theme.spacing()` function, which has changed in v5. Replace instances of `theme.spacing(2)` with `2`, `theme.spacing(4)` with `4`, and so on, to fix this issue.

# Step 5: Replace all imports:

With the release of v5, the package names have changed from `@material-ui/*` to `@mui/*`. To ensure compatibility with the latest version, replace all imports accordingly. Here are some examples:

```bash
yarn remove @material-ui/core
yarn remove @material-ui/icons
yarn remove @material-ui/lab
yarn remove @material-ui/pickers

yarn remove @mui/x-data-grid
yarn add @mui/x-data-grid
```

# Step 6: Test and finalize:

After completing the above steps, thoroughly test your application to ensure that it runs without any errors. Make any necessary adjustments or fixes as required. Once you are confident that your application is functioning correctly, commit the changes and finalize the upgrade process.

Conclusion:
Upgrading Material-UI from v4 to v5 is an important step to take advantage of the latest features, bug fixes, and improvements. By following the steps outlined in this guide, you can smoothly upgrade your Material-UI-based application to the latest version. Remember to thoroughly test your application after the upgrade to ensure everything is functioning as expected. Happy coding with Material-UI v5!

# References:

- Material-UI Migration Guide: [Migrating to v5: getting started](https://mui.com/material-ui/migration/migration-v4/)
Loading

0 comments on commit 1dc19d2

Please sign in to comment.