BranchesTags

Repository files navigation

Fable website generator

This project generates the static web pages for the Fable website.

If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.

How to contribute?

All the content of the website is located under the docs folder, so if you are looking.

Architecture

docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting

Is done using gatsby-remark-vscode plugins.

Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.

Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.

How to add a blog post?

Blog posts are located under the docs/blog folder.

  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md

    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post

    This helps organize the contents and quickly find a blog post if needed for editing it.

  2. Adding the following front-matter at the top of your file

    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---

    Properties descriptions:

    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need

    Example:

    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---

  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided

Note for the maintainers

The custom layout for the blog index and blog pages are at:

  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx

If you need to customize the layout or fix something, that's the place to go.

If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.

How to test locally ?

  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/

How to deploy ?

Deployment should be done automatically when pushing to dev branch.

If the CI is broken, you can manually deploy it by running npm run deploy.

About

Fable web site

fable.io

Resources

Readme
Activity
Custom properties

Stars

24 stars

Watchers

5 watching

Forks

67 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Fable website generator
This project generates the static web pages for the Fable website.
If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.
How to contribute?
All the content of the website is located under the docs folder, so if you are looking.
Architecture
docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting
Is done using gatsby-remark-vscode plugins.
Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.
Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.
How to add a blog post?
Blog posts are located under the docs/blog folder.
  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md
    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post
    This helps organize the contents and quickly find a blog post if needed for editing it.
  2. Adding the following front-matter at the top of your file
    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---
    Properties descriptions:
    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need
    Example:
    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---
  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided
Note for the maintainers
The custom layout for the blog index and blog pages are at:
  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx
If you need to customize the layout or fix something, that's the place to go.
If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.
How to test locally ?
  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/
How to deploy ?
Deployment should be done automatically when pushing to dev branch.
If the CI is broken, you can manually deploy it by running npm run deploy.
About
Fable web site
fable.io
Resources
Readme
Activity
Custom properties
Stars
24 stars
Watchers
5 watching
Forks
67 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Fable website generator
This project generates the static web pages for the Fable website.
If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.
How to contribute?
All the content of the website is located under the docs folder, so if you are looking.
Architecture
docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting
Is done using gatsby-remark-vscode plugins.
Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.
Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.
How to add a blog post?
Blog posts are located under the docs/blog folder.
  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md
    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post
    This helps organize the contents and quickly find a blog post if needed for editing it.
  2. Adding the following front-matter at the top of your file
    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---
    Properties descriptions:
    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need
    Example:
    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---
  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided
Note for the maintainers
The custom layout for the blog index and blog pages are at:
  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx
If you need to customize the layout or fix something, that's the place to go.
If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.
How to test locally ?
  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/
How to deploy ?
Deployment should be done automatically when pushing to dev branch.
If the CI is broken, you can manually deploy it by running npm run deploy.
About
Fable web site
fable.io
Resources
Readme
Activity
Custom properties
Stars
24 stars
Watchers
5 watching
Forks
67 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Fable website generator
This project generates the static web pages for the Fable website.
If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.
How to contribute?
All the content of the website is located under the docs folder, so if you are looking.
Architecture
docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting
Is done using gatsby-remark-vscode plugins.
Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.
Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.
How to add a blog post?
Blog posts are located under the docs/blog folder.
  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md
    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post
    This helps organize the contents and quickly find a blog post if needed for editing it.
  2. Adding the following front-matter at the top of your file
    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---
    Properties descriptions:
    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need
    Example:
    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---
  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided
Note for the maintainers
The custom layout for the blog index and blog pages are at:
  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx
If you need to customize the layout or fix something, that's the place to go.
If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.
How to test locally ?
  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/
How to deploy ?
Deployment should be done automatically when pushing to dev branch.
If the CI is broken, you can manually deploy it by running npm run deploy.
About
Fable web site
fable.io
Resources
Readme
Activity
Custom properties
Stars
24 stars
Watchers
5 watching
Forks
67 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Fable website generator
This project generates the static web pages for the Fable website.
If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.
How to contribute?
All the content of the website is located under the docs folder, so if you are looking.
Architecture
docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting
Is done using gatsby-remark-vscode plugins.
Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.
Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.
How to add a blog post?
Blog posts are located under the docs/blog folder.
  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md
    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post
    This helps organize the contents and quickly find a blog post if needed for editing it.
  2. Adding the following front-matter at the top of your file
    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---
    Properties descriptions:
    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need
    Example:
    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---
  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided
Note for the maintainers
The custom layout for the blog index and blog pages are at:
  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx
If you need to customize the layout or fix something, that's the place to go.
If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.
How to test locally ?
  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/
How to deploy ?
Deployment should be done automatically when pushing to dev branch.
If the CI is broken, you can manually deploy it by running npm run deploy.
About
Fable web site
fable.io
Resources
Readme
Activity
Custom properties
Stars
24 stars
Watchers
5 watching
Forks
67 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Fable website generator
This project generates the static web pages for the Fable website.
If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.
How to contribute?
All the content of the website is located under the docs folder, so if you are looking.
Architecture
docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting
Is done using gatsby-remark-vscode plugins.
Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.
Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.
How to add a blog post?
Blog posts are located under the docs/blog folder.
  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md
    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post
    This helps organize the contents and quickly find a blog post if needed for editing it.
  2. Adding the following front-matter at the top of your file
    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---
    Properties descriptions:
    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need
    Example:
    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---
  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided
Note for the maintainers
The custom layout for the blog index and blog pages are at:
  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx
If you need to customize the layout or fix something, that's the place to go.
If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.
How to test locally ?
  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/
How to deploy ?
Deployment should be done automatically when pushing to dev branch.
If the CI is broken, you can manually deploy it by running npm run deploy.
About
Fable web site
fable.io
Resources
Readme
Activity
Custom properties
Stars
24 stars
Watchers
5 watching
Forks
67 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Fable website generator
This project generates the static web pages for the Fable website.
If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.
How to contribute?
All the content of the website is located under the docs folder, so if you are looking.
Architecture
docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting
Is done using gatsby-remark-vscode plugins.
Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.
Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.
How to add a blog post?
Blog posts are located under the docs/blog folder.
  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md
    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post
    This helps organize the contents and quickly find a blog post if needed for editing it.
  2. Adding the following front-matter at the top of your file
    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---
    Properties descriptions:
    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need
    Example:
    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---
  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided
Note for the maintainers
The custom layout for the blog index and blog pages are at:
  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx
If you need to customize the layout or fix something, that's the place to go.
If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.
How to test locally ?
  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/
How to deploy ?
Deployment should be done automatically when pushing to dev branch.
If the CI is broken, you can manually deploy it by running npm run deploy.
About
Fable web site
fable.io
Resources
Readme
Activity
Custom properties
Stars
24 stars
Watchers
5 watching
Forks
67 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Fable website generator
This project generates the static web pages for the Fable website.
If you've trouble building some native dependencies (like oniguruma) on your system, check the requirements for node-gyp installation.
How to contribute?
All the content of the website is located under the docs folder, so if you are looking.
Architecture
docs
├── blog Contains the blog posts
├── community.md Page listing the different places where people can regroup, ask for help
├── docs Contains the documentation section
├── index.md Index of the website
├── resources.md Community driven list of useful Fable tutorials, libraries and software.
├── static Static resource like images, etc.
├── scss Components use by style.scss
└── style.scss Main entry for styling the website

Code highlighting
Is done using gatsby-remark-vscode plugins.
Note: NPM complains about security warnings, unfortunaly the gatbsy teams is not really interested in upgrading their dependencies.
Because the package are only used for static website execution, we consider it "ok" for now. But a standalone plugin is in the progress in order to remove this dependency.
How to add a blog post?
Blog posts are located under the docs/blog folder.
  1. Add your file following this convention docs/blog/YYYY/YYYY-MM-DD-your blog post.md
    • YYYY represents the year
    • YYYY-MM-DD is the date of creation of your blog post
    This helps organize the contents and quickly find a blog post if needed for editing it.
  2. Adding the following front-matter at the top of your file
    ---
layout: fable-blog-pagetitle:
author:
date:
author_link:
author_image:
# external_link:abstract: | Announcing the official release of Feliz and what it means for the Fable community.---
    Properties descriptions:
    PropertyRequiredDescription
    layoutXShould always be fable-blog-page
    titleXThe title of your blog post
    authorXThe author name
    dateXDate of the blog post
    author_linkXA link to your Twitter or Github profile
    author_imageXA link to a picture of you
    external_linkOptional: If your blog post is not hosted on Fable.io website, put the link to it here
    abstractXThe abstract of your blog post, it will be used on the blog index page to introduce your blog post. You can use markdown here if you need
    Example:
    ---
title: Migration to Fable 2layout: fable-blog-pageauthor: Mangel Maximedate: 2018-10-01author_link: https://twitter.com/MangelMaximeauthor_image: https://github.com/MangelMaxime.png# external_link:abstract: | With this document we are going to convert a Fable 1 project into a Fable 2 project. This guide has been written by converting Fulma.Minimal template from Fable 1 to Fable 2.---
  3. Write your blog post under the front-matter section. The index page will automatically updates itself based on the information your provided
Note for the maintainers
The custom layout for the blog index and blog pages are at:
  • ./scripts/blog-index.jsx
  • ./scripts/blog-page.jsx
If you need to customize the layout or fix something, that's the place to go.
If there is a bug on another page, then the issue should be reported on Nacara repository as it is the one hosted the "standard" layout.
How to test locally ?
  1. npm install
  2. npm run watch
  3. Go to http://localhost:8080/
How to deploy ?
Deployment should be done automatically when pushing to dev branch.
If the CI is broken, you can manually deploy it by running npm run deploy.
About
Fable web site
fable.io
Resources
Readme
Activity
Custom properties
Stars
24 stars
Watchers
5 watching
Forks
67 forks
Report repository
Releases
Packages
Used by
Contributors
Languages