Update dependencies

skerkour · Dec 15, 2023 · a431ac2 · a431ac2
1 parent 859f013
commit a431ac2
Show file tree

Hide file tree

Showing 14 changed files with 530 additions and 2,692 deletions.
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/workers_hono_neon/package-lock.json b/examples/workers_hono_neon/package-lock.json
diff --git a/examples/workers_hono_planetscale/package-lock.json b/examples/workers_hono_planetscale/package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/phoenix-api/src/hono_bindings.ts b/phoenix-api/src/hono_bindings.ts
@@ -5,6 +5,7 @@ export type Bindings = {
   JWT_SECRET: string;
   BLOGS_ROOT_DOMAIN: string;
   DB: D1Database;
+  R2_BUCKET: R2Bucket;
 };
 
 export type Variables = {

diff --git a/phoenix-blog/src/routes/index.tsx b/phoenix-blog/src/routes/index.tsx
@@ -10,7 +10,7 @@ import { HtmlEscapedString } from "hono/utils/html";
 
 export async function index(ctx: Context): Promise<Response> {
   // const reqUrl = new URL(ctx.req.url);
-  const domain = 'blog.cloudflarebook.net';
+  const domain = 'blog.cloudflarebook.com';
   const [blog, posts] = await Promise.all([
     getBlog(ctx, domain),
     getPosts(ctx, domain),

diff --git a/phoenix-blog/src/routes/page.tsx b/phoenix-blog/src/routes/page.tsx
@@ -10,7 +10,7 @@ import { Base } from "./_base";
 export async function page(ctx: Context): Promise<Response> {
   const reqUrl = new URL(ctx.req.url);
 
-  const domain = 'blog.cloudflarebook.net';
+  const domain = 'blog.cloudflarebook.com';
   const [blog, page] = await Promise.all([
     getBlog(ctx, domain),
     getPage(ctx, domain, reqUrl.pathname),

diff --git a/phoenix-blog/src/utils.ts b/phoenix-blog/src/utils.ts
@@ -1,7 +1,6 @@
 import { ApiError, ApiResponse } from "@phoenix/core/api";
 import { Blog, BlogValidator, Page, PageValidator } from "@phoenix/core/entities";
 import { InternalServerError, NotFoundError } from "@phoenix/core/errors";
-import { sha256Sum } from "@phoenix/core/crypto";
 import { Context } from "./context";
 
 export async function getBlog(ctx: Context, domain: string): Promise<Blog> {

diff --git a/phoenix-webapp/index.html b/phoenix-webapp/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Build fast, secure and scalable applications with the global cloud platform">
     <title>Cloudflare for Speed and Security</title>
   </head>
   <body class="h-full">

diff --git a/phoenix-webapp/src/app/navigation.ts b/phoenix-webapp/src/app/navigation.ts
diff --git a/phoenix-webapp/src/components/blogs.vue b/phoenix-webapp/src/components/blogs.vue
@@ -45,7 +45,7 @@
                   {{ blog.name }}
                 </p>
                 <p class="mt-1 flex text-xs leading-5 text-gray-500">
-                  <span class="relative truncate">{{ blog.slug }}.cloudflarebook.net</span>
+                  <span class="relative truncate">{{ blog.slug }}.cloudflarebook.com</span>
                 </p>
               </div>
             </div>

diff --git a/phoenix-webapp/src/components/landing.vue b/phoenix-webapp/src/components/landing.vue
@@ -1,8 +1,43 @@
 <template>
-  <h1>Landing</h1>
+  <div class="relative isolate lg:pt-14">
+    <svg class="absolute inset-0 -z-10 h-full w-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true">
+      <defs>
+        <pattern id="0787a7c5-978c-4f66-83c7-11c213f99cb7" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse">
+          <path d="M.5 200V.5H200" fill="none" />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" stroke-width="0" fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)" />
+    </svg>
+    <div class="mx-auto max-w-7xl px-8 lg:px-20 py-8 lg:flex lg:items-center lg:gap-x-10">
+      <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
+        <h1 class="max-w-lg text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+          Cloudflare for Speed and Security
+        </h1>
+        <p class="mt-6 text-lg leading-8 text-gray-600">
+          Build fast, secure and scalable applications with the global cloud platform <br />
+          PDF, Kindle & Epub <br />
+          $30
+        </p>
+        <div class="mt-10 flex items-center gap-x-6">
+          <a href="https://kerkour.com/cloudflare-for-speed-and-security" class="rounded-md bg-green-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-400">
+            Buy Now
+          </a>
+          <a href="https://kerkour.com/cloudflare-for-speed-and-security" class="text-sm font-semibold leading-6 text-gray-900">
+            Learn more <span aria-hidden="true">→</span>
+          </a>
+        </div>
+      </div>
+      <div class="flex items-center justify-center mt-16 sm:mt-24 lg:mt-0 lg:flex-shrink-0 lg:flex-grow">
+        <img src="https://kerkour.com/assets/books/cloudflare-for-speed-and-security/cloudflare_for_speed_and_security_cover.png"
+          alt="Cloudflare for Speed and Security cover"
+          class="max-h-96 lg:max-h-[32rem] rounded-md" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { ChevronRightIcon } from '@heroicons/vue/20/solid'
 // props
 
 // events

diff --git a/phoenix-webapp/src/components/navbar.vue b/phoenix-webapp/src/components/navbar.vue
@@ -1,5 +1,61 @@
 <template>
   <header class="bg-transparent relative z-10">
+      <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+        <div class="flex lg:flex-1">
+          <RouterLink to="/" class="-m-1.5 p-1.5">
+            <span class="sr-only">Cloudflare for Speed and Security</span>
+            <img class="h-8 w-auto" src="/webapp/logo.svg" alt="Logo" />
+          </RouterLink>
+          <!-- <span class="ml-4 text-xl font-bold text-gray-900 items-center">Cloudflare for Speed and Security</span> -->
+        </div>
+        <div class="flex lg:hidden">
+          <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" @click="isMobileMenuOpen = true">
+            <span class="sr-only">Open main menu</span>
+            <Bars3Icon class="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+        <div class="hidden lg:flex lg:gap-x-12">
+          <CfLink v-for="item in navigation" :key="item.name" :href="item.url" class="text-sm font-semibold leading-6 text-gray-900">
+            {{ item.name }}
+          </CfLink>
+        </div>
+        <div class="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center">
+          <RouterLink to="/login" v-if="showLoginAndSignupButtons" class="block text-sm font-semibold leading-6 text-gray-900 hover:underline">
+            Log in <span aria-hidden="true">&rarr;</span>
+          </RouterLink>
+        </div>
+      </nav>
+      <Dialog as="div" class="lg:hidden" @close="isMobileMenuOpen = false" :open="isMobileMenuOpen">
+        <div class="fixed inset-0 z-50" />
+        <DialogPanel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div class="flex items-center justify-between">
+            <a href="#" class="-m-1.5 p-1.5">
+              <span class="sr-only">Cloudflare for Speed and Security</span>
+              <img class="h-8 w-auto" src="/webapp/logo.svg" alt="" />
+            </a>
+            <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" @click="isMobileMenuOpen = false">
+              <span class="sr-only">Close menu</span>
+              <XMarkIcon class="h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+          <div class="mt-6 flow-root">
+            <div class="-my-6 divide-y divide-gray-500/10">
+              <div class="space-y-2 py-6">
+                <CfLink v-for="item in navigation" :key="item.name" :href="item.url" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+                  {{ item.name }}
+                </CfLink>
+              </div>
+              <div class="py-6">
+                <RouterLink to="/login" v-if="showLoginAndSignupButtons" class="block text-sm font-semibold leading-6 text-gray-900 hover:underline">
+                  Log in <span aria-hidden="true">&rarr;</span>
+                </RouterLink>
+              </div>
+            </div>
+          </div>
+        </DialogPanel>
+      </Dialog>
+    </header>
+  <!-- <header class="bg-transparent relative z-10">
     <nav class="mx-auto flex max-w-7xl items-left justify-between gap-x-6 p-6 px-8 h-24" aria-label="Global">
       <div class="flex">
         <div class="flex flex-1 items-center">
@@ -25,17 +81,16 @@
         </RouterLink>
       </div>
     </nav>
-  </header>
+  </header> -->
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, ref } from 'vue';
 import CfLink from './cf_link.vue';
 import { useStore } from '@/app/store';
-import navigation from '@/app/navigation';
+import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { Dialog, DialogPanel } from '@headlessui/vue';
 
-const $route = useRoute();
 const $store = useStore();
 
 const showLoginAndSignupButtons = computed(() => {
@@ -48,4 +103,15 @@ const showLoginAndSignupButtons = computed(() => {
 const showLogoutButton = computed(() => {
   return $store.isAuthenticated;
 })
+
+
+const navigation = [
+  { name: 'Buy the Book', url: 'https://kerkour.com/cloudflare-for-speed-and-security' },
+  { name: 'About the Author', url: 'https://kerkour.com' },
+  { name: 'Blog', url: 'https://kerkour.com/blog' },
+  { name: 'Demo (Phoenix)', url: 'https://blog.cloudflarebook.com' },
+  { name: 'GitHub', url: 'https://github.com/skerkour/cloudflare-for-speed-and-security' },
+];
+const isMobileMenuOpen = ref(false);
+
 </script>
diff --git a/phoenix-webapp/src/components/slug_input.vue b/phoenix-webapp/src/components/slug_input.vue
@@ -33,7 +33,7 @@ const $emit = defineEmits(['update:modelValue', 'keyup'])
 // lifecycle
 
 // variables
-const rootDomain = 'cloudflarebook.net';
+const rootDomain = 'cloudflarebook.com';
 
 // computed
 const slug = computed({