RFC: Move to VSCode Profile Export

[diego3g]

Today we are using copy/paste Gists to share VSCode settings/extensions but it is a manual task as VSCode Settings Sync does not support Gist anymore.

Yesterday I found out that VSCode has a new Profiles setting where we can switch between a set of preconfigured config/extensions/keybindings.

Also, VSCode supports exporting the profile as a Gist and copying the link to the clipboard.

The only problem here is that the Gist is private so we'll need to add an access token on Next so we can pull data from it.

Example of Gist: https://gist.github.com/diego3g/44fb3d8ef7837854ef69798a121abef3

[hqnicolas]

import fetch from 'node-fetch' and Add your access token to the request header.
Use the fetch() method to make an API request to the Gist API and retrieve the Gist contents.
Construct the API URL for the Gist you want to access by concatenating the Gist API base URL (https://gist.github.com/diego3g/44fb3d8ef7837854ef69798a121abef3) with the Gist ID.
More

[guilherssousa]

Recently Next.js showcased the new API Routes format for app/ dir, by using those routes we can fetch the data securely without exposing personal keys :)

[diego3g]

Recently Next.js showcased the new API Routes format for app/ dir, by using those routes we can fetch the data securely without exposing personal keys :)

We can also fetch the data inside the component without compromising the personal key, as the requests will always be made on the server.

[mateusabelli]

Hello there, here is some thoughts on how to implement this feature.

After exporting the Profile from VSCode a new Secret Gist will be created on your account by default. To fetch this Gist you need to copy its ID, ex: your-gist-id-123 and make a fetch request:

fetch('https://api.github.com/gists/your-gist-id-123', {
  method: 'GET',
  headers: {
    Authorization: `Bearer ${process.env.GIST_ACCESS_TOKEN}`
  }
})

To generate the token its quite easy just to go Settings > Developer Settings > Personal Access Tokens > New Token (Classic) > Add a name, set an expiration time, and choose Gists permission.

Some things that I noticed:

• This fetch must be authenticate with a token and the Gist must belong to your account or you need to provide a token generated for the gist owner account.
• Each time you export the Profile a new gist is created, so you might need to do some manual cleaning of older profile exports on your gists.
• This new gist format from Profile may require some extra cleanup and formatting code to split and serve the rest of the components data. Here is and example output that I received in my tests:

{
  ["..."]
  "content": "{\"name\":\"Mateus\",\"settings\":\"{\\\"settings\\\":\\\"{\\\\r\\\\n  \\\\\\\"workbench.startupEditor\\\\\\\": \\\\\\\"none\\\\\\\",\\\\r\\\\n"
  ["..."]
}

Here is some reference docs that I've used:

• https://docs.github.com/en/rest/gists/gists?apiVersion=2022-11-28
• https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

Please let me know what you think

[diego3g]

@mateusabelli Thanks for that! I'm still trying to find somehow to avoid copying the gist ID manually, but for now I think that's it.

[mateusabelli]

@diego3g Oh that's nice, I thought about some ideas to avoid having to copy the ID manually.
It goes like this, instead of fetching the Gist directly we can fetch all your Gists.

fetch('https://api.github.com/users/YOUR-USERNAME/gists', {
  method: 'GET',
  // We still need the token for the secret Gists
  headers: { 
    Authorization: `Bearer ${process.env.GIST_ACCESS_TOKEN}`
  }
})

Heres and example response from that fetch:

[
  {
    ["..."]
    "files": {
      "TITLE OF YOUR GIST": {
        "filename": "TITLE OF YOUR GIST",
        "type": "text/plain",
        "language": null,
        "raw_url": "THE URL OF YOUR RAW GIST",
        "size": 88829
      }
    },
    ["..."]
  },
]

Now with that data, we can write code that targets Gists containing a certain title and then access their raw_url. I feel like this approach could add a bit of overhead to the serverless api but if it works, it could be a nice automation solution. Please let me know what you think.

[guilherssousa]

What about instead of copy-pasting the Gist ID on the code, to use the new Vercel Edge Config feature? It lets you change data on the fly and it is good for A/B tests, but it may work for this situation.

[mateusabelli]

What about instead of copy-pasting the Gist ID on the code, to use the new Vercel Edge Config feature? It lets you change data on the fly and it is good for A/B tests, but it may work for this situation.

@guilherssousa I think that's a great idea, Edge Config could definitely replace the hard coded id.

There is only one thing that I noticed with this approach, since VSCode won't update the previous Gist published, it would be required to manually update the Gist ID there too, it might not be an issue because its super simple to use but just something to consider. Please let me know what you think.