Files Website • files.community
Overview | Development | Contributors
The starting page for everything related to Files — documentation and news included!
This repository contains the source code for the new Files website. The site is written using SvelteKit, TypeScript and SCSS, and deployed with Cloudflare.
.
├──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.
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!
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.
Run this command at the root folder to install dependencies:
pnpm i
To build the site in development mode, simply run the following command:
pnpm run dev
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.
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
.
Our documentation system uses mdsvex, a superset of markdown designed to work with Svelte.
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.
To create/delete a page, remove the corresponding folder for it, as long with the +page.md
file inside it.
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.
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.
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.
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.
Translation is done via Crowdin: https://crowdin.com/project/files-website
Want to contribute to this project? Feel free to open an issue or pull request.