Merge pull request #60 from laravelcm/update-fonts

Update fonts

Author: mckenziearts

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",

composer.lock

@@ -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/google-fonts.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/markdown.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

config/torchlight.php

@@ -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"
 }

public/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;

public/mix-manifest.json

@@ -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/css/app.css

@@ -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">