Giter Club home page Giter Club logo

blog-template's People

Contributors

btkostner avatar cassidyjames avatar danirabbit avatar dar5hak avatar davidmhewitt avatar matfantinel avatar michallepicki avatar sathsarabandaraj avatar vyshnav2255 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

Watchers

avatar avatar avatar avatar

Forkers

moshenskydv jasonnoffsinger alex-min vyshnav2255 anilgandla georgduees wamari eldhrimer cnhsn avojak isabella232 julietjoshua tolgaaaltas debashiscodes wenjialu atiusamy ryonakano

blog-template's Issues

Show latest post in Up Next

We currently show the next newest and next oldest post in Up Next. Something I was thinking about today was also showing the newest blog post on the blog, as it might be the most relevant to someone coming to an old blog link.

Of course we should make sure we don't repeat posts.

Footer leaves bottom of the page and floats when there's not enough content to push it down

Prerequisites

  • [ x ] I have searched open and closed issues for duplicates.

Describe the bug

When the height of the page is less than the viewport's, the footer floats some pixels above the bottom, due to not having enough content to push it down.

To Reproduce

Steps to reproduce the behavior:

  1. Go to any page with few content, not enough to fill the visible browser's space. The easiest way is to go to a 404 error page, like this one: https://blog.elementary.io/404
  2. Look at the footer.

Expected behavior

The footer should stay fixed to the bottom of the <body>.

Screenshots or screen recordings

image

Platform Information

  • Browser: Chromium 84.0.4147.105

  • OS: Manjaro

  • [ x ] I'm using the latest version from git that I've manually compiled

  • [ x ] I'm using the latest released stable version

Additional context

I noticed that the <html> and <body> tags are not filling the height of the page, so I added this to my local copy of the theme:

html, body {
  height: 100%;
}

However, though this made the page fill the viewport, it didn't fix the issue of the floating footer. I tried other solutions like setting position: absolute; to the footer and position: relative; to the <body>, but to no avail.

These changes even triggered other weird bugs, like making the search bar icon float randomly and making the footer be stuck to a random part of the page with each reload. 🙃

Too many hard-coded parts

Prerequisites

  • [ x] I have searched open and closed issues for duplicates.

Describe the bug

The theme's files contain many hard-coded parts, like links and messages, making reference to elementary OS's blog, which makes difficult for other people to use it in their own blogs.

Expected behavior

The theme should make use of variables that can be configured via the _config.yml or the front matters, rather than editing the theme's files directly.

Describe the solution you'd like

I really like this theme and I'd be happy to contribute to it by submitting a PR replacing the hard-coded parts with variables, if you're okay with it.

Platform Information

  • [ x] I'm using the latest version from git that I've manually compiled
  • [x ] I'm using the latest released stable version

I'm using this theme on my self-hosted blog running on an Nginx + Ubuntu 20.04 server.

[bug/feature-request] Unable to horizonally scroll `code block`

What Happened?

Can't scroll moderately long code block horizontally. It gets cropped.

image

Steps to Reproduce

  1. Write a moderately long code block
  2. Serve and open the page in mobile view

Expected Behavior

The code block is horizontally scrollable.

OS Version

Other Linux

Software Version

Compiled from git

Log Output

N/A

Hardware Info

N/A

Support embedded photos and video for Tweet "embeds"

Problem

We support text-based Twitter embeds by providing the text locally. But we don't support media like photos or video.

Proposal

We should support "embedding" photos and video locally, ideally by providing the images and video files to ensure content doesn't disappear and isn't hitting Twitter's servers on load.

“Subscribe” prompt with Patreon and GitHub Sponsors

Problem

With a static site, there's not a good way to pro-actively get people reading content. We publish on social media, but some folks might prefer a more newsletter-like format. However, we don't really want to collect folks' email addresses, and using something like Mailchimp would be expensive.

Proposal

We already regularly send blog posts to patrons and sponsors, so let's use that! This also becomes a natural "upsell" for folks to directly support us, without feeling invasive or like anything extra/new since it's promoting existing ways to support us.

Prior Art

We currently have linked icons at the bottom of each post to various ways to support us.

Lots of sites also have a "subscribe to our newsletter" form on blogs, or worse, pop-ups on their site. I don't want to to something exactly like that, but some sort of messaging around getting notified when we post by supporting us on Patreon or GitHub Sponsors could be more effective than just having links at the bottom of posts.

Use small card style for archive

Problem

It's kind of a pain to search back through the archive of posts because the cards are so big and it requires a lot of scrolling

Proposal

Change the archive page to use small cards

Prior Art

We recently switch the tags page to use small cards

Move external link handling from JS to build time

From https://github.com/elementary/blog/issues/48. Context:

@cassidyjames:

I don't think there's anything that can be done in Jekyll to enforce this for Markdown links (I'll double-check), but at the very least we can do that super light JS that adds target="_blank" to links that link offsite.

So with the Markdown parser you can do [Example](https://example.com){:target="_blank"}, but that's annoying to do for every link. Instead, I'm adding some lightweight JS that adds target="_blank" to any external links that don't already have a target attribute. This means if you want to override the behavior, you can just add [Example](https://example.com){:target="_self"}, but [Example](https://example.com) will automatically open in a new tab.

@btkostner:

Please don't use JavaScript for this. Try doing some build time plugin like https://keith-mifsud.me/projects/jekyll-target-blank

@cassidyjames:

@btkostner I tried exactly that first, and it didn't work. I believe due to the --safe environment used by GitHub Pages. But if you can get it working, be my guest. 😉

Gonna merge this for now since we have a lot of external links in blog posts. I would prefer doing it as build time as well, and will open a new issue to fix that.

I do agree we should move it to build-time ideally if we can get that working.

Use a wider aspect ratio for large cards on mobile

Problem

On mobile we have to do so much scrolling because of how tall all the cards are. I opened another issue about a tighter layout for small cards, but the large cards are still very tall

Proposal

Another small change we could make is using a 16:9 aspect ratio for the large card previews on mobile. This would also just be more like the desktop site where we use a wider card aspect ratio

Even smaller small cards for mobile

Problem

On mobile, the large and small cards are the same size, which is about almost the entire screen size per post depending on your phone. This means lots and lots of scrolling on mobile

Proposal

Small cards should use an even more compact layout on mobile to help with all that scrolling. Something like the layout from search where we have a small square card with the information to the right could work well

Featured tags on the homepage

Problem

There's a lot of good tagged content and we have some featured tags in the secondary nav, but I don't think that's really necessarily as engaging as it could be.

We also have kind of a weird thing were we go from the newest story in a big card to the next 3 newest in small cards and then back to older stories in 3 big cards

Proposal

  • Get rid of the "More Stories" section. We already show the 4 latest stories up top and then we can naturally put the "More stories" link after these 4.
  • Add a couple of carousels using 3 small cards with featured tags. Maybe "evergreen" and something else you can go down a rabbit hole on like "design"?

Prior Art

I think this is what we used to do on Medium?

Store URL is outdated

What Happened?

Originally reported by @MobileAZN in elementary Community Slack:

The store link at the bottom of the blog post is incorrect.
It points to: https://elementary.io/store/
It should point to: https://store.elementary.io/

I’m not sure if it’s a common footer you paste in, but it does need updating.

Steps to Reproduce

  1. Open some blog post, e.g. https://blog.elementary.io/lets-talk-os-8/
  2. Scroll down the page to the "Thank you" section
  3. Click the cart button
  4. It takes you to the 404 page

Expected Behavior

Clicking the cart button should take us to the new store page

OS Version

7.x (Horus)

Software Version

Latest release (I have run all updates)

Log Output

N/A

Hardware Info

Not relevant

Terminal-styled code blocks

Feature

For my own needs I'd like to be able to embed bash command / output snippets, and have them nicely styled. I think I'm going to work on this anyway, but I can submit a PR if you'd like this feature as well (and I'd love to get feedback from you, more aesthetically aware people). I imagine this is not a priority for you, as you'd prefer regular users to keep away from the terminal, but maybe you're planning on publishing some more technical blog posts directed at programmers or potential elementary contributors?

Describe the solution you'd like
For bigger snippets, I was thinking instead of the currently used codeblock style, we could show something that resembles a terminal. Biggest concerns are not showing line numbers, using a dark background and a maximum line length (text wrap). Maybe also some kind of title bar, that resembles a terminal window title bar. Easily embedding colored bash output would need a bit of research, but I think it's be doable. Ideally coloring could be automated, but manual tweaking to add colors would be good enough for me.

For embedding just commands, I would like a more minimal style with just dark background and a $ prompt. This would mostly serve as an easy way to copy commands.

Existing work
Example implementation for Rogue highlighting is described here

Additional context
This could be styled based on the Elementary terminal, obviously. I would skip the tab bar and most of title bar icons. The colors used by default could be exposed through simple css classes.

[bug] Code font isn't truly monospaced

What Happened?

Text formatted table is rendered badly.

image

Steps to Reproduce

  1. In markdown type (w/o the trailing \):
```sh
  ╭──────────────────────────────────────────────────────────────────────────────────────────╮
  │ 3 local devices                                                                          │
  ├────────────┬────────┬───────┬────────┬───────────────────────────────┬──────┬────────────┤
  │ MOUNTED ON │   SIZE │  USED │  AVAIL │              USE%             │ TYPE │ FILESYSTEM │
  ├────────────┼────────┼───────┼────────┼───────────────────────────────┼──────┼────────────┤
  │ /          │  97.9G │ 36.8G │  56.1G │ [#######.............]  37.6% │ ext4 │ /dev/sda2  │
  │ /boot/efi  │ 511.0M │ 38.0M │ 473.0M │ [#...................]   7.4% │ vfat │ /dev/sda1  │
  │ /home      │ 146.6G │ 78.5G │  60.6G │ [##########..........]  53.5% │ ext4 │ /dev/sda4  │
  ╰────────────┴────────┴───────┴────────┴───────────────────────────────┴──────┴────────────╯
\```
  1. Build & serve the pages: bundle exec jekyll serve
  2. The table is misaligned.

Expected Behavior

The table should've been rendered properly, like this:

╭──────────────────────────────────────────────────────────────────────────────────────────╮
│ 3 local devices                                                                          │
├────────────┬────────┬───────┬────────┬───────────────────────────────┬──────┬────────────┤
│ MOUNTED ON │   SIZE │  USED │  AVAIL │              USE%             │ TYPE │ FILESYSTEM │
├────────────┼────────┼───────┼────────┼───────────────────────────────┼──────┼────────────┤
│ /          │  97.9G │ 36.8G │  56.1G │ [#######.............]  37.6% │ ext4 │ /dev/sda2  │
│ /boot/efi  │ 511.0M │ 38.0M │ 473.0M │ [#...................]   7.4% │ vfat │ /dev/sda1  │
│ /home      │ 146.6G │ 78.5G │  60.6G │ [##########..........]  53.5% │ ext4 │ /dev/sda4  │
╰────────────┴────────┴───────┴────────┴───────────────────────────────┴──────┴────────────╯

If it's not rendered properly on GitHub on your system, please change your monospace font. Here's the original table:

image

OS Version

Other Linux

Software Version

Latest release (I have run all updates)

Log Output

N/A

Hardware Info

N/A

Publish as gem theme

Prerequisites

  • I have searched open and closed issues for duplicates.

Feature

Is your feature request related to a problem? Please describe.
The github.com/elementary/blog repository duplicates a lot of this work making it hard to sync changes.

Describe the solution you'd like
Publish the github.com/elementary/blog-template as an actual gem jekyll theme so we can just reference it in github.com/elementary/blog and use it like any other theme.

Sort "up next" by number of related tags

I think this would make the results a lot more relevant:

  • Grab all posts with one or more matching tags
  • Sort that list by the number of matching tags
  • Limit to 6

Show more from this tag at the bottom of each post

Problem

At the moment we're still getting a ton of clicks on that Medium link and I wonder if it's because of how prominently that looks like where you go to read more stories after the one or two suggested "Up Next" posts

Proposal

Show 3 (or maybe even 6) stories below "Up Next" (using the smaller card size from the homepage) from the same tags as the published story. So for example if you're reading a design post, we show more design posts you could read. This could be a good way to surface older posts and drive engagement towards similar content

Prior Art

On Medium, directly below the post they show "related reads", but from other publishers.

Consider not using guillemets for “Prev/Next” links

From https://github.com/elementary/blog/issues/61 by @fitojb

Guillemets are neither arrows nor directional symbols. They are quotation marks. They look particularly wrong when browsing the rest of the elementary website in Spanish, Catalan or French (these languages use guillemet quotation marks, making the overall site conflate two very different uses).¹

image

I recommend swapping these for “←” and “→” respectively², and maybe add them to the ::after pseudoelement so they aren’t underlined on hover and selectable. Other solution might be a specialized SVG image of a chevron, which is acceptable even if it slightly resembles these punctuation marks, since it won’t be confused.

¹ I might write a blog post one day delving deeper into this pervasive but wrong practice in web design.
² If you ever add “First” and “Last” to the pagination, “⇤”/“⇥” can be used as well.

Use "small" for "up next" posts

Problem

There's a lot of great content now in the "related" posts, but it can be kind of a big scroll distance to go from "Up Next" to "Related" since it can have 3 huge previews there now

Proposal

Maybe it would be better to use the "Small" size for "Up Next" posts so that you don't have to scroll so far past the bottom of a post to see more content

Images on blog.elementary.io should be web-optimized

What Happened

Not sure if this belongs here (did not find a dedicated blog repo) but I checked the elementary blog out and the post for the odin release was 43(!)Megabyte in size, and other post include several images with more than 1meg in size and this is really not so smart using all the visitors bandwith (some are on metered connections and have no unlimited data plans).

Google Speed Analyser also says to optimize images:

  1. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-released%2F
  2. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-beta-2%2F

Expected Behavior

blog.elementary.io should not use such big images

Steps to Reproduce

  1. Visit blog.elementary.io with opened network utility in dev-tools of browsers.
  2. Inspect download size of website

Logs

  1. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-released%2F
  2. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-beta-2%2F

Screenshot 2021-08-26 at 10 30 29

Platform Information

  1. None

Suggested solution

Solution would be to use compressed images where no absolute high quality media are neccessary and maybe some lazy loading here and there. You could also detect display sizes and use different images on desktop and mobile. Look into srcset https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset, this allows you to use high quality on larger screen sizes and another low quality on mobile for example.

I also think some automation could solve this.. not sure what jekyll-developers are using for this though.

Image zoom doesn't work on Firefox for macOS

Prerequisites

  • I have searched open and closed issues for duplicates.

Describe the bug

I am unable to zoom the image in the blog post - it's zoomimg out instantly
https://blog.elementary.io/introducing-elementary-os-5-1-hera/

Gif attached
elementary-gallery-bug

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://blog.elementary.io/introducing-elementary-os-5-1-hera/
  2. Click on an image thumbnail
  3. See error

Expected behavior

Image zoom works

Platform Information

OS: MacOs
Brower: Firefox Nightly 72.0a1

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.