This plugin inctroduces a chatgpt Liquid filter that formats ChatGPT conversations. It mostly uses CSS to navigate in branching conversations (except for links to specific messages inside a conversation, see "Usage" below). A live demo of deploying the demo branch of this repository to Github pages is available (code)
Install the gem and add to the application's Gemfile by executing:
$ bundle add jekyll-chatgpt
If bundler is not being used to manage dependencies, install the gem by executing:
$ gem install jekyll-chatgpt
After installing, don't forget to update your _config.yml to include the plugin :
plugins: [other-plugins, jekyll-picture-tag-ng]Optionally, include a stylesheet for code syntax highlighting in ChatGPT output. If you already have a code highlighting theme set up for your site, it should automatically be used.
- Download a conversation from your ChatGPT history. When on the ChatGPT web page, open your browser dev-tools (usually using F12) and go to the "Network" tab. Now, pick a conversation in the web-app. The URL in your browser should now look like
chat.openapi.com/chat/{some-random-looking-id}. In the network tab of the developer tools, find the request to{some-random-looking-id}and right-click on it and pick "Copy > Copy response". You can now paste what you just copied into a JSON file inside your_datafolder (for instance,_data/chatgpt/test_conversation.json). - You can now use
{{ site.data.chatgpt['test_conversation'] | chatgpt }}anywhere in your liquid-rendered content to include the conversation in your website. This will render markdown in messages by default. You can disable markdown rendering by passing thefalseargument to the filter :{{ site.data.chatgpt['test_conversation'] | chatgpt: false }}. - You will be able to link to specific messages in conversations by using the
chatgpt_message_lageltag in the following way :{% chatgpt_message_label [MESSAGE_ID] in [CONVERSATION] %}[LABEL_TEXT]{% endchatgpt_message_label %}where[MESSAGE_ID]is the start of a message id ;[CONVERSATION]is the variable representing a conversation ;[LABEL_TEXT]is the displayed link text. Here is an example from the demo page :{% chatgpt_message_label 55bb5 in site.data.chatgpt["date"] %}a message{% endchatgpt_message_label %}. This functionality uses Javascript, if you want to use it you must add the following tag to your<head>:<script defer src="/chatgpt_message_label.js"></script>(the JS file is automatically written to your website's output directory)
The necessary styles will automatically be inlined when using the filter. You can override the default colors by providing the following variables in your _sass/_colors.sass file : $color1, $color1-alt, $color2, $color2-alt, $cyan
You can put your custom SASS inside _sass/_chatgpt_custom.sass. If the file exists, it will be imported and the properties set in your custom stylesheet will take precedence by using CSS layers. The demo uses this to add rounded borders to the controls.
You can browse the code for the live demo which is intended to be a minimal example of using the plugin.
After cloning the repo, you can run the following commands in a local jekyll website's folder to start hacking on the code of jekyll-chatgpt (you'll need to replace the path in the second command :
$ bundle remove jekyll-chatgpt # if you previously used jekyll-chatgpt from rubygems
$ bundle add --path /absolute/or/relative/path/to/your/local/jekyll-chatgpt/repo jekyll-chatgpt
$ bundle exec jekyll serve # Re-run this when you want to test changes to your local jekyll-chatgpt
To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the .gem file to rubygems.org.
Bug reports and pull requests are welcome on GitHub at https://github.com/pcouy/jekyll-chatgpt.
The gem is available as open source under the terms of the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent