GithubHelp home page GithubHelp logo

scottboms / kirby-markup Goto Github PK

View Code? Open in Web Editor NEW
9.0 1.0 1.0 18 KB

A collection of kirbytags providing advanced options for semantic markup.

License: MIT License

JavaScript 60.19% PHP 37.40% CSS 2.41%
kirby kirby-4 kirby-cms kirby-plugin

kirby-markup's Introduction

Semantic Markup Kirbytags

A collection of kirbytags and Writer field marks providing advanced options for semantic markup within textareas. Includes tags for: abbr, cite, dfn, ins, mark, q, s, samp, sub, sup along with a special shortcut for handling small caps. Each tag includes a complementary textareaToolbar button and Writer field option.

Installation

kirby plugin:install scottboms/kirby-markup

Git submodule

git submodule add https://github.com/scottboms/kirby-markup.git site/plugins/kirby-markup

Copy and Paste

  1. Download the contents of this repository as Zip file.
  2. Rename the extracted folder to kirby-markup and copy it into the site/plugins/ directory in your Kirby project.

Usage

To utilize the buttons in textarea field, you need to add them explicitly to your blueprints. For example:

text:
  label: Content
  type: textarea
  buttons:
    - smallcaps
    - abbr
    - cite
    - dfn
    - ins
    - mark
    - q
    - s
    - samp
    - sub
    - sup

description:
    type: writer
    inline: true
    marks:
      - abbr
      - cite
      - dfn
      - ins
      - mark
      - q
      - s
      - samp
      - sub
      - sup

Optional Tag Attributes

All Textarea field tags provide an convenience class attribute and the abbr and dfn tags also provide an optional title attribute per HTML markup standards.

  • class: A CSS class/classes to append to the element [optional]
  • title: A title attribute for abbr, dfn, and `` [optional]

(abbr: CSS title: Cascading Style Sheets class: markup__abbr)

(cite: Nineteen Eighty-Four class: markup__cite) by George Orwell

A (dfn: validator class: markup__dfn) is a program that checks for syntax errors in code or documents.

You're late! (ins: A wizard is never late class: markup__ins).

... (mark: Rebel spies managed to steal secret plans) to the Empire's ultimate weapon, the DEATH STAR ...

When Dave asks HAL to open the pod bay door, HAL answers: (q: I'm sorry, Dave. I'm afraid I can't do that.)

(s: There will be a few tickets available at the box office tonight.) SOLD OUT

(samp: Keyboard not found. Press F1 to continue. class: markup__samp)

[smallcaps]

(smallcaps: porsche class: markup__sc title: Proof of Rich Spoiled Children Having Everything)

C(sub: 8)H(sub: 10)N(sub: 4)O(sub: 2), also known as caffeine.

a(sup: 2) + b(sup: 2) = c(sup: 2)

Compatibility

  • Kirby 4+

To Do

Please note that the Writer Marks are currently an initial implementation and are not at feature parity with the Textarea buttons, so I would consider these experimental at the moment.

  • Add ability to add attributes to Writer Marks (esp. small caps, abbr, cite, dfn)

Disclaimer

This plugin is provided "as is" with no guarantee. Use it at your own risk and always test before using it in a production environment. If you identify an issue, typo, etc, please create a new issue so I can investigate.

License

MIT

kirby-markup's People

Contributors

scottboms avatar

Stargazers

Dominik Laube avatar Jon avatar Bruno Meilick avatar Sam Serrien avatar Nils Hörrmann avatar Branko Matić avatar  avatar Grant Hutchinson avatar Luke Dorny avatar

Watchers

 avatar

Forkers

luxuryluke

kirby-markup's Issues

kirby cli

i dont think the current cli can do plugin installs anymore.

kirby plugin:install scottboms/kirby-markup

Small Caps idea

Is it part of the scope of this collection of buttons to have something that makes small caps or is small caps just a styling of these sorts of elements, would you say?

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.