WikiYou is a free, community-built encyclopedia powered by GitHub. Anyone can create or edit pages by submitting a Pull Request. This guide explains everything you need to know to get started.

1. Quick Start

Contributing to WikiYou is a simple process using GitHub's Pull Request workflow:

  • Fork the Repository

    Go to github.com/altlimit/wikiyou and click the Fork button in the top-right corner. This creates your own copy of the project.

  • Create Your Page

    Add a new .html file in the appropriate category folder under site/src/. Choose the right template and fill in the frontmatter fields (see below).

  • Write Your Content

    Write your content inside the {{define "content"}} block using standard HTML and the CSS helper classes provided below. No custom CSS needed!

  • Submit a Pull Request

    Commit your changes, push to your fork, then open a Pull Request to the main repository. The maintainers will review and merge your contribution.

Tip: You can create and edit files directly on GitHub without cloning the repository. Just navigate to the folder you want and click "Add file" → "Create new file".

2. Directory Structure

Pages are organized into category folders. Always place your file in the correct category:

FolderCategoryWhat Goes HereTemplate
site/src/companies/CompaniesBusiness profiles, startups, organizationsprofile.html
site/src/tools/ToolsCalculators, converters, interactive utilitiestool.html
site/src/people/PeopleBiographies, public figures, creatorsprofile.html
site/src/games/GamesBrowser games, game reviews, gaming historyarticle.html or tool.html
site/src/apps/AppsApp reviews, feature walkthroughs, app historyarticle.html
site/src/guides/GuidesHow-to articles, tutorials, educational contentarticle.html

Important: Use lowercase, hyphenated filenames. For example: my-company-name.html, not My Company Name.html.

3. Available Templates

WikiYou provides several templates designed for different types of content. Choose the one that best fits your page:

📄 article.html

General-purpose wiki article layout. Best for informational content, histories, tutorials, and guides.

General Use
👤 profile.html

Wikipedia-style profile with an infobox sidebar. Best for companies, organizations, and people.

Profiles
🔧 tool.html

Interactive tool layout with app container. Best for calculators, converters, and browser-based tools.

Interactive

4. Article Template

The article template is the most versatile. Use it for any informational content.

HTML
---
template: article.html
title: Your Article Title
description: "A brief description for SEO and social sharing."
category: guides
category_label: Guides
og_type: article
---

{{define "content"}}
<h2>Section Heading</h2>
<p>Your content here. Use standard HTML tags.</p>

<h2>Another Section</h2>
<p>More content. You can use lists, tables, code blocks, and more.</p>
<ul>
    <li>Point one</li>
    <li>Point two</li>
</ul>
{{end}}

5. Profile Template

The profile template shows a Wikipedia-style infobox sidebar. The infobox fields are populated automatically from your frontmatter.

HTML
---
template: profile.html
title: Company or Person Name
description: "Brief description for SEO."
category: companies
category_label: Companies
type: Private Company
industry: Software Development
founded: "2020"
location: San Francisco, CA
website: https://example.com
github: username
og_type: article
---

{{define "content"}}
<h2>Overview</h2>
<p>An overview paragraph about the subject.</p>

<h2>History</h2>
<p>Historical details and background.</p>
{{end}}

Available infobox fields:

FieldDescriptionUsed For
typeEntity type (e.g., "Private Company")Companies, Orgs
industryIndustry or fieldCompanies
foundedYear foundedCompanies
locationHeadquarters or locationCompanies, People
websiteOfficial website URLCompanies, People
foundersFounder namesCompanies
employeesEmployee countCompanies
githubGitHub usernameCompanies, People
bornBirth date/yearPeople
occupationJob title or occupationPeople

6. Tool Template

The tool template provides a centered layout for interactive applications. Include your JavaScript in the addHead block.

HTML
---
template: tool.html
title: My Calculator
description: "A brief description of what this tool does."
category: tools
category_label: Tools
info: true
og_type: article
---

{{define "addHead"}}
<script>
    // Your JavaScript here
</script>
{{end}}

{{define "content"}}
<!-- Your interactive tool HTML here -->
<div class="form-group">
    <label for="input1">Enter a value</label>
    <input type="text" id="input1">
</div>
<div class="form-result" id="result">Result</div>
{{end}}

{{define "tool-info"}}
<h2>About This Tool</h2>
<p>Explain what the tool does and how to use it.</p>
{{end}}

7. CSS Helper Classes

WikiYou provides a rich set of CSS utility classes so you can create well-structured pages without writing custom CSS. Here are the most commonly used classes:

Layout

ClassDescription
containerCentered content with max-width and padding
grid-2, grid-3, grid-4Responsive grid layouts (2, 3, or 4 columns)
flex, flex-col, flex-centerFlexbox utilities
gap-1 through gap-6Gap between flex/grid items

Typography

ClassDescription
text-sm, text-lg, text-xl, text-2xlFont sizes
font-bold, font-semiboldFont weights
text-muted, text-lightMuted/light text colors
text-center, text-rightText alignment

Spacing

ClassDescription
mt-1 through mt-8Margin top (scales from 0.25rem to 3rem)
mb-1 through mb-8Margin bottom
p-2 through p-6Padding all sides
py-2 through py-10Padding top and bottom
px-3 through px-6Padding left and right

Components

ClassDescription
card, card-hoverCard with border and optional hover effect
badge, badge-accentInline badge/tag
btn, btn-primary, btn-outlineButton styles
alert alert-infoInfo notice box (also: alert-success, alert-warning, alert-danger)
bg-white, bg-subtleBackground colors
rounded, rounded-lgBorder radius
shadow, shadow-mdBox shadows

8. Content Guidelines

  • Be factual and neutral. Write in an encyclopedic tone similar to Wikipedia. Avoid promotional language.
  • Use sections. Break your content into clearly headed sections using <h2> and <h3> tags.
  • Write enough content. Aim for at least 3-4 paragraphs. Stubs are acceptable but fuller articles are preferred.
  • Add descriptions. Always include a description field in your frontmatter for SEO and social sharing.
  • Quote multi-line strings. YAML frontmatter values that contain colons or span multiple lines must be wrapped in quotes.
  • Use lowercase filenames. Use hyphens to separate words: my-page-title.html.
  • Cite your sources. Link to references or external sources when presenting factual claims.
  • No inappropriate content. Content must be suitable for a general audience.

Ready to contribute? Head over to the WikiYou GitHub repository and create your first page!