Full api/html content parsing?
Closed this issue · 1 comments
daison12006013 commented
Is there anyway we can provide a full html parsing?
Let us say a content was given and provided from an api
<script lang="ts">
export let content: any
</script>
<div class="prose prose-md max-w-[100%] max-h-[100%]">
{@html content}
</div>
Now, let us say the api returns such this, then in sveltekit it automatically put that content as prop, as you can see below it has this
<pre><code class=\"language-go\">...
{
"content": "<h1>Routing</h1>\n\n<ul>\n<li><a href=\"#-structure\"># Structure</a></li>\n<li><a href=\"#-route-resource\"># Route Resource</a></li>\n<li><a href=\"#-route-middlewares\"># Route Middlewares</a></li>\n</ul>\n\n<hr>\n\n<p>Lucid’s routing structure is simple, as if you’re just writing a json schema.</p>\n\n<h2 id=\"-structure\"><a href=\"#-structure\">#</a> Structure</h2>\n\n<p>Routes are stored inside <code>registrar/routes.go</code> under a variable called <code>Routes</code></p>\n\n<p>Here is a simple way to write a route.</p>\n\n<pre><code class=\"language-go\">var Routes = &[]r.Routing{\n {\n Path: "/",\n Name: "welcome",\n Method: r.Method{"GET"},\n Handler: handlers.Welcome,\n },\n}\n</code></pre>\n\n<p>To explain above</p>\n\n<p>The <code>Path</code> is your <strong>url</strong> relative path, while the <code>Handler</code> shall be the one to literally handle the route, if you’re coming from different frameworks, the alternative term for this is <code>Controller</code> or <code>Action</code>.</p>\n\n<blockquote>\n<p><code>Tips:</code> some engineers tend to have a <code>Service</code> or <code>Repository</code> pattern, you can apply the same way but most of the time you don’t need to over do things, although it is good to extract your logic into pieces to easily apply a unit test.\nTo learn more about <a href=\"/handlers\">Handlers</a></p>\n</blockquote>\n\n<p>Meanwhile, the <code>Method</code> is the action that is coming from your browser’s form, XMLHttpRequest (ajax / fetch)</p>\n\n<table>\n<thead>\n<tr>\n<th>HTTP Method</th>\n<th>CRUD Operation</th>\n</tr>\n</thead>\n\n<tbody>\n<tr>\n<td>GET</td>\n<td>Read</td>\n</tr>\n\n<tr>\n<td>POST</td>\n<td>Create</td>\n</tr>\n\n<tr>\n<td>PATCH</td>\n<td>Update</td>\n</tr>\n\n<tr>\n<td>DELETE</td>\n<td>Delete</td>\n</tr>\n\n<tr>\n<td>PUT</td>\n<td>Update/Replace</td>\n</tr>\n</tbody>\n</table>\n\n<blockquote>\n<p><code>Note:</code> if you want to handle multiple method in one route, you just need to append the value using a comma separated value.</p>\n</blockquote>\n\n<pre><code class=\"language-go\">r.Method{"GET", "POST"},\n</code></pre>\n\n<h2 id=\"-route-resource\"><a href=\"#-route-resource\">#</a> Route Resource</h2>\n\n<p>We’re commonly building routes to serve a <a href=\"https://en.wikipedia.org/wiki/Create,_read,_update_and_delete\">C.R.U.D.</a>, such as <strong>Users Management</strong>, <strong>Orders</strong>, <strong>Reports</strong> and more!</p>\n\n<pre><code class=\"language-go\">...\n{\n Path: "/users",\n Name: "users",\n Resources: r.Resources{\n "index": users_handler.Lists,\n "create": users_handler.Create,\n "store": users_handler.Store,\n "show": users_handler.Show,\n "edit": users_handler.Show,\n "update": users_handler.Update,\n "destroy": users_handler.Delete,\n },\n},\n</code></pre>\n\n<p>Here’s how lucid will understand the routing resource</p>\n\n<table>\n<thead>\n<tr>\n<th>Default</th>\n<th>Path</th>\n<th>Alternative Path</th>\n</tr>\n</thead>\n\n<tbody>\n<tr>\n<td>index</td>\n<td><code>GET</code> /users</td>\n<td>-</td>\n</tr>\n\n<tr>\n<td>create</td>\n<td><code>GET</code> /users/create</td>\n<td>-</td>\n</tr>\n\n<tr>\n<td>store</td>\n<td><code>POST</code> /users</td>\n<td>-</td>\n</tr>\n\n<tr>\n<td>show</td>\n<td><code>GET</code> /users/{id}</td>\n<td>-</td>\n</tr>\n\n<tr>\n<td>edit</td>\n<td><code>GET</code> /users/{id}/edit</td>\n<td>-</td>\n</tr>\n\n<tr>\n<td>update</td>\n<td><code>PUT</code> /users/{id}</td>\n<td><code>POST</code> /users/{id}/update</td>\n</tr>\n\n<tr>\n<td>destroy</td>\n<td><code>DELETE</code> /users/{id}</td>\n<td><code>POST</code> /users/{id}/delete</td>\n</tr>\n</tbody>\n</table>\n<p>To learn more about the core behind this, please read <a href=\"/core-routing-resource\">Core -> Routing Resource</a></p>\n\n<h2 id=\"-route-middlewares\"><a href=\"#-route-middlewares\">#</a> Route Middlewares</h2>\n\n<p>Middleware is used to intercept the http request before it goes to a handler</p>\n\n<pre><code class=\"language-go\">{\n Path: "/users",\n ...\n Middlewares: r.Middlewares{"auth"},\n}\n</code></pre>\n\n<p>As an example above, we’re passing the <code>auth</code>, this string is stored inside <code>app/kernel.go</code> and hooked under <code>middlewares.AuthenticateMiddleware</code></p>\n\n<pre><code class=\"language-go\">var RouteMiddleware = map[string]mux.MiddlewareFunc{\n "auth": middlewares.AuthenticateMiddleware,\n}\n</code></pre>\n\n<blockquote>\n<p><code>Note:</code> for more info on how to write a <a href=\"/middleware\">Middlewares</a></p>\n</blockquote>\n",
"title": "routing"
}
In your documentation right now, if I understand it correctly, it doesn't support that way?
daison12006013 commented
I just noticed that hljs has this highlightAll(), just a good reference here, or maybe if you can solve this into a component with different languages to be injected?
Here's a working copy, using tailwind typography, plus hljs and props content from the api response.
<script lang="ts">
export let content: any
import hljs from "highlight.js/lib/core";
import go from "highlight.js/lib/languages/go";
import bash from "highlight.js/lib/languages/bash";
import codetheme from "svelte-highlight/styles/ir-black";
$: codetheme
hljs.registerLanguage("go", go);
hljs.registerLanguage("bash", bash);
import { afterUpdate } from 'svelte';
$: if (content) {
afterUpdate(() => {
if (document !== undefined) {
hljs.highlightAll();
}
})
}
</script>
<svelte:head>
{@html codetheme}
</svelte:head>
<style global lang="postcss">
.prose ul {
@apply list-none my-0 py-0
}
.prose ul li {
@apply my-1 py-0
}
.prose ul li a {
@apply no-underline
}
.prose h1 {
@apply mb-3 ml-7
}
.prose pre {
@apply p-0 rounded-none bg-inherit
}
.prose code {
@apply p-0 rounded-lg
}
</style>
<div class="prose prose-md max-w-[100%] max-h-[100%]">
{@html content}
</div>