Remixed the write.as search app on Glitch and made this one. I have to say, the search functionality using the Write.as API works really well. It performed way better than I thought it would.
Glad you were able to get it working! I really like the changes you made to make the search page truly your own. And just out of curiosity, what surprised you in the performance for it to be better than you thought?
Also, if anyone is interested in how @dino got his Search page the way it is, he outlines the process in this post along with helpful resources for using Glitch:
3 Likes
My expectations for it were low due to an earlier experience with a hashtags search app that to me, didn’t seem to work right. So when I used the search app and saw that it found anything I wanted to search for, I was thrilled. Now I realize after playing around with Glitch, that it was not the API that was so slow, but that it depends on how an app makes use of the API.
Exactly! And I remember the hashtag search app you’re referring to! We’ll have to revisit that to make it more useful.
Also, if you have any questions about Python or Flask just let me know. That’s my primary language/framework for using Glitch & Write.as so I’d be glad to help with anything you run into. Otherwise you seem to have a handle for it because the search app works wonderfully!
2 Likes
We’ve created a simple app that takes a Medium article, converts it into Markdown, and then publishes it as a Write.as post! All you need to do is feed in the Medium link. Feel free to check it out here.
2 Likes
I found myself using the Write.as editor a lot as a scratchpad - drafting out emails, writing to-do’s, and sketching ideas. None of this went into a published post but it was annoying to have to open up yet another editor when I wanted to actually write something to post.
So we created a way to make the Write.as editor an auto-saving scratchpad! Notes are saved in local browser storage, so it saves the text in the editor wherever you left it off. Local browser storage also ensures whatever you write is private to you, even if someone else is using the app.
Check out the Glitch app here.
Also want to bump this topic so that others can share their projects too!
2 Likes
Created a Glitch app that can display the 5 most viewed posts from my site. For more info, read this.
3 Likes
Fantastic!
Added a full list of posts using Dino’s glitch app and revamped the searchbar following CJ’s instructions at the very bottom of my about page.
Thanks guys!
A question about DDG searching: I have made several tests and it doesn’t work very well, either nothing or a link to the blog and not the specific post. I mostly use DDG in general and the results are pretty good, and I tried on CJ’s website: the search bar gives links to specific posts and works pretty good.
Is it because you need multiple occurences of a word in a post for it to appear if you search for said word?
1 Like
Remixed @cjeller1592’s random post app and made my own for my own site. The only difference is I moved the setting of values into the env file. Thanks for creating the original app CJ.
For posts that follow a standardized url naming scheme (ex. music-log-001, music-log-002, music-log-003, etc…), I was able to create a script that can present a Previous post link at the bottom of a post. For all other posts, the script adds a link to get a random post from my site and a link to get back to the top of the page.
/* Post Footer Links Section */
var showPreviousLinks = true;
// Insert footer links on posts, but not on the homepage.
if (document.getElementById("post-body"))
{
var disableFooterLinks = /nofooterlinks/i.test(content);
if (disableFooterLinks) {
var newContent = content.replace(/nofooterlinks/gi, "");
document.getElementById("post-body").innerHTML = newContent;
}
else {
var randomLinkText = '<a class="previousLink" title="Get Random post from this site" href="https://random-journal-post.glitch.me/get">Random↬</a>';
var backToTopLinkText = '<a class="previousLink" title="Back to top" href="#top">Top↑</a>';
var previousLinkText = null;
if (showPreviousLinks) {
var content = document.getElementById("post-body").innerHTML;
var isJournalEntry = /JournalEntry/i.test(content);
var isGameLog = /GameLog/i.test(content);
var isMusicLog = /MusicLog/i.test(content);
var element = document.querySelector('meta[property="og:url"]');
var content = element && element.getAttribute("content");
// Get post slug
var postSlug = content.split('/').pop();
var postIndex = postSlug.split('-').pop();
if ((postIndex - 1) > 0 &&
(isJournalEntry || isGameLog || isMusicLog)) {
var pad = '000'
var previousPostIndex = (pad + (postIndex - 1)).slice(-pad.length);
var previousLinkUrl = "https://journal.dinobansigan.com/";
var postSlugSplit = postSlug.split('-');
var i;
for (i = 0; i < postSlugSplit.length; i++) {
if (i + 1 < postSlugSplit.length) {
previousLinkUrl = previousLinkUrl.concat(postSlugSplit[i] + "-");
} else {
previousLinkUrl = previousLinkUrl.concat(previousPostIndex);
}
}
previousLinkText = '<a class="previousLink" title="Get Previous entry in this series" href="';
previousLinkText = previousLinkText.concat(previousLinkUrl);
previousLinkText = previousLinkText.concat('">←Previous</a>');
}
}
var postLinksText = randomLinkText;
if (previousLinkText) {
postLinksText = previousLinkText.concat(' '+postLinksText);
}
postLinksText = postLinksText.concat(' '+backToTopLinkText);
var postLinksSection = '<br /><hr /><br /><br /><div style="text-align: center; font-style: normal;">'+postLinksText+'<br />';
document.getElementsByTagName("article")[0].insertAdjacentHTML('beforeend', postLinksSection);
}
}
else {
// Remove nofooterlinks text from homepage if displayed as part of post preview.
var bodyContent = document.getElementsByTagName("body")[0].innerHTML;
var newBodyContent = bodyContent.replace(/nofooterlinks/gi, "");
document.body.innerHTML = newBodyContent;
}
Here is the CSS for the footer links.
a.previousLink {
background-color: #045FB4;;
border-radius: 7px;
border-style: solid;
border-color: #045FB4;;
border-width: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
text-decoration: none;
line-height: 2em;
color: #fff;
}
a.previousLink:visited {
color: #fff;
}
2 Likes
That’s amazing @dino! I wonder if there’s a way to make a general Previous post link as well, going to the next or previous post within a blog. Might require a little more backend logic though.
Thanks! It is not perfect as I did find entries in my music log series where I didn’t follow the url naming scheme properly and so the link doesn’t work for those. That said, I only did this as a means to learn more Javascript. In that regard, it was a fun way to practice Javascript.
It would be cool if this feature came baked into a write.as blog.
As far as enabling a previous post link for all posts on a blog, I have an idea on how to do that using the Write.as api. I don’t know of any C# write.as client, but if there was one, I would think that it would be possible to write a C# application that can manually update a post and add in a link to the previous post from the same blog.
1 Like
I also want to highlight one way to do comments on Read Write.as – @dino is publishing anonymous posts on Read Write.as that serve as comments to other posts on the feed. This serves as a way to keep commenting easy & light without crowding up your blog. Here are two examples:
https://write.as/7lss3y8pfs190igf.md
https://write.as/bic4wnq038r4k1qs.md
I can see a little Glitch app popping up that allows you to cache and present these little anonymous post comments in the post itself or on a separate part of your blog.
1 Like
Hi!
I just want to share with a small hack I made to automatically post on medium my write.as posts.
-
Create a blog on tumblr. I created a simple one just for use with this integration: bacciotti.tumblr.com
-
Connect your write.as account to tumblr (using configuration page on write.as)
-
Create an account at zapier (www.zapier.com) and inside that create a new “zap”. In this integration you will have to enable access from zapier to both your write.as and tumblr accounts. (more details: https://zapier.com/apps/tumblr/integrations/medium)
-
Create a post on tumblr before finishing the zapper creation to test.
That´s it. I just created the zap and made 2 tests:
-
Creating the post straight in tumblr
-
Creating a new post on write.as
In both tests a new story was created accordingly on Medium.
Well, I am using a free account on zappier so I´ll let you know if it will keep working. This free account allows 1.000 runs on a month, more than enough to my needs (6-7 posts monthly).
I hope it can help others,
Tiago
1 Like
Thanks for this hack @bacciotti! Zapier is a great tool for connecting apps together. I’d be curious about what other use cases like this you could find. Maybe having a Write.as post publish directly to Facebook or Linkedin?
1 Like
Hi there, just updating: I made another “zap” using zapier and now it posts automatically also to Linkedin. Thank you.
1 Like
If anyone is interested in using more videos to their posts, @dino wrote an awesome post about how to embed responsive Youtube videos. Personally found it super helpful so I figured someone else would too!
3 Likes
Should be similar solution to embed PeerTube videos as well?