Thanks for sharing @3DC-SON! Try posting it again with the links — you should be able to post it now without being blocked. If you run into any more problems then feel free to contact @old-support for help.
Otherwise I think it should work for you, plus you can add this to a blog if you want to develop on these ideas further. It’s a lot to take in but it’s really interesting stuff there!
There’s a really cool web tool for sharing quotes called QuoteBacks that just got released. Below is an announcement post about it, but it’s a way to manage & share quotes from blogs and elsewhere in an easy, elegant manner. It’s currently just for Chrome but they’re going to push to get it on FireFox too:
I’ve used previous iterations of it on my own blog. Here’s an example:
https://blog.cjeller.site/contextual-quotes-with-annotation
Now the catch is that the most recent version doesn’t play too nicely with Write.as. I’ve tried adding the Custom JavaScript to it amongst other things and still run into trouble. Thankfully you can use the photo of the quote or grab the markdown to paste directly into the blog. Would still like to get the embed working though.
Maybe we can put our heads together to solve it? It’s a neat tool that has already proven useful to me and I’m sure it would for y’all too.
If you want to hitch a ride on the email subscription form and add a link to your RSS feed, you can do something like this.
/* Insert Link to RSS Feed */
// Insert footer links on posts, but not on the homepage.
if (document.getElementById("post-body")) {
var currentURL = window.location.href;
var isAboutPage = /about/i.test(currentURL);
var emailForm = document.getElementById("emailsub");
if (emailForm && !isAboutPage) {
var rssFeedText = '<div style="text-align: center; margin-bottom: 1em; font-style: italic;"><p>Follow this site via <a href="https://journal.dinobansigan.com/feed/" target="_blank">RSS Feed</a>, or via email using the form below.</p></div>';
document.getElementById("emailsub").insertAdjacentHTML('beforebegin', rssFeedText);
}
}
The script regarding the “about” page is an example of how to disable it on certain pages. In this case, I have the email subscription form showing up on my About page, but I didn’t want to have the extra text show up on top of it.
Basically, you write <!--emailsub--> in your post and in addition to the email subscribe form, you also get a link to the RSS feed above it. it will look like this:
Thanks for sharing that @dino! I love how it extends the normal <!--emailsub--> markup to whatever text you want to add.
The part that excited me was the scripting that disables your custom message on certain pages. That functionality could extend to a lot of interesting things on your blog. Especially since you do a lot of series @dino, maybe it could include different styling for certain blog posts whose url matches a certain pattern.
You are welcome @cjeller1592. It seems like I shared it just in time. You guys just unveiled a new feature for Post Signatures where this could be of use.
You know what, I didn’t even think of that. I was only thinking of just filtering on pinned pages. That’s actually a good idea 
Wanted to share a useful resource that @rgx shared in this topic. It’s a fun, interactive Markdown tutorial that will help get you up to speed pretty quickly on basic syntax: https://www.markdowntutorial.com/
I wish I had access to something like this when I started!
Ah, thank you for the mention. 
For me it was a God send – and at the right time too, as I was just starting to use the Write.Freely blog and html tags are so cumbersome in comparison to MarkDown.
The tutorial is Fantastic – I put in some hours, into it, and soon was creating my new pages completely in Markdown. It is interactive so you have to type in text, formatting to match a given example, and it won’t progress until you have got that correct.
Being in Education for many years, I think it’s the BEST example of technology applied to education that I have ever seen.
An additional resource worth mentioning, for reference – Ange, an admin at TeDomum.net, my blog’s host, wrote a Write.Freely Users Manual for their instance. Her original is in French, and located here.
I found it was an important reference – so I made an English translation, with a few additional edits and some new images.
I also made a Spanish translation ; el Guia de Usuários en Español para Write.Freely está ahí.
I have no fancy code to share yet, but the next item on my list to work on is to style my page according to how I want it in terms of link colors, fonts and page layout. I’m sure I’ll reach out to this wonderful community along the way. Looking forward to seeing helpful tips others have used.
Looking forward to seeing the final result @digorsink! If you haven’t seen it already, I’d recommend checking out the Write.as Themes blog. It showcases a host of themes from the Write.as community that you can use for inspiration.
Okay so this one isn’t really a JavaScript or CSS trick, but is more of using what’s available to solve a problem. I wanted to be able to write a post with spoilers, but somehow hide the spoiler, so it’s not plain for everyone to see. I wanted readers to intentionally do something to view the spoiler. I found that with write.as’ anonymous post feature, you can hide spoilers as anonymous post. You can then make them available via links in a post. So a reader can read the post, know that there is a spoiler, but not see the spoiler, unless they specifically click the link to the spoiler.
Sharing in case it might be helpful to someone new.
I saw that on the RWa feed and was meaning to post it here. Thanks for sharing this @dino! Do you have the code available publicly anywhere? I’d be curious to see it as someone who hasn’t used .NET but would be interested in learning more of it!
Are you talking about the code for the building the list for a static Archive page app? If so, I have it on my local box. I haven’t uploaded it to Github yet because right now, it’s just a mess. I was just trying to get it to work and didn’t really think about making it useful for somebody else. I’ll try to clean up the code soon and put it up on Github.
I actually plan to write a very barebones .NET Write.as API wrapper library, similar to what you did using Python. But my goal is to expose just the “get” methods for a public blog. Those get methods are all I really need to redo the Glitch apps into Blazor WebAssembly apps.
Now that sounds great! I am really looking forward to seeing even aa barebones version of the library. Let us know if you need any help with working with the Write.as API along the way! I’d be glad to help.
Yeah I’ll definitely reach out if I need some help and guidance with it.
@cjeller1592 do you guys have a test blog that I can point to for testing? Something meant specifically for testing that has a few posts on it. I didn’t want to spam your web service with calls to get all posts from my blog every time I test something.
I wanted to share something @blake implemented on his blog that excited me the moment I saw it…
He adds Custom JavaScript that looks for (sub)headers that creates a table of contents. It’s a sticky toc that follows the reader wherever they go and allows them to go to each section by clicking on the link in the toc.
Really great stuff and would love to show the JavaScript if that’s okay @blake!
That is pretty cool!
Ahh! SO cool that you saw that and thought to share it here! Thanks so much @cjeller1592!
My code’s a little bit spaghetti-ish and might be a little buggy! I’m 100% sure someone here could find a much cleaner solution! I wrote it so people using my tutorials/class could jump to the parts they need or go back to where they left off.
One more heads up before I put the code and explain it: you need to add <div id="toc"></div> to posts where you want the table of contents to appear. I also recommend putting this element after the fold so that the script doesn’t generate a TOC for your home page. Again, I’m sure there’s a cleaner solution!
The code is:
CSS
#post-body {
max-width: 40rem;
}
body#post article ul, body#post article ul ul, body#post article li {
margin: 0;
}
#post nav a:not(.home), header nav a {
margin: 0;
}
#post nav a:not(.home):not(.sub-nav), header nav a {
margin: 0 0 0 1em;
}
@media only screen and (min-width: 60rem) {
#post .tutorial {
max-width: 60rem;
}
#article-container {
display: flex;
justify-content: space-between;
}
#table-of-contents, #spacer {
min-width: 18rem;
max-width: 18rem;
}
.sticky {
position: fixed;
top: 10px;
width: 100%;
}
}
JavaScript
var toc = document.createElement("nav");
if (document.getElementById("toc")) {
window.onscroll = function() {onScroll()};
document.getElementsByTagName("article")[0].classList.add("tutorial");
var body = document.getElementsByClassName("e-content")[0];
body.id = "article-container";
var article = document.createElement("div");
article.innerHTML = body.innerHTML;
document.getElementById("post-body").id = "";
article.id = "post-body";
article.classList = body.classList;
var contents = document.getElementById("toc");
toc.id = "table-of-contents";
toc.innerHTML = "<h3>Contents</h3>";
body.innerHTML = "";
body.appendChild(toc);
body.appendChild(article);
document.getElementById("toc").remove();
makeTableOfContents();
}
function makeTableOfContents() {
var headers = Array.from(document.querySelectorAll("h1,h2,h3,h4,h5,h6"));
var currentLevel = 3;
var lists = [];
var rootList = document.createElement("ul");
lists.push(rootList);
var currentList = 0;
toc.appendChild(rootList);
for (var i = 3; i < headers.length; i++) {
var level = headers[i].tagName.charAt(1);
if (level > currentLevel) {
var list = document.createElement("ul");
lists.push(list);
lists[currentList].appendChild(list);
currentList = lists.length - 1;
currentLevel = level;
}
else if (level < currentLevel) {
currentList -= 1;
currentLevel = level;
}
var listItem = document.createElement("li");
listItem.innerHTML = "<a class=\"sub-nav\" href=\"#" + headers[i].id + "\">" + headers[i].innerHTML + "</a>";
lists[currentList].appendChild(listItem);
}
}
var sticky = 150;
function onScroll() {
if (document.documentElement.scrollTop >= sticky) {
if (document.getElementById("spacer") === null) {
toc.classList.add("sticky");
var body = document.getElementsByClassName("e-content")[0];
var spacer = document.createElement("div");
spacer.id = "spacer";
body.insertBefore(spacer, document.getElementById("post-body"));
}
} else if (document.getElementById("spacer") !== null) {
toc.classList.remove("sticky");
document.getElementById("spacer").remove();
}
}
The general approach is:
Making the table of contents
article element essentially a container for both the table of contents and a new div, which I fill with the article element’s contents (the post itself). I then empty the original article element and fill it with both the table of contents element and the new div.ul element and add it to the list of ul elements. Then, iterate through every header element. (I think there could be a recursive solution here instead?) (I start at h3 elements and only care about the headers starting at the third one to avoid getting the blog name, the post title, and the “Contents” header.) For each header, if the header level (like h3, h4, etc.) is greater than the current level, so if this is a subheader of the previous header, create a new ul and add it to the list. Then add the new header link li that links to the associated header id (only possible because Write.as headers come with their own ids! Perfect!) to the current ul. If the new header level is less, so this is a larger header than the last, just go to the previous ul in the list and add this new header link to that one. If it’s the same, just add it to the current ul.Making the table of contents sticky
edit: whoops, I didn’t know about this – https://davidwalsh.name/detect-sticky
onScroll, so the onScroll method will be called whenever the user scrolls.onScroll function, if the current scroll position is lower on the page than your table of contents, add the sticky CSS class to anchor it to the top of the page. But because the sticky class anchors the TOC to the top of the page, you need a spacer element to fill its position in the article; otherwise the post contents would shift to center in the whole 60rem (when it’s supposed to stay shifted to the right). So create a new spacer element with the CSS id spacer (associated with a width of 18rem, allowing up to 2rem of space between.) and put it before the new post div. If the user scrolls back up, just undo that.Design
sticky element keeps the same width as the TOC so that the transition to the TOC being positioned fixed is relatively seamless. On mobile, keep the TOC in place for now. Style the lists and list elements to look more natural as a table of contents (remove/adjust margins).Really hope this is helpful for someone! Please let me know if you have a nicer solution! I’m happy to answer any questions y’all might have about the code.
Thanks again @cjeller1592! Was really cool to see that you liked it