Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/actuallymentor/slowcial-media
Slowcial media website.
https://github.com/actuallymentor/slowcial-media
Last synced: 4 days ago
JSON representation
Slowcial media website.
- Host: GitHub
- URL: https://github.com/actuallymentor/slowcial-media
- Owner: actuallymentor
- Created: 2020-07-24T12:47:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T12:21:01.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T23:01:26.953Z (7 months ago)
- Language: JavaScript
- Size: 1.11 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Webpack 4, frontend only
This repo sets up a development environment where you can happily edit your .pug, .scss and .js files while your development server automatically updates when you save.
The main optimisations are a high page speed score and built-in SEO structure. The only reason the page scored 99/100 page speed is because Google Analytics doesn't leverage browser caching sufficiently.
[Live Demo of a webpage built with this module]( https://actuallymentor.github.io/webpack-frontend-only/ )
Workflow:
1. Make html structure using [ pug ]( https://github.com/pugjs )
2. Write styling in [ Sass ]( https://github.com/sass/sass )
1. The `essential-above-the-fold.scss` is embedded into the header as a minified `` element
1. The `styles.scss` is loaded with javascript
3. Write js in ES2015 compiled by [ Webpack ]( https://github.com/webpack )
4. Have an auto-refreshing browser preview using [ Browsersync ]( https://github.com/BrowserSync/browser-sync )
## Getting started
Basic usage:
```shell
git clone https://github.com/actuallymentor/webpack-frontend-only.git
npm install
npm start # This will open the preview on your browser
```
To make the final build version:
```shell
npm run build
```
Note that the ``` assets/``` folder is copied from the source to public directory.
## Configuration
By default the folder containing the source files is ``` src/``` and the folder containing the compiled website is ``` public/``` in development mode and ```docs/``` in production mode.
The pug files depend on a number of configuration options that can be found in ``` modules/config.js```:
```js
{
// Identity variables used in pug templates
identity: {
title: "Website",
desc: "Description of website",
"logo": "logo.jpg"
},
// System vars managing some pug elements as well as file paths
system: {
public: __dirname + '/../public/',
source: __dirname + '/../src/',
url: process.env.local ? 'http://localhost:3000/' : 'https://www.liveurl.com',
gverification: undefined,
year: new Date().getFullYear()
},
// About the author. Change this to your own unless you went me to get credit for your page of course... <3
author: {
firstname: "Mentor",
lastname: "Palokaj",
email: "[email protected]",
twitter: "@actuallymentor",
// facebook profile id, used for retargeting ad permissions
facebook: "1299359953416544",
url: "https://www.skillcollector.com/"
},
// Tracking codes
track: {
ga: "UA-XXXXXXXX-XX"
}
}
```
In pug this configuration object is passed as ``` const site = require( config.js )```.
## Multiple languages
In the `src/content` folder you can add `.json` files that are used to add parse content into your `.pug` files. Their syntax is:
```json
{
"slug": "/",
"lang": "en",
"text": {
"title": "something",
"explanation": "lorem ipsum"
}
}
```
The `lang` attribute is used on the `html` element to declare the language. The other attributes can be read inside any pug template under the `content` variable, for example:
```pug
div.thing
p#title #{ content.text.title }
a( href=content.slug ) home
```
## SEO and Social
Every page currently requires you to specify a variable: ```page``` that contains the title and details for the current page.
```js
const page = { title: 'Home', desc: 'Home page', published: '2017-01-01', url: '/', featuredimg: '/image.jpg' }
```
The pug template includes social sharing parameters in the header:
```pug
head
meta( charset='utf-8' )
meta( http-equiv="x-ua-compatible" content="ie=edge" )
meta( name="viewport" content="width=device-width, initial-scale=1" )
base( href=site.system.url )
meta( name="robots" content="index,follow,noodp" )
meta( name="googlebot" content="index,follow" )
if site.system.gverification
meta( name="google-site-verification" content=site.system.gverification )
//- Regular meta tags
title !{site.identity.title} - #{page.title}
meta( name="description" content=site.identity.desc )
//- Facebook tags
meta( property="og:site_name" content=site.identity.title )
meta( property="og:title" content=site.identity.title + ' - ' + page.title )
meta( property="og:description" content=page.desc )
meta( property="article:published_time" content=page.published)
meta( property="og:type" content="article" )
meta( property="og:url" content=page.url )
meta( property="og:image" content=page.featuredimg)
meta( property="fb:admins" content=site.author.facebook )
meta( property="profile:first_name" content=site.author.firstname)
meta( property="profile:last_name" content=site.author.lastname)
//- Twitter tags
meta( name="twitter:site" content=site.author.twitter )
meta( name="twitter:title" content=site.identity.title + ' - ' + page.title )
meta( name="twitter:description" content=page.desc)
meta( name="twitter:image" content=page.featuredimg)
meta( name="name=twitter:image:alt" content=page.title )
meta( name="twitter:card" content=page.desc )
//- DNS Prefetching
link( rel="dns-prefetch" href="//www.google-analytics.com" )
link( rel="dns-prefetch" href="//fonts.googleapis.com.com" )
//- Temporarily hide body, this is undone by the app stylesheet
style.
body { display: none; }
script( src=site.system.url + 'js/app.js' async)
```
The footer contains google's rich markup as ld+json:
```js
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "#{page.url}"
},
"headline": "#{page.title}",
"image": {
"@type": "ImageObject",
"url": "#{site.system.url}#{page.featuredimg}",
"height": "696px",
"width": "696px"
},
"datePublished": "#{page.published}",
"dateModified": "#{page.updated}",
"author": {
"@type": "Person",
"name": "#{site.author.firstname} #{site.author.lastname}",
"url": "#{site.author.url}"
},
"publisher": {
"@type": "Organization",
"name": "#{site.identity.title}",
"url": "#{site.system.url}",
"logo": {
"@type": "ImageObject",
"url": "#{site.identity.logo}",
"width": "60px",
"height": "600px"
}
},
"description": "#{page.desc}"
}
```