From 9e9c993d2054c1718b86f0ae6e3397c55f551de7 Mon Sep 17 00:00:00 2001 From: Mehdi Zerouali Date: Wed, 2 Oct 2024 17:08:42 +1000 Subject: [PATCH 01/13] add SEAL logo as favicon --- theme/favicon.svg | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 theme/favicon.svg diff --git a/theme/favicon.svg b/theme/favicon.svg new file mode 100644 index 0000000..a88838b --- /dev/null +++ b/theme/favicon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + From 78e1f84eac9dab9290981001664ee184a49ecf22 Mon Sep 17 00:00:00 2001 From: Robert MacWha Date: Sun, 6 Oct 2024 23:22:41 -0400 Subject: [PATCH 02/13] docs: Update README ##pull-requests --- README.md | 37 +++++++++++++------------------------ 1 file changed, 13 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index d43e356..8156f36 100644 --- a/README.md +++ b/README.md @@ -25,28 +25,18 @@ repository and creating a pull request. To comment on the live version of the book under development, you will need to log in to your Vercel account. Please visit [this link](https://frameworks-git-develop-seal-frameworks.vercel.app/?_vercel_share=zOI0Q3riUfDv1Lq1IylFz2hXQzYPcmLp), which includes a read access token. A floating window will appear at the bottom, and you'll be ready to go. ### Pull requests -1. Fork the repository. Click on the "Fork" button at the top right corner of the page. -2. Clone the forked repository to your local machine. Open your terminal or command prompt. -`git clone https://github.com/your-username/frameworks.git` -1. Make sure you're in the develop branch first. -`git checkout develop` -2. Inside the folder create a new branch based on `develop`. -`git checkout -b develop` -1. Make your changes. -2. Make sure your changes don't break anything by testing it in the local setup (see above). -`./serve.sh`. -1. Commit your changes. -`git add .` -1. Commit the changes with a descriptive message: -`git commit -m "Fixing typos and improving readability on XXX section"` -1. Push the changes to your forked repository. -`git push origin develop` -1. Create a pull request. Go to your forked repository on GitHub. You should see a "Compare & pull - request" button. Click on it. Provide a descriptive title and description for your pull request. -2. Click on the "Create pull request" button. -3. Wait for review. Once your pull request is approved, and no more changes are needeed, we will - merge it into the main repository. -4. Congratulations! Your changes are now part of the security frameworks! +1. Fork the repository by clicking on the "Fork" button at the top-right corner of the page. +2. Clone the forked repository to your local machine. Open your terminal or command prompt and run: `git clone https://github.com/your-username/frameworks.git` +3. Make sure you're in the develop branch: `git checkout develop` +4. Create a feature branch from develop: `git checkout -b develop-{feature}` +5. Make your changes. +6. Make sure your changes don't break anything by testing it locally ([see above](#quick-installation-and-local-setup)): `./serve.sh`. +7. Commit the changes with a descriptive message: `git commit -am "Fixing typos and improving readability on XXX section"` +8. Push the changes to your forked repository: `git push origin develop-{feature}` +9. Create a pull request. Go to your forked repository on GitHub. Click on the "Compare & pull request" button in the top-right. Provide a descriptive title and description for your pull request. +10. Click on the "Create pull request" button. +11. Wait for review. Once your pull request is approved, and no more changes are needeed, we will merge it into the main repository. +12. Congratulations! Your changes are now part of the Security Frameworks! # Editor area Editors merge PRs and push suggestions to the main branch which will be reflected on the live book. @@ -56,5 +46,4 @@ Editors merge PRs and push suggestions to the main branch which will be reflecte 4. Manually merge files, solve conflicts and add a description. ## caveats -- Using the `serve.sh` script instead of mdBook `serve` command is needed to be able to see properly - the local deployment. \ No newline at end of file +- Using the `serve.sh` script instead of mdBook `serve` command is needed to be able to see properly the local deployment. \ No newline at end of file From 0a51409350d2a32106788ea9304ff57679652dd8 Mon Sep 17 00:00:00 2001 From: Robert MacWha Date: Sun, 6 Oct 2024 23:24:03 -0400 Subject: [PATCH 03/13] fix: Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8156f36..7da4291 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ To comment on the live version of the book under development, you will need to l 8. Push the changes to your forked repository: `git push origin develop-{feature}` 9. Create a pull request. Go to your forked repository on GitHub. Click on the "Compare & pull request" button in the top-right. Provide a descriptive title and description for your pull request. 10. Click on the "Create pull request" button. -11. Wait for review. Once your pull request is approved, and no more changes are needeed, we will merge it into the main repository. +11. Wait for review. Once your pull request is approved, and no more changes are needed, we will merge it into the main repository. 12. Congratulations! Your changes are now part of the Security Frameworks! # Editor area From b120516ea2a449f341251fd39ab2319e4dfb1a4b Mon Sep 17 00:00:00 2001 From: Robert MacWha Date: Sun, 6 Oct 2024 23:25:34 -0400 Subject: [PATCH 04/13] fix: typos in pr_template --- .github/PULL_REQUEST_TEMPLATE.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 14653cd..44dbbc0 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,13 +1,13 @@ ## Frameworks PR Checklist -Thank you for contributing to the Security Frameworks! Before you open a PR, make sure to read [information for contributors](https://framework.securityalliance.org/book/contribute/contribute.html) and take a look at following checklist: +Thank you for contributing to the Security Frameworks! Before you open a PR, make sure to read [information for contributors](https://framework.securityalliance.org/book/contribute/contribute.html) and take a look at the following checklist: - [ ] Describe your changes, substitute this text with the information -- [ ] If you are touching an existing piece of content, ask the original creator for review +- [ ] If you are touching an existing piece of content, ask the original creator for review - [ ] If you need feedback for your content from wider community, share the PR in our Discord -- [ ] Review changes to ensure there are no typos, see instructions bellow +- [ ] Review changes to ensure there are no typos, see instructions below - {{/if}} - -
@@ -477,154 +364,5 @@ {{/if}}
- diff --git a/theme/main.js b/theme/main.js new file mode 100644 index 0000000..80ce2c5 --- /dev/null +++ b/theme/main.js @@ -0,0 +1,146 @@ +/** +* Create a tag element +* @param {string} tag +*/ +function createTagElement(tag) { + const li = document.createElement('li'); + const isChecked = localStorage.getItem(`tag_${tag}`) === 'true'; + li.setAttribute('role', 'option'); + li.innerHTML = ` + + `; + return li; +} + +/** +* Populate the tagList element with tags +* @param {HTMLElement} tagList +* @param {string[]} tags +* @param {string} filter +*/ +function populateTags(tagList, tags, filter = '') { + tagList.innerHTML = ''; + tags.filter(tag => tag.toLowerCase().includes(filter.toLowerCase())) + .forEach(tag => { + tagList.appendChild(createTagElement(tag)); + }); +} + +/** +* Highlight sidebar links based on selected tags +*/ +function highlightSidebarLinks() { + const sidebarLinks = document.querySelectorAll('#sidebar a'); + sidebarLinks.forEach(link => { + link.classList.remove("selected"); + }); + + const selectedTags = Object.keys(localStorage) + .filter(key => key.startsWith('tag_') && localStorage.getItem(key) === 'true') + .map(key => key.replace('tag_', '')); + + let anySelected = false; + selectedTags.forEach(tag => { + const pages = window.tagsData[tag] || []; + pages.forEach(page => { + const link = document.querySelector(`#sidebar a[href$="${page}"]`); + if (link) { + link.classList.add("selected"); + anySelected = true; + } + }); + }); + + // If no tags are selected, show all pages. + //? Can't just use `selectedTags.length === 0` because + //? for some reason `selectedTags` contains a `protcol` tag. + if (anySelected) { + document.getElementById("sidebar").classList.add("filtered"); + } else { + document.getElementById("sidebar").classList.remove("filtered"); + } +} + +document.addEventListener('DOMContentLoaded', function () { + //* Initialize per-page tags + fetch(path_to_root + 'theme/tagscolors.json') + .then(response => response.json()) + .then(data => { + window.tagsColors = data + + const tagLines = Array.from(document.querySelectorAll('p')).filter(line => line.textContent.includes("tag:")); + tagLines.forEach(line => { + const tagText = line.textContent; + if (tagText.includes('tag: [')) { + const tagContent = tagText.split('[')[1].split(']')[0].trim(); + const tags = tagContent.split(',').map(tag => tag.trim()); + const tagLabels = tags.map(tag => { + const hexColor = window.tagsColors[tag] + return ` + + + ${tag} + `; + }); + line.innerHTML = tagLabels.join(' '); + } + }); + }) + + // Initialize searchable tags + fetch(path_to_root + 'theme/tagsindex.json') + .then(response => response.json()) + .then(data => { + window.tagsData = data; + const tags = Object.keys(data).sort((a, b) => { return ('' + a).localeCompare(b); }); + const tagsList = document.getElementById('tags-list'); + + populateTags(tagsList, tags); + + const tagSearch = document.getElementById('tag-search'); + tagSearch.addEventListener('input', function () { + populateTags(tagsList, tags, this.value); + }); + + tagsList.addEventListener('change', function (event) { + if (event.target.type === 'checkbox') { + const selectedTag = event.target.value; + const isChecked = event.target.checked; + localStorage.setItem(`tag_${selectedTag}`, isChecked); + highlightSidebarLinks(); + } + }); + + highlightSidebarLinks(); + }) + .catch(error => { + console.error('Error loading or parsing tagsindex.json:', error); + }); + + //* Setup event listeners for dropdowns & tags + const tagsToggle = document.getElementById('tags-toggle'); + const tagsDropdown = document.getElementById('tags-dropdown'); + const tagSearch = document.getElementById('tag-search'); + + // Open the tags dropdown when clicked + tagsToggle.addEventListener('click', function (event) { + event.stopPropagation(); + const isExpanded = this.getAttribute('aria-expanded') === 'true'; + this.setAttribute('aria-expanded', !isExpanded); + tagsDropdown.classList.toggle('hidden'); + if (!isExpanded) { + tagSearch.focus(); + } + }); + + // Close the dropdown when clicking another element + document.addEventListener('click', function (event) { + if (!tagsDropdown.contains(event.target) && event.target !== tagsToggle) { + tagsToggle.setAttribute('aria-expanded', 'false'); + tagsDropdown.classList.add('hidden'); + } + }); +}); \ No newline at end of file From 43e87864596b482843691e3a2da1060d11862ebc Mon Sep 17 00:00:00 2001 From: Robert MacWha Date: Tue, 8 Oct 2024 11:59:04 -0400 Subject: [PATCH 09/13] style: Added margin around page-tags --- theme/custom.css | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/custom.css b/theme/custom.css index 7880e81..9989d7f 100644 --- a/theme/custom.css +++ b/theme/custom.css @@ -23,6 +23,7 @@ /* Colored Tag Span. Displayed at the top of tagged pages */ .colored-tag { background-color: var(--tag-color); + margin: 0 5px 10px 0; padding: 5px 10px; border-radius: 20px; display: inline-flex; From 3fdac5aa1cefe0eb343e4b50365935c4ffbb905b Mon Sep 17 00:00:00 2001 From: Robert MacWha Date: Tue, 8 Oct 2024 12:23:25 -0400 Subject: [PATCH 10/13] refactor: Extract tag initialization logic into seperate methods --- theme/main.js | 99 +++++++++++++++++++++++++++++---------------------- 1 file changed, 57 insertions(+), 42 deletions(-) diff --git a/theme/main.js b/theme/main.js index 80ce2c5..e2aed40 100644 --- a/theme/main.js +++ b/theme/main.js @@ -64,57 +64,56 @@ function highlightSidebarLinks() { } } -document.addEventListener('DOMContentLoaded', function () { - //* Initialize per-page tags - fetch(path_to_root + 'theme/tagscolors.json') - .then(response => response.json()) - .then(data => { - window.tagsColors = data - - const tagLines = Array.from(document.querySelectorAll('p')).filter(line => line.textContent.includes("tag:")); - tagLines.forEach(line => { - const tagText = line.textContent; - if (tagText.includes('tag: [')) { - const tagContent = tagText.split('[')[1].split(']')[0].trim(); - const tags = tagContent.split(',').map(tag => tag.trim()); - const tagLabels = tags.map(tag => { - const hexColor = window.tagsColors[tag] - return ` +/** + * Populates the per-page tags + * @param {[key: string]: string} tagColors + */ +function createPageTags(tagColors) { + const tagLines = Array.from(document.querySelectorAll('p')).filter(line => line.textContent.includes("tag:")); + tagLines.forEach(line => { + const tagText = line.textContent; + if (tagText.includes('tag: [')) { + const tagContent = tagText.split('[')[1].split(']')[0].trim(); + const tags = tagContent.split(',').map(tag => tag.trim()); + const tagLabels = tags.map(tag => { + const hexColor = tagColors[tag] + return ` ${tag} `; - }); - line.innerHTML = tagLabels.join(' '); - } }); + line.innerHTML = tagLabels.join(' '); + } + }); +} + +/** + * Populates the searchable tags in the tags dropdown + */ +function createSearchableTags(tagsData) { + const tags = Object.keys(tagsData).sort((a, b) => { return ('' + a).localeCompare(b); }); + const tagsList = document.getElementById('tags-list'); + + populateTags(tagsList, tags); + highlightSidebarLinks(); +} + +document.addEventListener('DOMContentLoaded', function () { + //* Initialize per-page tags + fetch(path_to_root + 'theme/tagscolors.json') + .then(response => response.json()) + .then(data => { + window.tagsColors = data; + createPageTags(data); }) - // Initialize searchable tags + //* Initialize searchable tags fetch(path_to_root + 'theme/tagsindex.json') .then(response => response.json()) .then(data => { window.tagsData = data; - const tags = Object.keys(data).sort((a, b) => { return ('' + a).localeCompare(b); }); - const tagsList = document.getElementById('tags-list'); - - populateTags(tagsList, tags); - - const tagSearch = document.getElementById('tag-search'); - tagSearch.addEventListener('input', function () { - populateTags(tagsList, tags, this.value); - }); - - tagsList.addEventListener('change', function (event) { - if (event.target.type === 'checkbox') { - const selectedTag = event.target.value; - const isChecked = event.target.checked; - localStorage.setItem(`tag_${selectedTag}`, isChecked); - highlightSidebarLinks(); - } - }); - - highlightSidebarLinks(); + createSearchableTags(data); }) .catch(error => { console.error('Error loading or parsing tagsindex.json:', error); @@ -124,8 +123,9 @@ document.addEventListener('DOMContentLoaded', function () { const tagsToggle = document.getElementById('tags-toggle'); const tagsDropdown = document.getElementById('tags-dropdown'); const tagSearch = document.getElementById('tag-search'); + const tagsList = document.getElementById('tags-list'); - // Open the tags dropdown when clicked + // On click on tags dropdown button tagsToggle.addEventListener('click', function (event) { event.stopPropagation(); const isExpanded = this.getAttribute('aria-expanded') === 'true'; @@ -136,11 +136,26 @@ document.addEventListener('DOMContentLoaded', function () { } }); - // Close the dropdown when clicking another element + // On click on anything except for the tags dropdown document.addEventListener('click', function (event) { if (!tagsDropdown.contains(event.target) && event.target !== tagsToggle) { tagsToggle.setAttribute('aria-expanded', 'false'); tagsDropdown.classList.add('hidden'); } }); + + // On search for a tag + tagSearch.addEventListener('input', function () { + populateTags(tagsList, tags, this.value); + }); + + // On select a tag + tagsList.addEventListener('change', function (event) { + if (event.target.type === 'checkbox') { + const selectedTag = event.target.value; + const isChecked = event.target.checked; + localStorage.setItem(`tag_${selectedTag}`, isChecked); + highlightSidebarLinks(); + } + }); }); \ No newline at end of file From cf5696d75718221d3a661abf0d7486012d9db486 Mon Sep 17 00:00:00 2001 From: Robert MacWha Date: Tue, 8 Oct 2024 16:07:58 -0400 Subject: [PATCH 11/13] fix: announcement-stripe overflowing at lower horizontal resolutions Also fixed layering issue due to background transparency --- theme/custom.css | 13 +------------ theme/index.hbs | 12 ++++++------ 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/theme/custom.css b/theme/custom.css index 9989d7f..1a2dab0 100644 --- a/theme/custom.css +++ b/theme/custom.css @@ -95,7 +95,7 @@ } .announcement-stripe { - background-color: #ff00004f; + background-color: #5e1118; font-weight: bold; color: #fff; padding: 10px; @@ -110,17 +110,6 @@ margin: 0; } -@media (max-width: 768px) { - .announcement-stripe p { - display: flex; - flex-direction: column; - } - - .announcement-stripe p span { - display: block; - } -} - /* Add this new style for the sidebar */ #sidebar { z-index: 1001; diff --git a/theme/index.hbs b/theme/index.hbs index 7e25bb2..ae79ad0 100644 --- a/theme/index.hbs +++ b/theme/index.hbs @@ -55,12 +55,6 @@
-
-

- This is a work in progress and not a release. We're looking for volunteers. - See Issues to know how to collaborate. -

-
+
+

+ This is a work in progress and not a release. We're looking for volunteers. + See Issues to know how to collaborate. +

+
{{> header}}