mortendk / saga11

Saga eleven - A Static Website builder powered by 11ty and netlifycms, but at the end its just html, css & js

Saga eleven - A Static Website builder powered by 11ty and netlifycms

HTML + MarkDown = 💜

⚠️ This is Beta software

Fair warning this is still in beta - but your probably a geek so you know this ;)

Quick start

1. Enviroment setup

$ npm  run setup

open the /.env for port settings and gitbranch

2. Install Saga11

$ npm install

3. Spin it up:

$ npm  start

🤖 go to the admin interface admin

💅 Theme : /src/theme-grunn/ can be renamed in package.json

📜 content is in /src/content/

🎈 saga11 is build on top of 11ty & decap cms

🪲 bugs & comments github

🗑 Cleanup the build folder

$ npm run cleanup

Admin access online

https://docs.netlify.com/visitor-access/identity/

Static Sites FTW

Saga11 is a system to build static websites

The taget audience is webdesigners that wants complete control over the markup, and that wants a true seperation of settings, content and output

Theres no fancy libraries or SPA or anything else. Its just a website HTML + CSS + a tiny bit of JS

Figma Resources

Overview of all components https://www.figma.com/file/3lgQNUa3Y5TvV2V0XaQKoL/Saga-11?node-id=4266%3A924

Kill portnumber

if the portnumbers are in use all kinds of errors comes out :/ 8081 / 3791 sudo lsof -i :3791

kill -9 <PID>

sudo lsof -i :8081

.

saga11's Issues

Navigation

11ty navigation ?

• Pages
• custom pages (landing, contact etc)
• tags collections

QR code

QR codes are sweet

https://medium.com/geekculture/few-ways-to-generate-qr-code-using-javascript-54b6b5220c4f

Related stories / pages

Adding related storties / pages

config.yml

      - name: related
        label: Related pages and post
        widget: object
        collapsed: false
        summary: "{{fields.teaser}} / {{fields.image}}"
        fields:
        - name: pages
          label: Related Pages
          widget: relation
          collection: page
          searchFields: [title]
          valueField: "{{url}}"
          displayFields: ["url: {{url}}  - Title: {{title}}"]
          required: false
          multiple: true
        - name: post
          label: Related Post
          widget: relation
          collection: post
          searchFields: [title]
          valueField: "{{slug}}"
          displayFields: ["url: /{{url}}  - Title: {{title}}"]
          required: false
          multiple: true

{% for page in relatedpages %}
  <div class="flex">

  {# Grap the data from collections. all  #}
  {% for item in collections.all | getPage("/" + page + "/") -%}

    <article class="">
      <a href="{{ item.url }}">
        <h2 class="text-3xl">{{ item.data.title }}</h2>
        <div>{{ item.data.teaser }}</div>

        {# Generate image #}
        {% if item.data.image  %}
          {% set css = "shadow" %}
          {% set srcset = [200] %}
          {% set sizes = "(min-width: 1600px) 50vw, 100vw" %}
          {% set loading = "lazy" %}
          <div class="aspect-square overflow-hidden">
            {% image item.data.image , srcset, sizes, format, alt,css, loading %}
          </div>
        {% endif %}
        {# / Generate image #}
      </a>
      </article>
  {% endfor %}

  </div>

{% endfor %}

Components

It would be super badass there could be build a styleguide to build first ex: /styleguide/card/
That would make the design -> componenet -> live easier and would not need a seperate system like fractal to seperate.

Macro :(

The problem right now is that nunjucks macros dont support async functions so images wont render.

include

for loop with includes dont print anything no idea why

Notification content

Sometimes stuff goes wrong And the site needs a quick alert on the top of the pages /front page

Page type : notification
Title
URL
Teaser
Text
Active yes/no
Status: info / warning / burning

webmentions

Webmentions are pretty rad

Better support out the box ?
https://webmention.io

npm
https://www.npmjs.com/package/eleventy-plugin-webmentions

Documentation

Documentation is needed for future self that cant remember what was what and why

• tailwind setup
• alpine setup
• build and start scripts
• webhint test
• splastscreenbuilds and how to

use of env

edit this page

an edit this link ?

{{ page.inputPath | replace("./src/content/", "http://localhost:8080/_admin/#/collections/") }}
<br>
http://localhost:8080/_admin/#/collections/page/entries/frontpage/index

<a href="http://localhost:8080/_admin/#/collections/page/entries/you-can-crush-me-but-you-cant-crush-my-spirit/index">edit</a>

embed link

How do we handle embed of links - cause its freaking cool

unfurl
https://www.npmjs.com/package/eleventy-plugin-unfurl

js component

even that i try to keep it as simple as possible theres a few things i want in there from the get to

• modal toggle
• image gallery functionality
• form validation

Is alpine the right way to go - or is it pure vanilla for these elements ?

Pwa add to homescreen

Cause its cool

https://stackoverflow.com/questions/51160348/pwa-how-to-programmatically-trigger-add-to-homescreen-on-ios-safari

urls that are not unique can destroy the build

If a story gets the same urls as a another story the build will not run

quick fix

Add a timestamp after the string to minimize this issue

Real fix

Validate a string before it gets submitted from netlifycms to test if its valid

Themes

The overview of what's what in the src folder is hard
Investigate if we can move everything into a /src/theme/[name]/:
/templates
/Assets
/Tailwind

• How does this affect the tailwind setup
• copy assets

Clean: nakinn

**Automation**

Automatically move your cards to the right place based on the status and activity of your issues and pull requests.

tags collections

make tag collections for easy browsing

social media menu

settings for a some menu

image gallery

The user wants to generate a img gallery

Startup screens pwa figma file

To generte all Thise iOS files

images in rss feed

add the image from post to the rss feed (templates/layout/system-feed)

Componenet : Features

title "amazing features of this"
text "lorem bla bla "

items:

• icon "100.png"
• title "Lighthouse friendly"
• text "its the four hundo!"

tags content

it would be sweet to be able to add images etc for an tag page

implement eleventy navigation in netlifycms

The navition atm is a simple "menu" tag - it works for a 1 level menu but not much control from the enduser

is there a need to look at https://www.11ty.dev/docs/plugins/navigation/

section page

how to build a section page:
create from nc (section/foo.md)
include collection from item.data

Add image etc

componenet Price grid

Componenet to build a price grid

title "This is how much it cost"
text "bla bla bal "

• title "basic"
• text "basic package"
• price " 100"
• featured :yes (most popular etc)

Items (multiple:

• text : fast
• state (on/off) yes
• text : free
• state (on/off) no

critical css

for the final auto tweaks of the markup /css
ATM netlify does it out of the box - but would be nice to have in the build for more control and testing localo
https://github.com/addyosmani/critical

https://www.npmjs.com/package/eleventy-critical-css is a year old and looks not to be maintained atm

settings

gather all the standard data into a settings file that can be controlled from NC

Files

Missing that a user can add files to the website
Can netlifycms handle files ?

netlifycms

- label: "Manual PDF"
  name: "manual_pdf"
  widget: "file"
  default: "/uploads/general-manual.pdf"
  media_library:
    config:
      multiple: true

add to calendar

A story should be able to be turned into an "event"

Event

add to calendar link shortcode or transform

clalndr link api https://calndr.link/api-docs

https://www.npmjs.com/package/calendar-link?activeTab=readme

netlifycms - serverless preview

The preview in netlifycms is kinda a pita to configure
https://www.11ty.dev/docs/plugins/serverless/

embed all the things

Simpel support for youtube embeds
https://www.npmjs.com/package/eleventy-plugin-youtube-embed

Test if tailwind creates style.min.css

Is it the systems role to test if the webdesigner have broken tailwind by adding something like in a imported file

@apply font-weight-bold text-lg

Code cleanup

The eleventy.us file is a mess
Refactor all filters, collections, image functions into /_11ty/

create favicon + opengraph + startupscreen

Usecase
Upload an image
Creates Open graph startup screen and favicon

Low hanging version:
Provide Figma file with all the goodies for manual creation - keep the tech fun down a bit

Favicon

• Resizes to to faveicon sizes
• Ico file how ?

Opengraph default image created

• Fb +
• twitter

Splash screen

• Android
• iOS screen hell
  Investigate if the loads is affecting first draw

images shortcodes path

very cumbersome to work with

The build throws errors if the images are not coming from /images

Rebuild the file structure for content

/foobar/:
index.md
Image.png
Foo.zip

enviroment for css build

build the minified version of the css build on prod

Link in bio template

A common usecase - the i only have One link in my bio & need to Direct people to all the some services

• Create a page with a separate template
• Add all the soMe links
• Add an image
• Separate design from the rest of the site
• should get its own component type
• list of links
• images
• body text

Use case :
The link in an insta bio

Remove .node-version & .vscode

cleanup :)

Netlifycms preview path

Is it possible to point to the repos netlify preview for a decent preview of the page / post

Link in bio

Acdefault link in bio landing page

icons fav

are browsers looking for these
pust em in /root
/favicon.ico | 36
/apple-touch-icon-precomposed.png | 24
/apple-touch-icon.png

apparently ios is kinda picky

image multiple sub folders

need some level of subfolders

Cookie Consent

Embedding - how to add a simple version for faster sites
Needs to be local, speed is essential
Easy to implement

• YouTube embeds no cookie
• Google tracker
• Email signup stuff
• embed stuff ... its a cookie hell

https://www.osano.com/cookieconsent/documentation/about-cookie-consent/?utm_source=referral&utm_medium=cmp-os&utm_term=cookieconsent&utm_content=plugin&utm_campaign=eucookielaw

https://github.com/orestbida/cookieconsent

nunjucks code in markdown

adding nunjucks code snippets to a md file dosnt work - 11ty is parsing it

{% raw %}
{{ env.url }}

{% endraw %} 

Favicon

Enviroment Settings

Use an env file for

admin path (needs a absolute url)
Potential theme path
Prod yes/no

componenet : testamonial

Build testamonials

Structure

title : "what people say"
text "bla bla bla"
image "/upload/background.png"

items
Title: " England is awesome to raid"
text :"Lots of pretty places to visit and money to bring back home 10/10 recommend"
image "/upload/person.png"
name : "Ragnar"
name: "King"

paths must be unique

if 2 paths are the same theres an error in the build

remove contact form page

the form can be added from a twig file
can we link that from frontmatter __

Social share

Simple add to some channels for stories

LinkedIn
LinkedIn

Pinterest
http://pinterest.com/pin/create/link/?url=

Facebook

Fb

https://www.codegrepper.com/code-examples/html/how+to+create+facebook+share+link+on+website

image Shortcodes in markdown

{% image images/foo.jpg  %}