[cb-#99] cleaning up server routes

docs/src/vue/components/pages/tutorials/resources/creating_a_resource.vue

@@ -1,73 +1,63 @@
 <template lang="pug">
-page-tutorial-default(
-    :data="data"
-    :custom="true"
+page-tutorial(
+  :toc="toc"
 )
-    template(v-slot:custom)
-        div.row
-            div.col
-                hr
-                h2 Table Of Contents
-                ul-toc(:data="data.toc")
-        div.row
-            div.col
-                hr
-                h2#before-you-get-started Before You Get Started
-                ul
-                  li Drash defines resources according to the MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web" target="_BLANK">https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web</a>
-                  li Unlike most other frameworks, Drash uses resource classes to handle requests and send responses. So, instead of defining a route, creating a controller class, and mapping that controller class to that route; you create a resource class and define its routes in its <code>paths</code> property.
-                  li You create a resource by extending the <code>Drash.Http.Resource</code> class. This is the base class for all resources. You can define your own base resource class, but it must extend the <code>Drash.Http.Resource</code> class.
-                  li Drash servers only register resources that are specified in their <code>resources</code> config during creation. See below.
-                    code-block-slotted(:header="false" language="typescript" line_highlight="7")
-                      template(v-slot:code) {{ data.example_code.registering_resources.contents }}
-                    p When Drash servers register resources, they also register their paths as accessible URIs. An accessible URI is a URI that a client can target. Any URI that does not exist in any resource is a non-accessible URI. Non-accessible URIs ultimately lead to a response other than a <code>200 OK</code> repsonse. The default response for a request to a non-accessible URI is a <code>404 Not Found</code> error.
-                  list-item-download-source-code(:source_code_uri="$route.meta.source_code_uri")
-        div.row
-            div.col
-                hr
-                h2#creating-a-resource-that-handles-get-and-post-requests Creating A Resource That Handles <code>GET</code> And <code>POST</code> Requests
-                p This resource handles requests at the <code>/</code> URI. If a client makes a request to this URI, this resource would handle that request.
-                code-block(:data="data.example_code.my_resource_get_post")
-        div.row
-            div.col
-                hr
-                h2#creating-a-resource-that-handles-get-post-put-and-delete-requests Creating A Resource That Handles <code>GET</code>, <code>POST</code>, <code>PUT</code>, And <code>DELETE</code> Requests
-                p This resource handles requests at the <code>/</code> URI. If a client makes a request to this URI, this resource would handle that request.
-                p As you can see, the HTTP methods you add and make public in a resource are the HTTP methods clients are allowed to call. If a client tries to make a <code>PATCH</code> request to this resource, it would receive a <code>405 Method Not Allowed</code> error as a response because this resource does not have <code>public PATCH() { ... }</code> defined.
-                code-block(:data="data.example_code.my_resource_get_post_put_delete")
-        div.row
-            div.col
-                hr
-                h2#creating-a-resource-that-handles-request-params Creating A Resource That Handles Request Params
-                p This resource checks for the request's path params, URL query params, and body params at the <code>/</code> and <code>/:something_cool</code> URIs. If a client makes a request to these URIs, this resource would handle that request.
-                code-block(:data="data.example_code.my_resource_handles_params")
+    div.row
+      div.col
+        hr
+        h2-hash Before You Get Started
+        p Drash defines resources according to the MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web" target="_BLANK">https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web</a>
+        p Unlike most other frameworks, Drash uses resource classes to handle requests and send responses. So, instead of defining a route with a specific HTTP method, creating a controller class, and mapping that controller class to that route; you create a resource class, define its routes in its <code>paths</code> property, and define its HTTP methods as <code>public</code> functions.
+        p You create a resource by extending the <code>Drash.Http.Resource</code> class. This is the base class for all resources. You can define your own base resource class, but it must extend the <code>Drash.Http.Resource</code> class.
+        p Drash servers only register resources that are specified in their <code>resources</code> config during creation. See below.
+        p
+          code-block-slotted(:header="false" language="typescript" line_highlight="7")
+            template(v-slot:code) {{ example_code.registering_resources.contents }}
+        p When Drash servers register resources, they also register their paths as accessible URIs. An accessible URI is a URI that a client can target. Any URI that does not exist in any resource is a non-accessible URI. Non-accessible URIs ultimately lead to a response other than a <code>200 OK</code> repsonse. The default response for a request to a non-accessible URI is a <code>404 Not Found</code> error.
+        p-download-source-code(:source_code_uri="$route.meta.source_code_uri")
+    div.row
+      div.col
+        hr
+        h2-hash Creating A Resource
+        p This resource handles requests at the <code>/</code> URI. If a client makes a request to this URI, this resource would handle that request.
+        p
+          code-block(:data="example_code.my_resource_get_post")
+        h3 Adding More HTTP Methods
+        p Giving a resource the ability to handle diffrent types of requests is as easy as adding the HTTP method to handle that request. Taking the above code, you can add more HTTP methods like the ones highlighted below; and your resource would be able to handle those requests.
+        p
+          code-block(:data="example_code.my_resource_get_post_put_delete" line_highlight="16-24")
+        p As you can see, the HTTP methods you add and make <code>public</code> in a resource are the HTTP methods clients are allowed to call. If a client tries to make a <code>PATCH</code> request to this resource, it would receive a <code>405 Method Not Allowed</code> error as a response because this resource does not have <code>public PATCH() { ... }</code> defined.
+    div.row
+      div.col
+        hr
+        h2-hash Handling Request Params
+        p This resource checks for the request's path params, URL query params, and body params at the <code>/</code> and <code>/:something_cool</code> URIs. If a client makes a request to these URIs, this resource would handle that request.
+        p
+          code-block(:data="example_code.my_resource_handles_params")
 </template>
 
 <script>
 export const resource = {
-    paths: ["/tutorials/resources/creating-a-resource"],
-    meta: {
-        title: "Creating A Resource",
-        source_code_uri: "/resources/creating_a_resource"
-    }
+  paths: ["/tutorials/resources/creating-a-resource"],
+  meta: {
+    title: "Creating A Resource",
+    source_code_uri: "/resources/creating_a_resource"
+  }
 }
 
 export default {
-    data() {
-        return {
-            data: {
-                example_code: this.$app_data.example_code['/docs/src/example_code/tutorials/resources/creating_a_resource'],
-                toc: {
-                    items: [
-                        "Before You Get Started",
-                        "Creating A Resource That Handles GET And POST Requests",
-                        "Creating A Resource That Handles GET, POST, PUT, And DELETE Requests",
-                        "Creating A Resource That Handles Request Params",
-                    ]
-                }
-            }
-        };
-    },
+  data() {
+    return {
+      example_code: this.$app_data.example_code['/docs/src/example_code/tutorials/resources/creating_a_resource'],
+      toc: {
+        items: [
+          "Before You Get Started",
+          "Creating A Basic Resource",
+          "Handling Request Params",
+        ]
+      }
+    };
+  },
 }
 </script>
 

docs/src/vue/components/pages/tutorials/creating_a_server.vue → docs/src/vue/components/pages/tutorials/servers/creating_a_server.vue

@@ -1,16 +1,16 @@
 <script>
 export const resource = {
-  paths: ["/tutorials/creating-a-server"],
+  paths: ["/tutorials/servers/creating-a-server"],
   meta: {
     title: "Creating A Server",
-    source_code_uri: "/tutorials/creating_a_server"
+    source_code_uri: "/tutorials/servers/creating_a_server"
   }
 }
 
 export default {
   data() {
     return {
-      example_code: this.$app_data.example_code['/docs/src/example_code/tutorials/creating_a_server'],
+      example_code: this.$app_data.example_code['/docs/src/example_code/tutorials/servers/creating_a_server'],
       toc: {
         items: [
           "Before You Get Started",
@@ -31,18 +31,17 @@ page-tutorial(
   div.row
     div.col
       hr
-      h2#before-you-get-started Before You Get Started
-      ul
-        li In this tutorial, you will create a very basic server that handles some common requests: <code>GET</code>, <code>POST</code>, <code>PUT</code>, and <code>DELETE</code>.
-        list-item-download-source-code(:source_code_uri="$route.meta.source_code_uri")
+      h2-hash Before You Get Started
+      p In this tutorial, you will create a very basic server that handles some common requests: <code>GET</code>, <code>POST</code>, <code>PUT</code>, and <code>DELETE</code>.
+      p-download-source-code(:source_code_uri="$route.meta.source_code_uri")
   div.row
     div.col
       hr
       div-folder-structure-end-state(:code_block_data="example_code.folder_structure")
   div.row
     div.col
       hr
-      h2#steps Steps
+      h2-hash Steps
       ol
         li Create your resource file.
           code-block(:data="example_code.home_resource")
@@ -54,7 +53,7 @@ page-tutorial(
   div.row
     div.col
       hr
-      h2#verification Verification
+      h2-hash Verification
       ol
         li Run your app.
           code-block-slotted

docs/src/vue/components/pages/tutorials/servers/serving_static_paths.vue

@@ -0,0 +1,75 @@
+<script>
+export const resource = {
+  paths: ["/tutorials/servers/serving-static-paths"],
+  meta: {
+    title: "Serving Static Paths",
+    source_code_uri: "/tutorials/servers/serving_static_paths"
+  }
+}
+
+export default {
+  data() {
+    return {
+      example_code: this.$app_data.example_code['/docs/src/example_code/tutorials/servers/serving_static_paths'],
+      example_code_public: this.$app_data.example_code['/docs/src/example_code/tutorials/servers/serving_static_paths/public'],
+      toc: {
+        items: [
+          "Before You Get Started",
+          "Folder Structure End State",
+          "Steps",
+          "Verification"
+        ]
+      }
+    };
+  },
+}
+</script>
+
+<template lang="pug">
+page-tutorial(
+  :toc="toc"
+)
+  div.row
+    div.col
+      hr
+      h2-hash Before You Get Started
+      p In this tutorial, you will build a very simple HTML page that can serve a CSS file.
+      p-download-source-code(:source_code_uri="$route.meta.source_code_uri")
+  div.row
+    div.col
+      hr
+      div-folder-structure-end-state(:code_block_data="example_code.folder_structure")
+  div.row
+    div.col
+      hr
+      h2-hash Steps
+      ol
+        li Create your app file.
+          code-block(:data="example_code.app" line_highlight="7,10")
+          p The <code>static_paths</code> config tells your Drash server what paths on your filesystem contain static files that can be served to clients. Ultimately, your Drash server will prefix the <code>directory</code> config with your paths in your <code>static_paths</code> config. For example, your Drash server will take a request to <code>/public/assets/css/style.css</code> and resolve it to <code>{directory_config}/public/assets/css/style.css</code>.
+        li Create your <code>style.css</code> file in your static directory.
+          code-block(:data="example_code_public.style" title="/path/to/your/project/public/style.css")
+        li Create your resource file.
+          code-block(:data="example_code.home_resource")
+          p Your resource file will serve HTML; and your HTML will reference <code>style.css</code>.
+  div.row
+    div.col
+      hr
+      h2-hash Verification
+      ol
+        li Run your app.
+          code-block-slotted
+            template(v-slot:title) Terminal
+            template(v-slot:code)
+              | deno --allow-net --allow-read app.ts
+          p-deno-flag-allow-net
+          p-deno-flag-allow-read-static
+        li Make a request in your browser.
+          code-block-slotted
+            template(v-slot:title) Terminal
+            template(v-slot:code)
+              | curl localhost:1447
+          p You should receive the following response:
+          a(href="/deno-drash/public/assets/img/example_code/tutorials/serving_static_paths/verification_1.png")
+            img(:src="$conf.base_url + '/public/assets/img/example_code/tutorials/serving_static_paths/verification_1.png'")
+</template>