Skip to content

Commit

Permalink
DEV: Migrate link_sections and links to new objects setting type
Browse files Browse the repository at this point in the history
This commit migrates the `link_sections` and `links` setting to a `sections` objects typed settting. Since discourse/discourse@a440e15, we have started to support objects typed theme setting so we are switching this theme component to use it instead as it provides a much better UX for configuring the settings required for the theme component.
  • Loading branch information
tgxworld committed Apr 9, 2024
1 parent a677b33 commit 1c0b717
Show file tree
Hide file tree
Showing 7 changed files with 558 additions and 70 deletions.
16 changes: 10 additions & 6 deletions javascripts/discourse/components/custom-footer.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,27 @@
</div>
<div class="second-box">
<div class="links">
{{#each this.linkSections as |section|}}
<div class="list" data-easyfooter-section={{section.dataName}}>
{{#each (theme-setting "sections") as |section|}}
<div
class="list"
data-easyfooter-section={{dasherize section.text}}
>
<span title={{section.title}}>
{{section.text}}
</span>

<ul>
{{#each section.childLinks as |link|}}
{{#each section.links as |link|}}
<li
class="footer-section-link-wrapper"
data-easyfooter-link={{link.dataName}}
data-easyfooter-link={{dasherize link.text}}
>
<a
class="footer-section-link"
title={{link.title}}
href={{link.href}}
href={{link.url}}
target={{link.target}}
referrerpolicy={{link.referrerpolicy}}
referrerpolicy={{link.referrer_policy}}
>
{{link.text}}
</a>
Expand All @@ -39,6 +42,7 @@
{{/each}}
</div>
</div>

<div class="third-box">
<div class="footer-links">
{{#each this.smallLinks as |link|}}
Expand Down
45 changes: 0 additions & 45 deletions javascripts/discourse/components/custom-footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +5,6 @@ export default class extends Component {
mainHeading = settings.heading;
blurb = settings.blurb;

linkArray = settings.links
.split("|")
.filter(Boolean)
.map((link) => {
const fragments = link.split(",").map((fragment) => fragment.trim());
const parent = fragments[0].toLowerCase();
const text = fragments[1];
const dataName = dasherize(text);
const href = fragments[2];
const target = fragments[3] === "blank" ? "_blank" : "";
const title = fragments[4];
const referrerpolicy = fragments[5];

return {
parent,
text,
dataName,
href,
target,
title,
referrerpolicy,
};
});

linkSections = settings.link_sections
.split("|")
.filter(Boolean)
.map((section) => {
const fragments = section.split(",").map((fragment) => fragment.trim());
const parentFor = fragments[0].toLowerCase();
const text = fragments[0];
const title = fragments[1];
const dataName = dasherize(text);
const childLinks = this.linkArray.filter(
(link) => link.parent === parentFor
);

return {
text,
title,
dataName,
childLinks,
};
});

smallLinks = settings.small_links
.split("|")
.filter(Boolean)
Expand Down
27 changes: 27 additions & 0 deletions locales/en.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,33 @@ en:
description: "Text for the heading in the footer - you can use your site name for example - Max length 25 characters"
blurb:
description: "Enter a short blurb about your community - Max length 180 characters"
sections:
description: "Sections to be displayed in the footer"
schema:
properties:
text:
label: Text
description: Text to be displayed for the section
title:
label: Title
description: The title attribute of the section
links:
text:
label: Text
description: Text to be displayed for the link
url:
label: URL
description: The URL the link points to
target:
label: Target
description: The target attribute of the link
title:
label: Title
description: The title attribute of the link
referrer_policy:
label: Referrer Policy
description: The referrerpolicy attribute of the link

link_sections:
description: "Add link sections. The ideal number of sections is six. One item per line in this order:<br> Text, title<br><b>Text:</b> what appears on in the footer<br><b>Title:</b> the text that appears when the item is hovered."
links:
Expand Down
82 changes: 82 additions & 0 deletions migrations/settings/0002-migrate-settings.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
export default function migrate(settings) {
const oldLinkSections = settings.get("link_sections");

if (oldLinkSections) {
const newLinkSections = oldLinkSections.split("|").map((linkSection) => {
const [linkSectionName, linkSectionTitle] = linkSection
.split(",")
.map((value) => value.trim());

return {
text: linkSectionName,
title: linkSectionTitle,
};
});

const oldLinkSectionLinks = settings.get("links");

if (oldLinkSectionLinks) {
oldLinkSectionLinks.split("|").map((linkSectionLink) => {
const [
linkSectionName,
linkName,
linkUrl,
linkTarget,
linkTitle,
linkReferralPolicy,
] = linkSectionLink.split(",").map((value) => value.trim());

const linkSection = newLinkSections.find(
(section) => section.text === linkSectionName
);

if (linkSection) {
if (!linkSection.links) {
linkSection.links = [];
}

let target;

switch (linkTarget) {
case "blank":
target = "_blank";
break;
case "self":
target = "_self";
break;
default:
break;
}

const link = {
text: linkName,
url: linkUrl,
title: linkTitle,
};

if (target) {
link.target = target;
}

if (
[
"no-referrer",
"no-referrer-when-downgrade",
"origin",
"origin-when-cross-origin",
"unsafe-url",
].includes(linkReferralPolicy)
) {
link.referrer_policy = linkReferralPolicy;
}

linkSection.links.push(link);
}
});
}

settings.set("sections", newLinkSections);
}

return settings;
}
164 changes: 156 additions & 8 deletions settings.yml
Original file line number Diff line number Diff line change
@@ -1,27 +1,175 @@
heading:
default: "This is a header"
max: 25

blurb:
default: "Ius vitae ornatus at, ei mea sumo quot dicant. Ei tale democritum eos, in mea timeam accumsan forensibus. Ei his aperiam suavitate. Et debitis convenire sea, viris dictas latine."
max: 180
link_sections:
type: list
list_type: simple
default: "Design, Get inspired!|Code, Learn new things!|Business, Start a new career!|Shop, Buy cool stuff!|Community, The latest news about the people you care about!|World, Check out what's happening"
links:
type: list
list_type: simple
default: "Design, Design process, #, blank, Learn the basics|Design, Blog design, #, blank, What makes for a great blog?|Design, Photoshop tutorials, #, blank, Photoshop for beginners|Design, Design trends, #, blank, Stay on top of the current trends!|Code, Wordpress, #, blank, Wordpress code examples|Code, Tools, #, blank, Tools that will make your life easier!|Code, Tutorials, #, blank, Just starting out? We'll guide you through the basics|Business, Blogging, #, blank, Why not start a blog?|Business, Social media, #, blank, Learn how to leverage Social media and make it work for your business|Business, Make money, #, blank, Everyone likes to be paid!|Business, Marketing, #, blank, No business will survive without customers...Here's how to get'em!|Shop, Vectors, #, blank, buy vectors|Shop, Textures, #, blank, buy textures|Shop, UI kits, #, blank, buy UI kits|Shop, PSDs, #, blank, Ready-made PSD's|Community, Your corner, #, blank, Tell us how you feel!|Community, Questions, #, blank, Feel like answering some questions?|Community, Members, #, blank, Say hi to new members|Community, trending, #, blank, Catch up with the latest trending topics!|World, Politics, #, blank, Stay up to date|World, Education, #, blank, The latest research|World, Automotive, #, blank, We cover the latest models!|World, Sports, #, The latest scores|World, Tech, #, Never miss a new gadget"

sections:
type: objects
default:
- text: Design
title: Get inspired!
links:
- text: Design process
url: "#"
title: Learn the basics
- text: Blog design
url: "#"
title: What makes for a great blog?
- text: Photoshop tutorials
url: "#"
title: Photoshop for beginners
- text: Design trends
url: "#"
title: Stay on top of the current trends!
- text: Code
title: Learn new things!
links:
- text: Wordpress
url: "#"
title: Wordpress code examples
- text: Tools
url: "#"
title: Tools that will make your life easier!
- text: Tutorials
url: "#"
title: Just starting out? We'll guide you through the basics
- text: Business
title: Start a new career!
links:
- text: Blogging
url: "#"
title: Why not start a blog?
- text: Social media
url: "#"
title: Learn how to leverage Social media and make it work for your business
- text: Make money
url: "#"
title: Everyone likes to be paid!
- text: Marketing
url: "#"
title: No business will survive without customers...Here's how to get'em!
- text: Shop
title: Buy cool stuff!
links:
- text: Vectors
url: "#"
title: buy vectors
- text: Textures
url: "#"
title: buy textures
- text: UI kits
url: "#"
title: buy UI kits
- text: PSDs
url: "#"
title: Ready-made PSD's
- text: Community
title: The latest news about the people you care about!
links:
- text: Your corner
url: "#"
title: Tell us how you feel!
- text: Questions
url: "#"
title: Feel like answering some questions?
- text: Members
url: "#"
title: Say hi to new members
- text: trending
url: "#"
title: Catch up with the latest trending topics!
- text: World
title: Check out what's happening
links:
- text: Politics
url: "#"
title: Stay up to date
- text: Education
url: "#"
title: The latest research
- text: Automotive
url: "#"
title: We cover the latest models!
- text: Sports
url: "#"
title: The latest scores
- text: Tech
url: "#"
title: Never miss a new gadget
schema:
name: link section
identifier: text
properties:
text:
type: string
required: true
validations:
min: 1
max: 1000
title:
type: string
required: true
validations:
min: 1
max: 1000
links:
type: objects
schema:
name: link
identifier: text
properties:
text:
type: string
required: true
validations:
min: 1
max: 1000
url:
type: string
required: true
validations:
min: 1
max: 2048
target:
type: enum
default: _blank
choices:
- _blank
- _self
- _parent
- _top
title:
type: string
required: true
validations:
min: 1
max: 1000
referrer_policy:
type: enum
default: no-referrer-when-downgrade
choices:
- no-referrer
- no-referrer-when-downgrade
- origin
- origin-when-cross-origin
- unsafe-url

small_links:
type: list
list_type: simple
default: "Privacy, #, self|Terms of service, #, self| About, #, self"

social_links:
type: list
list_type: simple
default: "Facebook, Join us on Facebook, #, blank,fab-facebook|Twitter, show some love on Twitter, #, blank,fab-twitter| Youtube, Check out our latest videos on Youtube, #, blank,fab-youtube"

show_footer_on_login_required_page:
default: true

svg_icons:
default: "fab-facebook|fab-twitter|fab-youtube"
type: "list"
Expand Down
Loading

0 comments on commit 1c0b717

Please sign in to comment.