Multilingual template with dynamic menu

[Albert Vonpupp]

Hello,

I'm new to Hyde and Jinja, so I apologize if I'm asking a simple question.

I'm trying to convert the beautiful template from Julien Danjou [1] to a multilingual version similar to the template from Vincent Bernat [2].

I tried to look at the documentation of Hyde on site and nodes but the site model documentation link is broken [3].

Basically what I would like is: my menu to be "dynamic" by parsing the meta.yaml file within each folder, similar as [1] did but with multilingual support. The source of my site can be found in [4].

Could please anyone help me?

Thank you very much.

[1]: https://github.com/jd/julien.danjou.info
[2]: https://github.com/vincentbernat/www.luffy.cx
[3]: http://hyde.github.io/templates/index.html
[4]: https://github.com/vonpupp/hydesite

[Lakshmi]

Hi Albert,

Could you please give some more information.   Could you link to the line in source that you'd like to have multi-language support?

Feel free to ping me on #hyde / freenode as well.

Cheers

Lakshmi

[Albert Vonpupp]

Hello Lakshmi,

Here is the menu parsing section [1]. This used to work fine without the top level folders "en" and "es", as I nested the whole structure within now it doesn't show the menu anymore.

My main problem is on how to refer to "everything within {{ resource.meta.language }}" (which should be the language selected by the user), in other words, I would like to do something like:
{{ for menu_item in site.content.<the current language folder>.child_nodes|sort(attribute='name') }}

Thank you very much.

[1]: https://github.com/vonpupp/hydesite/blob/develop/layout/base.j2#L88

[Lakshmi Vyasarajan]

Hi Albert,

See https://gist.github.com/lakshmivyas/fd47f5072d7f202c00ce.

The first change is to start at the language root instead of the site content root.   The second one is to make sure that the language folder is not displayed in the breadcrumbs.

Please let me know if you'd like me to write about the changes in detail.

HTH

Lakshmi

--
You received this message because you are subscribed to the Google Groups "Hyde" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hyde-dev+u...@googlegroups.com.
To post to this group, send email to hyde...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/hyde-dev/f65d736c-ae4d-4649-b6a5-0f6ac2f88b94%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Albert Vonpupp]

Wow! Thank you very much Lakshmi, now that I see it is straight forward hehe

I have been a couple of days trying without success and you just made it in minutes =).

Regards,
Albert.

[Lakshmi Vyasarajan]

You are welcome, Albert.   Even bare minimum documentation should have saved you quite a bit of time.  Sorry about that.

To view this discussion on the web visit https://groups.google.com/d/msgid/hyde-dev/7dc53538-4ffd-4aa4-84de-1024875a1807%40googlegroups.com.

[Albert Vonpupp]

Don't worry you have helped me out very quickly =)

Now I realize that I have problems with tags. I guess I have to modify the tagger section of the site-web.yaml which still points to a wrong dir (now blog is on <lang>/blog instead of blog):

tagger:
  sorter: time
  archives:
    atom:
      source: blog
      target: blog/tags
      template: tag.xml.j2
      extension: xml
    blog:
      source: blog
      target: blog/tags
      template: tag.j2
      extension: html

I tried to prepend the en/ folder to each section but it did not work. Here is what I did

tagger:
  sorter: time
  archives:
    atom:
      source: en/blog
      target: en/blog/tags
      template: tag.xml.j2
      extension: xml
    blog:
      source: en/blog
      target: en/blog/tags
      template: tag.j2
      extension: html

I also tried to move a specific block of code per language within the meta.yaml file and it didn't work either.

Also I noticed that the tags seems to be parsed two times, one for the en/ folder and another for the es/ folder, however this is not the desired behavior only the "current" language should be parsed (or showed).

I have no clue on how to fix this. Could you please guide me?

Thank you very much once again.

[Lakshmi]

Hi Albert,

This may be quite involved.  Ideally the ML plugin should add this information for the benefit of tagger.  Even better would be to bake ML into hyde core.

That said, its totally doable.

https://gist.github.com/lakshmivyas/f1b78ebd6a0f67367ea2

---

1. We modify site.yaml so that it generates two sets of archive files (One for en and one for es).

2. We preprocess the tag list to include only the relevant resources.

3. We point the tags to the language prefixed archive path.

Let me know if you need me to explain it a bit more.

Cheers

Lakshmi

[Albert Vonpupp]

Dear Lakshmi,

Thank you for your time, support and effort. I applied your patch at the hydesite folder root as "patch -p1 < mltags.diff". Apparently it patched fine however when I try to run the site executing "fab" (or "fab run_local"), the result is a page without posts; as if the blog was empty. I get the pagination at the end and the tags (all of them with 0 posts).

There are some parts that I don't understand, for instance on the "render_blog_listing" macro you use the following folder scheme:

"/blog/tags/{{ resource.meta.language }}/...". I have noticed something similar on the site-local.yaml where your diff among the atom entries, includes:

+    blog_en:

+      source: blog/en

+      target: blog/tags/en

+      template: tag.j2

+      extension: html

+    blog_es:

+      source: blog/es

+      target: blog/tags/es

       template: tag.j2

       extension: html

However, the current folder structure that I have (last commit on the develop branch [1]) is:

.

├── en

│   ├── about

│   │   ├── index.html

│   │   └── meta.yaml

│   ├── blog

│   │   ├── 2015

│   │   │   ├── arch-configuring-pacsrv.html

│   │   │   └── index.html -> ../index.html

│   │   ├── index.html

│   │   ├── index.xml

│   │   ├── meta.yaml

│   │   └── tags

│   │       ├── Arch.html

│   │       ├── Arch.xml

│   │       ├── Python.html

│   │       └── Python.xml

│   ├── index.html -> blog/index.html

│   ├── meta.yaml

│   └── sitemap.xml

├── es

│   ├── about

│   │   ├── index.html

│   │   └── meta.yaml

│   ├── blog

│   │   ├── 2015

│   │   │   ├── arch-configuring-pacsrv.html

│   │   │   └── index.html -> ../index.html

│   │   ├── index.html

│   │   ├── index.xml

│   │   └── meta.yaml

│   ├── index.html -> blog/index.html

│   ├── meta.yaml

│   └── sitemap.xml

I didn't include the media folder on purpose. I forgot the tags folder within the en folder, but this raises a question, where the tags should be? within the /en/blog/tags or within the /blog/tags/en? The blog source itself as stated on the site file should be blog/en or en/blog?

I apologize for the long post.

Thank you very much again for your help.

[1]: https://github.com/vonpupp/hydesite/commit/de29077e49a459f350e89ce32d5c3c6de71cffe8

[Lakshmi Vyasarajan]

Hi Albert,

Here is the updated gist based on your new structure: https://gist.github.com/lakshmivyas/2ffd57ff3ca5d180d8c6

---

Ideally, the tags folder should be outside the folder where we are processing the tags. 

 So I have used /en/tags and /es/tags as home for the tag archives.

I think en/blog or blog/en are both fine.   You can choose whatever appeals to you.   As far as hyde goes, as long as you tell it what to look for and where, it will do its job.  /en/blog probably results in a simpler site structure and URL. 

Let me know if this works for you.

Cheers

Lakshmi

To view this discussion on the web visit https://groups.google.com/d/msgid/hyde-dev/ccc45b2d-9fa4-42cc-a059-8f02197aa2d5%40googlegroups.com.

[Albert Vonpupp]

Thank you very much Lakshmi,

The tags seems to work fine, however the blog listing is not showing anything [1]. Could you please do a clone of the repo, switch to the feature/ml branch, apply your patch and post a screenshot of the listing?

In the meanwhile I will try to understand what is going on.

[1]: https://www.dropbox.com/s/llrwi9wjdnmy5fz/hydeml.png?dl=0

Thank you once again for your patience!

[Albert Vonpupp]

Lakshmi,

I don't know how to properly debug the macros and jinja code, I really would like to get an ipython shell but I haven't found the way to do this. I think the problem might be in the render_blog_listing() macro. I'm trying to inspect the tag.name property which is used to index the dict [1] by printing it with:
1. Adding: {{(tag|debug_attr) }} (and including the hyde_ext.custom_filters.CustomFilterPlugin to the plugins section)
2. Adding: {{(tag) }}

Both cases return no value.

If I try with: {{(tag|name) }} I get a "no filter named 'name'" error.

I might be saying something stupid, but that is the best that I could do so far. I will keep trying.

[1]: https://gist.github.com/lakshmivyas/2ffd57ff3ca5d180d8c6#file-mltags-diff-L30

[Lakshmi Vyasarajan]

Hi Albert, 

I was only checking the archives generated - not index.html.

https://gist.github.com/lakshmivyas/b5829786a62c41f1fdc7

Maybe third time is the charm.   I verified that both index.html and the archives generate fine.

Cheers

Lakshmi

To view this discussion on the web visit https://groups.google.com/d/msgid/hyde-dev/979d25eb-9460-4d54-90f9-bb8fbc8bb042%40googlegroups.com.

[Albert Vonpupp]

Thank you once again Lakshmi,

I applied your patch and I got an error:

[av:~/hyde-test/hydesite]$ patch -p1 < mltags.diff

patching file content/en/blog/index.html

patching file layout/blog-list.j2

Hunk #5 FAILED at 90.

1 out of 5 hunks FAILED -- saving rejects to file layout/blog-list.j2.rej

patching file layout/macros.j2

patching file layout/tag.j2

patching file site-local.yaml

The file layout/blog-list.j2.rej is here [1].

I thought that the error might be due to the line break on line 106 [2], so I edited your gist to remove that CRLF but I get the same error.

I managed to merge the errors manually and so far it seems to work fine. However I have a question:

This code within the patch does something?

      {% set lang = 'en' %}

      {% set previous = None %}

      {% set current = None %}

      {% set n = resource.node %}

      {% set cont = False %}

      {% for _ in range(1, 100) if cont %}

      {% if n.source_folder == site.content.source_folder %}

      {% set cont = True %}

      {% else %}

      {% set previous = current %}

      {% set current = n %}

      {% set n = n.parent %}

      {% endif %}

      {% endfor %}

      {% if previous %}

      {% set lang = previous.source_folder.name %}

      {% endif %}

It has a debug code smell (not sure though), furthermore "lang" is never used afterwards. Currently is merged within the code, but if it is not useful I will remove it.

I'm trying to fix two more things:

First: The next and previous post at the bottom. They are linked to the next and previous by date, where they should be by date but within a namespace (language). To do so I thought about using a similar pattern [pattern-tags] you used to build a list of tags, except that I thought of building a list of posts within the current language sorted by date, something similar has been done also by [3]. I will probably end up by removing the next/previous post feature, it looks too difficult.

[pattern-tags] Code:

{% set tag_dict = {} %}

{% for tag, meta in site.tagger.tags %}

   {% set tag_res = [] %}

   {% for res in meta.resources %}

      {% set lang_root = site.content.source_folder.child_folder(res.meta.language) %}

      {% if resource.node.source_folder.is_descendant_of(lang_root) or resource.node.source_folder == lang_root %}

      {% do tag_res.append(res) %}

      {% endif %}

   {% endfor %}

   {% do tag_dict.update({meta.name: tag_res}) %}

{% endfor %}

Second: I noticed that it would be nice to translate the Tags themselves also. To tackle this I checked the Vincent Bernat code and I noticed this part which looks interesting [3]. So I tried to include something like [4] to show the {{ tag|attr("descr_" + lang)|e }}{{ tag.descr|e }} attribute, however I don't fully understand that code. I guess "|e" is some sort of exception handler. Anyway that code doesn't work and I'm clueless. Do you know what am I doing wrong?

Thank you very much.

[1]: https://gist.github.com/vonpupp/17b590527db20a31954f

[2]: https://gist.github.com/lakshmivyas/b5829786a62c41f1fdc7#file-mltags-diff-L106

[3]: https://github.com/vincentbernat/www.luffy.cx/blob/58f1e71301757d86ccd72c0df0b812d692700500/layout/macros.j2#L4-L24

[4]: https://github.com/vonpupp/hydesite/blob/feature/ml/layout/blog-list.j2#L120

[Lakshmi Vyasarajan]

Albert,

I recommend that you revert to (de29077e) and then apply the patch.

Lang is used here: https://gist.github.com/lakshmivyas/b5829786a62c41f1fdc7#file-mltags-diff-L102.

The purpose of the code is to identify the current lang (it goes all the way up to the content folder and then back tracks to the first child following the convention of /<lang>/blog format.   This is required to make sure the code behaves similarly so that it works when called both from index or tag list.

----

Tags can have attributes.  Vincent is using that feature of hyde to use translated tags.

Cheers

Lakshmi

To view this discussion on the web visit https://groups.google.com/d/msgid/hyde-dev/36b5a2cc-f2c7-4bf1-a244-1a10dd8a6bf5%40googlegroups.com.

[Albert Vonpupp]

Thank you very much Lakshmi,

Everything works fine. I will try the tag attributes.

Cheers,
Albert.

[Lakshmi Vyasarajan]

Glad to hear that its working, Albert.  Please ping back here once you have the tag attributes working.  Its easy to add next/prev links.

Cheers

Lakshmi

To view this discussion on the web visit https://groups.google.com/d/msgid/hyde-dev/8f27c684-db3f-4e01-89c3-848158f353c7%40googlegroups.com.

[Albert Vonpupp]

Thanks Lakshmi,

I will =)

[Albert Vonpupp]

Dear Lakshmi,

I just wanted to report that the tag attributes are working fine =), I'm starting to feel more comfortable with hyde, my problem is still debugging jinja and worse of all, CSS. I totally lack of design skills =(.

Is there a roadmap on the documentation that needs to be updated? I could perhaps help in something.

[Lakshmi]

Hi Albert,

I can tell that jinja gets a lot easier with time.  I can't say the same thing about CSS though :P

Here is a gist for the Prev/Next menu at the bottom:

https://gist.github.com/lakshmivyas/24812f35eff40ee7d972

> Is there a roadmap on the documentation that needs to be updated? I could perhaps help in something.

Filling the missing blanks is a good place to start as far as docs are concerned.   There is another thread where Andrés has offered

to focus on the docs as well.   Even a blog post about the things you discovered while you built your site would be super helpful to

someone starting.   Your site is especially neat because of the multi-language bit.

Cheers

Lakshmi

[Andrés]

Hello Albert,

Am 09/11/2015 um 16:31 schrieb Lakshmi:
> > Is there a roadmap on the documentation that needs to be updated? I
> could perhaps help in something.
>
> Filling the missing blanks is a good place to start as far as docs are
> concerned. There is another thread where Andrés has offered
> to focus on the docs as well. Even a blog post about the things you
> discovered while you built your site would be super helpful to
> someone starting. Your site is especially neat because of the
> multi-language bit.
>

as Lakshmi mentioned, I want to kick off Hyde's documentation, you can
totally help with that!

From an email that wasn't on the list (since I wasn't aware of it; that
has been fixed with today's 0.8.9 release!):

Am 04/11/2015 um 2:44 schrieb Lakshmi Narasimhan:
> I think going from top to bottom on the topics on the hyde website would
> be great.http://hyde.github.io/index.html
>
> Addressing the often discussed questions on the mailing list is also a
> good idea. Off the top of my head:
>
> 1. Menu structuring using tagger and grouper
> 2. Creating custom plugins
> 3. Multi language setups
> 4. Using meta.yaml to configure things at folder level (specifically
> disabling template generation)

Since you've newly taken care of number 3 on that list, it'd be nice for
you to document it on your newly developed Hyde side ;). My site
(https://evilham.com) is multilingual as well, but I've had it for years
and I think the way I do it is *not* the currently recommended way, as
opposed to yours. We can probably produce together something that guides
new users though.

I'll probably work on other parts of the documentation next Wednesday
and we'll start seeing some steady progress on that :).

Cheers,
--
Andrés

---
Diese E-Mail wurde von Avast Antivirus-Software auf Viren geprüft.
https://www.avast.com/antivirus

[Albert Vonpupp]

Thank you Lakshmi and Andres,

Lakshmi is your patch for the latest version from github? I removed the next/prior post functionality since I found it too difficult to implement by myself but I will try your patch. Than you very much!

Andres: sure I can document that in my blog so you can review, test and approve =). I don't know if what I'm going to say is good or bad, but I think perhaps sphinx is more suited to document software. I believe that perhaps is better that the documentation (or at least part of it) resides within the code itself. I found beets to have a very good documentation, perhaps it would be a nice to look how they made it. Nevertheless I will write it in my blog just to get a "draft" and structure the ideas properly.

Cheers.

[Lakshmi Vyasarajan]

Albert,

Yes, the patch is for 02529094.

---

Jordi and I have discussed a bit about sphinx for docs.  I'll let him chime in on the details.

Cheers

Lakshmi

--
You received this message because you are subscribed to the Google Groups "Hyde" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hyde-dev+u...@googlegroups.com.
To post to this group, send email to hyde...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/hyde-dev/7b8c6e2c-bfc6-4032-a63d-8693f8dfffe8%40googlegroups.com.