aaranxu / adidoks Goto Github PK

What is the correct way of displaying images in a post?

1 copy _custom.css to /sass
2 set compile_sass = true in config.toml
but these changes did not take effect.

When you visit the the anchor of a heading, the heading will be under the header and you will almost not see it.

Example from here:

Vendored "Jost" font uses latin-only variant, but there is a broader.
For example "Zażółć gęślą jaźń" is rendered using fallback fonts.

As a workaround I've changed @import in main.scss to

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

In {blog,docs}/{section,page}.html templates docs and blog values are hardcoded.
It makes reusing these templates in other sections problematic.

It's possible to change

{% set current_section = "docs" %}

to

{% set current_section = current_path | split(pat="/") | nth(n=1) -%}

But I'm not sure if it's going to play well with base urls with extra path like https://exmlp.cm/docs/.
In case it's fine, I'll file a PR. If not, we have to look for a better solution.

@aaranxu are you still planning to maintain this repo?

The last commit was 5 months ago, and #10 fixes a breaking issue in new versions of Zola but hasn't been commented on or merged in the past 3 months.

This theme is awesome and I really want to use it, but for now have to awkwardly use a fork with changes applied locally. Would be great to know what the plans are going forwards, so users can have confidence that they'll be able to use the theme, or so someone else can take over maintenance (either here or in a fork).

Hello,

When draft = true in article in blog section, blog post mark as a draft is not hidden like it does in docs section.

Drafted blog post is still shown in local server zola serve or after building it.

The font included with this theme contains an uppercase "A" character that does not display correctly on all operating systems and browsers.

Here's how it looks on my system:

The issue is described in this ticket:
google/fonts#2602

Replacing @import "common/fonts"; with either of the following causes it to render correctly:

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url("https://indestructibletype-fonthosting.github.io/jost.css");

(For the second URL, I also had to change the font name in _variables.scss to "Jost*".)

After making that change, the font displays correctly:

Please add an RSS feed feature for the blog.

I read the theme source for this but it was still a bit abstract. It would be nice to have this documented in the top-level docs in a way that shows what the theme designer intended.

Before I investigate where and how to do this, is there a way to have a sub menu collapse with a carrot?

I want to implement Glossary in a webpage, which will act like a reference, and opens up a popup after clicking. Does Zola/adidoks theme provide that functionality?

I was wondering if there was a way to use the header menu options (the ones that link to pages in the site) to be links to external URL, like linking to a github repo's discussion page. Thanks

First thanks for the great theme !

Seems changing the theme_color attribute under config.toml -> [extra] -> theme_color does not change anything.

[extra]
theme_color = "#000"

I am missing something ?

versions and in18

The [[extra.menu.social]]s in config.toml don't do anything. Please fix that.

I've spent quite some time now trying to get rid of the landing page and instead directly land into any page so that the sidebar shows and I don't need /docs/ in my URLs.

It seems harder than expected. If someone knows a way to do this or would be willing to do this for some payment, please contact me.

When I try to add custom variables in templates/index.html, it throws error.

content/_index.md
[extra]
lead = 'Navigating'
url = "getting-started/"
url_button = "Get started"
test = "Test"

templates/index.html

<div class="col-lg-9 col-xl-8 text-center">
  <h3>
	{{ section.extra.test | safe }}
	<small class="text-muted">With faded secondary text</small>
  </h3>
  <p class="lead">{{ section.extra.lead | default(value="Please start setting config.toml and adding your content.") | safe }}</p>
  <a class="btn btn-primary btn-lg px-4 mb-2" href="{{ get_url(path=section.extra.url | default(value="/"), trailing_slash=true) | safe }}" role="button">{{ section.extra.url_button }}</a>
</div>

Error -
Error: Failed to build the site
Error: Failed to render section '/home**/content/_index.fi.md'
Error: Reason: Failed to render 'index.html'
Error: Reason: Variable section.extra.test not found in context while rendering 'index.html'

My site has some <textarea>s in it, but I can't type the forward slash character (/) because the search interface captures it. The search shortcut should not fire when inputs are focused.

Please add the support to receive blog posts sorted by a date or tag

I want to know the correct way to aa a JS library and how to implement that in any HTML file

In two places, there is a check if a certain keydown event was triggered by the 191 key code to e.g. focus on the input search bar. Even though I think this is wrong or at least might not work on every machine.

At least on my (Ubuntu) Machine, using Brave Browser typing / doesn't result in the key code 191 but in 55 which is the keyCode for 7.

So instead of checking for the keyCode in the two places mentioned further down, but also in the other places I would suggest to use the event.key property instead.
So I would replace e.keyCode === 191 with e.key === '/'.

I verified with the following snippet, that it works accordingly. Also you can see that I type in / but the keyCode 55 is printed to the console.
Also after changing this locally the focus on the search input worked again.

document.addEventListener('keydown', function(e){
    console.log(e.keyCode);
    console.log(e.key);
});

The two places:

I don't mind preparing a PR/fix for the 191 case, but can also do so for the other ones.

Hello and thank you for making this theme

it seems the commit afd55736a9ba7b8ed01e111b4ebf4a44dcc8e998 broke something in the theme switcher

when i click on it it stays white , it should switch to the black theme

i have no real skills in html / css and i really do not know where to look at

Regards

How to fix this issue

How can we implement related content or pages when someone opens up a page?

Unable to run under zola version 0.14

Error: Failed to render section '/Users/wentao/Rust/book/content/_index.md'
Reason: Failed to render 'index.html': error while rendering macro macros_js::javascript (error happened in a parent template)
Reason: Function call 'get_url' failed
Reason: Variable config.default_language not found in context while rendering 'macros/javascript.html'

Right now, if you want to add more entries to [extra.footer] you have to make it seem like there are several entries by styling tags with margin-left: 1em; for example. This is obviously not at all ideal and looks weird on some viewport widths.

I would like to not only put links to local files on the bottom right but also external links. I would be fine too I there was another [[extra.footer.?]] for this.

There's an empty file sass/_custom.scss which looks like it should allow for some style overrides,
but I don't know how to use it, other than trying to experiment with it.

Scrolling through pages by arrow keys doesn't work. This seems to be because the keys are unconditionally captured by search result selection code - when pressing the keys the following error is logged:

Uncaught TypeError: focusableSuggestions[nextIndex] is undefined
    suggestionFocus http://127.0.0.1:1111/js/search.js:53
    EventListener.handleEvent* http://127.0.0.1:1111/js/search.js:35

@aaranxu can you give me access to create a PR to fix use of "higher/lower" in navigation as per
https://github.com/getzola/zola/blob/53ce6db057101b8a24631ac4212ab4f9f3d145ae/CHANGELOG.md#0160-2022-07-16
Or fix in templates/macros/docs-navigation.html
Thanks.

Zola applies syntax highlighting at the element level, but for basic background and text colors it applies them to the <pre> tag, not the <code> tag. But Adidoks provides a style which sets these colors on the <code> element, it overrides Zola's theming in standard <pre><code>...</code></pre> structures.

As a result, the background color of code blocks does not match the Zola-defined theme, and can result in hard-to-read displays like this example on the default Zola theme:

which should look like this:

I'm having difficulty working out how to change the navbar social icons.

Changing the class is simple, based around looking for a replacement icon here: https://dropways.github.io/feathericons/

I've also taken a look at the github repo here: https://github.com/feathericons/feather

But changing the class appears to have no effect on the icon. I think it's actually generated using the path variable.

Is there a way to determine the path variable for a custom icon?

Macros are meant to be pure functions (args) -> String. The fact that you can access config etc from inside is a pretty big bug in Tera and will very likely get fixed soonish. You should pass explicitly the arguments you need.

How can you apply the CSS of the blog section to other sections?

I want to do this because on my blog section the posts have space between them but not on my art section.

Working on some page layouts with this theme, I was extremely confused why my column layouts weren't working as expected. After much debugging and searching I realized the theme sets $grid-columns: 16, instead of the default 12. It would be very helpful if settings like this were clearly documented on the website.

When attempting to use the Zola Deploy Action with this theme it fails with the following error:

Reason: Variable 'config.default_language' not found in context while rendering 'macros/header.html'

I'm aware there was a previous pull request (#10) solving a similar issue in a different macro. I am using the latest commit to the main branch which includes that patch.

Full logs for build_and_deploy task are here.

• Zola Version: 0.14.1
• Adidoks Version: 5c69827

subj.

In my application of this theme there is no authors directory and private-policy/_index.md is moved to private-policy.md.
This allows to have an autogenerated navbar.

Example of a generator used in templates/macros/header.html

            {% set index = get_section(path="_index.md") -%}
            {% for sections in index.subsections -%}
              {% set section = get_section(path=sections) -%}
              {% if current_path %}
                {% set current_section = current_path | split(pat="/") | nth(n=1) -%}
              {% else %}
                {% set current_section = '/' -%}
              {% endif %}
              {% set stripped_section_path  = section.path | replace(from="/", to="") -%}
              <li class="nav-item{% if current_section==stripped_section_path %} active{% endif %}">
              <a class="nav-link" href="{{ section.permalink }}">
                {{ section.title }}
              </a>
            </li>
            {% endfor -%}

I find it to be a neat feature, but fallback strategy is not clear to me.
What would you say about using embedded navbar when there are no sections in a content dir or a config file.
When there are sections in the content dir, but not in the config file, we use them.
Whet there are menu entries in the config we use only them even if there others in the sections folder.

It would be a great feature to enable native support of mermaid.js diagram blocks.
This would enable users to write diagrams as code and keep them inside the markdown files.

It is simple enough to include the mermaid.js dependency and include a raw div with mermaid syntax, but we may need some more tweaking to enable parsing of code blocks.

// Raw div block - these can be picked up by default by mermaid.js just by including the dependency.
<div class="mermaid">
graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
</div>

// Code block - these are not picked up by mermaid.js, since they are rendered as <pre><code> blocks.
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

By default the markdown renderer just renders a mermaid block as a standard code block.

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

I dont know if mermaid rendering can be enabled without changing the core zola rendering engine, but it seems like it was achieved by Docsy (a hugo docuementation theme) without changing the core hugo markdown engine, and using jquery instead:
https://github.com/google/docsy/blob/d4b214c8e5c7fabf9e83b58a9df2281be242d5b4/assets/js/mermaid.js

How can i have another section, besides the list on the index page?
I want to have a piece of code between the list and the footer.

Sorry if this is a stupid question, but what's the right way to customize the font without modifying any file from this theme?

I noticed that fonts are defined in the file sass/common/_variables.scss. I can change $font-family-sans-serif in it to what I want and it works. But I prefer to achieve that from my own site files. Any way to do that? Thanks.

Hi!

I'm looking for the best way to add an image html tag with the correct path to a .MD files.

I have tried with this and many other path options:

![John Redcorn](../john-redcorn.png "John Redcorn")

Putting the image directly into the content folder or creating an img forder outside.

Could you please share what's the best way to do this?

Thank you for this awesome theme!

This is a very similar issue as #23, except it only occurs in dark mode.

For example, on my site using the zola monokai theme, it should look like this:

But Adidoks overrides the theme, resulting in this:

(notice different background color, and I believe the non-highlighted text color is slightly different too)