16 | }.into_view()
17 | })
18 | }
19 |
--------------------------------------------------------------------------------
/src/model/blog_post.rs:
--------------------------------------------------------------------------------
1 | use serde::Deserialize;
2 | use serde::Serialize;
3 | #[cfg(feature = "ssr")]
4 | use sqlx::types::chrono::NaiveDateTime;
5 | #[cfg(feature = "ssr")]
6 | use sqlx::types::chrono::Local;
7 | #[cfg(feature = "ssr")]
8 | use sqlx::FromRow;
9 |
10 | #[cfg(feature = "hydrate")]
11 | use chrono::NaiveDateTime;
12 | #[cfg(feature = "hydrate")]
13 | use chrono::Local;
14 |
15 |
16 | #[cfg_attr(feature = "ssr", derive(Serialize, Deserialize, Debug, Clone, FromRow))]
17 | #[cfg_attr(feature = "hydrate", derive(Serialize, Deserialize, Debug, Clone))]
18 | pub struct Post {
19 | pub id: String,
20 | pub dt: NaiveDateTime,
21 | pub image_url: String,
22 | pub title: String,
23 | pub text: String,
24 | }
25 |
26 | impl Post {
27 | pub fn new_empty() -> Post {
28 | Post {
29 | id: "".to_string(),
30 | dt: Local::now().naive_local(),
31 | image_url: "".to_string(),
32 | title: "".to_string(),
33 | text: "".to_string(),
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Ken
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/component/blog_preview_card.rs:
--------------------------------------------------------------------------------
1 | use leptos::*;
2 |
3 | use crate::model::blog_post::Post;
4 |
5 | #[component]
6 | pub fn BlogPreviewCard(blog_preview: Post) -> impl IntoView {
7 | let dt = format!("{}", blog_preview.dt.format("%b %e, %Y %I:%M%P"));
8 | view! {
9 |
10 |
14 | // title on the left
15 | Moonbound
16 |
17 | // nav bar
18 |
24 |
25 |
26 | }
27 | }
28 |
29 | #[component]
30 | pub fn App() -> impl IntoView {
31 | // Provides context that manages stylesheets, titles, meta tags, etc.
32 | provide_meta_context();
33 |
34 | view! {
35 | // injects a stylesheet into the document
36 | // id=leptos means cargo-leptos will hot-reload this stylesheet
37 |
38 |
39 | // sets the document title
40 |
41 |
42 |
43 |
44 | // content for this welcome page
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | }
56 | }
57 |
58 | /// 404 - Not Found
59 | #[component]
60 | fn NotFound() -> impl IntoView {
61 | // set an HTTP status code 404
62 | // this is feature gated because it can only be done during
63 | // initial server-side rendering
64 | // if you navigate to the 404 page subsequently, the status
65 | // code will not be set because there is not a new HTTP request
66 | // to the server
67 | #[cfg(feature = "ssr")]
68 | {
69 | // this can be done inline because it's synchronous
70 | // if it were async, we'd use a server function
71 | let resp = expect_context::();
72 | resp.set_status(actix_web::http::StatusCode::NOT_FOUND);
73 | }
74 |
75 | view! {
76 |
"Not Found"
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/end2end/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import type { PlaywrightTestConfig } from "@playwright/test";
2 | import { devices } from "@playwright/test";
3 |
4 | /**
5 | * Read environment variables from file.
6 | * https://github.com/motdotla/dotenv
7 | */
8 | // require('dotenv').config();
9 |
10 | /**
11 | * See https://playwright.dev/docs/test-configuration.
12 | */
13 | const config: PlaywrightTestConfig = {
14 | testDir: "./tests",
15 | /* Maximum time one test can run for. */
16 | timeout: 30 * 1000,
17 | expect: {
18 | /**
19 | * Maximum time expect() should wait for the condition to be met.
20 | * For example in `await expect(locator).toHaveText();`
21 | */
22 | timeout: 5000,
23 | },
24 | /* Run tests in files in parallel */
25 | fullyParallel: true,
26 | /* Fail the build on CI if you accidentally left test.only in the source code. */
27 | forbidOnly: !!process.env.CI,
28 | /* Retry on CI only */
29 | retries: process.env.CI ? 2 : 0,
30 | /* Opt out of parallel tests on CI. */
31 | workers: process.env.CI ? 1 : undefined,
32 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */
33 | reporter: "html",
34 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
35 | use: {
36 | /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
37 | actionTimeout: 0,
38 | /* Base URL to use in actions like `await page.goto('/')`. */
39 | // baseURL: 'http://localhost:3000',
40 |
41 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
42 | trace: "on-first-retry",
43 | },
44 |
45 | /* Configure projects for major browsers */
46 | projects: [
47 | {
48 | name: "chromium",
49 | use: {
50 | ...devices["Desktop Chrome"],
51 | },
52 | },
53 |
54 | {
55 | name: "firefox",
56 | use: {
57 | ...devices["Desktop Firefox"],
58 | },
59 | },
60 |
61 | {
62 | name: "webkit",
63 | use: {
64 | ...devices["Desktop Safari"],
65 | },
66 | },
67 |
68 | /* Test against mobile viewports. */
69 | // {
70 | // name: 'Mobile Chrome',
71 | // use: {
72 | // ...devices['Pixel 5'],
73 | // },
74 | // },
75 | // {
76 | // name: 'Mobile Safari',
77 | // use: {
78 | // ...devices['iPhone 12'],
79 | // },
80 | // },
81 |
82 | /* Test against branded browsers. */
83 | // {
84 | // name: 'Microsoft Edge',
85 | // use: {
86 | // channel: 'msedge',
87 | // },
88 | // },
89 | // {
90 | // name: 'Google Chrome',
91 | // use: {
92 | // channel: 'chrome',
93 | // },
94 | // },
95 | ],
96 |
97 | /* Folder for test artifacts such as screenshots, videos, traces, etc. */
98 | // outputDir: 'test-results/',
99 |
100 | /* Run your local dev server before starting the tests */
101 | // webServer: {
102 | // command: 'npm run start',
103 | // port: 3000,
104 | // },
105 | };
106 |
107 | export default config;
108 |
--------------------------------------------------------------------------------
/src/main.rs:
--------------------------------------------------------------------------------
1 | #[cfg(feature = "ssr")]
2 | #[actix_web::main]
3 | async fn main() -> std::io::Result<()> {
4 | use std::io;
5 |
6 | use actix_files::Files;
7 | use actix_web::*;
8 | use hot_blog::app::*;
9 | use leptos::*;
10 | use leptos_actix::{generate_route_list, LeptosRoutes};
11 | use sqlx::{migrate, sqlite::SqlitePoolOptions};
12 |
13 | let conf = get_configuration(None).await.expect("couldn't load configuration!");
14 | let addr = conf.leptos_options.site_addr;
15 | // Generate the list of routes in your Leptos App
16 | let routes = generate_route_list(App);
17 | println!("listening on http://{}", &addr);
18 |
19 | env_logger::init();
20 |
21 | let db_pool = SqlitePoolOptions::new()
22 | .connect("sqlite:post.db")
23 | .await
24 | .map_err(|e| io::Error::new(io::ErrorKind::Other, e))?;
25 |
26 | migrate!("./migrations")
27 | .run(&db_pool)
28 | .await
29 | .expect(format!("could not run sqlx migration {}", whoami::username()).as_str());
30 |
31 | HttpServer::new(move || {
32 | let leptos_options = &conf.leptos_options;
33 | let site_root = &leptos_options.site_root;
34 |
35 | App::new()
36 | .app_data(web::Data::new(db_pool.clone()))
37 | .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
38 | // serve JS/WASM/CSS from `pkg`
39 | .service(Files::new("/pkg", format!("{site_root}/pkg")))
40 | // serve other assets from the `assets` directory
41 | .service(Files::new("/assets", site_root))
42 | // serve the favicon from /favicon.ico
43 | .service(favicon)
44 | .leptos_routes(leptos_options.to_owned(), routes.to_owned(), App)
45 | .app_data(web::Data::new(leptos_options.to_owned()))
46 | //.wrap(middleware::Compress::default())
47 | })
48 | .bind(&addr)?
49 | .run()
50 | .await
51 | }
52 |
53 | #[cfg(feature = "ssr")]
54 | #[actix_web::get("favicon.ico")]
55 | async fn favicon(
56 | leptos_options: actix_web::web::Data,
57 | ) -> actix_web::Result {
58 | let leptos_options = leptos_options.into_inner();
59 | let site_root = &leptos_options.site_root;
60 | Ok(actix_files::NamedFile::open(format!(
61 | "{site_root}/favicon.ico"
62 | ))?)
63 | }
64 |
65 | #[cfg(not(any(feature = "ssr", feature = "csr")))]
66 | pub fn main() {
67 | // no client-side main function
68 | // unless we want this to work with e.g., Trunk for pure client-side testing
69 | // see lib.rs for hydration function instead
70 | // see optional feature `csr` instead
71 | }
72 |
73 | #[cfg(all(not(feature = "ssr"), feature = "csr"))]
74 | pub fn main() {
75 | // a client-side main function is required for using `trunk serve`
76 | // prefer using `cargo leptos serve` instead
77 | // to run: `trunk serve --open --features csr`
78 | use hot_blog::app::*;
79 | use leptos::*;
80 | use wasm_bindgen::prelude::wasm_bindgen;
81 |
82 | console_error_panic_hook::set_once();
83 |
84 | leptos::mount_to_body(move |cx| {
85 | // note: for testing it may be preferrable to replace this with a
86 | // more specific component, although leptos_router should still work
87 | view! {cx, }
88 | });
89 | }
90 |
--------------------------------------------------------------------------------
/src/repository/blog_repository.rs:
--------------------------------------------------------------------------------
1 | use crate::model::blog_post::Post;
2 | use std::{sync::Arc, thread::sleep, time::Duration};
3 |
4 | #[cfg(feature = "ssr")]
5 | use actix_web::web::Data;
6 | #[cfg(feature = "ssr")]
7 | use sqlx::{Pool, Sqlite};
8 |
9 | use leptos::{logging::log, *};
10 | #[cfg(feature = "ssr")]
11 | use leptos_actix::extract;
12 | #[cfg(feature = "ssr")]
13 | use uuid::Uuid;
14 |
15 | pub struct DBError {}
16 |
17 | #[server(UpsertPost, "/api")]
18 | pub async fn upsert_post(
19 | id: Option,
20 | dt: String,
21 | image_url: String,
22 | title: String,
23 | text: String,
24 | ) -> Result {
25 | let pool: Arc> =
26 | extract(|conn: Data>| async move { conn.into_inner() }).await?;
27 |
28 | let id = id.unwrap_or(Uuid::new_v4().to_string());
29 | sqlx::query("INSERT INTO post VALUES ($1, $2, $3, $4, $5) ON CONFLICT (id) DO UPDATE SET dt=excluded.dt, image_url=excluded.image_url, title=excluded.title, text=excluded.text")
30 | .bind(&id)
31 | .bind(&dt)
32 | .bind(&image_url)
33 | .bind(&title)
34 | .bind(&text)
35 | .execute(&*pool)
36 | .await?;
37 |
38 | Ok(id)
39 | }
40 |
41 | #[server(GetPost, "/api")]
42 | pub async fn get_post(id: String) -> Result {
43 | log!("get_post {:?}", &id);
44 | let pool: Arc> =
45 | extract(|conn: Data>| async move { conn.into_inner() }).await?;
46 | let res: Post = sqlx::query_as("SELECT * FROM post WHERE id = ?")
47 | .bind(id)
48 | .fetch_one(&*pool)
49 | .await
50 | .map_err(|_| ServerFnError::ServerError("error getting post".to_owned()))?;
51 |
52 | Ok(res)
53 | }
54 |
55 | #[server(DeletePost, "/api")]
56 | pub async fn delete_post(id: String) -> Result<(), ServerFnError> {
57 | log!("delete_post {:?}", &id);
58 | let pool: Arc> =
59 | extract(|conn: Data>| async move { conn.into_inner() }).await?;
60 |
61 | sqlx::query("DELETE FROM post WHERE ID = ?")
62 | .bind(id)
63 | .execute(&*pool)
64 | .await
65 | .map_err(|_| ServerFnError::ServerError("error deleting post".to_owned()))?;
66 |
67 | Ok(())
68 | }
69 |
70 | #[server(GetPreviews, "/api")]
71 | pub async fn get_previews(
72 | oldest: Option,
73 | newest: Option,
74 | preview_length: u8,
75 | page_size: u8,
76 | ) -> Result, ServerFnError> {
77 | log!(
78 | "get_previews {:?}, {:?}, {}, {}",
79 | oldest,
80 | newest,
81 | preview_length,
82 | page_size
83 | );
84 | let pool: Arc> =
85 | extract(|conn: Data>| async move { conn.into_inner() }).await?;
86 | let res: Vec = sqlx::query_as(
87 | "SELECT
88 | id, dt, image_url, title,
89 | CASE
90 | WHEN LENGTH(text) > $1 THEN SUBSTR(text, 0, $1) || '...'
91 | ELSE text
92 | END AS text
93 | FROM post
94 | ORDER BY dt DESC
95 | LIMIT $2",
96 | )
97 | .bind(preview_length)
98 | .bind(page_size)
99 | .fetch_all(&*pool)
100 | .await?;
101 |
102 | // Err(ServerFnError::ServerError("forced error".to_string()))
103 | Ok(res)
104 | }
105 |
--------------------------------------------------------------------------------
/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "hot-blog"
3 | version = "0.1.0"
4 | edition = "2021"
5 |
6 | [lib]
7 | crate-type = ["cdylib", "rlib"]
8 |
9 | [dependencies]
10 | actix-files = { version = "0.6", optional = true }
11 | actix-web = { version = "4", optional = true, features = ["macros"] }
12 | console_error_panic_hook = "0.1"
13 | cfg-if = "1"
14 | http = { version = "0.2", optional = true }
15 | leptos = { version = "0.5" }
16 | leptos_meta = { version = "0.5" }
17 | leptos_actix = { version = "0.5", optional = true }
18 | leptos_router = { version = "0.5" }
19 | wasm-bindgen = "=0.2.87"
20 | chrono = { version = "0.4.31", features = ["serde"] }
21 | sqlx = { version = "0.7", features = [ "runtime-tokio", "sqlite", "chrono" ], optional = true }
22 | serde = { version = "1.0.187", features = ["derive"] }
23 | uuid = {version = "1.5.0", optional = true, features = ["v4"] }
24 | env_logger = "0.10.0"
25 | log = "0.4.20"
26 | whoami = { version = "1.4.1", features = ["default"] }
27 |
28 | [features]
29 | csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
30 | hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
31 | ssr = [
32 | "dep:actix-files",
33 | "dep:actix-web",
34 | "dep:leptos_actix",
35 | "dep:sqlx",
36 | "dep:uuid",
37 | "leptos/ssr",
38 | "leptos_meta/ssr",
39 | "leptos_router/ssr",
40 | ]
41 |
42 | # Defines a size-optimized profile for the WASM bundle in release mode
43 | [profile.wasm-release]
44 | inherits = "release"
45 | opt-level = 'z'
46 | lto = true
47 | codegen-units = 1
48 | panic = "abort"
49 |
50 | [package.metadata.leptos]
51 | # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
52 | output-name = "leptos_start"
53 | # The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
54 | site-root = "target/site"
55 | # The site-root relative folder where all compiled output (JS, WASM and CSS) is written
56 | # Defaults to pkg
57 | site-pkg-dir = "pkg"
58 | # [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to //app.css
59 | # style-file = "style/output.css"
60 | tailwind-input-file = "input.css"
61 | tailwind-config-file = "tailwind.config.js"
62 | # Assets source dir. All files found here will be copied and synchronized to site-root.
63 | # The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
64 | #
65 | # Optional. Env: LEPTOS_ASSETS_DIR.
66 | assets-dir = "assets"
67 | # The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
68 | site-addr = "127.0.0.1:3000"
69 | # The port to use for automatic reload monitoring
70 | reload-port = 3001
71 | # [Optional] Command to use when running end2end tests. It will run in the end2end dir.
72 | # [Windows] for non-WSL use "npx.cmd playwright test"
73 | # This binary name can be checked in Powershell with Get-Command npx
74 | end2end-cmd = "npx playwright test"
75 | end2end-dir = "end2end"
76 | # The browserlist query used for optimizing the CSS.
77 | browserquery = "defaults"
78 | # Set by cargo-leptos watch when building with that tool. Controls whether autoreload JS will be included in the head
79 | watch = false
80 | # The environment Leptos will run in, usually either "DEV" or "PROD"
81 | env = "DEV"
82 | # The features to use when compiling the bin target
83 | #
84 | # Optional. Can be over-ridden with the command line parameter --bin-features
85 | bin-features = ["ssr"]
86 |
87 | # If the --no-default-features flag should be used when compiling the bin target
88 | #
89 | # Optional. Defaults to false.
90 | bin-default-features = false
91 |
92 | # The features to use when compiling the lib target
93 | #
94 | # Optional. Can be over-ridden with the command line parameter --lib-features
95 | lib-features = ["hydrate"]
96 |
97 | # If the --no-default-features flag should be used when compiling the lib target
98 | #
99 | # Optional. Defaults to false.
100 | lib-default-features = false
101 |
102 | # The profile to use for the lib target when compiling for release
103 | #
104 | # Optional. Defaults to "release".
105 | lib-profile-release = "wasm-release"
106 |
--------------------------------------------------------------------------------
/src/component/edit_post.rs:
--------------------------------------------------------------------------------
1 | use super::blog_post::BlogPost;
2 | use super::errors_fallback::error_fallback;
3 | use super::toast::ToastMessage;
4 | use super::toast::ToastType;
5 | use chrono::Duration;
6 | use chrono::DurationRound;
7 | use chrono::Local;
8 | use chrono::NaiveDateTime;
9 | use leptos::logging::log;
10 | use leptos::*;
11 | use leptos_router::*;
12 |
13 | use crate::model::blog_post::Post;
14 | use crate::repository::blog_repository::get_post;
15 | use crate::repository::blog_repository::DeletePost;
16 | use crate::repository::blog_repository::UpsertPost;
17 | use serde::{Deserialize, Serialize};
18 |
19 | #[derive(Params, Eq, PartialEq, Debug, Clone, Serialize, Deserialize)]
20 | struct EditPostParams {
21 | post_id: Option,
22 | }
23 |
24 | fn format_dt(datetime: NaiveDateTime) -> String {
25 | datetime.format("%Y-%m-%dT%H:%M").to_string()
26 | }
27 |
28 | #[component]
29 | pub fn EditPost() -> impl IntoView {
30 | let params: Memo> = use_params::();
31 | let post_resource: Resource<_, Result> = create_resource(
32 | move || params.get(),
33 | |params| async move {
34 | match params {
35 | Ok(EditPostParams { post_id: Some(s) }) => get_post(s).await,
36 | Ok(EditPostParams { post_id: None }) => Ok(Post::new_empty()), // if no id is in the URL path parameter, assume we are making a new post
37 | _ => Err(ServerFnError::Args("issue getting params".to_string())),
38 | }
39 | },
40 | );
41 |
42 | let upsert_post = create_server_action::();
43 | let delete_post = create_server_action::();
44 |
45 | let set_toast: WriteSignal = expect_context();
46 | // take them to the new or updated post once they create or edit it
47 | create_effect(move |_| {
48 | let id = upsert_post.value().get();
49 | if let Some(Ok(id)) = id {
50 | set_toast.set(ToastMessage {
51 | message: String::from("Post submitted."),
52 | toast_type: ToastType::Success,
53 | visible: true,
54 | });
55 | let navigate = use_navigate();
56 | navigate(format!("/view/{}", id).as_str(), Default::default());
57 | }
58 | });
59 |
60 | // take them to the home page if they delete a post
61 | create_effect(move |_| {
62 | let id = delete_post.value().get();
63 | if let Some(Ok(_)) = id {
64 | log!("set toast set");
65 | set_toast.set(ToastMessage {
66 | message: String::from("Post deleted."),
67 | toast_type: ToastType::Success,
68 | visible: true,
69 | });
70 |
71 | let navigate = use_navigate();
72 | navigate("/", Default::default());
73 | }
74 | });
75 |
76 | view! {
77 | "Loading..." }>
78 |
79 |
14 |