chore: updated readme and small styles
1a1318cd
2 file(s) · +12 −85
| 1 | - | # Norns |
|
| 1 | + | # Blogfeeds.net |
|
| 2 | 2 | ||
| 3 | 3 |  |
|
| 4 | 4 | ||
| 5 | - | Interoperable web components for decentralized applications |
|
| 6 | - | ||
| 7 | - | ## Overview and Reasoning |
|
| 8 | - | ||
| 9 | - | Some of the first crypto apps we build were in React, and it's possible we might be able to resurrect some of them if we tried. However the unfortunate reality is that web dev frameworks accelerate at an alarming rate, and that goes for blockchain related libraries as well (shudders at the memory of viem v1 -> v2 and ethers v5 -> v6). It doesn't have to be like that though. |
|
| 10 | - | ||
| 11 | - | Web components are independant pieces of Javascript that can be imported to plain HTML but also frameworks as well. They're atomic, existing on their own and able to out-last any framework as long as we keep using Javscript (unfortunately I think that is the case). Some notable existing web component libraries include [Material Web](https://github.com/material-components/material-web) and [Web Awesome](https://github.com/shoelace-style/webawesome). |
|
| 12 | - | ||
| 13 | - | The goal of Norns is to provide the Ethereum ecosystem a set of simple yet powerful web components for building decentralized applications. The advantage we have today is that we've experienced good DX from modern frameworks, so we have the ability to build components that feel familiar to devs building UIs for smart contracts. We will start small but slowly grow the offering as we get a better feel for what devs need; check out the [Roadmap](#roadmap) for more information. |
|
| 14 | - | ||
| 15 | - | ## Local Development Setup |
|
| 16 | - | ||
| 17 | - | 1. Clone and install dependencies with [Bun](https://bun.sh) |
|
| 18 | - | ||
| 19 | - | ```bash |
|
| 20 | - | git clone https://github.com/stevedylandev/norns |
|
| 21 | - | cd norns |
|
| 22 | - | bun install |
|
| 23 | - | ``` |
|
| 24 | - | ||
| 25 | - | 2. Run the dev server |
|
| 26 | - | ||
| 27 | - | ```bash |
|
| 28 | - | bun dev |
|
| 29 | - | ``` |
|
| 30 | - | ||
| 31 | - | This will run a simple server for `site/index.html` which imports components from `src/component/` |
|
| 32 | - | ||
| 33 | - | 3. Build |
|
| 34 | - | ||
| 35 | - | After editing components and testing them in the dev server you can run the `build` command to generate the CLI from `src/index.ts` that will create a `dist` folder. This enables users to run something like `npx norns-ui@latest init` to setup a project and add components, similar to shadcn/ui. |
|
| 36 | - | ||
| 37 | - | ## Roadmap |
|
| 38 | - | ||
| 39 | - | Still figuring this out, suggestions and examples welcome! |
|
| 40 | - | ||
| 41 | - | **CLI** |
|
| 42 | - | ||
| 43 | - | - [x] Implement `norns.json` initialization |
|
| 44 | - | - [x] Improve styles and UX of commands and help menus |
|
| 45 | - | - [ ] Include utility files like types in initialization and `norns.json` |
|
| 46 | - | ||
| 47 | - | **Components** |
|
| 48 | - | ||
| 49 | - | - [x] Connect Wallet |
|
| 50 | - | - [x] Contract Call |
|
| 51 | - | - [ ] TX Toasts? |
|
| 52 | - | - [ ] Contract State (similar to contract call but auto loads the state) |
|
| 53 | - | - [ ] Framework compatability |
|
| 54 | - | - [x] React |
|
| 55 | - | - [ ] Svelte |
|
| 56 | - | - [ ] Vue |
|
| 57 | - | - [ ] General types through JSDoc? |
|
| 58 | - | - [ ] Add tailwindcss class/className prop |
|
| 59 | - | - [ ] Styles override if shadcn present? |
|
| 60 | - | ||
| 61 | - | ## Contributing |
|
| 62 | - | ||
| 63 | - | Norns is still in early development but definitely open to contributions! Just open an issue to get the ball rolling :) |
|
| 64 | - | ||
| 65 | - | ## Contact |
|
| 66 | - | ||
| 67 | - | Feel free to reach out to any of my [socials](https://stevedylan.dev/links) or [shoot me an email](mailto:contact@stevedylan.dev) |
|
| 5 | + | Website for promoting the idea of Blog Feeds and providing resources |
| 89 | 89 | ||
| 90 | 90 | <p>Starting a blog is actually a lot simpler than what you're probably thinking. This doesn't have to be some well polished highly viewed monetization machine. It's just a simple website where you can casually talk about whatever you want to talk about! It can be long, short, a list of small things, or just a quote. It should be how you talk with other people in your own life, or how you communicate with the outside world. It should be you on a page. Here's a few places you can make a blog that are RSS enabled:</p> |
|
| 91 | 91 | ||
| 92 | - | <details class="w-full"> |
|
| 93 | - | <summary class="cursor-pointer text-lg font-semibold flex items-center"> |
|
| 94 | - | <svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 95 | - | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 96 | - | </svg> |
|
| 97 | - | Hosted Services |
|
| 98 | - | </summary> |
|
| 99 | - | <div class="mt-2 pl-7"> |
|
| 92 | + | <div class="w-full"> |
|
| 93 | + | <h3 class="text-lg font-semibold mb-2">Hosted Services</h3> |
|
| 94 | + | <div class="mb-4"> |
|
| 100 | 95 | <p class="text-gray-700 mb-3">These are great if you are not quite a technical person and need everything to be simple and easy to use.</p> |
|
| 101 | 96 | <div class="flex flex-wrap gap-2"> |
|
| 102 | - | <a href="https://bearblog.dev" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Bear Blog ⭐️</a> |
|
| 97 | + | <a href="https://bearblog.dev" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Bear Blog</a> |
|
| 103 | 98 | <a href="https://substack.com" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Substack</a> |
|
| 104 | 99 | <a href="https://ghost.org" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Ghost</a> |
|
| 105 | 100 | <a href="https://wordpress.com" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Wordpress</a> |
|
| 106 | 101 | <a href="https://www.squarespace.com" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Squarespace</a> |
|
| 107 | 102 | </div> |
|
| 108 | 103 | </div> |
|
| 109 | - | </details> |
|
| 104 | + | </div> |
|
| 110 | 105 | ||
| 111 | - | <details class="w-full"> |
|
| 112 | - | <summary class="cursor-pointer text-lg font-semibold flex items-center"> |
|
| 113 | - | <svg class="w-4 h-4 mr-3 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
| 114 | - | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> |
|
| 115 | - | </svg> |
|
| 116 | - | Self Hosted Frameworks |
|
| 117 | - | </summary> |
|
| 118 | - | <div class="mt-2 pl-7"> |
|
| 106 | + | <div class="w-full"> |
|
| 107 | + | <h3 class="text-lg font-semibold mb-2">Self Hosted Frameworks</h3> |
|
| 108 | + | <div class="mb-4"> |
|
| 119 | 109 | <p class="text-gray-700 mb-3">For the devs 🫡 Some of my favorite frameworks and tools for making a blog!</p> |
|
| 120 | 110 | <div class="flex flex-wrap gap-2"> |
|
| 121 | 111 | <a href="https://astro.build" target="_blank" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Astro</a> |
|
| 125 | 115 | <a href="https://jekyllrb.com" target="_blank" class="bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded-full text-sm font-medium transition-colors">Jekyll</a> |
|
| 126 | 116 | </div> |
|
| 127 | 117 | </div> |
|
| 128 | - | </details> |
|
| 118 | + | </div> |
|
| 129 | 119 | </div> |
|
| 130 | 120 | </section> |
|
| 131 | 121 | ||
| 230 | 220 | <!--<button id="backToStartBtn" class="underline font-medium transition-colors"> |
|
| 231 | 221 | Back to the beginning |
|
| 232 | 222 | </button>--> |
|
| 223 | + | <p class="text-gray-600 text-sm">Made by <a target="_blank" class="underline font-semibold" href="https://stevedylan.dev">Steve</a></p> |
|
| 233 | 224 | <div> |
|
| 234 | 225 | <a href="https://github.com/stevedylandev/blogfeeds.net" target="_blank" class="inline-flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm font-medium transition-colors"> |
|
| 235 | 226 | <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"> |
|
| 236 | 227 | <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> |
|
| 237 | 228 | </svg> |
|
| 238 | - | Contribute |
|
| 239 | 229 | </a> |
|
| 240 | 230 | </div> |
|
| 241 | - | <p class="text-gray-600 text-sm">Made by <a target="_blank" class="underline font-semibold" href="https://stevedylan.dev">Steve</a></p> |
|
| 242 | 231 | </div> |
|
| 243 | 232 | </div> |
|
| 244 | 233 | </section> |
|