Terminal

[Mario Santos]

Description

Inside the web design, a component simulating the terminal is reused. We have to make it configurable from Gutenberg, so we can't use images.

This component will be used for both the terminal and showing pieces of code (like frontity.settings.js for example).

You can check it in the Invision design at the hero or the WP+React made easy section.

HTML

Our initial idea is to create a reusable block which would be a div with the class terminal and an ordered lists where each <li> element would be a different line. It could be something like this:

<div class="wp-block-group terminal">
    <div class="wp-block-group__inner-container">
        <ol>
            <li>npx frontity create</li>
            <li>npx frontity dev</li>
        </ol>
    </div>
</div>

Logic

We should transform that <div> into the design, so we should add some styles and new html elements. For example, adding a new <div> above the list for showing the three dots. Something like this:

<div class="wp-block-group terminal">
    <div class="wp-block-group__inner-container">
        <div class="dots-bar">
            <div class="rounded-dot"></div>
            <div class="rounded-dot"></div>
            <div class="rounded-dot"></div>
        </div>
        <ol>
            <li>npx frontity create</li>
            <li>npx frontity dev</li>
        </ol>
    </div>
</div>

And we'll need to adapt this css to match the design:

.terminal{
    background: voidblu;
    height: 310px;
    width: 400px;
    box-shadow: 0 2px 12px 0 rgba(12,17,43,0.4), 0 1px 4px 0 rgba(12,17,43,0.39);
    border-radius: 8px;
    color: grass;
}
.dots-bar{
    border-bottom: solid 1px rgba(255,255,255,0.08)
}
.rounded-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    margin: 0 4px;
    background-color: rgba(255,255,255,0.2);
}

Some other things to have in mind:

• The orange and blue colors could be included with classes inside the specific <span>.
• If we add too many lines and the height is higher than 310px, we should allow scrolling, not make the <div> bigger. I guess that by adding something like overflow-y: auto.

Where to check

• Invision Homepage: WP+React made easy section
• /common-styles/ page: Terminal

[Michal]

I am strongly against creating this as a block in gutenberg 😅

1. It will add complexity to the implementation.
2. I don't see us "re-using" this element very much. I think so far it's only used once and only on the landing page.
3. Even if we do end up reusing it - if the purpose of using blocks is that non-technical team members can edit the content I then I think this element is an exception because the content is literally code so needs to be verified by a developer anyway 🙂

[Michal]

@SantosGuillamot Could you let me know if you agree with this? We can also talk about it on Monday during the meeting

[Mario Santos]

I would like to talk to you to understand better your point of view. I would try to make the lines of code customizable from Gutenberg unless it's really hard, because it'll probably change in the future and they are reuse in the web. Let's talk about this on Monday.

[Michal]

I have talked about the implementation with Mario and the conclusion was the following:

1. We need 2 terminal versions:
   a) for just "lines of code" that resemble shell commands, typically showing how to use the frontity CLI. Example:

**b)** a version for actual javascipt/typescript code examples which has proper JS/TS syntax highlighting.

However, afterwards I have realized that b) is easy but a) is a bit difficult to achieve with gutenberg. We would have to pass the colour information for each "word" separately in in gutenberg, which is an overkill. For example, if we would like to add content like npx frontity create "my-app", then npx, frontity, create and "my-app" would each need a separate CSS class that defines it's color.

In my opinion, the best way to achieve this is to just hardcode the content with the colour information directly in the frontend.

@SantosGuillamot

[Mario Santos]

We would have to pass the colour information for each "word" separately in in gutenberg, which is an overkill.

I think it's pretty straightforward, we can add inline styles for the <li> elements from Gutenberg and I guess we could even copy and paste that because the npx frontity ... is going to be common for most of the lines.
https://www.loom.com/share/a2138a0a95b84041a73ca6e3858e74e8

This way, we don't have to select the classes, just the color we want. We still have to finish the PR #43 , but that will be managed by another processor. The only difference is that it will add a <span> element for each different color:

<p>
  <span class="has-inline-color has-orange-color">This text is orange, </span>
  <span class="has-inline-color has-frontity-color">this one is blue,</span>
  <span class="has-inline-color has-grass-color"> this one is green</span>.
</p>

But I guess that wouldn't be a problem right?

[Michal]

okay, nice! 🙌 I didnt know you can do that :) I think pretty easy, let's do it!