iainc / ia-writer-templates Goto Github PK

View Code? Open in Web Editor NEW

1.0K 1.0K 184.0 233 KB

Preview, create PDFs, and print documents in your own style with templates in iA Writer.

Home Page: https://ia.net/writer/templates

HTML 5.82% CSS 94.18%

ia-writer-templates's People

Contributors

Stargazers

Watchers

Forkers

jan357 davidglidden charlesgedeon patricklenz mincemeat20 mrkaluzny digiltd bensleveritt stamperd benjaminchait zazazack steffenc infotexture matthiasmoier tarikfayad itsnikka jonathanecm wfosbery seiz floq-design hampallop themetaphysicalcrook eblin saitosakihei fish-nuggets lunarworkslab standout ikait lucasimp zakariara yyasuhilo wfreelandecon georgemandis willium laurian chunnodu jpmcdonald cssny gregorynicholas meditations-io dangerdave007 sobechad skyzyx julianocristian vincentjacobs sschwetz stepf ahleih jbonifacio fullstackenviormentss solertis paninapress elwindewitte neuschnee leo-daniel kw-lee clearpix decm4 kdubovikov davemee hugorodgerbrown xanderschrijen mechanicalhuman karlsander dermicha stephen-gates jethrolong hauber robertleonardmayer ganta ovallino77 benatwide wyte3z iiviigames jantonioavalos hollodotme stebrech felipealbuquerque-github hsarji otstu larryoh simonbaier itsjustmath zacharybennett danisky94 laranjaum jithinraj furubayashim tbussmann toddswrittenword mamkramer roberttrue3 llb1026 usmanity gbeine matheusvanzan ijmrtll quiltro bnewcomb borisanthony

ia-writer-templates's Issues

Numbering chapters without including numbers in chapter titles

i am working on a book with numbered chapters. Right now, to keep it organized, I title the files themselves "1. Meet Able.md" on through "12. The Return of Waca and Rilla.md" This keeps the chapters in order in the library. However, when I go to include data-title in the template header.html file, of course, I get the number, which I do not want. The manuscript itself is built using one document that has /01.meet-able.md through /12.the-return-of-waca-and-rilla.md The Chapter numbers and titles are re-written into each document using markdown, as opposed to say, frontmatter. So, this is just a general question of if there is a better way to to do what I am doing? Should I organize the chapters in some other way? Can I use frontmatter and insert the data into template files? That would be ideal.

Shipping template with custom font

How should I define @font-face directive for locally bundled font in the template? I tried the following:

@font-face {
  font-family: "MyFont";
  font-weight: 400;
  font-style: normal;
  src: local("MyFont.otf"); /* This one was with `Contents/Resources/` and `Resources/` prefix */
}

But it didn't work. Should I provide font's post-script name or a file name?

Override metadata

Hi!

I'm not sure this is the right place to open a feature request. Please, forgive me if I'm at the wrong place.

Can you, please, allow us to override data-title, data-author and data-date?

My suggestion:


---
title: "foo"
author: "bar"
date: 2016-07-07

---

It's important that the date follows an international standard.

Thank you!

Javascript (e.g. MathJax)

I copied the template "Modern (Sans)" shipped with iA Writer, and modified document.html to support MathJax, by adding in the usual

    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-SVG">
    </script>

Then in the iOS app, in the Preview, when I switch to that new "Modern (Sans with MathJax)", I get equations rendered fine.

However, if I go back to the editor, change some text, not necessarily the equations, note, and then go back to Preview, the equations are not rendered anymore: I get the TeX code between either \(...\) or \[...\]. So the Markdown converter does what it is supposed to do but the MathJax javascript does not run.

So it seems to me that the javascript in a template is run only once. Am I missing something? Do I need to do something more clever in my template? Or is it a bug? At least, it would help if the subject of JavaScript in templates was touched upon in the documentation.

Support more attributes on document page

The use case I have in mind is a document page template like

<body>
    <header>
        <h1 data-title></h1>
        <h2 data-author></h2>
    </header>
    <main data-document>&nbsp;</main>
</body>

I compose way more notes in iA Writer than I export or print them, and therefore it is important that iA Writer also provides a nice reading experience on its own.

American Psychological Association Template

Description

I really appreciate the inclusion of templates with the iA Writer application. The GitHub and MLA templates, I feel are great starters. Would also like to see a template for APA.

Proposal

Create a template that follows the formatting guidelines of the APA. I am not too familiar, at this time, with how to build template for iA Writer. Therefore, this Issue is more a placeholder for me to either create it when it becomes more pressing; or, to request the creation of such a template.

Thank you for the patience (if waiting for me to do it) and consideration (if someone else would be willing to take up the charge).

Q: Is it possible to add a div with a class within a template ...?

Example...

"after every H1 add

and close...

"before every H1 add

I know in the docs it mentions you can execute javascript in templates, but not seeing how that's possible... would you add an example.js file to the template and call it in the heading of the document?

Remove header and footer margins from title page

We're working on our template, and on the title page we're trying to place a pseudo footer, but we're unable to place anything at the bottom of the page because the IATemplateFooterHeight is set to 100.

Change heading format in editor?

note: Not in templates, but in Editor

Is there a way to change the font weight of a header such as H3 to Regular?

Event after iA Writer Populates data attributes

It is difficult to edit the DOM on a document using Javascript because there is no Javascript event that iA Writer sends after it has completed replacing the data-document attribute with content.

For example, a user wants to have their template change the contents of all the 'h1' tags. The following snippet will not work, because the iteration through all the documents tags will be empty, they have yet to be populated by iA Writer by the time the window loads.

window.addEventListener('load',function() {
    var headings = document.getElementsByTagName("h1");
    for(var i = 0; i < headings.length; i++){
        headings[i].innerHTML = 'changed!';
    }
});

The problem is then, changing the event so that the snippet runs after iA Writer has populated the data-document tag, but it is unclear what event would satisfy that.

Is there currently a workaround or better approach? If not, iA Writer should provide a hook that always runs after iA Writer has populated the data attributes.

GitHub Template Causes Issue Exporting to PDF on Windows

If I want to export the document with the Windows client, I get the following error message

https://snipboard.io/NSyesQ.jpg

ia-writer-change and night-mode change

Hi.I am trying to write a javascript that can return different config option based on the appearance. I have

var get_mode = function() {
  var html = document.getElementsByTagName('html')[0]
  if(html.classList.contains('night-mode')){
    var config = {theme:"dark"}
  }
  else{
    var config = {theme:"default"}
  }
  return config
}

and

window.addEventListener('load', function () {
  console.log('loaded')
  document.body.addEventListener('ia-writer-change',function(){
    console.log(get_mode())
    console.log('changed')
  })
})

However, this code will partially work. It will only work when switching from dark to light appearance with shift-command-R. Otherwise, I have to open another file and go back when switching from light to dark appearance. Is there any way to detect appearance switching from dark to light or vice verse?

Possibility to access metadata inside templates?

Is it possible to access metadata (usually intended to be hidden from the preview) to be displayed in, e.g. a header.html?

Potential use cases: In addition to data-title I would like to add additional information to the header, e.g. a version number, or define the date by writing it in the metadata and not use the current data provided by data-date.

Changes to custom template not reloading

Changes to my custom template are not reloading when I enter Shift + Command + R. I have enabled Web Inspector in Preview and confirmed that changes to the style sheet are not propagating. To see changes, I have to reinstall the template, and then still have to enter Shift + Command + R before the changes are visible. I can’t develop like this. Is there anything I’m missing?

CSS media queries

Since iA Writer 4.0.4 (or possibly 4.0.3), when exporting to PDF the media queries that are responsive to the width of the document in my template are broken.

The CSS inside @media (max-width: 590px) used to not take effect when printing/exporting. Now I need to use the ridiculously low @media (max-width: 90px).

What's the recommended way to do those? @media print doesn't seem to take effect.

page-break avoid doesn’t work

Unfortunately it seems to be impossible to avoid headings at the end of a page (print PDF).
I tried "page-break-after:avoid", "break-after:avoid-page" and "page-break-before:avoid" with the followed paragraph.
Is this a bug or is there a solution?

Thanks a lot.

Can custom templates export to Microsoft Word / .docx files?

I write fiction in iA Writer (thanks for the lovely tool). I'd like to export work into Manuscript Format, which is a Word doc with some basic formatting constraints.

Can a custom template help or is that limited to HTML and PDF? Any thoughts on how to accomplish this?

My current approach is a laborious

File > Export > Word
open Word doc
change fonts
add double spacing
indent all paragraphs
center every "#" sign
… etc.

It's the steps from 3 on that I'd love reduce / automate.

Web preview doesn’t update data-attributes

The documentation says that the data-title should work on all pages, however data-title element is not being updated and the ia-writer-change event is never fired in the web preview.

Writer Version: 6.0.4 (60081)
OS: MacOS 12.6

// document.html

<body>
    <h1 data-title>// Not properly filled</h1>
    <div data-document>// Content is properly filled</div>
    <script>
        const content = document.querySelector('[data-document]')
        content.addEventListener('ia-writer-change', function (e) {
            // This fires
            console.log('ia-writer-change: [data-document]', e)
        })

        const title = document.querySelector('[data-title]')
        title.addEventListener('ia-writer-change', function (e) {
            // This does not fire
            console.log('ia-writer-change: [data-title]', e)
        })
    </script>
</body>

Access content blocks from within templates

Hi,
I have this template to write letters. Sender and receiver are defined in a definition list – see the @sender and @receiver notation. Do you think it´s possible to combine that somehow with your content blocks, so that I can refer to pre-defined addresses which are stored in content blocks? E.g. is there a way to access a content block API from within the template?

Wrong data-page-count?

I’m including the current page number as well as the total page count in the footer of my template. When trying to print or export the document to PDF—without including a title page—the total page count seems to be off by one. Instead of the expected “1 / 1” it would say “1 / 2”. Is that a known issue, or could it have to do with the CSS counters I’m using for a couple heading tags?

Templates get deleted on every app update

Problem

Whenever I update iA Writer, the Github template that I use gets deleted.

Possible solution

To put templates in the ~/Library/Application Support directory instead of Applications.

Add support for fixed elements on every page

I would like to add foldmarks to my template, but it seems there's no good way to do it.

Adding them (with position:fixed)to document.html works ok, but then they won't reappear on the next pages. Adding them to the header would be the more logical way, but unfortunately everything extending the header height is being cropped away.

Using HeaderHeight and FooterHeight is not working

I developed a simple theme in iA Writer for Windows. Code is just the same as in Example template, just changed the naming properties in the Info.plist file and added to style.css this code:

html {
  font-family: 'Bahnschrift', 'Segoe UI', sans-serif;
  color: #444;
  font-weight: 300;
  font-size: 18px; }

html.night-mode {
  background-color: #444;
  color: white; }

a {
  text-decoration: none;
  color: #777;
  font-weight: bolder; }

th {
  padding: .25em .5em; }

td {
  padding: .25em 0;
  border-bottom: 1px solid #ccc; }

Somehow, however, my template seems to be working really bad.

Page numbers don't work
Content is sticked to the top and bottom of the page (no margins)
Table headers that are overlapped when there's a page break inside the table (image below)
For some reason the "font-weight: 300" CSS declaration works in the preview window but not in the exported PDF.

Just to try, I rendered the same document using the PlexSans template and the table headers are still buggy. So this most likely is an iA Writer issue and not something specific to my template's code.

PS:
I wasn't really needing to render the table in two pages, I was just adding the table to see if the page numbers would show if there were more than one page in the document.

For now I can use my template as I wanted to, but to do so I have to use small hacks, for example adding style="heght:30px" somewhere in the header.html and footer.html files, or margin-top: 30mm; in the CSS, and disabling page numbers.

This bugs are not really something that affect my current project, but there are features that in the future I might want to use.

I love iA Writer because...

Before iA Writer, my workflow to get PDF out of markdown files was:

Open the file in Visual Studio Code
Render to HTML with styles using a plug-in and a custom stylesheet I wrote
Open in Edge (for some reason is the best browser regarding printing capabilities - for example the only one that supports the CSS page-break property without bugs)
Open the print dialog in Edge and select "Print to PDF"

With just some minor improvements in iA Writer, I could have and awesome markdown editor and export files directly to PDF using my custom stylesheet with just two steps:

Open the file in iA Writer
File -> Export -> PDF

So I would really like to see the export to PDF feature with some improvements!

But in the meantime, might I suggest a simple workaround that might do the trick? (at least for me)
When I use the "File->Export->HTML" option, would it be possible that in the generated HTML file, the stylesheet of my template got injected in a <style> tag? That way I would still easily fall back to the "Print" option of the browser.

And please, keep up the good work! I'm a big fan of iA Writer. Cheers

Repo status

Greetings - is this repo still active?

Title cut to one page?

Hi there!

I'm trying to use the title page to add a blank page between the title and the document (without adding to the page count).

I experimented a bit with page-break-before and page-break-after. Unfortunately though it seems that Writer cuts off the title to a single page before merging the compiled documents. What can I do to extend my title page to two pages?

Thanks in advance!

Add night mode support for GitHub template

The GitHub template does not respect night mode.
See screenshot.

How to customise the heading for footnotes

Hi iA! I made a custom template for iA writer. I want to customise the look of the heading for footnotes, 'Notes'. (Right now the heading is an <h1>; I want to make it an <h2>.) How can I do this? Thanks.

Font features

does this support kerning and other advanced open type font settings?

Is there a way to target inverted preview in night-mode with css?

Date Locale, full month names

How’s the locale for displaying a date determined? My system language is German.

When I use

<span data-date="d.MMMM YYYY"></span>

The date gets displayed as: 17 February 2021 but I would expect it to be 17. Februar 2021.

My macOS is set to German and I’ve also tried to set a lang="de" on the header.html

“Invalid Template” when installing templates from iCloud Drive on iOS with version 5.0.2

I developed a template ("Geek" here) which used to work fine with iA Writer on both MacOS and iOS. I haven't used the latter in a while so I don't know which version broke my template but I can't load it anymore on iOS, systematically getting an "Invalid Template" error. It loads fine on MacOS on the contrary. Has something changed recently in the way to write templates?

Header Height and Footer Height unit

Hi,
I am on macOS version 10.15.4 and using the IA writer version 5.6.3. It seems like the unit for header height and footer height is in pt instead of the documented px. I am using left and right margin of 1 inch. Setting the height to 96 should result exactly 1 inch margin on the top and bottom. However, the result margin looks longer than it should be. I experimented a bit and find out that setting the height to 72 results a margin close to 1 inch, which implies that the unit might be pt instead of px

Template location

Where are the templates stored on macOS?

thx

How to uninstall a template?

I'm really sorry if this question is not ment to be here! I'm looking for a way to uninstall a template. Templates installed through File>Install Template are not listed in iA Writer\Templates (where iA Writer is the installation folder). I need to be able to uninstall templates, as part of the trial/error process necessary to develop a new one. Where can I uninstall them from?

Center align text in Windows?

The windows version of ia Writer does not have a preferences menu, but that doesn't bother me, what does is ia writer defaults to writing everything on the left margin when most film scripts have dialogue centered. When I contacted ia writer they suggested I write a template that implements a center align option, is there anyone who can help create that? just a hotkey like Shift+Tab to center align the text?

Can't open

Where are the .bundle files? I just see folders and can't drag them to the IA Writer app?
Thanks, this looks really cool

Print with the correct physical dimensions

Right now I find it a bit hard to actually use this template system for creating a precise print layout.
One thing that is really annoying is that when specifiyng sizes in mm in css, they come out slightly larger than expected (100mm in css becomes something like 108mm in print).

Override rendering

Is there any option in accessing the original markdown content in the template (in js) such that alternative parsers can be used? I'm looking into having https://github.com/mattdaly/Fountain.js parsing.

data-date attribute not working

The data-date attribute seems not to work.

I used <span data-date="DD.MM.YYYY"> </span>
and got

03.2020 􀊮day of year: 67􀊶

in the exported PDF document.

PDF renders before template assets have finished loading

I'm using some javascript to search for code blocks with a class "plantuml", then calling a web server and swapping the content with an SVG.

This works great when rendering as "Web". Works flawlessly.

When rendering as "PDF" it works most of the time. It works well enough that I can get a PDF out of it with multiple attempts. Much of the time, however it will render before the SVG has had time to be fetched, so the diagram displays the code block instead of the SVG. When the document has multiple diagrams, it is even more problematic to get a complete PDF.

Is there a way I could delay the rendering of the PDF until the SVG has had time to be retrieved? Perhaps a setting in Info.plist like IATemplatePDFRenderDelay? That way I could set it to a reasonable value to allow time for a template with slightly longer load times (say 500ms?) to fully render.

window.addEventListener('load', function() {
  document.body.addEventListener('ia-writer-change', function() {
    renderPlantUML();
  });
});

The fetch code is something like this:

function renderPlantUML(){
  var plantumls = document.querySelectorAll('.plantuml');
  plantumls.forEach(function (plantuml, index) {
    svg = compress(plantuml.innerText);
    plantuml.innerHTML = "loading...";

    fetch(svg)
      .then(r => r.text())
      .then(text => {
        plantuml.innerHTML = text;
      })
      .catch(console.error.bind(console));
  });
}

Some times it renders just the "loading..." text, and others it renders the SVG.

Date attribute doesn't do anything.

I have the below setup so the autofill from data-document doesn't erase the span.
The only way I can get data-date to actually do something is if I put it into the markdown file. Which defeats the purpose.

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" media="all" href="style.css">
</head>

<body>
	<span data-date="d.MMMM YYYY"></span>
	<div data-document>
	<\div>
</body>

</html>

Preview print version?

I wanted to do some updates to the exported pdf version of a template and found the update process very intimidatingly long and time-consuming.

It essentially amounted to:

update code, save
close iaWriter (bc it wasn't picking up changes without relaunch)
run template file, confirm installation, which reopened iaWriter
export the doc (cmd+shift+E, click, ENTER to save)
open exported file to look at results and assess code update.

I'd be curious about a 2 step process if one is possible? (also, is it expected that I need to relaunch iaWriter to see updates to installed template show up in exports?)

Page decoration

Is there a way to have different styles on different pages? Something like some header on the first page but not on the following pages?

I’ll try to write a template to use as my letter head. The first page should have all the address fields and some graphical elements, but all following pages should have different styles.

@font-face not loaded on pdf export

I am trying to use a custom font. I define it with a @font-face rule. It works fine in the preview. On exporting the fallback font is used.

Is there a trick to it?

Content to the left or right of the document text on each page

Is there a way to display something on the left or right of the document text on each page?

Ideally, iA Writer Templates would support the Paged Media CSS module, where I could use the @left and @right selectors. Paged Media is implemented in PrinceXML and WeasyPrint among others...

How to access metadata

According to your docs Writer can process MultiMarkdown metadata. How do I access it inside of a template?

The `ia-writer-change` event is not firing

I have this basic code:

console.log('test'); // this logs

window.addEventListener('load', function() {
  console.log('test load'); // this logs too
});

document.addEventListener('ia-writer-change', function() {
  console.log('test ia-writer-change'); // this doesn't log
});

Since I couldn't find any docs on JS events from iAWriter I couldn't figure if I'm doing something wrong.

How to change the background color of the pdf?

Wrong description in Helvetica template

Hey there,

I checked the Helvetica template from your website to see how templates are done. When checking, I have seen, that at least the "style.css" file contains wrong information. It is just a minor thing, but it says:

/**
 * iA Writer Template “Serif”
 *
 * font-family: Helvetica
 * font-size:   15px iPhone 5, 16px iPhone 6+, 17px iPad, 18px Mac, 19px
 * line-height: 1.6316 (31px @ font-size: 19px)
 * vert margin: 31px @ 1080px wide
 */

… and should say that it is the Helvetica template ;)

Bug in either README or iA Writer application

In the README, it says

To fully reload the currently visible template in Preview on macOS, press Shift Command R.

But that only works for the web preview. In order to get iA Writer to reload the template for printing (both for "PDF" previews and the actual system Print dialog) the application has to be quit and re-launched. A sort of halfway workaround is using the web preview and forcing print stylesheets, but if you need to see pagination or indeed the preview in the system print dialog, it's super annoying.

If that's just a limitation of the application, the docs need updating. If it's a bug in iA Writer, please pass this along and close the issue.

Thanks!