matous-volf/todo-baggins
matous-volf/todo-baggins
1
0
Fork 0
Code Issues 23 Pull Requests Actions Projects 1 Activity

feat: progressive web app support #48

Merged
matous-volf merged 5 commits from feat/pwa-support into main 2024-09-15 16:33:13 +00:00
Conversation 7 Commits 5 Files Changed 7 +25 -5
3 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2e39250d30 - Show all commits

1
docker-compose-dev.yml
View File

@ -11,6 +11,7 @@ services:
- ./Cargo.toml:/srv/app/Cargo.toml
- ./diesel.toml:/srv/app/diesel.toml
- ./Dioxus.toml:/srv/app/Dioxus.toml
- ./index.html:/srv/app/index.html
- ./package.json:/srv/app/package.json
- ./package-lock.json:/srv/app/package-lock.json
restart: always

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html class="min-h-screen">
<head>
<title>{app_title}</title>
<link rel="manifest" href="manifest.json">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8"/>
{style_include}
</head>
<body class="min-h-screen">
<div id="main" class="min-h-screen"></div>
<script type="module">
import init from "/{base_path}/assets/dioxus/{app_name}.js";
init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(wasm => {
if (wasm.__wbindgen_start == undefined) {
wasm.main();
}
});
coderabbitai[bot] commented 2024-09-13 14:40:00 +00:00 (Migrated from github.com)
Review
Copy Link

Tip

Codebase Verification

Dioxus application initialization may fail due to missing build artifacts

The verification process has revealed potential issues with the Dioxus application initialization:

  1. The WebAssembly (.wasm) and JavaScript files referenced in the initialization code were not found in the project.
  2. The 'assets/dioxus' directory referenced in the initialization code does not exist.

To resolve this:

  • Check the Dioxus build process and ensure it's generating the required .wasm and .js files.
  • Review the 'Dioxus.toml' configuration file to verify the output directory for build artifacts.
  • Once the build issues are resolved, update the initialization code in 'index.html' to match the actual project structure.
Analysis chain

Verify the Dioxus application initialization.

The script block on lines 16-20 initializes the Dioxus application by importing the init function from the generated JavaScript file and calling it with the path to the WebAssembly file.

To ensure that the Dioxus application is initialized correctly, run the following script:

If the generated files are not found or the main function is not exported, there might be an issue with the Dioxus build process. Double-check the Dioxus configuration and ensure that the application is built correctly.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the Dioxus application initialization.

# Test: Search for the generated JavaScript and WebAssembly files.
# Expect: The files should exist in the `assets/dioxus` directory.
fd --type file --regex '.*\.js$|.*\.wasm$' assets/dioxus

# Test: Search for the `main` function in the generated JavaScript file.
# Expect: The `main` function should be exported from the generated JavaScript file.
rg --type js $'export function main\(' assets/dioxus

Length of output: 267

Script:

#!/bin/bash
# Description: Verify the Dioxus application structure and asset locations

# Check if 'assets' directory exists at the root level
echo "Checking for 'assets' directory:"
ls -d assets 2>/dev/null || echo "No 'assets' directory found at root level"

# Search for .js and .wasm files in the entire project
echo -e "\nSearching for .js and .wasm files:"
fd -e js -e wasm

# Look for Dioxus configuration files
echo -e "\nSearching for Dioxus configuration files:"
fd -g '*dioxus*.toml'

# Search for 'init' function call in HTML files
echo -e "\nSearching for 'init' function call in HTML files:"
rg --type html 'init\s*\(' -A 3 -B 1

Length of output: 745

> [!TIP] > Codebase Verification **Dioxus application initialization may fail due to missing build artifacts** The verification process has revealed potential issues with the Dioxus application initialization: 1. The WebAssembly (.wasm) and JavaScript files referenced in the initialization code were not found in the project. 2. The 'assets/dioxus' directory referenced in the initialization code does not exist. To resolve this: - Check the Dioxus build process and ensure it's generating the required .wasm and .js files. - Review the 'Dioxus.toml' configuration file to verify the output directory for build artifacts. - Once the build issues are resolved, update the initialization code in 'index.html' to match the actual project structure. <details> <summary>Analysis chain</summary> **Verify the Dioxus application initialization.** The script block on lines 16-20 initializes the Dioxus application by importing the `init` function from the generated JavaScript file and calling it with the path to the WebAssembly file. To ensure that the Dioxus application is initialized correctly, run the following script: If the generated files are not found or the `main` function is not exported, there might be an issue with the Dioxus build process. Double-check the Dioxus configuration and ensure that the application is built correctly. </details> <details> <summary>Scripts executed</summary> The following scripts were executed for the analysis: Script: ```shell #!/bin/bash # Description: Verify the Dioxus application initialization. # Test: Search for the generated JavaScript and WebAssembly files. # Expect: The files should exist in the `assets/dioxus` directory. fd --type file --regex '.*\.js$|.*\.wasm$' assets/dioxus # Test: Search for the `main` function in the generated JavaScript file. # Expect: The `main` function should be exported from the generated JavaScript file. rg --type js $'export function main\(' assets/dioxus ``` Length of output: 267 --- Script: ```shell #!/bin/bash # Description: Verify the Dioxus application structure and asset locations # Check if 'assets' directory exists at the root level echo "Checking for 'assets' directory:" ls -d assets 2>/dev/null || echo "No 'assets' directory found at root level" # Search for .js and .wasm files in the entire project echo -e "\nSearching for .js and .wasm files:" fd -e js -e wasm # Look for Dioxus configuration files echo -e "\nSearching for Dioxus configuration files:" fd -g '*dioxus*.toml' # Search for 'init' function call in HTML files echo -e "\nSearching for 'init' function call in HTML files:" rg --type html 'init\s*\(' -A 3 -B 1 ``` Length of output: 745 </details> <!-- This is an auto-generated comment by CodeRabbit -->
</script>
{script_include}
</body>
</html>
coderabbitai[bot] commented 2024-09-13 14:40:00 +00:00 (Migrated from github.com)
Review
Copy Link

The HTML structure looks good overall, but there are a few areas for improvement.

  1. The <html> tag is missing the lang attribute, which is important for accessibility. Consider adding lang="en" (or the appropriate language) to the <html> tag.

  2. The <meta charset="UTF-8"/> tag on line 8 is redundant since the character encoding is already specified in the <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> tag on line 6. Remove the redundant tag for cleaner code.

  3. The script block on lines 13-21 uses placeholders like {base_path} and {app_name}. Ensure that these placeholders are properly replaced with actual values during the build process or server-side rendering.

  4. The {style_include} and {script_include} placeholders on lines 9 and 22 suggest that additional styles and scripts will be included. Make sure to include the necessary CSS and JavaScript files for the application to function properly.

  5. Consider adding a <noscript> tag to provide fallback content for users who have JavaScript disabled in their browsers.

Here's an updated version of the code with the suggested improvements:

<!DOCTYPE html>
-<html class="min-h-screen">
+<html lang="en" class="min-h-screen">
<head>
    <title>{app_title}</title>
    <link rel="manifest" href="manifest.json">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8"/>
    {style_include}
</head>
<body class="min-h-screen">
<div id="main" class="min-h-screen"></div>
+<noscript>
+    <p>Please enable JavaScript to use this application.</p>
+</noscript>
<script type="module">
    import init from "/{base_path}/assets/dioxus/{app_name}.js";

    init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(wasm => {
        if (wasm.__wbindgen_start == undefined) {
            wasm.main();
        }
    });
</script>
{script_include}
</body>
</html>

Make sure to replace the placeholders with actual values and include the necessary CSS and JavaScript files for the application to work as expected.

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

<!DOCTYPE html>
<html lang="en" class="min-h-screen">
<head>
    <title>{app_title}</title>
    <link rel="manifest" href="manifest.json">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {style_include}
</head>
<body class="min-h-screen">
<div id="main" class="min-h-screen"></div>
<noscript>
    <p>Please enable JavaScript to use this application.</p>
</noscript>
<script type="module">
    import init from "/{base_path}/assets/dioxus/{app_name}.js";

    init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(wasm => {
        if (wasm.__wbindgen_start == undefined) {
            wasm.main();
        }
    });
</script>
{script_include}
</body>
</html>
**The HTML structure looks good overall, but there are a few areas for improvement.** 1. The `<html>` tag is missing the `lang` attribute, which is important for accessibility. Consider adding `lang="en"` (or the appropriate language) to the `<html>` tag. 2. The `<meta charset="UTF-8"/>` tag on line 8 is redundant since the character encoding is already specified in the `<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>` tag on line 6. Remove the redundant tag for cleaner code. 3. The script block on lines 13-21 uses placeholders like `{base_path}` and `{app_name}`. Ensure that these placeholders are properly replaced with actual values during the build process or server-side rendering. 4. The `{style_include}` and `{script_include}` placeholders on lines 9 and 22 suggest that additional styles and scripts will be included. Make sure to include the necessary CSS and JavaScript files for the application to function properly. 5. Consider adding a `<noscript>` tag to provide fallback content for users who have JavaScript disabled in their browsers. Here's an updated version of the code with the suggested improvements: ```diff <!DOCTYPE html> -<html class="min-h-screen"> +<html lang="en" class="min-h-screen"> <head> <title>{app_title}</title> <link rel="manifest" href="manifest.json"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta charset="UTF-8"/> {style_include} </head> <body class="min-h-screen"> <div id="main" class="min-h-screen"></div> +<noscript> + <p>Please enable JavaScript to use this application.</p> +</noscript> <script type="module"> import init from "/{base_path}/assets/dioxus/{app_name}.js"; init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(wasm => { if (wasm.__wbindgen_start == undefined) { wasm.main(); } }); </script> {script_include} </body> </html> ``` Make sure to replace the placeholders with actual values and include the necessary CSS and JavaScript files for the application to work as expected. <!-- suggestion_start --> <details> <summary>Committable suggestion</summary> > :bangbang: **IMPORTANT** > Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements. `````suggestion <!DOCTYPE html> <html lang="en" class="min-h-screen"> <head> <title>{app_title}</title> <link rel="manifest" href="manifest.json"> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> <meta name="viewport" content="width=device-width, initial-scale=1"> {style_include} </head> <body class="min-h-screen"> <div id="main" class="min-h-screen"></div> <noscript> <p>Please enable JavaScript to use this application.</p> </noscript> <script type="module"> import init from "/{base_path}/assets/dioxus/{app_name}.js"; init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(wasm => { if (wasm.__wbindgen_start == undefined) { wasm.main(); } }); </script> {script_include} </body> </html> ````` </details> <!-- suggestion_end --> <!-- This is an auto-generated comment by CodeRabbit -->

5
src/styles/tailwind.css
View File

@ -7,9 +7,4 @@
/* noinspection CssInvalidAtRule */
@tailwind utilities;
html, body, #main {
/* noinspection CssInvalidAtRule */
@apply min-h-screen;
}
/* stylelint-enable */