personal-website/web/templates/blog.templ

/*
Template that grew in complexity recently. It's was first template that supports JS.

1. Template contains local templ blocks their names starting with lowercase to make it DRY
2. JS script is seperated and should be called *after* page construction.
3. Templ ShowBlogPage contains some math to dynamicly reduce post size

TODO - make it more DRY and modular in general 
*/
package templates

import "github.com/dixxe/personal-website/web/static/styling"
import "github.com/dixxe/personal-website/iternal/pkg/repositories"
import "fmt"
import "strings"
import "math"

var markedHandle = templ.NewOnceHandle()

templ runMarked(markdown string) {

    @templ.JSONScript("md", markdown)

    @markedHandle.Once() {
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    
    <script type="text/javascript">

        const markdown = JSON.parse(document.getElementById('md').textContent);
        document.getElementById('post-content').innerHTML =
        marked.parse( markdown );

    </script>
    }
    
}

templ blogHeader() {
    <h1 class={ styling.FileHeader() } style="font-family: Disket-Mono;">Блог дихуса</h1>
    <p class={ styling.PostScriptum() }> Вернуться <a href="/">Домой</a> </p>
    <hr>
}

templ ShowPost(post repositories.Post){
    @BasicPageBlock()
    @blogHeader()
    
    <div class={ styling.BlogContainer(), styling.CenterContainer(), styling.Textcontainer() }>
      <h1 style="font-family: Disket-Mono" class={ styling.Header(), styling.HighlightText() }>
      {post.Header}
      </h1>
      <div id="post-content"></div>
    </div>
    
    @runMarked(post.Content)
}


templ ShowBlogPage(posts []repositories.Post) {
    @BasicPageBlock()
    @blogHeader()

    for i := len(posts) - 1; i>=0; i-- {
        <div class={ styling.Textcontainer(), styling.BlogContainer() }>
            <h1 style="font-family: Disket-Mono;">
                <a class={ styling.Header() } href={ templ.URL(fmt.Sprintf("/post/%v", posts[i].Id)) }>
                    {posts[i].Header}
                </a>
            </h1>
            
            {{  
                // It's probably awfull practice, but here I calculate
                // post size and make it smaller.. In frontend! Magic!
                postWords := strings.Fields(posts[i].Content)
                postCap := int(math.Sqrt(float64(len(postWords))*5))
                shortStr := postWords[:postCap]
            
            }}

            <p id="post-content"> {strings.Join(shortStr, " ")}... </p>
            <a class={ styling.HighlightText() } href={ templ.URL(fmt.Sprintf("/post/%v", posts[i].Id)) }>
            Читать полностью...
            </a>
        </div>
      
    }

    @UsefulLinks()
}