Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add "Made with Dioxus" section to the awesome page #142

Merged
merged 2 commits into from
Nov 20, 2023
+83 −16
Merged

Add "Made with Dioxus" section to the awesome page #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ef6289
Finish
Oct 13, 2023
c99ff64
Update awesome link to org repo
Oct 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified dioxus_search/index_search.bin
View file
Open in desktop
Binary file not shown.
20 changes: 18 additions & 2 deletions public/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
*/

/*
Expand Down Expand Up @@ -191,6 +191,10 @@ select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
Expand Down Expand Up @@ -341,6 +345,14 @@ menu {
padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/
Expand Down Expand Up @@ -1638,6 +1650,10 @@ video {
padding-bottom: 1rem;
}

.pb-48 {
padding-bottom: 12rem;
}

.pb-64 {
padding-bottom: 16rem;
}
Expand Down Expand Up @@ -2776,7 +2792,7 @@ video {
}
}

@media (min-height:1080px) {
@media(min-height:1080px) {
.\[\@media\(min-height\:1080px\)\]\:h-screen {
height: 100vh;
}
Expand Down
79 changes: 65 additions & 14 deletions src/components/awesome/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
use std::fmt::{Display, Formatter};
use dioxus::prelude::*;
use wasm_bindgen::prelude::wasm_bindgen;
use crate::*;
Expand All @@ -9,6 +10,7 @@ const STAR_CACHE_NAME: &str = "STARS-";
struct Item {
name: String,
description: String,
r#type: AwesomeType,
category: Category,

/// Option GitHub Information
Expand All @@ -20,6 +22,12 @@ struct Item {
link: Option<String>,
}

#[derive(Clone, serde::Deserialize, PartialEq)]
enum AwesomeType {
Awesome,
MadeWith
}

#[derive(Default, Clone, serde::Deserialize, PartialEq)]
struct GithubInfo {
username: String,
Expand All @@ -28,29 +36,33 @@ struct GithubInfo {

#[derive(Clone, serde::Deserialize, PartialEq)]
enum Category {
Misc,
Util,
Logging,
Components,
Example,
Styling,
Deployment,
Renderer,
Misc,
/// This is not actually displayed
App,
}

impl ToString for Category {
fn to_string(&self) -> String {
let result = match self{
impl Display for Category {
fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
let converted = match self {
Self::Misc => "📎 Misc",
Self::Util => "🧰 Util",
Self::Logging => "📡 Logging",
Self::Components => "📦 Components",
Self::Example => "📝 Example",
Self::Styling => "🎨 Styling",
Self::Deployment => "⚙️ Deployment",
Self::Renderer => "🎥 Renderer",
Self::Misc => "📎 Misc"
Self::App => "🚀 App",
};
result.to_string()

write!(f, "{converted}")
}
}

Expand Down Expand Up @@ -94,7 +106,8 @@ pub fn Awesome(cx: Scope) -> Element {
}
p {
class: "mx-auto text-xl text-gray-600 dark:text-gray-400 pb-10 px-2 max-w-screen-sm",
"Everything you'll need to build awesome Dioxus apps."
"Everything you'll need to build awesome Dioxus apps. Also check out "
b { Link { to: "#made-with-dioxus", "Made with Dioxus" } } "!"
}
}
div {
Expand All @@ -114,10 +127,46 @@ pub fn Awesome(cx: Scope) -> Element {
}

section {
class: "dark:bg-ideblack w-full pb-96",
class: "dark:bg-ideblack w-full pb-24",
div {
class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 container mx-auto px-2 max-w-screen-1g",
items.iter().map(|item| rsx!(AwesomeItem { key: "{item.name}", item: item.clone() }))
items.iter().filter_map(|item| {
if let AwesomeType::Awesome = item.r#type {
Some(rsx!(AwesomeItem { key: "{item.name}", item: item.clone() }))
} else {
None
}
})
}
}

section {
class: "dark:bg-ideblack w-full pb-10",
div {
class: "container mx-auto max-w-screen-1g text-center",
h1 {
class: "text-[3.3em] font-bold tracking-tight dark:text-white text-ghdarkmetal mb-2 px-2",
id: "made-with-dioxus",
"Made with Dioxus"
}
p {
class: "mx-auto text-xl text-gray-600 dark:text-gray-400 pb-10 px-2 max-w-screen-sm",
"Real world uses of Dioxus."
}
}
}

section {
class: "dark:bg-ideblack w-full pb-24",
div {
class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 container mx-auto px-2 max-w-screen-1g",
items.iter().filter_map(|item| {
if let AwesomeType::MadeWith = item.r#type {
Some(rsx!(AwesomeItem { key: "{item.name}", item: item.clone() }))
} else {
None
}
})
}
}
))
Expand Down Expand Up @@ -202,8 +251,6 @@ fn AwesomeItem(cx: Scope, item: Item) -> Element {
}
};

// Get the category to display
let display_category = item.category.to_string();
cx.render(rsx!(
Link {
to: NavigationTarget::<Route>::External(link),
Expand All @@ -222,9 +269,13 @@ fn AwesomeItem(cx: Scope, item: Item) -> Element {
}
div {
class: "mt-auto pt-4 flex",
p {
class: "text-gray-300 font-bold",
"{display_category}"
if Category::App != item.category {
rsx! {
p {
class: "text-gray-300 font-bold",
"{item.category}"
}
}
}
p {
class: "ml-auto text-gray-300 font-bold",
Expand Down
Loading