adds script and created files with images
|
@ -24,3 +24,5 @@ yalc.lock
|
|||
.idea
|
||||
|
||||
static/search-index.json
|
||||
|
||||
notionExportedFiles/*/
|
||||
|
|
|
@ -4,6 +4,8 @@ displayed_sidebar: main
|
|||
pagination_next: 'philosophy/overview'
|
||||
---
|
||||
|
||||
# Brand guidelines
|
||||
|
||||
The Logos Brand Guidelines are a comprehensive set of guidelines that serve as the foundation for Logos' visual identity. As a grassroots movement committed to providing trust-minimized, corruption-resistant governing services and social institutions to underserved citizens, Logos is rooted in a set of core values and principles that guide its overall branding strategy.
|
||||
|
||||
At the heart of the Logos Branding Language Guidelines is a modular approach to branding that allows for a flexible and adaptable approach. By breaking down the guidelines into smaller components, it becomes easier to build and maintain a cohesive brand identity that can evolve with the brand. This modularity ensures that all Logos sub-brands share the same DNA and core values while allowing for customization to meet the unique needs of each sub-brand.
|
|
@ -9,34 +9,32 @@ pagination_prev: 'philosophy/overview'
|
|||
|
||||
In this page, we'll discuss the core principles of our design and communication philosophy, and how they inform our approach to creating a modular co-branding system for Logos and its business units.
|
||||
|
||||
### The Message is the Message
|
||||
|
||||
Our design philosophy is born out of a resistance to the erosion of collective thinking and the domination of representations and projections in modern society. We believe that the spectacle, while beautiful, blocks our access to reality and leads to cultural degeneration. Proprietary design systems often turn messages into murky representations of ideologies and thoughts that lack transformative power.
|
||||
|
||||
To counteract this, our design system centers the mind and collective thinking. We aim to unlearn the gift-wrapping of content and enable a design system that is agnostic to technology, form, and containers. Our design system is utilitarian, enabling instead of decorating, and we emphasize that the message is the message, not the medium.
|
||||
|
||||
**Design as ideology**
|
||||
****Design as ideology****
|
||||
|
||||
We believe in designing solutions that resist dominant ideologies and promote social and political activism. Our design philosophy is communal, cooperative, and owned equally by all. Praxis, a symbiosis of theory and practice, is at the core of our design philosophy. Our solutions are designed to be censorship-resistant and protect the privacy of users.
|
||||
|
||||
**Design as Activism**
|
||||
****Design as Activism****
|
||||
|
||||
We believe that design is a form of activism. Our design systems insists that designs are objects, resisting the pull of the spectacle by stressing their material quality. We use design to cause change to occur in conformity with our will. By focusing on the idea of design as matter, we go against alienation and create designs that enable rather than decorate.
|
||||
|
||||
**Design as Archivism**
|
||||
****Design as Archivism****
|
||||
|
||||
Our design philosophy uses social-democratic language and memories of the welfare state system to create a subjective archive of social-democratic aesthetics. This archivism is our way of standing against the tide of populist and neoliberal ideologies. We believe that re-materializing design is a way to enable the "makeability" of society, which is the social-democratic concept of changing society through changing material circumstances. Our design system outlines the way out of alienation and enables the liberation of our senses through the de-alienating power of aesthetics.
|
||||
|
||||
**Design as Object**
|
||||
****Design as Object****
|
||||
|
||||
Our design system creates objects, not images. We show materiality through self-referentiality, stressing that a website is "just" a collection of pieces of text and information, a sheet of digital paper with some digital ink on it.
|
||||
|
||||
**Design without the designer**
|
||||
****Design without the designer****
|
||||
|
||||
We believe that design should not stand in the way of the message, and that it should not emerge from one central point of authority (the designer). Our design system is decentralized and uses accessible language to enable everyone to have access to and ownership of the creative process. We avoid terms like function-driven and content-driven, encouraging communication between living and thinking human beings. Everyone has the power to decide not only what they read, but how they read, gaining independence from dominant information channels and establishing their own. We aim to create solutions that are functional and serve a specific purpose, rather than being tied to a particular designer or design style.
|
||||
|
||||
Anonymous Design defines design that is created to fulfill a functional need, such as solving a problem, rather than being tied to a specific designer. By using accessible language and avoiding jargon, we aim to make the design system more inclusive and to promote a more democratic approach to design that values privacy.
|
||||
|
||||
**Openness and Accessibility**
|
||||
****Openness and Accessibility****
|
||||
|
||||
We believe in being transparent and open about our design choices and processes. Our solutions are designed to be accessible to as many people as possible, regardless of their technical expertise, physical abilities, or other circumstances. This includes providing solutions that are compatible with a range of internet speeds and devices. We aim to create an inclusive environment where everyone feels welcome and is not excluded based on any aspect of their identity or situation. Our solutions prioritize accessibility, while also protecting the privacy of users and enabling free expression.
|
|
@ -3,7 +3,44 @@ title: Gallery
|
|||
displayed_sidebar: main
|
||||
---
|
||||
|
||||
# Gallery
|
||||
|
||||
> 💡 **Unity, not uniformity. “A corporation should be like a painting; everything visible should contribute to the correct total statement.” — Eliot Noyes**
|
||||
[Sizzle Reel draft.mp4](Gallery%20e5522cb5bfc94082adac41f1ab17a673/Sizzle_Reel_draft.mp4)
|
||||
|
||||
This is our showcase
|
||||
![1920.png](/1920.png)
|
||||
|
||||
![article-page-light.jpg](/article-page-light.jpg)
|
||||
|
||||
![dflkdf.png](/dflkdf.png)
|
||||
|
||||
![dsdsdsds.png](/dsdsdsds.png)
|
||||
|
||||
![home-mobile.png](/home-mobile.png)
|
||||
|
||||
![home.png](/home.png)
|
||||
|
||||
![key-visual-wip.png](/key-visual-wip.png)
|
||||
|
||||
![kkk.png](/kkk.png)
|
||||
|
||||
![logos-guide-clearspace-mark.png](/logos-guide-clearspace-mark.png)
|
||||
|
||||
![logos-preview-twitter.png](/logos-preview-twitter.png)
|
||||
|
||||
[logoslos.md](Gallery%20e5522cb5bfc94082adac41f1ab17a673/logoslos.md)
|
||||
|
||||
![nomos-1920.png](/nomos-1920.png)
|
||||
|
||||
![padding.png](/padding.png)
|
||||
|
||||
![podcasts-tablet.png](/podcasts-tablet.png)
|
||||
|
||||
![Screenshot 2023-08-07 at 12.17 2.png](/Screenshot_2023-08-07_at_12.17_2.png)
|
||||
|
||||
![Screenshot 2023-10-06 at 15.25.51.png](/Screenshot_2023-10-06_at_15.25.51.png)
|
||||
|
||||
![search page-different view.png](/search_page-different_view.png)
|
||||
|
||||
![ss.png](/ss.png)
|
||||
|
||||
![we.png](/we.png)
|
|
@ -5,16 +5,18 @@ pagination_next: 'resources-and-tools/presentation-kits'
|
|||
pagination_prev: 'resources-and-tools/lsd/index'
|
||||
---
|
||||
|
||||
# **Design tokens**
|
||||
# Design tokens
|
||||
|
||||
Design tokens are variables that store values for the base layer of LSD, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system.
|
||||
|
||||
## Colour
|
||||
|
||||
![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/cf7ee51c-9ffe-47c1-b76e-59423d811b34/Untitled.png)
|
||||
![Untitled](/Untitled.png)
|
||||
|
||||
## Layout
|
||||
|
||||
![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/381e3bd0-013e-42a5-94ce-40d0e1f8747d/Untitled.png)
|
||||
![Untitled](/Untitled 1.png)
|
||||
|
||||
## **Typography**
|
||||
## **Typography**
|
||||
|
||||
![Untitled](/Untitled 2.png)
|
|
@ -5,9 +5,11 @@ pagination_next: 'resources-and-tools/lsd/design-tokens'
|
|||
pagination_prev: 'visual-language/grid-and-layout'
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
||||
## Logos System Design (LSD)
|
||||
|
||||
LSD is a rebellious open-source design system for products and digital experiences that defy the norm. Based on the [Philosophy](https://www.notion.so/Philosophy-e9f9330417fa4c4db19b32f3ad9c0e14?pvs=21) & [Visual Language](https://www.notion.so/Visual-Language-ba5c311d09c74fc4bc97ad0d4ed545ac?pvs=21) , we're tearing down the established order by removing unnecessary visual design layers and logic. Our core principle, "The message is the message," is a call to arms against the homogenized and trendy design that's suffocating the industry. We're giving the power back to the people by decentralizing design and placing more value on the content and message. This minimalistic and functional approach is a middle finger to the status quo.
|
||||
LSD is a rebellious open-source design system for products and digital experiences that defy the norm. Based on the [Philosophy](../../Philosophy%20e9f9330417fa4c4db19b32f3ad9c0e14.md) & [Visual Language](../../Brand%20Guidelines%200d3e1a6b893f49e4af154fae0efa585a/Visual%20Language%20ba5c311d09c74fc4bc97ad0d4ed545ac.md) , we're tearing down the established order by removing unnecessary visual design layers and logic. Our core principle, "The message is the message," is a call to arms against the homogenized and trendy design that's suffocating the industry. We're giving the power back to the people by decentralizing design and placing more value on the content and message. This minimalistic and functional approach is a middle finger to the status quo.
|
||||
|
||||
We're fed up with the bloated and superficial web design world and its endless parade of visual pollution. That's why we're taking a stand and focusing on what really matters: the message. LSD aims to reduce visual elements in its implementation, resulting in a radical approach that challenges the hype and noise in the current web design world (2.0 or 3.0). We want to take design back to its roots and make it accessible to everyone. LSD is about the message and nothing else. With working code, design tools and resources, human interface guidelines, and a community of fellow dissidents, LSD leads the charge against the establishment.
|
||||
|
||||
|
|
|
@ -32,12 +32,12 @@ We also believe in the importance of accessibility and ensuring that our designs
|
|||
|
||||
In summary, our approach to color is rooted in our core values of simplicity, functionality, and accessibility. We rely on default color systems to ensure consistency and accessibility, and we use color purposefully to complement our typography and other visual elements.
|
||||
|
||||
[Primary Palette](https://www.notion.so/8b15323df0d84a7c9ee520ecbcf38930?pvs=21)
|
||||
[Primary Palette](https://www.notion.so/8b15323df0d84a7c9ee520ecbcf38930)
|
||||
|
||||
PNG
|
||||
|
||||
![color.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/276ad339-3dfe-4ff5-b979-654533b5c198/color.png)
|
||||
![color.png](/color.png)
|
||||
|
||||
SVG
|
||||
|
||||
![color.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/922a052a-1963-41a0-8bfc-2cafc0213fbd/color.svg)
|
||||
![color.svg](/color.svg)
|
|
@ -36,40 +36,48 @@ In summary, our grid system is a fundamental part of our design philosophy, refl
|
|||
|
||||
PNG
|
||||
|
||||
![primitives.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/181e8303-3332-4815-8735-1d87d3124321/primitives.png)
|
||||
![primitives.png](/primitives.png)
|
||||
|
||||
SVG
|
||||
|
||||
![primitives.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/10d76d7c-e24b-48f4-b4d2-f8de2feef732/primitives.svg)
|
||||
![primitives.svg](/primitives.svg)
|
||||
|
||||
### Tokens
|
||||
|
||||
PNG
|
||||
|
||||
![tokens.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/62c58a6c-f28a-48c3-8282-23d8750c8bdc/tokens.png)
|
||||
![tokens.png](/tokens.png)
|
||||
|
||||
SVG
|
||||
|
||||
![tokens.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/40f76af7-5b03-4d69-b5e2-47feafa2b0ee/tokens.svg)
|
||||
![tokens.svg](/tokens.svg)
|
||||
|
||||
## Logos State Podcast
|
||||
|
||||
2 column 20px
|
||||
|
||||
![Logos-Example-03.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/894300dd-0bf8-40e7-be75-e12069578dd0/Logos-Example-03.svg)
|
||||
![Logos-Example-03.svg](/Logos-Example-03.svg)
|
||||
|
||||
4 column 20px
|
||||
|
||||
![Logos-Typestack-03.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/de7cebc6-1789-44e3-bd1f-92bf37322f8e/Logos-Typestack-03.svg)
|
||||
![Logos-Typestack-03.svg](/Logos-Typestack-03.svg)
|
||||
|
||||
## Hashing It Out
|
||||
|
||||
3 column 20px
|
||||
|
||||
![HIO-Examples-02.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/5ff35d8c-69ca-4fac-96dd-42149f062f7b/HIO-Examples-02.svg)
|
||||
![HIO-Examples-02.svg](/HIO-Examples-02.svg)
|
||||
|
||||
2 column 20px
|
||||
|
||||
![HIO-Examples-13.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/7c6cfd61-9bcc-46fe-b13e-8227a0b6b930/HIO-Examples-13.svg)
|
||||
![HIO-Examples-13.svg](/HIO-Examples-13.svg)
|
||||
|
||||
## Generic Twitter
|
||||
## Generic Twitter
|
||||
|
||||
![Logos-Twitter-Layout-01.svg](/Logos-Twitter-Layout-01.svg)
|
||||
|
||||
![Logos-Twitter-Layout-03.svg](/Logos-Twitter-Layout-03.svg)
|
||||
|
||||
![Logos-Twitter-Layout-04.svg](/Logos-Twitter-Layout-04.svg)
|
||||
|
||||
![Logos-Twitter-Layout-05.svg](/Logos-Twitter-Layout-05.svg)
|
|
@ -6,4 +6,6 @@ pagination_next: 'visual-language/logo'
|
|||
pagination_prev: 'voice/index'
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
||||
Welcome to the Visual Language section of the Logos Branding Guidelines. Here, we explore the visual elements that make up the Logos brand identity, including the logo, color palette, typography, imagery, and other design systems. Our visual language is a vital part of how we communicate our message and values to the world. It not only helps to establish a memorable and recognizable brand identity but also plays a crucial role in building trust and credibility with our community. In this section, we delve into the principles and guidelines that underpin our visual language and provide a framework for creating cohesive and impactful visual communication.
|
|
@ -6,6 +6,8 @@ pagination_next: 'visual-language/typography'
|
|||
pagination_prev: 'visual-language/index'
|
||||
---
|
||||
|
||||
# Logo
|
||||
|
||||
# Brand Marks
|
||||
|
||||
### Choosing the right mark
|
||||
|
@ -16,7 +18,7 @@ Please do not edit, change, distort, recolor, or reconfigure the Logos mark. Our
|
|||
|
||||
## Primary Mark
|
||||
|
||||
[Untitled Database](https://www.notion.so/86e8c3f2be7c4f60901f653a0f35ce25?pvs=21)
|
||||
[Untitled Database](https://www.notion.so/86e8c3f2be7c4f60901f653a0f35ce25)
|
||||
|
||||
---
|
||||
|
||||
|
@ -24,7 +26,7 @@ Please do not edit, change, distort, recolor, or reconfigure the Logos mark. Our
|
|||
|
||||
When we represent our brand throughout the web or in products we do not own, it is usually best to use a lockup. These vertical lockups are best used arranged horizontally in a line.
|
||||
|
||||
[Untitled Database](https://www.notion.so/68cef135a831455abd309dc1ce5a00b2?pvs=21)
|
||||
[Untitled Database](https://www.notion.so/68cef135a831455abd309dc1ce5a00b2)
|
||||
|
||||
---
|
||||
|
||||
|
@ -32,7 +34,7 @@ When we represent our brand throughout the web or in products we do not own, it
|
|||
|
||||
When we represent our brand throughout the web or in products we do not own, it is usually best to use a lockup. These horizontal lockups are best used stacked vertically.
|
||||
|
||||
[Untitled Database](https://www.notion.so/23686be708a0493f98851b2562c05dc9?pvs=21)
|
||||
[Untitled Database](https://www.notion.so/23686be708a0493f98851b2562c05dc9)
|
||||
|
||||
---
|
||||
|
||||
|
@ -42,7 +44,7 @@ When placing the logo, it’s important that it’s given enough space from othe
|
|||
|
||||
If you need to define the unit of space, the best way is to measure the bottom of any given mark to the edge of the image or the baseline of the logotype in the lockup to the bottom edge of the image. This unit is the same across all of our marks.
|
||||
|
||||
![logos-guide-clearspace-mark.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/a09dbb19-3523-4735-9db9-b6a1e6bd68e1/logos-guide-clearspace-mark.png)
|
||||
![logos-guide-clearspace-mark.png](/logos-guide-clearspace-mark.png)
|
||||
|
||||
### Co-Branding
|
||||
|
||||
|
@ -62,8 +64,8 @@ Hierarchy is determined by the placement order, the most important being left in
|
|||
|
||||
Our asset library will be more robust in the future, but the images below are branded avatars social accounts, followed by a preview of how they will look on Twitter.
|
||||
|
||||
![logos-preview-twitter.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/246a20fe-865b-4d2b-b173-a24b6e432a7a/logos-preview-twitter.png)
|
||||
![logos-preview-twitter.png](/logos-preview-twitter.png)
|
||||
|
||||
[Untitled Database](https://www.notion.so/d4660e2f486143dbb37c87b93722b510?pvs=21)
|
||||
[Untitled Database](https://www.notion.so/d4660e2f486143dbb37c87b93722b510)
|
||||
|
||||
---
|
|
@ -101,26 +101,28 @@ By following these typography specifications, we ensure that our designs are con
|
|||
|
||||
PNG
|
||||
|
||||
![sans.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/0ca9b8e2-0a9e-4d3c-b1ed-6ea9b82c0ed0/sans.png)
|
||||
![sans.png](/sans.png)
|
||||
|
||||
SVG
|
||||
|
||||
![sans.svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/eeec47dd-6829-4645-92c6-8f1641c3579c/sans.svg)
|
||||
![sans.svg](/sans.svg)
|
||||
|
||||
### Serif
|
||||
|
||||
PNG
|
||||
|
||||
![serif.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/c1f77059-2f60-40b5-93d7-ed42b7c895e5/serif.png)
|
||||
![serif.png](/serif.png)
|
||||
|
||||
SVG
|
||||
|
||||
![serif .svg](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/054cfc0e-b27c-4a27-b271-192f07ff9781/serif_.svg)
|
||||
![serif .svg](/serif_.svg)
|
||||
|
||||
## Mono
|
||||
|
||||
PNG
|
||||
|
||||
![mono.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/1518abd9-c08f-4989-93c1-96525e62bce5/f8817471-7496-401f-8e61-e88ea59ea8de/mono.png)
|
||||
![mono.png](/mono.png)
|
||||
|
||||
SVG
|
||||
SVG
|
||||
|
||||
![mono.svg](/mono.svg)
|
|
@ -5,49 +5,49 @@ pagination_next: 'visual-language/index'
|
|||
pagination_prev: 'philosophy/principles'
|
||||
---
|
||||
|
||||
# Voice: Mode of Presentation
|
||||
# Overview
|
||||
|
||||
Our Mode of Presentation is our unmistakable way of communicating. It ensures we are consistent and recognisable wherever we are. Like our visual identity, our Mode of Presentation builds trust with our audience and community and helps people connect with the Logos culture and ideas.
|
||||
|
||||
**The following guidelines are for strategists, creatives, presenters, and anyone communicating on behalf of Logos.**
|
||||
|
||||
# Why Logos is communicating
|
||||
### Why Logos is communicating
|
||||
|
||||
**The Logos mission is to cultivate a community that will build the technology, culture, and governance framework necessary to launch network states.**
|
||||
|
||||
Logos is dedicated to the cause of human liberty, and we believe launching netwok states is the best way to ensure liberty exists for generations to come.
|
||||
|
||||
### Therefore:
|
||||
**Therefore:**
|
||||
|
||||
Logos’ primary reason for communicating is to attract value-aligned people who are ready and willing to join us in building a free and prosperous future.
|
||||
|
||||
We attract value-aligned people by being honest about our intentions when we communicate. We lead with our mission and [principles](https://status.im/about/).
|
||||
|
||||
# How we communicate
|
||||
### How we communicate
|
||||
|
||||
## Be Clear
|
||||
**Be Clear**
|
||||
|
||||
Our only steadfast rule is whenever we communicate, we are clear. Use straightforward, simple language and structure. Avoid jargon. Write in good, professional, non-academic Brittish English. Remember that the purpose of communicating is to be understood by the intended audience.
|
||||
|
||||
## Tone of voice
|
||||
**Tone of voice**
|
||||
|
||||
### Sincere
|
||||
*Sincere*
|
||||
|
||||
We are clear in our message. We are honest and earnest. We do not hide behind innuendo. We do not inflate for shock value, nor do we couch. We say things as they are. We’re straight-shooters.
|
||||
|
||||
### Bold
|
||||
*Bold*
|
||||
|
||||
What we are trying to accomplish puts us at odds with some of the most powerful entities on the planet. Despite that, we communicate with courage. We are confident in our convictions without getting into a flame war or bad-mouthing other projects. We take a stand for things we believe in.
|
||||
|
||||
### Optimistic
|
||||
*Optimistic*
|
||||
|
||||
Logos exists to help create a brighter future for all of humanity. Thus, the assumptions are *there will be a future*, and *peace and prosperity are possible*. We are upholding, advancing, and building, not fighting, hindering, or breaking. We do not doompost or brood.
|
||||
|
||||
### Serious
|
||||
*Serious*
|
||||
|
||||
On websites and blog posts, and during presentations our tone leans serious and sober. We present ourselves as competent, reliable, and committed. Sometimes we take that down a notch or two on socials.
|
||||
|
||||
## Style:
|
||||
### Style:
|
||||
|
||||
**Language**: British English
|
||||
|
||||
|
|
|
@ -0,0 +1,227 @@
|
|||
import * as fs from 'fs'
|
||||
import * as path from 'path'
|
||||
|
||||
// run with:
|
||||
// ts-node notionExportToDocusaurus.ts
|
||||
|
||||
const notionFolder =
|
||||
'./notionExportedFiles/Logos Brand Guidelines playground 46f95d9b2891477d8ed1cc20cda54459'
|
||||
|
||||
interface EntryInfo {
|
||||
id: string | null
|
||||
name: string
|
||||
type: 'file' | 'folder'
|
||||
content?: string // only for .md files
|
||||
docusaurusPage?: string
|
||||
relativePath: string
|
||||
}
|
||||
|
||||
const extractIdFromName = (name: string): string | null => {
|
||||
const parts = name.split(' ')
|
||||
if (parts.length < 2) return null
|
||||
|
||||
// For folders
|
||||
if (!name.includes('.')) return parts[parts.length - 1]
|
||||
|
||||
// For files
|
||||
const lastPart = parts[parts.length - 1]
|
||||
const fileNameWithoutExtension = lastPart.split('.')[0]
|
||||
|
||||
return fileNameWithoutExtension || null
|
||||
}
|
||||
|
||||
const iterateThroughFolder = (
|
||||
folderPath: string,
|
||||
relativePath = '',
|
||||
): EntryInfo[] => {
|
||||
const entries = fs.readdirSync(folderPath, { withFileTypes: true })
|
||||
const result: EntryInfo[] = []
|
||||
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(folderPath, entry.name)
|
||||
const currentRelativePath = path.join(relativePath, entry.name)
|
||||
const id = extractIdFromName(entry.name)
|
||||
|
||||
if (entry.isDirectory()) {
|
||||
result.push({
|
||||
id,
|
||||
name: entry.name,
|
||||
type: 'folder',
|
||||
relativePath: currentRelativePath,
|
||||
})
|
||||
result.push(...iterateThroughFolder(fullPath, currentRelativePath))
|
||||
} else {
|
||||
const entryInfo: EntryInfo = {
|
||||
id,
|
||||
name: entry.name,
|
||||
type: 'file',
|
||||
relativePath: currentRelativePath,
|
||||
}
|
||||
|
||||
// Check if it's an .md file and if so, get its contents
|
||||
if (path.extname(entry.name) === '.md') {
|
||||
entryInfo.content = fs.readFileSync(fullPath, 'utf-8')
|
||||
}
|
||||
|
||||
if (id) {
|
||||
const docusaurusPage = mapNotionIdToDocusaurusPage(id)
|
||||
if (docusaurusPage) {
|
||||
entryInfo.docusaurusPage = docusaurusPage
|
||||
}
|
||||
}
|
||||
|
||||
result.push(entryInfo)
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const processLinks = (notionContent: string): string => {
|
||||
// Replace .csv links with a link to the Notion page.
|
||||
const csvLinkReplacer = (match: string, linkText: string, csvId: string) => {
|
||||
return `[${linkText}](https://www.notion.so/${csvId})`
|
||||
}
|
||||
|
||||
// Replace image paths
|
||||
const imageLinkReplacer = (
|
||||
match: string,
|
||||
altText: string,
|
||||
imageName: string,
|
||||
) => {
|
||||
return `![${altText}](${imageName.replace('%20', ' ')})`
|
||||
}
|
||||
|
||||
// Process the csv links
|
||||
notionContent = notionContent.replace(
|
||||
/\[([^\]]+?)\]\([^)]+?%20([a-f0-9]{32})\.csv\)/g,
|
||||
csvLinkReplacer,
|
||||
)
|
||||
|
||||
// Process the image links
|
||||
notionContent = notionContent.replace(
|
||||
/\!\[(.*?)\]\(.*?(\/[^\/]+?\.(?:png|jpg|jpeg|gif|svg))\)/g,
|
||||
imageLinkReplacer,
|
||||
)
|
||||
|
||||
return notionContent
|
||||
}
|
||||
|
||||
const updateDocusaurusFileWithNotionContent = (
|
||||
docusaurusFilePath: string,
|
||||
notionContent: string,
|
||||
) => {
|
||||
// Process the links in the notion file
|
||||
const processedContent = processLinks(notionContent)
|
||||
|
||||
// Read the existing Docusaurus file
|
||||
const existingContent = fs.readFileSync(docusaurusFilePath, 'utf-8')
|
||||
|
||||
// Extract the header/metadata from the existing docusaurus file
|
||||
const headerMatch = existingContent.match(/---[\s\S]+?---/)
|
||||
const header = headerMatch ? headerMatch[0] : ''
|
||||
|
||||
// Combine the original docusaurus header + processed notion content.
|
||||
const updatedContent = `${header}\n\n${processedContent}`
|
||||
|
||||
// Write back the updated content to the file
|
||||
fs.writeFileSync(docusaurusFilePath, updatedContent)
|
||||
}
|
||||
|
||||
const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg']
|
||||
|
||||
const moveImagesToStatic = (entry: EntryInfo) => {
|
||||
const filePath = path.join(notionFolder, entry.relativePath)
|
||||
|
||||
if (IMAGE_EXTENSIONS.includes(path.extname(entry.name))) {
|
||||
const destinationFolder = './static'
|
||||
const destinationPath = path.join(
|
||||
destinationFolder,
|
||||
path.basename(entry.name),
|
||||
)
|
||||
|
||||
// Ensure the destination folder exists (in this case just ./static, but this ensures it's created if missing for some reason)
|
||||
fs.mkdirSync(destinationFolder, { recursive: true })
|
||||
|
||||
// Check if file already exists. If not, create a copy.
|
||||
if (!fs.existsSync(destinationPath)) {
|
||||
fs.copyFileSync(filePath, destinationPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const mapNotionIdToDocusaurusPage = (notionId: string): string | undefined => {
|
||||
if (notionId === '419bedb2ead6415aba5ef89ec8899362') {
|
||||
return '/philosophy/overview.md'
|
||||
}
|
||||
|
||||
if (notionId === 'ce62ed2988cd4293b3f7eb1f49110c67') {
|
||||
return '/philosophy/principles.md'
|
||||
}
|
||||
|
||||
if (notionId === 'dff0a02ce0d8431d8841e97a975844bb') {
|
||||
return 'resources-and-tools/lsd/index.md'
|
||||
}
|
||||
|
||||
if (notionId === '31ea305ac88342ebbc505ea93e3bca3a') {
|
||||
return 'resources-and-tools/lsd/design-tokens.md'
|
||||
}
|
||||
|
||||
if (notionId === 'e5522cb5bfc94082adac41f1ab17a673') {
|
||||
return 'resources-and-tools/gallery.md'
|
||||
}
|
||||
|
||||
if (notionId === 'c2c250f49ccf47d5835001d407237e8c') {
|
||||
return 'resources-and-tools/presentation-kits.md'
|
||||
}
|
||||
|
||||
if (notionId === '6c4c002d6ead446cb1f58cbb34a7be4c') {
|
||||
return 'visual-language/index.md'
|
||||
}
|
||||
|
||||
if (notionId === '8a77263985fa4034bcece99f49850c2c') {
|
||||
return 'visual-language/logo.md'
|
||||
}
|
||||
|
||||
if (notionId === '11be69519d6649f8a4a10697b503defc') {
|
||||
return 'visual-language/typography.md'
|
||||
}
|
||||
|
||||
if (notionId === 'c9c45bd6789c41cbbc1c71b296cf68a8') {
|
||||
return 'visual-language/color.md'
|
||||
}
|
||||
|
||||
if (notionId === '38c306bc2d20470abc12b98b5e90b7b5') {
|
||||
return 'visual-language/grid-and-layout.md'
|
||||
}
|
||||
|
||||
if (notionId === '066ee8d5fd9f4dec90716560ccfa59ff') {
|
||||
return 'voice/index.md'
|
||||
}
|
||||
|
||||
if (notionId === 'd074e71c5fd84900a53038757ce78fbb') {
|
||||
return 'index.md'
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
//// Main script:
|
||||
;(async () => {
|
||||
const entryInfos = iterateThroughFolder(notionFolder)
|
||||
|
||||
// First, move all images to the static folder
|
||||
for (const entry of entryInfos) {
|
||||
moveImagesToStatic(entry)
|
||||
}
|
||||
|
||||
// Now, filter entries that have a corresponding Docusaurus page and update them
|
||||
const withDocusaurusPage = entryInfos.filter(entry => entry.docusaurusPage)
|
||||
for (const entry of withDocusaurusPage) {
|
||||
if (entry.docusaurusPage && entry.content) {
|
||||
updateDocusaurusFileWithNotionContent(
|
||||
path.join('./docs', entry.docusaurusPage),
|
||||
entry.content,
|
||||
)
|
||||
}
|
||||
}
|
||||
})()
|
|
@ -0,0 +1,7 @@
|
|||
The exported notion page from:
|
||||
|
||||
https://www.notion.so/Logos-Brand-Guidelines-playground-46f95d9b2891477d8ed1cc20cda54459
|
||||
|
||||
Goes into this folder. The folder should be named something like:
|
||||
|
||||
"Logos Brand Guidelines playground 46f95d9b2891477d8ed1cc20cda54459"
|
After Width: | Height: | Size: 250 KiB |
After Width: | Height: | Size: 558 KiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 2.8 MiB |
After Width: | Height: | Size: 385 KiB |
After Width: | Height: | Size: 237 KiB |
After Width: | Height: | Size: 371 KiB |
After Width: | Height: | Size: 129 KiB |
After Width: | Height: | Size: 178 KiB |
After Width: | Height: | Size: 126 KiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 51 KiB |
After Width: | Height: | Size: 245 KiB |
After Width: | Height: | Size: 107 KiB |
After Width: | Height: | Size: 857 KiB |
After Width: | Height: | Size: 58 KiB |
After Width: | Height: | Size: 479 KiB |
After Width: | Height: | Size: 1.4 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 797 KiB |
After Width: | Height: | Size: 2.9 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 139 KiB |
After Width: | Height: | Size: 136 KiB |
After Width: | Height: | Size: 970 KiB |
After Width: | Height: | Size: 581 KiB |
After Width: | Height: | Size: 96 KiB |
After Width: | Height: | Size: 310 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 97 KiB |
After Width: | Height: | Size: 140 KiB |
After Width: | Height: | Size: 791 KiB |
After Width: | Height: | Size: 755 KiB |
After Width: | Height: | Size: 135 KiB |
After Width: | Height: | Size: 1011 KiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 173 KiB |
After Width: | Height: | Size: 666 KiB |
|
@ -10105,6 +10105,11 @@ markdown-escapes@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
|
||||
integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
|
||||
|
||||
marked@^9.1.0:
|
||||
version "9.1.0"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-9.1.0.tgz#7a085c7d46730dee2b801f1c1b35c5745479e270"
|
||||
integrity sha512-VZjm0PM5DMv7WodqOUps3g6Q7dmxs9YGiFUZ7a2majzQTTCgX+6S6NAJHPvOhgFBzYz8s4QZKWWMfZKFmsfOgA==
|
||||
|
||||
mdast-squeeze-paragraphs@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-4.0.0.tgz#7c4c114679c3bee27ef10b58e2e015be79f1ef97"
|
||||
|
|