feat: add support for goatcounter and migrate to statistics config

src/components/shortcodes/ProtectedContent.astro

@@ -9,7 +9,7 @@ interface Props {
 
 const { password: propPassword, pwEnv } = Astro.props;
 // Get password from props, environment variable, or site config
-const password = (pwEnv ? import.meta.env[pwEnv] : propPassword) || siteConfig.contentPassword || import.meta.env.CONTENT_PASSWORD || Math.random().toString();
+const password = (pwEnv ? import.meta.env[pwEnv] : propPassword) || siteConfig.contentPassword || import.meta.env.CONTENT_PASSWORD;
 
 // Get the slot content
 const content = await Astro.slots.render('default');
@@ -21,28 +21,30 @@ const { encryptedData, iv } = encrypt(content, password);
 <div class="encrypted-content" data-encrypted={encryptedData} data-iv={iv}>
     <div class="password-form">
         <p>This content is protected. Enter the password to view it:</p>
-        <form>
+        <div>
             <input type="password" class="decrypt-password" title="password" />
             <button class="decrypt-button">Decrypt</button>
-        </form>
+        </div>
     </div>
     <div class="content-container hidden"></div>
 </div>
 
 <style>
-    div.encrypted-content {
-        border: 1px solid var(--border-color);
-    }
     div.password-form {
-        margin: 0.5rem auto;
+        margin: 0.25rem auto;
+    }
+    div.password-form div {
+        margin: 0.25rem auto;
     }
     input[type="password"] {
         background: var(--accent-color);
+        color: var(--bg-color);
         border: none;
         padding: 0.25rem;
     }
     button {
         background-color: var(--accent-color);
+        color: var(--bg-color);
         border: none;
         padding: 0.25rem;
     }

src/config.ts

@@ -10,7 +10,7 @@ export const siteConfig = {
     },
     // features
     noClientJavaScript: false, // disable client-side javascript, this will:
-    // 1. disable all built-in client-side javascript from rendering
+    // 1. disable most built-in client-side javascript from rendering (protected content component and umami still needs javascript to function, sorry)
     // 2. the full text search will be redirected to a search engine
     // 3. the comments will be globally disabled
     // 4. the night mode & back to top will not use Javascript to function
@@ -25,13 +25,14 @@ export const siteConfig = {
     ],
     // search
     // This only works when noClientJavaScript is enabled
-    searchEngine: 'bing', // 'google', 'duckduckgo', 'bing'(broken until M1cr0$0ft get support for it), defaults to 'google'
+    searchEngine: 'duckduckgo', // 'google', 'duckduckgo', 'bing' (broken until M1cr0$0ft get support for it), defaults to 'google'
     // content
     displayAvatar: true, // display author avatar in the article list and info line of article page
     // encryption
     // the global password to encrypt/decrypt the content, if set, all <ProtectedContent/> without specifying a password will be encrypted with this password
-    // you can use a different environment variable to set the password.
+    // To use an environment variable to set the password, replace the value with `import.meta.env.CONTENT_PASSWORD`
-    contentPassword: import.meta.env.CONTENT_PASSWORD,
+    // (or process.env.CONTENT_PASSWORD, CONTENT_PASSWORD can be any string) and set the environment variable in your deployment service.
+    contentPassword: 'p1easeChangeMe!',
     // footer
     // yes you can write html safely here
     customFooter: '<i>I have no mouth, and I must SCREAM</i>',
@@ -84,11 +85,18 @@ export const siteConfig = {
     },
     // umami analytics
     // by enabling this, you can track the visitors of your site
+    siteAnalytics: {
+        enabled: false, // enable analytics
+        type: 'umami', // 'umami', 'goatcounter'
         umami: {
-        enabled: false, // enable umami analytics
+            instanceDomain: 'cloud.umami.is', // the domain of the umami instance, usually your-umami-instance.com (default: official cloud.umami.is)
-        instanceDomain: 'cloud.umami.is', // the url of the umami script, usually your-umami-instance.com (default: official cloud.umami.is)
             websiteId: 'your-website-id', // the id of your website in umami, get it from your umami dashboard
         },
+        goatcounter: {
+            // provide solutions for tracking visitors without Javascript
+            instanceDomain: 'yourcodehere.goatcounter.com', // the domain of the goatcounter instance, usually your-goatcounter-instance.com
+        },
+    },
     // neko
     // by enabling this, you can add a neko that follows cursor to your site
     // this will load script from webneko.net

src/layouts/Layout.astro

@@ -18,7 +18,11 @@ interface Props {
 }
 
 const noscript = siteConfig.noClientJavaScript
-const umami = siteConfig.umami
+
+const statisticsEnabled = siteConfig.siteAnalytics.enabled
+const statisticsType = siteConfig.siteAnalytics.type
+const umamiConfig = siteConfig.siteAnalytics.umami
+const goatCounterConfig = siteConfig.siteAnalytics.goatcounter
 
 const defaultTitle = siteConfig.title
 const formattedRootPath = defaultTitle.toLowerCase().replace(/\s+/g, '-');
@@ -68,6 +72,7 @@ const { title = pageTitle, author = siteConfig.defaultAuthor.name,description =
     <footer class="footer">
       <div class="floating">
         <BackToTop/>
+
         {noscript ? <ThemeSwitcher_CSSOnly/> : <ThemeSwitcher/>}
       </div>
       <div class="container">
@@ -75,7 +80,33 @@ const { title = pageTitle, author = siteConfig.defaultAuthor.name,description =
         <p>Powered by <a href="https://git.gb0.dev/gb/mercury" target="_blank"><Logo width={16} height={16} /> mercury</a></p>
       </div>
     </footer>
-    {umami.enabled && <script defer src=`https://${umami.instanceDomain}/script.js` data-website-id={umami.websiteId}></script>}
+    {statisticsEnabled && statisticsType === 'umami' && (
+          <script
+            is:inline
+            defer
+            src={`https://${umamiConfig.instanceDomain}/script.js`}
+            data-website-id={umamiConfig.websiteId}
+          ></script>
+        )}
+    {statisticsEnabled && statisticsType === 'goatcounter' && (
+      <>
+        {noscript ? (
+          <img src={`https://${goatCounterConfig.instanceDomain}/count?p=/${Astro.url.pathname}`} alt="Analytics" />
+        ) : (
+          <>
+            <script
+              is:inline
+              async
+              data-goatcounter={`https://${goatCounterConfig.instanceDomain}/count`}
+              src={`https://${goatCounterConfig.instanceDomain}/count.js`}
+            ></script>
+            <noscript>
+              <img src={`https://${goatCounterConfig.instanceDomain}/count?p=/${Astro.url.pathname}`} alt="Analytics" />
+            </noscript>
+          </>
+        )}
+      </>
+    )}
     { (siteConfig.neko.enabled && !noscript) &&
       <>
         <script is:inline define:vars={{ nekoType }}>