Added new Logo & Favicon, Switching Logo on Dark Mode, Added 'The Vision' paragraph

content/_index.md

@@ -3,8 +3,8 @@ title = "Build your own"
 
 # The homepage contents
 [extra]
-lead = '<img src="/logo.png" width="100px" height="100px" alt="cLAN logo"></img> <br><b>cLAN</b> envisions a new model for a decentralized network, designed to provide families, smaller groups, and small businesses a platform that’s private, secure, and user-friendly. '
-url = "/docs/getting-started/introduction/"
+lead = '<img src="/logo/clan-dark.png" class="clogo" width="100px" height="100px" alt="cLAN logo"></img> <br><b>cLAN</b> envisions a new model for a decentralized network, designed to provide families, smaller groups, and small businesses a platform that’s private, secure, and user-friendly. '
+url = "/docs/thevision/"
 url_button = "Learn more"
 repo_version = "cLAN v0.0.0-alpha"
 repo_license = "Open-source MIT License."
@@ -23,6 +23,8 @@ section = "blog"
 url = "/blog/"
 weight = 20
 
+
+
 [[extra.list]]
 title = "Easy to use"
 content = 'cLAN provides a user-friendly interface that allows you to establish your own private network, complete with services.'

content/blog/hello-world.md

@@ -1,8 +1,8 @@
 +++
-title = "Hello World"
+title = "The Beginning"
 description = "Introducing cLAN, a new model for a decentralized network, designed to provide families, smaller groups, and small businesses a platform that’s private, secure, and user-friendly."
-date = 2021-05-01T09:19:42+00:00
-updated = 2021-05-01T09:19:42+00:00
+date = 2023-05-01T09:19:42+00:00
+updated = 2023-05-01T09:19:42+00:00
 draft = false
 template = "blog/page.html"
 
@@ -10,6 +10,6 @@ template = "blog/page.html"
 authors = ["Mic92"]
 
 [extra]
-lead = "A blog post introducing the project."
+lead = "Introducing cLAN,"
 +++
-Some more text
+a new model for a decentralized network, designed to provide families, smaller groups, and small businesses a platform that's self hosted while pertaining the commodities of a cloud infrastructure.

content/docs/overview/index.md

@@ -1,5 +1,5 @@
 +++
-title = "Overview"
+title = "Technial Overview"
 description = "Overview of cLAN's architecture, components and security"
 date = 2021-05-01T18:10:00+00:00
 updated = 2021-07-13T18:10:00+00:00
@@ -192,9 +192,9 @@ configs.json
 }
 ```
 
-A crude example of how this interface would look like
-<img width="100%" src="flake_controller_new.png" alt="VM Manager New Network">
- 
+<!-- A crude example of how this interface would look like
+ <img width="100%" src="flake_controller_new.png" alt="VM Manager New Network">
+--> 
 
 ### VM Manager
 

content/docs/thevision/index.md

@@ -0,0 +1,20 @@
++++
+title = "The Vision"
+description = "The General Vision of this Project"
+date = 2021-05-01T19:30:00+00:00
+updated = 2021-05-01T19:30:00+00:00
+draft = false
+weight = 30
+sort_by = "weight"
+template = "docs/page.html"
++++
+
+Our vision in this context, is how we think the final product should behave and how users will interact with it. cLAN aims to provide an alternative to the ever-increasing centralization of the internet.
+
+Rather than relying on a centralized cloud, accessible through the clearnet, our goal is to establish an encrypted network of interconnected computers, forming a decentralized darknet—a user-driven cloud known as a cLAN.
+
+Our vision includes providing users with a seamless experience when joining one or multiple cLANs through invitation links. Clicking the link will trigger a popup that seeks confirmation to connect to the network.
+
+During the joining process, the user's computer (referred to as the client hereafter) will download a file containing information about a virtual machine (VM). The client will then automatically initiate the VM setup, and upon completion, this VM will become part of the cLAN.
+
+Once connected, users will gain access to a dashboard showcasing all the services offered within this particular cLAN. Within this dashboard, users can easily add applications or choose to host services for other cLAN members, such as a Nextcloud instance or other services.

templates/macros/head.html

@@ -0,0 +1,264 @@
+{% macro resource() %}
+  <link rel="preload" as="font" href="{{ get_url(path="fonts/vendor/jost/jost-v4-latin-regular.woff2") | safe }}" type="font/woff2" crossorigin>
+  <link rel="preload" as="font" href="{{ get_url(path="fonts/vendor/jost/jost-v4-latin-700.woff2") | safe }}"  type="font/woff2" crossorigin>
+{% endmacro %}
+
+
+{% macro stylesheet() %}
+<link rel="stylesheet" href="{{ get_url(path="main.css") | safe }}">
+{% endmacro %}
+
+
+{% macro favicons() %}
+  <meta name="theme-color" content="{{ config.extra.theme_color | default(value="#fff") }}">
+  <link class="favicon" rel="apple-touch-icon" sizes="180x180" href="{{ get_url(path="dark-favicon/128x128.png") | safe }}">
+  <link class="favicon" rel="icon" type="image/png" sizes="32x32" href="{{ get_url(path="dark-favicon/32x32.png") | safe }}">
+  <link class="favicon" rel="icon" type="image/png" sizes="16x16" href="{{ get_url(path="dark-favicon/16x16.png") | safe }}">
+  {% if not config.extra.is_netlify %}
+    <link rel="manifest" href="{{ get_url(path="site.webmanifest") | safe }}" crossorigin>
+  {% endif %}
+{% endmacro %}
+
+
+{# type:          website or article, generally setting article for blog articles #}
+{# page_images:   using for the blog single template page #}
+{# page_section:  the blog single template page have to pass the parameter #}
+{# is_404:        using for the 404.html template #}
+{% macro seo(
+  title="",
+  title_addition="",
+  description="",
+  type="website",
+  is_home=false,
+  is_404=false,
+  is_page=false,
+  page_images="",
+  page_section="",
+  created_time="2021-05-01T08:08:00+08:00",
+  updated_time="2021-05-01T08:08:08+08:00"
+  )
+%}
+
+{% if is_404 %}
+  <meta name="robots" content="noindex, follow">
+{% else %}
+  <meta name="robots" content="index, follow">
+  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+  <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
+{% endif %}
+{% if current_url %}
+	{% set page_url = current_url %}
+{% else %}
+	{% set page_url = get_url(path="404.html") %}
+{% endif %}
+{% if current_path %}
+	{% set page_path = current_path %}
+{% else %}
+	{% set page_path = "/404.html" %}
+{% endif %}
+<title>{{ title ~ title_addition }}</title>
+<meta name="description" content="{{ description }}">
+<link rel="canonical" href="{{ page_url | safe }}">
+
+{% if config.extra.open.enable %}
+  <meta name="twitter:card" content="summary_large_image">
+  {% if page.extra.images %}
+    {% for image in page.extra.images %}
+      <meta property="twitter:image" content="{{ get_url(path=image) | safe }}">
+    {% endfor %}
+  {% elif section.extra.images %}
+    {% for image in section.extra.images %}
+      <meta property="twitter:image" content="{{ get_url(path=image) | safe }}">
+    {% endfor %}
+  {% elif config.extra.open.image %}
+    <meta name="twitter:image" content="{{ config.base_url | safe }}/{{ config.extra.open.image }}">
+  {% endif %}
+  <meta name="twitter:title" content="{{ title }}">
+  <meta name="twitter:description" content="{{ description }}">
+  <meta name="twitter:site" content="@{{ config.extra.open.twitter_site }}">
+  <meta name="twitter:creator" content="@{{ config.extra.open.twitter_creator }}">
+  
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:description" content="{{ description }}">
+  <meta property="og:type" content="{{ type }}">
+  <meta property="og:url" content="{{ page_url | safe }}">
+
+  {% if page.extra.images %}
+    {% for image in page.extra.images %}
+      <meta property="og:image" content="{{ get_url(path=image) | safe }}">
+    {% endfor %}
+  {% elif section.extra.images %}
+    {% for image in section.extra.images %}
+      <meta property="og:image" content="{{ get_url(path=image) | safe }}">
+    {% endfor %}
+  {% elif config.extra.open.image %}
+    <meta property="og:image" content="{{ config.base_url | safe }}/{{ config.extra.open.image }}">
+  {% endif %}
+
+  <meta property="og:updated_time" content="{{ updated_time }}">
+  <meta property="og:site_name" content="{{ title }}">
+
+  {% if config.extra.open.audio %}
+    <meta property="og:audio" content="{{ config.extra.open.audio }}">
+  {% endif %}
+
+  {% if config.extra.open.locale %}
+    <meta property="og:locale" content="{{ config.extra.open.locale }}">
+  {% endif %}
+
+  {% if config.extra.open.videos %}
+    {% for video in config.extra.open.videos %}
+      <meta property="og:video" content="{{ get_url(path=video) }}">
+    {% endfor %}
+  {% endif %}
+  <meta property="article:publisher" content="https://www.facebook.com/{{ config.extra.open.facebook_publisher }}">
+  <meta property="article:author" content="https://www.facebook.com/{{ config.extra.open.facebook_author }}">
+  <meta property="og:locale" content="{{ config.extra.open.og_locale }}">
+{% endif %}
+
+{% if is_home and config.extra.schema %}
+  {% if config.extra.schema.type == "Organization" %}
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "url": "{{ page_path | safe }}",
+      "name": "{{ title }}",
+      "logo": "{{ page_path | safe }}{{ config.extra.schema.logo }}",
+      "sameAs": [
+        {% if config.extra.schema.twitter %}"{{ config.extra.schema.twitter | safe }}",{% endif %}
+        {% if config.extra.schema.linked_in %}"{{ config.extra.schema.linked_in | safe }}",{% endif %}
+        {% if config.extra.schema.github %}"{{ config.extra.schema.github | safe }}"{% endif %}
+      ]
+    }
+    </script>
+  {% endif %}
+  {% if config.extra.schema.type == "Person" %}
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Person",
+      "url": "{{ page_path | safe }}",
+      "name": "{{ title }}",
+      "sameAs": [
+        {% if config.extra.schema.twitter %}"{{ config.extra.schema.twitter | safe }}",{% endif %}
+        {% if config.extra.schema.linked_in %}"{{ config.extra.schema.linked_in | safe }}",{% endif %}
+        {% if config.extra.schema.github %}"{{ config.extra.schema.github | safe }}"{% endif %}
+      ]
+    }
+    </script>
+  {% endif %}
+  {% if config.extra.schema.site_links_search_box %}
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "url": "{{ page_path | safe }}",
+      "potentialAction": {
+        "@type": "SearchAction",
+        "target": "{{ page_path | safe }}?q={search_term_string}",
+        "query-input": "required name=search_term_string"
+      }
+    }
+    </script>
+  {% endif %}
+{% endif %}
+
+{% if is_page and config.extra.schema.section %}
+  {% if config.extra.schema.section == page_section %}
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "Article",
+      "mainEntityOfPage": {
+        "@type": "WebPage",
+        "@id": "{{ page_path | safe }}"
+      },
+      "headline": "{{ title }}",
+      "image": {{ page_images }},
+      "datePublished": "{{ created_time }}",
+      "dateModified": "{{ updated_time }}",
+      "author": {
+        "@type": "{{ config.extra.schema.type }}",
+        "name": "{{ title }}"
+      },
+      "publisher": {
+        "@type": "{{ config.extra.schema.type }}",
+        "name": "{{ title }}",
+        {% if config.extra.schema.type == "Organization" %}
+        "logo": {
+          "@type": "ImageObject",
+          "url": "{{ get_url(path=config.extra.schema.logo) | replace(from=config.base_url, to="") | safe }}"
+        }
+        {% endif %}
+      },
+      "description": "{{ description }}"
+    }
+    </script>
+  {% endif %}
+{% endif %}
+
+{% set url_prefix = get_url(path="/") | split(pat="://") | first %}
+{% set url_main = get_url(path="/") | split(pat="://") | last %}
+{% set url_item = url_prefix ~ "://" ~ url_main ~ "/" %}
+<script type="application/ld+json">
+  {
+    "@context": "http://schema.org",
+    "@type": "BreadcrumbList",
+    {% if page_path == "/" %}
+    {
+      "@type": "ListItem",
+      "position":  1 ,
+      "name": "Home",
+      "item": "{{ url_item | safe }}"
+    },
+    {% else %}
+      {% set paths = page_path | trim_start_matches(pat="/") | trim_end_matches(pat="/") | split(pat="/") %}
+      {% for val in paths %}
+        {% set name_array = val | split(pat="-") %}
+        {% set_global str = "" %}
+        {% for val in name_array %}
+        {% set cap_val = val | capitalize %}
+        {% set_global str = str ~ cap_val ~ " " %}
+        {% endfor %}
+        {% set name = str | trim_end_matches(pat=" ") | title %}
+        {% if not index %}
+          {
+            "@type": "ListItem",
+            "position":  1 ,
+            "name": "Home",
+            "item": "{{ url_item | safe }}"
+          },
+          {% set_global index = 2 %}
+          {% set_global url_item = url_item ~ val ~ "/" %}
+          {
+            "@type": "ListItem",
+            "position":  {{ index }} ,
+            "name": "{{ name }}",
+            "item": "{{ url_item | safe }}"
+          },
+        {% else %}
+          {% set_global index = index + 1 %}
+          {% set_global url_item = url_item ~ val ~ "/" %}
+          {
+            "@type": "ListItem",
+            "position":  {{ index }} ,
+            "name": "{{ name }}",
+            "item": "{{ url_item | safe }}"
+          },
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+  }
+</script>
+
+{% if config.extra.ganalytics %}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{config.extra.ganalytics}}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '{{config.extra.ganalytics}}');
+</script>
+{% endif %}
+{% endmacro %}

themes/adidoks/static/js/main.js

@@ -1,14 +1,71 @@
 // Set darkmode
 document.getElementById('mode').addEventListener('click', () => {
-
-    document.body.classList.toggle('dark');
-    localStorage.setItem('theme', document.body.classList.contains('dark') ? 'dark' : 'light');
-  
+  let isDarkTheme = document.body.classList.contains('dark');
+  setColorTheme(!isDarkTheme);
 });
-  
-// enforce local storage setting but also fallback to user-agent preferences
-if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-  
-  document.body.classList.add('dark');
-  
+
+
+function setColorTheme(dark) {
+  if (dark) {
+    document.body.classList.add('dark');
+    switchClanLogo("white");
+  } else {
+    document.body.classList.remove('dark');
+    switchClanLogo("dark");
+  }
 }
+
+// A function that returns true if the user prefers dark mode, false otherwise
+function prefersDarkMode() {
+  // Check if the browser supports the prefers-color-scheme media query
+  if (window.matchMedia) {
+    // Get the current value of the media query
+    let colorScheme = window.matchMedia("(prefers-color-scheme: dark)");
+    // Return true if the media query matches, false otherwise
+    return colorScheme.matches;
+  } else {
+    // If the browser does not support the media query, return false by default
+    return false;
+  }
+}
+
+function switchClanLogo(theme) {
+  let favs = document.getElementsByClassName("favicon");
+  for (item of favs) {
+    if (theme === "white")
+    {
+      item.href = item.href.replace("dark-favicon", "white-favicon")
+    } else {
+      item.href = item.href.replace("white-favicon", "dark-favicon")
+    }
+  }
+  let clogos = document.getElementsByClassName("clogo");
+  for (item of clogos) {
+    if (theme === "white")
+    {
+      item.src = item.src.replace("dark", "white")
+    } else {
+      item.src = item.src.replace("white", "dark")
+    }
+  }
+}
+
+
+let preferDarkTheme = prefersDarkMode();
+setColorTheme(preferDarkTheme);
+
+// Get the media query list object for the prefers-color-scheme media feature
+const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+// A function that executes some logic based on the color scheme preference
+function handleColorSchemeChange(e) {
+  if (e.matches) {
+    // The user prefers dark mode
+    setColorTheme(true);
+  } else {
+    // The user prefers light mode
+    setColorTheme(false);
+  }
+}
+
+// Add an event listener for the change event
+colorSchemeQueryList.addEventListener("change", handleColorSchemeChange);