Skip to content

Commit e449f3e

Browse files
authored
add info about rel tag & dev tools
1 parent 315c181 commit e449f3e

File tree

1 file changed

+4
-0
lines changed

1 file changed

+4
-0
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ The `links` variable stores an array all of your links. You can have as many lin
2727
* **`name`** is simply the name of the link, or, what you want the hypertext to say.
2828
* **`url`** is the full URL to the destination you want the link to take you to.
2929
* **`icon`** is the icon to display next to the link. Icons are served by FontAwesome and there are icons for most things. Find the icon you want by [searching their icon database](https://fontawesome.com/icons?d=gallery&p=2&m=free) and plug in the name here. (**Note:** If you're already familiar with FontAwesome, you'll want to use _just_ the name here, without the `fa-` prefix -- that's added in later in the code.)
30+
* **`rel`** is a way to indicate a link relationship. Some protocols -- notably Mastodon -- require link `rel` tags to verify your identity. The details example file adds `rel: "me"` to every entry, but you only need to add it to the ones you care about. The `rel` tag is added if a `rel` value exists and omitted if it does not.
3031
* **`style`** is a bit of a unique FontAwesome thing. Basically, for their free icon library, FontAwesome has two "styles" -- one is their basic styles for various things, which is `fas`; the other style is for "brands" (Twitter, Facebook, YouTube, etc. are all considered "brands") and the prefix for those is `fab`. Using the search, you can click into the icon to find out if it's a `fas` or a `fab`, but most likely if your links are mostly to other social networks or sites, you'll be using a lot of fab `fab`s.
3132

3233
#### `profile`
@@ -44,6 +45,9 @@ I've built two color schemes -- `solarized` and `solarized-light` which can be u
4445

4546
Color schemes are attached to a class that is added to the main `div` that wraps around the page, so to create your own scheme, simply put all your colors and styles into a single class and add that to the `details.js`.
4647

48+
### Local Development
49+
You can build and test your profile locally by running an `npm install` and then using the `npm run dev` script. That will open a new browser window that live-updates when you make changes to the source code. Use `Command + X`/`Control + X` to stop the script from running when you're done developing.
50+
4751
### Deploying your new profile!
4852
First things first, you'll need to run `npm install` to install the various Node dependencies. Some of these are for local development which, if you don't plan on making changes to the code, you won't be using, but you might if you do decide to make any custom tweaks.
4953

0 commit comments

Comments
 (0)