codepuff.in

Don't have an account yet? Get started and then come back here.

Documentation

The Editor

This is where you make changes to your page. For example, /codepuffin/codepuffindocumentation/_editpage is the editor for the very page you are on right now.

HTML

Put the HTML in the editor box on the top left. To learn more about HTML, check out the W3 tutorial.

Only write HTML that you would put inside a <body>-tag, codepuff.in will automatically wrap these contents into a full web-page.

codepuff.in ensures pages are secure for visitors and will strip <script> tags and other possibly malicious input from the HTML. This "cleaning" is only applied when visiting the page outside the editor. Be sure to always double check your page "live" using its URL, and not just by using the previewer on the right of the editor.

Adding pictures

You can add pictures by clicking the "Add image" button on the top left of the editor.

It adds an <img>-tag with a link to that picture.

CSS

CSS makes your page look good. See this W3 tutorial for more information.

Use the editor box on the bottom left. All CSS is allowed.

Title

Change the title of your page on the top right.

The page title can contain spaces and punctuation. codepuff.in will then use that to create a unique URL for your page. This way your page can have a title that makes sense for humans, but also one that makes sense for computers!

The "index" page is your homepage

Naming a page index makes it the default page of your folder. For example, both /codepuffin/index and /codepuffin will take you to the same page.

Saving a page

Don't forget to save your page after editing . Obviously, you can only save your own pages.

Variables

Use the following variables as an easy shortcut for commonly used links and blurbs.

~~owner-name~~Full name of the owner of the page.
~~owner-default_sitepath~~The path to the default website of the owner.
~~page-edit_url~~The URL of the editor of the page.
~~site-search_url~~The URL of the search page for this site.
~~site-newpage_url~~The URL to create a new page for this site. This only works if you're logged in.
~~site-newsite_url~~The URL to create a new folder in this site. This only works if you're logged in.

Variables start and end with two ~~ characters.

Follow the puffin!

Open the editor for any page on codepuff.in by clicking the puffin at the bottom-left of the screen. Even here, try it!

The Search Page

A website is basically a group of pages in a folder. In the Search page you can manage all the pages on your site, and also all the "sub-folders" you have. The contents of a website or folder are only visible to the person owning that website. For example, going to my home folder /codepuffin/_search will not show you anything! But going to your own search page will... Try it out.

`/` is the key

You can always go to any search page for any website by just putting a forward slash `/` behind the folder-name in the URL. For example, /codepuffin/ and /codepuffin/_search will take you to the same place.

Creating a new page

Click the "new page" button to create a new page.

Creating a new folder

Click the "new folder" button to create a new folder . You can think of a folder as a new "sub-website".

Change a folder name

Change the name of your folder . This is also how you can change the name of your default site! Only if you didn't like the nickname I gave you of course.

Filter results

Use the search bar on the top to search a page. You can search by page or site name and owner name.

Sharing Folders

Want to share the contents of a folder with somebody else? Just share the URL of that folder!

Requesting access

When people go to a folder that they do not have access to, they can request access to that folder.

For example, you could go to /codepuffin/_search and you would see:

Click the link to request access.

Approve or ignore requests

When people have requested access to one of your folders, you can approve or ignore their request in your search page.

An example of a pending request:

If you approve their request, a new folder will be created in their account that tracks your folder. In this tracking folder, they will see your work, and you can see their work. Deleting your own folder will not delete their folder and vice-versa. This allows you to safely share your folder contents without risk of losing it.

Copy pages

Once you track somebody elses folder, you can copy their pages in that folder. Just click the copy button and a copy of that page is created into your own tracking folder. This is an easy way to share code snippets with eachother.