Share what you are working on and using!

Development
34

Tag management can be tricky, especially when you are constantly adding new ones to the mix.

I created an app that writes to a post with the tags in your collection. It automatically updates as you add tags. No need to constantly go back and add tags to the post. Check out the code and learn how to deploy it here.

4 Likes
35

Is that demo supposed to load something, or no?

36

Nope! The app is purely for updating a post and redirecting the post’s url. But I should put some placeholder in the main route though. Thanks @bix!

37

I posted about this previously, but I put together some JavaScript to allow footnotes in write.as posts.

My current project is a script for QOwnNotes to allow posting directly from there to write.as.

1 Like
38

Thanks @ASilentDiplomat! As someone who loves to use marginal and footnotes, this adds some much needed flexibility to the Write.as experience.

And please let us know when you get that QOwnNotes script up and running.

39

To allow another way for people to engage with my writing, I have decided to make highlights and annotations native on my blog through Hypothesis! Check out an example of it in action here.

If you want to use it in your blog, all it requires are some lines of code to your Custom JavaScript (feel free to mess with the custom branding to fit your blog):

// src: https://hypothes.is/embed.js

window.hypothesisConfig = function () {
  return {
    "openSidebar": false, 
    "theme": "clean",
    branding: {
      appBackgroundColor: 'white',
      ctaBackgroundColor: 'rgba(3, 11, 16, 1)',
      ctaTextColor: '#eee',
      selectionFontFamily: 'helvetica, arial, sans serif'
    }
  };
};
5 Likes
40

I just read your post on this. I had never heard of Hypothesis, but this is awesome! Infinitely better than a confusing “like”. Thank you so much for sharing this!

41

I’ve noticed you did remove it again. Did you run into issues?

42

Hi @mikka, no issues so far - it should still be up. Did you run into issues seeing annotations or making them?

The way I have it on my blog is that it remains hidden until you highlight a part of the text - then it prompts you to annotate. There are also yellow highlighted parts of the text which are annotations. Clicking either brings up the Hypothesis sidebar to start writing or viewing annotations on that post. I wanted a clean look rather than a sidebar interfering with the reading experience.

Hope that clarifies things

43

You’re welcome @blake! Hope that it works well for your blog. Let me know if you run into any issues using it. Be sure to share your blog so we can start annotating!

44

I found the culprit, it’s my experimental browser under Dex on the S6 that breaks on some JavaScript. It’s fixed now, and I’ve joined the experiment.

1 Like
45

Ah excellent! I just added an annotation on the post.

46

Just want to continue on the embedding Hypothesis annotations on your Write.as blog project:

I was able to create a Glitch app that updates a post with new annotations every time one is made on my Write.as blog. The post is formatted like this. Feel free to remix the app here and ask questions if needed.

1 Like
47

While Remark.as isn’t ready yet and Submit.as is pricy, I’ve searched for a free (and anonymous) chatroom system that I could incorporate into my blog (in order to facilitate communication). I found Minnit, which seems to be quite simple to use. I gave it a shot and included a chat page in my blog to test it.

Let’s see what happens.

1 Like
48

Thanks for sharing @Cat! I would have never considered embedding a chatroom system. This just adds another layer of interesting possibilities. Could you share how you embedded it? I am assuming part of it is some code put into the Custom JavaScript?

49

Hi, @cjeller1592, I’m glad you’re interested! Here you are:

Code 
if (window.location.pathname.includes('/chat')) {
  const div = document.querySelector('.e-content');

  div.innerHTML = `<strong>AVISO:</strong> este é um chat incorporado que NÃO FAZ PARTE do Write.as. Ao continuar, seu IP poderá ser registrado por terceiros. Se privacidade é um problema para você, utilize uma VPN ou abstenha-se continuar. Você foi avisado.

    <a href="#" id="load-chat" style="display:block;width:100%; text-align:center">Carregar chat</a> 
  `;

  document.querySelector('#load-chat').onclick = () => {
    div.innerHTML = `<iframe src='https://minnit.chat/oidiotablog?embed&nickname=' style='border:none;width:90%;height:500px;' allowTransparency='true'></iframe><br>`;
  };
}

The important part is the onclick event, which replaces the post’s content (which is a div that contains the e-content class) with the iframe that contains the embedded chat. You could skip all the “click this link to load the chat” thing and just use the code inside the event, thus simplifying it:

Code 
if (window.location.pathname.includes('/chat')) {
  const div = document.querySelector('.e-content');
  div.innerHTML = `<iframe src='https://minnit.chat/oidiotablog?embed&nickname=' style='border:none;width:90%;height:500px;' allowTransparency='true'></iframe><br>`;
}

I then added a post with a chat slug, which is verified in the if (window.location.pathname.includes('/chat')). The included message with the link button is for people who are concerned about their IP addresses being tracked by third parties. Since Minnit registers the IP address of every user in the chat, the embedded chat isn’t loaded until the person clicks the link to load it.

Also, I didn’t put a lot of effort into searching for an embeddable chat system. The first one that I found was Minnit. I’m open to better suggestions, though.

2 Likes
50

This is great, thanks @Cat! I actually like the added detail of the “onclick” event. Having the ability to opt-in first rather than having it happen automatically is always a plus.

There are two other open source embeddable chat systems I have seen used on Write.as - First is Utterances, a commenting system based on Github issues. Anyone who makes a comment needs a Github account (which is a deal breaker for some). Then there is Commento which has a “name your own price” model.

Another alternative is allowing your posts to be annotated on with Hypothesis, a free web annotation platform. It works by allowing someone to highlight parts of your post and make annotations through them. You do need an account to do this but it is free and allows you to annotate the rest of the web. I have it implemented on my blog and another Write.as user, @mikka has it on his. See it in action on one of Mikka’s posts here.

Hope that helps!

1 Like
51

Interesting! I guess I’ll try embeddeding Commento into my blog posts as well and see what happens. Thanks for your suggestions!

52

No problem @Cat! I am glad to see your experimentation with Write.as, especially with all the channels of interaction on your blog. Do let us know how it goes!

1 Like
53

I don’t know if it fits in here, but Ive just implemented a maze game in my blog (out of pure boredom :joy:). I’ve also programmed some bots to solve the generated mazes, each one using a different algorithm. Everything in pure JS.

I’ve also noticed, while doing this, that there’s a limited amount of JavaScript we can add to our blogs (about 1300 lines of code – depends on how much code you put on a single line). Had to use a js minifier to reduce my code so it could be uploaded to my blog.

2 Likes