Basic code component abstraction

livewire · May 16, 2019 · 7d16567 · 7d16567
1 parent d7ba1ee
commit 7d16567
Show file tree

Hide file tree

Showing 30 changed files with 19,448 additions and 16,745 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+GITHUB_TOKEN=14499cb3589ed4f2a87455e95796cd847fe33d85
diff --git a/bootstrap.php b/bootstrap.php
@@ -18,4 +18,3 @@
  */
 
 $events->afterBuild(GenerateSitemap::class);
-
diff --git a/composer.json b/composer.json
@@ -15,7 +15,8 @@
     },
     "autoload": {
         "psr-4": {
-            "App\\Listeners\\": "listeners/"
+            "App\\Listeners\\": "listeners/",
+            "App\\Parsers\\": "parsers/"
         }
     }
-}
+}
diff --git a/composer.lock b/composer.lock
diff --git a/navigation.php b/navigation.php
@@ -1,6 +1,7 @@
 <?php
 
 return [
+    'Quickstart' => 'docs/quickstart',
     'Getting Started' => [
         'url' => 'docs/getting-started',
         'children' => [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,13 +14,13 @@
         "docsearch.js": "^2.6.2",
         "extra-watch-webpack-plugin": "^1.0.3",
         "hasbin": "^1.2.3",
-        "highlight.js": "^9.13.1",
+        "highlight.js": "^9.15.6",
         "laravel-mix": "^4.0.0",
         "laravel-mix-purgecss": "^3.0.0",
         "node-cmd": "^3.0.0",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
-        "tailwindcss": "^0.7.2",
+        "tailwindcss": "^1.0.1",
         "vue-template-compiler": "^2.5.21",
         "yargs": "^4.6.0"
     }

diff --git a/source/404.blade.php b/source/404.blade.php
@@ -1,7 +1,7 @@
 @extends('_layouts.master')
 
 @section('body')
-<div class="flex flex-col items-center mt-32 text-grey-darker">
+<div class="flex flex-col items-center mt-32 text-gray-700">
     <h1 class="text-6xl font-light leading-none mb-2">404</h1>
 
     <h2 class="text-3xl">Page not found</h2>

diff --git a/source/_assets/sass/_base.scss b/source/_assets/sass/_base.scss
@@ -5,26 +5,26 @@ body {
 a {
     @apply .font-semibold;
     @apply .no-underline;
-    @apply .text-blue-dark;
+    @apply .text-blue-700;
 
     &:hover {
-        @apply .text-blue-darker;
+        @apply .text-blue-800;
     }
 }
 
 blockquote {
-    @apply .border-blue-light;
+    @apply .border-blue-300;
     @apply .border-l-4;
     @apply .font-normal;
     @apply .italic;
     @apply .my-8;
     @apply .pl-6;
-    @apply .text-grey-darker;
+    @apply .text-gray-500;
     @apply .text-lg;
 }
 
 code {
-    @apply .bg-grey-light;
+    @apply .bg-gray-300;
     @apply .px-2;
     @apply .py-px;
     @apply .rounded;
@@ -39,7 +39,6 @@ code.hljs {
     .hljs-keyword,
     .hljs-meta {
         @apply .font-normal;
-        @apply .roman;
     }
 }
 
@@ -52,7 +51,8 @@ h6 {
     @apply .leading-tight;
     @apply .mb-4;
     @apply .mt-8;
-    @apply .text-black;
+    @apply .text-blue-900;
+    @apply .font-display;
 
     &:first-child {
         @apply .mt-0;
@@ -69,6 +69,19 @@ h2 {
     @apply .text-4xl;
 }
 
+h2::before {
+    content: " ";
+    @apply block;
+    @apply bg-gray-400;
+    @apply w-full;
+    height: 1px;
+    @apply mb-8;
+}
+
+h2:first-child::before {
+    @apply hidden;
+}
+
 h3 {
     @apply .font-bold;
     @apply .text-3xl;
@@ -91,7 +104,7 @@ h6 {
 
 hr {
     @apply .border-b;
-    @apply .border-blue-lighter;
+    @apply .border-blue-400;
     @apply .my-12;
     @apply .rounded-full;
 }
@@ -113,13 +126,12 @@ p {
 }
 
 pre {
-    @apply .bg-grey-lighter;
+    @apply .bg-gray-100;
     @apply .leading-loose;
     @apply .my-6;
     @apply .overflow-x-auto;
     @apply .p-4;
     @apply .rounded;
-    @apply .shadow;
     @apply .text-base;
 
     code {

diff --git a/source/_assets/sass/_navigation.scss b/source/_assets/sass/_navigation.scss
@@ -1,7 +1,7 @@
 .nav-menu {
     @apply .-mt-12;
     @apply .-mx-8;
-    @apply .bg-grey-lighter;
+    @apply .bg-gray-400;
     @apply .mb-8;
     @apply .pb-4;
     @apply .pt-8;
@@ -25,10 +25,9 @@
 
 .nav-menu__item {
     @apply .block;
-    @apply .list-reset;
     @apply .no-underline;
     @apply .mb-3;
     @apply .mt-0;
-    @apply .text-grey-darkest;
+    @apply .text-blue-900;
     @apply .text-sm;
 }
diff --git a/source/_assets/sass/_search.scss b/source/_assets/sass/_search.scss
@@ -19,9 +19,9 @@
     &__wrapper {
         @apply absolute;
         @apply bg-white;
-        @apply mt-7;
-        @apply pin-l;
-        @apply pin-t;
+        @apply mt-6;
+        @apply left-0;
+        @apply top-0;
         @apply px-4;
         @apply w-full;
         @apply z-10;

diff --git a/source/_assets/sass/main.scss b/source/_assets/sass/main.scss
@@ -1,4 +1,4 @@
-@tailwind preflight;
+@tailwind base;
 @tailwind components;
 
 // Code syntax highlighting,

diff --git a/source/_layouts/documentation.blade.php b/source/_layouts/documentation.blade.php
@@ -5,7 +5,7 @@
 @endsection
 
 @section('body')
-<section class="container max-w-4xl mx-auto px-6 md:px-8 py-4">
+<section class="container mx-auto px-6 md:px-8 py-4">
     <div class="flex flex-col lg:flex-row">
         <nav id="js-nav-menu" class="nav-menu hidden lg:block">
             @include('_nav.menu', ['items' => $page->navigation])

diff --git a/source/_layouts/master.blade.php b/source/_layouts/master.blade.php
@@ -39,14 +39,12 @@
         @endif
     </head>
 
-    <body class="flex flex-col justify-between min-h-screen bg-grey-lightest text-grey-darkest leading-normal font-sans">
-        <header class="flex items-center shadow bg-white border-b h-24 mb-8 py-4" role="banner">
-            <div class="container flex items-center max-w-4xl mx-auto px-4 lg:px-8">
+    <body class="flex flex-col justify-between min-h-screen bg-gray-200 text-gray-800 leading-normal font-sans">
+        <header class="flex items-center h-24 mb-8 py-4" role="banner">
+            <div class="container flex items-center mx-auto px-4 lg:px-8">
                 <div class="flex items-center">
                     <a href="/" title="{{ $page->siteName }} home" class="inline-flex items-center">
                         <img class="h-8 md:h-10 mr-3" src="/assets/img/logo.svg" alt="{{ $page->siteName }} logo" />
-
-                        <h1 class="text-lg md:text-2xl text-blue-darkest font-semibold hover:text-blue-dark my-0 pr-4">{{ $page->siteName }}</h1>
                     </a>
                 </div>
 
@@ -69,7 +67,7 @@
         @stack('scripts')
 
         <footer class="bg-white text-center text-sm mt-12 py-4" role="contentinfo">
-            <ul class="flex flex-col md:flex-row justify-center list-reset">
+            <ul class="flex flex-col md:flex-row justify-center">
                 <li class="md:mr-2">
                     &copy; <a href="https://tighten.co" title="Tighten website">Tighten</a> {{ date('Y') }}.
                 </li>

diff --git a/source/_nav/menu-item.blade.php b/source/_nav/menu-item.blade.php
@@ -1,14 +1,14 @@
-<li class="list-reset pl-4">
+<li class="pl-4">
     @if ($url = is_string($item) ? $item : $item->url)
         {{-- Menu item with URL--}}
         <a href="{{ $page->url($url) }}"
-            class="{{ 'lvl' . $level }} {{ $page->isActiveParent($item) ? 'lvl' . $level . '-active' : '' }} {{ $page->isActive($url) ? 'active font-semibold text-blue' : '' }} nav-menu__item hover:text-blue"
+            class="{{ 'lvl' . $level }} {{ $page->isActiveParent($item) ? 'lvl' . $level . '-active' : '' }} {{ $page->isActive($url) ? 'active font-semibold text-blue-600' : '' }} nav-menu__item hover:text-blue-600"
         >
             {{ $label }}
         </a>
     @else
         {{-- Menu item without URL--}}
-        <p class="nav-menu__item text-grey-dark">{{ $label }}</p>
+        <p class="nav-menu__item text-gray-dark">{{ $label }}</p>
     @endif
 
     @if (! is_string($item) && $item->children)

diff --git a/source/_nav/menu.blade.php b/source/_nav/menu.blade.php
@@ -1,6 +1,6 @@
 @php $level = $level ?? 0 @endphp
 
-<ul class="list-reset my-0">
+<ul class="my-0">
     @foreach ($items as $label => $item)
         @include('_nav.menu-item')
     @endforeach

diff --git a/source/_nav/search-input.blade.php b/source/_nav/search-input.blade.php
@@ -1,7 +1,7 @@
 <button
     title="Start searching"
     type="button"
-    class="flex md:hidden bg-grey-lightest hover:bg-blue-lightest justify-center items-center border border-grey rounded-full focus:outline-none h-10 px-3"
+    class="flex md:hidden bg-gray-100 hover:bg-blue-100 justify-center items-center border border-gray rounded-full focus:outline-none h-10 px-3"
     onclick="searchInput.toggle()"
 >
     <img src="/assets/img/magnifying-glass.svg" alt="search icon" class="h-4 w-4 max-w-none">
@@ -12,14 +12,14 @@ class="flex md:hidden bg-grey-lightest hover:bg-blue-lightest justify-center ite
 
     <input
         id="docsearch-input"
-        class="docsearch-input relative block h-10 transition-fast w-full lg:w-1/2 xl:w-1/3 bg-grey-lightest outline-none rounded-full text-grey-darker border border-grey focus:border-blue-light ml-auto px-4 pb-0"
+        class="docsearch-input relative block h-10 transition-fast w-full lg:w-1/2 xl:w-1/3 bg-gray-100 outline-none rounded-full text-gray-700 border border-gray focus:border-blue-400 ml-auto px-4 pb-0"
         name="docsearch"
         type="text"
         placeholder="Search"
     >
 
     <button
-        class="md:hidden absolute pin-t pin-r h-full font-light text-3xl text-blue hover:text-blue-dark focus:outline-none -mt-px pr-7"
+        class="md:hidden absolute pin-t pin-r h-full font-light text-3xl text-blue hover:text-blue-600 focus:outline-none -mt-px pr-7"
         onclick="searchInput.toggle()"
     >&times;</button>
 </div>

diff --git a/source/_partials/code.blade.php b/source/_partials/code.blade.php
@@ -0,0 +1 @@
+<pre><code class="language-{{ $lang ?? 'html' }}">{{ e($slot) }}</code></pre>