ampproject / ampproject/amp.dev

Spacing issues in examples

Open
#4,251 11 comments 0 reactions 0 assignees View on GitHub
Category: UX P2: Medium Type: Update
Dominant language
HTML
Stars
600
Forks
675
PR merge metrics
No merged PRs in 30d

Description

Working on [the `` examples page](https://amp.dev/documentation/examples/components/amp-script), I've hit a couple of snags:

### 1. Pretty-printing ###
I find it confusing that HTML attributes for `` tags get automatically pretty-printed so that each is on a separate line - as that tends to mush into the JavaScript that people will need to focus on. @sebastianbenz showed me that I could defeat this behavior by adding `<script>` to `BEAUTIFY_OPTIONS.unformatted[]` in `DocumentParser.js'`:

```javascript
const BEAUTIFY_OPTIONS = {
indent_size: 2,
"wrap_attributes": "force",
unformatted: ['noscript', 'style', 'head', 'script'],
'indent-char': ' ',
'no-preserve-newlines': '',
'extra_liners': []
};
```

However, this is having no effect.

### 2. Indentation ###
The pretty-printing normally works beautifully for JavaScript in examples. However, I'm having spacing problems in cases where I need to wrap the whole example in a `<div>` - since AFAIK a single example can't have multiple parent tags, but needs to have a single parent tag, which then gets magically removed.

So, this code:
```html
<div>
<amp-script layout="fixed-height" height="36" script="time-script" class="sample">
<div>The time is: <span id="time"></span></div>
</amp-script>

<script id="time-script" type="text/plain" target="amp-script">
const fetchCurrentTime = async () => {
const response = await fetch('<% hosts.platform %>/documentation/examples/api/time');
const data = await response.json();
const div = document.getElementById('time');
div.textContent = data.time;
}

fetchCurrentTime();


```

gets formatted like this:

![image](https://user-images.githubusercontent.com/29419498/88965308-91aa7f80-d278-11ea-968e-a98d6cc25c09.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.