not-matthias / apollo Goto Github PK

View Code? Open in Web Editor NEW

115.0 2.0 64.0 7.32 MB

Modern and minimalistic blog theme.

Home Page: https://not-matthias.github.io/apollo

License: MIT License

HTML 41.89% JavaScript 30.48% SCSS 27.47% Nix 0.16%

hacktoberfest

apollo's Introduction

apollo

Modern and minimalistic blog theme powered by Zola. See a live preview here.

_{^{Named after the greek god of knowledge, wisdom and intellect}}

Dark theme

Light theme

Features

Installation

Download the theme

git submodule add https://github.com/not-matthias/apollo themes/apollo

Add the following to the top of your config.toml

theme = "apollo"
taxonomies = [{ name = "tags" }]

[extra]
theme = "auto"
socials = [
  # Configure socials here
]
menu = [
  # Configure menu bar here
]

# See this for more options: https://github.com/not-matthias/apollo/blob/main/config.toml#L14

Copy the example content

cp -r themes/apollo/content/* content/

Configuration

You can find all the configuration options here

References

This theme is based on archie-zola.

apollo's People

Contributors

Stargazers

Watchers

apollo's Issues

[DOUBT] Buttons are not visible in light mode

Hey I was trying out the theme today (looks really clean by the way :D) and saw that the light mode hides the buttons. I wanted to know whether this is intentional or not as they are visible with the dark theme.

I switched between the themes by manually setting the default value in the partials/header.html file.

Light Mode:

Dark Mode:

Language name not visible

Name of some languages isn't visible:

See: https://not-matthias.github.io/apollo/posts/shortcode/

@SeniorMars can you check this out?

Moving to Zola 19

Zola 19 just got released, and I think it introduces some breaking changes to the configuration. We should probably wait a bit before some of the bugs are figured out but we should eventually move to support zola 19.

Regression: Not every header should be underlined red

Html truncatre error

I am trying to deploy this site to vercel but I keep getting this error.

Error: Failed to truncate html at character 3986: 
Expected attribute name.
--
1\|<!DOCTYPE html><html class="dark light"><head><meta charset=UTF-8><meta http-equiv=X-UA-Compatible content=IE=edge><meta name=viewport content="width=device-width, initial-scale=1.0"><title> not-matthias </title><meta property=og:title content=not-matthias><link rel=icon type=image/png href=/icon/favicon.png><link href=https://not-matthias.github.io/apollo/fonts.css rel=stylesheet><script>
2\|            MathJax = {
3\|              tex: {
4\|                inlineMath: [[', '], ['\\(', '\\)']]
5\|              }
6\|            };
7\|            </script><script id=MathJax-script async src=https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js>
8\|        </script><link rel=alternate type=application/atom+xml title=not-matthias href=https://not-matthias.github.io/apollo/atom.xml><link rel=stylesheet href=https://not-matthias.github.io/apollo/theme/light.css><link id=darkModeStyle rel=stylesheet href=https://not-matthias.github.io/apollo/theme/dark.css><link rel=stylesheet media=screen href=https://not-matthias.github.io/apollo/main.css><body><div class=content><header><div class=main><a href=https://not-matthias.github.io/apollo/>not-matthias</a><div class=socials><a rel=me href=https://twitter.com/not_matthias class=social> <img alt=twitter src=/social_icons/twitter.svg> </a><a rel=me href=https://github.com/not-matthias/ class=social> <img alt=github src=/social_icons/github.svg> </a></div></div><nav><a href=/posts style="margin-left: 0.7em">/posts</a><a href=/projects style="margin-left: 0.7em">/projects</a><a href=/about style="margin-left: 0.7em">/about</a> \| <a id=dark-mode-toggle onclick=toggleTheme() href=javascript:void(0)> <img src=/feather/sun.svg id=sun-icon style="filter: invert(1);"> <img src=/feather/moon.svg id=moon-icon> </a><script src=https://not-matthias.github.io/apollo/js/themetoggle.js></script></nav></header><div class=page-header>Projects<span class=primary-color style="font-size: 1.6em">.</span></div><main><div class=cards><div class=card><img class=card-image alt=/projects/project-1.jpg src=https://not-matthias.github.io/apollo/projects/project-1.jpg><div class=card-info><h1 class=card-title><a href=https://github.com/not-matthias/apollo>Apollo</a></h1><div class=meta></div><div class=card-description>Modern and minimalistic blog theme.</div></div></div><div class=card><img class=card-image alt=https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib </a>
9\|
10\|        <a href=/#x2F/about style="margin-left: 0.7em">/#x2F/about</a>
11\|

Site will not build

I keep getting this error and can't figure out what the problem is. I tried commenting out and deleting the socials section of nav.html but the result is always the same.

Error: Failed to serve the site
Error: Failed to render page '/Users/dokoissho/GitHub/zola/apollo/content/about.md'
Error: Reason: Failed to render 'page.html' (error happened in 'base.html').
Error: Reason: Variable `config.extra.socials` not found in context while rendering 'partials/nav.html'

issues when setting theme(dark/light/toggle/auto) in config.toml

When setting the color theme from toggle to dark in the config.toml, the site goes to black and white. Can't find where this is coming from in the files.

Backslash required for repo_view + more docs

apollo/config.toml

Line 24 in f5ab39b

repo_url = "https://github.com/not-matthias/apollo/tree/main/content"

Great job upgrading to 0.19. Just wanted to say that repo_view requires a backslash at the end '/'.

Also, toc enables some js. We could want to document that.

Moreover, on my fork I reverted to mathjax 2.7 due to mobile issues with 3.x. It's a bit slower, but it works great on all platforms and has auto linebreaks.

Here is my mathjax config:

    {% if config.extra.mathjax | default(value=false) %}
        {% if config.extra.mathjax_extra | default(value=false) %}
            <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                extensions: ["tex2jax.js", "fast-preview.js"],
                tex2jax: {
                    inlineMath: [['$', '$'], ['\\(', '\\)']],
                    displayMath: [['$$', '$$'], ['\\[', '\\]']],
                    processEscapes: true
                },
                "HTML-CSS": {
                    linebreaks: {
                        automatic: true,
                        width: "container"
                    }
                },
                SVG: {
                    linebreaks: {
                        automatic: true,
                        width: "container"
                    },
                    font: "TeX"
                },
                "fast-preview": {
                    disabled: false
                }
            });
            </script>
        {% endif %}
        <script type="text/javascript" async
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_CHTML">
        </script>
    {% endif %}

then in misc.scss i have:

.MathJax_Display,
.MJXc-display,
.MathJax_SVG_Display {
  overflow-x: auto;
  overflow-y: hidden;
}

#MathJax_Message {
  display: none !important;
}

I don't like it using the cdn, but mathjax is a big library.

Finally, there is also, read_time option which formats the reading_time option from zola.

                    {% if page.extra.read_time %}
                        :: <time>{{ page.reading_time }}</time> Min Read
                    {% endif %}

Show README as homepage

Is there a better way to do this than copying? Symlink? Reference the README from zola (or vice versa)?

Add social icon of x-twitter

Hello.

This is a minor suggestion, I would like to add an X (twitter) icon to social icons.

If you don't mind, I'll submit a pull request for the same commit as this pull request.

Theme Install Issues

Thanks for making this cool looking theme! I think this looks great, but I can't get it setup following the instructions in the README.md.

What is the most recent version of zola that this theme supports? I tried three major versions because I saw #65

If I'm understanding correctly, this says the min zola version is 0.14.0. I'm getting a series of errors when I follow the three README.md steps when using zola 0.19.0, 0.18.0 and 0.14.0. Given that note about zola 0.14.0 I saw I thought I'd give that a try too. That gave me the same errors on setup, each time from a fresh zola filetree. I've documented them in hopes this helps find a resolution. Thanks

Zola `0.18.0` and `0.19.0` Setup Errors

After completing this step I get the following errors with the above versions of zola.

% zola serve                                                                         24-06-29 - 22:29:07
Building site...
Error: Failed to serve the site
Error: Page `./content/posts/markdown.md` has taxonomy `tags` which is not defined in config.toml

When I remove lines 6 and 7 from ./content/posts/markdown.md the next error I encounter is

% zola serve                                                                    :( 1 24-06-29 - 22:37:52
Building site...
Checking all internal links with anchors.
> Successfully checked 0 internal link(s) with anchors.
-> Creating 10 pages (0 orphan) and 2 sections
Error: Failed to serve the site
Error: Failed to render page './content/about.md'
Error: Reason: Failed to render 'page.html' (error happened in 'base.html').
Error: Reason: Variable `config.extra.theme` not found in context while rendering 'partials/header.html'

To me this indicates that theme = "apollo" must be set under the [extra] header in the config.toml. I'm confused because this doesn't match the zola documentation.

make sure to place the variable in the top level of the .toml hierarchy and not after a dict like [extra] or [markdown]
-- using a theme

This was the last error I encountered after moving theme = "apollo" under the [extra] header in the onfig.toml before I gave up using this on zola 0.19.0, 0.18.0, and 0.14.0

% zola serve                                                                    :( 1 24-06-29 - 22:42:41
Building site...
Error: Failed to serve the site
Error: Failed to render content of ./content/posts/shortcode.md
Error: Reason: Found usage of a shortcode named `note` but we do not know about. Make sure it's not a typo and that a field name `note.{html,md} exists in the `templates/shortcodes` directory.

Search

Should use WASM-based libraries to reduce the network footprint:

https://github.com/cloudcannon/pagefind
https://github.com/tinysearch/tinysearch (only support word search)

Build and Deploy GH pages failed

I have included the apollo theme as a submodule to my blog but there is an issue at build_and_deploy step. I will put down the errors below.

Error: Failed to build the site
Error: Error parsing templates from the /templates directory
Error: Reason: Io error while writing rendered value to output: NotFound
Error: Reason: Io error while writing rendered value to output: NotFound

I have tested in my local and it is working fine

No LICENSE file

Hi,

Please don't take this as whining, but I don't see a LICENSE file in the project repository. Unfortunately, the project cannot be legally interpreted as open source due to the absence of such a file. Is it possible to clarify the situation by choosing an appropriate license?

Great theme! Thanks for your efforts.

How to add a footer?

Hi @not-matthias 😃
I'm unfamiliar with web languages. How difficult would it be to add a footer (e.g. for copyright notice) to the theme?

Misaligned header

The header items should actually be right next to the theme toggle:

See reference: https://archie-zola.vercel.app/

Exclude feather.js from <head> if theme toggle is not used

Currently the Feather icon library is always included in the page:

<script src=http://127.0.0.1:1111/js/feather.min.js></script>

This is 71 KiB of JavaScript and it seems to only be used for 2 icons if the theme toggle widget is enabled. Could it be excluded if the theme is set to auto, light, or dark? I can PR this change if desired.

It may also be worth considering inlining those two icons, or using similar-looking Unicode symbols.

Language in code block has no dark theme

It also doesn't look as good in the bright version:

missing -r flag to cp command

Utterances

See: https://utteranc.es/

Highlight based on theme

See: https://www.getzola.org/documentation/content/syntax-highlighting/#inline-vs-classed-highlighting

Currently only dark or light code format is enabled

Taxonomy not working as expected

Tried to use taxonomy for tags, it was not working as expected? can you add instructions, I am not sure how the config, usage differs when compared to archie-zola

No right margin in Projects section while small width resolution

Hi @not-matthias, thanks for publishing this theme.

I found out that there's no right margin between items in Project section and right border of view port in small width resolution.

Firstly, I noticed that playing with different devices in adaptive resolution tool from Chrome.
Then I tested that on my iPhone 14 Pro Max and the bug is confirmed.

I kinda can see that space if I forcibly swipe to left, but then it automatically aligns again hiding that gap.
No horizontal scrolls are visible btw, so looks like this are is kinda scrollable and not scrollable at the same time.

Dunno whether that report will help you :)

I'm just a newcomer in Zola and avoid frontend the whole my life, so I cannot provide more useful investigation, code highlights or even fixes. Sorry.

In case, if things I try to describe sounds unclear, I attached screenshot.

Screenshot

Regards,
Ilya

MathJax not rendering

MathJax is not rendering

Rework taxonomy design

Design should be similar to the posts:

Current version:

Possible design (posts page):

The same could be done for the Taxnonomy overview page.

Drafts are not rendered with `zola serve --drafts`

Drafts are not rendered when the site is generated and served with zola serve --drafts, or generated with zola build --drafts and served with for example python -m http.server 8000 --directory public.

It seems to be specific to this theme, because for example with the after dark theme it works as expected.

Using zola 0.16.1, Fedora 36

Improvement suggestion to `themetoggle.js` - don't default to light

For my purposes I created a new version of the themetoggle.js which defaults to the auto value.

Basically the same as before except:

var currentTheme = localStorage.getItem("theme-storage");
if(!currentTheme){
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        currentTheme = "dark";
    } else {
        currentTheme = "light";
    }
}
setTheme(currentTheme);

ie. don't default to light.

I'm sure the above is a bit clunky and can be refined, but it gets the job done!

I already have the code needed for this, but I'm unsure if this is feature that should be pred.