This is how my data gets rendered:
You can see above that it renders the data input next to each other. Can I use CSS to display the text as a list?
My contentful query:
query MyQuery {
allContentful {
edges {
node {
feelings
}
}
}
}
OUTPUT:
{
"data": {
"allContentful": {
"edges": [
{
"node": {
"feelings": [
"Happy / Good Mood",
"Creative",
"Sleepy / Couch Lock"
]
}
},
And here is the return:
const StrainTemplate = ({
data: {
strain: {
feelings,
},
},
<p className="info-text"{feelings}</p>
If it's rendered like in your images, then you can use white-space: pre; to include the whitespace
.info-text {
white-space: pre;
}
<p class='info-text'>
Happy / Good Mood
Creative
Sleepy / Couchy Look
</p>
Note: this will work if your rendered content has a whitespace and will follow it like [Tab Space] or [New Line], but if your rendered content only contains [Space] then it will remain in the same line
Not a CSS solution but can you directly make it as the li elements
feeling.map(eachWord => <li>{eachWord}</li>)
Related
I'm trying to customize the Tailwind Typography plugin, as follows:
typography (theme) {
return {
DEFAULT: {
css: {
'code::before': {
content: 'none', // don’t generate the pseudo-element
//content: '""', // this is an alternative: generate pseudo element using an empty string
},
'code::after': {
content: 'none'
},
code: {
color: theme('colors.slate.700'),
fontWeight: "400",
backgroundColor: theme('colors.stone.100/30'),
borderRadius: theme('borderRadius.DEFAULT'),
borderWidth: '1px',
paddingLeft: theme('spacing[1.5]'),
paddingRight: theme('spacing[1.5]'),
paddingTop: theme('spacing[0.5]'),
paddingBottom: theme('spacing[0.5]'),
},
}
},
invert: {
css: {
code: {
color: theme('colors.slate.100'),
backgroundColor: theme('colors.slate.800'),
borderColor: theme('colors.slate.600'),
}
}
}
}
},
How can I apply a color value to backgroundColor - based on one of the built in colors, with with opacity applied? For example colors.slate.800 / 50 (which doesn't work)
This is a tricky one. The problem is theme function will return HEX value for colors - it simply gets value from resolved configuration in dot notation. So theme('colors.red.500/300') is not valid (at least for now. I think it worth to open PR or Discussion)
All you need to solve the problem is to convert HEX to RGB. There are two Tailwind's ways I know but of course you're free to use any similar approach
First one - convert using Tailwind's withAlphaVariable function. It accepts an object with CSS property, color name and variable name.
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable')
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
// This will create CSS-like object
// you should destruct and override CSS-variable with desired opacity
const proseCodeBgColor = withAlphaVariable({
color: theme('colors.red.500'), // get color from theme config
property: 'background-color',
variable: '--tw-my-custom-bg-opacity', // could be any
})
return {
DEFAULT: {
css: {
code: {
...proseCodeBgColor,
'--tw-my-custom-bg-opacity': '.3', // opacity
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Second one much simplier - use #apply directive. Pass desired Tailwind's utilities as a key and empty object as a value
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
return {
DEFAULT: {
css: {
code: {
// you may pass as much utilities as you need eg `#apply bg-red-500/30 text-lg font-bold`: {}
'#apply bg-red-500/30': {},
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Worth to mention you can customize code background as utility prose-code:bg-blue-500/50
<div class="prose prose-code:bg-blue-500/50">
<code>
npm install tailwindcss
</code>
</div>
DEMO
I want to add links to some related entities and collection, without all property data in one response, only the Link.
For unterstanding I structure the Question in some parts
Simple example of data Model
Order
Order->AddressFrom (Entity)
Order->PackageItems (Collection)
Which is the wright HAETOAS way to generate links or how to name entities in response.
First question: How to link address, double in entity name and links part and how to nam?
{
"_embedded":{
"orders":[
{
"id":"id",
"addressLinkFrom":{
"href":"link"
},
"_links":{
"self":{
"href":"link"
},
"addressFrom":{
"href":"d"
}
}
}
]
}
}
or
"addressFrom":{
"href":"link"
},
"_links":{
...
}
or
or
"addressFrom":{
"self":{
"href":"link"
}
},
"_links":{
...
}
Second: How to link collection to specific and not all entities
{
"_embedded":{
"orders":[
{
"id":"id",
"packageItemIds":[
{
"href":"link"
},
{
"href":"link"
}
]
}
]
}
}
or
"packageItemIds":[
{
"self:"{
"href":"link"
}
}]
Third: How is the right format for (update, post), which I have to parse, like the address, where I'm sending the ID or like the packageItems, where I sending the link.
{
"id":"id",
"addressFrom":{
"id":"12345"
}
"packageItems":[
{
"href":"link"
},
{
"href":"link"
}
]
}
For your information, as frontend Client I'm using lagoshny /
ngx-hateoas-client,
when someone has their extra information beside the HAETOAS standard, how is the best way, please tell me.
Thanks for your help.I want to add links to some related entities and collection, without all data in one response.
I ve been wondering is there is a way to get tiptap or Prosemirror node's height and insert those values into arrtibutes.
So best case scenario would bo to be able to use either
getBoundingClientRect
or
clientHeight
and get them inside every update cycle for instance in custom node extenstion addAttributes
So I imagine that the below code could look like that, but of course it's not returning any value ....
addAttributes() {
return {
height:
{ default: null,
parseHTML: element => element.clientHeight,
renderHTML: attributes => {
return { 'data-height': attributes.height,
style:height: ${attributes.height
},
}
},
},
}
},
I have a directive for a table with collapsible rows that only allows one row to be open at a time like this:
HTML:
<div class="my-table">
<div class="table-header">
... table headers ...
</div>
<my-table-row ng-repeat="itm in itms" itm="itm"></my-table-row>
</div>
JS Directive:
app.directive('myTable', function() {
return {
restrict: 'E',
scope: {
itms: '='
},
controller: 'TableController',
templateUrl: '/views/directives/my-table.html'
};
});
JS Controller:
app.controller('TableController', ['$scope', function($scope) {
$scope.rows = [];
$scope.toggleRow = function(row) {
row.open = !row.open;
};
this.addRow = function addRow(row) {
$scope.rows.push(row);
};
this.toggleOpen = function toggleOpen(selectedRow) {
angular.forEach($scope.rows, function(row) {
if (row === selectedRow) {
$scope.toggleRow(selectedRow);
} else {
row.open = false;
}
});
};
}]);
and the rows like this:
HTML:
<div class="table-row" ng-class="{ 'open': open }" ng-click="toggleOpen(this)">
... row contents code ...
</div>
JS Directive:
app.directive('myTableRow', function() {
return {
require: '^myTable',
restrict: 'E',
scope: {
itm: '='
},
link: function(scope, element, attrs, tableCtrl) {
scope.open = false;
scope.toggleOpen = tableCtrl.toggleOpen;
tableCtrl.addRow(scope);
},
templateUrl: '/views/directives/my-table-row.html'
};
});
used in template like this:
<my-table itms="itms"></my-table>
This all works, but I have a CSS pseudo element to round the corners of the final row like:
.table .table-row:last-child {
border-radius: 0 0 4px 4px;
}
However, ng-repeat is wrapping a tag around my table rows which is causing the pseudo selector to see them all as the last child. I've tried restructuring, tried using $last and making an actual class for the last row, moving things around, but I'm out of ideas. Any thoughts out there?
as I understood, css class table-row is located within myTableRow directive, which does not have replace: true property. This means that table-row css class is wrapped by my-table-row directive attribute, so, in order to get to the last row, your CSS rule should be:
.table my-table-row:last-child .table-row {
border-radius: 0 0 4px 4px;
}
I'm using Redactor and need to dynamically add elements to a custom dropdown menu. I can't find any way of doing this in the documentation - does anyone know if this is possible?
Yes, it's possible if you use this:
$('#redactor').redactor({
focus: true,
buttonsAdd: ['|', 'button1'],
buttonsCustom: {
button1: {
title: 'Button',
callback: function(buttonName, buttonDOM, buttonObject) { /* … */ },
dropdown: {
alignleft: {
title: lang.align_left,
func: 'alignmentLeft'
},
aligncenter: {
title: lang.align_center,
func: 'alignmentCenter'
}
}
}
}
});