opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix raw tags

Browse source
This commit is contained in:
Oliver Davies 2019-04-10 17:59:53 +01:00
parent 36e39431ef
commit 0feddeac6a
5 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/_posts/2015-07-21-automating-sculpin-jenkins.md
View file

@ -69,7 +69,7 @@ talks:
The Twig layout:
```language-twig
{% raw -%}
{% verbatim -%}
{% for talk in talks|reverse if talk.date >= now %}
{# Upcoming talks #}
{% endfor %}
@ -77,7 +77,7 @@ The Twig layout:
{% for talk in talks if talk.date < now %}
{# Previous talks #}
{% endfor%}
{%- endraw %}
{%- endverbatim %}
```
I also didn’t want to have to push an empty commit or manually trigger a job in Jenkins after doing a talk in order for it to be positioned in the correct place on the page, so I also wanted Jenkins to schedule a regular build regardless of whether or not code had been pushed, so ensure that my talks page would be up to date.

4
source/_posts/2016-07-15-building-gmail-filters-in-php.md
View file

@ -50,7 +50,7 @@ Before:
<div v-pre markdown="1">
```language-twig
{% raw %}{{ filter.isArchive ? 'true' : 'false' }}{% endraw %}
{% verbatim %}{{ filter.isArchive ? 'true' : 'false' }}{% endverbatim %}
```
</div>
@ -58,7 +58,7 @@ After:
<div v-pre markdown="1">
```language-twig
{% raw %}{{ filter.isArchive|boolean_string }}{% endraw %}
{% verbatim %}{{ filter.isArchive|boolean_string }}{% endverbatim %}
```
</div>

8
source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
View file

@ -61,7 +61,7 @@ export default {
`src/components/Welcome.vue`:
<div v-pre markdown="1">{% raw %}
<div v-pre markdown="1">{% verbatim %}
```vuejs
<template>
<div>
@ -163,7 +163,7 @@ export default {
}
</script>
```
{% endraw %}</div>
{% endverbatim %}</div>
## Making it responsive
@ -191,7 +191,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
`src/components/MainMenu.vue`:
{% raw %}<div v-pre markdown="1">
{% verbatim %}<div v-pre markdown="1">
```vuejs
<template>
<div>
@ -275,7 +275,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
}
</script>
```
</div>{% endraw %}
</div>{% endverbatim %}
## The result

8
source/_posts/2018-12-16-published-my-first-npm-package.md
View file

@ -54,7 +54,7 @@ The `v-cloak` directive exists on an element until Vue finishes compiling, after
In my `base.html.twig` template, I’ve added `v-cloak` to the wrapper div within the `body`.
{% raw %}<div v-pre markdown="1">
{% verbatim %}<div v-pre markdown="1">
```twig
<body class="font-sans leading-normal">
<div id="app" v-cloak>
@ -62,11 +62,11 @@ In my `base.html.twig` template, I’ve added `v-cloak` to the wrapper div withi
</div>
</body>
```
</div>{% endraw %}
</div>{% endverbatim %}
Within my `navbar.html.twig` partial, I have a placeholder div that also contains the site name, which is instantly visible but has the `v-cloak-block` class so it’s hidden once Vue has compiled and the `Navbar` Vue component is visible instead.
{% raw %}<div v-pre markdown="1">
{% verbatim %}<div v-pre markdown="1">
```twig
<div class="border-bottom border-b border-gray-300 mb-6">
<div class="container mx-auto">
@ -81,7 +81,7 @@ Within my `navbar.html.twig` partial, I have a placeholder div that also contain
</div>
</div>
```
</div>{% endraw %}
</div>{% endverbatim %}
I was originally surprised that these classes weren’t included as part of Tailwind or as part of an existing plugin, but as I’ve already used these styles on several projects that include Vue.js with Symfony or Sculpin, it made sense to extract it into a plugin and make it available as a npm package which I can easily add to any project - as well as making it easier to maintain if I need to add additional variations at a later point.

4
source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
View file

@ -52,7 +52,7 @@ In the first version, every link was individually styled which resulted in a lot
I added a `style` section within `Welcome.vue`, and added some default styling for links based on their location on the page - [extracting some Tailwind components](https://tailwindcss.com/docs/extracting-components).
<div v-pre markdown="1">{% raw %}
<div v-pre markdown="1">{% verbatim %}
```vuejs
<template>
...
@ -104,7 +104,7 @@ Within the `style` section, I’m able to use Tailwind’s custom `@apply` direc
@apply border-none
</style>
```
{% endraw %}</div>
{% endverbatim %}</div>
## Extracting a Vue component for Drupal blocks