Giter Club home page Giter Club logo

orkl's Introduction

orkl
Super simple peer-to-peer blogging site based on Beaker.

―

Why?

I wanted to build a peer-to-peer only blog; kind of like the p2p child of Svbtle and Telegra.ph. Fell in love with the idea of a site, which feels the same for the writer and the reader. The only difference is that the writer can change things and the reader can't. Thanks to Dat, we can easily decide if a computer is the owner or not of a site.

orkl is also 100% dynamic, so it's basically just a bunch of txt files (using smarkt) = no site generation or building.

Usage

The magic of Beaker Browser is the possibility to fork a site. To get started you can fork any orkl site, but for the sake of simplicity we will use an empty site I've made.

  • Download Beaker Browser
  • Navigate to dat://orkl-kodedninja.hashbase.io
  • Find the "Fork this site" button, click it and fill out with your information
  • Navigate to your site
  • Edit the site's dat.json, adding "fallback_page": "index.html" (from Beaker 0.8 prerelease.1 this is not needed)
  • Read the "How to use orkl?" entry
config.json
{
  "directory": <directory of the content - required>,
  "title": <site title (overrides title in dat.json>,
  "style": <style object, set automatically>,
  "nohttp": <if true, no content is rendered if accessed through http>
}

Development

Make a new site in Beaker then put the source code into it's directory. Run:

npm install
npm start

to start the bundler.

Thanks to choo, Jon Kyle (for Enoki and Dropout), Rasmus (for Inter UI) and the guys at Beaker.

orkl's People

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

cblgh caseyg rangermauve da2x carlthuringer blackluv marsalans et0and sufiyankhanz

orkl's Issues

UX Considerations

As promised, here are some small UX issues I've observed:

screen shot 2018-04-27 at 6 10 25 pm

Rather than having someone click through to the how-to guide, it would be more prudent to display it immediately on the homepage. This ensures it isn't missed, and it saves them a click.

screen shot 2018-04-27 at 6 13 06 pm

There are a few pieces here that need a second thought:

  1. There is no information hierarchy, except for very slight contrast on the input titles.

Suggestions:

A. Increase the font-size of the title input to indicate it's a title
B. Increase the contrast between the static text & input text
C. Create a visible container either via a border style or background style to better delineate what is and is not interactive.
D. It's a little confusing to have the TITLE separated from the TEXT by the DATE and a horizontal rule. That's because I haven't seen (and thus don't realize) you're simply copying the standard post template for the editor. It would be more intuitive to me - and this needs to be confirmed by more people - that the title and body should be next to each other.

  1. Your buttons would be easier to identify if they were more pronounced. You could do this by setting a higher contrast (or color) underline, a thicker underline, a border, a background-color or setting an uppercase text transform. Either way, they need to stand out more.

  2. "Visible" / "Not Visible" makes sense to me, but perhaps a more "accurate" term would be "Published" / "Draft" considering this is a webpage.

  3. Setting the visibility button next to the save button would establish a clearer hierarchy rather than having them separated.

  4. Speaking of the save button, you may want to consider placing it below your text input field. Since we naturally write from the top -> down, the individual would be looking for and in need of this button after concluding their writing. This also follows a consistent UX pattern for publishing tools.

  5. Generally - adding hover states to your buttons would be a small, helpful addition beyond the cursor:pointer.

screen shot 2018-04-27 at 6 25 06 pm

The customization screen also suffers from a lack of information hierarchy. Some suggestions:

  1. Create a color contrast between the names of the customization options (font size, font, background, color) and their variables.

  2. There is no save button for background or text color. I know it changes automatically when you hit enter or click out, but some people may be confused by this or need a prompt. This may sound pedantic but the research points to the majority of the population having very limited computer literacy.

I think this is looking good, and really doesn't need much more to make it great. It's clear that you half an appreciation for minimalist aesthetics, and I don't think you need to abandon those while incorporating some or all of the suggestions above.

Whole canvas as image drop target?

Hi, excited for the project, thank you.

I was working on my first posts, a photo blog from my recent trip, and as I was putting photos in I dropped one too far over to one side, I think, and the browser full-screened the file and unloaded the orkl site. When I went back, the work in progress was gone!

Several ideas here.

  • Make the <body> tag the receiver for image drops
  • At intervals, save a WIP to local storage in case of accidental navigation or browser close.
  • Or have an option for auto-saving... not sure how that works out with DAT and app performance though.

I haven't had time to dive into the code myself but I'll probably fiddle around with making some of these changes myself soon, if feedback here doesn't guide me in an alternate direction.

entries order not sorted

orkl/src/orkl.js

Line 85 in 7b3f225

state.orkl.content.sort((a, b) => {

Once I have more than 10 entries, the entries order starts misbehaving. I don't know anything about javascript, but I modified the sort function to be a little bit more explicit, and it works fine again. So I guess there's a bug there?

      state.orkl.content.sort((a, b) => {

        if (b.date == a.date) {
      
          if (b.ctime - a.ctime) {
            return 1
          } else{
            return -1
          }     
          } else {
            if (b.date > a.date) {
              return 1
            } else {
              return -1
            }
        }
      })

Changing visibility unsaved bug

When changing the visibility of an entry and there's unsaved content it disappears, because choo rerenders.

The solution may be to use nanocomponents for input fields and set their value on keydown

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.