4.4 KiB
Freeside Web
This is an Eleventy powered website with TailWind CSS and PostCSS integration built to serve as a replacement for the Freeside website.
Benefits
The following are the benefits provided by each page. Take note of these and consider them when making changes in the future.
Landing page (index)
- Provides concise introduction to Freeside with calls to action.
- Provides links to all social media/communication methods.
- Provides clear routes to projects, showcases, resources and posts.
About page (about/index)
- Provides clear information about Freeside
- Provides links to all social media/communication methods
- Provides information about getting involved and benefits of getting involved.
History page (history/index)
TODO
Blog (blog/index)
- Replaces index of previous site to create a dedicated blog page
- Lists blog posts from
data/posts
Posts (data/posts)
- Posts ported from old blog to maintain meta data/seo.
- Updated metadata to comply with eleventy.
- Allows Freeside to use eleventy as it's main blog platform, retiring Freeside-Blog
Structure
The structure of Freeside Web is separated into internal and public with configuation files existing outside of these directories. Below is an explanation of the struture:
Configuration files
.eleventy.js is the main eleventy configuration file.
eleventyComputed.js controls Computed Data within the website.
tailwind.config.jsis the main Tailwind CSS config file. Advanced configuration/customisation can be done here.
postcss.config.js is the main PostCSS config file. Advanced processing for CSS should be done here.
internal
Contains the structure, data and other resources for the website prior to it being rendered into html.
index.njk
This page is primarily made up of content with the header and footer snippets being defined using layouts/home.
_includes
Contains all of the major resources for the website, including css, img, js,layouts and snippets.
css contains all of the style files. The styling is provided by Tailwind CSS which is primarily running "out of the box". Customisation of Tailwind can be done in tailwind.config.js. Any processing / removal of unused styles / optimisation should be done with postcss.config.js.
img contains images used within the website. note: some images reside only in the public img folder.
js conains all of the js files relevant to functionality of the website.
layouts contains all of the layout files, these are in nunjuck format. There is a home, default, blog and post layout.
snippets contains 'snippets' which aid layouts. For example, nav & footer snippets can be found in each layout to provide a uniform layout. The alumni snippet should be used as the profile for each alumnus profile.
about
Contains the index.njk which serves the about page.
alumni
Contains the index.njk which serves the alumni page.
Also contains individual alumnus profiles. Profiles should be named as per the alumnus tag, e.g. closebracket.njk, sleepyxuras.njk.
blog
Contains the index.njk which serves the blog page. This should display a list of blog posts using eleventyComputed.js and posts from data/posts.
data
Contains any/all relevant data for the website.
data/posts
Contains markdown files which are displayed on the blog. The former data structure has been retained aside from the date format which was changed to comply with eleventy's standards. Any further blog posts should be placed in this directory so that they can be displayed on the website.
Each post should start with the following:
layout: layouts/post
title: Your title
date: "2021-08-20"
tags: sometag
history
public
Contains the structure, data and other resources for the website after it has been rendered into html.
Getting Started
Once you have the repo cloned and available your system, run the following commands:
- Install all the needed dependancies as per package.json.
npm install
- Once the dependancies have been installed, you can start the site by running
npm start