blag | static site generator -- it uses Markdown | Static Site Generator library

Google cannot index translated content unless you use separate URLs for each language. Google says:

If you prefer to dynamically change content or reroute the user based on language settings, be aware that Google might not find and crawl all your variations. This is because the Googlebot crawler usually originates from the USA. In addition, the crawler sends HTTP requests without setting Accept-Language in the request header.

In my experience, Googlebot won't find multiple languages served from the same URL. You need to create multiple URLs for pages. See How should I structure my URLs for both SEO and localization?

When using a single page application framework like Vue, that usually means:

• Using history.pushState() to change the URL when loading new content (or changing the language)
• Using links in your pages to tell search engines about other pages. For users you can intercept these clicks and change the content and URL with your JavaScript framework.
• Configuring your web server to serve your single page app for every valid URL and making sure your app loads the correct content based on the initial URL.
• Implementing server side rendering (also called pre-rendering) to make your site more accessible to bots. Googlebot is the only search engine bot advanced enough to execute the JS. Even for Googlebot, indexing will be worse and slower if you require Googlebot to render it rather than doing so server side.
• Avoiding changing the content you want indexed in search engines based on user interaction. Even when Googlebot executes JavaScript it doesn't simulate user behavior such as clicking or scrolling.

Good for you for trying to code a project like this from scratch! That's how I learn best too.

You're getting scrollbars because you're setting the height of the div in your #fbPost instead of letting it be determined by the content, and then you also set overflow: auto, which tells the browser to show a scrollbar if the content of a container overflows the container, and to hide the scrollbar if it doesn't. You can read more about that here

Also, as a best practice, an id is meant to be unique. So there should only be one thing in your html with id="fbPost", you shouldn't put that on each of your sections. It's better to use classes like your ourCard class to style multiple elements.

In terms of how to make the content two columns, you can just use the column-count css property.

I also recommend looking into and learning CSS Grid for layouts instead of using floats;

Here's a very basic JSFiddle showing what I'm talking about: https://jsfiddle.net/karlynelson/vd7zq8h4/29/

You can use media queries to make it go down to one column of text at a certain point, or use fancy css grid min-max and auto-fill to do it automatically.

I suspect you're not trying to merge on actual dates but a month so you're using a formatted value most likely. So set your dates to the beginning of the month or convert them to YYMM to merge.

The problem is because you're trying to write to that spawned window's document. Try without opened.document.write and it will work. It's a security measure. Imagine a situation when you can open a banking page (for someone else) just like that and mess with its content by overriding content on the fly.

I assume that you do not want or do not know how to create sophisticated web app that can handle URLs and dynamically map (route) them to existing assets or generate content dynamically. What you can do is prepare another document, eg. chat.html and pass id to it via query, eg:

https://inter.blag/chat.html?chatID=2sd39

And then play with window.location in JS code embedded in chat.html to read ID.

I am not sure what exactly are you trying to achieve and I also doubt if window.open is the best way to redirect users to other pages.