Update fonts

composer.json

@@ -31,6 +31,7 @@
     "sentry/sentry-laravel": "^2.10",
     "socialiteproviders/twitter": "^4.1",
     "spatie/laravel-feed": "^4.1",
+    "spatie/laravel-google-fonts": "^1.2",
     "spatie/laravel-health": "^1.11",
     "spatie/laravel-medialibrary": "^9.0.0",
     "spatie/laravel-permission": "^5.1",

config/google-fonts.php

@@ -0,0 +1,44 @@
+<?php
+
+return [
+
+    /*
+     * Here you can register fonts to call from the @googlefonts Blade directive.
+     * The google-fonts:fetch command will prefetch these fonts.
+     */
+    'fonts' => [
+        'default' => 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lexend:wght@700&family=JetBrains+Mono',
+    ],
+
+    /*
+     * This disk will be used to store local Google Fonts. The public disk
+     * is the default because it can be served over HTTP with storage:link.
+     */
+    'disk' => 'public',
+
+    /*
+     * Prepend all files that are written to the selected disk with this path.
+     * This allows separating the fonts from other data in the public disk.
+     */
+    'path' => 'fonts',
+
+    /*
+     * By default, CSS will be inlined to reduce the amount of round trips
+     * browsers need to make in order to load the requested font files.
+     */
+    'inline' => true,
+
+    /*
+     * When something goes wrong fonts are loaded directly from Google.
+     * With fallback disabled, this package will throw an exception.
+     */
+    'fallback' => ! env('APP_DEBUG'),
+
+    /*
+     * This user agent will be used to request the stylesheet from Google Fonts.
+     * This is the Safari 14 user agent that only targets modern browsers. If
+     * you want to target older browsers, use different user agent string.
+     */
+    'user_agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15',
+
+];

config/markdown.php

@@ -10,7 +10,6 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-use League\CommonMark\Extension\Attributes\AttributesExtension;
 use League\CommonMark\Extension\HeadingPermalink\HeadingPermalinkExtension;
 use League\CommonMark\Extension\Mention\MentionExtension;
 use Torchlight\Commonmark\V2\TorchlightExtension;
@@ -53,10 +52,24 @@
         League\CommonMark\Extension\Table\TableExtension::class,
         HeadingPermalinkExtension::class,
         MentionExtension::class,
-        AttributesExtension::class,
         TorchlightExtension::class,
     ],
 
+    'heading_permalink' => [
+        'html_class' => 'anchor mr-2 !text-skin-primary !no-underline hover:!text-skin-primary-hover focus:!text-skin-primary-hover focus:outline-none',
+        'fragment_prefix' => '',
+        'id_prefix' => '',
+        'symbol' => '#',
+    ],
+
+    'mentions' => [
+        'username' => [
+            'prefix' => '@',
+            'pattern' => '[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}(?!\w)',
+            'generator' => config('app.url').'/user/%s',
+        ],
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Renderer Configuration
@@ -78,20 +91,6 @@
         'soft_break' => "\n",
     ],
 
-    'heading_permalink' => [
-        'html_class' => 'anchor !text-skin-primary !no-underline hover:!text-skin-primary-hover focus:!text-skin-primary-hover focus:outline-none',
-        'symbol' => '',
-        'aria_hidden' => true,
-    ],
-
-    'mentions' => [
-        'username' => [
-            'prefix' => '@',
-            'pattern' => '[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}(?!\w)',
-            'generator' => config('app.url').'/user/%s',
-        ],
-    ],
-
     /*
     |--------------------------------------------------------------------------
     | Commonmark Configuration
@@ -128,7 +127,7 @@
     |
     */
 
-    'html_input' => 'strip',
+    'html_input' => 'allow',
 
     /*
     |--------------------------------------------------------------------------

config/torchlight.php

@@ -22,7 +22,7 @@
     // We replace tabs in your code blocks with spaces in HTML. Set
     // the number of spaces you'd like to use per tab. Set to
     // `false` to leave literal tabs in the HTML.
-    'tab_width' => 2,
+    'tab_width' => 4,
 
     // Global options to control blocks-level settings.
     // https://torchlight.dev/docs/options

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=3bd7a17ae8879cea08888521628605ff",
-    "/css/app.css": "/css/app.css?id=e5333661248309db13cc47adc52e25de"
+    "/css/app.css": "/css/app.css?id=965b827a53b8849b3917cf5832b0d9a8"
 }

resources/css/app.css

@@ -104,11 +104,13 @@
   }
 }
 
-html {
-  scroll-behavior: smooth;
+[x-cloak] {
+  display: none !important;
 }
 
-[x-cloak] { display: none !important; }
+.prose iframe {
+  @apply w-full;
+}
 
 .logo-dark {
   display: none;

resources/css/torchlight.css

@@ -3,7 +3,7 @@
  overflow-x-auto is recommended.
 */
 pre {
-  @apply my-4 rounded overflow-x-auto font-mono text-lg;
+  @apply my-4 rounded overflow-x-auto;
   padding: 0 !important;
 }
 
@@ -14,16 +14,14 @@ pre {
  colors extend edge to edge.
 */
 pre code.torchlight {
-  @apply block p-4 min-w-max font-mono;
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+  @apply block py-4 min-w-max;
 }
 
 /*
  Horizontal line padding.
 */
 pre code.torchlight .line {
-  @apply px-4 font-normal;
+  @apply px-4;
 }
 
 /*
@@ -33,6 +31,7 @@ pre code.torchlight .line {
 pre code.torchlight .line-number,
 pre code.torchlight .summary-caret {
   @apply mr-4;
+  user-select: none;
 }
 
 .torchlight.has-focus-lines .line:not(.line-focus) {

resources/views/about.blade.php

@@ -27,23 +27,23 @@
                 <dt class="order-2 mt-2 text-lg leading-6 font-medium text-green-900">
                     Membres sur Slack
                 </dt>
-                <dd class="order-1 text-5xl font-extrabold text-green-600 font-sans">
+                <dd class="order-1 text-5xl font-extrabold text-green-600 font-heading">
                     +300
                 </dd>
             </div>
             <div class="flex flex-col p-6 text-center sm:p-10">
                 <dt class="order-2 mt-2 text-lg leading-6 font-medium text-green-900">
                     Membres sur Telegram
                 </dt>
-                <dd class="order-1 text-5xl font-extrabold text-green-600 font-sans">
+                <dd class="order-1 text-5xl font-extrabold text-green-600 font-heading">
                     +100
                 </dd>
             </div>
             <div class="flex flex-col p-6 text-center sm:p-10">
                 <dt class="order-2 mt-2 text-lg leading-6 font-medium text-green-900">
                     Membres sur WhatsApp
                 </dt>
-                <dd class="order-1 text-5xl font-extrabold text-green-600 font-sans">
+                <dd class="order-1 text-5xl font-extrabold text-green-600 font-heading">
                     +250
                 </dd>
             </div>
@@ -53,7 +53,7 @@
     <div class="py-8 sm:py-10 lg:py-12">
         <h1 class="font-sans text-skin-inverted">
             <span class="block text-sm font-semibold text-skin-primary sm:text-base lg:text-sm xl:text-base">Notre histoire</span>
-            <span class="mt-1 block text-xl tracking-tight font-extrabold sm:text-2xl xl:text-3xl">
+            <span class="mt-1 block text-xl tracking-tight font-extrabold font-heading sm:text-2xl xl:text-3xl">
                 Nous commençons tout juste
             </span>
         </h1>
@@ -96,8 +96,8 @@
             <div class="space-y-12 lg:grid lg:grid-cols-3 lg:gap-24 lg:space-y-0">
                 <div class="font-sans">
                     <span class="text-sm leading-5 text-skin-primary font-semibold tracking-wide uppercase">Notre équipe</span>
-                    <h2 class="mt-2 text-2xl font-extrabold text-skin-inverted tracking-tight sm:text-3xl">Équipe de direction</h2>
-                    <p class="mt-5 text-lg text-skin-base font-mono font-normal">Laravel Cameroun est une idée qui a été initiée puis transformée en une communauté par 2 développeurs parmi les plus influents au Cameroun.</p>
+                    <h2 class="mt-2 text-2xl font-extrabold font-heading text-skin-inverted tracking-tight sm:text-3xl">Équipe de direction</h2>
+                    <p class="mt-5 text-lg text-skin-base">Laravel Cameroun est une idée qui a été initiée puis transformée en une communauté par 2 développeurs parmi les plus influents au Cameroun.</p>
                 </div>
                 <div class="lg:col-span-2">
                     <ul role="list" class="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:gap-x-8">

resources/views/articles/show.blade.php

@@ -14,7 +14,7 @@
         <div class="hidden relative lg:block lg:col-span-2">
             <div class="divide-y divide-skin-base sticky space-y-6 top-4">
                 <div>
-                    <h4 class="text-xs text-skin-base font-medium leading-4 tracking-wide uppercase">A propos de l’auteur</h4>
+                    <h4 class="text-xs text-skin-base font-medium leading-4 tracking-wide uppercase font-heading">A propos de l’auteur</h4>
                     <div class="mt-6 space-y-4">
                         <a href="{{ route('profile', $author->username) }}" class="shrink-0 block">
                             <div class="flex items-center">
@@ -110,7 +110,7 @@
                         <span>{{ $article->readTime() }} min de lecture</span>
                     </div>
                 </div>
-                <h1 class="text-2xl font-extrabold text-skin-inverted tracking-tight font-sans sm:text-3xl sm:leading-10 md:text-4xl lg:text-5xl lg:leading-[3.5rem]">{{ $article->title }}</h1>
+                <h1 class="text-2xl font-extrabold text-skin-inverted tracking-tight font-heading sm:text-3xl sm:leading-10 md:text-4xl lg:text-5xl lg:leading-[3.5rem]">{{ $article->title }}</h1>
                 <a href="{{ route('profile', $article->author->username) }}" class="mt-3 shrink-0 group block lg:hidden">
                     <div class="flex items-center">
                         <div>
@@ -147,7 +147,7 @@ class="mt-8 prose prose-lg prose-green text-skin-base mx-auto md:prose-xl lg:max
                                 <p class="text-sm font-medium text-skin-inverted">
                                     {{ $author->name }}
                                 </p>
-                                <p class="text-xs font-medium text-skin-muted font-mono">
+                                <p class="text-xs font-medium text-skin-muted">
                                     {{ '@' . $author->username }}
                                 </p>
                             </div>

resources/views/auth/forgot-password.blade.php

@@ -9,10 +9,10 @@
             <div>
                 <x-status-message class="mb-5" />
 
-                <h2 class="text-center text-3xl font-extrabold text-skin-inverted font-sans sm:text-left font-mono">
+                <h2 class="text-center text-3xl font-extrabold text-skin-inverted font-sans sm:text-left font-heading">
                     {{ __('Réinitialisation du mot de passe') }}
                 </h2>
-                <div class="mt-4 text-sm text-skin-base font-normal">
+                <div class="mt-4 text-sm text-skin-base">
                     {{ __('Mot de passe oublié? Aucun problème. Communiquez-nous simplement votre adresse e-mail et nous vous enverrons par e-mail un lien de réinitialisation de mot de passe qui vous permettra d\'en choisir un nouveau.') }}
                 </div>
             </div>

resources/views/auth/login.blade.php

@@ -7,7 +7,7 @@
     <div class="flex items-center justify-center min-h-full py-16 sm:py-24">
         <div class="max-w-md w-full space-y-8">
             <div>
-                <h2 class="text-center text-3xl font-extrabold text-skin-inverted font-mono">
+                <h2 class="text-center text-3xl font-extrabold text-skin-inverted font-heading">
                     {{ __('Se connecter à son compte') }}
                 </h2>
             </div>

resources/views/auth/register.blade.php

@@ -58,16 +58,15 @@
         </div>
         <div class="mx-auto max-w-md lg:mx-0 space-y-8">
             <div class="space-y-3">
-                <h2 class="text-center text-3xl font-extrabold text-skin-inverted font-mono">
+                <h2 class="text-3xl font-extrabold text-skin-inverted font-heading">
                     {{ __('Rejoindre Laravel Cameroun') }}
                 </h2>
                 <x-profile-users />
-                <p class="text-center text-sm text-skin-base font-normal">
+                <p class="text-base leading-6 text-skin-base">
                     {{ __("Rejoignez plus de 200 développeurs et designers. Parce qu’il y’a pas que le code dans la vie.") }}
                 </p>
             </div>
             <div>
-
                 <x-status-message />
 
                 <form class="space-y-6" action="{{ route('register') }}" method="POST">