Awesome

Overview

This repository contains the source code for the new Files website. The site is written using SvelteKit, TypeScript and SCSS, and deployed with Cloudflare.

Codebase Structure

.
├──static                 // Contains static assets including branding, images, fonts, etc...
|  ├──branding            // Branding media (logos, banners, etc...)
|  ├──fonts               // Static font files loaded by the website.
|  ├──preview-samples     // Sample files used in the preview pane in the features section.
|  ├──screenshots         // Screenshots and renders of the app used in the website.
|  └──ui                  // Images other than branding used in the website's user interface.
└──src                    // The website's source code.
   ├──lib                 // Re-usable Svelte components used within the website.
   ├──layout              // Components responsible for defining page layout, such as headers, footers, page sections, etc...
   ├──routes              // SvelteKit's filesystem-based routes. Anything in the folder is registered as a URL on build time.
   |  ├──docs             // Documentation and associated files.
   |  └──blog             // Blog page and associated files.
   |     └──posts         // Folder containing blog posts in Markdown format.
   ├──data                // Data storage used across various components and routes. NOT stores, just exported variables.
   └──styles              // SCSS styles that are NOT tied to components in /lib.

Development

GitHub Codespaces

You can develop this project using GitHub Codespaces. For this, click the button below. It will allow you to create a new Codespace with the configuration of your choice.

After the Codespace has initialized, you can run pnpm dev and you'll be ready to go!

Local development

Prerequisites

• Git
• Node.js with npm.
• pnpm
• Shell of your choice.

Building

1: Clone the repository.

git clone https://github.com/files-community/Website && cd Website

This will create a local copy of this repository and navigate you to the root folder of the repository.

2: Install Dependencies

Run this command at the root folder to install dependencies:

pnpm i

3: Run Build Script

To build the site in development mode, simply run the following command:

pnpm run dev

Additional Scripts

Linting

This project uses prettier and eslint. Run this command to lint your changes:

pnpm run lint

Additionally, we use lint-staged to automatically format all changed files before committing them, ensuring that all code is formatted consistently.

Compiling & Distribution

We currently use SvelteKit's cloudflare adapter module, which allows us to deploy to cloudflare. To simply build a production bundle, use the following script:

pnpm run build

Alternatively, to preview your changes in a production-like build, use pnpm run preview.

Contributing to Documentation

Our documentation system uses mdsvex, a superset of markdown designed to work with Svelte.

Editing Existing Pages

Documentation files are located at src/routes/docs. SvelteKit uses a filesystem-based router, meaning that the layout of page folders in the filesystem will reflect the URL path they are assigned to.

To edit an existing page, find the corresponding folder in the docs directory, and edit the +page.md file inside it.

Adding or Deleting a Page

To create/delete a page, remove the corresponding folder for it, as long with the +page.md file inside it.

Using Categories

Categories are sub-folders inside src/routes/docs, which contain a category.md file. This file marks a category directory, and contains metadata relating to it. Categories can contain page folders (with a +page.md file in them), or other categories.

Using the Blog

Similarly to docs pages, the blog also uses mdsvex for it's markdown. Blog posts are located at src/routes/blog/posts in *.md files. Unlike the docs, a mapping of blog posts doesn't need to be kept.

Publishing a Post

To publish a post, create a new folder in the posts folder, and in it place a file named +page.md. It will contain your post's content.

At the top of the file, you'll need to include a few required things before typing the post.

---
title: Title of the Post
author: author-github-handle
description: Description of the post.
thumbnail: https://path-to-thumbnail-image.png
date: 2021-09-06
---

This metadata table is required for all posts, and gives the website some basic information about the post to work with. Below the table, you're free to use whatever markdown or components you want.

Removing or Editing a Post

Since we don't need any mapping to be updated, posts can simply be deleted from the folder or edited without any hassle or extra steps.

Translating the Site

Translation is done via Crowdin: https://crowdin.com/project/files-website

Contributors

Want to contribute to this project? Feel free to open an issue or pull request.