Skip to content
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

Support the opengraph image meta tag #402

Merged
merged 1 commit into from
Jan 18, 2022
Merged

Conversation

mmattel
Copy link
Collaborator

@mmattel mmattel commented Jan 17, 2022

Referencing:
#396 (Revise head-meta-opengraph.hbs)
owncloud/docs#4639 (Add attribute necessary for embedding opengraph images in docs-ui automatically)

This PR adds opengrap images automagically dependent on the docs product.
Before merging this PR, the refrerenced docs PR should get merged to make the necessary attribute available.

  • Improving the contains.js script to cover pure contain matches and word-contain matches
    The latter is used for og:image. Note that the js code adoption for handelbars drove me nuts and has been tested intensively
  • Fixing the intend of opengrap and twitter so that the output is aligned. Used for better readaility
  • Adding handlebar code to the template to add og:image automatically based on the component name including a fallback if no match has been found

Examples:

Server

    <meta property="og:image" content="https://doc.owncloud.com/opengraph-server.png" />
    <meta property="og:image:alt" content="The ownCloud Server documentation" />

Desktop

    <meta property="og:image" content="https://doc.owncloud.com/opengraph-desktop.png" />
    <meta property="og:image:alt" content="The Desktop Client documentation" />

Branding

    <meta property="og:image" content="https://doc.owncloud.com/opengraph-default.png" />
    <meta property="og:image:alt" content="The Branded Clients documentation" />

Note that Branding does not have an own entry in the attributes list, therefore the default image is used. The Branding content will be integrated soon into the particular client documentation.

src/partials/head-meta-opengraph.hbs Show resolved Hide resolved
src/partials/head-meta-twitter.hbs Show resolved Hide resolved
Copy link
Contributor

@xoxys xoxys left a comment

Choose a reason for hiding this comment

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

I would suggest prettifying the HTML in the public folder after the Antora build instead. Anyway, approved.

@xoxys
Copy link
Contributor

xoxys commented Jan 17, 2022

The downside of this variant is that every formatter on earth will revert it or the files need to be excluded from auto-formatting.

@mmattel
Copy link
Collaborator Author

mmattel commented Jan 17, 2022

prettifying the HTML in the public folder after the Antora build

Agreed, but lets do this in another step.
If we found a usable one and have implemented it, it is easy to remove this intends

@mmattel mmattel merged commit 83e7d23 into master Jan 18, 2022
@delete-merged-branch delete-merged-branch bot deleted the conditional_opengraph_images branch January 18, 2022 07:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants