Skip to content

Commit

Permalink
refactor(page post): create text styles and headers + read also
Browse files Browse the repository at this point in the history
  • Loading branch information
gael-boyenval authored and eko committed Jun 23, 2017
1 parent d178814 commit c42ca80
Show file tree
Hide file tree
Showing 9 changed files with 227 additions and 46 deletions.
20 changes: 12 additions & 8 deletions _includes/links.html
@@ -1,8 +1,12 @@
<h3>A lire aussi</h3>
<ul>
{% for post in site.posts limit:3 %}
<li>
<a href='{{ post.url | prepend: site.baseurl }}'>{{ post.title }}</a>
</li>
{% endfor %}
</ul>
<aside class="slice read-also">
<div class="container">
<h3 class="read-also-title">A lire aussi</h3>
<ul class="read-also-list">
{% for post in site.posts limit:3 %}
<li class="read-also-item">
<a class="read-also-link" href='{{ post.url | prepend: site.baseurl }}'>{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
</aside>
4 changes: 2 additions & 2 deletions _includes/reading_time.html
@@ -1,8 +1,8 @@
<span class="reading-time" title="Estimated read time">
{% assign words = include.content | number_of_words %}
{% if words < 360 %}
1 min
lecture: 1 min
{% else %}
{{ words | divided_by:180 }} mins
lecture: {{ words | divided_by:180 }} mins
{% endif %}
</span>
44 changes: 27 additions & 17 deletions _layouts/post.html
Expand Up @@ -2,23 +2,29 @@
layout: default
---

<!-- Share -->
{% if site.theme_settings.share_button %}
<div class="share-button">
{% include share.html %}
</div>
{% endif %}

<article {% if page.feature-img %}class="feature-image"{% endif %}>
<header style="background-image: url('{{ site.baseurl }}/{{ page.feature-img }}')">
<h1 class="title">{{ page.title }}</h1>
<p class="meta">
{{ page.date | date: "%B %-d, %Y" }}

{% include author_link.html login=page.author %} - {% include reading_time.html content=content %}
</p>
<article {% if page.feature-img %}class="feature-image"{% endif %}>
<header class="page-heading" style="background-image: url('{{ site.baseurl }}/{{ page.feature-img }}')">
<div class="container">
<h1 class="page-heading-title">{{ page.title }}</h1>
<span class="meta">
<span class="meta-content">
{{ page.date | date: "%B %-d, %Y" }}
{% include author_link.html login=page.author %}
</span>
</span>
<div class="page-heading-reading-time">{% include reading_time.html content=content %}</div>
</div>
</header>
<section class="post-content">{{ content }}</section>

<section class="slice">
<div class="post-content container">{{ content }}</div>
</section>

</article>

<!-- Post navigation -->
Expand Down Expand Up @@ -54,14 +60,18 @@ <h1 class="title">{{ page.title }}</h1>

<!-- Disqus -->
{% if site.theme_settings.disqus_shortname %}
<div class="comments">
{% include disqus.html %}
</div>
<section class="slice">
<div class="container">
{% include disqus.html %}
</div>
</section>
{% endif %}

<!-- Muut -->
{% if site.theme_settings.muut_community_name %}
<div class="comments">
{% include muut.html %}
</div>
<section class="slice">
<div class="container">
{% include muut.html %}
</div>
</section>
{% endif %}
10 changes: 5 additions & 5 deletions _posts/2016-12-16-creer-bundle-symfony-autonome.md
Expand Up @@ -18,7 +18,7 @@ bundle autonome.

---

## Les étapes
### Les étapes
* [Bootstrap du projet](#bootstrap-du-projet)
* [Bundle minimal](#bundle-minimal)
* [Application embarquée](#application-embarquée)
Expand Down Expand Up @@ -182,7 +182,7 @@ On ajoute alors ces dossiers au `.gitignore`

## Utilisation autonome

#### Application console
### Application console

Pour pouvoir créer dans notre bundle autonome des commandes symfony, nous devons dans un premier temps ajouter en
dépendance de dev le composant symfony/console puis ajouter à notre application minimale le script console.
Expand Down Expand Up @@ -212,7 +212,7 @@ Nous pouvons maintenant lancer des commandes en utilisant la console.
php tests/App/console
```

#### Application web
### Application web

Maintenant que nous pouvant lancer des commandes, intéressons-nous au web.
Afin de pouvoir appeler un contrôleur, nous devons ajouter à notre application minimale un frontal web.
Expand Down Expand Up @@ -302,7 +302,7 @@ serveur web pour le développement.

## Tests

#### Tests unitaires
### Tests unitaires

Pour exécuter les tests unitaires sur notre projet, nous allons utiliser la librairie phpunit.

Expand Down Expand Up @@ -387,7 +387,7 @@ On lance ensuite la suite de test, qui nous affiche qu'un test et une assertion
./vendor/bin/phpunit
```

#### Tests fonctionnels
### Tests fonctionnels

Pour lancer les tests fonctionnels, nous allons encore une fois utiliser la librairie phpunit.

Expand Down
28 changes: 14 additions & 14 deletions _posts/2017-03-28-12-factor-app.md
Expand Up @@ -13,7 +13,7 @@ image:
height: 100
width: 100
---
# Qu'est-ce que le "12 Factor app"
## Qu'est-ce que le "12 Factor app"

Le "12 Factor app" est un manifeste qui propose 12 bonnes pratiques concernant le développement d'applications web.
Ce manifeste, écrit par Adam Wiggins (co-fondateur d'Heroku), est né de ses observations et de son expérience dans le
Expand All @@ -25,9 +25,9 @@ décisions de conception de haut niveau sans donner de détail sur l'implémenta
Dans ce post, nous allons parcourir ensemble ces 12 facteurs, en extraire le concept et tenter de l'appliquer au monde
PHP.

# L'application "12 Factor"
## L'application "12 Factor"

## I Base de code
### I Base de code

*__Une base de code suivie avec un système de contrôle de version, plusieurs déploiements__*

Expand All @@ -44,7 +44,7 @@ l'application.
La solution évidente pour mettre en oeuvre ce facteur, est l'utilisation d'un système de contrôle de version (VCS) pour
gérer les modifications apportées au référentiel central.

## II Dépendances
### II Dépendances

*__Déclarez explicitement et isolez les dépendances__*

Expand Down Expand Up @@ -73,7 +73,7 @@ La définition de ces dépendances se fait dans le fichier `composer.json` et le
librairies sont trackées dans le `composer.lock` afin d'installer exactement les mêmes versions sur tous les
déploiements.

## III Configuration
### III Configuration

*__Stockez la configuration dans l’environnement__*

Expand All @@ -98,7 +98,7 @@ En PHP, les valeurs de ces variables d'environnement peuvent être récupérées
Le framework Symfony va plus loin en transformant toutes les variables d'environnements commençant par `SYMFONY__` en
paramètre, utilisable dans la configuration de l'application.

## IV Services externes
### IV Services externes

*__Traitez les services externes comme des ressources attachées__*

Expand All @@ -114,7 +114,7 @@ données sont récupérées depuis la configuration de l'application.
Le switch d'une base de données locale à une base de données distante se fait par simple changement des informations de
connexion à celle-ci et le code permettant cette communication n'a pas besoin de subir de modifications.

## V Assemblez (build), publiez (releases), exécutez (run)
### V Assemblez (build), publiez (releases), exécutez (run)

*__Séparez strictement les étapes de build et d’exécution__*

Expand All @@ -140,7 +140,7 @@ fréquence.
Qui dit déploiements plus fréquents dit également boucle de feedback plus courte, permettant le développement d'un
meilleur logiciel et moins de stress lors des déploiements.

## VI Processus
### VI Processus

*__Exécutez l’application comme un ou plusieurs processus sans état__*

Expand All @@ -161,7 +161,7 @@ décroissants en termes de performance.
La scalabilité horizontale, d'autre part, est assez linéaire en termes de coût vs performance et permet d'être tolérant
aux pannes.

## VII Associations de ports
### VII Associations de ports

*__Exportez les services via des associations de ports__*

Expand Down Expand Up @@ -193,7 +193,7 @@ Cependant la documentation PHP nous met en garde concernant ce serveur web inté
Vous l'aurez compris, PHP ne permet pas de satisfaire ce point en conservant un mode de fonctionnement intégré au
serveur web et non l'inverse.

## VIII Concurrence
### VIII Concurrence

*__Grossissez à l’aide du modèle de processus__*

Expand All @@ -211,7 +211,7 @@ Enfin, la parallélisation offre une application plus rapide et réactive. La po
thread principal signifie que le serveur web n'a pas besoin d'attendre que les actions de fond se terminent avant
d'envoyer la réponse HTTP au client.

## IX Jetable
### IX Jetable

*__Maximisez la robustesse avec des démarrages rapides et des arrêts gracieux (graceful)__*

Expand All @@ -235,7 +235,7 @@ Bien que ce soit bien moins courant qu’un arrêt gracieux, cela peut arriver m
L’approche recommandée est l’utilisation d’un broker de message tel que RabbitMQ, capable de renvoyer les tâches dans la
file lorsqu’un client se déconnecte ou ne répond plus.

## X Parité dev/prod
### X Parité dev/prod

*__Gardez le développement, la validation et la production aussi proches que possible__*

Expand All @@ -256,7 +256,7 @@ mêmes outils.
Si le développeur utilise PHP 7.1 et Sqlite sur OS X, il augmente la probabilité d'avoir des comportement non prévus en
production.

## XI Logs
### XI Logs

*__Traitez les logs comme des flux d’événements__*

Expand All @@ -275,7 +275,7 @@ durée.
Le lieu d’archivage n’est pas visible et ne peut être configuré par l’application : ils sont complètements gérés par
l’environnement d’exécution.

## XII Processus d’administration
### XII Processus d’administration

*__Lancez les processus d’administration et de maintenance comme des one-off-processes__*

Expand Down
57 changes: 57 additions & 0 deletions _posts/2017-06-14-tests-artcle.md
@@ -0,0 +1,57 @@
---
layout: post
title: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
excerpt: Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
author: aveber
permalink: /fr/test-article/
categories:
- Dev Ops
tags:
- Dev Ops
image:
path: /assets/12app.png
height: 100
width: 100
---

## lorem ipsum dolor sit amet

### lorem ipsum dolor sit amet

#### lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


> #### bloquote
>
> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
>
> [exemple link](http://php.net/manual/fr/features.commandline.webserver.php)

- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit, sed do eiusmod tempor
- Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



```json
{
"name": "acme/standalone-bundle",
"description": "acme standalone bundle",
"type": "bundle",
"require": {},
"autoload": {
"psr-4": {
"Acme\StandaloneBundle\": "src/"
}
},
"autoload-dev": {
"psr-4": {
"Acme\StandaloneBundle\Tests\": "tests/"
}
}
}
```
69 changes: 69 additions & 0 deletions _sass/includes/_md-content.scss
@@ -0,0 +1,69 @@
.post-content {
@media (min-width: 480px) {
padding-top: 30px;
}

@media (max-width: 480px) {
padding-top: 10px;
}

h1, h2, h3, h4, h5, h6 {
font-family: $font-family-headings;
line-height: 1.1;

a {
color: $brand-black;
}

&:first-child {
margin-top: 0;
}
}

h1 {
@extend %h1;

@media (min-width: 480px) {
margin: 2em 0 0.7em -15px;
}

@media (max-width: 480px) {
margin: 2em 0 0.7em;
}
}

h2 {
@extend %h2;

@media (min-width: 480px) {
margin: 2em 0 0.7em -15px;
}

@media (max-width: 480px) {
margin: 2em 0 0.7em;
}
}

h3 {
@extend %h3;
margin: 0.7em 0;
}

h4 {
@extend %h4;
margin: 0.7em 0;
}

blockquote {
border-left: 5px solid $brand-yellow;
padding-left: 2rem;
font-style: italic;
margin: 3rem 0;
opacity: 0.8;
}

pre {
padding: 15px;
margin: 3rem 0;
}
}

0 comments on commit c42ca80

Please sign in to comment.