[SR-15914] Quickly copy code snippets from documentation

[swift-ci]

Previous ID	SR-15914
Radar	None
Original Reporter	marinaaisa (JIRA User)
Type	New Feature

Attachment: Download

Additional Detail from JIRA

Votes	0
Component/s	Swift-DocC-Render
Labels	New Feature
Assignee	None
Priority	Medium

md5: 5f55926266c45b3d40ef1c9effa5213b

Issue Description:

Quickly copy code snippets from documentation using a button that appears on code snippet's hover state.

It improves the UX for this specific action

Inspitation: https://content.nuxtjs.org/snippets/

[khubaibalam2000]

Can I work on this issue? I have an idea how to resolve this.

[marinaaisa]

Can I work on this issue? I have an idea how to resolve this.

Hi @khubaibalam2000 , of course! Feel free to open a PR against the repo! Here you have information about how to contribute: https://github.com/apple/swift-docc-render/blob/main/CONTRIBUTING.md
Thank you so much for your interest in contributing!

[khubaibalam2000]

Thank You. I have a question. I am setting up the "Swift-docc-render" repository locally in my system. Upon executing "npm run serve" command, the server runs but it gives this error.

Can you please help me with this?

[marinaaisa]

Thank You. I have a question. I am setting up the "Swift-docc-render" repository locally in my system. Upon executing "npm run serve" command, the server runs but it gives this error.

Can you please help me with this?

Hi @khubaibalam2000 , that error about the theme-settings.json is totally fine. It won't block you from previewing any doccarchive, it's just an optional theme file.

Are you using a doccarchive when running the repo? I won't work without it.

I attach one as example for you to be able to test: SlothCreator.doccarchive.zip

You will need to run the project doing: VUE_APP_DEV_SERVER_PROXY=[path-to-doccarchive] npm run serve

When going to: http://localhost:8080/documentation/slothcreator you will see this:

then you can go to some page like http://localhost:8080/documentation/slothcreator/foodgenerator/generatefood(in:) where there is a code snippet, for you to manually test your progress.

Let me know if you face any other new issue on the way! :)

[natikgadzhi]

I took a closer look! Usually (like the linked Inspiration page in Nuxt docs), you'd have a copy button in the top-right corner, on the same toolbar where the filename is: https://content.nuxt.com/components/content-list

DocC Render currently has two typical presentations of code listings:

Code listings in markdown (articles or symbol docs). They don't present the filename, so there's no toolbar	The code listings in tutorials. They do have file names, and, optionally, previews images

The easiest way to add the copy button would be to make a new component for the button and style to be position: absolute; right: 40px; top: 40px or similar within .code-listing, or do whatever will have the same effect with flex box ;-)

If we go that route, we'd need to add more padding to the Preview component, because right now it's on the right and pretty close to the top of the whole code listing component.

Related: I'm looking at apple/swift-docc#737 (comment) — and if we end up tweaking swift-markdown and swift-docc so they support additional parameters in Markdown code blocks, we could also bring support for filenames for code listings in articles!

``` filename=ContentView.swift showLineNumbers
import SwiftUI

struct ContentView: View {
}

I have the whole pipeline running locally, but I'll likely only get to this within this or next week, got a few other things to take care of ;(