Giter Site home page Giter Site logo

twister-html's Introduction

twister-html

HTML interface for twister (see git repo here). It is a FOSS which is being under heavy construction.

To use it, clone this repo under ~/.twister/html like this:

git clone https://github.com/miguelfreitas/twister-html.git ~/.twister/html

If you're on Mac OS X — clone to ${HOME}/Library/Application\ Support/Twister/html instead of ~/.twister/html

Be on the bleeding edge

All nightly improvements and following fixes of these improvements are tested in blaster branch. To be sure you are at the forefront, in stage of lack of testing and consensus:

git pull && git checkout blaster

If you want to switch back to stable branch:

git checkout master

Follow @letstwist in twister to be aware of recent changes. In case of getting of twister-html related buzz from it:

git pull

Contribute

Feel free to fork and send pull requests!

To make it easier for us to accept your patches, please follow the conventional GitHub workflow and keep in mind that your pull requests should have blaster branch as both the origin and target.

  1. After forking, clone your repo:

     rm -rf ~/.twister/html  # in case you already have it cloned from not your repo
     git clone [email protected]:YOURNICKNAME/twister-html.git ~/.twister/html
     cd ~/.twister/html
    
  2. Switch to 'blaster' branch:

     git checkout blaster
    
  3. CREATE A NEW BRANCH, specific to the fix you're implementing:

     git checkout -b my-awesome-fix
    
  4. Make your changes.

  5. Commit and push:

     git commit -m "fix of #12345: bad foobarizer" && git push
    
  6. Now open a pull request from branch 'YOURNICKNAME:my-awesome-fix' to 'miguelfreitas:blaster' on GitHub.

  7. Once the request is accepted, switch back to 'blaster' and track changes in upstream repo:

     git remote add upstream https://github.com/miguelfreitas/twister-html.git  # this is one-off setup
     git fetch upstream && git checkout blaster
     git merge upstream/blaster  # you should get a fast-forward message here
     git push
    

Translations

If you want to add your own translation, edit interface_localization.js like this:

  1. Fork the repo and create a new branch from 'blaster' one:

     git clone [email protected]:YOURNICKNAME/twister-html.git ~/.twister/html
     cd ~/.twister/html && git checkout blaster
     git checkout -b Klingon-translation
    
  2. Add your language to the list of available choices. You should use your ISO code here, it should match what the browser reports. The Klingon ISO is 'tlh', so:

     var knownLanguages = ['en', 'nl', 'it', 'fr', ... , 'ru', 'tlh'];
    

For multi-region languages, if you want to catch them all, use only the first half (e.g. to match it and it-ch, specify 'it').

  1. Add a new wordset block after existing ones:

     if (preferredLanguage === 'tlh') {
         polyglot.locale('tlh');
         wordset = {
             'Insults': 'mu\'qaD',
             ...
         }
     }
    
  2. Stage all changes in file interface_localization.js:

     git add interface_localization.js
    
  3. Commit & push:

     git commit -m 'Klingon translation'
     git push origin Klingon-translation
    
  4. Then open the pull request from branch 'YOURNICKNAME:Klingon-translation' to 'miguelfreitas:blaster' on GitHub.

For any help ping @tasty in twister.

twister-html's People

Contributors

alhimik45 avatar amarprabhu avatar architecti avatar basst85 avatar benhc123 avatar blocktester avatar bluebat avatar ddorian1 avatar digital-dreamer avatar dionyziz avatar dryabov avatar earthengine avatar einperegrin avatar erkan-yilmaz avatar erqan avatar gubatron avatar ishift avatar juanda097 avatar kissge avatar miguelfreitas avatar milouse avatar misjoinder avatar nergal avatar rbertoche avatar toyg avatar tschaul avatar xfq avatar yawara avatar yfdyh000 avatar yourtion avatar

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  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  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

twister-html's Issues

Change comments to English

A lot of source code comments are in Portuguese, which makes it harder for international contributors to make changes. Let's translate these to English and make it a policy for developer resources to be in English from now on.

Create local settings page

These would include:

  • Default flag for following new users: public / private (#36)
  • Flag to allow posts linefeeds (#81)
  • Flag to hide posts starting with @ to another user (#5)
  • Flag to hide retransmissions (#48)

New posts is both on postboard and modal

Even if the new post is not from the particular user that is in the profile modal.
twister_new_post_in_modal

The issue was first mentioned in #35, but should probably have its own issue for tracking.

The screen shot above is from Firefox 26 on Ubuntu 13.10, but has also been observed on a recent Chrome on the same platform.

Add user profile's background image

However I thought of not storing profile's background image into DHT network like we do with avatar since the image quality would be very crap if limited to 4 kbytes.

The easy part is just adding a field to the profile with an external image url.

The difficult part is turning the setup process into a good user experience. Asking the user for an image url? too hacky.

What about integrating with some image hosting provider? Ideas?

Implement following just for direct messages

Another flag may be added to the UI so that users may be followed just for direct messages purposes.

That is, it is simply a matter of ignoring public posts, which can be done entirely in UI's javascript.

implement keyboard shortcuts

Like on Twitter, implement keyboard shortcuts for easier page navigation:

J/K for up/down,
Enter to expand a message
L to collapse
R to reply
T to retransmit
. to refresh
N to draft a new message
F to favorite something (not yet in twister?)
G + X to move to a different page (GP = go profile, GH = go home, ..)

Not all posts appear on Postboard

I follow more than 50 users and it's clear that 95% of them never make it to my postboard, even when they have new posts. All posts are displayed correctly when I bring up the profile for each user, but don't appear in the Postboard.

I suspect it's the same issue in following.html: "Downloaded n/n posts" does not match what you see when you bring up the modal for the same user.

just "connection lost", nothing happening

The web interface pops up one alert telling me to log in. Then redirects me to a page that pops up and alert telling me I need the block chain. Then redirects me again.

On the network page, where I end up, I see "connection lost" highlighted.

There's no sign that anything at all is happening.

Display new messages indicator in DM threads list

Currently we have an indicator for the total number of DMs in top bar. This total, however, is not broken down on individual users shown in DM threads list.

This makes finding the actual new messages kind of difficult. Some indication must be provided and/or users should be sorted by the most recent first.

Cannot know who I already follow

When I see the profile of someone, there is a button "Follow" whether I already follow them or not. Annoying. My Twister client knows who I'm following, so the button should be dimmed ("Following").

Move some of the authentication logic to HTML client, allow node to be accessed publicly

It's currently hard to set up a twister node. I expect it to be hard to do for even power users for a while, and for regular users probably for ever.

It may make sense to allow multiple users per node. For example, I could set up a twister node on my server and allow it to listen publicly on, say, "twister.dionyziz.com".

Then anybody who wants to use my node can just go ahead and use it. Of course, I would be still doing the proof-of-work and peer-to-peer data distribution at the node level.

However, it may make sense to add some sort of authentication logic to the client. For example, we could use a password to login, which would be used locally (via JS) to decrypt (think PBKDF2 + AES) my private key, which could also be stored locally (HTML5 LocalStorage). Then the node could delegate to the JS interface to do the encryption part.

There are serious and probably hard to overcome security issues with such an idea. What is our threat model, and how much do we trust the node? If they can send arbitrary JS code down to the client, they can potentially do whatever they want. Also, this proposal centralizes parts of the network, and therefore loses some of its strengths. Under this criticism, it seems that these are insurmountable and it doesn't make sense to implement them.

However, I think it makes sense to discuss this for the sake of argument to improve usability and to spread the platform.

An alternative model would be to require users to trust their node, but still use a password for authentication per-user. Then the private keys could be stored on either the node or on the client. In this sense, this is similar to Twitter's client/server model but in a per-node basis. We still need passwords because multiple users can use the platform and we don't want one to login as the other, regardless of how much they trust the node.

What are your thoughts on this?

Thank you for your time.

Profile dialog for other users too big for low resolution screen

I have a netbook with a 1024x600 resolution screen. When clicking a name from the search field, the user's dialog comes up. This is too big for the screen, so the close button is places outside the top of the screen. It seems impossible to get out of the dialog. I found two ways of resolving it, though. While using i3, I can go into full screen in firefox, and then the close button becomes visible. This doesn't work in KDE, but there I can resize the firefox window to be higher than the screen. This isn't optmal usability, though...
dialog_too_high

Add separated page to see recent promoted messages

Adding a new page to allow the user to see all the recent promoted messages without looking through the logs would be nice (thanks @ stark for the idea).

  • It increases the visibility of promoted messages, so they will be more valuable.
  • It doesn't upset the users.
  • It is a very interesting thing to see - people are curious about what went into the blockchain, since this is the only broadcast mechanism we have.

This idea does not replace the single promoted message from the timeline though.

Typo: “Retransmited by”

The correct spelling is “Retransmitted by”.

diff --git a/following.html b/following.html
index fee5078..4428a1b 100644
--- a/following.html
+++ b/following.html
@@ -190,7 +190,7 @@
             <p class="post-text"></p>
             <div class="post-context" style="display: none;">
                 <i class="post-retransmited-icon"></i>
-                <span>Retransmited by
+                <span>Retransmitted by
                     <a class="post-retransmited-by open-profile-modal" href=""></a>
                 </span>
             </div>
diff --git a/home.html b/home.html
index 4b88a8c..96b3ce4 100644
--- a/home.html
+++ b/home.html
@@ -197,7 +197,7 @@
             <p class="post-text"></p>
             <div class="post-context" style="display: none;">
                 <i class="post-retransmited-icon"></i>
-                <span>Retransmited by
+                <span>Retransmitted by
                     <a class="post-retransmited-by open-profile-modal" href=""></a>
                 </span>
             </div>
diff --git a/tmobile.html b/tmobile.html
index fabff91..03bb029 100644
--- a/tmobile.html
+++ b/tmobile.html
@@ -713,7 +713,7 @@
             <p class="post-text no-ellipsis"></p>
             <div class="post-context" style="display: none;">
                 <i class="post-retransmited-icon"></i>
-                <span style="font-size:60%;">Retransmited by
+                <span style="font-size:60%;">Retransmitted by
                     <a class="post-retransmited-by open-profile-modal" href=""></a>
                 </span>
             </div>
@@ -732,7 +732,7 @@
             <p class="post-text no-ellipsis"></p>
             <div class="post-context" style="display: none;">
                 <i class="post-retransmited-icon"></i>
-                <span style="font-size:60%;">Retransmited by
+                <span style="font-size:60%;">Retransmitted by
                     <a class="post-retransmited-by open-profile-modal" href=""></a>
                 </span>
             </div>

I haven't corrected the spelling of CSS selectors (e.g., class="post-retransmited-icon").

Create full profile page

One of the major features for a microblogging platform is the vanity of its users. To encourage users to post more and improve their profile, we should allow other people to visit their profile on a completely separate, fully-fledged page. We currently just show a modal.

Misplaced modal header viewing followings.

On the modal for viewing a user's followings, the header should be pinned on top of the modal but instead it is inside the container; thus scrolling with the container.

image

image

Expected behavior:

The header should stick on top of the modal.

Mixed hashtag when viewing from post.

When you view the timeline of a hashtag, if you've clicked the hashtag from a post that contained more than one hashtag you will get results for all of the tags contained in the post.

image

You can see in this screenshot that while the selected tag is twist, messages containing only twister are also displayed as the post on which we clicked contained both of these hashtags,

Late posts are hard to spot

Sometimes a post arrives late (that is it gets downloaded after other posts that are chronologically newer than it). In that case it gets display in the right position further down the timeline. While that makes sense chronologically, it makes it hard to spot them. It would be nice to somehow either highlight new posts, or always append them at the top when they are first displayed.

[FEATURE REQUEST] Recursive expand / Expand all

First of all an example tree of reply posts

postA
+ postB
| + postC
|
+ postD
  + postE
    + postF

postB is in reply to postA. postC is in reply to postB. postD is also in reply to postA. And so on...

So currently when i expand postC i get postA and postB before it. The feature i'm proposing is that after clicking on "expand" there would be a new "expand all" button besides the "collapse" button. This button would move the focus of the expansion from postC to the root of the conversation postA to make all posts (A to F) visible.

Add "exit" or "terminate daemon" button

Calling "stop" will do the job. I'm just not sure where should we put this button.

Note: Android users may need this option badly because it is harder to stop it otherwise. We must implement that button in mobile version as well (but where? login page? network page?)

Version numbers

I understand we're in alpha stage but this is a great time to know if we're running the latest version of the core/HTML.

An "update available" mark somewhere would really help, maybe on the network page.

Searching users too slow

This is a problem with searching users using HTML interface, when one stops typing it might take a while until the results list is updated.

The problem is actually not the searching itself (which is local and fast) but rather the avatar/profile get from DHT. Because a lot of users have no profile, the UI must wait for several dhtgets to timeout.

Reducing dhtget's timeout would be just palliative. Perhaps a better solution would be aborting the previous requests, or at least keeping one socket connection to the daemon which could be used for non-blocking requests (ie. non dhtget).

Issues with public/private followings

First it appears that followings are public by default, they should rather be private by default and made public manually. This problem is compounded by the fact that in the followings panel the button to make a following private says "public" which is the current state rather than the action to take. This is very confusing, specially because right next to it is a button who's label describes the action (unfollow).

Can't connect to twister daemon

When i use nginx to proxy my twister-html and i add, http authertification twister-html can't connect to daemon.

My nginx conf :

upstream twister {
  server 127.0.0.1:28332;
}

server {
  listen 80;         # e.g., listen 192.168.1.1:80; In most cases *:80 is a good idea
  listen 443;
  server_name twister.caca.try;     # e.g., server_name source.example.com;
  server_tokens off;    

  index home.html;

  auth_basic          "Restricted"; # 't
  auth_basic_user_file  /httpaccess/path; #  

  access_log  /var/log/nginx/access.log.d/twister.log;
  error_log   /var/log/nginx/error.log.d/twister.log;

  # if a file, which is not found in the root folder is requested,
  # then the proxy pass the request to the upsteam (gitlab unicorn)
  location / {
    proxy_redirect     off;

    proxy_set_header   X-Forwarded-Proto $scheme;
    proxy_set_header   Host              $http_host;
    proxy_set_header   X-Real-IP         $remote_addr;

    proxy_pass http://twister;
  }
}

Allow custom base URL

Hi, i'm using mod_proxy to make twisterd's RPC interface and site available on port 80 and in '/twister/' on my webserver - which obviously breaks the RPC connection, as the interface POSTs to '/'.
Could you add a variable (maybe in a 'custom.js' that get's also loaded) where one could configure which URL to post to? Thanks!

Implement more mining statistics.

There should be a way to see more statistics about the mining operation. At the very least how many blocks were successfully mined and a history of the associated spam messages. Maybe also the rate at which one is generating spam (N spams/day).

Add favorite feature

It occurred to me that while the feature is planned (or at least mocked up) there was no ticket to go with it. So here we go, the favorite feature needs to be implemented. I suppose it should do that in a privacy respecting but non-ephemeral way.

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.