go/golang-saas-starter-kit
1
0
Fork 0
mirror of https://github.com/raseels-repos/golang-saas-starter-kit.git synced 2025-08-10 22:41:25 +02:00
Code Issues Releases Activity

Fixed example responsive images page.

Browse Source
This commit is contained in:
Lee Brown
2019-08-05 02:36:54 -08:00
parent 920d413c97
commit d574f8e284
4 changed files with 105 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
cmd/web-app/handlers/examples.go
View File

@@ -3,12 +3,14 @@ package handlers
import ( import (
"context" "context"
"net/http" "net/http"
"net/http/httptest"
"geeks-accelerator/oss/saas-starter-kit/internal/platform/web" "geeks-accelerator/oss/saas-starter-kit/internal/platform/web"
"geeks-accelerator/oss/saas-starter-kit/internal/platform/web/webcontext" "geeks-accelerator/oss/saas-starter-kit/internal/platform/web/webcontext"
"geeks-accelerator/oss/saas-starter-kit/internal/platform/web/weberror" "geeks-accelerator/oss/saas-starter-kit/internal/platform/web/weberror"
"github.com/gorilla/schema" "github.com/gorilla/schema"
"github.com/pkg/errors" "github.com/pkg/errors"
"golang.org/x/net/html"
) )
// Example represents the example pages // Example represents the example pages
@@ -129,8 +131,57 @@ func (h *Examples) Images(ctx context.Context, w http.ResponseWriter, r *http.Re
// List of image sizes that will be used to resize the source image into. The resulting images will then be included // List of image sizes that will be used to resize the source image into. The resulting images will then be included
// as apart of the image src tag for a responsive image tag. // as apart of the image src tag for a responsive image tag.
data := map[string]interface{}{ data := map[string]interface{}{
"imgSizes": []int{100, 200, 300, 400, 500}, "imgSizes": []int{100, 200, 300, 400, 500},
"imgResizeDisabled": false,
} }
// Render the example page to detect in image resize is enabled, since the config is not passed to handlers and
// the custom HTML resize function is init in main.go.
rr := httptest.NewRecorder()
err := h.Renderer.Render(ctx, rr, r, TmplLayoutBase, "examples-images.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
if err != nil {
return err
}
// Parsed the rendered response looking for an example image tag.
exampleImgID := "imgVerifyResizeEnabled"
var exampleImgAttrs []html.Attribute
doc, err := html.Parse(rr.Body)
if err != nil {
return err
}
var f func(*html.Node)
f = func(n *html.Node) {
if n.Type == html.ElementNode && n.Data == "img" {
for _, a := range n.Attr {
if a.Key == "id" && a.Val == exampleImgID {
exampleImgAttrs = n.Attr
break
}
}
}
for c := n.FirstChild; c != nil; c = c.NextSibling {
f(c)
}
}
f(doc)
// If the example image has the attribute srcset then we know resize is enabled.
var exampleImgHasSrcSet bool
if len(exampleImgAttrs) > 0 {
for _, a := range exampleImgAttrs {
if a.Key == "srcset" {
exampleImgHasSrcSet = true
break
}
}
}
// Image resize must be disabled as could not find the example image with attribute srcset.
if !exampleImgHasSrcSet {
data["imgResizeDisabled"] = true
}
// Re-render the page with additional data and return the results.
return h.Renderer.Render(ctx, w, r, TmplLayoutBase, "examples-images.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data) return h.Renderer.Render(ctx, w, r, TmplLayoutBase, "examples-images.gohtml", web.MIMETextHTMLCharsetUTF8, http.StatusOK, data)
} }

6
cmd/web-app/handlers/routes.go
View File

@@ -119,9 +119,9 @@ func APP(shutdown chan os.Signal, log *log.Logger, env webcontext.Env, staticDir
ex := Examples{ ex := Examples{
Renderer: renderer, Renderer: renderer,
} }
app.Handle("POST", "/examples/flash-messages", ex.FlashMessages) app.Handle("POST", "/examples/flash-messages", ex.FlashMessages, mid.AuthenticateSessionOptional(authenticator))
app.Handle("GET", "/examples/flash-messages", ex.FlashMessages) app.Handle("GET", "/examples/flash-messages", ex.FlashMessages, mid.AuthenticateSessionOptional(authenticator))
app.Handle("GET", "/examples/images", ex.Images) app.Handle("GET", "/examples/images", ex.Images, mid.AuthenticateSessionOptional(authenticator))
// Register geo // Register geo
g := Geo{ g := Geo{

73
cmd/web-app/templates/content/examples-images.gohtml
View File

@@ -4,40 +4,65 @@
{{end}} {{end}}
{{define "content"}} {{define "content"}}
<h3>S3ImgSrcLarge</h3> {{ if .imgResizeDisabled }}
<p>320, 480, 800</p> <h3>Image Resize Not enabled</h3>
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<h3>S3ImgThumbSrcLarge</h3> AWS credentials must be set and then the following configs be set as well.
<p>320, 480, 800</p> <pre>
<img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/> export WEB_APP_SERVICE_S3_BUCKET_PUBLIC=example-bucket-public
export WEB_APP_SERVICE_STATICFILES_IMG_RESIZE_ENABLED=1
</pre>
<h3>S3ImgSrcMedium</h3> {{ else }}
<p>320, 640</p> <h3>S3ImgSrcLarge</h3>
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/> <p>320, 480, 800</p>
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgThumbSrcMedium</h3> <h3>S3ImgThumbSrcLarge</h3>
<p>320, 640</p> <p>320, 480, 800</p>
<img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/> <img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrcMedium</h3>
<p>320, 640</p>
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrcSmall</h3> <h3>S3ImgThumbSrcMedium</h3>
<p>320</p> <p>320, 640</p>
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/> <img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrcSmall</h3>
<p>320</p>
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgThumbSrcSmall</h3> <h3>S3ImgThumbSrcSmall</h3>
<p>320</p> <p>320</p>
<img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/> <img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<h3>S3ImgSrc</h3> <h3>S3ImgSrc</h3>
<p>returns Src array</p> <p>returns Src array</p>
<img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }}/> <img id="imgVerifyResizeEnabled" {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes &#x7D;&#x7D; &gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }} &gt;</pre>
<h3>S3ImgUrl</h3> <h3>S3ImgUrl</h3>
<p>Returns URL for file on S3</p> <p>Returns URL for file on S3</p>
<img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" /> <img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" /><br/>
HTML: <pre>&lt;img src="&#x7B;&#x7B; S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 &#x7D;&#x7D;" &gt;</pre>
Result: <pre>&lt;img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" &gt;</pre>
{{ end }}
{{end}} {{end}}
{{define "js"}} {{define "js"}}

2
go.mod
View File

@@ -48,7 +48,7 @@ require (
github.com/urfave/cli v1.20.0 github.com/urfave/cli v1.20.0
github.com/xwb1989/sqlparser v0.0.0-20180606152119-120387863bf2 github.com/xwb1989/sqlparser v0.0.0-20180606152119-120387863bf2
golang.org/x/crypto v0.0.0-20190701094942-4def268fd1a4 golang.org/x/crypto v0.0.0-20190701094942-4def268fd1a4
golang.org/x/net v0.0.0-20190724013045-ca1201d0de80 // indirect golang.org/x/net v0.0.0-20190724013045-ca1201d0de80
golang.org/x/sys v0.0.0-20190730183949-1393eb018365 // indirect golang.org/x/sys v0.0.0-20190730183949-1393eb018365 // indirect
golang.org/x/text v0.3.2 golang.org/x/text v0.3.2
golang.org/x/tools v0.0.0-20190730205120-7deaedd405c4 // indirect golang.org/x/tools v0.0.0-20190730205120-7deaedd405c4 // indirect