From fc0d40b9d0fa1e76e2761e5d8ce809451f4ebc86 Mon Sep 17 00:00:00 2001 From: Bradley Erickson Date: Sat, 7 May 2022 15:01:38 -0400 Subject: [PATCH 1/5] Updated meta tag information --- .gitignore | 3 ++- dash_labs/plugins/pages.py | 13 +++++++------ docs/demos/multi_page_meta_tags/pages/home.py | 2 ++ 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index fbe057d..ac6749b 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ dist cache .pytest_cache __pycache__ -venv \ No newline at end of file +venv +.venv diff --git a/dash_labs/plugins/pages.py b/dash_labs/plugins/pages.py index b8ff96a..a469dd2 100644 --- a/dash_labs/plugins/pages.py +++ b/dash_labs/plugins/pages.py @@ -401,9 +401,9 @@ def interpolate_index(**kwargs): start_page, path_variables = _path_to_page( app, flask.request.path.strip("/") ) - image = start_page.get("image", "") - if image: - image = app.get_asset_url(image) + + image_url = start_page.get("image_url", "") + url = start_page.get("url", "") title = start_page.get("title", app.title) if callable(title): @@ -424,8 +424,8 @@ def interpolate_index(**kwargs): {title} - - + + @@ -451,8 +451,9 @@ def interpolate_index(**kwargs): ).format( metas=kwargs["metas"], description=description, + url=url, title=title, - image=image, + image=image_url, favicon=kwargs["favicon"], css=kwargs["css"], app_entry=kwargs["app_entry"], diff --git a/docs/demos/multi_page_meta_tags/pages/home.py b/docs/demos/multi_page_meta_tags/pages/home.py index 4135e7c..fa2746f 100644 --- a/docs/demos/multi_page_meta_tags/pages/home.py +++ b/docs/demos/multi_page_meta_tags/pages/home.py @@ -6,6 +6,8 @@ __name__, path="/", image="birdhouse.jpeg", + image_url="url_to_image_whereever_its_hosted", + url="overall_site_url", title="(home) The title, headline or name of the page", description="(home) A short description or summary 2-3 sentences", ) From 4ef679ced6b5f086c77de249dd246745614594a2 Mon Sep 17 00:00:00 2001 From: Bradley Erickson Date: Sat, 7 May 2022 15:12:09 -0400 Subject: [PATCH 2/5] Updated docs --- docs/10-MultiPageDashApp-MetaTags.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/10-MultiPageDashApp-MetaTags.md b/docs/10-MultiPageDashApp-MetaTags.md index 4f01380..74e74f5 100644 --- a/docs/10-MultiPageDashApp-MetaTags.md +++ b/docs/10-MultiPageDashApp-MetaTags.md @@ -31,6 +31,12 @@ See the code in `/demos/multi_page_meta_tags` - A logo at `assets/logo.` When inferring the image file, it will look for the following extensions: APNG, AVIF, GIF, JPEG, PNG, SVG, WebP. These are the [most commonly used image file types](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) used on the web. +- `image_url`: + The image url is used to point to a hosted image online through its full path. + The head matter does not handle relative paths (as far as I know), so we need to supply the full path. + +Example of the difference between `image` and `image_url`: +`image=birdhouse.jpeg` and `image_url=http://www.yourdomain.com/assets/birdhouse.jpeg` In the `assets` folder we have 4 jpeg images with the following file names: - app.jpeg @@ -40,6 +46,8 @@ In the `assets` folder we have 4 jpeg images with the following file names: The `title` and `description` will be derrived from the module name if none is supplied. +The `url` will be the full url when deployed. Twitter needs the full url to properly supply a card. + In the `pages` folder we have 3 simple pages to demonstrate this feature. #### `a_page.py` @@ -86,6 +94,8 @@ dash.register_page( __name__, path="/", image="birdhouse.jpeg", + image_url="http://yourdomain.com/assets/birdhouse.jpeg", + url="http://yourdomain.com/", # matches the path parameter with the full domain title="(home) The title, headline or name of the page", description="(home) A short description or summary 2-3 sentences", ) From a497ed72d9004a668dfbcbe41324f087e24bc4d8 Mon Sep 17 00:00:00 2001 From: Bradley Erickson Date: Sat, 7 May 2022 19:19:50 -0400 Subject: [PATCH 3/5] Updated --- dash_labs/plugins/pages.py | 15 ++++++++++----- docs/10-MultiPageDashApp-MetaTags.md | 3 +-- docs/demos/multi_page_meta_tags/pages/home.py | 2 -- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/dash_labs/plugins/pages.py b/dash_labs/plugins/pages.py index a469dd2..8289a5c 100644 --- a/dash_labs/plugins/pages.py +++ b/dash_labs/plugins/pages.py @@ -402,8 +402,12 @@ def interpolate_index(**kwargs): app, flask.request.path.strip("/") ) - image_url = start_page.get("image_url", "") - url = start_page.get("url", "") + image = start_page.get("image", "") + if image: + image = app.get_asset_url(image) + + # get the specified url or create it based on the passed in image + image_url = start_page.get("image_url", "".join([flask.request.url_root, image.lstrip("/")])) title = start_page.get("title", app.title) if callable(title): @@ -428,7 +432,7 @@ def interpolate_index(**kwargs): - + @@ -451,9 +455,10 @@ def interpolate_index(**kwargs): ).format( metas=kwargs["metas"], description=description, - url=url, + url=flask.request.url, title=title, - image=image_url, + image=image, + image_full=image_url, favicon=kwargs["favicon"], css=kwargs["css"], app_entry=kwargs["app_entry"], diff --git a/docs/10-MultiPageDashApp-MetaTags.md b/docs/10-MultiPageDashApp-MetaTags.md index 74e74f5..f7d50b0 100644 --- a/docs/10-MultiPageDashApp-MetaTags.md +++ b/docs/10-MultiPageDashApp-MetaTags.md @@ -33,7 +33,7 @@ See the code in `/demos/multi_page_meta_tags` These are the [most commonly used image file types](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) used on the web. - `image_url`: The image url is used to point to a hosted image online through its full path. - The head matter does not handle relative paths (as far as I know), so we need to supply the full path. + If the image_url is not provided, we will automatically create the full url based on the `image` attribute. Example of the difference between `image` and `image_url`: `image=birdhouse.jpeg` and `image_url=http://www.yourdomain.com/assets/birdhouse.jpeg` @@ -95,7 +95,6 @@ dash.register_page( path="/", image="birdhouse.jpeg", image_url="http://yourdomain.com/assets/birdhouse.jpeg", - url="http://yourdomain.com/", # matches the path parameter with the full domain title="(home) The title, headline or name of the page", description="(home) A short description or summary 2-3 sentences", ) diff --git a/docs/demos/multi_page_meta_tags/pages/home.py b/docs/demos/multi_page_meta_tags/pages/home.py index fa2746f..4135e7c 100644 --- a/docs/demos/multi_page_meta_tags/pages/home.py +++ b/docs/demos/multi_page_meta_tags/pages/home.py @@ -6,8 +6,6 @@ __name__, path="/", image="birdhouse.jpeg", - image_url="url_to_image_whereever_its_hosted", - url="overall_site_url", title="(home) The title, headline or name of the page", description="(home) A short description or summary 2-3 sentences", ) From 87a18fe60fae22b28e72e1c72b6f6b0ec439744f Mon Sep 17 00:00:00 2001 From: Bradley Erickson Date: Sat, 7 May 2022 19:56:13 -0400 Subject: [PATCH 4/5] Both og and twitter use image url --- dash_labs/plugins/pages.py | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/dash_labs/plugins/pages.py b/dash_labs/plugins/pages.py index 8289a5c..4293216 100644 --- a/dash_labs/plugins/pages.py +++ b/dash_labs/plugins/pages.py @@ -42,6 +42,7 @@ def register_page( title=None, description=None, image=None, + image_url=None, redirect_from=None, layout=None, **kwargs, @@ -100,6 +101,11 @@ def register_page( - A logo at `assets/logo.` When inferring the image file, it will look for the following extensions: APNG, AVIF, GIF, JPEG, PNG, SVG, WebP. + - `image_url`: + This will use the exact image url provided when sharing on social media. + This is appealing when the image you want to share is hosted on a CDN. + Using this attribute overrides the image attribute. + - `redirect_from`: A list of paths that should redirect to this page. For example: `redirect_from=['/v2', '/v3']` @@ -432,7 +438,7 @@ def interpolate_index(**kwargs): - + @@ -457,8 +463,7 @@ def interpolate_index(**kwargs): description=description, url=flask.request.url, title=title, - image=image, - image_full=image_url, + image=image_url, favicon=kwargs["favicon"], css=kwargs["css"], app_entry=kwargs["app_entry"], From 2f60e3ed84f13a5628377ace6229b0147abc5ea6 Mon Sep 17 00:00:00 2001 From: Bradley Erickson Date: Sat, 7 May 2022 20:39:32 -0400 Subject: [PATCH 5/5] Update pages.py --- dash_labs/plugins/pages.py | 1 + 1 file changed, 1 insertion(+) diff --git a/dash_labs/plugins/pages.py b/dash_labs/plugins/pages.py index 4293216..a6917d4 100644 --- a/dash_labs/plugins/pages.py +++ b/dash_labs/plugins/pages.py @@ -183,6 +183,7 @@ def register_page( page.update( image=(image if image is not None else _infer_image(module)), supplied_image=image, + image_url=image_url ) page.update(redirect_from=redirect_from)