diff --git a/README.md b/README.md index 2381a33..d6ca9a7 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,9 @@ A Wasm-based, low effort blog that loads MD/MDx files. Made with [Trunk] and [Ye Posts are stored via `posts/` in the project's root, which Trunk copies over on build. Wasm bindings are used to call `fetch`, where the post is rendered as HTML and displayed. -**Note:** please do not delete `metadata.json` - it's used for loading posts! It is autogenerated on each build, where it parses each post's header: +> **Note:** please do not delete `metadata.json` - it's used for loading posts! It is autogenerated on each build, where it parses each post's header: +> +> The `id` must also match the **filename**! (`id: example` -> `example.md`) ```md --- diff --git a/index.scss b/index.scss index f25123f..da6beb8 100644 --- a/index.scss +++ b/index.scss @@ -1,23 +1,24 @@ html, body { - font-family: 'Ubuntu'; - height: 100%; - margin: 0; - background: #212129; - background-image: radial-gradient(#3d3e51 1px, transparent 0); - background-size: 40px 40px; - background-position: -19px -19px; - color: beige; - animation: animatedBackground 40s linear infinite alternate; + font-family: 'Ubuntu'; + height: 100%; + margin: 0; + background: #212129; + background-image: radial-gradient(#3d3e51 1px, transparent 0); + background-size: 40px 40px; + background-position: -19px -19px; + color: beige; + animation: animatedBackground 40s linear infinite alternate; } @keyframes animatedBackground { - 0% { - background-position: top left; - } - 100% { - background-position: bottom right; - } + 0% { + background-position: top left; + } + + 100% { + background-position: bottom right; + } } // pallette @@ -29,149 +30,177 @@ body { // #4c5265 (76,82,101) button { - color: rgb(245, 245, 220); - background-color: #40445a; - border-radius: 8px; - padding: 8px 8px 10px 10px; - border: none; - font-weight: bold; - margin: 4px; + color: rgb(245, 245, 220); + background-color: #40445a; + border-radius: 8px; + padding: 8px 8px 10px 10px; + border: none; + font-weight: bold; + margin: 4px; } button:hover { - background-color: #3d3e51; + background-color: #3d3e51; } nav { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - flex-direction: column; - padding-top: 5%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; + padding-top: 5%; } nav img { - max-width: 80px; - border-radius: 50%; + max-width: 80px; + border-radius: 50%; } main { - display: flex; - justify-content: center; - align-items: center; - margin: 30px; + display: flex; + justify-content: center; + align-items: center; + margin: 30px; } h1 { - font-size: 2rem; + font-size: 2rem; } code { - margin: 0px 4px 0px 4px; - font-size: larger; + margin: 0px 4px 0px 4px; + font-size: larger; + white-space: pre-line; } - .bar { - display: flex; - fill: beige; - width: 100%; - margin: 10px 10px 10px 0px; - height: 2px; - border-radius: 10px; - background-color: rgb(245, 245, 220)dc; +.bar { + display: flex; + fill: beige; + width: 100%; + margin: 10px 10px 10px 0px; + height: 2px; + border-radius: 10px; + background-color: rgb(245, 245, 220)dc; } // BLOG .body { - display: flex; - flex-direction: column; - width: 100%; - align-items: center; - justify-content: center; - background-color: #3d3e51; - flex-grow: 1; - border-radius: 8px; - opacity: .75; + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + justify-content: center; + background-color: #3d3e51; + flex-grow: 1; + border-radius: 8px; + opacity: .75; } .full { - width: 90%; + width: 90%; } -.list, .list-header, .list-body { - display: flex; - flex-direction: column; - justify-content: center; - padding: 15px; +.list, +.list-header, +.list-body { + display: flex; + flex-direction: column; + justify-content: center; + padding: 15px; } .list-body button { - align-self: center; + align-self: center; } .list-item { - border-radius: 8px; - padding: 10px; + border-radius: 8px; + padding: 10px; } .list-item:hover { - animation: fadeIn 0.5s; + animation: fadeIn 0.25s; + background-color: rgba(33, 33, 41, 1); } @keyframes fadeIn { - 0% { background-color: rgba(33, 33, 41,0.1); } - 100% { background-color: rgba(33, 33, 41,1); } + 0% { + background-color: rgba(33, 33, 41, 0.1); + } + + 100% { + background-color: rgba(33, 33, 41, 1); + } } .post { - display: flex; - flex-direction: column; - padding: 5% 10% 10% 10%; - background-color: rgba(64,68,90,0.75); - box-shadow: 2px 10px 34px 5px rgba(64,68,90,0.44); - h1 { - font-size: 5.9vw; - } - h2 { - font-size: 3.0vh; - } - p { - font-size: 2vmin; - } - li { - font-size: 2vmin; - } + display: flex; + flex-direction: column; + padding: 5% 10% 10% 10%; + background-color: rgba(64, 68, 90, 0.75); + box-shadow: 2px 10px 34px 5px rgba(64, 68, 90, 0.44); + + h1 { + font-size: 5.9vw; + } + + h2 { + font-size: 5.0vh; + } + + h3 { + font-size: 4.1vh; + } + + p { + font-size: 2.7vmin; + } + + li { + font-size: 4vmin; + } +} + +@media only screen and (max-width: 600px) { + .post { + p { + font-size: 4.5vmin; + } + } } + .post hr { - width: 100%; + width: 100%; } .post img { - max-width: 65%; - box-shadow: 2px 10px 10px 5px rgba(0,0,0,0.1); - margin-left: 17.5%; - margin-right: 17.5%; + max-width: 65%; + box-shadow: 2px 10px 10px 5px rgba(0, 0, 0, 0.1); + margin-left: 17.5%; + margin-right: 17.5%; } .post a { - color: beige; + color: beige; } .post p img { - display: flex; - justify-self: center; - justify-content: center; + display: flex; + justify-self: center; + justify-content: center; } -.post .info, .date, .author { - font-style: italic; - color: rgba(245, 245, 220, 0.5); +.post .info, +.date, +.author { + font-style: italic; + color: rgba(245, 245, 220, 0.5); } .info { - display: flex; - justify-content: space-between; -} \ No newline at end of file + display: flex; + justify-content: space-between; +} diff --git a/posts/metadata.json b/posts/metadata.json index 126b30e..748edc8 100644 --- a/posts/metadata.json +++ b/posts/metadata.json @@ -1 +1 @@ -[{"title":"Wasm blog!??!?","id":"wasm","date":"Aug 23rd 2023","author":"badery","peek":"A short, real post on WASM!","md_name":"./posts/wasm.md"}] \ No newline at end of file +[{"title":"welcome, friend.","id":"welcome","date":"Oct 1st 2023","author":"bader","peek":"the start of something new, perhaps?","md_name":"./posts/welcome.md"}] \ No newline at end of file diff --git a/posts/wasm.md b/posts/wasm.md deleted file mode 100644 index 590c14f..0000000 --- a/posts/wasm.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Wasm blog!??!? -id: wasm -date: Aug 23rd 2023 -author: badery -desc: A short, real post on WASM! ---- - -![](https://ik.imagekit.io/serenity/ByteofDev/Blog_Heading_Images/State_of_the_Web_WebAssembly) - -### A quick, easy blog. - -A blog built with Yew and Wasm. Has full markdown support, making it super easy to post. - -Simply add your md file, and the server will automatically generate the correct metadata, render the web page, and serve! diff --git a/posts/welcome.md b/posts/welcome.md new file mode 100644 index 0000000..cefa3fd --- /dev/null +++ b/posts/welcome.md @@ -0,0 +1,41 @@ +--- +title: welcome, friend. +id: welcome +date: Oct 1st 2023 +author: bader +desc: the start of something new, perhaps? +--- + +## hello. + +Most of this blog will probably be an informal, rant-like format. Over the years, I've been priveleged enough to have written on [Hackernoon](https://hackernoon.com/u/anormaljourney), which has gotten me pretty far. I mostly cover the following: + +- What the future of technology could look like. + +- Web3 and blockchain. More specifically, [Polkadot](https://polkadot.network) and [Substrate](https://substrate.io), as that is my current occupational interest. + +- Rust and WebAssembly. + +At the time of this writing, I work as a technical educatior at the [Web3 Foundation](https://web3.foundation), where I work on education surrounding blockchain engineering, design, and architecture. + +I usually like to explore nuanced topics that relate to all of these things above, such as rebuilding the [internet using ants](https://hackernoon.com/reinventing-the-internet-welcome-to-the-antinet-bog001). + +## FAQ + +### What was this blob built with? + +This blog was born out of my love for Rust. It was made using Yew, which is a fantastic way for me to avoid writing JavaScript. In short, Yew compiles to WebAssembly, a portable format that can be executed in almost any modern browser. + +### Isn't blockchain/web3 a hype industry? + + Not really. The technology is sound, the applications infinite, but the reality often disappointing. It will surely improve with time, as it has the potential to fundementally change how we define computation over the internet. + + ### How do you say your name? + + I am not sure why you want to know, but Bader, Bay-der, Badder, Budder, or other pronounceations all work, as I really do not care. The list goes on, really any proncounation works. If you really want, pronounce it like Bed-e*rr*, but roll the _r_. + + If I got you to try saying it while reading this, my goal is complete. + + ### What are you working on now? + + Check out my [GitHub](https://github.com/CrackTheCode016), it's the best place to stalk any projects. diff --git a/src/components/blog_list.rs b/src/components/blog_list.rs index 65cfdc1..26a37c2 100644 --- a/src/components/blog_list.rs +++ b/src/components/blog_list.rs @@ -20,7 +20,7 @@ fn post_to_list_item(post: &Post, navigator: Navigator) -> Html { html! {
-

{"Tue Aug 22"}

+

{post.date.clone()}

{post.title.clone()}