Let's Build It
This category is designed to offer practical advice, step by step guidance, and code suggestions for you to create you very own “Franken” build to suit your needs… “It’s Alive!!”
21
Topics
661
Posts
Trending
Trending
A few users have commented on the new shiny logo that appears at the top of the navbar here
Want to know how I created that? Of course you do!
The logo itself makes use of a few techniques such as webkit-background-clip and -webkit-text-stroke to make the font look like it has an outline only with no fill. This technique won’t appeal to everyone, so if you’re just looking for the shine code, you can skip this, and go straight to the jQuery code and CSS.
Firstly, I actually hide the <img> so no actual logo is being displayed
[component="brand/logo"] {
display: none;
}
I then use a jQuery function to create my own Brand Logo
$(document).ready(function() {
$('[component="brand/wrapper"]').append('<a component="siteTitle" href="/" title="Brand Logo"><h1 class="fs-6 fw-bold text-body mb-0 shine">sudonix</h1></a>');
});
And then apply the below CSS to achieve the style I want. Note, that the :root values must be set on your site, or at the very least, alternatives if you are not using variables.
:root {
--bs-body-navbar: #E5E6E6;
--bs-logo-bg: linear-gradient(45deg, #ff5733, #f73d45, #e54f6d, #c85e9e, #a874c0, #748bda, #4691f1, #0099f7);
--bs-node-shine: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
}
@keyframes shine {
0% {
left: -100%;
opacity: 0;
}
5% {
opacity: 1;
}
25% {
left: 100%;
opacity: 1;
}
26% {
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
a[component=siteTitle] h1 {
font-size: 2.2rem !important;
top: -1px;
position: fixed;
font-family: "Bruno Ace SC";
font-weight: 600 !important;
letter-spacing: 0.05rem;
-webkit-background-clip: text !important;
color: var(--bs-body-navbar) !important;
-webkit-text-stroke: 4px transparent;
background: var(--bs-logo-bg);
width: 172px;
padding-left: 5px;
}
.shine::before {
content: "";
position: absolute;
top: 10px;
width: 60px;
height: 25px;
background: var(--bs-node-shine);
transform: skewX(-45deg);
animation: shine 10s linear infinite;
pointer-events: none;
mix-blend-mode: screen;
z-index: 1;
}
.shine {
position: relative;
display: inline-block;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
overflow: hidden;
}
I’ve also included a CodePen so you can see this working in realtime
https://codepen.io/phenomlab/pen/gbbYWrZ?editors=1100
Let's Build It
8 days ago
I’ve had limited success with the plugin nodebb-plugin-twitter and its various forks in the sense that the embeds failed to load - here’s an example of that exact problem (never resolved from what I can see)
https://github.com/NodeBB-Community/nodebb-plugin-twitter/issues/2
I decided to write my custom JS which can be found here
https://github.com/phenomlab/nodebb-twitter-embeds
This not only works in the same way as the NodeBB plugin, but will also render client-side so does not pile up in terms of resources on your server In addition, the available arguments for the embeds are below
https://developer.x.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference
Here’s a real-life example
https://x.com/phenomlab/status/1810648261369233607
Let's Build It
8 Nov 2024, 18:00
Let's Build It
28 Aug 2024, 18:57
Have you ever found yourself struggling for that killer phrase where you know you need that competitive edge to get you over the line, but just can’t find the words? Look no further! Introducing the Corporate Bullshit Generator; a product absolutely guaranteed to make your speech or presentation stand out well above the others. Just copy the phrase generated below and insert where required.
Give it a whirl, and amaze your peers with your superior intellect
Try It
Ok, in all seriousness, this is something I wrote on the back of being subjected to “death by PowerPoint” some time ago - an extremely dull deck full containing over 100 slides - with random “buzz words” inserted where the author thought it appropriate. This is my response to that specific scenario. Full sarcasm is intended!
In terms of code, this is 100% JS - there is also a PHP version for those who’d prefer that - in actual fact, I originally wrote it in PHP but only this afternoon converted that to JS.
Enjoy! If you’d like the code, let me know. I intend to create a “coding playground” where stuff like this can be found.
Let's Build It
16 Aug 2024, 20:59
Let's Build It
28 Jun 2024, 11:52
Let's Build It
23 Apr 2024, 12:59
Let's Build It
3 Apr 2024, 18:10
Let's Build It
31 Mar 2024, 18:03
Let's Build It
8 Mar 2024, 10:26
Let's Build It
30 Jan 2024, 18:45
Let's Build It
17 Jan 2024, 05:06
Hello @phenomlab
I search a javascript code for nodebb to block and replace with a specific/customize message domain an URL Wirth a blacklist on topic, quick reply and composer like plugin-beep do it.
I’m working on it but I don’t have anything that works, hence the request for help from your expertise.
here an exemple who doesn’t work
// Add this script in a custom JavaScript file or inline in your HTML
document.addEventListener('DOMContentLoaded', function () {
// List of blocked domains or URLs
var blockedDomains = [
'example.com',
'blockeddomain.com',
// Add more domains as needed
];
// Custom message to be displayed for blocked content
var blockedMessage = 'This content is blocked.';
// Function to check if a URL contains a blocked domain
function isBlocked(url) {
for (var i = 0; i < blockedDomains.length; i++) {
if (url.includes(blockedDomains[i])) {
return true;
}
}
return false;
}
// Function to replace blocked content
function replaceBlockedContent(content) {
// Check if the content contains a blocked domain
if (isBlocked(content)) {
// Replace the content with the blocked message
return blockedMessage;
}
return content;
}
// Get all the elements containing topic content (adjust the selector as needed)
var topicContentElements = document.querySelectorAll('.topic-content');
// Iterate through each element and replace blocked content
topicContentElements.forEach(function (element) {
element.innerHTML = replaceBlockedContent(element.innerHTML);
});
});
Thanks
Let's Build It
21 Dec 2023, 07:53
Let's Build It
9 Oct 2023, 11:03
Let's Build It
26 Sept 2023, 11:47
Hello! I hope everything is going well. I’m interested in creating a page featuring a captivating rotating star effect similar to what’s showcased on the https://gatsbyconf.com/ website.
Could you please guide me on how to achieve a similar WordPress page using the Gutenberg builder? Specifically, I’m aiming to incorporate the rotating effect, and I intend to overlay additional text elements on it. While attempting to save the page, I encountered difficulties in copying the required CSS or JS for the effect. I’m uncertain about where to commence. Your assistance in this matter would be greatly appreciated. Thank you!
Let's Build It
10 Sept 2023, 18:22
Let's Build It
26 Jun 2023, 10:09
Let's Build It
23 May 2023, 17:57
Let's Build It
7 Feb 2023, 23:48
For a while now, I’ve been backing up MongoDB using a basic (and extremely simple) shell script. However, this did not allow for multiple backup sets, retention, purging of unwanted data etc., so I needed something a little more robust.
Deciding not to reinvent the wheel, I searched around for an existing script, and found this
https://gist.github.com/mrichie/3903260#file-automongobackup-sh
i’ve set this up on another production server I use at work, and it’s brilliant. It does exactly what it says on the tin Would probably be very useful for others in the same boat.
EDIT - seems someone else forked this and made several changes / revisions
https://raw.githubusercontent.com/micahwedemeyer/automongobackup/master/src/automongobackup.sh
Let's Build It
24 Nov 2022, 16:00
Let's Build It
8 Mar 2022, 20:07
Subcategories
-
Code Respository
This category is designed to offer practical advice, step by step guidance, and code suggestions for you to create you very own “Franken” build to suit your needs… “It’s Alive!!”
1 Topics8 Posts
-
About this category
Watching Ignoring Scheduled Pinned Locked Moved lab 13 Jan 2022, 14:412 Votes5 Posts604 Views -
"Glass" (shine) effect on Sudonix logo
Watching Ignoring Scheduled Pinned Locked Moved animation shine logo 8 days ago4 Votes7 Posts340 Views -
NodeBB Twitter / X embeds
Watching Ignoring Scheduled Pinned Locked Moved twitter script 31 Jul 2024, 15:1919 Votes31 Posts2k Views -
Target the posts counter in categories using CSS and jQuery
Watching Ignoring Scheduled Pinned Locked Moved posts jquery css 28 Aug 2024, 16:325
3 Votes2 Posts375 Views -
Corporate Bullshit Generator
Watching Ignoring Scheduled Pinned Locked Moved cbg coding 14 Jan 2023, 18:349 Votes17 Posts1k Views -
Create a dynamic category list
Watching Ignoring Scheduled Pinned Locked Moved dynamic categories api 18 Apr 2023, 13:043
14 Votes16 Posts2k Views -
Extended functions for Q&A NodeBB plugin
Watching Ignoring Scheduled Pinned Locked Moved q&a panels cards 11 Apr 2024, 13:284
5 Votes3 Posts1k Views -
Setup OGProxy for use in NodeBB
Watching Ignoring Scheduled Pinned Locked Moved ogproxy opengraph npm node 13 Jun 2023, 14:582
21 Votes110 Posts13k Views -
Switch between list and card view function
Watching Ignoring Scheduled Pinned Locked Moved cards layout css 24 Jan 2024, 19:041
50 Votes107 Posts9k Views -
Threaded post support for NodeBB
Watching Ignoring Scheduled Pinned Locked Moved threading nodebb 4 Sept 2023, 13:263
50 Votes146 Posts24k Views -
What's your go to product for site stats?
Watching Ignoring Scheduled Pinned Locked Moved umami stats 23 Oct 2023, 16:352
15 Votes27 Posts3k Views -
Custom Board Stats Widget
Watching Ignoring Scheduled Pinned Locked Moved widget board stats 20 Jul 2023, 10:264
20 Votes28 Posts2k Views -
Block Domain
Watching Ignoring Scheduled Pinned Locked Moved Solved code javascript block domain nodebb 15 Dec 2023, 09:451 Votes26 Posts2k Views -
Material View Support for Stock NodeBB
Watching Ignoring Scheduled Pinned Locked Moved Unsolved material view javascript css 29 Sept 2023, 19:054
15 Votes51 Posts5k Views -
Threaded chat support for NodeBB
Watching Ignoring Scheduled Pinned Locked Moved threaded chat code 22 Sept 2023, 14:251
19 Votes35 Posts3k Views -
Rotating Star Effect
Watching Ignoring Scheduled Pinned Locked Moved Solved wordpress css 31 Aug 2023, 18:0212 Votes17 Posts1k Views -
Targeting a disappearing element for its CSS
Watching Ignoring Scheduled Pinned Locked Moved css debugger freeze 23 May 2023, 17:296
5 Votes2 Posts518 Views -
Setting up a beta NodeBB v3 environment
Watching Ignoring Scheduled Pinned Locked Moved nodebb upgrades beta1 27 Jan 2023, 12:293
11 Votes14 Posts1k Views -
MongoDB backup script
Watching Ignoring Scheduled Pinned Locked Moved mongodb backup 24 Nov 2022, 10:036 Votes4 Posts606 Views -
Visual enhancement to best answer
Watching Ignoring Scheduled Pinned Locked Moved answer enhance 22 Feb 2022, 17:035
7 Votes7 Posts679 Views