Skip to content

feat(gnoweb): readme markdown viewer for p/ & r/ #4101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 20 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion gno.land/pkg/gnoweb/app_test.go
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ func TestRoutes(t *testing.T) {
{"/game-of-realms", found, "/contribute"},
{"/gor", found, "/contribute"},
{"/blog", found, "/r/gnoland/blog"},
{"/r/docs/optional_render", http.StatusOK, "No Render"},
{"/r/docs/optional_render", ok, "Directory"},
{"/r/docs/optional_render/", ok, "Directory"},
{"/r/not/found/", notFound, ""},
{"/z/bad/request", BadRequest, ""}, // not realm or pure
{"/아스키문자가아닌경로", notFound, ""},
Expand Down
1 change: 1 addition & 0 deletions gno.land/pkg/gnoweb/components/layout_index.go
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ func IndexLayout(data IndexData) Component {

case DirectoryViewType:
dataLayout.IsDevmodView = true
dataLayout.Layout = SidebarLayout

case StatusViewType:
dataLayout.IsDevmodView = true
Expand Down
2 changes: 1 addition & 1 deletion gno.land/pkg/gnoweb/components/layouts/article.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{{ define "layout/article" }}
<md-renderer class="{{ if .Classes }}{{ .Classes }}{{ end }} mt-4 lg:mt-0 lg:col-span-7 pb-24">{{ render .ComponentContent }}</md-renderer>
<md-renderer class="{{ if .Classes }}{{ .Classes }}{{ end }} mt-4 lg:mt-0 lg:col-span-7 pb-14 mb-14">{{ render .ComponentContent }}</md-renderer>
{{ end }}
421 changes: 187 additions & 234 deletions gno.land/pkg/gnoweb/components/ui/icons.html

Large diffs are not rendered by default.

21 changes: 17 additions & 4 deletions gno.land/pkg/gnoweb/components/view_directory.go
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,24 @@ package components
const DirectoryViewType ViewType = "dir-view"

type DirData struct {
PkgPath string
Files []string
FileCounter int
PkgPath string
Files []string
FileCounter int
ComponentContent Component
}

type directoryViewParams struct {
DirData
Article ArticleData
}

func DirectoryView(data DirData) *View {
return NewTemplateView(DirectoryViewType, "renderDir", data)
viewData := directoryViewParams{
DirData: data,
Article: ArticleData{
ComponentContent: data.ComponentContent,
Classes: "md-view bg-light rounded px-4",
},
}
return NewTemplateView(DirectoryViewType, "renderDir", viewData)
}
4 changes: 2 additions & 2 deletions gno.land/pkg/gnoweb/components/view_realm.go
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import (
"github.com/gnolang/gno/gno.land/pkg/gnoweb/markdown"
)

const RealmViewType ViewType = "realm-view"
const RealmViewType ViewType = "md-view"

type RealmTOCData struct {
Items []*markdown.TocItem
Expand All @@ -29,7 +29,7 @@ func RealmView(data RealmData) *View {
viewData := realmViewParams{
Article: ArticleData{
ComponentContent: data.ComponentContent,
Classes: "realm-view lg:row-start-1",
Classes: "md-view lg:row-start-1",
},
ComponentTOC: NewTemplateComponent("ui/toc_realm", data.TocItems),
}
Expand Down
27 changes: 25 additions & 2 deletions gno.land/pkg/gnoweb/components/view_source.go
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
package components

import (
"fmt"
)

const SourceViewType ViewType = "source-view"

type DisplayMode int

const (
ModeCode DisplayMode = iota
ModeMarkdown
)
Comment on lines +9 to +14
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, if you are using this within the template, it makes no sense to use int here. Just change this to string, or find a way to expose this as const within the template. But if it's not something simple, simply use string.

Suggested change
type DisplayMode int
const (
ModeCode DisplayMode = iota
ModeMarkdown
)
type DisplayMode string
const (
ModeCode DisplayMode = "code"
ModeMarkdown = "markdown"
)


type SourceData struct {
PkgPath string
Mode DisplayMode
Files []string
FileName string
FileSize string
FileLines int
FileCounter int
FileDownload string
FileSource Component
IsMarkdown bool
}

type SourceTocData struct {
Expand All @@ -33,6 +46,8 @@ type sourceViewParams struct {
PkgPath string
FileDownload string
ComponentTOC Component
Mode DisplayMode
IsMarkdown bool
}

func SourceView(data SourceData) *View {
Expand All @@ -49,11 +64,17 @@ func SourceView(data SourceData) *View {
}

toc := NewTemplateComponent("ui/toc_generic", tocData)
content := NewTemplateComponent("ui/code_wrapper", data.FileSource)
var content Component
if data.Mode == ModeCode {
content = NewTemplateComponent("ui/code_wrapper", data.FileSource)
} else {
content = data.FileSource
}
viewData := sourceViewParams{
Article: ArticleData{
ComponentContent: content,
Classes: "source-view col-span-1 lg:col-span-7 lg:row-start-2 pb-24 text-gray-900",
Classes: fmt.Sprintf("%s col-span-1 lg:col-span-7 lg:row-start-2 mb-24 text-gray-900",
map[DisplayMode]string{ModeCode: "source-view", ModeMarkdown: "md-view bg-light rounded px-4"}[data.Mode]),
},
ComponentTOC: toc,
Files: data.Files,
Expand All @@ -63,6 +84,8 @@ func SourceView(data SourceData) *View {
FileCounter: data.FileCounter,
PkgPath: data.PkgPath,
FileDownload: data.FileDownload,
Mode: data.Mode,
IsMarkdown: data.IsMarkdown,
}

return NewTemplateView(SourceViewType, "renderSource", viewData)
Expand Down
70 changes: 39 additions & 31 deletions gno.land/pkg/gnoweb/components/views/directory.html
Original file line number Diff line number Diff line change
@@ -1,32 +1,40 @@
{{ define "renderDir" }}
{{ $pkgpath := .PkgPath }}
<article class="code-content mt-10 lg:col-span-7 pb-24 text-gray-900">
<div class="flex flex-col md:flex-row justify-between mb-4 md:items-center">
<div class="flex items-center gap-8">
<h1 class="text-600 font-bold">{{ $pkgpath }}</h1>
</div>
<div class="flex gap-4 text-gray-300 pt-0.5">
<span class="text-gray-300">Directory · {{ .FileCounter }} Files</span>
</div>
</div>

<div class="source-code font-mono mt-6">
<ul>
{{ range .Files }}
<li class="border-b first:border-t">
<a class="py-2 flex justify-between items-center px-2 text-gray-600 line-clamp-2 hover:bg-gray-100" href="{{ $pkgpath }}$source&file={{ . }}">
<span class="flex items-center gap-2">
<svg class="w-4 h-4 shrink-0">
<use href="#ico-file"></use>
</svg>
{{ . }}
</span>
<span class="text-gray-300">Open</span>
</a>
</li>
{{ end }}
</ul>
</div>
</article>
{{ end }}
{{ define "renderDir" }} {{ $pkgpath := .PkgPath }}
<article class="code-content mt-10 lg:col-span-7 mb-20 text-gray-900">
<div class="flex flex-col md:flex-row justify-between mb-4 md:items-center">
<div class="flex items-center gap-8">
<h1 class="text-600 font-bold">{{ $pkgpath }}</h1>
</div>
<div class="flex gap-4 text-gray-300 pt-0.5">
<span class="text-gray-300">Directory · {{ .FileCounter }} Files</span>
</div>
</div>

<div class="source-code font-mono mt-6">
<ul>
{{ range .Files }}
<li class="border-b first:border-t">
<a class="group py-2 flex justify-between items-center px-2 text-gray-600 line-clamp-2 hover:bg-gray-100" href="{{ $pkgpath }}$source&file={{ . }}">
<span class="flex items-center gap-2">
<svg class="w-4 h-4 shrink-0">
<use href="#ico-file"></use>
</svg>
{{ . }}
</span>
<span class="text-gray-300 group-hover:text-gray-600 font-interVar">Open</span>
</a>
</li>
{{ end }}
</ul>
</div>
</article>
{{ if .Article.ComponentContent }}
<div class="flex justify-between lg:col-span-7 mb-4 px-2 text-gray-900">
<span class="flex items-center gap-1 text-gray-600 font-mono">
<svg class="w-4 h-4 shrink-0">
<use href="#ico-readme"></use>
</svg>
<span>README.md</span>
</span>
<a href="{{ $pkgpath }}$source&file=README.md" class="text-gray-300 hover:text-gray-600">Open</a>
</div>
{{ template "layout/article" .Article }} {{ end }} {{ end }}
78 changes: 40 additions & 38 deletions gno.land/pkg/gnoweb/components/views/source.html
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
{{ define "renderSource" }}
<!-- Source ToC -->
{{ with render .ComponentTOC }}
{{ template "layout/aside" . }}
{{ end }}
<!-- Source ToC -->
{{ with render .ComponentTOC }} {{ template "layout/aside" . }} {{ end }}

<!-- Source Info -->
<header class="mt-10 lg:row-start-1 row-span-1 col-span-1 lg:col-span-7 flex flex-col xl:flex-row justify-between mb-4">
<div class="flex items-center">
<h1 class="text-600 text-gray-900 font-bold">{{ .FileName }}</h1>
</div>
<div class="flex gap-12 text-gray-300 items-center justify-between text-gray-400">
<span class="pt-0.5">{{ .FileSize }} · {{ .FileLines }} lines</span>
<div class="flex gap-2 xl:gap-4 items-center">
{{ if .IsMarkdown }} {{ if eq .Mode 0 }}
<a href="{{ .PkgPath }}$source&file={{ .FileName }}" class="flex items-center gap-0.5 pt-0.5 hover:text-gray-600">
<svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block">
<use href="#ico-content"></use>
</svg>
<span class="hidden xl:inline">Preview</span>
</a>
{{ else }}
<a href="{{ .PkgPath }}$source&file={{ .FileName }}&plain" class="flex items-center gap-0.5 pt-0.5 hover:text-gray-600">
<svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block">
<use href="#ico-code"></use>
</svg>
<span class="hidden xl:inline">Code</span>
</a>
{{ end }} {{ end }} {{ if not .IsMarkdown }}
<button class="js-copy-btn group flex items-center gap-0.5 pt-0.5 hover:text-gray-600" data-copy-btn="source-code">
{{ template "ui/copy" }}
<span class="hidden xl:inline">Copy</span>
</button>
{{ end }}

<!-- Source Info -->
<header
class="mt-10 lg:row-start-1 row-span-1 col-span-1 lg:col-span-7 flex flex-col xl:flex-row justify-between mb-4"
>
<div class="flex items-center">
<h1 class="text-600 text-gray-900 font-bold">{{ .FileName }}</h1>
<a href="{{ .FileDownload }}" class="flex items-center gap-0.5 pt-0.5 hover:text-gray-600" download="{{ .FileName }}">
<svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block">
<use href="#ico-ddl"></use>
</svg>
<span class="hidden xl:inline">Download</span>
</a>
</div>
<div
class="flex gap-12 text-gray-300 items-center justify-between text-gray-400"
>
<span class="pt-0.5">{{ .FileSize }} · {{ .FileLines }} lines</span>
<div class="flex gap-2 xl:gap-3 items-center">
<button
class="js-copy-btn group flex items-center gap-0.5 pt-0.5 hover:text-gray-600"
data-copy-btn="source-code"
>
{{ template "ui/copy" }}
<span class="hidden xl:inline">Copy</span>
</button>
<a
href="{{ .FileDownload }}"
class="flex items-center gap-0.5 pt-0.5 hover:text-gray-600"
download="{{ .FileName }}"
>
<svg class="w-5 h-5 xxl:w-4 xxl:h-4 shrink-0 inline-block">
<use href="#ico-ddl"></use>
</svg>
<span class="hidden xl:inline">Download</span>
</a>
</div>
</div>
</header>
</div>
</header>

<!-- Source Content -->
{{ template "layout/article" .Article }}
{{ end }}
<!-- Source Content -->
{{ template "layout/article" .Article }} {{ end }}
2 changes: 1 addition & 1 deletion gno.land/pkg/gnoweb/components/views/status.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{ define "status" }}
<div class="col-span-1 flex flex-col h-full w-full mt-10 pb-24 justify-center items-center">
<div class="col-span-1 flex flex-col h-full w-full mt-10 mb-24 justify-center items-center">
<img src="/public/imgs/gnoland.svg" alt="gno land" width="70px" height="70px" />
<h1 class="text-600 font-bold text-gray-600 pb-4 capitalize">{{ .Title }}</h1>
<p class="pb-3">{{ .Body }}</p>
Expand Down
Loading
Loading