├── .hugo_build.lock
├── .gitignore
├── README.md
├── giscus.json
├── assets
├── img
│ ├── favicon.ico
│ ├── profile.png
│ ├── favicon16x16.ico
│ └── favicon32x32.ico
├── css
│ └── custom.css
└── svg
│ └── safari_pinned_tab.svg
├── vercel.json
├── content
├── search.md
├── archives.md
├── posts
│ ├── how-to-create-discord-bot-with-bun-1.md
│ ├── first.md
│ └── how-to-use-gemini-call-function-api.md
└── emojis.md
├── .gitmodules
├── .markdownlint.json
├── layouts
└── partials
│ └── comments.html
├── archetypes
└── default.md
├── LICENSE
└── config.yml
/.hugo_build.lock:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | public
2 | resources
3 | *.ngrok*
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # site
2 | My site using hugo
3 |
--------------------------------------------------------------------------------
/giscus.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultCommentOrder": "newest"
3 | }
4 |
--------------------------------------------------------------------------------
/assets/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syrup/site/main/assets/img/favicon.ico
--------------------------------------------------------------------------------
/assets/img/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syrup/site/main/assets/img/profile.png
--------------------------------------------------------------------------------
/assets/img/favicon16x16.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syrup/site/main/assets/img/favicon16x16.ico
--------------------------------------------------------------------------------
/assets/img/favicon32x32.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/syrup/site/main/assets/img/favicon32x32.ico
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "build": {
3 | "env": {
4 | "HUGO_VERSION": "0.127.0"
5 | }
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/content/search.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Search"
3 | placeholder: Search what you want ...
4 | layout: "search"
5 | ---
6 |
--------------------------------------------------------------------------------
/content/archives.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Archive"
3 | layout: "archives"
4 | # url: "/archives"
5 | summary: "archives"
6 | ---
7 |
--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "themes/PaperMod"]
2 | path = themes/PaperMod
3 | url = https://github.com/adityatelange/hugo-PaperMod.git
4 |
--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 | "MD033": {
3 | "allowed_elements": ["details", "summary", "script"]
4 | },
5 | "MD013": false,
6 | "MD029": false
7 | }
8 |
--------------------------------------------------------------------------------
/assets/css/custom.css:
--------------------------------------------------------------------------------
1 | /* @import url('https://cdn.rawgit.com/lonekorean/gist-syntax-themes/848d6580/stylesheets/chaos.css'); */
2 |
3 | .chroma {
4 | background-color: unset;
5 | }
6 |
7 | .comment-section-class {
8 | background-color: inherit;
9 | /* Or specify the exact color if 'inherit' doesn't work */
10 | }
--------------------------------------------------------------------------------
/layouts/partials/comments.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/archetypes/default.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: '{{ replace .File.ContentBaseName "-" " " | title }}'
3 | date: {{ .Date }}
4 | # weight: 1
5 | aliases: [""]
6 | tags: [""]
7 | author: "Syrup"
8 | showToc: true
9 | TocOpen: false
10 | draft: true
11 | hidemeta: false
12 | comments: true
13 | description: "Desc Text."
14 | canonicalURL: "https://canonical.url/to/page"
15 | disableHLJS: false
16 | disableShare: false
17 | hideSummary: false
18 | searchHidden: false
19 | ShowReadingTime: true
20 | ShowBreadCrumbs: true
21 | ShowPostNavLinks: true
22 | ShowWordCount: true
23 | ShowRssButtonInSectionTermList: true
24 | UseHugoToc: true
25 | cover:
26 | image: "" # image path/url
27 | alt: "" # alt text
28 | caption: "" # display caption under cover
29 | relative: false # when using page bundles set this to true
30 | hidden: true # only hide on current single page
31 | editPost:
32 | URL: "https://github.com/Syrup/site/content"
33 | Text: "Suggest Changes" # edit text
34 | appendFilePath: true # to append file path to Edit link
35 | ---
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Fabian Maulana
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/content/posts/how-to-create-discord-bot-with-bun-1.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'How to Create Discord Bot With Bun #1'
3 | date: 2024-07-18T22:57:29+07:00
4 | # weight: 1
5 | tags: ["typescript", "bun"]
6 | author: "Syrup"
7 | showToc: true
8 | TocOpen: false
9 | draft: false
10 | hidemeta: false
11 | comments: true
12 | ---
13 |
14 | How to create a Discord bot using Bun:
15 |
16 | 1. Install the necessary dependencies:
17 |
18 | ```bash
19 | bun add discord.js
20 | ```
21 |
22 | 2. Create a new file, let's say `bot.js`, and add the following code:
23 |
24 | ```javascript
25 | const Discord = require('discord.js');
26 | const client = new Discord.Client();
27 |
28 | client.on('ready', () => {
29 | console.log(`Logged in as ${client.user.tag}!`);
30 | });
31 |
32 | client.on('message', msg => {
33 | if (msg.content === 'ping') {
34 | msg.reply('Pong!');
35 | }
36 | });
37 |
38 | client.login('YOUR_DISCORD_BOT_TOKEN');
39 | ```
40 |
41 | 3. Replace `'YOUR_DISCORD_BOT_TOKEN'` with your actual Discord bot token. You can obtain a token by creating a new bot on the Discord Developer Portal.
42 |
43 | 4. Save the file and run it using Node.js:
44 |
45 | ```bash
46 | node bot.js
47 | ```
48 |
49 | 5. Your bot should now be online and ready to respond to the "ping" command with "Pong!".
50 |
51 | Remember to customize the bot's behavior and add more functionality as needed.
52 |
--------------------------------------------------------------------------------
/content/posts/first.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "My first post"
3 | date: 2024-06-26T15:33:19+07:00
4 | # weight: 1
5 | aliases: ["/first"]
6 | tags: ["first"]
7 | author: "Syrup"
8 | showToc: true
9 | TocOpen: false
10 | # draft: true
11 | hidemeta: false
12 | comments: true
13 | ---
14 |
15 | ## Introduction
16 |
17 | Welcome to my first post! In this article, I will be discussing the basics of Markdown and how it can be used to create rich and formatted content. :smile: _(This post is for testing the markdown syntax)_
18 |
19 | ## What is Markdown?
20 |
21 | Markdown is a lightweight markup language that allows you to write plain text using simple syntax and convert it into HTML or other formats. It was created by **John Gruber** and **Aaron Swartz** in 2004 with the goal of making it easy to write and read structured documents.
22 |
23 | ## Why use Markdown?
24 |
25 | Markdown is widely used in various applications and platforms for its simplicity and versatility. Here are a few reasons why you should consider using Markdown:
26 |
27 | - It's easy to learn and use, even for non-technical users.
28 | - It allows you to focus on content rather than formatting.
29 | - It can be converted into various formats, including HTML, PDF, and more.
30 | - It's supported by many text editors, blogging platforms, and content management systems.
31 |
32 | ## Getting Started with Markdown
33 |
34 | To get started with Markdown, you don't need any special tools or software. You can simply use a plain text editor to write your Markdown content. Here are a few basic syntax examples to help you get started:
35 |
36 | - Headings: Use `#` to create headings. For example, `# Heading 1` creates a level 1 heading.
37 | - Emphasis: Use `*` or `_` to add emphasis to text. For example, `*italic*` or `_italic_` creates italic text.
38 | - Lists: Use `-` or `*` to create unordered lists and numbers for ordered lists.
39 | - Links: Use `[link text](url)` to create links. For example, `[GitHub](https://github.com)` creates a link to GitHub.
40 |
41 | ## Conclusion
42 |
43 | Markdown is a powerful and flexible markup language that can help you create well-structured and formatted content. Whether you're writing a blog post, documentation, or simply taking notes, Markdown can be a valuable tool in your arsenal.
44 |
45 | I hope this introduction to Markdown has been helpful. Please consider share this post if you found it helpful
46 |
--------------------------------------------------------------------------------
/config.yml:
--------------------------------------------------------------------------------
1 | baseURL: https://www.sxrup.xyz/
2 | title: Syrup's Blog
3 | paginate: 5
4 | theme: PaperMod
5 |
6 | enableRobotsTXT: true
7 | buildDrafts: false
8 | buildFuture: false
9 | buildExpired: false
10 | enableEmoji: true
11 | copyright: "© 2024 [Syrup](https://github.com/Syrup)"
12 |
13 | outputs:
14 | home:
15 | - HTML
16 | - RSS
17 | - JSON
18 |
19 | minify:
20 | disableXML: true
21 | minifyOutput: true
22 |
23 | params:
24 | env: production # to enable google analytics, opengraph, twitter-cards and schema.
25 | title: Syrup's Blog
26 | description: "| 💻 Programmer | 👾 Backend Dev | 😻 Cat Lovers |"
27 | keywords: [Blog, Portfolio]
28 | author: Syrup
29 | # author: ["Me", "You"] # multiple authors
30 | images: ["profile.png"]
31 | DateFormat: "January 2, 2006"
32 | defaultTheme: auto # dark, light
33 | disableThemeToggle: false
34 |
35 | ShowReadingTime: true
36 | ShowShareButtons: true
37 | ShowPostNavLinks: true
38 | ShowBreadCrumbs: true
39 | ShowCodeCopyButtons: true
40 | ShowWordCount: true
41 | ShowRssButtonInSectionTermList: true
42 | UseHugoToc: true
43 | disableSpecial1stPost: false
44 | disableScrollToTop: false
45 | comments: true
46 | hidemeta: false
47 | hideSummary: false
48 | showtoc: false
49 | tocopen: false
50 |
51 | assets:
52 | # disableHLJS: true # to disable highlight.js
53 | # disableFingerprinting: true
54 | favicon: "https://raw.githubusercontent.com/Syrup/site/main/assets/img/favicon.ico"
55 | favicon16x16: "https://raw.githubusercontent.com/Syrup/site/main/assets/img/favicon16x16.ico"
56 | favicon32x32: "https://raw.githubusercontent.com/Syrup/site/main/assets/img/favicon32x32.ico"
57 | apple_touch_icon: "https://raw.githubusercontent.com/Syrup/site/main/assets/img/favicon.ico"
58 | safari_pinned_tab: "https://raw.githubusercontent.com/Syrup/site/main/assets/svg/safari_pinned_tab.svg"
59 |
60 | label:
61 | text: "Home"
62 | icon: /img/favicon.ico
63 | iconHeight: 35
64 |
65 | # profile-mode
66 | profileMode:
67 | enabled: true # needs to be explicitly set
68 | title: Syrup
69 | # subtitle: "Hello, I go by Syrup on the internet. I'm a backend developer and I'm still in the high school. I love to write about programming, tech, and sometimes about my life. I'm also a fan of open-source software and I'm always looking for ways to contribute to the community. I hope you enjoy reading my blog posts and find them helpful. If you have any questions or want to contact me, feel free to reach out to me on social media or via email. It's below here ⬇"
70 | subtitle: "| 💻 Programmer | 👾 Backend Dev | 😻 Cat Lovers |"
71 | imageUrl: "https://raw.githubusercontent.com/Syrup/site/main/assets/img/profile.png"
72 | imageWidth: 120
73 | imageHeight: 120
74 | imageTitle: "Kyawoo"
75 | buttons:
76 | - name: Posts
77 | url: posts
78 | - name: Tags
79 | url: tags
80 |
81 | # home-info mode
82 | # homeInfoParams:
83 | # Title: "Hi there \U0001F44B"
84 | # Content: Welcome to my blog
85 |
86 | socialIcons:
87 | - name: discord
88 | url: "https://discord.com/users/681843628317868049"
89 | - name: github
90 | url: "https://github.com/Syrup"
91 | - name: email
92 | url: "mailto:goodgamersz665@gmail.com"
93 |
94 | analytics:
95 | google:
96 | SiteVerificationTag: "XYZabc"
97 | bing:
98 | SiteVerificationTag: "XYZabc"
99 | yandex:
100 | SiteVerificationTag: "XYZabc"
101 |
102 | cover:
103 | hidden: true # hide everywhere but not in structured data
104 | hiddenInList: true # hide on list pages and home
105 | hiddenInSingle: true # hide on single page
106 |
107 | editPost:
108 | URL: "https://github.com/Syrup/site/tree/main/content"
109 | Text: "Suggest Changes" # edit text
110 | appendFilePath: true # to append file path to Edit link
111 |
112 | # for search
113 | # https://fusejs.io/api/options.html
114 | fuseOpts:
115 | isCaseSensitive: false
116 | shouldSort: true
117 | location: 0
118 | distance: 1000
119 | threshold: 0.4
120 | minMatchCharLength: 0
121 | limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
122 | keys: ["title", "permalink", "summary", "content"]
123 |
124 | menu:
125 | main:
126 | - identifier: categories
127 | name: categories
128 | url: /categories/
129 | weight: 10
130 | - identifier: tags
131 | name: tags
132 | url: /tags/
133 | weight: 20
134 | - identifier: search
135 | name: "Search 🔍"
136 | url: /search/
137 | weight: 30
138 |
139 | # Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
140 | pygmentsUseClasses: true
141 | markup:
142 | highlight:
143 | noClasses: true
144 | anchorLineNos: false
145 | codeFences: true
146 | guessSyntax: true
147 | lineNos: true
148 | style: monokai
149 | goldmark:
150 | renderer:
151 | unsafe: true
152 |
--------------------------------------------------------------------------------
/content/posts/how-to-use-gemini-call-function-api.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "How to use Gemini Call Function API"
3 | date: 2024-09-25T08:46:19+07:00
4 | # weight: 1
5 | tags: ["Bun", "TypeScript"]
6 | author: "Syrup"
7 | showToc: true
8 | TocOpen: false
9 | # draft: true
10 | hidemeta: false
11 | comments: true
12 | ---
13 |
14 | I know you probably already know what Gemini is, but if not, Gemini is an AI created by Google that is quite intelligent, has good documentation, and most importantly, it's **FREE**, of course with some limitations.
15 |
16 | ## Models
17 |
18 | Gemini itself has 2 models worth trying:
19 |
20 | 1. gemini-1.5-pro
21 | 2. gemini-1.5-flash
22 |
23 | I personally recommend using the `gemini-1.5-flash` model, which is the one we'll be using in this project.
24 |
25 | ## Let's Get Started
26 |
27 | First of all, what we need is:
28 |
29 | 1. Bun
30 | 2. Gemini API Key
31 |
32 | Yes, I'm using TypeScript. If you want to use JavaScript or use NodeJS, that's fine, please adjust accordingly.
33 |
34 | To get the API Key, open the following link [makersuite.google.com](https://makersuite.google.com/app/apikey) and follow the instructions.
35 |
36 | We need to initialize our project first so we can install the required libraries
37 |
38 | ```bash
39 | bun init -y
40 | ```
41 |
42 | Next, we need to install the required library.
43 |
44 | ```bash
45 | bun add @google/generative-ai
46 | ```
47 |
48 | Next, we need to create an `index.ts` file.
49 |
50 | We'll start writing code, the first thing we'll do is call the required libraries.
51 |
52 | ```tsx
53 | import {
54 | GoogleGenerativeAI,
55 | SchemaType,
56 | type FunctionDeclaration,
57 | } from "@google/generative-ai";
58 | import * as fs from "fs/promises";
59 | import * as path from "path";
60 | ```
61 |
62 | Next, we'll create a function that we'll call later.
63 |
64 | ```ts
65 | const functions = {
66 | async createFile({ name, content }: { name: string; content: string }) {
67 | const filePath = path.join(__dirname, name);
68 | const formattedContent = content
69 | .replace(/\\n/g, "\n")
70 | .replace(/\\'/g, "'")
71 | .replace(/\\"/g, '"')
72 | .replace(/\\&/g, "&")
73 | .replace(/\\r/g, "\r")
74 | .replace(/\\t/g, "\t")
75 | .replace(/\\b/g, "\b")
76 | .replace(/\\f/g, "\f");
77 | const buffer = Buffer.from(formattedContent, "utf8");
78 | await fs.writeFile(name, buffer, "utf8");
79 |
80 | return {
81 | filePath,
82 | content: formattedContent,
83 | };
84 | },
85 | async readFile({ name }: { name: string }) {
86 | const res = await fetch(
87 | "https://raw.githubusercontent.com/sindresorhus/binary-extensions/refs/heads/main/binary-extensions.json"
88 | ).then((res) => res.json());
89 | const unsupportedFileType = res.map((ext: string) => `.${ext}`);
90 | const filePath = path.join(__dirname, name);
91 | if (unsupportedFileType.includes(path.extname(filePath))) {
92 | return {
93 | error: "Unsupported file type",
94 | };
95 | }
96 | const exist = await fs.exists(filePath);
97 | if (!exist) {
98 | return {
99 | error: "File not found",
100 | };
101 | }
102 | const content = await fs.readFile(filePath, "utf8");
103 | return {
104 | filePath,
105 | content: `\`\`\`${path.extname(filePath).slice(1)}\n${content}\n\`\`\``,
106 | };
107 | }
108 | }
109 | ```
110 |
111 | We will make AI able to call 2 functions, namely `createFile` and `readFile`.
112 |
113 | Next, we will create a schema so that AI can understand how to use our functions
114 |
115 | ```tsx
116 | const createFileDeclaration: FunctionDeclaration = {
117 | name: "createFile",
118 | description: "Create a file with the given name and content.",
119 | parameters: {
120 | type: SchemaType.OBJECT,
121 | properties: {
122 | name: {
123 | type: SchemaType.STRING,
124 | description: "Name of the file to be created.",
125 | },
126 | content: {
127 | type: SchemaType.STRING,
128 | description: "Content to be written to the file.",
129 | },
130 | },
131 | required: ["name", "content"],
132 | },
133 | };
134 |
135 | const readFileDeclaration: FunctionDeclaration = {
136 | name: "readFile",
137 | description: "Read a file with the given name.",
138 | parameters: {
139 | type: SchemaType.OBJECT,
140 | properties: {
141 | name: {
142 | type: SchemaType.STRING,
143 | description: "Name of the file to be read.",
144 | },
145 | },
146 | required: ["name"],
147 | },
148 | };
149 |
150 | const functionDeclarations: FunctionDeclaration[] = [
151 | createFileDeclaration,
152 | readFileDeclaration,
153 | ];
154 | ```
155 |
156 | We use OpenAPI as our schema, with this schema, AI will be able to understand how to use the functions we created.
157 |
158 | Then we will call the model we will use, which is `gemini-1.5-flash`.
159 |
160 | ```ts
161 | const API_KEY = "PUT_YOUR_API_KEY_HERE"
162 | const genAI = new GoogleGenerativeAI(API_KEY);
163 |
164 | const model = genAI.getGenerativeModel({
165 | model: "gemini-1.5-flash",
166 | tools: [
167 | {
168 | functionDeclarations
169 | }
170 | ]
171 | });
172 | ```
173 |
174 | Next, we'll create some *magic ✨*
175 |
176 | ```ts
177 | const chat = model.startChat();
178 | const prompt = "Create a file elephant.txt containing 'Elephant'";
179 |
180 | const result = await chat.sendMessage(prompt)
181 |
182 | // To make it easier, we'll use the first called function found
183 | const calls = result.response.functionCalls();
184 | const call = calls ? calls[0] : null;
185 |
186 | if(call) {
187 | // @ts-ignore
188 | const funcResponse = await functions[call.name](call.args)
189 |
190 | const functionResult = await chat.sendMessage([
191 | {
192 | functionResponse: {
193 | name: call.name,
194 | response: funcResponse
195 | }
196 | }
197 | ])
198 |
199 | console.log(functionResult.response.text())
200 | }
201 | ```
202 |
203 | Done! We'll start executing the code and see the *magic* ✨.
204 |
205 | ```bash
206 | bun run index.ts
207 | ```
208 |
209 | Try to execute and see what happens
210 |
211 | If everything goes smoothly, a file named `elephant.txt` containing `Elephant` should appear. Here's an example of the response:
212 |
213 | ```bash
214 | Ok, I've created it. 😄
215 | ```
216 |
217 | If there's an error, try changing the prompt. For some reason, sometimes with a different prompt but the same meaning, it works.
218 |
219 | Now try changing the prompt to:
220 |
221 | ```ts
222 | const prompt = "Read the elephant.txt file and explain its contents"
223 | ```
224 |
225 | If there's no error, AI should read the file contents and explain them. Here's an example of the response:
226 |
227 | ```bash
228 | The elephant.txt file contains the word "Elephant".
229 | ```
230 |
231 | If there's an error, try changing the prompt.
232 |
233 | I hope you found it helpful and informative. If you have any questions or need further clarification, please don't hesitate to ask.
--------------------------------------------------------------------------------
/content/emojis.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Emojis Cheatsheet
3 | showToc: true
4 | ---
5 |
6 | Everybody loves emojis. They're small symbolic representational artifacts that add color to life through digital communication.
7 |
8 | The array of emojis available can be confusing since they have some unknown meanings in different social settings.
9 |
10 | Hey guys! This blog post is here to help you navigate the world of emojis quickly.
11 |
12 | Source:
13 |
14 | ---
15 |
16 | ## People
17 |
18 | :smile:
19 | :laughing:
20 | :blush:
21 | :smiley:
22 | :relaxed:
23 | :smirk:
24 | :heart_eyes:
25 | :kissing_heart:
26 | :kissing_closed_eyes:
27 | :flushed:
28 | :relieved:
29 | :satisfied:
30 | :grin:
31 | :wink:
32 | :stuck_out_tongue_winking_eye:
33 | :stuck_out_tongue_closed_eyes:
34 | :grinning:
35 | :kissing:
36 | :kissing_smiling_eyes:
37 | :stuck_out_tongue:
38 | :sleeping:
39 | :worried:
40 | :frowning:
41 | :anguished:
42 | :open_mouth:
43 | :grimacing:
44 | :confused:
45 | :hushed:
46 | :expressionless:
47 | :unamused:
48 | :sweat_smile:
49 | :sweat:
50 | :disappointed_relieved:
51 | :weary:
52 | :pensive:
53 | :disappointed:
54 | :confounded:
55 | :fearful:
56 | :cold_sweat:
57 | :persevere:
58 | :cry:
59 | :sob:
60 | :joy:
61 | :astonished:
62 | :scream:
63 | :tired_face:
64 | :angry:
65 | :rage:
66 | :triumph:
67 | :sleepy:
68 | :yum:
69 | :mask:
70 | :sunglasses:
71 | :dizzy_face:
72 | :imp:
73 | :smiling_imp:
74 | :neutral_face:
75 | :no_mouth:
76 | :innocent:
77 | :alien:
78 | :yellow_heart:
79 | :blue_heart:
80 | :purple_heart:
81 | :heart:
82 | :green_heart:
83 | :broken_heart:
84 | :heartbeat:
85 | :heartpulse:
86 | :two_hearts:
87 | :revolving_hearts:
88 | :cupid:
89 | :sparkling_heart:
90 | :sparkles:
91 | :star:
92 | :star2:
93 | :dizzy:
94 | :boom:
95 | :collision:
96 | :anger:
97 | :exclamation:
98 | :question:
99 | :grey_exclamation:
100 | :grey_question:
101 | :zzz:
102 | :dash:
103 | :sweat_drops:
104 | :notes:
105 | :musical_note:
106 | :fire:
107 | :hankey:
108 | :poop:
109 | :shit:
110 | :+1:
111 | :thumbsup:
112 | :-1:
113 | :thumbsdown:
114 | :ok_hand:
115 | :punch:
116 | :facepunch:
117 | :fist:
118 | :v:
119 | :wave:
120 | :hand:
121 | :raised_hand:
122 | :open_hands:
123 | :point_up:
124 | :point_down:
125 | :point_left:
126 | :point_right:
127 | :raised_hands:
128 | :pray:
129 | :point_up_2:
130 | :clap:
131 | :muscle:
132 | :metal:
133 | :fu:
134 | :walking:
135 | :runner:
136 | :running:
137 | :couple:
138 | :family:
139 | :two_men_holding_hands:
140 | :two_women_holding_hands:
141 | :dancer:
142 | :dancers:
143 | :ok_woman:
144 | :no_good:
145 | :information_desk_person:
146 | :raising_hand:
147 | :bride_with_veil:
148 | :person_with_pouting_face:
149 | :person_frowning:
150 | :bow:
151 | :couplekiss:
152 | :couple_with_heart:
153 | :massage:
154 | :haircut:
155 | :nail_care:
156 | :boy:
157 | :girl:
158 | :woman:
159 | :man:
160 | :baby:
161 | :older_woman:
162 | :older_man:
163 | :person_with_blond_hair:
164 | :man_with_gua_pi_mao:
165 | :man_with_turban:
166 | :construction_worker:
167 | :cop:
168 | :angel:
169 | :princess:
170 | :smiley_cat:
171 | :smile_cat:
172 | :heart_eyes_cat:
173 | :kissing_cat:
174 | :smirk_cat:
175 | :scream_cat:
176 | :crying_cat_face:
177 | :joy_cat:
178 | :pouting_cat:
179 | :japanese_ogre:
180 | :japanese_goblin:
181 | :see_no_evil:
182 | :hear_no_evil:
183 | :speak_no_evil:
184 | :guardsman:
185 | :skull:
186 | :feet:
187 | :lips:
188 | :kiss:
189 | :droplet:
190 | :ear:
191 | :eyes:
192 | :nose:
193 | :tongue:
194 | :love_letter:
195 | :bust_in_silhouette:
196 | :busts_in_silhouette:
197 | :speech_balloon:
198 | :thought_balloon:
199 |
200 | ## Nature
201 |
202 | :sunny:
203 | :umbrella:
204 | :cloud:
205 | :snowflake:
206 | :snowman:
207 | :zap:
208 | :cyclone:
209 | :foggy:
210 | :ocean:
211 | :cat:
212 | :dog:
213 | :mouse:
214 | :hamster:
215 | :rabbit:
216 | :wolf:
217 | :frog:
218 | :tiger:
219 | :koala:
220 | :bear:
221 | :pig:
222 | :pig_nose:
223 | :cow:
224 | :boar:
225 | :monkey_face:
226 | :monkey:
227 | :horse:
228 | :racehorse:
229 | :camel:
230 | :sheep:
231 | :elephant:
232 | :panda_face:
233 | :snake:
234 | :bird:
235 | :baby_chick:
236 | :hatched_chick:
237 | :hatching_chick:
238 | :chicken:
239 | :penguin:
240 | :turtle:
241 | :bug:
242 | :honeybee:
243 | :ant:
244 | :beetle:
245 | :snail:
246 | :octopus:
247 | :tropical_fish:
248 | :fish:
249 | :whale:
250 | :whale2:
251 | :dolphin:
252 | :cow2:
253 | :ram:
254 | :rat:
255 | :water_buffalo:
256 | :tiger2:
257 | :rabbit2:
258 | :dragon:
259 | :goat:
260 | :rooster:
261 | :dog2:
262 | :pig2:
263 | :mouse2:
264 | :ox:
265 | :dragon_face:
266 | :blowfish:
267 | :crocodile:
268 | :dromedary_camel:
269 | :leopard:
270 | :cat2:
271 | :poodle:
272 | :paw_prints:
273 | :bouquet:
274 | :cherry_blossom:
275 | :tulip:
276 | :four_leaf_clover:
277 | :rose:
278 | :sunflower:
279 | :hibiscus:
280 | :maple_leaf:
281 | :leaves:
282 | :fallen_leaf:
283 | :herb:
284 | :mushroom:
285 | :cactus:
286 | :palm_tree:
287 | :evergreen_tree:
288 | :deciduous_tree:
289 | :chestnut:
290 | :seedling:
291 | :blossom:
292 | :ear_of_rice:
293 | :shell:
294 | :globe_with_meridians:
295 | :sun_with_face:
296 | :full_moon_with_face:
297 | :new_moon_with_face:
298 | :new_moon:
299 | :waxing_crescent_moon:
300 | :first_quarter_moon:
301 | :waxing_gibbous_moon:
302 | :full_moon:
303 | :waning_gibbous_moon:
304 | :last_quarter_moon:
305 | :waning_crescent_moon:
306 | :last_quarter_moon_with_face:
307 | :first_quarter_moon_with_face:
308 | :moon:
309 | :earth_africa:
310 | :earth_americas:
311 | :earth_asia:
312 | :volcano:
313 | :milky_way:
314 | :partly_sunny:
315 |
316 | ## Objects
317 |
318 | :bamboo:
319 | :gift_heart:
320 | :dolls:
321 | :school_satchel:
322 | :mortar_board:
323 | :flags:
324 | :fireworks:
325 | :sparkler:
326 | :wind_chime:
327 | :rice_scene:
328 | :jack_o_lantern:
329 | :ghost:
330 | :santa:
331 | :christmas_tree:
332 | :gift:
333 | :bell:
334 | :no_bell:
335 | :tanabata_tree:
336 | :tada:
337 | :confetti_ball:
338 | :balloon:
339 | :crystal_ball:
340 | :cd:
341 | :dvd:
342 | :floppy_disk:
343 | :camera:
344 | :video_camera:
345 | :movie_camera:
346 | :computer:
347 | :tv:
348 | :iphone:
349 | :phone:
350 | :telephone:
351 | :telephone_receiver:
352 | :pager:
353 | :fax:
354 | :minidisc:
355 | :vhs:
356 | :sound:
357 | :speaker:
358 | :mute:
359 | :loudspeaker:
360 | :mega:
361 | :hourglass:
362 | :hourglass_flowing_sand:
363 | :alarm_clock:
364 | :watch:
365 | :radio:
366 | :satellite:
367 | :loop:
368 | :mag:
369 | :mag_right:
370 | :unlock:
371 | :lock:
372 | :lock_with_ink_pen:
373 | :closed_lock_with_key:
374 | :key:
375 | :bulb:
376 | :flashlight:
377 | :high_brightness:
378 | :low_brightness:
379 | :electric_plug:
380 | :battery:
381 | :calling:
382 | :email:
383 | :mailbox:
384 | :postbox:
385 | :bath:
386 | :bathtub:
387 | :shower:
388 | :toilet:
389 | :wrench:
390 | :nut_and_bolt:
391 | :hammer:
392 | :seat:
393 | :moneybag:
394 | :yen:
395 | :dollar:
396 | :pound:
397 | :euro:
398 | :credit_card:
399 | :money_with_wings:
400 | :e-mail:
401 | :inbox_tray:
402 | :outbox_tray:
403 | :envelope:
404 | :incoming_envelope:
405 | :postal_horn:
406 | :mailbox_closed:
407 | :mailbox_with_mail:
408 | :mailbox_with_no_mail:
409 | :package:
410 | :door:
411 | :smoking:
412 | :bomb:
413 | :gun:
414 | :hocho:
415 | :pill:
416 | :syringe:
417 | :page_facing_up:
418 | :page_with_curl:
419 | :bookmark_tabs:
420 | :bar_chart:
421 | :chart_with_upwards_trend:
422 | :chart_with_downwards_trend:
423 | :scroll:
424 | :clipboard:
425 | :calendar:
426 | :date:
427 | :card_index:
428 | :file_folder:
429 | :open_file_folder:
430 | :scissors:
431 | :pushpin:
432 | :paperclip:
433 | :black_nib:
434 | :pencil2:
435 | :straight_ruler:
436 | :triangular_ruler:
437 | :closed_book:
438 | :green_book:
439 | :blue_book:
440 | :orange_book:
441 | :notebook:
442 | :notebook_with_decorative_cover:
443 | :ledger:
444 | :books:
445 | :bookmark:
446 | :name_badge:
447 | :microscope:
448 | :telescope:
449 | :newspaper:
450 | :football:
451 | :basketball:
452 | :soccer:
453 | :baseball:
454 | :tennis:
455 | :8ball:
456 | :rugby_football:
457 | :bowling:
458 | :golf:
459 | :mountain_bicyclist:
460 | :bicyclist:
461 | :horse_racing:
462 | :snowboarder:
463 | :swimmer:
464 | :surfer:
465 | :ski:
466 | :spades:
467 | :hearts:
468 | :clubs:
469 | :diamonds:
470 | :gem:
471 | :ring:
472 | :trophy:
473 | :musical_score:
474 | :musical_keyboard:
475 | :violin:
476 | :space_invader:
477 | :video_game:
478 | :black_joker:
479 | :flower_playing_cards:
480 | :game_die:
481 | :dart:
482 | :mahjong:
483 | :clapper:
484 | :memo:
485 | :pencil:
486 | :book:
487 | :art:
488 | :microphone:
489 | :headphones:
490 | :trumpet:
491 | :saxophone:
492 | :guitar:
493 | :shoe:
494 | :sandal:
495 | :high_heel:
496 | :lipstick:
497 | :boot:
498 | :shirt:
499 | :tshirt:
500 | :necktie:
501 | :womans_clothes:
502 | :dress:
503 | :running_shirt_with_sash:
504 | :jeans:
505 | :kimono:
506 | :bikini:
507 | :ribbon:
508 | :tophat:
509 | :crown:
510 | :womans_hat:
511 | :mans_shoe:
512 | :closed_umbrella:
513 | :briefcase:
514 | :handbag:
515 | :pouch:
516 | :purse:
517 | :eyeglasses:
518 | :fishing_pole_and_fish:
519 | :coffee:
520 | :tea:
521 | :sake:
522 | :baby_bottle:
523 | :beer:
524 | :beers:
525 | :cocktail:
526 | :tropical_drink:
527 | :wine_glass:
528 | :fork_and_knife:
529 | :pizza:
530 | :hamburger:
531 | :fries:
532 | :poultry_leg:
533 | :meat_on_bone:
534 | :spaghetti:
535 | :curry:
536 | :fried_shrimp:
537 | :bento:
538 | :sushi:
539 | :fish_cake:
540 | :rice_ball:
541 | :rice_cracker:
542 | :rice:
543 | :ramen:
544 | :stew:
545 | :oden:
546 | :dango:
547 | :egg:
548 | :bread:
549 | :doughnut:
550 | :custard:
551 | :icecream:
552 | :ice_cream:
553 | :shaved_ice:
554 | :birthday:
555 | :cake:
556 | :cookie:
557 | :chocolate_bar:
558 | :candy:
559 | :lollipop:
560 | :honey_pot:
561 | :apple:
562 | :green_apple:
563 | :tangerine:
564 | :lemon:
565 | :cherries:
566 | :grapes:
567 | :watermelon:
568 | :strawberry:
569 | :peach:
570 | :melon:
571 | :banana:
572 | :pear:
573 | :pineapple:
574 | :sweet_potato:
575 | :eggplant:
576 | :tomato:
577 | :corn:
578 |
579 | ## Places
580 |
581 | :house:
582 | :house_with_garden:
583 | :school:
584 | :office:
585 | :post_office:
586 | :hospital:
587 | :bank:
588 | :convenience_store:
589 | :love_hotel:
590 | :hotel:
591 | :wedding:
592 | :church:
593 | :department_store:
594 | :european_post_office:
595 | :city_sunrise:
596 | :city_sunset:
597 | :japanese_castle:
598 | :european_castle:
599 | :tent:
600 | :factory:
601 | :tokyo_tower:
602 | :japan:
603 | :mount_fuji:
604 | :sunrise_over_mountains:
605 | :sunrise:
606 | :stars:
607 | :statue_of_liberty:
608 | :bridge_at_night:
609 | :carousel_horse:
610 | :rainbow:
611 | :ferris_wheel:
612 | :fountain:
613 | :roller_coaster:
614 | :ship:
615 | :speedboat:
616 | :boat:
617 | :sailboat:
618 | :rowboat:
619 | :anchor:
620 | :rocket:
621 | :airplane:
622 | :helicopter:
623 | :steam_locomotive:
624 | :tram:
625 | :mountain_railway:
626 | :bike:
627 | :aerial_tramway:
628 | :suspension_railway:
629 | :mountain_cableway:
630 | :tractor:
631 | :blue_car:
632 | :oncoming_automobile:
633 | :car:
634 | :red_car:
635 | :taxi:
636 | :oncoming_taxi:
637 | :articulated_lorry:
638 | :bus:
639 | :oncoming_bus:
640 | :rotating_light:
641 | :police_car:
642 | :oncoming_police_car:
643 | :fire_engine:
644 | :ambulance:
645 | :minibus:
646 | :truck:
647 | :train:
648 | :station:
649 | :train2:
650 | :bullettrain_front:
651 | :bullettrain_side:
652 | :light_rail:
653 | :monorail:
654 | :railway_car:
655 | :trolleybus:
656 | :ticket:
657 | :fuelpump:
658 | :vertical_traffic_light:
659 | :traffic_light:
660 | :warning:
661 | :construction:
662 | :beginner:
663 | :atm:
664 | :slot_machine:
665 | :busstop:
666 | :barber:
667 | :hotsprings:
668 | :checkered_flag:
669 | :crossed_flags:
670 | :izakaya_lantern:
671 | :moyai:
672 | :circus_tent:
673 | :performing_arts:
674 | :round_pushpin:
675 | :triangular_flag_on_post:
676 | :jp:
677 | :kr:
678 | :cn:
679 | :us:
680 | :fr:
681 | :es:
682 | :it:
683 | :ru:
684 | :gb:
685 | :uk:
686 | :de:
687 |
688 | ## Symbols
689 |
690 | :one:
691 | :two:
692 | :three:
693 | :four:
694 | :five:
695 | :six:
696 | :seven:
697 | :eight:
698 | :nine:
699 | :keycap_ten:
700 | :1234:
701 | :zero:
702 | :hash:
703 | :symbols:
704 | :arrow_backward:
705 | :arrow_down:
706 | :arrow_forward:
707 | :arrow_left:
708 | :capital_abcd:
709 | :abcd:
710 | :abc:
711 | :arrow_lower_left:
712 | :arrow_lower_right:
713 | :arrow_right:
714 | :arrow_up:
715 | :arrow_upper_left:
716 | :arrow_upper_right:
717 | :arrow_double_down:
718 | :arrow_double_up:
719 | :arrow_down_small:
720 | :arrow_heading_down:
721 | :arrow_heading_up:
722 | :leftwards_arrow_with_hook:
723 | :arrow_right_hook:
724 | :left_right_arrow:
725 | :arrow_up_down:
726 | :arrow_up_small:
727 | :arrows_clockwise:
728 | :arrows_counterclockwise:
729 | :rewind:
730 | :fast_forward:
731 | :information_source:
732 | :ok:
733 | :twisted_rightwards_arrows:
734 | :repeat:
735 | :repeat_one:
736 | :new:
737 | :top:
738 | :up:
739 | :cool:
740 | :free:
741 | :ng:
742 | :cinema:
743 | :koko:
744 | :signal_strength:
745 | :u5272:
746 | :u5408:
747 | :u55b6:
748 | :u6307:
749 | :u6708:
750 | :u6709:
751 | :u6e80:
752 | :u7121:
753 | :u7533:
754 | :u7a7a:
755 | :u7981:
756 | :sa:
757 | :restroom:
758 | :mens:
759 | :womens:
760 | :baby_symbol:
761 | :no_smoking:
762 | :parking:
763 | :wheelchair:
764 | :metro:
765 | :baggage_claim:
766 | :accept:
767 | :wc:
768 | :potable_water:
769 | :put_litter_in_its_place:
770 | :secret:
771 | :congratulations:
772 | :m:
773 | :passport_control:
774 | :left_luggage:
775 | :customs:
776 | :ideograph_advantage:
777 | :cl:
778 | :sos:
779 | :id:
780 | :no_entry_sign:
781 | :underage:
782 | :no_mobile_phones:
783 | :do_not_litter:
784 | :non-potable_water:
785 | :no_bicycles:
786 | :no_pedestrians:
787 | :children_crossing:
788 | :no_entry:
789 | :eight_spoked_asterisk:
790 | :sparkle:
791 | :eight_pointed_black_star:
792 | :heart_decoration:
793 | :vs:
794 | :vibration_mode:
795 | :mobile_phone_off:
796 | :chart:
797 | :currency_exchange:
798 | :aries:
799 | :taurus:
800 | :gemini:
801 | :cancer:
802 | :leo:
803 | :virgo:
804 | :libra:
805 | :scorpius:
806 | :sagittarius:
807 | :capricorn:
808 | :aquarius:
809 | :pisces:
810 | :ophiuchus:
811 | :six_pointed_star:
812 | :negative_squared_cross_mark:
813 | :a:
814 | :b:
815 | :ab:
816 | :o2:
817 | :diamond_shape_with_a_dot_inside:
818 | :recycle:
819 | :end:
820 | :back:
821 | :on:
822 | :soon:
823 | :clock1:
824 | :clock130:
825 | :clock10:
826 | :clock1030:
827 | :clock11:
828 | :clock1130:
829 | :clock12:
830 | :clock1230:
831 | :clock2:
832 | :clock230:
833 | :clock3:
834 | :clock330:
835 | :clock4:
836 | :clock430:
837 | :clock5:
838 | :clock530:
839 | :clock6:
840 | :clock630:
841 | :clock7:
842 | :clock730:
843 | :clock8:
844 | :clock830:
845 | :clock9:
846 | :clock930:
847 | :heavy_dollar_sign:
848 | :copyright:
849 | :registered:
850 | :tm:
851 | :x:
852 | :heavy_exclamation_mark:
853 | :bangbang:
854 | :interrobang:
855 | :o:
856 | :heavy_multiplication_x:
857 | :heavy_plus_sign:
858 | :heavy_minus_sign:
859 | :heavy_division_sign:
860 | :white_flower:
861 | :100:
862 | :heavy_check_mark:
863 | :ballot_box_with_check:
864 | :radio_button:
865 | :link:
866 | :curly_loop:
867 | :wavy_dash:
868 | :part_alternation_mark:
869 | :trident:
870 | :black_small_square:
871 | :white_small_square:
872 | :black_medium_small_square:
873 | :white_medium_small_square:
874 | :black_medium_square:
875 | :white_medium_square:
876 | :black_large_square:
877 | :white_large_square:
878 | :white_check_mark:
879 | :black_square_button:
880 | :white_square_button:
881 | :black_circle:
882 | :white_circle:
883 | :red_circle:
884 | :large_blue_circle:
885 | :large_blue_diamond:
886 | :large_orange_diamond:
887 | :small_blue_diamond:
888 | :small_orange_diamond:
889 | :small_red_triangle:
890 |
891 |
892 | Click to 👀 the code
893 |
894 |
895 |
--------------------------------------------------------------------------------
/assets/svg/safari_pinned_tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
142 |
--------------------------------------------------------------------------------