Merge pull request #2775 from ZhenShuo2021/firebase

 Feat: improve Firebase
This commit is contained in:
Nuno C.
2026-02-11 21:51:05 +00:00
committed by GitHub
11 changed files with 198 additions and 288 deletions
-4
View File
@@ -1,4 +0,0 @@
document.getElementById("button_likes") &&
document.getElementById("button_likes").addEventListener("click", () => {
process_article();
});
+154
View File
@@ -0,0 +1,154 @@
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
import {
getFirestore,
doc,
getDoc,
setDoc,
updateDoc,
increment,
onSnapshot,
} from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js";
import { getAuth, signInAnonymously } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js";
let app, db, auth, oids;
try {
const configEl = document.getElementById("firebase-config");
if (!configEl?.textContent) {
throw new Error("Firebase config element not found");
}
const data = JSON.parse(configEl.textContent);
app = initializeApp(data.config);
oids = {
views: configEl.getAttribute("data-views"),
likes: configEl.getAttribute("data-likes"),
};
db = getFirestore(app);
auth = getAuth(app);
} catch (e) {
console.error("Firebase initialization failed:", e.message);
throw e;
}
const id = oids?.views?.replaceAll("/", "-");
const id_likes = oids?.likes?.replaceAll("/", "-");
let liked = false;
let authReady = false;
function formatNumber(n) {
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function toggleLoaders(node) {
var classesString = node.className;
if (classesString == "") return;
var classes = classesString.split(" ");
for (var i in classes) {
node.classList.toggle(classes[i]);
}
}
function updateDisplay(collection, nodeId) {
const node = document.getElementById(nodeId);
if (!node) return;
const docId = nodeId.replaceAll("/", "-");
onSnapshot(
doc(db, collection, docId),
(snapshot) => {
node.innerText = snapshot.exists() ? formatNumber(snapshot.data()[collection]) : 0;
toggleLoaders(node);
},
(error) => {
console.error("Firebase snapshot update failed:", error);
},
);
}
async function recordView(id) {
if (!id || localStorage.getItem(id)) return;
try {
const ref = doc(db, "views", id);
const snap = await getDoc(ref);
snap.exists() ? await updateDoc(ref, { views: increment(1) }) : await setDoc(ref, { views: 1 });
localStorage.setItem(id, true);
} catch (e) {
console.error("Record view operation failed:", e.message);
}
}
function updateButton(isLiked) {
const hearts = document.querySelectorAll("span[id='button_likes_heart']");
const empties = document.querySelectorAll("span[id='button_likes_emtpty_heart']");
const texts = document.querySelectorAll("span[id='button_likes_text']");
hearts.forEach((el) => {
el.style.display = isLiked ? "" : "none";
});
empties.forEach((el) => {
el.style.display = isLiked ? "none" : "";
});
texts.forEach((el) => {
el.innerText = isLiked ? "" : "\xa0Like";
});
}
async function toggleLike(add) {
if (!id_likes || !authReady) return;
try {
const ref = doc(db, "likes", id_likes);
const snap = await getDoc(ref);
liked = add;
add ? localStorage.setItem(id_likes, true) : localStorage.removeItem(id_likes);
updateButton(add);
snap.exists()
? await updateDoc(ref, { likes: increment(add ? 1 : -1) })
: await setDoc(ref, { likes: add ? 1 : 0 });
} catch (e) {
console.error("Like operation failed:", e.message);
liked = !add;
add ? localStorage.removeItem(id_likes) : localStorage.setItem(id_likes, true);
updateButton(!add);
}
}
signInAnonymously(auth)
.then(() => {
authReady = true;
document.querySelectorAll("span[id^='views_']").forEach((node) => {
if (node.id) updateDisplay("views", node.id);
});
document.querySelectorAll("span[id^='likes_']").forEach((node) => {
if (node.id) updateDisplay("likes", node.id);
});
recordView(id);
if (id_likes && localStorage.getItem(id_likes)) {
liked = true;
updateButton(true);
}
const likeButton = document.getElementById("button_likes");
if (likeButton) {
likeButton.addEventListener("click", () => {
toggleLike(!liked);
});
}
})
.catch((error) => {
console.error("Firebase anonymous sign-in failed:", error.message);
authReady = false;
});
window.process_article = () => toggleLike(!liked);
-131
View File
@@ -1,131 +0,0 @@
const pageScriptElement = document.currentScript;
const oid =
pageScriptElement && pageScriptElement.getAttribute("data-oid")
? pageScriptElement.getAttribute("data-oid")
: (console.error("data-oid is null"), null);
const oid_likes =
pageScriptElement && pageScriptElement.getAttribute("data-oid-likes")
? pageScriptElement.getAttribute("data-oid-likes")
: (console.error("data-oid-likes is null"), null);
let liked_page = false;
const id = oid ? oid.replaceAll("/", "-") : oid;
const id_likes = oid_likes ? oid_likes.replaceAll("/", "-") : oid_likes;
if (typeof auth !== "undefined") {
const viewed = localStorage.getItem(id);
if (!viewed) {
auth
.signInAnonymously()
.then(() => {
const docRef = db.collection("views").doc(id);
localStorage.setItem(id, true);
docRef
.get()
.then((doc) => {
if (doc.exists) {
db.collection("views")
.doc(id)
.update({
views: firebase.firestore.FieldValue.increment(1),
});
} else {
db.collection("views").doc(id).set({ views: 1 });
}
})
.catch((error) => {
console.log("Error getting document:", error);
});
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error(errorCode, errorMessage);
});
}
const liked = localStorage.getItem(id_likes);
if (liked) {
liked_page = true;
document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = "";
document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none";
document.querySelectorAll("span[id='button_likes_text']")[0].innerText = "";
}
}
function like_article(id_likes) {
auth
.signInAnonymously()
.then(() => {
const docRef = db.collection("likes").doc(id_likes);
docRef
.get()
.then((doc) => {
liked_page = true;
localStorage.setItem(id_likes, true);
document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = "";
document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "none";
document.querySelectorAll("span[id='button_likes_text']")[0].innerText = "";
if (doc.exists) {
db.collection("likes")
.doc(id_likes)
.update({
likes: firebase.firestore.FieldValue.increment(1),
});
} else {
db.collection("likes").doc(id_likes).set({ likes: 1 });
}
})
.catch((error) => {
console.log("Error getting document:", error);
});
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error(errorCode, errorMessage);
});
}
function remove_like_article(id_likes) {
auth
.signInAnonymously()
.then(() => {
const docRef = db.collection("likes").doc(id_likes);
docRef
.get()
.then((doc) => {
liked_page = false;
localStorage.removeItem(id_likes);
document.querySelectorAll("span[id='button_likes_heart']")[0].style.display = "none";
document.querySelectorAll("span[id='button_likes_emtpty_heart']")[0].style.display = "";
document.querySelectorAll("span[id='button_likes_text']")[0].innerText = "\xa0Like";
if (doc.exists) {
db.collection("likes")
.doc(id_likes)
.update({
likes: firebase.firestore.FieldValue.increment(-1),
});
} else {
db.collection("likes").doc(id_likes).set({ likes: 0 });
}
})
.catch((error) => {
console.log("Error getting document:", error);
});
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.error(errorCode, errorMessage);
});
}
function process_article() {
if (!liked_page) {
like_article(id_likes);
} else {
remove_like_article(id_likes);
}
}
-70
View File
@@ -1,70 +0,0 @@
if (typeof auth !== "undefined") {
var viewsCollection = db.collection("views");
var likesCollection = db.collection("likes");
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function toggleLoaders(node) {
var classesString = node.className;
if (classesString == "") return;
var classes = classesString.split(" ");
for (var i in classes) {
node.classList.toggle(classes[i]);
}
}
var update_views = function (node, id) {
viewsCollection.doc(id).onSnapshot((doc) => {
var data = doc.data();
if (data) {
node.innerText = numberWithCommas(data.views);
} else {
node.innerText = 0;
}
toggleLoaders(node);
});
};
var update_likes = function (node, id) {
likesCollection.doc(id).onSnapshot((doc) => {
var data = doc.data();
if (data) {
node.innerText = numberWithCommas(data.likes);
} else {
node.innerText = 0;
}
toggleLoaders(node);
});
};
auth
.signInAnonymously()
.then(() => {
var views_nodes = document.querySelectorAll("span[id^='views_']");
for (var i in views_nodes) {
var node = views_nodes[i];
var id = node.id ? node.id.replaceAll("/", "-") : node.id;
if (id) {
update_views(node, id);
}
}
var likes_nodes = document.querySelectorAll("span[id^='likes_']");
for (var i in likes_nodes) {
var node = likes_nodes[i];
var id = node.id ? node.id.replaceAll("/", "-") : node.id;
if (id) {
update_likes(node, id);
}
}
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.error(errorCode, errorMessage);
});
}
-16
View File
@@ -22,22 +22,6 @@
<div class="mt-1 mb-2 text-base text-neutral-500 dark:text-neutral-400 print:hidden">
{{ partial "article-meta/list.html" (dict "context" . "scope" "single") }}
</div>
{{ $translations := .AllTranslations }}
{{ with .File }}
{{ $path := .Path }}
{{ range $translations }}
{{ $lang := print "." .Lang ".md" }}
{{ $path = replace $path $lang ".md" }}
{{ end }}
{{ $jsPage := resources.Get "js/page.js" }}
{{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
<script
type="text/javascript"
src="{{ $jsPage.RelPermalink }}"
integrity="{{ $jsPage.Data.Integrity }}"
data-oid="views_{{ $path }}"
data-oid-likes="likes_{{ $path }}"></script>
{{ end }}
</header>
{{/* Description (markdown content) */}}
-17
View File
@@ -68,23 +68,6 @@
{{ partial "sharing-links.html" . }}
{{ partial "related.html" . }}
</div>
{{ $translations := .AllTranslations }}
{{ with .File }}
{{ $path := .Path }}
{{ range $translations }}
{{ $lang := print "." .Lang ".md" }}
{{ $path = replace $path $lang ".md" }}
{{ end }}
{{ $jsPage := resources.Get "js/page.js" }}
{{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
<script
type="text/javascript"
src="{{ $jsPage.RelPermalink }}"
integrity="{{ $jsPage.Data.Integrity }}"
data-oid="views_{{ $path }}"
data-oid-likes="likes_{{ $path }}"></script>
{{ end }}
</section>
{{/* Footer */}}
-8
View File
@@ -26,14 +26,6 @@
<div class="min-w-0 min-h-0 max-w-prose">
{{ .Content }}
</div>
{{ $jsPage := resources.Get "js/page.js" }}
{{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
<script
type="text/javascript"
src="{{ $jsPage.RelPermalink }}"
integrity="{{ $jsPage.Data.Integrity }}"
data-oid="views_term_{{ .Data.Term }}"
data-oid-likes="likes_term_{{ .Data.Term }}"></script>
{{ end }}
</section>
-9
View File
@@ -26,14 +26,6 @@
{{ .Content }}
</div>
</section>
{{ $jsPage := resources.Get "js/page.js" }}
{{ $jsPage = $jsPage | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
<script
type="text/javascript"
src="{{ $jsPage.RelPermalink }}"
integrity="{{ $jsPage.Data.Integrity }}"
data-oid="views_taxonomy_{{ .Data.Plural }}"
data-oid-likes="likes_taxonomy_{{ .Data.Plural }}"></script>
{{ end }}
{{ if site.Params.taxonomy.cardView }}
@@ -50,5 +42,4 @@
{{ end }}
</section>
{{ end }}
{{ end }}
-6
View File
@@ -69,12 +69,6 @@
});
</script>
{{ end }}
{{ $jsProcess := resources.Get "js/process.js" }}
{{ $jsProcess = $jsProcess | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
<script
type="text/javascript"
src="{{ $jsProcess.RelPermalink }}"
integrity="{{ $jsProcess.Data.Integrity }}"></script>
{{/* Extend footer - eg. for extra scripts, etc. */}}
{{ if templates.Exists "partials/extend-footer.html" }}
{{ partialCached "extend-footer.html" . }}
-27
View File
@@ -154,7 +154,6 @@
{{ if .Site.Params.rtl | default false }}
{{ $jsResources = $jsResources | append (resources.Get "js/rtl.js") }}
{{ end }}
{{ $jsResources = $jsResources | append (resources.Get "js/button-likes.js") }}
{{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }}
{{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }}
{{ if $jsResources }}
@@ -200,32 +199,6 @@
{{ partial "extend-head-uncached.html" . }}
{{ end }}
{{/* Firebase */}}
{{ with $.Site.Params.firebase }}
{{ if isset $.Site.Params "firebase" }}
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script>
const firebaseConfig = {
apiKey: {{ $.Site.Params.firebase.apiKey }},
authDomain: {{ $.Site.Params.firebase.authDomain }},
projectId: {{ $.Site.Params.firebase.projectId }},
storageBucket: {{ $.Site.Params.firebase.storageBucket }},
messagingSenderId: {{ $.Site.Params.firebase.messagingSenderId }},
appId: {{ $.Site.Params.firebase.appId }},
measurementId: {{ $.Site.Params.firebase.measurementId }}
};
var app = firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
var auth = firebase.auth();
</script>
{{ end }}
{{ end }}
{{/* Advertisement */}}
{{ with .Site.Params.advertisement.adsense }}
<meta name="google-adsense-account" content="{{ . }}">
+44
View File
@@ -149,3 +149,47 @@
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }}
{{ end }}
{{/* Firebase */}}
{{ if site.Params.firebase.apiKey }}
{{ $firebase := resources.Get "js/firebase.js" }}
{{ $firebase = $firebase | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
<script type="module" src="{{ $firebase.RelPermalink }}" integrity="{{ $firebase.Data.Integrity }}"></script>
{{ if in (slice "page" "section") .Kind }}
{{ $translations := .AllTranslations }}
{{ with .File }}
{{ $path := .Path }}
{{ range $translations }}
{{ $path = replace $path (print "." .Lang ".md") ".md" }}
{{ end }}
{{ partial "inline/firebase-config.html" (dict "views" (printf "views_%s" $path) "likes" (printf "likes_%s" $path)) }}
{{ end }}
{{ else if eq .Kind "term" }}
{{ partial "inline/firebase-config.html" (dict "views" (printf "views_term_%s" .Data.Term) "likes" (printf "likes_term_%s" .Data.Term)) }}
{{ else if eq .Kind "taxonomy" }}
{{ partial "inline/firebase-config.html" (dict "views" (printf "views_taxonomy_%s" .Data.Plural) "likes" (printf "likes_taxonomy_%s" .Data.Plural)) }}
{{ else if eq .Kind "home" }}
{{ partial "inline/firebase-config.html" (dict "views" "views_home" "likes" "likes_home") }}
{{ end }}
{{ end }}
{{ define "_partials/inline/firebase-config.html" }}
<script id="firebase-config"
type="application/json"
data-views="{{ .views }}"
data-likes="{{ .likes }}">
{
"config": {
"apiKey": "{{ site.Params.firebase.apiKey }}",
"authDomain": "{{ site.Params.firebase.authDomain }}",
"projectId": "{{ site.Params.firebase.projectId }}",
"storageBucket": "{{ site.Params.firebase.storageBucket }}",
"messagingSenderId": "{{ site.Params.firebase.messagingSenderId }}",
"appId": "{{ site.Params.firebase.appId }}",
"measurementId": "{{ site.Params.firebase.measurementId }}"
}
}
</script>
{{ end }}