feat: sites.

overtrue · overtrue · commit 47e1724d5485 · 2022-09-30T16:15:36.000+08:00
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
@@ -10,8 +10,11 @@ html,
 body,
 #__nuxt {
   height: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-family: scandia-web, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;
 }
 
 body {
-  @apply bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-400;
+  @apply antialiased text-gray-700 bg-white dark:bg-neutral-800 dark:text-gray-400;
 }
diff --git a/components/CourseCard.vue b/components/CourseCard.vue
@@ -1,12 +1,12 @@
 <template>
   <content-card class="grid grid-cols-3 gap-6">
-    <nuxt-link :to="course.url"><img :src="course.image_url" class="bg-white border overflow-hidden rounded w-full object-cover" :alt="course.name" /></nuxt-link>
-    <div class="col-span-2 space-y-4 flex flex-col">
-      <nuxt-link :to="course.url" class="font-medium dark:text-gray-300">{{ course.name }}</nuxt-link>
+    <nuxt-link :to="course.url"><img :src="course.image_url" class="object-cover w-full overflow-hidden bg-white border rounded" :alt="course.name" /></nuxt-link>
+    <div class="flex flex-col col-span-2 space-y-4">
+      <nuxt-link :to="course.url" class="font-semibold dark:text-gray-300">{{ course.name }}</nuxt-link>
       <div class="text-sm text-gray-500">
         来自 <nuxt-link :to="course.author_url" class="text-indigo-900 dark:text-indigo-400">{{ course.author }}</nuxt-link>
       </div>
-      <nuxt-link :to="course.url" class="block w-full flex-1 text-gray-500 dark:text-neutral-400">
+      <nuxt-link :to="course.url" class="flex-1 block w-full text-gray-500 dark:text-neutral-400">
         {{ course.introduction }}
       </nuxt-link>
     </div>
diff --git a/components/DocCard.vue b/components/DocCard.vue
@@ -1,13 +1,13 @@
 <template>
   <nuxt-link :to="doc.url">
     <content-card class="flex gap-6">
-      <div class="rounded p-2 w-12 h-12 grid place-content-center" :class="doc.color">
-        <img v-if="doc.logo_url" :src="doc.logo_url" :alt="doc.name" class="h-6 w-6" />
-        <div v-else class="rounded-full h-6 w-6 bg-opacity-75 bg-white"></div>
+      <div class="grid w-12 h-12 p-2 rounded place-content-center" :class="doc.color">
+        <img v-if="doc.logo_url" :src="doc.logo_url" :alt="doc.name" class="w-6 h-6" />
+        <div v-else class="w-6 h-6 bg-white bg-opacity-75 rounded-full"></div>
       </div>
       <div>
-        <div class="dark:text-neutral-300 font-medium">{{ doc.name }}</div>
-        <div class="text-neutral-400 text-sm">{{ doc.introduction }}</div>
+        <div class="font-medium dark:text-neutral-300">{{ doc.name }}</div>
+        <div class="h-12 text-sm text-gray-500">{{ doc.introduction }}</div>
       </div>
     </content-card>
   </nuxt-link>
diff --git a/components/SiteCard.vue b/components/SiteCard.vue
@@ -0,0 +1,43 @@
+<template>
+  <nuxt-link :to="site.url">
+    <content-card class="space-y-4">
+      <div class="flex items-center justify-between gap-6">
+        <div>
+          <div class="font-semibold dark:text-neutral-300">{{ site.name }}</div>
+          <a :href="site.url" class="text-sm text-gray-500" target="_blank">{{ site.url }}</a>
+        </div>
+        <div
+          class="flex items-center justify-center w-20 h-20 p-4 bg-gray-200 bg-opacity-75 rounded-full place-content-center"
+          :style="site.logo_bg_color ? `background: ${site.logo_bg_color}` : '#fff'"
+        >
+          <img v-if="site.logo_url" :src="site.logo_url" :alt="site.name" class="object-scale-down" />
+          <div v-else class="w-full h-full">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12.75 3.03v.568c0 .334.148.65.405.864l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 01-1.161.886l-.143.048a1.107 1.107 0 00-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 01-1.652.928l-.679-.906a1.125 1.125 0 00-1.906.172L4.5 15.75l-.612.153M12.75 3.031a9 9 0 00-8.862 12.872M12.75 3.031a9 9 0 016.69 14.036m0 0l-.177-.529A2.25 2.25 0 0017.128 15H16.5l-.324-.324a1.453 1.453 0 00-2.328.377l-.036.073a1.586 1.586 0 01-.982.816l-.99.282c-.55.157-.894.702-.8 1.267l.073.438c.08.474.49.821.97.821.846 0 1.598.542 1.865 1.345l.215.643m5.276-3.67a9.012 9.012 0 01-5.276 3.67m0 0a9 9 0 01-10.275-4.835M15.75 9c0 .896-.393 1.7-1.016 2.25"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div class="h-24 text-sm text-neutral-500">{{ site.description }}</div>
+      <div class="flex items-center gap-2" v-if="site.tags && site.tags.length">
+        <div class="px-2 py-1 leading-4 text-white bg-gray-600 rounded" v-for="tag in site.tags">
+          {{ tag }}
+        </div>
+      </div>
+    </content-card>
+  </nuxt-link>
+</template>
+<script lang="ts">
+export default {
+  props: {
+    site: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/components/StarCard.vue b/components/StarCard.vue
@@ -1,20 +1,20 @@
 <template>
   <content-card class="relative">
-    <NuxtLink class="block text-center h-48 cursor-pointer" :to="star.html_url">
-      <img :src="star.avatar_url" alt="" class="rounded-full h-32 w-32 my-4 mx-auto" />
-      <h3 class="text-xl font-medium text-gray-700 dark:text-gray-300 m-0">{{ star.name }}</h3>
-      <p class="text-neutral-400 line-clamp-2 text-sm overflow-hidden">{{ star.introduction || star.bio || '' }}</p>
+    <NuxtLink class="block h-48 text-center cursor-pointer" :to="star.html_url">
+      <img :src="star.avatar_url" alt="" class="w-32 h-32 mx-auto my-4 rounded-full" />
+      <h3 class="m-0 text-xl font-semibold text-gray-700 dark:text-gray-300">{{ star.name }}</h3>
+      <p class="mt-2 overflow-hidden text-sm text-gray-500 line-clamp-2">{{ star.introduction || star.bio || '' }}</p>
     </NuxtLink>
     <div class="flex justify-center mt-8">
-      <div class="text-gray-500 flex space-x-1">
+      <div class="flex space-x-1 text-gray-500">
         <a
           v-if="star.twitter_id"
           :href="`https://twitter.com/${star.twitter_id}`"
-          class="hover:bg-neutral-300 hover:text-gray-700 dark:hover:bg-neutral-800 text-gray-400 dark:text-gray-500 hover:dark:text-gray-300 rounded-full p-2 flex items-center justify-center"
+          class="flex items-center justify-center p-2 text-gray-400 rounded-full hover:bg-neutral-300 hover:text-gray-700 dark:hover:bg-neutral-800 dark:text-gray-500 hover:dark:text-gray-300"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="icon h-6 w-6"
+            class="w-6 h-6 icon"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
@@ -30,11 +30,11 @@
         </a>
         <a
           :href="star.html_url"
-          class="hover:bg-neutral-300 hover:text-gray-700 dark:hover:bg-neutral-800 text-gray-400 dark:text-gray-500 hover:dark:text-gray-300 rounded-full p-2 flex items-center justify-center"
+          class="flex items-center justify-center p-2 text-gray-500 rounded-full hover:bg-neutral-300 hover:text-gray-700 dark:hover:bg-neutral-800 dark:text-gray-500 hover:dark:text-gray-300"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="icon h-6 w-6"
+            class="w-6 h-6 icon"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
diff --git a/components/TheNavbar.vue b/components/TheNavbar.vue
@@ -8,8 +8,8 @@
               href="/"
               class="flex items-center space-x-2 text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-600 dark:hover:text-gray-300"
             >
-              <h1 class="text-3xl leading-none m-0">Laravel</h1>
-              <span class="bg-blue-500 text-white text-sm px-2 py-1 rounded rounded-bl-none">小宇宙</span>
+              <h1 class="m-0 text-3xl leading-none">Laravel</h1>
+              <span class="px-2 py-1 text-sm text-white bg-blue-500 rounded rounded-bl-none">小宇宙</span>
             </a>
           </div>
 
@@ -31,7 +31,7 @@
         <div class="flex-1 md:flex md:items-center md:justify-between">
           <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
             <the-nav-item to="/courses">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -41,7 +41,7 @@
               <span>教程</span>
             </the-nav-item>
             <the-nav-item to="/docs">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -51,7 +51,7 @@
               <span>文档</span>
             </the-nav-item>
             <the-nav-item to="/stars">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -61,7 +61,7 @@
               <span>人物</span>
             </the-nav-item>
             <the-nav-item to="/packages">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -70,11 +70,21 @@
               </svg>
               <span>扩展包</span>
             </the-nav-item>
+            <the-nav-item to="/sites">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59"
+                />
+              </svg>
+              <span>网站</span>
+            </the-nav-item>
             <!-- <the-nav-item
               to="/jobs"
 
             >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
@@ -89,7 +99,7 @@
             <a href="https://github.com/overtrue/laravel.xyz" class="text-gray-600 dark:text-neutral-300 hover:text-gray-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-200">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="icon h-6 w-6"
+                class="w-6 h-6 icon"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
@@ -106,7 +116,7 @@
             <a href="https://twitter.com/overtrue666" class="text-gray-600 dark:text-neutral-300 hover:text-gray-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-200">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                class="icon h-6 w-6"
+                class="w-6 h-6 icon"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
diff --git a/content/sites.json b/content/sites.json
@@ -0,0 +1,84 @@
+[
+  {
+    "name": "Laravel Bootcamp",
+    "url": "https://bootcamp.laravel.com/",
+    "description": "Together let's walk through building and deploying a modern Laravel application from scratch.",
+    "tags": ["course", "tutorials"],
+    "logo_url": "https://bootcamp.laravel.com/img/logomark.min.svg"
+  },
+  {
+    "name": "Laravel News",
+    "url": "https://laravel-news.com",
+    "description": "Laravel News is a community driven portal and newsletter aggregating all of the latest and most important news in the Laravel ecosystem, including new package releases and tutorials.",
+    "tags": ["news"],
+    "logo_url": "https://laravelnews.imgix.net/laravel-news__logo.png?dpr=2&ixlib=php-3.3.1"
+  },
+  {
+    "name": "Laracasts",
+    "url": "https://laracasts.com",
+    "description": "Laracasts is a video tutorial website for web developers. It features over 1,000 videos on a variety of topics, including PHP, Laravel, JavaScript, and more.",
+    "tags": ["tutorials", "videos"],
+    "logo_url": "https://assets.laracasts.com/images/logo.svg"
+  },
+  {
+    "name": "Laravel.io",
+    "url": "https://laravel.io",
+    "description": "Laravel.io is a community portal for Laravel developers. It features a forum, job board, and a list of useful resources.",
+    "tags": ["community"],
+    "logo_url": "https://laravel.io/images/laravelio-logo.svg"
+  },
+  {
+    "name": "Laracasts Forum",
+    "url": "https://laracasts.com/discuss",
+    "description": "Laracasts is a video tutorial website for web developers. It features over 1,000 videos on a variety of topics, including PHP, Laravel, JavaScript, and more.",
+    "tags": ["community", "videos"],
+    "logo_url": "https://assets.laracasts.com/images/logo.svg"
+  },
+  {
+    "name": "Laravel Podcast",
+    "url": "https://laravelpodcast.com",
+    "description": "The Laravel Podcast is a weekly podcast about the Laravel PHP framework. It features interviews with the creators of Laravel and other Laravel community members.",
+    "tags": ["podcast"]
+  },
+  {
+    "name": "Laravel Daily",
+    "url": "https://laraveldaily.com",
+    "description": "Laravel Daily is a blog that publishes articles about Laravel and other PHP frameworks. It also features a newsletter with the latest news in the Laravel ecosystem.",
+    "tags": ["news", "tutorials"],
+    "logo_url": "https://laraveldaily.com/img/logos/mono.svg",
+    "logo_bg_color": "#2563eb"
+  },
+  {
+    "name": "Learnku",
+    "url": "https://learnku.com",
+    "description": "Learnku is a Chinese community portal for Laravel developers. It features a forum, job board, and a list of useful resources.",
+    "tags": ["community"],
+    "logo_url": "https://cdn.learnku.com/uploads/images/201901/24/1/OyBnfB2vlk.png!/both/100x100"
+  },
+  {
+    "name": "Larajobs",
+    "url": "https://larajobs.com",
+    "description": "Larajobs is a job board for Laravel developers. It features jobs from companies all over the world.",
+    "tags": ["jobs"],
+    "logo_url": "https://larajobs.com/img/logo.svg"
+  },
+  {
+    "name": "Laravel Gurus",
+    "url": "https://laravelgurus.com",
+    "description": "Laravel Gurus is a job board for Laravel developers. It features jobs from companies all over the world.",
+    "tags": ["jobs"]
+  },
+  {
+    "name": "Laravel Playground",
+    "url": "https://laravelplayground.com",
+    "description": "Run and embed PHP code in your browser.",
+    "tags": ["tools"]
+  },
+  {
+    "name": "Laravel Tricks",
+    "url": "https://laravel-tricks.com",
+    "description": "Laravel tricks is a website that aggregates useful tips and tricks for Laravel PHP framework",
+    "tags": ["tricks", "tutorials"],
+    "logo_url": "https://laravel-tricks.com/svg/logo.svg"
+  }
+]
diff --git a/pages/index.vue b/pages/index.vue
diff --git a/pages/sites.vue b/pages/sites.vue
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,11 @@ html,`
`10`	`10`	`body,`
`11`	`11`	`#__nuxt {`
`12`	`12`	`height: 100%;`
	`13`	`+ -webkit-text-size-adjust: 100%;`
	`14`	`+ font-family: scandia-web, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,`
	`15`	`+ Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji !important;`
`13`	`16`	`}`
`14`	`17`
`15`	`18`	`body {`
`16`		`- @apply bg-white dark:bg-neutral-800 text-gray-700 dark:text-gray-400;`
	`19`	`+ @apply antialiased text-gray-700 bg-white dark:bg-neutral-800 dark:text-gray-400;`
`17`	`20`	`}`