Other assets (image templates for lockup/landmark/etc..)

[PtitBen]

Outcome

Discovery piece: Understand where document images, templates etc. should be located in the most logical and optimal place for required usage.

Scope

• Explore and compare different options
• Identify all usage requirements
• Gain agreement by team
• Test that all necessary different file types are supported (webp, svg, psd, jpg, png etc)

[RobTobias123]

Have created a 'Dark Mode' version of the Nucleus logo SVG for use on the top left of the docs UI. Created from the exiting SVG and with the word part turned white. Saved to the 'public' folder same as existing (on my 'content-update' branch):

Location:

SVG:

[RobTobias123]

@andij @MekalaNagarajan-Centrica With reference to yesterday's conversation regarding location of images I've explored a few options this morning...

Image location options

What would be the right structure?

Github:

An image hosted on GitHub full path (example):
https://raw.githubusercontent.com/withastro/docs/main/public/default-og-image.png

In the assets folder:

Assets located image. This seems a long way away and needs untidy and prone to typos 4 x ../ on the link.
../../../../assets/images/ns-accordion/contentguidance-ns-accordion.webp

Closer together in components/images/ns-accordion folder:

This location is similar to the existing docs. components/images/ns-accordion located image.
../images/ns-accordion/contentguidance-ns-accordion.webp

In the same folder components/ns-accordion/images:

Third possible way could be to include even closer in the components/ns-accordion folder alongside the .md files. I was concerned this might then appear in the right hand side links for ‘On this page’ but it doesn’t. So this would be my preferred option I think as it’s right next to the doc md files using this image. components/ns-accordion/images located image
./images/contentguidance-ns-accordion.webp

@andij - I know you mentioned that it needed to work in GitHub too. Do you have an example path? I put the one in first, above but not sure if that’s what you meant? It would make sense to me if the images are stored in docs alongside the mds.

[andij]

There is some guidance in the Astro docs related to the location of assets.

https://docs.astro.build/en/guides/images/#overview
and
https://docs.astro.build/en/guides/images/#images-in-markdown-files

[RobTobias123]

Point to be aware of: The width of the main content panel in Astro is smaller than the current docs, making images smaller. Images may require re-scaling if things look too small, if that's the case we would need to revise the agreed consistent size and scale with which we display.

[RobTobias123]

CReated and added Nucleus favicon svg...

[andij]

Is there any difference between this favicon and the one that exists for the current Docs?

• https://github.com/centrica-engineering/nucleus-docs/tree/main/static/favicon

[RobTobias123]

Visually, no. Format, yes. Following the existing format (SVG) used on the default starlight favicon, I replaced it with a Nucleus SVG. I did initially try a .ico but didn't appear to work.

[RobTobias123]

Identified asset types:

Template:

Ns-image placeholders (JPGs)

Video:

Foundations/typography Drew re Modular Scale
Component Ns-video (YouTube link - still Rick?!)

Emojis:

Foundations/viewports
Introduction vision mission and purpose

Components images (webp):

•	Guidance labelled anatomy images (a visual reference of a component will undoubtedly be appreciated by designers) 
•	Example variants/states - this could very well be coded examples with code snippets (eg. Prime candidate: ns-alert)
•	Best practice examples dos and don’ts (eg. Ns-editorial, ns-landmark)
•	Combined examples eg. Ns-expander doc with it in ns-product-card
•	Icons overview of types / all
•	Illustrations overview?
•	Timeline features 
•	Timeline Status elements
•	Pattern examples such as ns-testimonial 3 in a row etc.
•	Table with data example
•	NSX experience examples

Foundations images (webp):

•	Structure 
•	Photography aspect ratios examples etc
•	Lists
•	Illustrations Grids (*need updating as does the colour description below)

Patterns images (webp)

•	Journeys thumbnail diagram
•	Asking for info inputter examples
•	Messaging egs.

[RobTobias123]

As suspected, the image formats work as follows:

Supported formats tried and that work: WEBP, JPG, PNG, GIF

Image formats that do not work: PSD