My 'Dananke' hack on Ananke theme approaching usability; comments?

I’ve got a work in progress derivative of GitHub - theNewDynamic/gohugo-theme-ananke: Ananke: A theme for Hugo Sites which I have called Dananke:

GitHub:

and demo site:

I’d welcome any comments or suggestions. I’ve noticed a few things that I want to work on, but would welcome any constructive feedback.

Aside from technical things, probably really even more than most if not all of those, is the need to update the documentation (I have an issue for that: Sync documentation with the actual theme · Issue #78 · danielfdickinson/dananke-theme-hugo-dfd · GitHub).

Thanks to everyone who replies, and who has participated on the forum, or posted on blogs I’ve found, that has really helped me improve my Hugo skills.

1 Like

You could add structured data and schema markup to the site.

Read more about it here.

This helps better describe your site.

You can also add Content Security Policy (CSP) headers.

These are important because they clearly define what can happen with your website and what cannot.

I tried doing this through a meta tag but google still has a problem with it as it is a security issue. I ended up using a serverless function to achieve proper content security policy (CSP) grades. This can be done on most hosting providers ie aws, cloudflare, firebase …etc

This website below can help you generate a badass Content Security Policy (CSP)

My CSP looks like

addEventListener(‘fetch’, event => {
event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {

let originalResponse = await fetch(request)

// pass in the original response so we can modify some of it.
let response = new Response(originalResponse.body,originalResponse);

response.headers.set(‘X-Frame-Options’, ‘SAMEORIGIN’);
response.headers.set(‘Strict-Transport-Security’, ‘max-age=31536000; includeSubdomains; preload’);
response.headers.set(‘Referrer-Policy’,‘same-origin’);
response.headers.set(‘Content-Security-Policy’, ‘default-src 'self'’);
response.headers.set(‘Feature-Policy’,‘camera 'none'; geolocation 'none'’);
response.headers.set(‘X-Content-Type-Options’,‘nosniff’);
response.headers.set(‘X-XSS-Protection’,‘1; mode=block’);
response.headers.set(‘Permissions-Policy’, ‘camera=(), geolocation=(), microphone=()’);
return response
}

I did this using a Cloudflare worker that is served on the edge.

You can test your site at

@devsr-gt I admin both of these are things I eventually want to add, but I consider them more advanced ‘nice to haves’ that are a ways out on my roadmap.

I appreciate your comments though. I certainly want to add them, but there are more immediate things I know I need to do (like server 2x width images for 2ddpx displays) for a major one. And more than few nits I need to deal with…

I’ll probably add at least a Schema.org and visible breadcrumbs (but have to figure out the mobile friendly part of that that) for (at least) nested pages (vs. the flat blog pages).

That and a proper sidebar navigation (or overlay menu on mobile) for nested pages are a little higher priority at the moment.

If, on a large screen, you look at the docs section of my tech site, which uses this theme, you will see why I consider these my priorities.

That and CSP is probably going to be a real pain to implement, and probably is going to dependent on the hosting.

Also, the site currently has 0% JS and the only JS I am planning to add (reluctantly) is to enable search, and I intend to stick to that philosophy.

Thanks again for your thoughts though; it reminds me of how much is involved in designing a truly complete theme. Maybe I should have said ‘basic usability’ instead of ‘usability’ in my title :person_shrugging:

1 Like
category is deliberate

I chose support because I didn’t make this post to ‘showcase’ the theme but to ask for development suggestions (but that is my theme development not Hugo development, so dev category is not appropriate).

@tut I’m making this a public note since you don’t allow DM’s on your profile: In future please do not recategorize my posts without first discussing with me.