GithubHelp home page GithubHelp logo

welpo / tabi Goto Github PK

View Code? Open in Web Editor NEW
81.0 81.0 27.0 23.47 MB

A modern Zola theme with search, multilingual support, optional JavaScript, a perfect Lighthouse score, and a focus on accessibility.

Home Page: https://welpo.github.io/tabi/

License: MIT License

SCSS 9.46% JavaScript 69.44% HTML 16.39% XSLT 1.04% CSS 1.29% Shell 2.38%
accessible blog-theme catppuccin dark-theme elastic elasticlunr giscus hyvor-talk isso-comments local-search multilanguage-support no-javascript offline-search static-site tabi utterances zola zola-theme

tabi's Introduction

tabi's People

Contributors

almost-senseless-coder avatar andwati avatar arichtman avatar be-next avatar dalker avatar donovanglover avatar jieiku avatar joberthrogers18 avatar mehr32 avatar myrdincx avatar nyadiia avatar sandman avatar seadve avatar serginogal avatar smtbook avatar stevenroose avatar theawiteb avatar welpo avatar xvello avatar zzmzaw 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 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 avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

gatunet arindas cmbadjusting smtbook vincent-forks stevenroose xvello donovanglover seadve nyadiia almost-senseless-coder academician zzmzaw joberthrogers18 zahidkizmaz mrljdx arichtman pzy-io mihirk284 ziyouwa bhaskarndas theawiteb mehr32 be-next jijobose myrdincx dalker

tabi's Issues

Option to use Turbo to avoid page refreshes

Feature Request

Summary

Turbo is a JavaScript library that turns static websites into interactive SPA-like ones.

Motivation

The website will be perceived to load faster for users since a page refresh isn't necessary.

Detailed Description

Additional Context

The Turbo website uses Turbo.

Live reload with Content Security Policy

Bug Report

Environment

Zola version: 0.17.2
tabi commit: c79407e

Expected Behavior

Live reload should work

Current Behavior

Live reload doesn't work due to the Content Security Policy

How to Fix

I fixed this by adding connect-src 'self' ws:; to header.html. AFAIR, there should be a variable to determine if zola is running in serve mode.

Stabilize Layout on Navigation. (content layout shift?)

For most of the page its probably ok to have some content layout shift, but for the navigation menu at the top it is kinda jarring.

I included a video that hopefully shows what I mean:

tabi-bounce

You should be able to navigate between pages without that flicker, these types of problems can be tough to nail down sometimes, it often comes down to a tradeoff between render blocking resources and page load speed.

I have not tried to find the exact cause, I was just checking out your theme after seeing the pull request for the themes gallery.

Other than the flickering menu I think this theme is VERY CLEAN, and looks great!

Removing multi-language support and customising themes

First of all, thank you for this very nice and clean theme πŸ‘

I am trying to customise the theme in two ways:

  1. Removing the multi-language support: I did this by simply removing all the Markdown files with the ca and es extensions. This does not work and I get the below error:
~/website$ zola serve
Building site...
Checking all internal links with anchors.
> Successfully checked 1 internal link(s) with anchors.
-> Creating 10 pages (0 orphan) and 6 sections
Error: Failed to serve the site
Error: Failed to render section '/home/sandip/website/content/_index.es.md'
Error: Reason: Failed to render 'index.html' (error happened in 'base.html').
Error: Reason: Function call 'trans' failed
Error: Reason: Failed to retrieve term translation
Error: Reason: Translation key 'about' for language 'es' is missing

2 . Create new templates: I want to create a new template based on section.html which does not include the list of posts. I did that by modifying section.html as follows:

{% extends "base.html" %}

{% block main_content %}

<main>
    {% if section.extra.section_path -%}
    {% set extra_section = get_section(path=section.extra.section_path) %}
    {% endif -%}

    {%- if section.extra.header %}
    {{ macros_page_desc::page_desc(desc=section.extra.header, page=section) }}
    {% endif -%}

    <!-- <div class="list">
        <div>
            {{ macros_page_header::page_header(title=section.title) }}
        </div>

        {%- if paginator %}
        {%- set pages = paginator.pages -%}
        {% else %}
        {%- set pages = extra_section.pages -%}
        {% endif -%}

        {% set max = section.extra.max_posts | default(value=999999) %}
        {{ macros_list_posts::list_posts(posts=pages, max=max) }}
    </div> -->
</main>

<!-- {% if paginator %}
{{ macros_paginate::paginate() }}
{% endif %} -->

{% endblock main_content %}

Is this the best way to achieve what I want?

More generally, I would like to know how to go about customising tabi. I'm quite new to Rust and SSGs but looking to get my hands dirty. Thanks πŸ™

Multiple instances of multilingual shortcode not working correctly

Bug Report

Environment

Zola version: 0.17.2
tabi commit: 761a18d

Expected Behavior

When multiple instances of the multilingual_quote shortcode are used on a page, each instance should function independently. That is, clicking on the "Show original quote/Show translation" link in each quote should only toggle the display of that specific quote.

Current Behavior

When more than one instance of the multilingual_quote shortcode is present on a page, clicking the "Show original quote/Show translation" link on any quote only toggles the display of the first quote on the page, regardless of which quote's link was clicked.

Step to reproduce

  1. Add two instances of the multilingual_quote shortcode to the page, like so:
{{ multilingual_quote(original="Original 1.", translated="Translated 1.", author="Author 1") }}
{{ multilingual_quote(original="Original 2.", translated="Translated 2.", author="Author 2") }}

  1. View the page in a web browser.

  2. Click the "Show original quote" link under the second quote.

  3. Observe that the first quote toggles between the translated and original versions, but the second quote does not change.

Option to customize home image alt

Feature Request

Summary

For SEO/accessibility purposes, being able to change the alt for #banner-home-img would be useful.

Motivation

Users can use all kinds of images on the homepage, which would benefit from different alts.

Detailed Description

  • header.alt similar to header.img

Additional Context

tabi/templates/partials/home_banner.html

Line 19 in f1d92a7

<img alt="the owner" id="banner-home-img" src="{{ image_path }}" />

Quickstart steps not working (Incompatible units: 'vmin' and 'px')

I followed the steps from the README:

git clone https://github.com/welpo/tabi.git
cd tabi
zola serve

and got the following output / error message:

$> zola serve
Building site...
Checking all internal links with anchors.
> Successfully checked 0 internal link(s) with anchors.
-> Creating 30 pages (0 orphan) and 11 sections
Error: Failed to serve the site
Error: Internal Error: Incompatible units: 'vmin' and 'px'.

I'm currently on commit 58d0dd6 using zola version 0.16.1

FR: Table of Contents

I see some themes have table of contents with like anchors for all the headings that optionally can be added in front of either a blog post of any page. I'd be very interested in having this πŸ™

Add optional utterances/giscus comments (with dark mode)

https://utteranc.es/

https://giscus.app/

  • Optional, off by default, enabled on a per-post basis or globally
  • Must have dark and light modes without loading the widget twice

Some discussions related to the dark/dynamic theme:

utterance/utterances#549

utterance/utterances#427

As per the discussions and this PR kimyouknow/kimyouknow.github.io#12, it looks like we need to send a message to the utterances iframe, like this:

const setThemeUtterance = (iframe: HTMLIFrameElement) => {
  const msg = {
    type: 'set-theme',
    theme: utteranceTheme,
  }
  iframe.contentWindow?.postMessage(msg, 'https://utteranc.es')
}

This logic should be added to the theme-switcher file.

It's possible this causes a flash of the light theme widget (the default). The problem is the widget needs to be loaded before the message is sent.

Maybe an option is to hide the widget entirely until the theme is set?

Also, add an option to have the comments load only after a click on a "Load comments" button.

Thanks again for this great theme. code blocks are a little awkard on desktop.

You have innovated a lot of good things with this theme, very good attention to detail. Many were used in abridge or inspiration for a similar feature.

One thing I noticed while browsing the demo site is the code blocks don't have a very good way to scroll horizontally, maybe not an issue on mobile since you can use your finger to pan the frame, but its awkward on desktop.

In abridge I have a horizontal scroll bar for code blocks, but I am also considering implementing a button to expand the view to fullscreen, I found one such example here : https://dev.to/prorishi/your-static-site-to-a-pwa-24dl (notice the button in the top right corner of code blocks)

I am thinking of implementing something similar, especially if I can accomplish it without js.

Also somebody recently suggested styling the scrollbars in chrome, with a property I had not even heard of (mostly because I use Firefox) here was the issue: Jieiku/abridge#136 (implementing the feature was not too difficult)

Add support for page-specific styles

Feature Request

Summary

Page slugs as classes in the HTML would let users use per-page CSS.

Alternatively, this stackoverflow answer seems like a more modern solution that's easier to implement.

Motivation

AFAIR, used by WordPress themes and similar tools to let users style specific pages.

Detailed Description

Include an additional class that lets users style pages based on the slug. Example:

  • /blog/ -> page-blog
  • /blog/a-specific-post/ -> page-blog-a-specific-post

Alternatively, add an HTML data-* attribute with the URL and query it with CSS.

Additional Context

I'd personally use this to make an about page look more like an about page and less like a blog post.

  • Should there be another template that's better suited for pages where the date isn't relevant?
  • Should removing the .meta from a page be an option?

The other use case I can see is telling which link is active in the navigation, although this may be possible to implement in nav.html directly.

Dark theme flashes on page load/reload

If I manually select the dark theme, I notice that sometimes on page reopen or reload the page flashes - it shows the dark theme for a brief moment and then switches back to black
Is there a way to avoid it?

add shortcode for dual-theme images

This will allow the users to provide two sources for the images: one for light theme, one for dark theme.

The idea is to generate html content like:

<picture>
  <source srcset="image-light.png" media="(prefers-color-scheme: light)" />
  <source srcset="image-dark.png" media="(prefers-color-scheme: dark)" />
  <img src="image-light.png" />
</picture>

Proposed shortcode implementation in MD files:

{{ darklight_image(light_src="/light.png", dark_src="/dark.png", alt="Alt text") }}

Certain macros should be partials

A handful of macros are only called from one page and should be partial templates (e.g. like footer.html).

Macros that could be refactored:

  • set_title
  • add_comments
  • create_history_url
  • maybe cards
  • content
  • page_desc

set proper title tags

Right now, the title ~/tabi works in the main page, but not in other pages.

Proposed title tag: config.title + – + current page's title

Can't have no favicon

Similar to #122. It seems that when no favicon or favicon_emoji is specified, the tabi favicon is used. It should be possible to not have a favicon, right?

Option to have page title before site title in `<title>`

Feature Request

Summary

Having the page title before the site title is useful when the site title is long and prevents users from seeing the page title in tabs.

Motivation

An option lets users with short titles keep their site title as the most important factor.

Detailed Description

Should be easy to adjust set_title.html and swap prefix/suffix based on a config value.

Would it be hard to support adding a single additional custom CSS/SASS file?

It seems that it might happen that a user wants to fiddle a little bit with the CSS manually. Is it possible to have like a sass/extra.scss or something that gets loaded if it exists (or a field name custom_css="extra.scss" or something.

I'm kinda wanting the text width to be a tiny bit wider, but it seems like there's no way to slightly tweak/override CSS properties.

EDIT:
It seems like using blocks in the template pages is a common way to do that

Low contrast on backticked words inside links when hovered

Bug Report

First of all, thanks for the theme! It works really well

Environment

Zola version: 0.17.2
tabi commit: 4952ce8

Expected Behavior

Good contrast on backticked words inside links when hovered

Current Behavior

Low contrast on backticked words inside links when hovered

image

image

Step to reproduce

  1. Create a link with backticked word inside. For example:
[some `backticked word`](https://www.google.com/)
  1. Hover the created link
  2. Observe the low contrast on the backticked word

theme switcher on demo, takes 2 click initially.

My system / browser preference is dark.

If I clear my browser cache or open a private browsing session, then visit: https://welpo.github.io/tabi/

The page initially loads with the dark theme.

I then click the theme switcher... nothing happens.

I click the theme switcher again... this time it changes.

Every click thereafter changes as expected.

This was in firefox.

I then set my browser preference to light mode, and opened the site in a fresh private browser.

Under this mode the theme switcher works correctly.

So seems the theme switcher only requires the extra click for people that have a browser or OS with dark mode preference.

Simple way to change main text color

Feature Request

Would be nice if there was a simple way to change the current turquoise text color for light and dark mode into something else, like orange though the config file.

Thanks.

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.