This is an Eleventy powered website with TailWind CSS and PostCSS integration built to serve as a replacement for the Freeside website.
The following are the benefits provided by each page. Take note of these and consider them when making changes in the future.
- 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.
- Provides clear information about Freeside
- Provides links to all social media/communication methods
- Provides information about getting involved and benefits of getting involved.
TODO
- Replaces index of previous site to create a dedicated blog page
- Lists blog posts from
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
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:
.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.
Contains the structure, data and other resources for the website prior to it being rendered into html.
This page is primarily made up of content with the header and footer snippets being defined using layouts/home.
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.
Contains the index.njk which serves the about page.
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.
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.
Contains any/all relevant data for the website.
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
Contains the structure, data and other resources for the website after it has been rendered into html.
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