Giter VIP home page Giter VIP logo

Comments (10)

hunvreus avatar hunvreus commented on May 19, 2024 2

I'm working on templates for Hugo, Astro, Next.js, Jekyll and 11ty. Maybe I should add a Zola template as well..?

from pages-cms.

johannes-he avatar johannes-he commented on May 19, 2024 1

Yeah, just tried it. Reading works fine but the writing is messed up.
Just copying what's in the frontmatter.js for stringifying the TOML seems to work.

In line

pages-cms/src/components/file/Editor.vue

Line 467 in bf7d4c3

content = TOML.stringify(content, null, 2);

content = TOML.stringify(content, { newline: '\n' }).trim();

from pages-cms.

itstamimi avatar itstamimi commented on May 19, 2024

Update:
Adding format: toml-frontmatter solve most of the issue
While that solve most of the issue, making it readable and editable, however, some fields in the file still won't work, a typical example post as follow:

+++
title = "Some Title"
description = "description"
date = 2021-07-16
draft = false

[taxonomies]
categories = ["Category1"]
tags = ["tag", "tag", "tag", "tag", "tag", "tag", "tag", "tag", "tag", "tag"]
[extra]
toc = true
keywords = "keyword, keyword, keyword"
+++

Only title, description, date, draft, and toc work in the example above.

Additionally, the config.toml still only open in raw format even with format: toml-frontmatter.
Lastly, the "body" of my posts are a mix of markdown and html, however, trying - { name: body, label: Body, type: rich-text, options: {format: html}} either html or markdown, still doesn't render it correctly.

from pages-cms.

johannes-he avatar johannes-he commented on May 19, 2024

For the posts you have to add format: toml-frontmatter as there is no way yet to detect it and it defaults to yaml frontmatter. But for the pure toml files it's detected based on the file extension.

For some reason the Editor.vue file is missing the "import TOML from '@ltd/j-toml';" without it there is no parsing happening at all.

from pages-cms.

johannes-he avatar johannes-he commented on May 19, 2024

Just adding the import fixes it, nothing else needed

from pages-cms.

itstamimi avatar itstamimi commented on May 19, 2024

Adding import TOML from '@ltd/j-toml'; to Editor.vue end up with an endless loading when I try to edit it.
Edit: the endless loading happens when I add the unsupported fields like tags/keywords/categories

from pages-cms.

itstamimi avatar itstamimi commented on May 19, 2024

It does work indeed and fixes the endless loading, but it still doesn't read/write them properly, so using it it will produce the following

+++ 
title = 'test' 
date = '2024-02-25' 
draft = true 
toc = true 
tags = 'tag, tag' 
keywords = 'keyword, keyword' 
categories = 'category' 
+++

Meanwhile a proper one would be:

+++ 
title = 'test' 
date = '2024-02-25' 
draft = true 
toc = true 
tags = ["tag, tag"]
keywords = "keyword, keyword"
categories = ["category"]
+++

from pages-cms.

itstamimi avatar itstamimi commented on May 19, 2024

For anyone is using Zola, I'm sharing my config settings, keep in mind:

  • You need to modify the Editor.vue as mentioned by @johannes-he to parse the toml file in the meantime (I created a PR for that)
  • Those are not my all configs, and I also found some of them didn't work properly, as in there's a string value but still not displayed in the UI, so edit it accordingly
  - name: config
    label: Zola Configs
    path: config.toml
    type: file
    fields:
      - name: title
        label: Website title
        type: string
      - name: description
        label: Website description
        type: string
        description: Will be provused for any page with no description.
      - name: default_language
        label: Website Default Language
        type: string
      - name: date_locale
        label: Website Default Date Locale
        type: string
      - name: compile_sass
        label: Compile sass
        default: true
        type: boolean
        description: Compile the sass in your theme (recomendded)
      - name: minify_html
        label: Minify html
        default: false
        type: boolean
      - name: build_search_index
        label: Build Search Index
        default: true
        type: boolean
      - name: generate_feed
        label: Generate Feed
        default: true
        type: boolean
      - name: feed_filename
        label: Feed Filename
        default: "atom.xml"
        type: string
      - name: output_dir
        label: Output Directory
        default: "public"
        type: string
      - name: theme
        label: Theme Name
        type: string
        description: Specifiy the theme name if installed.
      - name: highlight_code
        label: Markdown Highlight Code
        default: true
        type: boolean
        description: Highlight the code in Markdown.
      - name: render_emoji
        label: Markdown Render emoji
        default: true
        type: boolean
        description: Render emojis in Markdown.
      - name: external_links_target_blank
        label: Markdown External Links Target Blank
        default: true
        type: boolean
        description: Equivalent to rel="noopener"
      - name: external_links_no_follow
        label: Markdown External Links No Follow
        default: false
        type: boolean
        description: Equivalent to rel="nofollow"
      - name: external_links_no_referrer
        label: Markdown External Links No Referrer
        default: false
        type: boolean
        description: Equivalent to rel="noreferrer"
      - name: smart_punctuation
        label: Markdown Smart Punctuation
        default: false
        type: boolean
        description: Change `...` to `…`, `"quote"` to `“curly”`.
      - name: recent
        label: Recent Posts
        default: true
        type: boolean
      - name: recent_items
        label: Posts Recent Items To List
        type: number
        options:
          min: 1
      - name: footer_credit
        label: Zola Footer Credit
        default: true
        type: boolean
      - name: footer_credit_override
        label: Override The Credit
        type: string
      - name: textlogo
        label: Replace the logo
        type: string
        description: Use an SVG code in this field
      - name: base_url
        label: Website URL
        type: string
        pattern: ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$
      - name: sitedesc
        label: Site Description
        default: true
        type: boolean
        description: enables or disables the display of the site description below the logo.
      - name: copyright_start_year
        label: Copyright Start Year
        type: date
        options:
          format: YYYY
      - name: headhr
        label: Header line
        type: boolean
        description: show or hide horizontal rule below header
      - name: foothr
        label: Footer Line
        type: boolean
        description: show or hide horizontal rule above footer
      - name: title_separator
        label: Website Title Separator
        type: string
        description: Separator between title and title_addition, set as |, -, _, etc
      - name: title_addition
        label: Title Addition
        type: string
        description: A default value for title addition
      - name: author
        label: Author
        type: string
        description: Put Your Name here
      - name: keywords
        label: Keywords
        type: string
        description: Keywords used for the primary site index
      - name: twitter_meta
        label: Twitter Meta
        type: string
        description: for SEO - twitter-site and twitter-creator
      - name: banner
        label: Preview image
        type: image
        description: Used as default image for OpenGraph/(e.g. Facebook, Twitter...) if page specific image is undefined. 
      - name: seo
        label: SEO
        default: true
        type: boolean
        description: Enable or disable seo-related meta tags= opengraph, facebook, twitter
      - name: mail
        label: Your Email
        type: string
        description: Put your Email to list it in your blog
      - name: mail_encode
        label: Email Encoding
        default: true
        type: boolean
        description: This obfuscates your email address, javascript is used to decode it at page load.
      - name: feed
        label: RSS Feed
        type: boolean
        default: true
        description: This adds the RSS feed icon in the footer.
      - name: uglyurls
        label: Ugly URL
        type: boolean
        default: false
        description: If set to true then links are generated with the full path. eg https://abridge.netlify.app/index.html
      - name: integrity
        label: Site Integrity
        type: boolean
        default: true
        description: Increases site security, should normally be true. (setting to false is useful during js development)
      - name: js_bundle
        label: JS Bundle
        type: boolean
        default: true
        description: Multiple javascript files combined into a single file (setting to false is useful during js development)
      - name: js_switcher
        label: Dark/Light Theme Switcher
        type: boolean
        default: true
        description: The button that allows manually changing between light/dark mode.
      - name: js_copycode
        label: Code Copy Button
        type: boolean
        default: true
        description: The copy button on code blocks that allows you to copy them to the clipboard.

from pages-cms.

itstamimi avatar itstamimi commented on May 19, 2024

And for the posts part, for future reference for anyone is using Zola, I managed to get all sections working properly, here's the config part

content:
  - name: posts
    label: Posts
    type: collection
    format: toml-frontmatter
    path: content/posts
    view:
      fields: [title, draft, date]
    fields:
      - { name: title, label: Title, type: string }
      - { name: description, label: Description, type: string }
      - { name: date, label: Date, type: date }
      - { name: body, label: Body, type: text, options: {autoresize: true}}
      - { name: draft, label: Draft, default: true, type: boolean }
      - { name: toc, label: TOC, default: true, type: boolean }
      - name: taxonomies
        label: Taxonomies
        type: object
        fields:
          - name: tags
            label: Tags
            type: string
            list: true
            fields:
              - name: name
                label: Tag
                type: string
          - name: categories
            label: Categories
            list: true
            type: string
      - name: extra
        label: Extra
        type: object
        fields:
          - name: keywords
            label: Keywords
            type: string
    filename: "{primary}/index.md"

Screenshot 2024-02-27 at 03-42-43 Pages CMS - Copy

This plus the config.toml should make this compatible with Zola :)

from pages-cms.

itstamimi avatar itstamimi commented on May 19, 2024

That would be appreciated, @hunvreus!
I know Zola's user-base isn't like the ones you mentioned, but it would be nice to have!
Above both the configs and the posts template that worked for me.

from pages-cms.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.