digging_deeper

Documentation

Index

• Variables

Variables

var CompositeNewComponentWithGo = Doc(
	Markdown(`
Any Go function that returns an ~htmlgo.HTMLComponent~ is a component,
Any Go struct that implements ~MarshalHTML(ctx context.Context) ([]byte, error)~ function is an component.
They can be composite into a new component very easy.

This example is ported from [Bootstrap4 Navbar](https://getbootstrap.com/docs/4.3/components/navbar/):
`),
	ch.Code(generated.CompositeComponentSample1).Language("go"),
	utils.DemoWithSnippetLocation("Composite New Component With Go", examples_web.CompositeComponentSample1PagePath, generated.CompositeComponentSample1Location),
	Markdown(`
You can see from the example, We have created ~Navbar~ and ~Carousel~ components by
simply create Go func that returns ~htmlgo.HTMLComponent~.
It is easy to pass in components as parameter, and wrap components.
By utilizing the power of Go language, Any component can be abstracted and reused with enough parameters.

The ~Navbar~ is a responsive navigation header, Resizing your window, the nav bar will react to device window size and change to nav bar popup and hide search form.

For this ~Navbar~ component to work, I have to import Bootstrap assets in this new layout function:
`),
	ch.Code(generated.DemoBootstrapLayoutSample).Language("go"),

	Markdown(`
You can utilize the command line tool [html2go](https://github.com/sunfmin/html2go) to convert existing html code to htmlgo code.
By writing html in Go you get:

- The static type checking
- Abstract out easily to different functions
- Easier refactor with IDE like GoLand
- Loop and variable replacing is just like in Go
- Invoke helper functions is just like in Go
- Almost as readable as normal HTML
- Not possible to have html tag not closed, Or not matched.

Once you have these, Why generate html in any interpreted template language!

`),
).Title("Composite new Component With Go").
	Slug("components-guide/composite-new-component-with-go")

var IntegrateAHeavyVueComponent = Doc(
	Markdown(`
We can abstract any complicated of server side render component with [htmlgo](https://github.com/theplant/htmlgo).
But a lots of components in the modern web have done many things on the client side. means there are many logic
happens before the it interact with server side.

Here is an example, a rich text editor. you have a toolbar of buttons that you can interact, most of them won't
need to communicate with server. We are going to integrate the fantastic rich text editor [tiptap](https://tiptap.dev/)
to be used as any ~htmlgo.HTMLComponent~.

**Step 1**: [Create a vue3 project](https://vuejs.org/guide/quick-start.html):

~~~
$ pnpm create vue@latest
~~~

Modify or add a separate ~vite.config.ts~ config file,

`),
	ch.Code(generated.TipTapVueConfig).Language("javascript"),

	Markdown(`
- Made ~Vue~ as externals so that it won't be packed to the dist production js file,
  Since we will be sharing one Vue.js for in one page with other libraries.
- Config svg module to inline the svg icons used by tiptap

**Step 2**: Create a vue component that use tiptap

Install ~tiptap~ and ~tiptap-extensions~ first
~~~
$ pnpm install tiptap tiptap-extensions
~~~

And write the ~editor.vue~ something like this, We omitted the template at here.

`),
	ch.Code(generated.TipTapEditorVueComponent).Language("javascript"),
	Markdown(`

**Step 3**: At ~main.js~, Use a special hook to register the component to ~web/corejs~

`),
	ch.Code(generated.TipTapRegisterVueComponent).Language("javascript"),
	Markdown(`

`),
	Markdown(`

**Step 4**: Use standard [Go embed](https://pkg.go.dev/embed) to pack the dist folder

We write a packr box inside ~tiptapjs.go~ along side the tiptapjs folder.
`),
	ch.Code(generated.TipTapPackrSample).Language("go"),
	Markdown(`
And write a ~build.sh~ to build the javascript to production version.
`),
	ch.Code(generated.TiptapBuilderSH).Language("bash"),

	Markdown(`
**Step 5**: Write a Go wrapper to wrap it to be a ~HTMLComponent~
`),
	ch.Code(generated.TipTapEditorHTMLComponent).Language("go"),

	Markdown(`
**Step 6**: Use it in your web app

To use it, first we have to mount the assets into our app
`),
	ch.Code(generated.TipTapComponentsPackSample).Language("go"),
	Markdown(`
And reference them in our layout function.
`),
	ch.Code(generated.TipTapLayoutSample).Language("go"),

	Markdown(`
And we write a page func to use it like any other component:
`),
	ch.Code(generated.HelloWorldTipTapSample).Language("go"),

	Markdown(`
And now let's check out our fruits:
`),
	utils.DemoWithSnippetLocation("Integrate a Heavy Vue Component", examples_vuetify.HelloWorldTipTapPath, generated.HelloWorldTipTapSampleLocation),
).Title("Integrate a heavy Vue Component").
	Slug("components-guide/integrate-a-heavy-vue-component")